diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
index e55fbbab62..ed5438fbfa 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -2,85 +2,85 @@ name: Bug Report
 description: Report an Insomnia bug
 labels: [B-bug, S-unverified]
 body:
-- type: textarea
-  attributes:
-    label: Expected Behavior
-    description: A clear and concise description of what you expected to happen.
-  validations:
-    required: true
-- type: markdown
-  attributes:
-    value: '> **Tip**: You can attach images or log files to textareas by clicking to highlight and then dragging files in.'
-- type: textarea
-  attributes:
-    label: Actual Behavior
-    description: A clear description of what actually happens.
-  validations:
-    required: true
-- type: textarea
-  attributes:
-    label: Reproduction Steps
-    description: Provide steps to reproduce the behavior
-    placeholder: |
-      1. Go to '...'
-      2. Click on '....'
-      3. Scroll down to '....'
-      4. See error
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    options:
-      - label: I have searched the [issue tracker](https://www.github.com/Kong/insomnia/issues) for this problem.
-        required: true
-- type: checkboxes
-  attributes:
-    label: Which sync method do you use?
-    options:
-      - label: Git sync.
-      - label: Insomnia Cloud sync.
-      - label: Local only
-- type: textarea
-  attributes:
-    label: Additional Information
-    description: If your problem needs further explanation, please add more information here.
-- type: input
-  attributes:
-    label: Insomnia Version
-    description: What version of Insmonia are you using?
-    placeholder: "2021.5.0"
-  validations:
-    required: true
-- type: dropdown
-  attributes:
-    label: What operating system are you using?
-    options:
-      - Windows
-      - macOS
-      - Ubuntu
-      - Other Linux
-      - Other (specify below)
-  validations:
-    required: true
-- type: input
-  attributes:
-    label: Operating System Version
-    description: |-
-      What operating system version are you using?
-      On Windows, click Start button > Settings > System > About.
-      On macOS, click the Apple Menu > About This Mac.
-      On Linux, use `lsb_release` or `uname -a`.
-    placeholder: "e.g. Windows 10 version 1909, macOS Catalina 10.15.7, or Ubuntu 20.04"
-  validations:
-    required: true
-- type: input
-  attributes:
-    label: Installation method
-    description: How did you install Insomnia?
-    placeholder: "e.g. download from insomnia.rest, homebrew, apt, etc."
-  validations:
-    required: true
-- type: input
-  attributes:
-    label: Last Known Working Insomnia version
-    description: What is the last version of Insomnia this worked in, if applicable?
-    placeholder: "2021.4.0"
+  - type: textarea
+    attributes:
+      label: Expected Behavior
+      description: A clear and concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: markdown
+    attributes:
+      value: '> **Tip**: You can attach images or log files to textareas by clicking to highlight and then dragging files in.'
+  - type: textarea
+    attributes:
+      label: Actual Behavior
+      description: A clear description of what actually happens.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Reproduction Steps
+      description: Provide steps to reproduce the behavior
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+  - type: checkboxes
+    attributes:
+      label: Is there an existing issue for this?
+      options:
+        - label: I have searched the [issue tracker](https://www.github.com/Kong/insomnia/issues) for this problem.
+          required: true
+  - type: checkboxes
+    attributes:
+      label: Which sync method do you use?
+      options:
+        - label: Git sync.
+        - label: Insomnia Cloud sync.
+        - label: Local only
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: If your problem needs further explanation, please add more information here.
+  - type: input
+    attributes:
+      label: Insomnia Version
+      description: What version of Insmonia are you using?
+      placeholder: '2021.5.0'
+    validations:
+      required: true
+  - type: dropdown
+    attributes:
+      label: What operating system are you using?
+      options:
+        - Windows
+        - macOS
+        - Ubuntu
+        - Other Linux
+        - Other (specify below)
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Operating System Version
+      description: |-
+        What operating system version are you using?
+        On Windows, click Start button > Settings > System > About.
+        On macOS, click the Apple Menu > About This Mac.
+        On Linux, use `lsb_release` or `uname -a`.
+      placeholder: 'e.g. Windows 10 version 1909, macOS Catalina 10.15.7, or Ubuntu 20.04'
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Installation method
+      description: How did you install Insomnia?
+      placeholder: 'e.g. download from insomnia.rest, homebrew, apt, etc.'
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Last Known Working Insomnia version
+      description: What is the last version of Insomnia this worked in, if applicable?
+      placeholder: '2021.4.0'
diff --git a/.github/workflows/release-build.yml b/.github/workflows/release-build.yml
index c22fcae227..a273c7b224 100644
--- a/.github/workflows/release-build.yml
+++ b/.github/workflows/release-build.yml
@@ -74,7 +74,7 @@ jobs:
       - name: Package app (Linux ARM64 only)
         if: runner.os == 'Linux' && runner.arch == 'ARM64'
         shell: bash
-        run:  npm run app-package
+        run: npm run app-package
         env:
           NODE_OPTIONS: '--max_old_space_size=6144'
           BUILD_TARGETS: AppImage,tar.gz
@@ -112,7 +112,6 @@ jobs:
         shell: bash
         run: ./build-secure-wrapper.sh CI
 
-
       - name: Move .dll and .exe files to /tosign (PowerShell)
         if: runner.os == 'Windows'
         shell: pwsh
@@ -158,7 +157,6 @@ jobs:
           CREDENTIAL_ID: ${{secrets.ES_CREDENTIAL_ID}}
           TOTP_SECRET: ${{secrets.ES_TOTP_SECRET}}
 
-
       - name: Package inso
         run: |
           echo "Replacing electron binary with node binary"
@@ -182,7 +180,7 @@ jobs:
           VERSION: ${{ env.INSO_VERSION }}
 
       - name: Notarize Inso CLI installer (macOS only)
-        if:  runner.os == 'macOS'
+        if: runner.os == 'macOS'
         uses: lando/notarize-action@b5c3ef16cf2fbcf2af26dc58c90255ec242abeed # v2
         with:
           product-path: ./packages/${{ env.INSO_PACKAGE_NAME }}/artifacts/inso-${{ matrix.os }}-${{ env.INSO_VERSION }}.pkg
@@ -273,7 +271,7 @@ jobs:
         id: release_version
         shell: bash
         run: |
-           echo "version=${BRANCH/release\//}" >> $GITHUB_OUTPUT
+          echo "version=${BRANCH/release\//}" >> $GITHUB_OUTPUT
         env:
           BRANCH: ${{ github.ref_name }}
 
diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml
index 6d4a32e9a5..797a4f3d73 100644
--- a/.github/workflows/release-publish.yml
+++ b/.github/workflows/release-publish.yml
@@ -43,7 +43,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
           cache: 'npm'
           cache-dependency-path: package-lock.json
 
@@ -69,7 +69,7 @@ jobs:
             type=raw,value=latest,enable=${{ env.IS_PRERELEASE == 'false' }}
             type=raw,value=alpha,enable=${{ env.IS_PRERELEASE == 'true' && contains(github.event.inputs.version, 'alpha') }}
             type=raw,value=beta,enable=${{ env.IS_PRERELEASE == 'true' && contains(github.event.inputs.version, 'beta') }}
-          sep-tags: ","
+          sep-tags: ','
 
       # Setup regctl to parse platform specific image digest from image manifest
       - name: Install regctl
@@ -100,11 +100,11 @@ jobs:
 
       - name: Verify Inso Container Image Provenance produced on insomnia-ee
         run: |
-         slsa-verifier verify-image \
-         kong/inso:${{env.RELEASE_VERSION}}@${{steps.image_manifest_metadata.outputs.inso_image_sha}} \
-         --print-provenance \
-         --provenance-repository ${{env.NOTARY_REPOSITORY}} \
-         --source-uri 'github.com/Kong/insomnia-ee'
+          slsa-verifier verify-image \
+          kong/inso:${{env.RELEASE_VERSION}}@${{steps.image_manifest_metadata.outputs.inso_image_sha}} \
+          --print-provenance \
+          --provenance-repository ${{env.NOTARY_REPOSITORY}} \
+          --source-uri 'github.com/Kong/insomnia-ee'
 
       - name: Verify Inso Binary Provenance for artifacts produced on insomnia-ee
         run: |
@@ -127,7 +127,7 @@ jobs:
         id: core_tag_and_release
         with:
           tag: ${{ env.RELEASE_CORE_TAG }}
-          name: "${{ env.RELEASE_VERSION }} 📦"
+          name: '${{ env.RELEASE_VERSION }} 📦'
           generateReleaseNotes: true
           commit: ${{ env.RELEASE_BRANCH }}
           prerelease: ${{ env.IS_PRERELEASE }}
@@ -142,7 +142,7 @@ jobs:
         with:
           release_id: ${{ steps.core_tag_and_release.outputs.id }}
           tag_name: ${{ env.RELEASE_CORE_TAG }}
-          file: "./artifacts/*"
+          file: './artifacts/*'
           prerelease: ${{ env.IS_PRERELEASE }}
           draft: false
 
diff --git a/.github/workflows/release-recurring.yml b/.github/workflows/release-recurring.yml
index b3fd618bd9..e9f2e513d9 100644
--- a/.github/workflows/release-recurring.yml
+++ b/.github/workflows/release-recurring.yml
@@ -41,7 +41,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
           cache: 'npm'
           cache-dependency-path: package-lock.json
 
diff --git a/.github/workflows/release-start.yml b/.github/workflows/release-start.yml
index f1b52f9603..04f9afdf90 100644
--- a/.github/workflows/release-start.yml
+++ b/.github/workflows/release-start.yml
@@ -9,9 +9,9 @@ on:
         type: choice
         description: Channel of the release (alpha/beta/stable)
         options:
-        - alpha
-        - beta
-        - stable
+          - alpha
+          - beta
+          - stable
       version:
         required: false
         description: force version of the release (e.g. 9.0.0) if previous release was successful, this should auto increment
@@ -31,7 +31,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
           cache: 'npm'
           cache-dependency-path: package-lock.json
 
@@ -57,8 +57,7 @@ jobs:
         if: github.event.inputs.channel != 'stable' && github.event.inputs.version
         run: npm --workspaces version "${{ github.event.inputs.version }}"
 
-
-    # ############################################################
+      # ############################################################
 
       - name: Get version
         shell: bash
@@ -85,8 +84,8 @@ jobs:
         with:
           username: ${{ (github.event_name == 'workflow_dispatch' && github.actor) || 'insomnia-infra' }}
 
-    # ############################################################
-    # re-run the versioning steps to apply to the new branch
+      # ############################################################
+      # re-run the versioning steps to apply to the new branch
 
       - name: (Re-run) App version (stable, patch latest stable)
         if: github.event.inputs.channel == 'stable' && !github.event.inputs.version
@@ -104,7 +103,7 @@ jobs:
         if: github.event.inputs.channel != 'stable' && github.event.inputs.version
         run: npm --workspaces version "${{ github.event.inputs.version }}"
 
-    # ############################################################
+      # ############################################################
 
       - name: Git Commit
         run: git commit -am "Bump app version to ${{ env.RELEASE_VERSION }}"
@@ -122,7 +121,7 @@ jobs:
           github_token: ${{ secrets.RELEASE_GH_TOKEN }}
           source_branch: ${{ env.RELEASE_BRANCH}}
           target_branch: develop
-          title: ":rocket: ${{ env.RELEASE_VERSION}}"
+          title: ':rocket: ${{ env.RELEASE_VERSION}}'
           body: |
             **Automated pull request**
             Artifacts build in progress...
diff --git a/.github/workflows/sast.yml b/.github/workflows/sast.yml
index dcbd430429..adc687acd0 100644
--- a/.github/workflows/sast.yml
+++ b/.github/workflows/sast.yml
@@ -4,11 +4,10 @@ on:
   pull_request: {}
   push:
     branches:
-    - develop
-    - release/*
+      - develop
+      - release/*
   workflow_dispatch: {}
 
-
 jobs:
   semgrep:
     timeout-minutes: 5
diff --git a/.github/workflows/test-cli.yml b/.github/workflows/test-cli.yml
index 7742857d6b..7ae89ce2fa 100644
--- a/.github/workflows/test-cli.yml
+++ b/.github/workflows/test-cli.yml
@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version-file: ".nvmrc"
+          node-version-file: '.nvmrc'
           cache: 'npm'
           cache-dependency-path: package-lock.json
 
@@ -36,7 +36,7 @@ jobs:
       - name: Install node version of node-libcurl for inso tests
         run: node_modules/.bin/node-pre-gyp install --update-binary --directory node_modules/@getinsomnia/node-libcurl
 
-      - name : Build Inso
+      - name: Build Inso
         run: npm run build -w insomnia-inso
 
       - name: Run Inso unit tests
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 7d37db8fef..ee46f761b8 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -36,9 +36,6 @@ jobs:
       - name: Lint
         run: npm run lint
 
-      - name: Lint markdown
-        run: npm run lint:markdown
-
       - name: Type checks
         run: npm run type-check
 
diff --git a/.github/workflows/update-changelog.yml b/.github/workflows/update-changelog.yml
index b4acc52ae8..26401962d5 100644
--- a/.github/workflows/update-changelog.yml
+++ b/.github/workflows/update-changelog.yml
@@ -1,11 +1,10 @@
 # .github/workflows/update-changelog.yaml
-name: "Update Changelog"
+name: 'Update Changelog'
 
 on:
   release:
     types: [released]
 
-
 jobs:
   update:
     runs-on: ubuntu-22.04
diff --git a/.prettierrc b/.prettierrc
index f4c7f69576..baa3b25924 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -8,9 +8,7 @@
     {
       "files": "packages/insomnia/**/*",
       "options": {
-        "plugins": [
-          "prettier-plugin-tailwindcss"
-        ]
+        "plugins": ["prettier-plugin-tailwindcss"]
       }
     }
   ]
diff --git a/.vscode/launch.json b/.vscode/launch.json
index dbb3af44aa..f3d1a6383b 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -84,7 +84,7 @@
         },
         {
           "value": "help"
-        },
+        }
       ]
     }
   ],
@@ -98,10 +98,7 @@
       },
       "stopAll": true,
       "preLaunchTask": "Insomnia: Compile (Watch)",
-      "configurations": [
-        "Electron: main",
-        "Electron: renderer"
-      ]
+      "configurations": ["Electron: main", "Electron: renderer"]
     }
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 87e55d10a5..96d0f3f7e7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -43,5 +43,5 @@
   ],
   "[cpp]": {
     "editor.defaultFormatter": "llvm-vs-code-extensions.vscode-clangd"
-  },
+  }
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index ff868d6923..221e2b178f 100644
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@@ -11,7 +11,7 @@
       "options": {
         "cwd": "${workspaceFolder}/packages/insomnia",
         "env": {
-          "NODE_ENV": "development",
+          "NODE_ENV": "development"
         }
       },
       "command": "${workspaceRoot}/node_modules/.bin/esr esbuild.main.ts"
@@ -24,7 +24,7 @@
       "options": {
         "cwd": "${workspaceFolder}/packages/insomnia",
         "env": {
-          "NODE_ENV": "development",
+          "NODE_ENV": "development"
         }
       },
       "isBackground": true,
@@ -57,10 +57,7 @@
     {
       "label": "Insomnia: Compile (Watch)",
       "detail": "Compile Renderer (Watch) | Compile Main",
-      "dependsOn": [
-        "Insomnia: Compile Renderer (Watch)",
-        "Insomnia: Compile Main"
-      ]
+      "dependsOn": ["Insomnia: Compile Renderer (Watch)", "Insomnia: Compile Main"]
     },
     {
       "label": "Inso: Compile (Watch)",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91861b6f1b..b78625bcc8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,166 +8,170 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [core@10.0.0] - 2024-09-10
 
 ## What's Changed
-* bump: react-router by @CurryYangxx in https://github.com/Kong/insomnia/pull/7795
-* fix(Sync Staging Modal): use action to update selected items by @gatzjames in https://github.com/Kong/insomnia/pull/7794
-* Fixed copying credential In Auth: Basic were username and password input needed to copied by users by @pranavithape in https://github.com/Kong/insomnia/pull/7789
-* fix(ux): duplicate improvement by @CurryYangxx in https://github.com/Kong/insomnia/pull/7803
-* fixes lodash.set cve by @jackkav in https://github.com/Kong/insomnia/pull/7801
-* chore: rm userId from sentry [INS-4260] by @filfreire in https://github.com/Kong/insomnia/pull/7804
-* fix cves and add CI check by @jackkav in https://github.com/Kong/insomnia/pull/7806
-* Fix: Keep equal sign for empty query parameters[INS-4228] by @cwangsmv in https://github.com/Kong/insomnia/pull/7802
-* chore: hash userID on segment [INS-4260] by @filfreire in https://github.com/Kong/insomnia/pull/7805
-* Fix backslash in environment key freeze app [INS-4157] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7763
-* fix(Key-Value Editor): deleting the last item on the key-value pair not showing an empty pair by @gatzjames in https://github.com/Kong/insomnia/pull/7818
-* Remove styled-components by @jackkav in https://github.com/Kong/insomnia/pull/7809
-* feat(sync): support offline commit- [INS-4226] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7811
-* :rocket: 9.3.4-beta.0 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7823
-* Import postman env in Insomnia project level [INS-4253] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7821
-* feat: display uncommit&unpush change - [INS-4138] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7816
-* Preserve the original Authorization headers when importing [INS-4269] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7827
-* feat: Context menu for Nunjucks tag[INS-4273] by @cwangsmv in https://github.com/Kong/insomnia/pull/7828
-* feat(Keyboard Shorcuts): update delete request shortcut by @gatzjames in https://github.com/Kong/insomnia/pull/7824
-* feat: show uncommit&unpush status for all projects-[INS-4138] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7830
-* Fix: GraphQL request export curl body issue and GraphQL payload delete issue[INS-4281] by @cwangsmv in https://github.com/Kong/insomnia/pull/7831
-* :rocket: 9.3.4-beta.1 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7836
-* Try to fix smoke test flaky by @cwangsmv in https://github.com/Kong/insomnia/pull/7840
-* fix: test-util snippet to proper status code check [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7844
-* feat(Project View): UI improvements by @gatzjames in https://github.com/Kong/insomnia/pull/7850
-* fix: disable failure on npm audit [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7862
-* chore: bump electron to 30.4 [INS-4316] by @filfreire in https://github.com/Kong/insomnia/pull/7852
-* import postman data dump [INS-3810] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7834
-* support for removing default org project by @yaoweiprc in https://github.com/Kong/insomnia/pull/7854
-* fix: persist cookies from response together with ones from after-response script by @ihexxa in https://github.com/Kong/insomnia/pull/7819
-* chore: split packaging for windows builds [INS-3983] by @filfreire in https://github.com/Kong/insomnia/pull/7838
-* fix(Git Sync): fix issue when switching to Insomnia Sync by @gatzjames in https://github.com/Kong/insomnia/pull/7860
-* fix: handle login when opening org logged out [INS-4330] by @filfreire in https://github.com/Kong/insomnia/pull/7865
-* Revert "support for removing default org project" by @yaoweiprc in https://github.com/Kong/insomnia/pull/7874
-* inso cli scripting first pass by @jackkav in https://github.com/Kong/insomnia/pull/7790
-* Allow deleting default project in org and fix sync issue [INS-4342] [INS-4311] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7881
-* chore(runner): cleaning up runner-pr1 and resolve conflicts by @ihexxa in https://github.com/Kong/insomnia/pull/7878
-* :rocket: 10.0.0-beta.0 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7882
-* only minify inso cli in prod by @jackkav in https://github.com/Kong/insomnia/pull/7879
-* feat: Add logic to redirect users based on their plan when creating a new organization by @pavkout in https://github.com/Kong/insomnia/pull/7856
-* tabs should rerender when changing mock by @jackkav in https://github.com/Kong/insomnia/pull/7888
-* fix: check for open curl by @jackkav in https://github.com/Kong/insomnia/pull/7889
-* Bump/electron-31 by @jackkav in https://github.com/Kong/insomnia/pull/7884
-* shell.nix -> flake.nix by @jackkav in https://github.com/Kong/insomnia/pull/7892
-* add mock method header by @jackkav in https://github.com/Kong/insomnia/pull/7872
-* use nixpkgs/unstable by @jackkav in https://github.com/Kong/insomnia/pull/7902
-* fix: file not synced after switch sync method -[INS-4347] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7897
-* fix: rename untracked projects [INS-4365] by @filfreire in https://github.com/Kong/insomnia/pull/7898
-* fix: flaky git test by @ihexxa in https://github.com/Kong/insomnia/pull/7883
-* Add ut and e2e test for data upload and pre-script in collection runner by @cwangsmv in https://github.com/Kong/insomnia/pull/7903
-* Supporting moving files from one project to another [INS-3865] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7849
-* Enhance Response function to aware environment change and update description[INS-4279] by @cwangsmv in https://github.com/Kong/insomnia/pull/7896
-* chore: update AI service URL to use 'https://ai-helper.insomnia.rest' [INS-4367] by @pavkout in https://github.com/Kong/insomnia/pull/7910
-* fix(runner): some minor fixes and improvements by @ihexxa in https://github.com/Kong/insomnia/pull/7900
-* improve flakey test by @jackkav in https://github.com/Kong/insomnia/pull/7909
-* feat: sign all files on windows [INS-4362] by @filfreire in https://github.com/Kong/insomnia/pull/7913
-* Avoid encoding queryParams when request.settingEncodeUrl is set to false by @XSPGMike in https://github.com/Kong/insomnia/pull/7893
-* feat: improve EDN response by @garug in https://github.com/Kong/insomnia/pull/7777
-* fix: minor fixes in styles, linting and UT by @ihexxa in https://github.com/Kong/insomnia/pull/7916
-* preserve relationships in nunjucks tags by @jackkav in https://github.com/Kong/insomnia/pull/7915
-* :rocket: 10.0.0-beta.1 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7917
-* chore: cleanup after v10 beta.1 [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7918
-* feat(Onboarding): v10 by @gatzjames in https://github.com/Kong/insomnia/pull/7863
-* chore: return friendly message when sendRequest sees an error by @ihexxa in https://github.com/Kong/insomnia/pull/7911
-* chore: upgrade micromatch and add back npm audit by @ihexxa in https://github.com/Kong/insomnia/pull/7921
-* fix(runner): some minor fixes by @ihexxa in https://github.com/Kong/insomnia/pull/7923
-* add team check by @jackkav in https://github.com/Kong/insomnia/pull/7919
-* :rocket: 10.0.0-beta.2 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7924
-* Fix duplicate file cause application error in collection view UI by @cwangsmv in https://github.com/Kong/insomnia/pull/7928
-* :rocket: 10.0.0-beta.3 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7930
+
+- bump: react-router by @CurryYangxx in https://github.com/Kong/insomnia/pull/7795
+- fix(Sync Staging Modal): use action to update selected items by @gatzjames in https://github.com/Kong/insomnia/pull/7794
+- Fixed copying credential In Auth: Basic were username and password input needed to copied by users by @pranavithape in https://github.com/Kong/insomnia/pull/7789
+- fix(ux): duplicate improvement by @CurryYangxx in https://github.com/Kong/insomnia/pull/7803
+- fixes lodash.set cve by @jackkav in https://github.com/Kong/insomnia/pull/7801
+- chore: rm userId from sentry [INS-4260] by @filfreire in https://github.com/Kong/insomnia/pull/7804
+- fix cves and add CI check by @jackkav in https://github.com/Kong/insomnia/pull/7806
+- Fix: Keep equal sign for empty query parameters[INS-4228] by @cwangsmv in https://github.com/Kong/insomnia/pull/7802
+- chore: hash userID on segment [INS-4260] by @filfreire in https://github.com/Kong/insomnia/pull/7805
+- Fix backslash in environment key freeze app [INS-4157] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7763
+- fix(Key-Value Editor): deleting the last item on the key-value pair not showing an empty pair by @gatzjames in https://github.com/Kong/insomnia/pull/7818
+- Remove styled-components by @jackkav in https://github.com/Kong/insomnia/pull/7809
+- feat(sync): support offline commit- [INS-4226] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7811
+- :rocket: 9.3.4-beta.0 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7823
+- Import postman env in Insomnia project level [INS-4253] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7821
+- feat: display uncommit&unpush change - [INS-4138] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7816
+- Preserve the original Authorization headers when importing [INS-4269] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7827
+- feat: Context menu for Nunjucks tag[INS-4273] by @cwangsmv in https://github.com/Kong/insomnia/pull/7828
+- feat(Keyboard Shorcuts): update delete request shortcut by @gatzjames in https://github.com/Kong/insomnia/pull/7824
+- feat: show uncommit&unpush status for all projects-[INS-4138] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7830
+- Fix: GraphQL request export curl body issue and GraphQL payload delete issue[INS-4281] by @cwangsmv in https://github.com/Kong/insomnia/pull/7831
+- :rocket: 9.3.4-beta.1 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7836
+- Try to fix smoke test flaky by @cwangsmv in https://github.com/Kong/insomnia/pull/7840
+- fix: test-util snippet to proper status code check [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7844
+- feat(Project View): UI improvements by @gatzjames in https://github.com/Kong/insomnia/pull/7850
+- fix: disable failure on npm audit [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7862
+- chore: bump electron to 30.4 [INS-4316] by @filfreire in https://github.com/Kong/insomnia/pull/7852
+- import postman data dump [INS-3810] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7834
+- support for removing default org project by @yaoweiprc in https://github.com/Kong/insomnia/pull/7854
+- fix: persist cookies from response together with ones from after-response script by @ihexxa in https://github.com/Kong/insomnia/pull/7819
+- chore: split packaging for windows builds [INS-3983] by @filfreire in https://github.com/Kong/insomnia/pull/7838
+- fix(Git Sync): fix issue when switching to Insomnia Sync by @gatzjames in https://github.com/Kong/insomnia/pull/7860
+- fix: handle login when opening org logged out [INS-4330] by @filfreire in https://github.com/Kong/insomnia/pull/7865
+- Revert "support for removing default org project" by @yaoweiprc in https://github.com/Kong/insomnia/pull/7874
+- inso cli scripting first pass by @jackkav in https://github.com/Kong/insomnia/pull/7790
+- Allow deleting default project in org and fix sync issue [INS-4342] [INS-4311] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7881
+- chore(runner): cleaning up runner-pr1 and resolve conflicts by @ihexxa in https://github.com/Kong/insomnia/pull/7878
+- :rocket: 10.0.0-beta.0 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7882
+- only minify inso cli in prod by @jackkav in https://github.com/Kong/insomnia/pull/7879
+- feat: Add logic to redirect users based on their plan when creating a new organization by @pavkout in https://github.com/Kong/insomnia/pull/7856
+- tabs should rerender when changing mock by @jackkav in https://github.com/Kong/insomnia/pull/7888
+- fix: check for open curl by @jackkav in https://github.com/Kong/insomnia/pull/7889
+- Bump/electron-31 by @jackkav in https://github.com/Kong/insomnia/pull/7884
+- shell.nix -> flake.nix by @jackkav in https://github.com/Kong/insomnia/pull/7892
+- add mock method header by @jackkav in https://github.com/Kong/insomnia/pull/7872
+- use nixpkgs/unstable by @jackkav in https://github.com/Kong/insomnia/pull/7902
+- fix: file not synced after switch sync method -[INS-4347] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7897
+- fix: rename untracked projects [INS-4365] by @filfreire in https://github.com/Kong/insomnia/pull/7898
+- fix: flaky git test by @ihexxa in https://github.com/Kong/insomnia/pull/7883
+- Add ut and e2e test for data upload and pre-script in collection runner by @cwangsmv in https://github.com/Kong/insomnia/pull/7903
+- Supporting moving files from one project to another [INS-3865] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7849
+- Enhance Response function to aware environment change and update description[INS-4279] by @cwangsmv in https://github.com/Kong/insomnia/pull/7896
+- chore: update AI service URL to use 'https://ai-helper.insomnia.rest' [INS-4367] by @pavkout in https://github.com/Kong/insomnia/pull/7910
+- fix(runner): some minor fixes and improvements by @ihexxa in https://github.com/Kong/insomnia/pull/7900
+- improve flakey test by @jackkav in https://github.com/Kong/insomnia/pull/7909
+- feat: sign all files on windows [INS-4362] by @filfreire in https://github.com/Kong/insomnia/pull/7913
+- Avoid encoding queryParams when request.settingEncodeUrl is set to false by @XSPGMike in https://github.com/Kong/insomnia/pull/7893
+- feat: improve EDN response by @garug in https://github.com/Kong/insomnia/pull/7777
+- fix: minor fixes in styles, linting and UT by @ihexxa in https://github.com/Kong/insomnia/pull/7916
+- preserve relationships in nunjucks tags by @jackkav in https://github.com/Kong/insomnia/pull/7915
+- :rocket: 10.0.0-beta.1 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7917
+- chore: cleanup after v10 beta.1 [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7918
+- feat(Onboarding): v10 by @gatzjames in https://github.com/Kong/insomnia/pull/7863
+- chore: return friendly message when sendRequest sees an error by @ihexxa in https://github.com/Kong/insomnia/pull/7911
+- chore: upgrade micromatch and add back npm audit by @ihexxa in https://github.com/Kong/insomnia/pull/7921
+- fix(runner): some minor fixes by @ihexxa in https://github.com/Kong/insomnia/pull/7923
+- add team check by @jackkav in https://github.com/Kong/insomnia/pull/7919
+- :rocket: 10.0.0-beta.2 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7924
+- Fix duplicate file cause application error in collection view UI by @cwangsmv in https://github.com/Kong/insomnia/pull/7928
+- :rocket: 10.0.0-beta.3 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7930
 
 ## New Contributors
-* @pranavithape made their first contribution in https://github.com/Kong/insomnia/pull/7789
-* @XSPGMike made their first contribution in https://github.com/Kong/insomnia/pull/7893
-* @garug made their first contribution in https://github.com/Kong/insomnia/pull/7777
+
+- @pranavithape made their first contribution in https://github.com/Kong/insomnia/pull/7789
+- @XSPGMike made their first contribution in https://github.com/Kong/insomnia/pull/7893
+- @garug made their first contribution in https://github.com/Kong/insomnia/pull/7777
 
 **Full Changelog**: https://github.com/Kong/insomnia/compare/core@9.3.3...core@10.0.0
 
 ## [core@9.3.3] - 2024-07-31
 
 ## What's Changed
-* perf: App start improvement [INS-3957] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7492
-* :rocket: 9.3.3-beta.0 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7674
-* fix: default user-agent for oauth2 [7672] by @filfreire in https://github.com/Kong/insomnia/pull/7675
-* inso fifth pass by @jackkav in https://github.com/Kong/insomnia/pull/7601
-* feat: inso parent folder auth by @jackkav in https://github.com/Kong/insomnia/pull/7676
-* chore: duplicate / symbol for import in insomnia-scripting-environment/src/objects/(interfaces.ts, request.ts) by @Novsochetra in https://github.com/Kong/insomnia/pull/7686
-* fix: changelog [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7677
-* chore: enable sentry tracing by @CurryYangxx in https://github.com/Kong/insomnia/pull/7688
-* force vite to always wipe cache by @jackkav in https://github.com/Kong/insomnia/pull/7690
-* chore: make the overlay darker in displaying request timings by @ihexxa in https://github.com/Kong/insomnia/pull/7691
-* split test job into app and cli by @jackkav in https://github.com/Kong/insomnia/pull/7685
-* chore: add smoke test for git-sync [INS-4132] by @filfreire in https://github.com/Kong/insomnia/pull/7682
-* feat(Markdown Preview): always enable preview by @gatzjames in https://github.com/Kong/insomnia/pull/7694
-* fix(Delete Environment): Don't show empty view when deleting an environment by @gatzjames in https://github.com/Kong/insomnia/pull/7695
-* fix(Export): Option to export all data from the settings on the login view by @gatzjames in https://github.com/Kong/insomnia/pull/7702
-* fix: typo in style name by @ihexxa in https://github.com/Kong/insomnia/pull/7701
-* fix: ui improvement when return deferred data in loader by @CurryYangxx in https://github.com/Kong/insomnia/pull/7681
-* fix: refresh storage rule when org change by @CurryYangxx in https://github.com/Kong/insomnia/pull/7707
-* hide self host url in create/edit mock by @jackkav in https://github.com/Kong/insomnia/pull/7704
-* feat(Request pane): Add indicators for body and auth in the request pane tabs by @gatzjames in https://github.com/Kong/insomnia/pull/7697
-* Trim Bearer Authentication Strings by @SimplexShotz in https://github.com/Kong/insomnia/pull/7279
-* feat: show deprecation warnings on graphql arguments by @anujbiyani in https://github.com/Kong/insomnia/pull/7364
-* Clean up outdate jest and tsconfigs by @jackkav in https://github.com/Kong/insomnia/pull/7712
-* chore: mv prerelease tests into smoke [INS-4132] by @filfreire in https://github.com/Kong/insomnia/pull/7705
-* feat: add test utils on scripting snippets [INS-4141] by @filfreire in https://github.com/Kong/insomnia/pull/7692
-* fix: migrate loader redirect by @CurryYangxx in https://github.com/Kong/insomnia/pull/7426
-* refactor: flatten and reduce tsconfigs by @jackkav in https://github.com/Kong/insomnia/pull/7716
-* enable verbatimModuleSyntax by @jackkav in https://github.com/Kong/insomnia/pull/7718
-* perf: return deferred data in permission loader by @CurryYangxx in https://github.com/Kong/insomnia/pull/7635
-* perf: change org performance improvement [INS-3968] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7582
-* feat: add async task indicator [INS-4106] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7522
-* fix(sdk): sdk type cleanup by @ihexxa in https://github.com/Kong/insomnia/pull/7721
-* chore: bump electron 30.0 to 30.2 by @filfreire in https://github.com/Kong/insomnia/pull/7714
-* fix: Use SSE for storage control updates by @pavkout in https://github.com/Kong/insomnia/pull/7661
-* :rocket: 9.3.3-beta.1 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7723
-* Update CHANGELOG.md by @CurryYangxx in https://github.com/Kong/insomnia/pull/7725
-* feat: inso collection runner by @jackkav in https://github.com/Kong/insomnia/pull/7700
-* fix: cannot delete request by shortcut [INS-4156] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7728
-* fix(Key-Value Editor): Edit mode by @gatzjames in https://github.com/Kong/insomnia/pull/7739
-* remove send-request by @jackkav in https://github.com/Kong/insomnia/pull/7731
-* feat(Generate Collection from Spec): add description to requests if it's available from the oas3 schema by @gatzjames in https://github.com/Kong/insomnia/pull/7734
-* fix: syncing status indicator ui by @CurryYangxx in https://github.com/Kong/insomnia/pull/7730
-* feat(Sidebar): interactions improvements by @gatzjames in https://github.com/Kong/insomnia/pull/7722
-* fix(Git Clone): redirect using incorrect organizationId by @gatzjames in https://github.com/Kong/insomnia/pull/7740
-* :rocket: 9.3.3-beta.2 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7741
-* handle null auth by @jackkav in https://github.com/Kong/insomnia/pull/7746
-* fix(Collection): Clean up auto-scroll and add back selected item styling by @gatzjames in https://github.com/Kong/insomnia/pull/7747
-* fixes incorrect scrollbar display issue by @Karthik7406 in https://github.com/Kong/insomnia/pull/7742
-* fix: reduce uncessary navigate when switching requests and tests by @CurryYangxx in https://github.com/Kong/insomnia/pull/7748
-* fix: lost <disabled> in header transforming and blank req body by @ihexxa in https://github.com/Kong/insomnia/pull/7738
-* chore: git sync pull push test [INS-4132] by @filfreire in https://github.com/Kong/insomnia/pull/7720
-* vitest by @jackkav in https://github.com/Kong/insomnia/pull/7754
-* feat(History): Navigate to last opened workspace on app load by @gatzjames in https://github.com/Kong/insomnia/pull/7755
-* feat(Sentry): clean up unnecessary sentry stack by @gatzjames in https://github.com/Kong/insomnia/pull/7758
-* fix(Settings): update header styles for analytics by @gatzjames in https://github.com/Kong/insomnia/pull/7759
-* fix: can't match project when last visit page is dashboard by @CurryYangxx in https://github.com/Kong/insomnia/pull/7762
-* fix(History): navigate to the project if the last visited workspace has been deleted by @gatzjames in https://github.com/Kong/insomnia/pull/7764
-* feat(Response Pane): improve tabs styles by @gatzjames in https://github.com/Kong/insomnia/pull/7765
-* :rocket: 9.3.3-beta.3 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7766
-* chore: add sentry metric [INS-4115] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7727
-* Vitest-2 app package by @jackkav in https://github.com/Kong/insomnia/pull/7757
-* fix: project switch report by @CurryYangxx in https://github.com/Kong/insomnia/pull/7771
-* :rocket: 9.3.3-beta.4 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7774
-* feat(UI): UI improvements for the app by @gatzjames in https://github.com/Kong/insomnia/pull/7773
-* chore: check analytics issue [INS-4212] by @filfreire in https://github.com/Kong/insomnia/pull/7775
-* fix(GraphQL Editor): make inputValueDeprecation optional and change variable mode to json by @gatzjames in https://github.com/Kong/insomnia/pull/7779
-* inso cli dx improvements by @jackkav in https://github.com/Kong/insomnia/pull/7776
-* fix(Git Staging Modal): close the modal on ESC by @gatzjames in https://github.com/Kong/insomnia/pull/7781
-* fix(KeyValue Editor): fix key value focus issue and handle updating params from url by @gatzjames in https://github.com/Kong/insomnia/pull/7780
-* feat(Styles): Minor style improvements by @gatzjames in https://github.com/Kong/insomnia/pull/7782
-* :rocket: 9.3.3-beta.5 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7783
-* Add type checking to sdk package by @jackkav in https://github.com/Kong/insomnia/pull/7719
+
+- perf: App start improvement [INS-3957] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7492
+- :rocket: 9.3.3-beta.0 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7674
+- fix: default user-agent for oauth2 [7672] by @filfreire in https://github.com/Kong/insomnia/pull/7675
+- inso fifth pass by @jackkav in https://github.com/Kong/insomnia/pull/7601
+- feat: inso parent folder auth by @jackkav in https://github.com/Kong/insomnia/pull/7676
+- chore: duplicate / symbol for import in insomnia-scripting-environment/src/objects/(interfaces.ts, request.ts) by @Novsochetra in https://github.com/Kong/insomnia/pull/7686
+- fix: changelog [no-ticket] by @filfreire in https://github.com/Kong/insomnia/pull/7677
+- chore: enable sentry tracing by @CurryYangxx in https://github.com/Kong/insomnia/pull/7688
+- force vite to always wipe cache by @jackkav in https://github.com/Kong/insomnia/pull/7690
+- chore: make the overlay darker in displaying request timings by @ihexxa in https://github.com/Kong/insomnia/pull/7691
+- split test job into app and cli by @jackkav in https://github.com/Kong/insomnia/pull/7685
+- chore: add smoke test for git-sync [INS-4132] by @filfreire in https://github.com/Kong/insomnia/pull/7682
+- feat(Markdown Preview): always enable preview by @gatzjames in https://github.com/Kong/insomnia/pull/7694
+- fix(Delete Environment): Don't show empty view when deleting an environment by @gatzjames in https://github.com/Kong/insomnia/pull/7695
+- fix(Export): Option to export all data from the settings on the login view by @gatzjames in https://github.com/Kong/insomnia/pull/7702
+- fix: typo in style name by @ihexxa in https://github.com/Kong/insomnia/pull/7701
+- fix: ui improvement when return deferred data in loader by @CurryYangxx in https://github.com/Kong/insomnia/pull/7681
+- fix: refresh storage rule when org change by @CurryYangxx in https://github.com/Kong/insomnia/pull/7707
+- hide self host url in create/edit mock by @jackkav in https://github.com/Kong/insomnia/pull/7704
+- feat(Request pane): Add indicators for body and auth in the request pane tabs by @gatzjames in https://github.com/Kong/insomnia/pull/7697
+- Trim Bearer Authentication Strings by @SimplexShotz in https://github.com/Kong/insomnia/pull/7279
+- feat: show deprecation warnings on graphql arguments by @anujbiyani in https://github.com/Kong/insomnia/pull/7364
+- Clean up outdate jest and tsconfigs by @jackkav in https://github.com/Kong/insomnia/pull/7712
+- chore: mv prerelease tests into smoke [INS-4132] by @filfreire in https://github.com/Kong/insomnia/pull/7705
+- feat: add test utils on scripting snippets [INS-4141] by @filfreire in https://github.com/Kong/insomnia/pull/7692
+- fix: migrate loader redirect by @CurryYangxx in https://github.com/Kong/insomnia/pull/7426
+- refactor: flatten and reduce tsconfigs by @jackkav in https://github.com/Kong/insomnia/pull/7716
+- enable verbatimModuleSyntax by @jackkav in https://github.com/Kong/insomnia/pull/7718
+- perf: return deferred data in permission loader by @CurryYangxx in https://github.com/Kong/insomnia/pull/7635
+- perf: change org performance improvement [INS-3968] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7582
+- feat: add async task indicator [INS-4106] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7522
+- fix(sdk): sdk type cleanup by @ihexxa in https://github.com/Kong/insomnia/pull/7721
+- chore: bump electron 30.0 to 30.2 by @filfreire in https://github.com/Kong/insomnia/pull/7714
+- fix: Use SSE for storage control updates by @pavkout in https://github.com/Kong/insomnia/pull/7661
+- :rocket: 9.3.3-beta.1 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7723
+- Update CHANGELOG.md by @CurryYangxx in https://github.com/Kong/insomnia/pull/7725
+- feat: inso collection runner by @jackkav in https://github.com/Kong/insomnia/pull/7700
+- fix: cannot delete request by shortcut [INS-4156] by @yaoweiprc in https://github.com/Kong/insomnia/pull/7728
+- fix(Key-Value Editor): Edit mode by @gatzjames in https://github.com/Kong/insomnia/pull/7739
+- remove send-request by @jackkav in https://github.com/Kong/insomnia/pull/7731
+- feat(Generate Collection from Spec): add description to requests if it's available from the oas3 schema by @gatzjames in https://github.com/Kong/insomnia/pull/7734
+- fix: syncing status indicator ui by @CurryYangxx in https://github.com/Kong/insomnia/pull/7730
+- feat(Sidebar): interactions improvements by @gatzjames in https://github.com/Kong/insomnia/pull/7722
+- fix(Git Clone): redirect using incorrect organizationId by @gatzjames in https://github.com/Kong/insomnia/pull/7740
+- :rocket: 9.3.3-beta.2 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7741
+- handle null auth by @jackkav in https://github.com/Kong/insomnia/pull/7746
+- fix(Collection): Clean up auto-scroll and add back selected item styling by @gatzjames in https://github.com/Kong/insomnia/pull/7747
+- fixes incorrect scrollbar display issue by @Karthik7406 in https://github.com/Kong/insomnia/pull/7742
+- fix: reduce uncessary navigate when switching requests and tests by @CurryYangxx in https://github.com/Kong/insomnia/pull/7748
+- fix: lost <disabled> in header transforming and blank req body by @ihexxa in https://github.com/Kong/insomnia/pull/7738
+- chore: git sync pull push test [INS-4132] by @filfreire in https://github.com/Kong/insomnia/pull/7720
+- vitest by @jackkav in https://github.com/Kong/insomnia/pull/7754
+- feat(History): Navigate to last opened workspace on app load by @gatzjames in https://github.com/Kong/insomnia/pull/7755
+- feat(Sentry): clean up unnecessary sentry stack by @gatzjames in https://github.com/Kong/insomnia/pull/7758
+- fix(Settings): update header styles for analytics by @gatzjames in https://github.com/Kong/insomnia/pull/7759
+- fix: can't match project when last visit page is dashboard by @CurryYangxx in https://github.com/Kong/insomnia/pull/7762
+- fix(History): navigate to the project if the last visited workspace has been deleted by @gatzjames in https://github.com/Kong/insomnia/pull/7764
+- feat(Response Pane): improve tabs styles by @gatzjames in https://github.com/Kong/insomnia/pull/7765
+- :rocket: 9.3.3-beta.3 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7766
+- chore: add sentry metric [INS-4115] by @CurryYangxx in https://github.com/Kong/insomnia/pull/7727
+- Vitest-2 app package by @jackkav in https://github.com/Kong/insomnia/pull/7757
+- fix: project switch report by @CurryYangxx in https://github.com/Kong/insomnia/pull/7771
+- :rocket: 9.3.3-beta.4 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7774
+- feat(UI): UI improvements for the app by @gatzjames in https://github.com/Kong/insomnia/pull/7773
+- chore: check analytics issue [INS-4212] by @filfreire in https://github.com/Kong/insomnia/pull/7775
+- fix(GraphQL Editor): make inputValueDeprecation optional and change variable mode to json by @gatzjames in https://github.com/Kong/insomnia/pull/7779
+- inso cli dx improvements by @jackkav in https://github.com/Kong/insomnia/pull/7776
+- fix(Git Staging Modal): close the modal on ESC by @gatzjames in https://github.com/Kong/insomnia/pull/7781
+- fix(KeyValue Editor): fix key value focus issue and handle updating params from url by @gatzjames in https://github.com/Kong/insomnia/pull/7780
+- feat(Styles): Minor style improvements by @gatzjames in https://github.com/Kong/insomnia/pull/7782
+- :rocket: 9.3.3-beta.5 by @insomnia-infra in https://github.com/Kong/insomnia/pull/7783
+- Add type checking to sdk package by @jackkav in https://github.com/Kong/insomnia/pull/7719
 
 ## New Contributors
-* @Novsochetra made their first contribution in https://github.com/Kong/insomnia/pull/7686
-* @SimplexShotz made their first contribution in https://github.com/Kong/insomnia/pull/7279
-* @anujbiyani made their first contribution in https://github.com/Kong/insomnia/pull/7364
-* @yaoweiprc made their first contribution in https://github.com/Kong/insomnia/pull/7728
-* @Karthik7406 made their first contribution in https://github.com/Kong/insomnia/pull/7742
+
+- @Novsochetra made their first contribution in https://github.com/Kong/insomnia/pull/7686
+- @SimplexShotz made their first contribution in https://github.com/Kong/insomnia/pull/7279
+- @anujbiyani made their first contribution in https://github.com/Kong/insomnia/pull/7364
+- @yaoweiprc made their first contribution in https://github.com/Kong/insomnia/pull/7728
+- @Karthik7406 made their first contribution in https://github.com/Kong/insomnia/pull/7742
 
 **Full Changelog**: https://github.com/Kong/insomnia/compare/core@9.3.2...core@9.3.3
 
@@ -252,7 +256,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - fix(Response Tabs): Tabs with a menu inside are not accessible - Response Panes by @gatzjames in <https://github.com/Kong/insomnia/pull/7477>
 - fix: script to parse binary digests by @saisatishkarra in <https://github.com/Kong/insomnia/pull/7493>
 - :rocket: 9.3.0-alpha.5 by @insomnia-infra in <https://github.com/Kong/insomnia/pull/7494>
-- feat: folder inheritance  scripts by @jackkav in <https://github.com/Kong/insomnia/pull/7430>
+- feat: folder inheritance scripts by @jackkav in <https://github.com/Kong/insomnia/pull/7430>
 - fix: use base64 output file for provenance for large assets by @saisatishkarra in <https://github.com/Kong/insomnia/pull/7496>
 - Bump/electron-30 by @jackkav in <https://github.com/Kong/insomnia/pull/7354>
 - chore: new analytics events [INS-3938] by @filfreire in <https://github.com/Kong/insomnia/pull/7495>
@@ -276,7 +280,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - fix: url preview should contain auth params by @ihexxa in <https://github.com/Kong/insomnia/pull/7509>
 - include read only in headers count by @jackkav in <https://github.com/Kong/insomnia/pull/7521>
 - remove oas 2 kong by @jackkav in <https://github.com/Kong/insomnia/pull/7503>
-- fix: windows artifact and update code signer [INS-3993][INS-3982] by @filfreire in <https://github.com/Kong/insomnia/pull/7523>
+- fix: windows artifact and update code signer [INS-3993][ins-3982] by @filfreire in <https://github.com/Kong/insomnia/pull/7523>
 - :rocket: 9.3.0-alpha.11 by @insomnia-infra in <https://github.com/Kong/insomnia/pull/7524>
 - :rocket: 9.3.0-beta.3 by @insomnia-infra in <https://github.com/Kong/insomnia/pull/7526>
 - chore(Minor UI improvements): Expand/Collapse all and file card titles by @gatzjames in <https://github.com/Kong/insomnia/pull/7528>
@@ -439,11 +443,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - feat(hidden-window): enable baseEnvironment in the pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7102>
 - fix: release-start changelog step [no-ticket] by @filfreire in <https://github.com/Kong/insomnia/pull/7113>
 - fix: move changelog step to release-publish by @filfreire in <https://github.com/Kong/insomnia/pull/7114>
-- feat: enable globals, iterationData and variables in pre-request scripting [INS-3379]  by @ihexxa in <https://github.com/Kong/insomnia/pull/7103>
+- feat: enable globals, iterationData and variables in pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7103>
 - chore: bump GH actions versions [no-ticket] by @filfreire in <https://github.com/Kong/insomnia/pull/7117>
 - feat(Insomnia Cloud Sync): Update filesystem driver for VCS sync by @gatzjames in <https://github.com/Kong/insomnia/pull/7111>
 - feat: enable property in pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7120>
-- feat: enable headers in pre-request scripting [INS-3379]  by @ihexxa in <https://github.com/Kong/insomnia/pull/7121>
+- feat: enable headers in pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7121>
 - feat: enable collection-variable in pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7122>
 - feat: enable Url in pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7123>
 - feat: enable Request and Response in pre-request scripting [INS-3379] by @ihexxa in <https://github.com/Kong/insomnia/pull/7128>
@@ -571,19 +575,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### :sparkles: New Features
 
-- [`e1e3b13`](https://github.com/Kong/insomnia/commit/e1e3b139b3bb917ab9dfcb0ce12d16079dee9c04) - **unit-tests**: Unit test reordering *(PR [#7020](https://github.com/Kong/insomnia/pull/7020) by [@gatzjames](https://github.com/gatzjames))*
-- [`2249bb7`](https://github.com/Kong/insomnia/commit/2249bb7b98c947ab1cb11955928fd80d4adec845) - **environment**: update environments icons *(PR [#7050](https://github.com/Kong/insomnia/pull/7050) by [@gatzjames](https://github.com/gatzjames))*
-- [`a09c233`](https://github.com/Kong/insomnia/commit/a09c23305c9c493105808b8df23d1911f5b59ea2) - **pane-tabs**: Consistent styles for tabs *(PR [#7062](https://github.com/Kong/insomnia/pull/7062) by [@gatzjames](https://github.com/gatzjames))*
-- [`d1c2928`](https://github.com/Kong/insomnia/commit/d1c292891cc9dd8a17d4637f643336cf1afcccfa) - **command-palette**: add button to open the command palette *(PR [#7064](https://github.com/Kong/insomnia/pull/7064) by [@gatzjames](https://github.com/gatzjames))*
+- [`e1e3b13`](https://github.com/Kong/insomnia/commit/e1e3b139b3bb917ab9dfcb0ce12d16079dee9c04) - **unit-tests**: Unit test reordering _(PR [#7020](https://github.com/Kong/insomnia/pull/7020) by [@gatzjames](https://github.com/gatzjames))_
+- [`2249bb7`](https://github.com/Kong/insomnia/commit/2249bb7b98c947ab1cb11955928fd80d4adec845) - **environment**: update environments icons _(PR [#7050](https://github.com/Kong/insomnia/pull/7050) by [@gatzjames](https://github.com/gatzjames))_
+- [`a09c233`](https://github.com/Kong/insomnia/commit/a09c23305c9c493105808b8df23d1911f5b59ea2) - **pane-tabs**: Consistent styles for tabs _(PR [#7062](https://github.com/Kong/insomnia/pull/7062) by [@gatzjames](https://github.com/gatzjames))_
+- [`d1c2928`](https://github.com/Kong/insomnia/commit/d1c292891cc9dd8a17d4637f643336cf1afcccfa) - **command-palette**: add button to open the command palette _(PR [#7064](https://github.com/Kong/insomnia/pull/7064) by [@gatzjames](https://github.com/gatzjames))_
 
 ### :bug: Bug Fixes
 
-- [`df0a791`](https://github.com/Kong/insomnia/commit/df0a79194143dc615310ecc0976381c538f695f2) - re-initialize the parameter editor state when switching between requests *(PR [#7005](https://github.com/Kong/insomnia/pull/7005) by [@gatzjames](https://github.com/gatzjames))*
-  - :arrow_lower_right: *fixes issue [#7000](undefined) opened by [@jwarner112](https://github.com/jwarner112)*
-- [`3fceccf`](https://github.com/Kong/insomnia/commit/3fceccfdf691a0f3d7592f31120030eeff92be61) - **workspace**: Add default name for when creating a workspace *(PR [#7046](https://github.com/Kong/insomnia/pull/7046) by [@gatzjames](https://github.com/gatzjames))*
+- [`df0a791`](https://github.com/Kong/insomnia/commit/df0a79194143dc615310ecc0976381c538f695f2) - re-initialize the parameter editor state when switching between requests _(PR [#7005](https://github.com/Kong/insomnia/pull/7005) by [@gatzjames](https://github.com/gatzjames))_
+  - :arrow*lower_right: \_fixes issue [#7000](undefined) opened by [@jwarner112](https://github.com/jwarner112)*
+- [`3fceccf`](https://github.com/Kong/insomnia/commit/3fceccfdf691a0f3d7592f31120030eeff92be61) - **workspace**: Add default name for when creating a workspace _(PR [#7046](https://github.com/Kong/insomnia/pull/7046) by [@gatzjames](https://github.com/gatzjames))_
 
 ### :wrench: Chores
 
-- [`353780e`](https://github.com/Kong/insomnia/commit/353780e16ab30853ce206398850c0c0f1c9bd887) - edit changelog process [INS-3456] *(PR [#7001](https://github.com/Kong/insomnia/pull/7001) by [@filfreire](https://github.com/filfreire))*
+- [`353780e`](https://github.com/Kong/insomnia/commit/353780e16ab30853ce206398850c0c0f1c9bd887) - edit changelog process [INS-3456] _(PR [#7001](https://github.com/Kong/insomnia/pull/7001) by [@filfreire](https://github.com/filfreire))_
 
 [core@8.6.1]: https://github.com/Kong/insomnia/compare/core@8.6.0...core@8.6.1
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index c994585032..eff76a0cf2 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -9,7 +9,7 @@ This code of conduct applies to all spaces managed by the Insomnia project, incl
 If you believe someone is violating the code of conduct, we ask that you report it by emailing [support@insomnia.rest](mailto:support@insomnia.rest). For more details please see our Reporting Guidelines
 
 - **Be friendly and patient.**
-- **Be welcoming.** We strive to be a community that welcomes and supports people of all   backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
+- **Be welcoming.** We strive to be a community that welcomes and supports people of all backgrounds and identities. This includes, but is not limited to members of any race, ethnicity, culture, national origin, colour, immigration status, social and economic class, educational level, sex, sexual orientation, gender identity and expression, age, size, family status, political belief, religion, and mental and physical ability.
 - **Be considerate.** Your work will be used by other people, and you in turn will depend on the work of others. Any decision you take will affect users and colleagues, and you should take those consequences into account when making decisions. Remember that we're a world-wide community, so you might not be communicating in someone else's primary language.
 - **Be respectful.** Not all of us will agree all the time, but disagreement is no excuse for poor behavior and poor manners. We might all experience some frustration now and then, but we cannot allow that frustration to turn into a personal attack. It's important to remember that a community where people feel uncomfortable or threatened is not a productive one. Members of the Insomnia community should be respectful when dealing with other members as well as with people outside the Insomnia community.
 - **Be careful in the words that you choose.** We are a community of professionals, and we conduct ourselves professionally. Be kind to others. Do not insult or put down other participants. Harassment and other exclusionary behavior isn't acceptable. This includes, but is not limited to:
diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index cdc91f24f2..d0ff1a328f 100644
--- a/DEVELOPMENT.md
+++ b/DEVELOPMENT.md
@@ -25,7 +25,7 @@ Insomnia uses [`npm workspaces`](https://docs.npmjs.com/cli/v9/using-npm/workspa
 
 Insomnia Inso CLI is built using a series of steps
 
-1. `insomnia-inso` uses monorepo references to import `insomnia` and `insomnia-testing` to expose  `getSendRequestCallbackMemDb` and `generate`, `runTests`, `runTestsCli` respectively
+1. `insomnia-inso` uses monorepo references to import `insomnia` and `insomnia-testing` to expose `getSendRequestCallbackMemDb` and `generate`, `runTests`, `runTestsCli` respectively
 1. `packages/insomnia-inso/dist/index.js` is transpiled with esbuild to commonjs
 1. `packages/insomnia-inso/bin/inso` is shell script which points at `packages/insomnia-inso/dist/index.js` and is used for local development
 1. `packages/insomnia-inso/binaries/inso` is an executable made with `pkg`
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 49f10f4a30..c274515823 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,5 +1,5 @@
 import eslint from '@eslint/js';
-import eslintConfigPrettier from "eslint-config-prettier/flat";
+import eslintConfigPrettier from 'eslint-config-prettier/flat';
 import reactPlugin from 'eslint-plugin-react';
 import reactHooksPlugin from 'eslint-plugin-react-hooks';
 import simpleImportSortPlugin from 'eslint-plugin-simple-import-sort';
@@ -27,10 +27,10 @@ export default tseslint.config(
       'eqeqeq': ['error', 'smart'],
       'no-async-promise-executor': 'off',
       'no-else-return': 'error',
-      'no-empty': ["error", { "allowEmptyCatch": true }],
+      'no-empty': ['error', { allowEmptyCatch: true }],
       'no-var': 'error',
       'no-trailing-spaces': 'error',
-      'no-multiple-empty-lines': ['error', { 'max': 1, 'maxEOF': 0 }],
+      'no-multiple-empty-lines': ['error', { max: 1, maxEOF: 0 }],
       'no-inner-declarations': 'off',
       'no-useless-escape': 'off', // TODO: Enable this rule
       'object-curly-spacing': ['error', 'always'],
@@ -43,26 +43,33 @@ export default tseslint.config(
       'react/jsx-uses-vars': 'error',
       'react/jsx-indent-props': ['error', 2],
       'react/prop-types': 'off',
-      'react/function-component-definition': ['error', {
-        'namedComponents': 'arrow-function',
-        'unnamedComponents': 'arrow-function',
-      }],
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: 'arrow-function',
+          unnamedComponents: 'arrow-function',
+        },
+      ],
       'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
       'react/prefer-stateless-function': 'error',
-      'react/jsx-key': ['error', { 'checkFragmentShorthand': true }],
+      'react/jsx-key': ['error', { checkFragmentShorthand: true }],
       'react/no-array-index-key': 'error',
       'react/self-closing-comp': 'error',
 
-      'react-hooks/exhaustive-deps': ['error', {
-        // From react-use https://github.com/streamich/react-use/issues/1703#issuecomment-770972824
-        'additionalHooks': '^use(Async|AsyncFn|AsyncRetry|Debounce|UpdateEffect|IsomorphicLayoutEffect|DeepCompareEffect|ShallowCompareEffect)$',
-      }],
+      'react-hooks/exhaustive-deps': [
+        'error',
+        {
+          // From react-use https://github.com/streamich/react-use/issues/1703#issuecomment-770972824
+          additionalHooks:
+            '^use(Async|AsyncFn|AsyncRetry|Debounce|UpdateEffect|IsomorphicLayoutEffect|DeepCompareEffect|ShallowCompareEffect)$',
+        },
+      ],
       'react-hooks/rules-of-hooks': 'error',
 
       '@typescript-eslint/array-type': ['error', { default: 'array', readonly: 'array' }],
       '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
       '@typescript-eslint/consistent-type-imports': 'error',
-      '@typescript-eslint/no-empty-interface': ['error', { 'allowSingleExtends': true }],
+      '@typescript-eslint/no-empty-interface': ['error', { allowSingleExtends: true }],
       '@typescript-eslint/no-empty-object-type': 'off', // TODO: Enable this rule
       '@typescript-eslint/no-empty-function': 'off',
       '@typescript-eslint/no-namespace': ['error', { allowDeclarations: true }],
@@ -77,7 +84,7 @@ export default tseslint.config(
       '@typescript-eslint/no-dynamic-delete': 'off',
       '@typescript-eslint/no-non-null-assertion': 'off',
       '@typescript-eslint/no-invalid-void-type': 'off',
-    }
+    },
   },
   eslintConfigPrettier,
   {
@@ -106,6 +113,6 @@ export default tseslint.config(
       '**/traces/*',
       '**/verify-pkg.js',
       '**/__mocks__/*',
-    ]
-  }
+    ],
+  },
 );
diff --git a/package.json b/package.json
index 7f2209dd45..e2c79976b3 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,6 @@
     "lint": "npm run lint --workspaces --if-present",
     "type-check": "npm run type-check --workspaces --if-present",
     "test": "npm run test --workspaces --if-present",
-    "lint:markdown": "npx markdownlint-cli2 \"**/*.md\" \"#**/node_modules\" \"#**/CHANGELOG.md\"",
     "clean": "git clean -dfX",
     "install-libcurl-electron": "node_modules/.bin/node-pre-gyp install --directory node_modules/@getinsomnia/node-libcurl --update-binary --runtime=electron --target=$target",
     "inso-start": "npm start -w insomnia-inso",
diff --git a/packages/insomnia-inso/README.md b/packages/insomnia-inso/README.md
index 14b4326491..15921dcd4e 100644
--- a/packages/insomnia-inso/README.md
+++ b/packages/insomnia-inso/README.md
@@ -33,8 +33,7 @@ $PWD/packages/insomnia-inso/bin/inso -w packages/insomnia-inso/src/db/fixtures/g
 
 ### node-libcurl
 
-`Error: The module '.../insomnia/node_modules/@getinsomnia/node-libcurl/lib/binding/node_libcurl.node'
-was compiled against a different Node.js version using`
+`Error: The module '.../insomnia/node_modules/@getinsomnia/node-libcurl/lib/binding/node_libcurl.node' was compiled against a different Node.js version using`
 
 node-libcurl builds for 3 operating systems and two versions of nodejs. insomnia-inso uses the nodejs build and insomnia app uses the electron build. you can switch between them using the following two commands
 
diff --git a/packages/insomnia-inso/esbuild.ts b/packages/insomnia-inso/esbuild.ts
index b249fc2875..c0fbf6a6fe 100644
--- a/packages/insomnia-inso/esbuild.ts
+++ b/packages/insomnia-inso/esbuild.ts
@@ -22,9 +22,7 @@ const config: BuildOptions = {
             paths: [args.resolveDir],
           });
           // Call twice the replace is to solve the problem of the path in Windows
-          const pathEsm = pathUmdMay
-            .replace('/umd/', '/esm/')
-            .replace('\\umd\\', '\\esm\\');
+          const pathEsm = pathUmdMay.replace('/umd/', '/esm/').replace('\\umd\\', '\\esm\\');
           return { path: pathEsm };
         });
       },
diff --git a/packages/insomnia-inso/src/cli.test.ts b/packages/insomnia-inso/src/cli.test.ts
index 6701238dc9..948447a07b 100644
--- a/packages/insomnia-inso/src/cli.test.ts
+++ b/packages/insomnia-inso/src/cli.test.ts
@@ -82,7 +82,8 @@ describe('inso dev bundle', () => {
   });
   describe('response and timeline has scripting effects', () => {
     it('console log appears in timeline', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/minimal.yml wrk_5b5ab6 --verbose';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/minimal.yml wrk_5b5ab6 --verbose';
       const result = await runCliFromRoot(input);
       if (result.code !== 0) {
         console.log(result);
@@ -93,7 +94,8 @@ describe('inso dev bundle', () => {
     });
 
     it('insomnia.request.addHeader works', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/script-add-header.yml wrk_5b5ab6 --verbose';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/script-add-header.yml wrk_5b5ab6 --verbose';
       const result = await runCliFromRoot(input);
       if (result.code !== 0) {
         console.log(result);
@@ -104,7 +106,8 @@ describe('inso dev bundle', () => {
     });
 
     it('require("insomnia-collection") works', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/script-require.yml wrk_5b5ab6 --verbose';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/script-require.yml wrk_5b5ab6 --verbose';
       const result = await runCliFromRoot(input);
       if (result.code !== 0) {
         console.log(result);
@@ -114,7 +117,8 @@ describe('inso dev bundle', () => {
     });
 
     it('insomnia.sendRequest works', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/script-send-request.yml wrk_cfacae --verbose';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/script-send-request.yml wrk_cfacae --verbose';
       const result = await runCliFromRoot(input);
       if (result.code !== 0) {
         console.log(result);
@@ -123,7 +127,8 @@ describe('inso dev bundle', () => {
     });
 
     it('iterationData and iterationCount args work', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -d packages/insomnia-smoke-test/fixtures/files/runner-data.json -w packages/insomnia-inso/src/examples/three-requests.yml -n 2 -i req_3fd28aabbb18447abab1f45e6ee4bdc1 -e env_86e135 wrk_c992d40 --verbose';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -d packages/insomnia-smoke-test/fixtures/files/runner-data.json -w packages/insomnia-inso/src/examples/three-requests.yml -n 2 -i req_3fd28aabbb18447abab1f45e6ee4bdc1 -e env_86e135 wrk_c992d40 --verbose';
       const result = await runCliFromRoot(input);
       if (result.code !== 0) {
         console.log(result);
@@ -133,7 +138,8 @@ describe('inso dev bundle', () => {
     });
 
     it('send request with client cert and key', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/db/fixtures/nedb --requestNamePattern "withCertAndCA" --verbose "Insomnia Designer" wrk_0b96eff';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/db/fixtures/nedb --requestNamePattern "withCertAndCA" --verbose "Insomnia Designer" wrk_0b96eff';
       const result = await runCliFromRoot(input);
       if (result.code !== 0) {
         console.log(result);
@@ -143,13 +149,15 @@ describe('inso dev bundle', () => {
     });
 
     it('send request with settings enabled (by testing followRedirects)', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/db/fixtures/nedb --requestNamePattern "withSettings" --verbose "Insomnia Designer" wrk_0b96eff';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/db/fixtures/nedb --requestNamePattern "withSettings" --verbose "Insomnia Designer" wrk_0b96eff';
       const result = await runCliFromRoot(input);
       expect(result.stdout).not.toContain("Issue another request to this URL: 'https://insomnia.rest/'");
     });
 
     it('run collection: run requests in specified order', async () => {
-      const input = '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/three-requests.yml -i req_6063adcdab5b409e9b4f00f47322df4a -i req_3fd28aabbb18447abab1f45e6ee4bdc1 -e env_86e135 wrk_c992d40 --verbose';
+      const input =
+        '$PWD/packages/insomnia-inso/bin/inso run collection -w packages/insomnia-inso/src/examples/three-requests.yml -i req_6063adcdab5b409e9b4f00f47322df4a -i req_3fd28aabbb18447abab1f45e6ee4bdc1 -e env_86e135 wrk_c992d40 --verbose';
       const result = await runCliFromRoot(input);
 
       expect(result.code).toBe(0);
@@ -164,8 +172,12 @@ describe('inso dev bundle', () => {
   });
 });
 
-const packagedSuccessCodes = shouldReturnSuccessCode.map(x => x.replace('$PWD/packages/insomnia-inso/bin/inso', '$PWD/packages/insomnia-inso/binaries/inso'));
-const packagedErrorCodes = shouldReturnErrorCode.map(x => x.replace('$PWD/packages/insomnia-inso/bin/inso', '$PWD/packages/insomnia-inso/binaries/inso'));
+const packagedSuccessCodes = shouldReturnSuccessCode.map(x =>
+  x.replace('$PWD/packages/insomnia-inso/bin/inso', '$PWD/packages/insomnia-inso/binaries/inso'),
+);
+const packagedErrorCodes = shouldReturnErrorCode.map(x =>
+  x.replace('$PWD/packages/insomnia-inso/bin/inso', '$PWD/packages/insomnia-inso/binaries/inso'),
+);
 
 describe('inso packaged binary', () => {
   describe('exit codes are consistent', () => {
@@ -206,7 +218,12 @@ describe('Snapshot for', () => {
 });
 
 // Execute the command in the root directory of the project
-export const runCliFromRoot = (input: string): Promise<{ code: number; error: ExecException | null; stdout: string; stderr: string }> => {
-  return new Promise(resolve => exec(input, { cwd: path.resolve(__dirname, '../../..') },
-    (error, stdout, stderr) => resolve({ code: error?.code || 0, error, stdout, stderr })));
+export const runCliFromRoot = (
+  input: string,
+): Promise<{ code: number; error: ExecException | null; stdout: string; stderr: string }> => {
+  return new Promise(resolve =>
+    exec(input, { cwd: path.resolve(__dirname, '../../..') }, (error, stdout, stderr) =>
+      resolve({ code: error?.code || 0, error, stdout, stderr }),
+    ),
+  );
 };
diff --git a/packages/insomnia-inso/src/cli.ts b/packages/insomnia-inso/src/cli.ts
index 8186f20902..7db3696c1f 100644
--- a/packages/insomnia-inso/src/cli.ts
+++ b/packages/insomnia-inso/src/cli.ts
@@ -109,7 +109,7 @@ export class InsoError extends Error {
  * getAppDataDir returns the data directory for an Electron app,
  * it is equivalent to the app.getPath('userData') API in Electron.
  * https://www.electronjs.org/docs/api/app#appgetpathname
-*/
+ */
 export function getAppDataDir(app: string): string {
   switch (process.platform) {
     case 'darwin':
@@ -146,7 +146,7 @@ export const logErrorAndExit = (err?: Error) => {
 };
 const noConsoleLog = async <T>(callback: () => Promise<T>): Promise<T> => {
   const oldConsoleLog = console.log;
-  console.log = () => { };
+  console.log = () => {};
   try {
     return await callback();
   } finally {
@@ -213,10 +213,10 @@ const logTestResult = (reporter: TestReporter, testResults?: RequestTestResult[]
   const fallbackReporter = testResults.map(r => `${r.status === 'passed' ? '✅' : '❌'} ${r.testCase}`).join('\n');
 
   const reporterMap = {
-    dot: testResults.map(r => r.status === 'passed' ? '.' : 'F').join(''),
+    dot: testResults.map(r => (r.status === 'passed' ? '.' : 'F')).join(''),
     list: fallbackReporter,
     min: ' ',
-    progress: `[${testResults.map(r => r.status === 'passed' ? '-' : 'x').join('')}]`,
+    progress: `[${testResults.map(r => (r.status === 'passed' ? '-' : 'x')).join('')}]`,
     spec: fallbackReporter,
     tap: convertToTAP(testResults),
   };
@@ -226,7 +226,10 @@ Total tests: ${testResults.length}
 Passed: ${testResults.filter(r => r.status === 'passed').length}
 Failed: ${testResults.filter(r => r.status === 'failed').length}
 
-${testResults.filter(r => r.status === 'failed').map(r => r.errorMessage).join('\n')}`;
+${testResults
+  .filter(r => r.status === 'failed')
+  .map(r => r.errorMessage)
+  .join('\n')}`;
   return `${reporterMap[reporter] || fallbackReporter}${summary}`;
 };
 function convertToTAP(testCases: RequestTestResult[]): string {
@@ -253,7 +256,9 @@ const readFileFromPathOrUrl = async (pathOrUrl: string) => {
   return readFile(pathOrUrl, 'utf8');
 };
 const pathToIterationData = async (pathOrUrl: string, env: string[]): Promise<UserUploadEnvironment[]> => {
-  const envAsObject = env.map(envString => Object.fromEntries(new URLSearchParams(envString).entries())).reduce((acc, obj) => ({ ...acc, ...obj }), {});
+  const envAsObject = env
+    .map(envString => Object.fromEntries(new URLSearchParams(envString).entries()))
+    .reduce((acc, obj) => ({ ...acc, ...obj }), {});
   const fileType = pathOrUrl.split('.').pop()?.toLowerCase();
   const content = await readFileFromPathOrUrl(pathOrUrl);
   if (!content) {
@@ -267,7 +272,9 @@ const getListFromFileOrUrl = (content: string, fileType?: string): Record<string
     try {
       const jsonDataContent = JSON.parse(content);
       if (Array.isArray(jsonDataContent)) {
-        return jsonDataContent.filter(data => data && typeof data === 'object' && !Array.isArray(data) && data !== null);
+        return jsonDataContent.filter(
+          data => data && typeof data === 'object' && !Array.isArray(data) && data !== null,
+        );
       }
       throw new Error('Invalid JSON file uploaded, JSON file must be array of key-value pairs.');
     } catch (error) {
@@ -275,15 +282,20 @@ const getListFromFileOrUrl = (content: string, fileType?: string): Record<string
     }
   } else if (fileType === 'csv') {
     // Replace CRLF (Windows line break) and CR (Mac link break) with \n, then split into csv arrays
-    const csvRows = content.replace(/\r\n|\r/g, '\n').split('\n').map(row => row.split(','));
+    const csvRows = content
+      .replace(/\r\n|\r/g, '\n')
+      .split('\n')
+      .map(row => row.split(','));
     // at least 2 rows required for csv
     if (csvRows.length > 1) {
       const csvHeaders = csvRows[0];
       const csvContentRows = csvRows.slice(1, csvRows.length);
-      return csvContentRows.map(contentRow => csvHeaders.reduce((acc: Record<string, any>, cur, idx) => {
-        acc[cur] = contentRow[idx] ?? '';
-        return acc;
-      }, {}));
+      return csvContentRows.map(contentRow =>
+        csvHeaders.reduce((acc: Record<string, any>, cur, idx) => {
+          acc[cur] = contentRow[idx] ?? '';
+          return acc;
+        }, {}),
+      );
     }
     throw new Error('CSV file must contain at least two rows with first row as variable names');
   }
@@ -306,7 +318,6 @@ const transformIterationDataToEnvironmentList = (list: Record<string, string>[])
 };
 
 export const go = (args?: string[]) => {
-
   const program = new commander.Command();
   const version = process.env.VERSION || packageJson.version;
 
@@ -341,7 +352,8 @@ export const go = (args?: string[]) => {
 
   program
     .version(version, '-v, --version')
-    .description(`A CLI for Insomnia!
+    .description(
+      `A CLI for Insomnia!
   With this tool you can test, lint, and export your Insomnia data.
   Inso will try to detect your locally installed Insomnia data.
   You can also point it at a git repository folder, or an Insomnia export file.
@@ -355,18 +367,19 @@ export const go = (args?: string[]) => {
 
   Inso also supports configuration files, by default it will look for .insorc in the current/provided working directory.
   $ inso export spec --config /some/path/.insorc
-`)
+`,
+    )
     .option('-w, --workingDir <dir>', 'set working directory/file: .insomnia folder, *.db.json, export.yaml', '')
     .option('--verbose', 'show additional logs while running the command', false)
     .option('--ci', 'run in CI, disables all prompts, defaults to false', false)
     .option('--config <path>', 'path to configuration file containing above options (.insorc)', '')
     .option('--printOptions', 'print the loaded options', false);
 
-  const run = program.command('run')
-    .description('Execution utilities');
+  const run = program.command('run').description('Execution utilities');
 
   const defaultReporter: TestReporter = 'spec';
-  run.command('test [identifier]')
+  run
+    .command('test [identifier]')
     .description('Run Insomnia unit test suites, identifier can be a test suite id or a API Spec id')
     .option('-e, --env <identifier>', 'environment to use', '')
     .option('-t, --testNamePattern <regex>', 'run tests that match the regex', '')
@@ -376,261 +389,76 @@ export const go = (args?: string[]) => {
     .option('-k, --disableCertValidation', 'disable certificate validation for requests with SSL', false)
     .option('--httpsProxy <proxy>', 'URL for the proxy server for https requests.', proxySettings.httpsProxy)
     .option('--httpProxy <proxy>', 'URL for the proxy server for http requests.', proxySettings.httpProxy)
-    .option('--noProxy <comma_separated_list_of_hostnames>', 'Comma separated list of hostnames that do not require a proxy to get reached, even if one is specified.', proxySettings.noProxy)
-    .action(async (identifier, cmd: { env: string; testNamePattern: string; reporter: TestReporter; bail: boolean; keepFile: boolean; disableCertValidation: boolean; ci: boolean; httpsProxy?: string; httpProxy?: string; noProxy?: string }) => {
-      const globals: GlobalOptions = program.optsWithGlobals();
-      const commandOptions = { ...globals, ...cmd };
-      const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
+    .option(
+      '--noProxy <comma_separated_list_of_hostnames>',
+      'Comma separated list of hostnames that do not require a proxy to get reached, even if one is specified.',
+      proxySettings.noProxy,
+    )
+    .action(
+      async (
+        identifier,
+        cmd: {
+          env: string;
+          testNamePattern: string;
+          reporter: TestReporter;
+          bail: boolean;
+          keepFile: boolean;
+          disableCertValidation: boolean;
+          ci: boolean;
+          httpsProxy?: string;
+          httpProxy?: string;
+          noProxy?: string;
+        },
+      ) => {
+        const globals: GlobalOptions = program.optsWithGlobals();
+        const commandOptions = { ...globals, ...cmd };
+        const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
 
-      const options = {
-        ...__configFile?.options || {},
-        ...commandOptions,
-      };
-      logger.level = options.verbose ? LogLevel.Verbose : LogLevel.Info;
-      options.ci && logger.setReporters([new BasicReporter()]);
-      options.printOptions && logger.log('Loaded options', options, '\n');
-      const useLocalAppData = !options.workingDir && !options.exportFile;
-      let pathToSearch = '';
-      if (useLocalAppData) {
-        logger.warn('No working directory or export file provided, using local app data directory.');
-        pathToSearch = localAppDir;
-      } else {
-        pathToSearch = path.resolve(options.workingDir || process.cwd(), options.exportFile || '');
-      }
-      if (options.reporter && !reporterTypes.find(r => r === options.reporter)) {
-        logger.fatal(`Reporter "${options.reporter}" not unrecognized. Options are [${reporterTypes.join(', ')}].`);
-        return process.exit(1);
-      }
+        const options = {
+          ...(__configFile?.options || {}),
+          ...commandOptions,
+        };
+        logger.level = options.verbose ? LogLevel.Verbose : LogLevel.Info;
+        options.ci && logger.setReporters([new BasicReporter()]);
+        options.printOptions && logger.log('Loaded options', options, '\n');
+        const useLocalAppData = !options.workingDir && !options.exportFile;
+        let pathToSearch = '';
+        if (useLocalAppData) {
+          logger.warn('No working directory or export file provided, using local app data directory.');
+          pathToSearch = localAppDir;
+        } else {
+          pathToSearch = path.resolve(options.workingDir || process.cwd(), options.exportFile || '');
+        }
+        if (options.reporter && !reporterTypes.find(r => r === options.reporter)) {
+          logger.fatal(`Reporter "${options.reporter}" not unrecognized. Options are [${reporterTypes.join(', ')}].`);
+          return process.exit(1);
+        }
 
-      const db = await loadDb({
-        pathToSearch,
-        filterTypes: [],
-      });
-
-      // Find suites
-      const suites = identifier ? loadTestSuites(db, identifier) : await promptTestSuites(db, !!options.ci);
-
-      if (!suites.length) {
-        logger.fatal('No test suites found; cannot run tests.', identifier);
-        return process.exit(1);
-      }
-
-      // Find environment
-      const workspaceId = suites[0].parentId;
-
-      const environment = options.env ? loadEnvironment(db, workspaceId, options.env) : await promptEnvironment(db, !!options.ci, workspaceId);
-
-      if (!environment) {
-        logger.fatal('No environment identified; cannot run tests without a valid environment.');
-        return process.exit(1);
-      }
-
-      const transientVariables = {
-        ...init(),
-        _id: uuidv4(),
-        type: EnvironmentType,
-        parentId: '',
-        modified: 0,
-        created: Date.now(),
-        name: 'Transient Variables',
-        data: {},
-      };
-
-      const proxyOptions: {
-        proxyEnabled: boolean;
-        httpProxy?: string;
-        httpsProxy?: string;
-        noProxy?: string;
-      } = {
-        proxyEnabled: Boolean(options.httpProxy || options.httpsProxy),
-        httpProxy: options.httpProxy,
-        httpsProxy: options.httpsProxy,
-        noProxy: options.noProxy,
-      };
-
-      try {
-        const sendRequest = await getSendRequestCallbackMemDb(environment._id, db, transientVariables, { validateSSL: !options.disableCertValidation, ...proxyOptions });
-        // Generate test file
-        const testFileContents = generate(suites.map(suite => ({
-          name: suite.name,
-          suites: [],
-          tests: db.UnitTest.filter(test => test.parentId === suite._id)
-            .sort((a, b) => a.metaSortKey - b.metaSortKey)
-            .map(({ name, code, requestId }) => ({ name, code, defaultRequestId: requestId })),
-        })));
-
-        const runTestPromise = runTestsCli(testFileContents, {
-          reporter: options.reporter,
-          bail: options.bail,
-          keepFile: options.keepFile,
-          sendRequest,
-          testFilter: options.testNamePattern,
+        const db = await loadDb({
+          pathToSearch,
+          filterTypes: [],
         });
 
-        // TODO: is this necessary?
-        const success = options.verbose ? await runTestPromise : await noConsoleLog(() => runTestPromise);
-        return process.exit(success ? 0 : 1);
-      } catch (error) {
-        logErrorAndExit(error);
-      }
-      return process.exit(1);
-    });
+        // Find suites
+        const suites = identifier ? loadTestSuites(db, identifier) : await promptTestSuites(db, !!options.ci);
 
-  run.command('collection [identifier]')
-    .description('Run Insomnia request collection, identifier can be a workspace id')
-    .option('-t, --requestNamePattern <regex>', 'run requests that match the regex', '')
-    .option('-i, --item <requestid>', 'request or folder id to run', collect, [])
-    .option('-e, --env <identifier>', 'environment to use', '')
-    .option('-g, --globals <identifier>', 'global environment to use (filepath or id)', '')
-    .option('--delay-request <duration>', 'milliseconds to delay between requests', '0')
-    .option('--env-var <key=value>', 'override environment variables', collect, [])
-    .option('-n, --iteration-count <count>', 'number of times to repeat', '1')
-    .option('-d, --iteration-data <path/url>', 'file path or url (JSON or CSV)', '')
-    .option('-r, --reporter <reporter>', `reporter to use, options are [${reporterTypes.join(', ')}]`, defaultReporter)
-    .option('-b, --bail', 'abort ("bail") after first non-200 response', false)
-    .option('--disableCertValidation', 'disable certificate validation for requests with SSL', false)
-    .option('--httpsProxy <proxy>', 'URL for the proxy server for https requests.', proxySettings.httpsProxy)
-    .option('--httpProxy <proxy>', 'URL for the proxy server for http requests.', proxySettings.httpProxy)
-    .option('--noProxy <comma_separated_list_of_hostnames>', 'Comma separated list of hostnames that do not require a proxy to get reached, even if one is specified.', proxySettings.noProxy)
-    .action(async (identifier, cmd: { env: string; globals: string; disableCertValidation: boolean; requestNamePattern: string; bail: boolean; item: string[]; delayRequest: string; iterationCount: string; iterationData: string; envVar: string[]; httpsProxy?: string; httpProxy?: string; noProxy?: string }) => {
-      const globals: { config: string; workingDir: string; exportFile: string; ci: boolean; printOptions: boolean; verbose: boolean } = program.optsWithGlobals();
-
-      const commandOptions = { ...globals, ...cmd };
-      const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
-
-      const options = {
-        reporter: defaultReporter,
-        ...__configFile?.options || {},
-        ...commandOptions,
-      };
-      logger.level = options.verbose ? LogLevel.Verbose : LogLevel.Info;
-      options.ci && logger.setReporters([new BasicReporter()]);
-      options.printOptions && logger.log('Loaded options', options, '\n');
-      let pathToSearch = '';
-      const useLocalAppData = !options.workingDir && !options.exportFile;
-      if (useLocalAppData) {
-        logger.warn('No working directory or export file provided, using local app data directory.');
-        pathToSearch = localAppDir;
-      } else {
-        pathToSearch = path.resolve(options.workingDir || process.cwd(), options.exportFile || '');
-      }
-
-      const db = await loadDb({
-        pathToSearch,
-        filterTypes: [],
-      });
-
-      const workspace = await getWorkspaceOrFallback(db, identifier, options.ci);
-      if (!workspace) {
-        logger.fatal('No workspace found in the provided data store or fallbacks.');
-        return process.exit(1);
-      }
-
-      // Find environment
-      const workspaceId = workspace._id;
-      // get global env by id from nedb or gitstore, or first element from file
-      // smell: mutates db
-      if (options.globals) {
-        const isGlobalFile = await isFile(options.globals);
-        if (!isGlobalFile) {
-          const globalEnv = db.Environment.find(env => matchIdIsh(env, options.globals) || env.name === options.globals);
-          if (!globalEnv) {
-            logger.warn('No global environment found with id or name', options.globals);
-            return process.exit(1);
-          }
-          if (globalEnv) {
-            // attach this global env to the workspace
-            db.WorkspaceMeta = [{ activeGlobalEnvironmentId: globalEnv._id, _id: `wrkm_${uuidv4().replace(/-/g, '')}`, type: 'WorkspaceMeta', parentId: workspaceId, name: '' }];
-          }
+        if (!suites.length) {
+          logger.fatal('No test suites found; cannot run tests.', identifier);
+          return process.exit(1);
         }
-        if (isGlobalFile) {
-          const globalEnvDb = await insomniaExportAdapter(options.globals, ['Environment']);
-          logger.trace('--globals is a file path, loading from file, global env selection is not currently supported, taking first element');
-          const firstGlobalEnv = globalEnvDb?.Environment?.[0];
-          if (!firstGlobalEnv) {
-            logger.warn('No environments found in the file', options.globals);
-            return process.exit(1);
-          }
-          // mutate db to include the global envs
-          db.Environment = [...db.Environment, ...globalEnvDb.Environment];
-          // attach this global env to the workspace
-          db.WorkspaceMeta = [{ activeGlobalEnvironmentId: firstGlobalEnv._id, _id: `wrkm_${uuidv4().replace(/-/g, '')}`, type: 'WorkspaceMeta', parentId: workspaceId, name: '' }];
+
+        // Find environment
+        const workspaceId = suites[0].parentId;
+
+        const environment = options.env
+          ? loadEnvironment(db, workspaceId, options.env)
+          : await promptEnvironment(db, !!options.ci, workspaceId);
+
+        if (!environment) {
+          logger.fatal('No environment identified; cannot run tests without a valid environment.');
+          return process.exit(1);
         }
-      }
-      const environment = options.env ? loadEnvironment(db, workspaceId, options.env) : await promptEnvironment(db, !!options.ci, workspaceId);
-      if (!environment) {
-        logger.fatal('No environment identified; cannot run requests without a valid environment.');
-        return process.exit(1);
-      }
 
-      let requestsToRun = getRequestsToRunFromListOrWorkspace(db, workspaceId, options.item);
-      if (options.requestNamePattern) {
-        requestsToRun = requestsToRun.filter(req => req.name.match(new RegExp(options.requestNamePattern)));
-      }
-      if (!requestsToRun.length) {
-        logger.fatal('No requests identified; nothing to run.');
-        return process.exit(1);
-      }
-
-      // sort requests
-      const isRunningFolder = options.item.length === 1 && options.item[0].startsWith('fld_');
-      if (options.item.length && !isRunningFolder) {
-        const requestOrder = new Map<string, number>();
-        options.item.forEach((reqId: string, order: number) => requestOrder.set(reqId, order + 1));
-        requestsToRun = requestsToRun.sort((a, b) => (requestOrder.get(a._id) || requestsToRun.length) - (requestOrder.get(b._id) || requestsToRun.length));
-      } else {
-        const getAllParentGroupSortKeys = (doc: BaseModel): number[] => {
-          const parentFolder = db.RequestGroup.find(rg => rg._id === doc.parentId);
-          if (parentFolder === undefined) {
-            return [];
-          }
-          return [(parentFolder as RequestGroup).metaSortKey, ...getAllParentGroupSortKeys(parentFolder)];
-        };
-
-        // sort by metaSortKey (manual sorting order)
-        requestsToRun = requestsToRun.map(request => {
-          const allParentGroupSortKeys = getAllParentGroupSortKeys(request as BaseModel);
-
-          return {
-            ancestors: allParentGroupSortKeys.reverse(),
-            request,
-          };
-        }).sort((a, b) => {
-          let compareResult = 0;
-
-          let i = 0, j = 0;
-          for (; i < a.ancestors.length && j < b.ancestors.length; i++, j++) {
-            const aSortKey = a.ancestors[i];
-            const bSortKey = b.ancestors[j];
-            if (aSortKey < bSortKey) {
-              compareResult = -1;
-              break;
-            } else if (aSortKey > bSortKey) {
-              compareResult = 1;
-              break;
-            }
-          }
-          if (compareResult !== 0) {
-            return compareResult;
-          }
-
-          if (a.ancestors.length === b.ancestors.length) {
-            return a.request.metaSortKey - b.request.metaSortKey;
-          }
-
-          if (i < a.ancestors.length) {
-            return a.ancestors[i] - b.request.metaSortKey;
-          } else if (j < b.ancestors.length) {
-            return a.request.metaSortKey - b.ancestors[j];
-          }
-          return 0;
-        }).map(({ request }) => request);
-      }
-
-      try {
-        const iterationCount = parseInt(options.iterationCount, 10);
-
-        const iterationData = await pathToIterationData(options.iterationData, options.envVar);
         const transientVariables = {
           ...init(),
           _id: uuidv4(),
@@ -654,62 +482,346 @@ export const go = (args?: string[]) => {
           noProxy: options.noProxy,
         };
 
-        const sendRequest = await getSendRequestCallbackMemDb(environment._id, db, transientVariables, { validateSSL: !options.disableCertValidation, ...proxyOptions }, iterationData, iterationCount);
-        let success = true;
-        for (let i = 0; i < iterationCount; i++) {
-          let reqIndex = 0;
-          while (reqIndex < requestsToRun.length) {
-            const req = requestsToRun[reqIndex];
+        try {
+          const sendRequest = await getSendRequestCallbackMemDb(environment._id, db, transientVariables, {
+            validateSSL: !options.disableCertValidation,
+            ...proxyOptions,
+          });
+          // Generate test file
+          const testFileContents = generate(
+            suites.map(suite => ({
+              name: suite.name,
+              suites: [],
+              tests: db.UnitTest.filter(test => test.parentId === suite._id)
+                .sort((a, b) => a.metaSortKey - b.metaSortKey)
+                .map(({ name, code, requestId }) => ({ name, code, defaultRequestId: requestId })),
+            })),
+          );
 
-            if (options.bail && !success) {
-              return;
+          const runTestPromise = runTestsCli(testFileContents, {
+            reporter: options.reporter,
+            bail: options.bail,
+            keepFile: options.keepFile,
+            sendRequest,
+            testFilter: options.testNamePattern,
+          });
+
+          // TODO: is this necessary?
+          const success = options.verbose ? await runTestPromise : await noConsoleLog(() => runTestPromise);
+          return process.exit(success ? 0 : 1);
+        } catch (error) {
+          logErrorAndExit(error);
+        }
+        return process.exit(1);
+      },
+    );
+
+  run
+    .command('collection [identifier]')
+    .description('Run Insomnia request collection, identifier can be a workspace id')
+    .option('-t, --requestNamePattern <regex>', 'run requests that match the regex', '')
+    .option('-i, --item <requestid>', 'request or folder id to run', collect, [])
+    .option('-e, --env <identifier>', 'environment to use', '')
+    .option('-g, --globals <identifier>', 'global environment to use (filepath or id)', '')
+    .option('--delay-request <duration>', 'milliseconds to delay between requests', '0')
+    .option('--env-var <key=value>', 'override environment variables', collect, [])
+    .option('-n, --iteration-count <count>', 'number of times to repeat', '1')
+    .option('-d, --iteration-data <path/url>', 'file path or url (JSON or CSV)', '')
+    .option('-r, --reporter <reporter>', `reporter to use, options are [${reporterTypes.join(', ')}]`, defaultReporter)
+    .option('-b, --bail', 'abort ("bail") after first non-200 response', false)
+    .option('--disableCertValidation', 'disable certificate validation for requests with SSL', false)
+    .option('--httpsProxy <proxy>', 'URL for the proxy server for https requests.', proxySettings.httpsProxy)
+    .option('--httpProxy <proxy>', 'URL for the proxy server for http requests.', proxySettings.httpProxy)
+    .option(
+      '--noProxy <comma_separated_list_of_hostnames>',
+      'Comma separated list of hostnames that do not require a proxy to get reached, even if one is specified.',
+      proxySettings.noProxy,
+    )
+    .action(
+      async (
+        identifier,
+        cmd: {
+          env: string;
+          globals: string;
+          disableCertValidation: boolean;
+          requestNamePattern: string;
+          bail: boolean;
+          item: string[];
+          delayRequest: string;
+          iterationCount: string;
+          iterationData: string;
+          envVar: string[];
+          httpsProxy?: string;
+          httpProxy?: string;
+          noProxy?: string;
+        },
+      ) => {
+        const globals: {
+          config: string;
+          workingDir: string;
+          exportFile: string;
+          ci: boolean;
+          printOptions: boolean;
+          verbose: boolean;
+        } = program.optsWithGlobals();
+
+        const commandOptions = { ...globals, ...cmd };
+        const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
+
+        const options = {
+          reporter: defaultReporter,
+          ...(__configFile?.options || {}),
+          ...commandOptions,
+        };
+        logger.level = options.verbose ? LogLevel.Verbose : LogLevel.Info;
+        options.ci && logger.setReporters([new BasicReporter()]);
+        options.printOptions && logger.log('Loaded options', options, '\n');
+        let pathToSearch = '';
+        const useLocalAppData = !options.workingDir && !options.exportFile;
+        if (useLocalAppData) {
+          logger.warn('No working directory or export file provided, using local app data directory.');
+          pathToSearch = localAppDir;
+        } else {
+          pathToSearch = path.resolve(options.workingDir || process.cwd(), options.exportFile || '');
+        }
+
+        const db = await loadDb({
+          pathToSearch,
+          filterTypes: [],
+        });
+
+        const workspace = await getWorkspaceOrFallback(db, identifier, options.ci);
+        if (!workspace) {
+          logger.fatal('No workspace found in the provided data store or fallbacks.');
+          return process.exit(1);
+        }
+
+        // Find environment
+        const workspaceId = workspace._id;
+        // get global env by id from nedb or gitstore, or first element from file
+        // smell: mutates db
+        if (options.globals) {
+          const isGlobalFile = await isFile(options.globals);
+          if (!isGlobalFile) {
+            const globalEnv = db.Environment.find(
+              env => matchIdIsh(env, options.globals) || env.name === options.globals,
+            );
+            if (!globalEnv) {
+              logger.warn('No global environment found with id or name', options.globals);
+              return process.exit(1);
             }
-            logger.log(`Running request: ${req.name} ${req._id}`);
-            const res = await sendRequest(req._id, i);
-            if (!res) {
-              logger.error('Timed out while running script');
-              success = false;
-              continue;
-            }
-
-            const timelineString = await readFile(res.timelinePath, 'utf8');
-            const appendNewLineIfNeeded = (str: string) => str.endsWith('\n') ? str : str + '\n';
-            const timeline = deserializeNDJSON(timelineString).map(e => appendNewLineIfNeeded(e.value)).join('');
-            logger.trace(timeline);
-            if (res.testResults?.length) {
-              console.log(`
-Test results:`);
-              console.log(logTestResult(options.reporter, res.testResults));
-              const hasFailedTests = res.testResults.some(t => t.status === 'failed');
-              if (hasFailedTests) {
-                success = false;
-              }
-            }
-
-            await new Promise(r => setTimeout(r, parseInt(options.delayRequest, 10)));
-
-            if (res.nextRequestIdOrName) {
-              const offset = getNextRequestOffset(requestsToRun.slice(reqIndex), res.nextRequestIdOrName);
-              reqIndex += offset;
-              if (reqIndex < requestsToRun.length) {
-                console.log(`The next request has been pointed to "${requestsToRun[reqIndex].name}"`);
-              } else {
-                console.log(`No request has been found for "${res.nextRequestIdOrName}", ending the iteration`);
-              }
-            } else {
-              reqIndex++;
+            if (globalEnv) {
+              // attach this global env to the workspace
+              db.WorkspaceMeta = [
+                {
+                  activeGlobalEnvironmentId: globalEnv._id,
+                  _id: `wrkm_${uuidv4().replace(/-/g, '')}`,
+                  type: 'WorkspaceMeta',
+                  parentId: workspaceId,
+                  name: '',
+                },
+              ];
             }
           }
+          if (isGlobalFile) {
+            const globalEnvDb = await insomniaExportAdapter(options.globals, ['Environment']);
+            logger.trace(
+              '--globals is a file path, loading from file, global env selection is not currently supported, taking first element',
+            );
+            const firstGlobalEnv = globalEnvDb?.Environment?.[0];
+            if (!firstGlobalEnv) {
+              logger.warn('No environments found in the file', options.globals);
+              return process.exit(1);
+            }
+            // mutate db to include the global envs
+            db.Environment = [...db.Environment, ...globalEnvDb.Environment];
+            // attach this global env to the workspace
+            db.WorkspaceMeta = [
+              {
+                activeGlobalEnvironmentId: firstGlobalEnv._id,
+                _id: `wrkm_${uuidv4().replace(/-/g, '')}`,
+                type: 'WorkspaceMeta',
+                parentId: workspaceId,
+                name: '',
+              },
+            ];
+          }
+        }
+        const environment = options.env
+          ? loadEnvironment(db, workspaceId, options.env)
+          : await promptEnvironment(db, !!options.ci, workspaceId);
+        if (!environment) {
+          logger.fatal('No environment identified; cannot run requests without a valid environment.');
+          return process.exit(1);
         }
-        return process.exit(success ? 0 : 1);
-      } catch (error) {
-        logErrorAndExit(error);
-      }
-      return process.exit(1);
-    });
 
-  program.command('lint')
-    .description('Lint a yaml file in the workingDir or the provided file path (with  .spectral.yml) or a spec in an Insomnia database directory')
+        let requestsToRun = getRequestsToRunFromListOrWorkspace(db, workspaceId, options.item);
+        if (options.requestNamePattern) {
+          requestsToRun = requestsToRun.filter(req => req.name.match(new RegExp(options.requestNamePattern)));
+        }
+        if (!requestsToRun.length) {
+          logger.fatal('No requests identified; nothing to run.');
+          return process.exit(1);
+        }
+
+        // sort requests
+        const isRunningFolder = options.item.length === 1 && options.item[0].startsWith('fld_');
+        if (options.item.length && !isRunningFolder) {
+          const requestOrder = new Map<string, number>();
+          options.item.forEach((reqId: string, order: number) => requestOrder.set(reqId, order + 1));
+          requestsToRun = requestsToRun.sort(
+            (a, b) =>
+              (requestOrder.get(a._id) || requestsToRun.length) - (requestOrder.get(b._id) || requestsToRun.length),
+          );
+        } else {
+          const getAllParentGroupSortKeys = (doc: BaseModel): number[] => {
+            const parentFolder = db.RequestGroup.find(rg => rg._id === doc.parentId);
+            if (parentFolder === undefined) {
+              return [];
+            }
+            return [(parentFolder as RequestGroup).metaSortKey, ...getAllParentGroupSortKeys(parentFolder)];
+          };
+
+          // sort by metaSortKey (manual sorting order)
+          requestsToRun = requestsToRun
+            .map(request => {
+              const allParentGroupSortKeys = getAllParentGroupSortKeys(request as BaseModel);
+
+              return {
+                ancestors: allParentGroupSortKeys.reverse(),
+                request,
+              };
+            })
+            .sort((a, b) => {
+              let compareResult = 0;
+
+              let i = 0,
+                j = 0;
+              for (; i < a.ancestors.length && j < b.ancestors.length; i++, j++) {
+                const aSortKey = a.ancestors[i];
+                const bSortKey = b.ancestors[j];
+                if (aSortKey < bSortKey) {
+                  compareResult = -1;
+                  break;
+                } else if (aSortKey > bSortKey) {
+                  compareResult = 1;
+                  break;
+                }
+              }
+              if (compareResult !== 0) {
+                return compareResult;
+              }
+
+              if (a.ancestors.length === b.ancestors.length) {
+                return a.request.metaSortKey - b.request.metaSortKey;
+              }
+
+              if (i < a.ancestors.length) {
+                return a.ancestors[i] - b.request.metaSortKey;
+              } else if (j < b.ancestors.length) {
+                return a.request.metaSortKey - b.ancestors[j];
+              }
+              return 0;
+            })
+            .map(({ request }) => request);
+        }
+
+        try {
+          const iterationCount = parseInt(options.iterationCount, 10);
+
+          const iterationData = await pathToIterationData(options.iterationData, options.envVar);
+          const transientVariables = {
+            ...init(),
+            _id: uuidv4(),
+            type: EnvironmentType,
+            parentId: '',
+            modified: 0,
+            created: Date.now(),
+            name: 'Transient Variables',
+            data: {},
+          };
+
+          const proxyOptions: {
+            proxyEnabled: boolean;
+            httpProxy?: string;
+            httpsProxy?: string;
+            noProxy?: string;
+          } = {
+            proxyEnabled: Boolean(options.httpProxy || options.httpsProxy),
+            httpProxy: options.httpProxy,
+            httpsProxy: options.httpsProxy,
+            noProxy: options.noProxy,
+          };
+
+          const sendRequest = await getSendRequestCallbackMemDb(
+            environment._id,
+            db,
+            transientVariables,
+            { validateSSL: !options.disableCertValidation, ...proxyOptions },
+            iterationData,
+            iterationCount,
+          );
+          let success = true;
+          for (let i = 0; i < iterationCount; i++) {
+            let reqIndex = 0;
+            while (reqIndex < requestsToRun.length) {
+              const req = requestsToRun[reqIndex];
+
+              if (options.bail && !success) {
+                return;
+              }
+              logger.log(`Running request: ${req.name} ${req._id}`);
+              const res = await sendRequest(req._id, i);
+              if (!res) {
+                logger.error('Timed out while running script');
+                success = false;
+                continue;
+              }
+
+              const timelineString = await readFile(res.timelinePath, 'utf8');
+              const appendNewLineIfNeeded = (str: string) => (str.endsWith('\n') ? str : str + '\n');
+              const timeline = deserializeNDJSON(timelineString)
+                .map(e => appendNewLineIfNeeded(e.value))
+                .join('');
+              logger.trace(timeline);
+              if (res.testResults?.length) {
+                console.log(`
+Test results:`);
+                console.log(logTestResult(options.reporter, res.testResults));
+                const hasFailedTests = res.testResults.some(t => t.status === 'failed');
+                if (hasFailedTests) {
+                  success = false;
+                }
+              }
+
+              await new Promise(r => setTimeout(r, parseInt(options.delayRequest, 10)));
+
+              if (res.nextRequestIdOrName) {
+                const offset = getNextRequestOffset(requestsToRun.slice(reqIndex), res.nextRequestIdOrName);
+                reqIndex += offset;
+                if (reqIndex < requestsToRun.length) {
+                  console.log(`The next request has been pointed to "${requestsToRun[reqIndex].name}"`);
+                } else {
+                  console.log(`No request has been found for "${res.nextRequestIdOrName}", ending the iteration`);
+                }
+              } else {
+                reqIndex++;
+              }
+            }
+          }
+          return process.exit(success ? 0 : 1);
+        } catch (error) {
+          logErrorAndExit(error);
+        }
+        return process.exit(1);
+      },
+    );
+
+  program
+    .command('lint')
+    .description(
+      'Lint a yaml file in the workingDir or the provided file path (with  .spectral.yml) or a spec in an Insomnia database directory',
+    )
     .command('spec [identifier]')
     .description('Lint an API Specification, identifier can be an API Spec id or a file path')
     .action(async identifier => {
@@ -717,17 +829,18 @@ Test results:`);
       const commandOptions = globals;
       const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
       const options = {
-        ...__configFile?.options || {},
+        ...(__configFile?.options || {}),
         ...commandOptions,
       };
       logger.level = options.verbose ? LogLevel.Verbose : LogLevel.Info;
       options.ci && logger.setReporters([new BasicReporter()]);
       // Assert identifier is a file
-      const identifierAsAbsPath = identifier && getAbsoluteFilePath({ workingDir: options.workingDir, file: identifier });
+      const identifierAsAbsPath =
+        identifier && getAbsoluteFilePath({ workingDir: options.workingDir, file: identifier });
       let isIdentiferAFile = false;
       try {
         isIdentiferAFile = identifier && (await fs.promises.stat(identifierAsAbsPath)).isFile();
-      } catch (err) { }
+      } catch (err) {}
       const pathToSearch = '';
       let specContent;
       let rulesetFileName;
@@ -763,7 +876,9 @@ Test results:`);
       return process.exit(1);
     });
 
-  program.command('export').description('Export data from insomnia models')
+  program
+    .command('export')
+    .description('Export data from insomnia models')
     .command('spec [identifier]')
     .description('Export an API Specification to a file, identifier can be an API Spec id')
     .option('-o, --output <path>', 'save the generated config to a file', '')
@@ -773,7 +888,7 @@ Test results:`);
       const commandOptions = { ...globals, ...cmd };
       const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
       const options = {
-        ...__configFile?.options || {},
+        ...(__configFile?.options || {}),
         ...commandOptions,
       };
       options.printOptions && logger.log('Loaded options', options, '\n');
@@ -788,7 +903,8 @@ Test results:`);
           specContent,
           skipAnnotations: options.skipAnnotations,
         });
-        const outputPath = options.output && getAbsoluteFilePath({ workingDir: options.workingDir, file: options.output });
+        const outputPath =
+          options.output && getAbsoluteFilePath({ workingDir: options.workingDir, file: options.output });
         if (!outputPath) {
           logger.log(toExport);
           return process.exit(0);
@@ -803,7 +919,8 @@ Test results:`);
     });
 
   // Add script base command
-  program.command('script <script-name>')
+  program
+    .command('script <script-name>')
     .description('Run scripts defined in .insorc')
     .allowUnknownOption()
     .action(async (scriptName: string, cmd) => {
@@ -812,7 +929,7 @@ Test results:`);
       const __configFile = await tryToReadInsoConfigFile(commandOptions.config, commandOptions.workingDir);
 
       const options = {
-        ...__configFile?.options || {},
+        ...(__configFile?.options || {}),
         ...commandOptions,
       };
       logger.level = options.verbose ? LogLevel.Verbose : LogLevel.Info;
@@ -822,7 +939,10 @@ Test results:`);
       const scriptTask = __configFile?.scripts?.[scriptName];
 
       if (!scriptTask) {
-        logger.fatal(`Could not find inso script "${scriptName}" in the config file.`, Object.keys(__configFile?.scripts || {}));
+        logger.fatal(
+          `Could not find inso script "${scriptName}" in the config file.`,
+          Object.keys(__configFile?.scripts || {}),
+        );
         return process.exit(1);
       }
 
@@ -833,9 +953,7 @@ Test results:`);
 
       // Get args after script name
       const passThroughArgs = program.args.slice(program.args.indexOf(scriptName) + 1);
-      const scriptArgs: string[] = parseArgsStringToArgv(
-        `self ${scriptTask} ${passThroughArgs.join(' ')}`,
-      );
+      const scriptArgs: string[] = parseArgsStringToArgv(`self ${scriptTask} ${passThroughArgs.join(' ')}`);
 
       logger.debug(`>> ${scriptArgs.slice(1).join(' ')}`);
 
@@ -845,10 +963,7 @@ Test results:`);
   program.parseAsync(args || process.argv).catch(logErrorAndExit);
 };
 
-const getNextRequestOffset = (
-  leftRequestsToRun: Request[],
-  nextRequestIdOrName: string
-) => {
+const getNextRequestOffset = (leftRequestsToRun: Request[], nextRequestIdOrName: string) => {
   const idMatchOffset = leftRequestsToRun.findIndex(req => req._id.trim() === nextRequestIdOrName.trim());
   if (idMatchOffset >= 0) {
     return idMatchOffset;
diff --git a/packages/insomnia-inso/src/commands/export-specification.test.ts b/packages/insomnia-inso/src/commands/export-specification.test.ts
index 9f4f05f84c..a0342eb24c 100644
--- a/packages/insomnia-inso/src/commands/export-specification.test.ts
+++ b/packages/insomnia-inso/src/commands/export-specification.test.ts
@@ -47,5 +47,4 @@ paths:
           description: OK
 `);
   });
-
 });
diff --git a/packages/insomnia-inso/src/commands/export-specification.ts b/packages/insomnia-inso/src/commands/export-specification.ts
index 30d478a8f9..650f4de04e 100644
--- a/packages/insomnia-inso/src/commands/export-specification.ts
+++ b/packages/insomnia-inso/src/commands/export-specification.ts
@@ -5,10 +5,7 @@ import YAML from 'yaml';
 
 import { InsoError } from '../cli';
 
-export async function writeFileWithCliOptions(
-  outputPath: string,
-  contents: string,
-): Promise<string> {
+export async function writeFileWithCliOptions(outputPath: string, contents: string): Promise<string> {
   try {
     await mkdir(path.dirname(outputPath), { recursive: true });
     await writeFile(outputPath, contents);
@@ -19,7 +16,13 @@ export async function writeFileWithCliOptions(
   }
 }
 
-export async function exportSpecification({ specContent, skipAnnotations }: { specContent: string; skipAnnotations: boolean }) {
+export async function exportSpecification({
+  specContent,
+  skipAnnotations,
+}: {
+  specContent: string;
+  skipAnnotations: boolean;
+}) {
   if (!skipAnnotations) {
     return specContent;
   }
diff --git a/packages/insomnia-inso/src/commands/lint-specification.test.ts b/packages/insomnia-inso/src/commands/lint-specification.test.ts
index 3c2c52b81e..10205505c1 100644
--- a/packages/insomnia-inso/src/commands/lint-specification.test.ts
+++ b/packages/insomnia-inso/src/commands/lint-specification.test.ts
@@ -4,7 +4,6 @@ import { describe, expect, it } from 'vitest';
 import { lintSpecification } from './lint-specification';
 
 describe('lint specification', () => {
-
   const specContent = `openapi: '3.0.2'
 info:
   title: Sample Spec
@@ -66,7 +65,8 @@ paths:
       responses:
         '200':
           description: OK
-`, rulesetFileName,
+`,
+      rulesetFileName,
     });
     expect(result.isValid).toBe(true);
   });
diff --git a/packages/insomnia-inso/src/commands/lint-specification.ts b/packages/insomnia-inso/src/commands/lint-specification.ts
index 60cc3f8f9c..0a0a484732 100644
--- a/packages/insomnia-inso/src/commands/lint-specification.ts
+++ b/packages/insomnia-inso/src/commands/lint-specification.ts
@@ -1,6 +1,6 @@
-import type { RulesetDefinition} from '@stoplight/spectral-core';
+import type { RulesetDefinition } from '@stoplight/spectral-core';
 import { Spectral } from '@stoplight/spectral-core';
- 
+
 const { bundleAndLoadRuleset } = require('@stoplight/spectral-ruleset-bundler/with-loader');
 import { oas } from '@stoplight/spectral-rulesets';
 import { DiagnosticSeverity } from '@stoplight/types';
@@ -22,7 +22,13 @@ export const getRuleSetFileFromFolderByFilename = async (filePath: string) => {
     throw new InsoError(`Failed to read "${filePath}"`, error);
   }
 };
-export async function lintSpecification({ specContent, rulesetFileName }: { specContent: string; rulesetFileName?: string },) {
+export async function lintSpecification({
+  specContent,
+  rulesetFileName,
+}: {
+  specContent: string;
+  rulesetFileName?: string;
+}) {
   const spectral = new Spectral();
   // Use custom ruleset if present
   let ruleset = oas;
@@ -49,7 +55,11 @@ export async function lintSpecification({ specContent, rulesetFileName }: { spec
     logger.warn(`${results.filter(r => r.severity === DiagnosticSeverity.Warning).length} lint warnings found. \n`);
   }
   results.forEach(r =>
-    logger.log(`${r.range.start.line + 1}:${r.range.start.character + 1} - ${DiagnosticSeverity[r.severity]} - ${r.code} - ${r.message} - ${r.path.join('.')}`),
+    logger.log(
+      `${r.range.start.line + 1}:${r.range.start.character + 1} - ${DiagnosticSeverity[r.severity]} - ${r.code} - ${
+        r.message
+      } - ${r.path.join('.')}`,
+    ),
   );
 
   // Fail if errors present
diff --git a/packages/insomnia-inso/src/db/adapters/git-adapter.ts b/packages/insomnia-inso/src/db/adapters/git-adapter.ts
index ed6114dec3..20c7d30413 100644
--- a/packages/insomnia-inso/src/db/adapters/git-adapter.ts
+++ b/packages/insomnia-inso/src/db/adapters/git-adapter.ts
@@ -24,10 +24,7 @@ const gitAdapter: DbAdapter = async (dir, filterTypes) => {
 
   const db = emptyDb();
 
-  const readAndInsertDoc = async (
-    type: keyof Database,
-    fileName: string,
-  ): Promise<void> => {
+  const readAndInsertDoc = async (type: keyof Database, fileName: string): Promise<void> => {
     // Get contents of each file in type dir and insert into data
     let contents = '';
     try {
@@ -40,7 +37,7 @@ const gitAdapter: DbAdapter = async (dir, filterTypes) => {
     (db[type] as {}[]).push(obj);
   };
 
-  const types = filterTypes?.length ? filterTypes : Object.keys(db) as (keyof Database)[];
+  const types = filterTypes?.length ? filterTypes : (Object.keys(db) as (keyof Database)[]);
   await Promise.all(
     types.map(async t => {
       // Get all files in type dir
@@ -54,9 +51,7 @@ const gitAdapter: DbAdapter = async (dir, filterTypes) => {
       }
       return Promise.all(
         // Insert each file from each type
-        files.map(file =>
-          readAndInsertDoc(t, path.join(dir, '.insomnia', t, file)),
-        ),
+        files.map(file => readAndInsertDoc(t, path.join(dir, '.insomnia', t, file))),
       );
     }),
   );
diff --git a/packages/insomnia-inso/src/db/adapters/insomnia-adapter.test.ts b/packages/insomnia-inso/src/db/adapters/insomnia-adapter.test.ts
index 1b10bc1582..3d0f613918 100644
--- a/packages/insomnia-inso/src/db/adapters/insomnia-adapter.test.ts
+++ b/packages/insomnia-inso/src/db/adapters/insomnia-adapter.test.ts
@@ -58,15 +58,13 @@ describe('insomniaAdapter()', () => {
     expect(db?.UnitTest.length).toBe(0);
   });
 
-  it.each([
-    'malformed.yaml',
-    'no-export-format.yaml',
-    'v3-export-format.yaml',
-    'empty.yaml',
-  ])('should throw InsoError if malformed yaml content: %s', async (fileName: string) => {
-    const pathname = path.join(fixturesPath, 'insomnia-v4', fileName);
-    await expect(insomniaAdapter(pathname)).rejects.toThrowErrorMatchingSnapshot();
-  });
+  it.each(['malformed.yaml', 'no-export-format.yaml', 'v3-export-format.yaml', 'empty.yaml'])(
+    'should throw InsoError if malformed yaml content: %s',
+    async (fileName: string) => {
+      const pathname = path.join(fixturesPath, 'insomnia-v4', fileName);
+      await expect(insomniaAdapter(pathname)).rejects.toThrowErrorMatchingSnapshot();
+    },
+  );
 
   it('should return null if pathname is invalid', async () => {
     const pathname = path.join(fixturesPath, 'insomnia-v4', 'insomnia');
diff --git a/packages/insomnia-inso/src/db/adapters/insomnia-adapter.ts b/packages/insomnia-inso/src/db/adapters/insomnia-adapter.ts
index 09d2861e8f..37e341f53f 100644
--- a/packages/insomnia-inso/src/db/adapters/insomnia-adapter.ts
+++ b/packages/insomnia-inso/src/db/adapters/insomnia-adapter.ts
@@ -29,7 +29,8 @@ import type { BaseModel } from '../models/types';
  * @see packages/insomnia/src/common/import.js
  */
 
-type RawTypeKey = 'api_spec'
+type RawTypeKey =
+  | 'api_spec'
   | 'environment'
   | 'request'
   | 'request_group'
@@ -37,7 +38,6 @@ type RawTypeKey = 'api_spec'
   | 'unit_test_suite'
   | 'unit_test';
 
- 
 const rawTypeToParsedTypeMap: Record<RawTypeKey, BaseModel['type']> = {
   api_spec: 'ApiSpec',
   environment: 'Environment',
@@ -47,7 +47,6 @@ const rawTypeToParsedTypeMap: Record<RawTypeKey, BaseModel['type']> = {
   unit_test_suite: 'UnitTestSuite',
   unit_test: 'UnitTest',
 };
- 
 
 type ExtraProperties = Record<string, unknown>;
 
@@ -79,10 +78,12 @@ const insomniaAdapter: DbAdapter = async (filePath, filterTypes) => {
 
   // Now, reading and parsing
   const content = await fs.promises.readFile(filePath, { encoding: 'utf-8' });
-  let parsed: {
-    __export_format: number;
-    resources: RawTypeModel[];
-  } | undefined;
+  let parsed:
+    | {
+        __export_format: number;
+        resources: RawTypeModel[];
+      }
+    | undefined;
 
   try {
     parsed = YAML.parse(content);
@@ -108,7 +109,9 @@ const insomniaAdapter: DbAdapter = async (filePath, filterTypes) => {
   } else if (!parsed.__export_format) {
     throw new InsoError(`Expected an Insomnia v4 export file; unexpected data found in ${fileName}.`);
   } else if (parsed.__export_format !== 4 && parsed.__export_format !== 5) {
-    throw new InsoError(`Expected an Insomnia v4 export file; found an Insomnia v${parsed.__export_format} export file in ${fileName}.`);
+    throw new InsoError(
+      `Expected an Insomnia v4 export file; found an Insomnia v${parsed.__export_format} export file in ${fileName}.`,
+    );
   }
 
   // Transform filter to a set for faster search
diff --git a/packages/insomnia-inso/src/db/adapters/ne-db-adapter.ts b/packages/insomnia-inso/src/db/adapters/ne-db-adapter.ts
index 653e481c2d..97f4a164e5 100644
--- a/packages/insomnia-inso/src/db/adapters/ne-db-adapter.ts
+++ b/packages/insomnia-inso/src/db/adapters/ne-db-adapter.ts
@@ -3,7 +3,7 @@ import { stat } from 'node:fs/promises';
 import NeDB from '@seald-io/nedb';
 import path from 'path';
 
-import type { Database, DbAdapter} from '../index';
+import type { Database, DbAdapter } from '../index';
 import { emptyDb } from '../index';
 import type { BaseModel } from '../models/types';
 
@@ -16,24 +16,25 @@ const neDbAdapter: DbAdapter = async (dir, filterTypes) => {
   }
 
   const db = emptyDb();
-  const types = filterTypes?.length ? filterTypes : Object.keys(db) as (keyof Database)[];
-  const promises = types.map(t =>
-    new Promise((resolve, reject) => {
-      const filePath = path.join(dir, `insomnia.${t}.db`);
-      const collection = new NeDB({
-        autoload: true,
-        filename: filePath,
-        corruptAlertThreshold: 0.9,
-      });
-      collection.find({}, (err: Error, docs: BaseModel[]) => {
-        if (err) {
-          return reject(err);
-        }
+  const types = filterTypes?.length ? filterTypes : (Object.keys(db) as (keyof Database)[]);
+  const promises = types.map(
+    t =>
+      new Promise((resolve, reject) => {
+        const filePath = path.join(dir, `insomnia.${t}.db`);
+        const collection = new NeDB({
+          autoload: true,
+          filename: filePath,
+          corruptAlertThreshold: 0.9,
+        });
+        collection.find({}, (err: Error, docs: BaseModel[]) => {
+          if (err) {
+            return reject(err);
+          }
 
-        (db[t] as {}[]).push(...docs);
-        resolve(null);
-      });
-    }),
+          (db[t] as {}[]).push(...docs);
+          resolve(null);
+        });
+      }),
   );
   await Promise.all(promises);
   return db;
diff --git a/packages/insomnia-inso/src/db/index.ts b/packages/insomnia-inso/src/db/index.ts
index 0eaf6e5281..8218066d49 100644
--- a/packages/insomnia-inso/src/db/index.ts
+++ b/packages/insomnia-inso/src/db/index.ts
@@ -48,10 +48,7 @@ export const emptyDb = (): Database => ({
   Settings: [],
 });
 
-export type DbAdapter = (
-  dir: string,
-  filterTypes?: (keyof Database)[],
-) => Promise<Database | null>;
+export type DbAdapter = (dir: string, filterTypes?: (keyof Database)[]) => Promise<Database | null>;
 
 interface Options {
   pathToSearch: string;
@@ -65,10 +62,7 @@ export const isFile = async (path: string) => {
     return false;
   }
 };
-export const loadDb = async ({
-  pathToSearch,
-  filterTypes,
-}: Options) => {
+export const loadDb = async ({ pathToSearch, filterTypes }: Options) => {
   // if path to file is provided try to it is an insomnia export file
   const isFilePath = await isFile(pathToSearch);
   if (isFilePath) {
diff --git a/packages/insomnia-inso/src/db/models/api-spec.ts b/packages/insomnia-inso/src/db/models/api-spec.ts
index 96de106c74..00d274bd2c 100644
--- a/packages/insomnia-inso/src/db/models/api-spec.ts
+++ b/packages/insomnia-inso/src/db/models/api-spec.ts
@@ -4,34 +4,17 @@ import { AutoComplete } from 'enquirer';
 import { logger } from '../../cli';
 import type { Database } from '../index';
 import type { ApiSpec } from './types';
-import {
-  ensureSingleOrNone,
-  generateIdIsh,
-  getDbChoice,
-  matchIdIsh,
-} from './util';
+import { ensureSingleOrNone, generateIdIsh, getDbChoice, matchIdIsh } from './util';
 const entity = 'api specification';
 
-export const loadApiSpec = (
-  db: Database,
-  identifier: string,
-): ApiSpec | null | undefined => {
-  logger.trace(
-    'Load %s with identifier `%s` from data store',
-    entity,
-    identifier,
-  );
-  const items = db.ApiSpec.filter(
-    spec => matchIdIsh(spec, identifier) || spec.fileName === identifier,
-  );
+export const loadApiSpec = (db: Database, identifier: string): ApiSpec | null | undefined => {
+  logger.trace('Load %s with identifier `%s` from data store', entity, identifier);
+  const items = db.ApiSpec.filter(spec => matchIdIsh(spec, identifier) || spec.fileName === identifier);
   logger.trace('Found %d.', items.length);
   return ensureSingleOrNone(items, entity);
 };
 
-export const promptApiSpec = async (
-  db: Database,
-  ci: boolean,
-): Promise<ApiSpec | null | undefined> => {
+export const promptApiSpec = async (db: Database, ci: boolean): Promise<ApiSpec | null | undefined> => {
   if (ci || !db.ApiSpec.length) {
     return null;
   }
diff --git a/packages/insomnia-inso/src/db/models/environment.ts b/packages/insomnia-inso/src/db/models/environment.ts
index 142108a55c..472ea41d21 100644
--- a/packages/insomnia-inso/src/db/models/environment.ts
+++ b/packages/insomnia-inso/src/db/models/environment.ts
@@ -7,10 +7,7 @@ import type { Environment } from './types';
 import { ensureSingle, generateIdIsh, getDbChoice, matchIdIsh } from './util';
 
 const loadBaseEnvironmentForWorkspace = (db: Database, workspaceId: string): Environment => {
-  logger.trace(
-    'Load base environment for the workspace `%s` from data store',
-    workspaceId,
-  );
+  logger.trace('Load base environment for the workspace `%s` from data store', workspaceId);
   const items = db.Environment.filter(environment => environment.parentId === workspaceId);
   logger.trace('Found %d.', items.length);
   return ensureSingle(items, 'base environment');
@@ -31,10 +28,7 @@ export const loadEnvironment = (
     return loadBaseEnvironmentForWorkspace(db, workspaceId);
   }
 
-  logger.trace(
-    'Load sub environment with identifier `%s` from data store',
-    identifier,
-  );
+  logger.trace('Load sub environment with identifier `%s` from data store', identifier);
   return db.Environment.find(env => matchIdIsh(env, identifier) || env.name === identifier);
 };
 
@@ -49,9 +43,7 @@ export const promptEnvironment = async (
 
   // Get the sub environments
   const baseWorkspaceEnv = loadBaseEnvironmentForWorkspace(db, workspaceId);
-  const subEnvironments = db.Environment.filter(
-    subEnv => subEnv.parentId === baseWorkspaceEnv._id,
-  );
+  const subEnvironments = db.Environment.filter(subEnv => subEnv.parentId === baseWorkspaceEnv._id);
 
   if (!subEnvironments.length) {
     logger.trace('No sub environments found, using base environment');
diff --git a/packages/insomnia-inso/src/db/models/types.ts b/packages/insomnia-inso/src/db/models/types.ts
index 77d52631d5..300a5f3b35 100644
--- a/packages/insomnia-inso/src/db/models/types.ts
+++ b/packages/insomnia-inso/src/db/models/types.ts
@@ -2,46 +2,46 @@
 import type { Database } from '../index';
 
 export interface BaseModel {
-    _id: string;
-    name: string;
-    type: keyof Database;
-    parentId: string;
+  _id: string;
+  name: string;
+  type: keyof Database;
+  parentId: string;
 }
 
 export interface BaseApiSpec {
-    fileName: string;
-    contentType: 'json' | 'yaml';
-    contents: string;
+  fileName: string;
+  contentType: 'json' | 'yaml';
+  contents: string;
 }
 
 export type ApiSpec = BaseModel & BaseApiSpec;
 
 interface BaseUnitTestSuite {
-    name: string;
-    metaSortKey: number;
+  name: string;
+  metaSortKey: number;
 }
 
 export type UnitTestSuite = BaseModel & BaseUnitTestSuite;
 
 interface BaseUnitTest {
-    name: string;
-    code: string;
-    requestId: string | null;
-    metaSortKey: number;
+  name: string;
+  code: string;
+  requestId: string | null;
+  metaSortKey: number;
 }
 
 export type UnitTest = BaseModel & BaseUnitTest;
 
 interface BaseEnvironment {
-    name: string;
-    metaSortKey: number;
+  name: string;
+  metaSortKey: number;
 }
 
 export type Environment = BaseModel & BaseEnvironment;
 
 interface BaseWorkspace {
-    name: string;
-    description: string;
+  name: string;
+  description: string;
 }
 
 export type WorkspaceMeta = BaseModel & { activeGlobalEnvironmentId: string };
@@ -49,11 +49,11 @@ export type WorkspaceMeta = BaseModel & { activeGlobalEnvironmentId: string };
 export type Workspace = BaseModel & BaseWorkspace;
 
 export type InsomniaRequest = BaseModel & {
-    name: string;
-    description: string;
-    method: string;
-    url: string;
-    headers: Record<string, string>;
-    body: string;
-    metaSortKey: number;
+  name: string;
+  description: string;
+  method: string;
+  url: string;
+  headers: Record<string, string>;
+  body: string;
+  metaSortKey: number;
 };
diff --git a/packages/insomnia-inso/src/db/models/unit-test-suite.ts b/packages/insomnia-inso/src/db/models/unit-test-suite.ts
index b75dbc4988..329f3f26f2 100644
--- a/packages/insomnia-inso/src/db/models/unit-test-suite.ts
+++ b/packages/insomnia-inso/src/db/models/unit-test-suite.ts
@@ -5,33 +5,17 @@ import { logger } from '../../cli';
 import type { Database } from '../index';
 import { loadApiSpec } from './api-spec';
 import type { UnitTestSuite } from './types';
-import {
-  ensureSingleOrNone,
-  generateIdIsh,
-  getDbChoice,
-  matchIdIsh,
-} from './util';
+import { ensureSingleOrNone, generateIdIsh, getDbChoice, matchIdIsh } from './util';
 import { loadWorkspace } from './workspace';
 
-export const loadUnitTestSuite = (
-  db: Database,
-  identifier: string,
-): UnitTestSuite | null | undefined => {
+export const loadUnitTestSuite = (db: Database, identifier: string): UnitTestSuite | null | undefined => {
   // Identifier is for one specific suite; find it
-  logger.trace(
-    'Load unit test suite with identifier `%s` from data store',
-    identifier,
-  );
-  const items = db.UnitTestSuite.filter(
-    suite => matchIdIsh(suite, identifier) || suite.name === identifier,
-  );
+  logger.trace('Load unit test suite with identifier `%s` from data store', identifier);
+  const items = db.UnitTestSuite.filter(suite => matchIdIsh(suite, identifier) || suite.name === identifier);
   logger.trace('Found %d.', items.length);
   return ensureSingleOrNone(items, 'unit test suite');
 };
-export const loadTestSuites = (
-  db: Database,
-  identifier: string,
-): UnitTestSuite[] => {
+export const loadTestSuites = (db: Database, identifier: string): UnitTestSuite[] => {
   const apiSpec = loadApiSpec(db, identifier);
   const workspace = loadWorkspace(db, apiSpec?.parentId || identifier); // if identifier is for an apiSpec or a workspace, return all suites for that workspace
 
@@ -42,19 +26,14 @@ export const loadTestSuites = (
   const result = loadUnitTestSuite(db, identifier);
   return result ? [result] : [];
 };
-export const promptTestSuites = async (
-  db: Database,
-  ci: boolean,
-): Promise<UnitTestSuite[]> => {
+export const promptTestSuites = async (db: Database, ci: boolean): Promise<UnitTestSuite[]> => {
   if (ci) {
     return [];
   }
 
   const choices = db.ApiSpec.map(spec => [
     getDbChoice(generateIdIsh(spec), spec.fileName),
-    ...db.UnitTestSuite.filter(
-      suite => suite.parentId === spec.parentId,
-    ).map(suite =>
+    ...db.UnitTestSuite.filter(suite => suite.parentId === spec.parentId).map(suite =>
       getDbChoice(generateIdIsh(suite), suite.name, {
         indent: 1,
       }),
diff --git a/packages/insomnia-inso/src/db/models/util.ts b/packages/insomnia-inso/src/db/models/util.ts
index 981454c906..12e46463f5 100644
--- a/packages/insomnia-inso/src/db/models/util.ts
+++ b/packages/insomnia-inso/src/db/models/util.ts
@@ -1,11 +1,9 @@
 import { InsoError } from '../../cli';
 import type { BaseModel } from './types';
 
-export const matchIdIsh = ({ _id }: BaseModel, identifier: string) =>
-  _id.startsWith(identifier);
+export const matchIdIsh = ({ _id }: BaseModel, identifier: string) => _id.startsWith(identifier);
 
-export const generateIdIsh = ({ _id }: BaseModel, length = 10) =>
-  _id.slice(0, length);
+export const generateIdIsh = ({ _id }: BaseModel, length = 10) => _id.slice(0, length);
 
 function indent(level: number, code: string, tab = '  |'): string {
   if (!level || level < 0) {
@@ -20,9 +18,9 @@ export const getDbChoice = (
   idIsh: string,
   message: string,
   config: {
-        indent?: number;
-        hint?: string;
-    } = {},
+    indent?: number;
+    hint?: string;
+  } = {},
 ) => ({
   name: idIsh,
   message: indent(config.indent || 0, message),
@@ -30,10 +28,7 @@ export const getDbChoice = (
   hint: config.hint || `${idIsh}`,
 });
 
-export const ensureSingleOrNone = <T>(
-  items: T[],
-  entity: string,
-): T | null | undefined => {
+export const ensureSingleOrNone = <T>(items: T[], entity: string): T | null | undefined => {
   if (items.length === 1) {
     return items[0];
   }
@@ -42,9 +37,7 @@ export const ensureSingleOrNone = <T>(
     return null;
   }
 
-  throw new InsoError(
-    `Expected single or no ${entity} in the data store, but found multiple (${items.length}).`,
-  );
+  throw new InsoError(`Expected single or no ${entity} in the data store, but found multiple (${items.length}).`);
 };
 export const ensureSingle = <T>(items: T[], entity: string): T => {
   if (items.length === 1) {
@@ -52,12 +45,8 @@ export const ensureSingle = <T>(items: T[], entity: string): T => {
   }
 
   if (items.length === 0) {
-    throw new InsoError(
-      `Expected single ${entity} in the data store, but found none.`,
-    );
+    throw new InsoError(`Expected single ${entity} in the data store, but found none.`);
   }
 
-  throw new InsoError(
-    `Expected single ${entity} in the data store, but found multiple (${items.length}).`,
-  );
+  throw new InsoError(`Expected single ${entity} in the data store, but found multiple (${items.length}).`);
 };
diff --git a/packages/insomnia-inso/src/db/models/workspace.ts b/packages/insomnia-inso/src/db/models/workspace.ts
index 6187827383..936dc70f90 100644
--- a/packages/insomnia-inso/src/db/models/workspace.ts
+++ b/packages/insomnia-inso/src/db/models/workspace.ts
@@ -7,20 +7,12 @@ import type { Workspace } from './types';
 import { ensureSingleOrNone, generateIdIsh, getDbChoice, matchIdIsh } from './util';
 const entity = 'workspace';
 export const loadWorkspace = (db: Database, identifier: string) => {
-  logger.trace(
-    'Load workspace with identifier `%s` from data store',
-    identifier,
-  );
-  const items = db.Workspace.filter(workspace => (
-    matchIdIsh(workspace, identifier) || workspace.name === identifier
-  ));
+  logger.trace('Load workspace with identifier `%s` from data store', identifier);
+  const items = db.Workspace.filter(workspace => matchIdIsh(workspace, identifier) || workspace.name === identifier);
   logger.trace('Found %d.', items.length);
   return ensureSingleOrNone(items, 'workspace');
 };
-export const promptWorkspace = async (
-  db: Database,
-  ci: boolean,
-): Promise<Workspace | null | undefined> => {
+export const promptWorkspace = async (db: Database, ci: boolean): Promise<Workspace | null | undefined> => {
   if (ci || !db.Workspace.length) {
     return null;
   }
diff --git a/packages/insomnia-inso/src/examples/after-response-failed-test.yml b/packages/insomnia-inso/src/examples/after-response-failed-test.yml
index 5cb76498be..de3fe825f0 100644
--- a/packages/insomnia-inso/src/examples/after-response-failed-test.yml
+++ b/packages/insomnia-inso/src/examples/after-response-failed-test.yml
@@ -9,7 +9,7 @@ resources:
     created: 1725888487017
     url: localhost:4010/echo
     name: New Request
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -45,7 +45,7 @@ resources:
     modified: 1725888480476
     created: 1725888480476
     name: after response test
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_af8d61e3630269b8a124b18968608f85797d57fc
diff --git a/packages/insomnia-inso/src/examples/after-response.yml b/packages/insomnia-inso/src/examples/after-response.yml
index 653226d033..255334189b 100644
--- a/packages/insomnia-inso/src/examples/after-response.yml
+++ b/packages/insomnia-inso/src/examples/after-response.yml
@@ -9,7 +9,7 @@ resources:
     created: 1725888487017
     url: localhost:4010/echo
     name: New Request
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -39,7 +39,7 @@ resources:
     modified: 1725888480476
     created: 1725888480476
     name: after response test
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_af8d61e3630269b8a124b18968608f85797d57fc
diff --git a/packages/insomnia-inso/src/examples/folder-inheritance-document.yml b/packages/insomnia-inso/src/examples/folder-inheritance-document.yml
index 7b3381d5d8..2a788fd24a 100644
--- a/packages/insomnia-inso/src/examples/folder-inheritance-document.yml
+++ b/packages/insomnia-inso/src/examples/folder-inheritance-document.yml
@@ -9,11 +9,11 @@ resources:
     created: 1720531712225
     url: https://localhost:4011/echo
     name: New Request
-    description: ""
+    description: ''
     method: GET
     body:
       mimeType: text/plain
-      text: "{{foo}}"
+      text: '{{foo}}'
     parameters: []
     headers:
       - name: Content-Type
@@ -21,7 +21,7 @@ resources:
       - name: User-Agent
         value: insomnia/9.3.3-beta.0
     authentication: {}
-    preRequestScript: ""
+    preRequestScript: ''
     metaSortKey: -1720531712226
     isPrivate: false
     pathParameters: []
@@ -37,11 +37,11 @@ resources:
     modified: 1720533498913
     created: 1720531708748
     name: My Folder
-    description: ""
+    description: ''
     environment:
       foo: bar
     environmentPropertyOrder:
-      "&":
+      '&':
         - foo
     metaSortKey: -1720531708748
     authentication:
@@ -54,7 +54,7 @@ resources:
       - id: pair_74f3158279464c9c9827dd2be66762ca
         name: customheader
         value: jack
-        description: ""
+        description: ''
         disabled: false
     _type: request_group
   - _id: wrk_b216792ae69e468aa46ddbf7783c7c76
@@ -62,7 +62,7 @@ resources:
     modified: 1720533288412
     created: 1720533288412
     name: folder-inheritance-doc.yaml
-    description: ""
+    description: ''
     scope: design
     _type: workspace
   - _id: env_9e44ac71d3a51fc6a8951b8968e45c44c5236355
@@ -88,7 +88,7 @@ resources:
     modified: 1720533288413
     created: 1720533288413
     fileName: New Document
-    contents: ""
+    contents: ''
     contentType: yaml
     _type: api_spec
   - _id: uts_412db4d4943a4baeb1319b3bd37fa4bc
diff --git a/packages/insomnia-inso/src/examples/global-environment.yml b/packages/insomnia-inso/src/examples/global-environment.yml
index 8cb735ef19..e72731dd49 100644
--- a/packages/insomnia-inso/src/examples/global-environment.yml
+++ b/packages/insomnia-inso/src/examples/global-environment.yml
@@ -9,7 +9,7 @@ resources:
     modified: 1728298565335
     created: 1728298565335
     name: GlobalEnv
-    description: ""
+    description: ''
     scope: environment
     _type: workspace
   - _id: env_dcf0363e684fae59a4ac57c09c208674caa8a64a
@@ -25,7 +25,7 @@ resources:
       firstkey: first
       secondkey: second
     dataPropertyOrder:
-      "&":
+      '&':
         - apiKey
         - newkey
         - base_path
diff --git a/packages/insomnia-inso/src/examples/minimal.yml b/packages/insomnia-inso/src/examples/minimal.yml
index 6cc6bf5fc8..e4bb33b184 100644
--- a/packages/insomnia-inso/src/examples/minimal.yml
+++ b/packages/insomnia-inso/src/examples/minimal.yml
@@ -9,7 +9,7 @@ resources:
     created: 1636141100570
     url: http://127.0.0.1:4010/
     name: with pre request script
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -28,7 +28,7 @@ resources:
     modified: 1636140994423
     created: 1636140994423
     name: Minimal Collection
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_9e44ac71d3a51fc6a8951b8968e45c44c5236355
diff --git a/packages/insomnia-inso/src/examples/script-add-header.yml b/packages/insomnia-inso/src/examples/script-add-header.yml
index 828cc3e162..07f67adbc7 100644
--- a/packages/insomnia-inso/src/examples/script-add-header.yml
+++ b/packages/insomnia-inso/src/examples/script-add-header.yml
@@ -9,7 +9,7 @@ resources:
     created: 1636141100570
     url: http://127.0.0.1:4010
     name: custom header by pre request script
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -28,7 +28,7 @@ resources:
     modified: 1636140994423
     created: 1636140994423
     name: Minimal Collection 2
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_9e44ac71d3a51fc6a8951b8968e45c44c5236355
diff --git a/packages/insomnia-inso/src/examples/script-require.yml b/packages/insomnia-inso/src/examples/script-require.yml
index eb026f7e8a..231c1480c1 100644
--- a/packages/insomnia-inso/src/examples/script-require.yml
+++ b/packages/insomnia-inso/src/examples/script-require.yml
@@ -9,7 +9,7 @@ resources:
     created: 1636141014552
     url: http://127.0.0.1:4010/echo
     name: insomnia.request manipulation
-    description: ""
+    description: ''
     method: POST
     parameters: []
     headers:
@@ -41,7 +41,7 @@ resources:
           raw: 'rawContent',
       });
     body:
-      mimeType: "application/json"
+      mimeType: 'application/json'
       text: |-
         {}
     _type: request
@@ -50,7 +50,7 @@ resources:
     modified: 1636140994423
     created: 1636140994423
     name: Minimal Collection 3
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_9e44ac71d3a51fc6a8951b8968e45c44c5236355
diff --git a/packages/insomnia-inso/src/examples/script-send-request.yml b/packages/insomnia-inso/src/examples/script-send-request.yml
index f395c6f54b..8b9b9b93bf 100644
--- a/packages/insomnia-inso/src/examples/script-send-request.yml
+++ b/packages/insomnia-inso/src/examples/script-send-request.yml
@@ -9,7 +9,7 @@ resources:
     created: 1722852503814
     url: localhost:4010/echo
     name: sendRequest
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -18,7 +18,7 @@ resources:
         value: insomnia/9.3.3
     authentication: {}
     preRequestScript: |-
-      
+
       const resp = await new Promise((resolve, reject) => {
         insomnia.sendRequest(
           'http://localhost:4010/echo',
@@ -44,7 +44,7 @@ resources:
     modified: 1722852498102
     created: 1722852498102
     name: send request script
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_fa53fdd70393dd67a77da3c45c26f2b75ecbc1f2
diff --git a/packages/insomnia-inso/src/examples/set-next-request.yml b/packages/insomnia-inso/src/examples/set-next-request.yml
index 06d8275770..aee70ea5a3 100644
--- a/packages/insomnia-inso/src/examples/set-next-request.yml
+++ b/packages/insomnia-inso/src/examples/set-next-request.yml
@@ -9,7 +9,7 @@ resources:
     created: 1729981763331
     url: localhost:4010/echo
     name: setNextRequest
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -34,7 +34,7 @@ resources:
     modified: 1729981758905
     created: 1729981758905
     name: test next request
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: req_6a0343d51ca74de7a2c73e34211354ab
@@ -43,7 +43,7 @@ resources:
     created: 1729981846012
     url: localhost:4010/echo
     name: Failing Request
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -71,7 +71,7 @@ resources:
     created: 1729981822432
     url: localhost:4010/echo
     name: Passing Request
-    description: ""
+    description: ''
     method: GET
     body: {}
     parameters: []
diff --git a/packages/insomnia-inso/src/examples/three-requests.yml b/packages/insomnia-inso/src/examples/three-requests.yml
index 2a14ed8933..71e80be932 100644
--- a/packages/insomnia-inso/src/examples/three-requests.yml
+++ b/packages/insomnia-inso/src/examples/three-requests.yml
@@ -8,8 +8,8 @@ resources:
     modified: 1726666263873
     created: 1726658232232
     url: localhost:4010/echo
-    name: "1"
-    description: ""
+    name: '1'
+    description: ''
     method: GET
     body:
       mimeType: text/plain
@@ -45,7 +45,7 @@ resources:
     modified: 1726658198059
     created: 1726658198059
     name: Collection with 3 requests
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: req_6063adcdab5b409e9b4f00f47322df4a
@@ -53,8 +53,8 @@ resources:
     modified: 1726658253319
     created: 1726658253319
     url: localhost:4010/echo
-    name: "2"
-    description: ""
+    name: '2'
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -77,8 +77,8 @@ resources:
     modified: 1726658259060
     created: 1726658259060
     url: localhost:4010/echo
-    name: "3"
-    description: ""
+    name: '3'
+    description: ''
     method: GET
     body: {}
     parameters: []
@@ -104,7 +104,7 @@ resources:
     data:
       value: 123
     dataPropertyOrder:
-      "&":
+      '&':
         - value
     color: null
     isPrivate: false
diff --git a/packages/insomnia-inso/src/examples/with-missing-env-vars.yml b/packages/insomnia-inso/src/examples/with-missing-env-vars.yml
index 8813f86d03..d0f287e36b 100644
--- a/packages/insomnia-inso/src/examples/with-missing-env-vars.yml
+++ b/packages/insomnia-inso/src/examples/with-missing-env-vars.yml
@@ -8,8 +8,8 @@ resources:
     modified: 1726666263873
     created: 1726658232232
     url: localhost:4010/echo
-    name: "1"
-    description: ""
+    name: '1'
+    description: ''
     method: GET
     body:
       mimeType: text/plain
@@ -45,7 +45,7 @@ resources:
     modified: 1726658198059
     created: 1726658198059
     name: Collection with 3 requests
-    description: ""
+    description: ''
     scope: collection
     _type: workspace
   - _id: env_86e1354fb9909cdb109ccadf83c3353f3bb9bd09
@@ -55,7 +55,7 @@ resources:
     name: Base Environment
     data: {}
     dataPropertyOrder:
-      "&":
+      '&':
         - value
     color: null
     isPrivate: false
diff --git a/packages/insomnia-inso/src/get-options.test.ts b/packages/insomnia-inso/src/get-options.test.ts
index 9bb9378cf5..be47264f0c 100644
--- a/packages/insomnia-inso/src/get-options.test.ts
+++ b/packages/insomnia-inso/src/get-options.test.ts
@@ -11,8 +11,7 @@ describe('tryToReadInsoConfigFile()', () => {
   it('should load .insorc-test.yaml config file in fixtures dir', async () => {
     const result = await tryToReadInsoConfigFile(path.join(fixturesDir, '.insorc-test.yaml'));
     expect(result).toEqual({
-      options: {
-      },
+      options: {},
       scripts: {
         exportSpec: 'inso export spec',
         lintSpec: 'inso lint spec',
@@ -23,8 +22,8 @@ describe('tryToReadInsoConfigFile()', () => {
   });
 
   it('should return empty object and report error if specified config file not found', async () => {
-    const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => { });
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+    const consoleLogSpy = vi.spyOn(console, 'log').mockImplementation(() => {});
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     const result = await tryToReadInsoConfigFile('not-found.yaml');
     expect(result).toEqual({});
     expect(consoleLogSpy).toHaveBeenCalledWith('Could not find config file at not-found.yaml.');
diff --git a/packages/insomnia-inso/src/scripts/artifacts.ts b/packages/insomnia-inso/src/scripts/artifacts.ts
index 84bb4e6c9f..40b665895f 100644
--- a/packages/insomnia-inso/src/scripts/artifacts.ts
+++ b/packages/insomnia-inso/src/scripts/artifacts.ts
@@ -2,7 +2,7 @@
 import fs from 'node:fs/promises';
 import process from 'node:process';
 
-import type { ProcessEnvOptions} from 'child_process';
+import type { ProcessEnvOptions } from 'child_process';
 import { spawn } from 'child_process';
 import path from 'path';
 
@@ -14,24 +14,21 @@ const spawnCompressProcess = (cwd: ProcessEnvOptions['cwd']) => {
   const version = process.env.VERSION || packageJson.version;
 
   if (platform === 'darwin') {
-    return spawn('ditto', [
-      '-c',
-      '-k',
-      '../binaries/inso',
-      `inso-macos-${version}.zip`,
-    ], { cwd });
+    return spawn('ditto', ['-c', '-k', '../binaries/inso', `inso-macos-${version}.zip`], { cwd });
   }
 
   if (platform === 'win32' || platform === 'linux') {
-    return spawn('tar', [
-      '-C',
-      '../binaries',
-      platform === 'win32' ? '-a -cf' : '-cJf',
-      platform === 'win32'
-        ? `inso-windows-${version}.zip`
-        : `inso-linux-${process.arch}-${version}.tar.xz`,
-      platform === 'win32' ? 'inso.exe' : 'inso',
-    ], { cwd, shell: platform === 'win32' });
+    return spawn(
+      'tar',
+      [
+        '-C',
+        '../binaries',
+        platform === 'win32' ? '-a -cf' : '-cJf',
+        platform === 'win32' ? `inso-windows-${version}.zip` : `inso-linux-${process.arch}-${version}.tar.xz`,
+        platform === 'win32' ? 'inso.exe' : 'inso',
+      ],
+      { cwd, shell: platform === 'win32' },
+    );
   }
 
   throw new Error(`[pkg-inso-artifacts] Unsupported OS: ${platform}`);
diff --git a/packages/insomnia-inso/tsconfig.json b/packages/insomnia-inso/tsconfig.json
index 7d9cf547c1..fecf77eac2 100644
--- a/packages/insomnia-inso/tsconfig.json
+++ b/packages/insomnia-inso/tsconfig.json
@@ -10,9 +10,7 @@
     "moduleResolution": "node",
     "isolatedModules": true,
     "paths": {
-      "electron": [
-        "../insomnia/send-request/electron",
-      ],
+      "electron": ["../insomnia/send-request/electron"]
     },
     /* remove this  once react AlertModal is out of the plugins code path */
     "jsx": "react",
@@ -20,27 +18,16 @@
     "module": "CommonJS",
     "sourceMap": true,
     /* Runs in the DOM NOTE: this is inconsistent with reality */
-    "lib": [
-      "ES2023",
-      "DOM",
-      "DOM.Iterable"
-    ],
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
     /* Strictness */
     "strict": true,
     "noImplicitReturns": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
-    "useUnknownInCatchVariables": false,
+    "useUnknownInCatchVariables": false
   },
-  "include": [
-    ".eslintrc.js",
-    "esbuild.ts",
-    "jest.config.js",
-    "package.json",
-    "src",
-    "../insomnia/types",
-  ],
+  "include": [".eslintrc.js", "esbuild.ts", "jest.config.js", "package.json", "src", "../insomnia/types"],
   "exclude": [
     "**/*.test.ts",
     "**/__mocks__/*",
@@ -51,6 +38,6 @@
     "jest.config.js",
     "node_modules",
     "scripts",
-    "src/vitest",
-  ],
+    "src/vitest"
+  ]
 }
diff --git a/packages/insomnia-inso/vitest.config.ts b/packages/insomnia-inso/vitest.config.ts
index ebbb8cad3b..fcd4fe5f40 100644
--- a/packages/insomnia-inso/vitest.config.ts
+++ b/packages/insomnia-inso/vitest.config.ts
@@ -8,9 +8,7 @@ export default defineConfig({
     },
     server: {
       deps: {
-        inline: [
-          'tinykeys',
-        ],
+        inline: ['tinykeys'],
       },
     },
   },
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/auth.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/auth.test.ts
index b13faaa959..29b94232da 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/auth.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/auth.test.ts
@@ -4,191 +4,185 @@ import { type AuthOptions, fromPreRequestAuth, RequestAuth, toPreRequestAuth } f
 import type { Variable, VariableList } from '../variables';
 
 const varListToObject = (obj: VariableList<Variable> | undefined) => {
-    if (!obj) {
-        return undefined;
-    }
+  if (!obj) {
+    return undefined;
+  }
 
-    return obj.map(
-        (optVar: Variable) => ({
-            // type: 'any', // TODO: fix type
-            key: optVar.key,
-            value: optVar.value,
-        }),
-        {}
-    );
+  return obj.map(
+    (optVar: Variable) => ({
+      // type: 'any', // TODO: fix type
+      key: optVar.key,
+      value: optVar.value,
+    }),
+    {},
+  );
 };
 
 describe('test sdk objects', () => {
-    it('test RequestAuth methods', () => {
-        expect(RequestAuth.isValidType('noauth')).toBeTruthy();
+  it('test RequestAuth methods', () => {
+    expect(RequestAuth.isValidType('noauth')).toBeTruthy();
 
-        const basicAuthOptions = {
-            type: 'basic',
-            basic: [
-                { key: 'username', value: 'user1' },
-                { key: 'password', value: 'pwd1' },
-            ],
-        } as AuthOptions;
+    const basicAuthOptions = {
+      type: 'basic',
+      basic: [
+        { key: 'username', value: 'user1' },
+        { key: 'password', value: 'pwd1' },
+      ],
+    } as AuthOptions;
 
-        const authObj = new RequestAuth(basicAuthOptions);
+    const authObj = new RequestAuth(basicAuthOptions);
 
-        const basicAuthOptsFromAuth = varListToObject(authObj.parameters());
-        expect(basicAuthOptsFromAuth).toEqual(basicAuthOptions.basic);
+    const basicAuthOptsFromAuth = varListToObject(authObj.parameters());
+    expect(basicAuthOptsFromAuth).toEqual(basicAuthOptions.basic);
 
-        const basicAuthOptions2 = {
-            type: 'basic',
-            basic: [
-                { key: 'username', value: 'user2' },
-                { key: 'password', value: 'pwd2' },
-            ],
-        } as AuthOptions;
-        const bearerAuthOptions = {
-            type: 'bearer',
-            bearer: [
-                { key: 'token', value: 'mytoken' },
-            ],
-        } as AuthOptions;
+    const basicAuthOptions2 = {
+      type: 'basic',
+      basic: [
+        { key: 'username', value: 'user2' },
+        { key: 'password', value: 'pwd2' },
+      ],
+    } as AuthOptions;
+    const bearerAuthOptions = {
+      type: 'bearer',
+      bearer: [{ key: 'token', value: 'mytoken' }],
+    } as AuthOptions;
 
-        authObj.update(basicAuthOptions2);
-        const basicAuthOpt2FromAuth = varListToObject(authObj.parameters());
-        expect(basicAuthOpt2FromAuth).toEqual(basicAuthOptions2.basic);
+    authObj.update(basicAuthOptions2);
+    const basicAuthOpt2FromAuth = varListToObject(authObj.parameters());
+    expect(basicAuthOpt2FromAuth).toEqual(basicAuthOptions2.basic);
 
-        authObj.use('bearer', bearerAuthOptions);
-        const beareerAuthOptFromAuth = varListToObject(authObj.parameters());
-        expect(beareerAuthOptFromAuth).toEqual(bearerAuthOptions.bearer);
+    authObj.use('bearer', bearerAuthOptions);
+    const beareerAuthOptFromAuth = varListToObject(authObj.parameters());
+    expect(beareerAuthOptFromAuth).toEqual(bearerAuthOptions.bearer);
 
-        authObj.clear('bearer');
-        expect(authObj.parameters()).toBeUndefined();
-    });
+    authObj.clear('bearer');
+    expect(authObj.parameters()).toBeUndefined();
+  });
 });
 
 describe('test auth transforming', () => {
-    it('transforming from script side to Insomnia and the reverse direction', () => {
-        const basicAuth = {
-            type: 'basic',
-            useISO88591: true,
-            disabled: false,
-            username: 'uname',
-            password: 'pwd',
-        };
-        const apikeyAuth = {
-            type: 'apikey',
-            disabled: false,
-            key: 'key',
-            value: 'value',
-            addTo: 'addto',
-        };
-        const hawkAuth = {
-            type: 'hawk',
-            disabled: true,
-            algorithm: 'sha256',
-            id: 'id',
-            key: 'key',
-            ext: 'ext',
-            validatePayload: true,
-        };
-        const oauth1Auth = {
-            type: 'oauth1',
-            disabled: true,
-            signatureMethod: 'HMAC-SHA1',
-            consumerKey: 'consumerKey',
-            consumerSecret: 'consumerSecret',
-            tokenKey: 'tokenKey',
-            tokenSecret: 'tokenSecret',
-            privateKey: 'privateKey',
-            version: 'version',
-            nonce: 'nonce',
-            timestamp: 'timestamp',
-            callback: 'callback',
-            realm: 'realm',
-            verifier: 'verifier',
-            includeBodyHash: true,
-        };
-        const digestAuth = {
-            type: 'digest',
-            disabled: true,
-            username: 'username',
-            password: 'password',
-        };
-        const digestNtlm = {
-            type: 'ntlm',
-            disabled: true,
-            username: 'username',
-            password: 'password',
-        };
-        const bearerAuth = {
-            type: 'bearer',
-            disabled: true,
-            token: 'token',
-            prefix: 'prefix',
-        };
-        const awsv4Auth = {
-            type: 'iam',
-            disabled: true,
-            accessKeyId: 'accessKeyId',
-            secretAccessKey: 'secretAccessKey',
-            sessionToken: 'sessionToken',
-            region: 'region',
-            service: 'service',
-        };
-        const asapAuth = {
-            type: 'asap',
-            disabled: true,
-            issuer: 'issuer',
-            subject: 'subject',
-            audience: 'audience',
-            additionalClaims: 'additionalClaims',
-            keyId: 'keyId',
-            privateKey: 'privateKey',
-        };
-        const noneAuth = {
-            type: 'none',
-            disabled: true,
-        };
-        const oauth2Auth = {
-            type: 'oauth2',
-            disabled: true,
-            grantType: 'authorization_code',
-            accessTokenUrl: 'accessTokenUrl',
-            authorizationUrl: 'authorizationUrl',
-            clientId: 'clientId',
-            clientSecret: 'clientSecret',
-            audience: 'audience',
-            scope: 'scope',
-            resource: 'resource',
-            username: 'username',
-            password: 'password',
-            redirectUrl: 'redirectUrl',
-            credentialsInBody: true,
-            state: 'state',
-            code: 'code',
-            accessToken: 'accessToken',
-            refreshToken: 'refreshToken',
-            tokenPrefix: 'tokenPrefix',
-            usePkce: true,
-            pkceMethod: 'pkceMethod',
-            responseType: 'id_token',
-            origin: 'origin',
-        };
+  it('transforming from script side to Insomnia and the reverse direction', () => {
+    const basicAuth = {
+      type: 'basic',
+      useISO88591: true,
+      disabled: false,
+      username: 'uname',
+      password: 'pwd',
+    };
+    const apikeyAuth = {
+      type: 'apikey',
+      disabled: false,
+      key: 'key',
+      value: 'value',
+      addTo: 'addto',
+    };
+    const hawkAuth = {
+      type: 'hawk',
+      disabled: true,
+      algorithm: 'sha256',
+      id: 'id',
+      key: 'key',
+      ext: 'ext',
+      validatePayload: true,
+    };
+    const oauth1Auth = {
+      type: 'oauth1',
+      disabled: true,
+      signatureMethod: 'HMAC-SHA1',
+      consumerKey: 'consumerKey',
+      consumerSecret: 'consumerSecret',
+      tokenKey: 'tokenKey',
+      tokenSecret: 'tokenSecret',
+      privateKey: 'privateKey',
+      version: 'version',
+      nonce: 'nonce',
+      timestamp: 'timestamp',
+      callback: 'callback',
+      realm: 'realm',
+      verifier: 'verifier',
+      includeBodyHash: true,
+    };
+    const digestAuth = {
+      type: 'digest',
+      disabled: true,
+      username: 'username',
+      password: 'password',
+    };
+    const digestNtlm = {
+      type: 'ntlm',
+      disabled: true,
+      username: 'username',
+      password: 'password',
+    };
+    const bearerAuth = {
+      type: 'bearer',
+      disabled: true,
+      token: 'token',
+      prefix: 'prefix',
+    };
+    const awsv4Auth = {
+      type: 'iam',
+      disabled: true,
+      accessKeyId: 'accessKeyId',
+      secretAccessKey: 'secretAccessKey',
+      sessionToken: 'sessionToken',
+      region: 'region',
+      service: 'service',
+    };
+    const asapAuth = {
+      type: 'asap',
+      disabled: true,
+      issuer: 'issuer',
+      subject: 'subject',
+      audience: 'audience',
+      additionalClaims: 'additionalClaims',
+      keyId: 'keyId',
+      privateKey: 'privateKey',
+    };
+    const noneAuth = {
+      type: 'none',
+      disabled: true,
+    };
+    const oauth2Auth = {
+      type: 'oauth2',
+      disabled: true,
+      grantType: 'authorization_code',
+      accessTokenUrl: 'accessTokenUrl',
+      authorizationUrl: 'authorizationUrl',
+      clientId: 'clientId',
+      clientSecret: 'clientSecret',
+      audience: 'audience',
+      scope: 'scope',
+      resource: 'resource',
+      username: 'username',
+      password: 'password',
+      redirectUrl: 'redirectUrl',
+      credentialsInBody: true,
+      state: 'state',
+      code: 'code',
+      accessToken: 'accessToken',
+      refreshToken: 'refreshToken',
+      tokenPrefix: 'tokenPrefix',
+      usePkce: true,
+      pkceMethod: 'pkceMethod',
+      responseType: 'id_token',
+      origin: 'origin',
+    };
 
-        [
-            basicAuth,
-            apikeyAuth,
-            hawkAuth,
-            oauth1Auth,
-            digestAuth,
-            digestNtlm,
-            bearerAuth,
-            awsv4Auth,
-            asapAuth,
-            noneAuth,
-            oauth2Auth,
-        ].forEach(authMethod => {
-            expect(fromPreRequestAuth(
-                new RequestAuth(
-                    toPreRequestAuth(authMethod)),
-            )
-            ).toEqual(authMethod);
-        });
+    [
+      basicAuth,
+      apikeyAuth,
+      hawkAuth,
+      oauth1Auth,
+      digestAuth,
+      digestNtlm,
+      bearerAuth,
+      awsv4Auth,
+      asapAuth,
+      noneAuth,
+      oauth2Auth,
+    ].forEach(authMethod => {
+      expect(fromPreRequestAuth(new RequestAuth(toPreRequestAuth(authMethod)))).toEqual(authMethod);
     });
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/certificates.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/certificates.test.ts
index a58b3d2e94..490237b651 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/certificates.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/certificates.test.ts
@@ -3,33 +3,30 @@ import { describe, expect, it } from 'vitest';
 import { Certificate } from '../certificates';
 
 describe('test Certificate object', () => {
-    it('test methods', () => {
-        const cert = new Certificate({
-            name: 'Certificate for example.com',
-            matches: ['https://example.com'],
-            key: { src: '/User/path/to/certificate/key' },
-            cert: { src: '/User/path/to/certificate' },
-            passphrase: 'iampassphrase',
-        });
-
-        [
-            'https://example.com',
-            'https://example.com/subdomain',
-        ].forEach(testCase => {
-            expect(cert.canApplyTo(testCase)).toBeTruthy();
-        });
-
-        cert.update({
-            name: 'Certificate for api.com',
-            matches: ['https://api.com'],
-            key: { src: '/User/path/to/certificate/key' },
-            cert: { src: '/User/path/to/certificate' },
-            passphrase: 'iampassphrase',
-        });
-
-        expect(cert.name).toEqual('Certificate for api.com');
-        expect(cert.key).toEqual({ src: '/User/path/to/certificate/key' });
-        expect(cert.cert).toEqual({ src: '/User/path/to/certificate' });
-        expect(cert.passphrase).toEqual('iampassphrase');
+  it('test methods', () => {
+    const cert = new Certificate({
+      name: 'Certificate for example.com',
+      matches: ['https://example.com'],
+      key: { src: '/User/path/to/certificate/key' },
+      cert: { src: '/User/path/to/certificate' },
+      passphrase: 'iampassphrase',
     });
+
+    ['https://example.com', 'https://example.com/subdomain'].forEach(testCase => {
+      expect(cert.canApplyTo(testCase)).toBeTruthy();
+    });
+
+    cert.update({
+      name: 'Certificate for api.com',
+      matches: ['https://api.com'],
+      key: { src: '/User/path/to/certificate/key' },
+      cert: { src: '/User/path/to/certificate' },
+      passphrase: 'iampassphrase',
+    });
+
+    expect(cert.name).toEqual('Certificate for api.com');
+    expect(cert.key).toEqual({ src: '/User/path/to/certificate/key' });
+    expect(cert.cert).toEqual({ src: '/User/path/to/certificate' });
+    expect(cert.passphrase).toEqual('iampassphrase');
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/cookies.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/cookies.test.ts
index 7580bb177d..b4dbed3c4b 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/cookies.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/cookies.test.ts
@@ -3,227 +3,201 @@ import { describe, expect, it } from 'vitest';
 import { Cookie, CookieJar, CookieList, CookieObject, mergeCookieJar } from '../cookies';
 
 describe('test Cookie object', () => {
-    it('test basic operations', () => {
-        const cookieStr1 = 'key=value; Domain=inso.com; Path=/; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Max-Age=0;Secure;HttpOnly;HostOnly;Session';
+  it('test basic operations', () => {
+    const cookieStr1 =
+      'key=value; Domain=inso.com; Path=/; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Max-Age=0;Secure;HttpOnly;HostOnly;Session';
 
-        expect(
-            Cookie.parse(cookieStr1)
-        ).toEqual({
-            key: 'key',
-            value: 'value',
-            domain: 'inso.com',
-            expires: new Date('2015-10-21T07:28:00.000Z'),
-            maxAge: 0,
-            path: '/',
-            secure: true,
-            httpOnly: true,
-            hostOnly: true,
-            session: true,
-            extensions: [],
-        });
+    expect(Cookie.parse(cookieStr1)).toEqual({
+      key: 'key',
+      value: 'value',
+      domain: 'inso.com',
+      expires: new Date('2015-10-21T07:28:00.000Z'),
+      maxAge: 0,
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      hostOnly: true,
+      session: true,
+      extensions: [],
+    });
 
-        const cookie1Opt = {
-            key: 'myCookie',
-            value: 'myCookie',
-            expires: '01 Jan 1970 00:00:01 GMT',
-            maxAge: 7,
-            domain: 'domain.com',
-            path: '/',
-            secure: true,
-            httpOnly: true,
-            hostOnly: true,
-            session: true,
-            extensions: [{ key: 'Ext', value: 'ExtValue' }],
-        };
-        const cookie1 = new Cookie(cookie1Opt);
+    const cookie1Opt = {
+      key: 'myCookie',
+      value: 'myCookie',
+      expires: '01 Jan 1970 00:00:01 GMT',
+      maxAge: 7,
+      domain: 'domain.com',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      hostOnly: true,
+      session: true,
+      extensions: [{ key: 'Ext', value: 'ExtValue' }],
+    };
+    const cookie1 = new Cookie(cookie1Opt);
 
-        const expectedCookieString = 'myCookie=myCookie; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Max-Age=7; Path=/; Secure; HttpOnly; HostOnly; Ext=ExtValue';
+    const expectedCookieString =
+      'myCookie=myCookie; Expires=Thu, 01 Jan 1970 00:00:01 GMT; Max-Age=7; Path=/; Secure; HttpOnly; HostOnly; Ext=ExtValue';
 
-        expect(cookie1.toString()).toEqual(expectedCookieString);
-        expect(Cookie.stringify(cookie1)).toEqual(expectedCookieString);
+    expect(cookie1.toString()).toEqual(expectedCookieString);
+    expect(Cookie.stringify(cookie1)).toEqual(expectedCookieString);
 
-        const cookie2 = new Cookie(expectedCookieString);
-        expect(cookie2.toString()).toEqual(expectedCookieString);
-        expect(Cookie.stringify(cookie2)).toEqual(expectedCookieString);
+    const cookie2 = new Cookie(expectedCookieString);
+    expect(cookie2.toString()).toEqual(expectedCookieString);
+    expect(Cookie.stringify(cookie2)).toEqual(expectedCookieString);
 
-        const c1 = new Cookie({
+    const c1 = new Cookie({
+      key: 'c1',
+      value: 'c1',
+      maxAge: 1,
+    });
+    const c2 = new Cookie({
+      key: 'c2',
+      value: 'c2',
+      maxAge: 2,
+    });
+    const CookieListStr = Cookie.unparse([c1, c2]);
+    expect(CookieListStr).toEqual('c1=c1; Max-Age=1; c2=c2; Max-Age=2');
+
+    expect(Cookie.unparseSingle(cookie1Opt)).toEqual(expectedCookieString);
+
+    const malformedCookieString = '=gingerale';
+    expect(Cookie.parse(malformedCookieString)).toEqual({
+      key: '',
+      value: 'gingerale',
+      expires: 'Infinity',
+      hostOnly: false,
+      httpOnly: false,
+      maxAge: null,
+      secure: false,
+      session: false,
+    });
+  });
+
+  it('test cookie transforming', () => {
+    const fakeBaseModel = {
+      _id: '',
+      type: '',
+      parentId: '',
+      modified: 0,
+      created: 0,
+      isPrivate: false,
+      name: '',
+    };
+    const cookieJars = [
+      {
+        cookies: [
+          {
+            id: '1',
             key: 'c1',
-            value: 'c1',
-            maxAge: 1,
-        });
-        const c2 = new Cookie({
-            key: 'c2',
-            value: 'c2',
-            maxAge: 2,
-        });
-        const CookieListStr = Cookie.unparse([c1, c2]);
-        expect(CookieListStr).toEqual(
-            'c1=c1; Max-Age=1; c2=c2; Max-Age=2'
-        );
-
-        expect(
-            Cookie.unparseSingle(cookie1Opt)
-        ).toEqual(expectedCookieString);
-
-        const malformedCookieString = '=gingerale';
-        expect(
-            Cookie.parse(malformedCookieString)
-        ).toEqual({
-            key: '',
-            value: 'gingerale',
+            value: 'v1',
             expires: 'Infinity',
-            hostOnly: false,
-            httpOnly: false,
-            maxAge: null,
-            secure: false,
-            session: false,
-        });
-    });
-
-    it('test cookie transforming', () => {
-        const fakeBaseModel = {
-            _id: '',
-            type: '',
-            parentId: '',
-            modified: 0,
-            created: 0,
-            isPrivate: false,
-            name: '',
-        };
-        const cookieJars = [
-            {
-                cookies: [
-                    {
-                        id: '1',
-                        key: 'c1',
-                        value: 'v1',
-                        expires: 'Infinity',
-                        domain: 'inso.com',
-                        path: '/',
-                        secure: true,
-                        httpOnly: true,
-                        extensions: [],
-                        creation: new Date(),
-                        creationIndex: 0,
-                        hostOnly: true,
-                        pathIsDefault: true,
-                        lastAccessed: new Date(),
-                    },
-                    {
-                        id: '2',
-                        key: 'c2',
-                        value: 'v2',
-                        expires: new Date('08 Aug 1988 08:08:08 GMT'),
-                        domain: 'inso.com',
-                        path: '/',
-                        secure: true,
-                        httpOnly: true,
-                        extensions: [],
-                        creation: new Date(),
-                        creationIndex: 0,
-                        hostOnly: true,
-                        pathIsDefault: true,
-                        lastAccessed: new Date(),
-                    },
-                ],
-            },
-        ];
-
-        cookieJars.forEach(jar => {
-            const originalJar = { ...fakeBaseModel, ...jar };
-            const sdkJar = new CookieObject(originalJar);
-            const convertedJar = mergeCookieJar(originalJar, sdkJar.jar().toInsomniaCookieJar());
-
-            expect(convertedJar).toEqual(originalJar);
-        });
+            domain: 'inso.com',
+            path: '/',
+            secure: true,
+            httpOnly: true,
+            extensions: [],
+            creation: new Date(),
+            creationIndex: 0,
+            hostOnly: true,
+            pathIsDefault: true,
+            lastAccessed: new Date(),
+          },
+          {
+            id: '2',
+            key: 'c2',
+            value: 'v2',
+            expires: new Date('08 Aug 1988 08:08:08 GMT'),
+            domain: 'inso.com',
+            path: '/',
+            secure: true,
+            httpOnly: true,
+            extensions: [],
+            creation: new Date(),
+            creationIndex: 0,
+            hostOnly: true,
+            pathIsDefault: true,
+            lastAccessed: new Date(),
+          },
+        ],
+      },
+    ];
+
+    cookieJars.forEach(jar => {
+      const originalJar = { ...fakeBaseModel, ...jar };
+      const sdkJar = new CookieObject(originalJar);
+      const convertedJar = mergeCookieJar(originalJar, sdkJar.jar().toInsomniaCookieJar());
+
+      expect(convertedJar).toEqual(originalJar);
     });
+  });
 });
 
 describe('test CookieJar', () => {
-    it('basic operations', () => {
-        const cookieOptBase = {
-            key: 'myCookie',
-            value: 'myCookie',
-            expires: '01 Jan 1970 00:00:01 GMT',
-            maxAge: 7,
-            domain: 'domain.com',
-            path: '/',
-            secure: true,
-            httpOnly: true,
-            hostOnly: true,
-            session: true,
-            extensions: [{ key: 'Ext', value: 'ExtValue' }],
-        };
+  it('basic operations', () => {
+    const cookieOptBase = {
+      key: 'myCookie',
+      value: 'myCookie',
+      expires: '01 Jan 1970 00:00:01 GMT',
+      maxAge: 7,
+      domain: 'domain.com',
+      path: '/',
+      secure: true,
+      httpOnly: true,
+      hostOnly: true,
+      session: true,
+      extensions: [{ key: 'Ext', value: 'ExtValue' }],
+    };
 
-        const jar = new CookieJar(
-            'my jar',
-            [
-                new Cookie({ ...cookieOptBase, key: 'c1', value: 'c1' }),
-                new Cookie({ ...cookieOptBase, key: 'c2', value: 'c2' }),
-            ],
-        );
+    const jar = new CookieJar('my jar', [
+      new Cookie({ ...cookieOptBase, key: 'c1', value: 'c1' }),
+      new Cookie({ ...cookieOptBase, key: 'c2', value: 'c2' }),
+    ]);
 
-        jar.set('domain.com', 'c1', { ...cookieOptBase, key: 'c1', value: 'c1Updated' }, (error, cookie) => {
-            expect(error).toBeUndefined();
-            expect(cookie?.toJSON()).toEqual(
-                new Cookie({ ...cookieOptBase, key: 'c1', value: 'c1Updated' }).toJSON()
-            );
-        });
-
-        jar.set('domain2.com', 'c2', { ...cookieOptBase, key: 'c2', value: 'c2' }, (error, cookie) => {
-            expect(error).toBeUndefined();
-            expect(cookie?.toJSON()).toEqual(
-                new Cookie({ ...cookieOptBase, key: 'c2', value: 'c2' }).toJSON()
-            );
-        });
-
-        jar.get('domain.com', 'c1', (err, cookie) => {
-            expect(err).toBeUndefined();
-            expect(
-                cookie?.toJSON(),
-            ).toEqual(
-                new Cookie({ ...cookieOptBase, key: 'c1', value: 'c1Updated' }).toJSON(),
-            );
-        });
-
-        jar.get('domain2.com', 'c2', (err, cookie) => {
-            expect(err).toBeUndefined();
-            expect(
-                cookie?.toJSON(),
-            ).toEqual(
-                new Cookie({ ...cookieOptBase, key: 'c2', value: 'c2' }).toJSON(),
-            );
-        });
-
-        jar.unset('domain.com', 'c1', err => {
-            expect(err).toBeUndefined();
-        });
-
-        jar.get('domain.com', 'c1', (err, cookie) => {
-            expect(err).toBeUndefined();
-            expect(cookie).toBeUndefined();
-        });
-
-        jar.clear('domain2.com', err => {
-            expect(err).toBeUndefined();
-        });
-
-        jar.get('domain2.com', 'c2', (err, cookie) => {
-            expect(err).toBeUndefined();
-            expect(cookie).toBeUndefined();
-        });
+    jar.set('domain.com', 'c1', { ...cookieOptBase, key: 'c1', value: 'c1Updated' }, (error, cookie) => {
+      expect(error).toBeUndefined();
+      expect(cookie?.toJSON()).toEqual(new Cookie({ ...cookieOptBase, key: 'c1', value: 'c1Updated' }).toJSON());
     });
 
-    it('CookieList operations', () => {
-        const cookieList = new CookieList(
-            [
-                new Cookie({ key: 'c1', value: 'v1' }),
-                new Cookie({ key: 'c2', value: 'v2' }),
-            ]
-        );
-
-        const upsertedC1 = new Cookie({ key: 'c1', value: 'v1upserted' });
-        cookieList.upsert(upsertedC1);
-        expect(cookieList.one('c1')).toEqual(upsertedC1);
+    jar.set('domain2.com', 'c2', { ...cookieOptBase, key: 'c2', value: 'c2' }, (error, cookie) => {
+      expect(error).toBeUndefined();
+      expect(cookie?.toJSON()).toEqual(new Cookie({ ...cookieOptBase, key: 'c2', value: 'c2' }).toJSON());
     });
+
+    jar.get('domain.com', 'c1', (err, cookie) => {
+      expect(err).toBeUndefined();
+      expect(cookie?.toJSON()).toEqual(new Cookie({ ...cookieOptBase, key: 'c1', value: 'c1Updated' }).toJSON());
+    });
+
+    jar.get('domain2.com', 'c2', (err, cookie) => {
+      expect(err).toBeUndefined();
+      expect(cookie?.toJSON()).toEqual(new Cookie({ ...cookieOptBase, key: 'c2', value: 'c2' }).toJSON());
+    });
+
+    jar.unset('domain.com', 'c1', err => {
+      expect(err).toBeUndefined();
+    });
+
+    jar.get('domain.com', 'c1', (err, cookie) => {
+      expect(err).toBeUndefined();
+      expect(cookie).toBeUndefined();
+    });
+
+    jar.clear('domain2.com', err => {
+      expect(err).toBeUndefined();
+    });
+
+    jar.get('domain2.com', 'c2', (err, cookie) => {
+      expect(err).toBeUndefined();
+      expect(cookie).toBeUndefined();
+    });
+  });
+
+  it('CookieList operations', () => {
+    const cookieList = new CookieList([new Cookie({ key: 'c1', value: 'v1' }), new Cookie({ key: 'c2', value: 'v2' })]);
+
+    const upsertedC1 = new Cookie({ key: 'c1', value: 'v1upserted' });
+    cookieList.upsert(upsertedC1);
+    expect(cookieList.one('c1')).toEqual(upsertedC1);
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/environments.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/environments.test.ts
index d51517feb9..955c53c64f 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/environments.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/environments.test.ts
@@ -5,104 +5,96 @@ import { Environment, Variables } from '../environments';
 import { Folder, ParentFolders } from '../folders';
 
 describe('test Variables object', () => {
-    it('test basic operations', () => {
-        const variables = new Variables({
-            globalVars: new Environment('globals', { value: 'xyz' }),
-            environmentVars: new Environment('environments', {}),
-            collectionVars: new Environment('baseEnvironment', {}),
-            iterationDataVars: new Environment('iterationData', {}),
-            folderLevelVars: [],
-            localVars: new Environment('local', {}),
-        });
-
-        const uuidAndXyz = variables.replaceIn('{{    $randomUUID }}{{value  }}');
-        expect(validate(uuidAndXyz.replace('xyz', ''))).toBeTruthy();
-
-        const uuidAndBrackets1 = variables.replaceIn('{{    $randomUUID }}}}');
-        expect(validate(uuidAndBrackets1.replace('}}', ''))).toBeTruthy();
-
-        const uuidAndBrackets2 = variables.replaceIn('}}{{    $randomUUID }}');
-        expect(validate(uuidAndBrackets2.replace('}}', ''))).toBeTruthy();
+  it('test basic operations', () => {
+    const variables = new Variables({
+      globalVars: new Environment('globals', { value: 'xyz' }),
+      environmentVars: new Environment('environments', {}),
+      collectionVars: new Environment('baseEnvironment', {}),
+      iterationDataVars: new Environment('iterationData', {}),
+      folderLevelVars: [],
+      localVars: new Environment('local', {}),
     });
 
-    it('test environment overriding', () => {
-        const globalOnlyVariables = new Variables({
-            globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
-            environmentVars: new Environment('environments', {}),
-            collectionVars: new Environment('baseEnvironment', {}),
-            iterationDataVars: new Environment('iterationData', {}),
-            folderLevelVars: [],
-            localVars: new Environment('local', {}),
-        });
-        const normalVariables = new Variables({
-            globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
-            environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
-            collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
-            iterationDataVars: new Environment('iterationData', {}),
-            folderLevelVars: [],
-            localVars: new Environment('local', {}),
-        });
-        const variablesWithIterationData = new Variables({
-            globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
-            environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
-            collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
-            iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
-            folderLevelVars: [],
-            localVars: new Environment('local', {}),
-        });
-        const variablesWithFolderLevelData = new Variables({
-            globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
-            environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
-            collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
-            iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
-            folderLevelVars: [
-                new Environment('folderLevel1', { scope: 'folderLevel1', value: 'folderLevel1-value' }),
-                new Environment('folderLevel2', { scope: 'folderLevel2', value: 'folderLevel2-value' }),
-            ],
-            localVars: new Environment('local', { scope: 'local' }),
-        });
-        const variablesWithLocalData = new Variables({
-            globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
-            environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
-            collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
-            iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
-            folderLevelVars: [],
-            localVars: new Environment('local', { scope: 'local', value: 'local-value' }),
-        });
+    const uuidAndXyz = variables.replaceIn('{{    $randomUUID }}{{value  }}');
+    expect(validate(uuidAndXyz.replace('xyz', ''))).toBeTruthy();
 
-        expect(globalOnlyVariables.get('value')).toEqual('global-value');
-        expect(normalVariables.get('value')).toEqual('subEnv-value');
-        expect(variablesWithIterationData.get('value')).toEqual('iterationData-value');
-        expect(variablesWithFolderLevelData.get('value')).toEqual('folderLevel2-value');
-        expect(variablesWithLocalData.get('value')).toEqual('local-value');
+    const uuidAndBrackets1 = variables.replaceIn('{{    $randomUUID }}}}');
+    expect(validate(uuidAndBrackets1.replace('}}', ''))).toBeTruthy();
 
-        expect(variablesWithFolderLevelData.replaceIn('{{ value}}')).toEqual('folderLevel2-value');
+    const uuidAndBrackets2 = variables.replaceIn('}}{{    $randomUUID }}');
+    expect(validate(uuidAndBrackets2.replace('}}', ''))).toBeTruthy();
+  });
+
+  it('test environment overriding', () => {
+    const globalOnlyVariables = new Variables({
+      globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
+      environmentVars: new Environment('environments', {}),
+      collectionVars: new Environment('baseEnvironment', {}),
+      iterationDataVars: new Environment('iterationData', {}),
+      folderLevelVars: [],
+      localVars: new Environment('local', {}),
+    });
+    const normalVariables = new Variables({
+      globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
+      environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
+      collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
+      iterationDataVars: new Environment('iterationData', {}),
+      folderLevelVars: [],
+      localVars: new Environment('local', {}),
+    });
+    const variablesWithIterationData = new Variables({
+      globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
+      environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
+      collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
+      iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
+      folderLevelVars: [],
+      localVars: new Environment('local', {}),
+    });
+    const variablesWithFolderLevelData = new Variables({
+      globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
+      environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
+      collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
+      iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
+      folderLevelVars: [
+        new Environment('folderLevel1', { scope: 'folderLevel1', value: 'folderLevel1-value' }),
+        new Environment('folderLevel2', { scope: 'folderLevel2', value: 'folderLevel2-value' }),
+      ],
+      localVars: new Environment('local', { scope: 'local' }),
+    });
+    const variablesWithLocalData = new Variables({
+      globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
+      environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
+      collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
+      iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
+      folderLevelVars: [],
+      localVars: new Environment('local', { scope: 'local', value: 'local-value' }),
     });
 
-    it('variables operations', () => {
-        const folders = new ParentFolders([
-            new Folder(
-                '1',
-                'folder1',
-                { value: 'folder1Value' },
-            ),
-            new Folder(
-                '2',
-                'folder2',
-                { value: 'folder2Value' },
-            ),
-        ]);
+    expect(globalOnlyVariables.get('value')).toEqual('global-value');
+    expect(normalVariables.get('value')).toEqual('subEnv-value');
+    expect(variablesWithIterationData.get('value')).toEqual('iterationData-value');
+    expect(variablesWithFolderLevelData.get('value')).toEqual('folderLevel2-value');
+    expect(variablesWithLocalData.get('value')).toEqual('local-value');
 
-        const variables = new Variables({
-            globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
-            environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
-            collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
-            iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
-            folderLevelVars: folders.getEnvironments(),
-            localVars: new Environment('local', { scope: 'local' }),
-        });
+    expect(variablesWithFolderLevelData.replaceIn('{{ value}}')).toEqual('folderLevel2-value');
+  });
 
-        folders.get('folder2').environment.set('value', 'folder1ValueOverride');
-        expect(variables.get('value')).toEqual('folder1ValueOverride');
+  it('variables operations', () => {
+    const folders = new ParentFolders([
+      new Folder('1', 'folder1', { value: 'folder1Value' }),
+      new Folder('2', 'folder2', { value: 'folder2Value' }),
+    ]);
+
+    const variables = new Variables({
+      globalVars: new Environment('globals', { scope: 'global', value: 'global-value' }),
+      environmentVars: new Environment('environments', { scope: 'subEnv', value: 'subEnv-value' }),
+      collectionVars: new Environment('baseEnvironment', { scope: 'baseEnv', value: 'baseEnv-value' }),
+      iterationDataVars: new Environment('iterationData', { scope: 'iterationData', value: 'iterationData-value' }),
+      folderLevelVars: folders.getEnvironments(),
+      localVars: new Environment('local', { scope: 'local' }),
     });
+
+    folders.get('folder2').environment.set('value', 'folder1ValueOverride');
+    expect(variables.get('value')).toEqual('folder1ValueOverride');
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/headers.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/headers.test.ts
index ceb77941ce..9bf7f5a8a0 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/headers.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/headers.test.ts
@@ -4,31 +4,26 @@ import { Header, HeaderList } from '../headers';
 // import { QueryParam, setUrlParser, Url, UrlMatchPattern } from '../urls';
 
 describe('test Header object', () => {
-    it('test basic operations', () => {
-        // const header = new Header('Content-Type: application/json\nUser-Agent: MyClientLibrary/2.0\n');
-        const headerStr = 'Content-Type: application/json\nUser-Agent: MyClientLibrary/2.0\n';
-        const headerObjs = [
-            { key: 'Content-Type', value: 'application/json' },
-            { key: 'User-Agent', value: 'MyClientLibrary/2.0' },
-        ];
+  it('test basic operations', () => {
+    // const header = new Header('Content-Type: application/json\nUser-Agent: MyClientLibrary/2.0\n');
+    const headerStr = 'Content-Type: application/json\nUser-Agent: MyClientLibrary/2.0\n';
+    const headerObjs = [
+      { key: 'Content-Type', value: 'application/json' },
+      { key: 'User-Agent', value: 'MyClientLibrary/2.0' },
+    ];
 
-        expect(Header.parse(headerStr)).toEqual(headerObjs);
-        expect(
-            Header.parse(Header.unparse(headerObjs))
-        ).toEqual(headerObjs);
-    });
+    expect(Header.parse(headerStr)).toEqual(headerObjs);
+    expect(Header.parse(Header.unparse(headerObjs))).toEqual(headerObjs);
+  });
 
-    it('HeaderList operations', () => {
-        const headerList = new HeaderList(
-            undefined,
-            [
-                new Header({ key: 'h1', value: 'v1' }),
-                new Header({ key: 'h2', value: 'v2' }),
-            ]
-        );
+  it('HeaderList operations', () => {
+    const headerList = new HeaderList(undefined, [
+      new Header({ key: 'h1', value: 'v1' }),
+      new Header({ key: 'h2', value: 'v2' }),
+    ]);
 
-        const upserted = new Header({ key: 'h1', value: 'v1upserted' });
-        headerList.upsert(upserted);
-        expect(headerList.one('h1')).toEqual(upserted);
-    });
+    const upserted = new Header({ key: 'h1', value: 'v1upserted' });
+    headerList.upsert(upserted);
+    expect(headerList.one('h1')).toEqual(upserted);
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/properties.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/properties.test.ts
index 86c7159bf7..e798ad8448 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/properties.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/properties.test.ts
@@ -3,205 +3,134 @@ import { describe, expect, it } from 'vitest';
 import { Property, PropertyBase, PropertyList } from '../properties';
 
 describe('test Property objects', () => {
+  it('PropertyBase: basic operations', () => {
+    const pbase = new PropertyBase('my property');
 
-    it('PropertyBase: basic operations', () => {
-        const pbase = new PropertyBase('my property');
+    expect(pbase.toJSON()).toEqual({
+      description: 'my property',
+    });
+    expect(pbase.toObject()).toEqual({
+      description: 'my property',
+    });
+  });
 
-        expect(pbase.toJSON()).toEqual({
-            description: 'my property',
-        });
-        expect(pbase.toObject()).toEqual({
-            description: 'my property',
-        });
+  it('Property: basic operations', () => {
+    const prop = new Property('id', 'name', false, { id: 'real_id', name: 'real_name' });
+
+    expect(prop.toJSON()).toEqual({
+      disabled: false,
+      id: 'real_id',
+      name: 'real_name',
     });
 
-    it('Property: basic operations', () => {
-        const prop = new Property(
-            'id',
-            'name',
-            false,
-            { id: 'real_id', name: 'real_name' },
-        );
+    expect(Property.replaceSubstitutions('{{ hehe }}', { hehe: 777 })).toEqual('777');
+    expect(
+      Property.replaceSubstitutionsIn(
+        {
+          value: '{{ hehe }}',
+        },
+        { hehe: 777 },
+      ),
+    ).toEqual({ value: '777' });
+  });
 
-        expect(prop.toJSON()).toEqual({
-            disabled: false,
-            id: 'real_id',
-            name: 'real_name',
-        });
+  it('PropertyList: basic operations: add, append, count, all, clear', () => {
+    const propList = new PropertyList({}, undefined, [new Property('id1', 'p1')]);
 
-        expect(Property.replaceSubstitutions('{{ hehe }}', { hehe: 777 })).toEqual('777');
-        expect(Property.replaceSubstitutionsIn(
-            {
-                value: '{{ hehe }}',
-            },
-            { hehe: 777 },
-        ))
-            .toEqual({ value: '777' });
-    });
+    propList.add(new Property('id2', 'p2'));
+    propList.append(new Property('id3', 'p3'));
+    expect(propList.count()).toBe(3);
+    expect(propList.all()).toEqual([
+      {
+        disabled: false,
+        id: 'id1',
+        name: 'p1',
+      },
+      {
+        disabled: false,
+        id: 'id2',
+        name: 'p2',
+      },
+      {
+        disabled: false,
+        id: 'id3',
+        name: 'p3',
+      },
+    ]);
 
-    it('PropertyList: basic operations: add, append, count, all, clear', () => {
-        const propList = new PropertyList(
-            {},
-            undefined,
-            [
-                new Property('id1', 'p1'),
-            ],
-        );
+    propList.clear();
+  });
 
-        propList.add(new Property('id2', 'p2'));
-        propList.append(new Property('id3', 'p3'));
-        expect(propList.count()).toBe(3);
-        expect(propList.all()).toEqual([
-            {
-                disabled: false,
-                id: 'id1',
-                name: 'p1',
-            },
-            {
-                disabled: false,
-                id: 'id2',
-                name: 'p2',
-            },
-            {
-                disabled: false,
-                id: 'id3',
-                name: 'p3',
-            },
-        ]);
+  it('PropertyList: basic operations: assimilate, each, filter, find', () => {
+    const propList = new PropertyList<Property>(Property, undefined, []);
 
-        propList.clear();
-    });
+    propList.assimilate([new Property('id1', 'p1'), new Property('id2', 'p2')], false);
+    expect(propList.count()).toBe(2);
 
-    it('PropertyList: basic operations: assimilate, each, filter, find', () => {
-        const propList = new PropertyList<Property>(
-            Property,
-            undefined,
-            [],
-        );
+    propList.each(prop => {
+      expect(prop.name?.startsWith('p')).toBeTruthy();
+    }, {});
 
-        propList.assimilate(
-            [
-                new Property('id1', 'p1'),
-                new Property('id2', 'p2'),
-            ],
-            false,
-        );
-        expect(propList.count()).toBe(2);
+    expect(propList.filter(prop => prop.name === 'p1', {}).length).toBe(1);
 
-        propList.each(
-            prop => {
-                expect(prop.name?.startsWith('p')).toBeTruthy();
-            },
-            {},
-        );
+    expect(propList.find(prop => prop?.name === 'p2', {}) != null).toBeTruthy();
+  });
 
-        expect(
-            propList.filter(
-                prop => prop.name === 'p1',
-                {},
-            ).length
-        ).toBe(1);
+  it('PropertyList: basic operations: one, has, indexOf, insert, insertAfter, prepend, populate, map, reduce', () => {
+    const propList = new PropertyList<Property>(Property, undefined, [
+      new Property('id1', 'p1'),
+      new Property('id2', 'p2'),
+    ]);
 
-        expect(
-            propList.find(
-                prop => prop?.name === 'p2',
-                {},
-            ) != null
-        ).toBeTruthy();
-    });
+    expect(propList.one('id1')).toEqual(new Property('id1', 'p1'));
+    expect(propList.has(new Property('id1', 'p1'))).toBeTruthy();
+    expect(propList.indexOf(new Property('id1', 'p1')) === 0).toBeTruthy();
+    propList.clear();
 
-    it('PropertyList: basic operations: one, has, indexOf, insert, insertAfter, prepend, populate, map, reduce', () => {
-        const propList = new PropertyList<Property>(
-            Property,
-            undefined,
-            [
-                new Property('id1', 'p1'),
-                new Property('id2', 'p2'),
-            ],
-        );
+    propList.insert(new Property('id0', 'p0'), 0);
+    propList.insertAfter(new Property('id1', 'p1'), 1);
+    propList.prepend(new Property('id-1', 'p-1'));
+    propList.populate([new Property('id2', 'p2')]);
+  });
 
-        expect(propList.one('id1'))
-            .toEqual(new Property('id1', 'p1'));
-        expect(propList.has(new Property('id1', 'p1')))
-            .toBeTruthy();
-        expect(propList.indexOf(new Property('id1', 'p1')) === 0).toBeTruthy();
-        propList.clear();
+  it('PropertyList: basic operations: one, has, indexOf, insert, insertAfter, prepend, populate, map, reduce', () => {
+    const propList = new PropertyList<Property>(Property, undefined, [
+      new Property('id0', 'p0'),
+      new Property('id1', 'p1'),
+      new Property('id2', 'p2'),
+    ]);
 
-        propList.insert(new Property('id0', 'p0'), 0);
-        propList.insertAfter(new Property('id1', 'p1'), 1);
-        propList.prepend(new Property('id-1', 'p-1'));
-        propList.populate([new Property('id2', 'p2')]);
-    });
+    expect(propList.map(prop => prop.id, {})).toEqual(['id0', 'id1', 'id2']);
+    expect(propList.reduce((acc, prop) => (acc += prop.id), '', {})).toEqual('id0id1id2');
+  });
 
-    it('PropertyList: basic operations: one, has, indexOf, insert, insertAfter, prepend, populate, map, reduce', () => {
-        const propList = new PropertyList<Property>(
-            Property,
-            undefined,
-            [
-                new Property('id0', 'p0'),
-                new Property('id1', 'p1'),
-                new Property('id2', 'p2'),
-            ],
-        );
+  it('PropertyList: basic operations: remove, count, repopulate, toString, get, one, idx, upsert', () => {
+    const propList = new PropertyList<Property>(Property, undefined, [
+      new Property('id0', 'p0'),
+      new Property('id1', 'p1'),
+      new Property('id2', 'p2'),
+    ]);
 
-        expect(
-            propList.map(
-                prop => prop.id,
-                {},
-            )
-        ).toEqual([
-            'id0',
-            'id1',
-            'id2',
-        ]);
-        expect(
-            propList.reduce(
-                (acc, prop) => acc += prop.id,
-                '',
-                {},
-            ),
-        ).toEqual('id0id1id2');
-    });
+    propList.remove(prop => prop.id === 'id0', {});
+    expect(propList.count()).toEqual(2);
 
-    it('PropertyList: basic operations: remove, count, repopulate, toString, get, one, idx, upsert', () => {
-        const propList = new PropertyList<Property>(
-            Property,
-            undefined,
-            [
-                new Property('id0', 'p0'),
-                new Property('id1', 'p1'),
-                new Property('id2', 'p2'),
-            ],
-        );
+    propList.repopulate([new Property('id1', 'p1'), new Property('id2', 'p2')]);
 
-        propList.remove(
-            prop => prop.id === 'id0',
-            {},
-        );
-        expect(
-            propList.count(),
-        ).toEqual(2);
+    expect(propList.toString()).toEqual(
+      '[{"id":"id1","name":"p1","disabled":false}; {"id":"id2","name":"p2","disabled":false}]',
+    );
 
-        propList.repopulate([
-            new Property('id1', 'p1'),
-            new Property('id2', 'p2'),
-        ]);
+    const expectedP1 = new Property('id1', 'p1');
+    const getP1 = propList.get('id1');
+    const oneP1 = propList.one('id1');
+    expect(getP1).toEqual(expectedP1);
+    expect(oneP1).toEqual(expectedP1);
 
-        expect(propList.toString()).toEqual(
-            '[{"id":"id1","name":"p1","disabled":false}; {"id":"id2","name":"p2","disabled":false}]',
-        );
+    const idxP1 = propList.idx(0);
+    expect(idxP1).toEqual(expectedP1);
 
-        const expectedP1 = new Property('id1', 'p1');
-        const getP1 = propList.get('id1');
-        const oneP1 = propList.one('id1');
-        expect(getP1).toEqual(expectedP1);
-        expect(oneP1).toEqual(expectedP1);
-
-        const idxP1 = propList.idx(0);
-        expect(idxP1).toEqual(expectedP1);
-
-        const upsertedP2 = new Property('id2', 'upsertedP2');
-        propList.upsert(upsertedP2);
-        expect(propList.one('id2')).toEqual(upsertedP2);
-    });
+    const upsertedP2 = new Property('id2', 'upsertedP2');
+    propList.upsert(upsertedP2);
+    expect(propList.one('id2')).toEqual(upsertedP2);
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/proxy-configs.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/proxy-configs.test.ts
index 7469cbdf19..977ffb8ce2 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/proxy-configs.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/proxy-configs.test.ts
@@ -4,65 +4,58 @@ import { ProxyConfig, ProxyConfigList, transformToSdkProxyOptions } from '../pro
 import { Url } from '../urls';
 
 describe('test ProxyConfig object', () => {
-    it('test basic operations', () => {
-
-        const proxyConfig = new ProxyConfig({
-            match: 'http+https://*.example.com:80/*',
-            host: 'proxy.com',
-            port: 8080,
-            tunnel: true,
-            disabled: false,
-            authenticate: true,
-            username: 'proxy_username',
-            password: 'proxy_password',
-            protocol: 'https:',
-        });
-
-        expect(
-            proxyConfig.getProtocols()
-        ).toEqual(
-            ['http', 'https']
-        );
-
-        expect(proxyConfig.getProxyUrl()).toEqual(
-            'https://proxy_username:proxy_password@proxy.com:8080'
-        );
-
-        expect(
-            proxyConfig.test('http://a.example.com:80/a')
-        ).toBeTruthy();
-
-        const configList = new ProxyConfigList<ProxyConfig>(undefined, []);
-        configList.add(proxyConfig);
-        configList.add(new ProxyConfig({
-            match: 'https://*.example.com:80/*',
-            host: 'proxy.com',
-            port: 8080,
-            tunnel: true,
-            disabled: false,
-            authenticate: true,
-            username: 'proxy_username',
-            password: 'proxy_password',
-            protocol: 'https:',
-        }));
-
-        const matchedProxyConfigDef = configList.resolve(new Url('http://sub.example.com:80/path'));
-        expect(matchedProxyConfigDef?.host).toEqual('proxy.com');
+  it('test basic operations', () => {
+    const proxyConfig = new ProxyConfig({
+      match: 'http+https://*.example.com:80/*',
+      host: 'proxy.com',
+      port: 8080,
+      tunnel: true,
+      disabled: false,
+      authenticate: true,
+      username: 'proxy_username',
+      password: 'proxy_password',
+      protocol: 'https:',
     });
 
-    const proxyUrls = [
-        'http://wormhole',
-        'http://wormhole:0',
-        'https://localhost',
-        'http://user:pass@localhost:666',
-        'http://user:pass@localhost:0',
-        'http://user:pass@localhost',
-    ];
+    expect(proxyConfig.getProtocols()).toEqual(['http', 'https']);
 
-    proxyUrls.forEach(url => {
-        it(`test proxy transforming: ${url}`, () => {
-            const proxy = new ProxyConfig(transformToSdkProxyOptions(url, '', true, ''));
-            expect(proxy.getProxyUrl()).toEqual(url);
-        });
+    expect(proxyConfig.getProxyUrl()).toEqual('https://proxy_username:proxy_password@proxy.com:8080');
+
+    expect(proxyConfig.test('http://a.example.com:80/a')).toBeTruthy();
+
+    const configList = new ProxyConfigList<ProxyConfig>(undefined, []);
+    configList.add(proxyConfig);
+    configList.add(
+      new ProxyConfig({
+        match: 'https://*.example.com:80/*',
+        host: 'proxy.com',
+        port: 8080,
+        tunnel: true,
+        disabled: false,
+        authenticate: true,
+        username: 'proxy_username',
+        password: 'proxy_password',
+        protocol: 'https:',
+      }),
+    );
+
+    const matchedProxyConfigDef = configList.resolve(new Url('http://sub.example.com:80/path'));
+    expect(matchedProxyConfigDef?.host).toEqual('proxy.com');
+  });
+
+  const proxyUrls = [
+    'http://wormhole',
+    'http://wormhole:0',
+    'https://localhost',
+    'http://user:pass@localhost:666',
+    'http://user:pass@localhost:0',
+    'http://user:pass@localhost',
+  ];
+
+  proxyUrls.forEach(url => {
+    it(`test proxy transforming: ${url}`, () => {
+      const proxy = new ProxyConfig(transformToSdkProxyOptions(url, '', true, ''));
+      expect(proxy.getProxyUrl()).toEqual(url);
     });
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/request.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/request.test.ts
index 0d92c419c4..e4f3897c69 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/request.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/request.test.ts
@@ -1,156 +1,154 @@
 import { describe, expect, it } from 'vitest';
 
-import type { Header} from '../headers';
+import type { Header } from '../headers';
 import { HeaderList } from '../headers';
-import type { RequestBodyOptions} from '../request';
+import type { RequestBodyOptions } from '../request';
 import { calculatePayloadSize, mergeRequestBody, Request, RequestBody, toScriptRequestBody } from '../request';
 
 describe('test request and response objects', () => {
-    it('test RequestBody methods', () => {
-        const reqBody = new RequestBody({
-            mode: 'urlencoded',
-            formdata: [
-                { key: 'formDataKey', value: 'formDataValue' },
-            ],
-            urlencoded: [
-                { key: 'urlencodedKey', value: 'urlencodedValue' },
-            ],
-            options: {},
-        });
-
-        expect(reqBody.toString()).toEqual('urlencodedKey=urlencodedValue');
-
-        reqBody.update({ mode: 'file', file: 'file content here' });
-        expect(reqBody.toString()).toEqual('file content here');
+  it('test RequestBody methods', () => {
+    const reqBody = new RequestBody({
+      mode: 'urlencoded',
+      formdata: [{ key: 'formDataKey', value: 'formDataValue' }],
+      urlencoded: [{ key: 'urlencodedKey', value: 'urlencodedValue' }],
+      options: {},
     });
 
-    it('test Request methods', () => {
-        const req = new Request({
-            name: 'myReq',
-            url: 'https://hostname.com/path',
-            method: 'GET',
-            header: [
-                { key: 'header1', value: 'val1' },
-                { key: 'header2', value: 'val2' },
-            ],
-            body: {
-                mode: 'raw',
-                raw: 'body content',
-            },
-            auth: {
-                type: 'basic',
-                basic: [
-                    { key: 'username', value: 'myname' },
-                    { key: 'password', value: 'mypwd' },
-                ],
-            },
-            proxy: undefined,
-            certificate: undefined,
-        });
+    expect(reqBody.toString()).toEqual('urlencodedKey=urlencodedValue');
 
-        expect(req.name).toEqual('myReq');
+    reqBody.update({ mode: 'file', file: 'file content here' });
+    expect(reqBody.toString()).toEqual('file content here');
+  });
 
-        req.addHeader({ key: 'newHeader', value: 'newValue' });
-        expect(req.headers.count()).toEqual(3);
-        req.removeHeader('notExist', { ignoreCase: false });
-        expect(req.headers.count()).toEqual(3);
-        req.removeHeader('NEWHEADER', { ignoreCase: false });
-        expect(req.headers.count()).toEqual(3);
-        req.removeHeader('NEWHEADER', { ignoreCase: true });
-        expect(req.headers.count()).toEqual(2);
-
-        req.upsertHeader({ key: 'header1', value: 'new_val1' });
-        expect(req.getHeaders({
-            ignoreCase: true,
-            enabled: true,
-            multiValue: true,
-            sanitizeKeys: true,
-        })).toEqual({
-            header1: ['new_val1'],
-            header2: ['val2'],
-        });
-
-        const req2 = req.clone();
-        expect(req2.toJSON()).toEqual(req.toJSON());
+  it('test Request methods', () => {
+    const req = new Request({
+      name: 'myReq',
+      url: 'https://hostname.com/path',
+      method: 'GET',
+      header: [
+        { key: 'header1', value: 'val1' },
+        { key: 'header2', value: 'val2' },
+      ],
+      body: {
+        mode: 'raw',
+        raw: 'body content',
+      },
+      auth: {
+        type: 'basic',
+        basic: [
+          { key: 'username', value: 'myname' },
+          { key: 'password', value: 'mypwd' },
+        ],
+      },
+      proxy: undefined,
+      certificate: undefined,
     });
 
-    it('test Request body transforming', () => {
-        const bodies = [
-            {
-                mimeType: 'text/plain',
-                text: 'rawContent',
-            },
-            {
-                mimeType: 'application/octet-stream',
-                fileName: 'path/to/file',
-            },
-            {
-                mimeType: 'application/x-www-form-urlencoded',
-                params: [
-                    { name: 'k1', value: 'v1' },
-                    { name: 'k2', value: 'v2' },
-                ],
-            },
-            {
-                mimeType: 'application/json',
-                text: `{
+    expect(req.name).toEqual('myReq');
+
+    req.addHeader({ key: 'newHeader', value: 'newValue' });
+    expect(req.headers.count()).toEqual(3);
+    req.removeHeader('notExist', { ignoreCase: false });
+    expect(req.headers.count()).toEqual(3);
+    req.removeHeader('NEWHEADER', { ignoreCase: false });
+    expect(req.headers.count()).toEqual(3);
+    req.removeHeader('NEWHEADER', { ignoreCase: true });
+    expect(req.headers.count()).toEqual(2);
+
+    req.upsertHeader({ key: 'header1', value: 'new_val1' });
+    expect(
+      req.getHeaders({
+        ignoreCase: true,
+        enabled: true,
+        multiValue: true,
+        sanitizeKeys: true,
+      }),
+    ).toEqual({
+      header1: ['new_val1'],
+      header2: ['val2'],
+    });
+
+    const req2 = req.clone();
+    expect(req2.toJSON()).toEqual(req.toJSON());
+  });
+
+  it('test Request body transforming', () => {
+    const bodies = [
+      {
+        mimeType: 'text/plain',
+        text: 'rawContent',
+      },
+      {
+        mimeType: 'application/octet-stream',
+        fileName: 'path/to/file',
+      },
+      {
+        mimeType: 'application/x-www-form-urlencoded',
+        params: [
+          { name: 'k1', value: 'v1' },
+          { name: 'k2', value: 'v2' },
+        ],
+      },
+      {
+        mimeType: 'application/json',
+        text: `{
                     query: 'query',
                     operationName: 'operation',
                     variables: 'var',
                 }`,
-            },
-            {
-                mimeType: 'image/gif',
-                fileName: '/path/to/image',
-            },
-            {
-                mimeType: 'multipart/form-data',
-                params: [
-                    { name: 'k1', type: 'text', value: 'v1' },
-                    { name: 'k2', type: 'file', value: '/path/to/image' },
-                ],
-            },
-        ];
-
-        bodies.forEach(body => {
-            const originalReqBody = body;
-            const scriptReqBody = new RequestBody(toScriptRequestBody(body));
-            expect(mergeRequestBody(scriptReqBody, originalReqBody)).toEqual(originalReqBody);
-        });
-    });
-
-    const reqBodyTestCases: { body: RequestBodyOptions; headers: HeaderList<Header>; expectedTotal: number }[] = [
-        {
-            body: {
-                mode: 'raw',
-                raw: '1',
-            },
-            headers: new HeaderList<Header>(undefined, []),
-            expectedTotal: 1,
-        },
-        {
-            body: {
-                mode: 'raw',
-                raw: '😎',
-            },
-            headers: new HeaderList<Header>(undefined, []),
-            expectedTotal: 4,
-        },
-        {
-            body: {
-                mode: 'raw',
-                raw: '睡',
-            },
-            headers: new HeaderList<Header>(undefined, []),
-            expectedTotal: 3,
-        },
+      },
+      {
+        mimeType: 'image/gif',
+        fileName: '/path/to/image',
+      },
+      {
+        mimeType: 'multipart/form-data',
+        params: [
+          { name: 'k1', type: 'text', value: 'v1' },
+          { name: 'k2', type: 'file', value: '/path/to/image' },
+        ],
+      },
     ];
 
-    reqBodyTestCases.forEach(({ body, headers, expectedTotal }) => {
-        it(`test calculatePayloadSize: ${body.raw}`, () => {
-            const reqSize = calculatePayloadSize(new RequestBody(body).toString(), headers);
-
-            expect(reqSize.total).toEqual(expectedTotal);
-        });
+    bodies.forEach(body => {
+      const originalReqBody = body;
+      const scriptReqBody = new RequestBody(toScriptRequestBody(body));
+      expect(mergeRequestBody(scriptReqBody, originalReqBody)).toEqual(originalReqBody);
     });
+  });
+
+  const reqBodyTestCases: { body: RequestBodyOptions; headers: HeaderList<Header>; expectedTotal: number }[] = [
+    {
+      body: {
+        mode: 'raw',
+        raw: '1',
+      },
+      headers: new HeaderList<Header>(undefined, []),
+      expectedTotal: 1,
+    },
+    {
+      body: {
+        mode: 'raw',
+        raw: '😎',
+      },
+      headers: new HeaderList<Header>(undefined, []),
+      expectedTotal: 4,
+    },
+    {
+      body: {
+        mode: 'raw',
+        raw: '睡',
+      },
+      headers: new HeaderList<Header>(undefined, []),
+      expectedTotal: 3,
+    },
+  ];
+
+  reqBodyTestCases.forEach(({ body, headers, expectedTotal }) => {
+    it(`test calculatePayloadSize: ${body.raw}`, () => {
+      const reqSize = calculatePayloadSize(new RequestBody(body).toString(), headers);
+
+      expect(reqSize.total).toEqual(expectedTotal);
+    });
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/response.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/response.test.ts
index e595796a7c..a1fd91417f 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/response.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/response.test.ts
@@ -4,91 +4,91 @@ import { Request } from '../request';
 import { Response } from '../response';
 
 describe('test request and response objects', () => {
-    it('test Response methods', () => {
-        const req = new Request({
-            url: 'https://hostname.com/path',
-            method: 'GET',
-            header: [
-                { key: 'header1', value: 'val1' },
-                { key: 'header2', value: 'val2' },
-            ],
-            body: {
-                mode: 'raw',
-                raw: '{"key": 888}',
-            },
-            auth: {
-                type: 'basic',
-                basic: [
-                    { key: 'username', value: 'myname' },
-                    { key: 'password', value: 'mypwd' },
-                ],
-            },
-            proxy: undefined,
-            certificate: undefined,
-        });
-
-        const resp = new Response({
-            code: 200,
-            reason: 'OK',
-            header: [
-                { key: 'header1', value: 'val1' },
-                { key: 'header2', value: 'val2' },
-                { key: 'Content-Length', value: '100' },
-                { key: 'Content-Disposition', value: 'attachment; filename="filename.txt"' },
-                { key: 'Content-Type', value: 'text/plain; charset=utf-8' },
-            ],
-            cookie: [
-                { key: 'header1', value: 'val1' },
-                { key: 'header2', value: 'val2' },
-            ],
-            body: '{"key": 888}',
-            stream: undefined,
-            responseTime: 100,
-            originalRequest: req,
-        });
-
-        // TODO: this will work after PropertyList.one is improved
-        // expect(resp.size()).toBe(100);
-
-        expect(resp.json()).toEqual({
-            key: 888,
-        });
-        expect(resp.contentInfo()).toEqual({
-            charset: 'utf-8',
-            contentType: 'text/plain; charset=utf-8',
-            fileExtension: 'txt',
-            fileName: 'filename',
-            mimeFormat: '',
-            mimeType: 'text/plain',
-        });
-
-        // extended assertion chains
-        resp.to.have.status(200);
-        resp.to.have.status('OK');
-        resp.to.have.header('header1');
-        resp.to.have.jsonBody({ 'key': 888 });
-        resp.to.have.body('{"key": 888}');
-        resp.to.have.jsonSchema({
-            type: 'object',
-            properties: {
-                key: { type: 'integer' },
-            },
-            required: ['key'],
-            additionalProperties: false,
-        });
-
-        resp.to.not.have.status(201);
-        resp.to.not.have.status('NOT FOUND');
-        resp.to.not.have.header('header_nonexist');
-        resp.to.not.have.jsonBody({ 'key': 777 });
-        resp.to.not.have.body('{"key": 777}');
-        resp.to.not.have.jsonSchema({
-            type: 'object',
-            properties: {
-                keyNoExist: { type: 'integer' },
-            },
-            required: ['keyNoExist'],
-            additionalProperties: false,
-        });
+  it('test Response methods', () => {
+    const req = new Request({
+      url: 'https://hostname.com/path',
+      method: 'GET',
+      header: [
+        { key: 'header1', value: 'val1' },
+        { key: 'header2', value: 'val2' },
+      ],
+      body: {
+        mode: 'raw',
+        raw: '{"key": 888}',
+      },
+      auth: {
+        type: 'basic',
+        basic: [
+          { key: 'username', value: 'myname' },
+          { key: 'password', value: 'mypwd' },
+        ],
+      },
+      proxy: undefined,
+      certificate: undefined,
     });
+
+    const resp = new Response({
+      code: 200,
+      reason: 'OK',
+      header: [
+        { key: 'header1', value: 'val1' },
+        { key: 'header2', value: 'val2' },
+        { key: 'Content-Length', value: '100' },
+        { key: 'Content-Disposition', value: 'attachment; filename="filename.txt"' },
+        { key: 'Content-Type', value: 'text/plain; charset=utf-8' },
+      ],
+      cookie: [
+        { key: 'header1', value: 'val1' },
+        { key: 'header2', value: 'val2' },
+      ],
+      body: '{"key": 888}',
+      stream: undefined,
+      responseTime: 100,
+      originalRequest: req,
+    });
+
+    // TODO: this will work after PropertyList.one is improved
+    // expect(resp.size()).toBe(100);
+
+    expect(resp.json()).toEqual({
+      key: 888,
+    });
+    expect(resp.contentInfo()).toEqual({
+      charset: 'utf-8',
+      contentType: 'text/plain; charset=utf-8',
+      fileExtension: 'txt',
+      fileName: 'filename',
+      mimeFormat: '',
+      mimeType: 'text/plain',
+    });
+
+    // extended assertion chains
+    resp.to.have.status(200);
+    resp.to.have.status('OK');
+    resp.to.have.header('header1');
+    resp.to.have.jsonBody({ key: 888 });
+    resp.to.have.body('{"key": 888}');
+    resp.to.have.jsonSchema({
+      type: 'object',
+      properties: {
+        key: { type: 'integer' },
+      },
+      required: ['key'],
+      additionalProperties: false,
+    });
+
+    resp.to.not.have.status(201);
+    resp.to.not.have.status('NOT FOUND');
+    resp.to.not.have.header('header_nonexist');
+    resp.to.not.have.jsonBody({ key: 777 });
+    resp.to.not.have.body('{"key": 777}');
+    resp.to.not.have.jsonSchema({
+      type: 'object',
+      properties: {
+        keyNoExist: { type: 'integer' },
+      },
+      required: ['keyNoExist'],
+      additionalProperties: false,
+    });
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/urls.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/urls.test.ts
index a4f34b44a6..66e14882cb 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/urls.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/urls.test.ts
@@ -4,345 +4,342 @@ import { QueryParam, Url, UrlMatchPattern } from '../urls';
 import { Variable } from '../variables';
 
 describe('test Url object', () => {
-    it('test QueryParam', () => {
-        const queryParam = new QueryParam({
-            key: 'uname',
-            value: 'patrick star',
-        });
-
-        expect(queryParam.toString()).toEqual('uname=patrick+star');
-
-        queryParam.update('uname=peter+parker');
-        expect(queryParam.toString()).toEqual('uname=peter+parker');
-
-        expect(
-            QueryParam.unparseSingle({ key: 'uname', value: 'patrick star' })
-        ).toEqual('uname=patrick+star');
-
-        expect(
-            QueryParam.unparse({ uname: 'patrick star', password: '123' })
-        ).toEqual('uname=patrick+star&password=123');
-
-        expect(
-            QueryParam.parseSingle('uname=patrick+star')
-        ).toEqual({ key: 'uname', value: 'patrick star' });
-
-        expect(
-            QueryParam.parse('uname=patrick+star&password=123')
-        ).toEqual([{ 'key': 'uname', 'value': 'patrick star' }, { 'key': 'password', 'value': '123' }]);
+  it('test QueryParam', () => {
+    const queryParam = new QueryParam({
+      key: 'uname',
+      value: 'patrick star',
     });
 
-    it('test Url methods', () => {
-        const url = new Url({
-            auth: {
-                username: 'usernameValue',
-                password: 'passwordValue',
-            },
-            hash: 'hashValue',
-            host: ['hostValue', 'com'],
-            path: ['pathLevel1', 'pathLevel2'],
-            port: '777',
-            protocol: 'https:',
-            query: [
-                new QueryParam({ key: 'key1', value: 'value1' }),
-                new QueryParam({ key: 'key2', value: 'value2' }),
-                new QueryParam({ key: 'key3', value: 'value3' }),
-            ],
-            variables: [
-                new Variable({ key: 'varKey', value: 'varValue' }),
-            ],
-        });
+    expect(queryParam.toString()).toEqual('uname=patrick+star');
 
-        // expect(url.getHost()).toEqual('hostValue.com');
-        expect(url.getPath()).toEqual('/pathLevel1/pathLevel2');
+    queryParam.update('uname=peter+parker');
+    expect(queryParam.toString()).toEqual('uname=peter+parker');
 
-        expect(url.getQueryString()).toEqual('key1=value1&key2=value2&key3=value3');
-        expect(url.getPathWithQuery()).toEqual('/pathLevel1/pathLevel2?key1=value1&key2=value2&key3=value3');
-        expect(url.getRemote(true)).toEqual('hostvalue.com:777');
-        expect(url.getRemote(false)).toEqual('hostvalue.com:777'); // TODO: add more cases
+    expect(QueryParam.unparseSingle({ key: 'uname', value: 'patrick star' })).toEqual('uname=patrick+star');
 
-        url.removeQueryParams([
-            new QueryParam({ key: 'key1', value: 'value1' }),
-        ]);
-        url.removeQueryParams('key3');
-        expect(url.getQueryString()).toEqual('key2=value2');
-        expect(url.toString()).toEqual('https://usernameValue:passwordValue@hostvalue.com:777/pathLevel1/pathLevel2?key2=value2#hashValue');
+    expect(QueryParam.unparse({ uname: 'patrick star', password: '123' })).toEqual('uname=patrick+star&password=123');
 
-        const url2 = new Url('https://usernameValue:passwordValue@hostValue.com:777/pathLevel1/pathLevel2?key1=value1&key2=value2#hashValue');
-        expect(url2.getHost()).toEqual('hostvalue.com');
-        expect(url2.getPath()).toEqual('/pathLevel1/pathLevel2');
-        expect(url2.getQueryString()).toEqual('key1=value1&key2=value2');
-        expect(url2.getPathWithQuery()).toEqual('/pathLevel1/pathLevel2?key1=value1&key2=value2');
-        expect(url2.getRemote(true)).toEqual('hostvalue.com:777');
-        expect(url2.getRemote(false)).toEqual('hostvalue.com:777'); // TODO: add more cases
+    expect(QueryParam.parseSingle('uname=patrick+star')).toEqual({ key: 'uname', value: 'patrick star' });
 
-        url2.removeQueryParams([
-            new QueryParam({ key: 'key1', value: 'value1' }),
-        ]);
-        expect(url2.getQueryString()).toEqual('key2=value2');
-        expect(url2.toString()).toEqual('https://usernameValue:passwordValue@hostvalue.com:777/pathLevel1/pathLevel2?key2=value2#hashValue');
+    expect(QueryParam.parse('uname=patrick+star&password=123')).toEqual([
+      { key: 'uname', value: 'patrick star' },
+      { key: 'password', value: '123' },
+    ]);
+  });
+
+  it('test Url methods', () => {
+    const url = new Url({
+      auth: {
+        username: 'usernameValue',
+        password: 'passwordValue',
+      },
+      hash: 'hashValue',
+      host: ['hostValue', 'com'],
+      path: ['pathLevel1', 'pathLevel2'],
+      port: '777',
+      protocol: 'https:',
+      query: [
+        new QueryParam({ key: 'key1', value: 'value1' }),
+        new QueryParam({ key: 'key2', value: 'value2' }),
+        new QueryParam({ key: 'key3', value: 'value3' }),
+      ],
+      variables: [new Variable({ key: 'varKey', value: 'varValue' })],
     });
 
-    it('test Url static methods', () => {
-        // static methods
-        const urlStr = 'https://myhost.com/path1/path2';
-        const urlOptions = Url.parse(urlStr);
-        const urlObj = new Url(urlOptions || '');
+    // expect(url.getHost()).toEqual('hostValue.com');
+    expect(url.getPath()).toEqual('/pathLevel1/pathLevel2');
 
-        expect(urlObj.toString()).toEqual(urlStr);
+    expect(url.getQueryString()).toEqual('key1=value1&key2=value2&key3=value3');
+    expect(url.getPathWithQuery()).toEqual('/pathLevel1/pathLevel2?key1=value1&key2=value2&key3=value3');
+    expect(url.getRemote(true)).toEqual('hostvalue.com:777');
+    expect(url.getRemote(false)).toEqual('hostvalue.com:777'); // TODO: add more cases
+
+    url.removeQueryParams([new QueryParam({ key: 'key1', value: 'value1' })]);
+    url.removeQueryParams('key3');
+    expect(url.getQueryString()).toEqual('key2=value2');
+    expect(url.toString()).toEqual(
+      'https://usernameValue:passwordValue@hostvalue.com:777/pathLevel1/pathLevel2?key2=value2#hashValue',
+    );
+
+    const url2 = new Url(
+      'https://usernameValue:passwordValue@hostValue.com:777/pathLevel1/pathLevel2?key1=value1&key2=value2#hashValue',
+    );
+    expect(url2.getHost()).toEqual('hostvalue.com');
+    expect(url2.getPath()).toEqual('/pathLevel1/pathLevel2');
+    expect(url2.getQueryString()).toEqual('key1=value1&key2=value2');
+    expect(url2.getPathWithQuery()).toEqual('/pathLevel1/pathLevel2?key1=value1&key2=value2');
+    expect(url2.getRemote(true)).toEqual('hostvalue.com:777');
+    expect(url2.getRemote(false)).toEqual('hostvalue.com:777'); // TODO: add more cases
+
+    url2.removeQueryParams([new QueryParam({ key: 'key1', value: 'value1' })]);
+    expect(url2.getQueryString()).toEqual('key2=value2');
+    expect(url2.toString()).toEqual(
+      'https://usernameValue:passwordValue@hostvalue.com:777/pathLevel1/pathLevel2?key2=value2#hashValue',
+    );
+  });
+
+  it('test Url static methods', () => {
+    // static methods
+    const urlStr = 'https://myhost.com/path1/path2';
+    const urlOptions = Url.parse(urlStr);
+    const urlObj = new Url(urlOptions || '');
+
+    expect(urlObj.toString()).toEqual(urlStr);
+  });
+
+  it('test Url property accessing', () => {
+    const urlStr = 'https://user:pwd@hehe.com:6666/path1/path2?q1=@&q2=:#myHash';
+    const urlObj = new Url(urlStr);
+
+    expect(urlObj.auth).toEqual({ username: 'user', password: 'pwd' });
+    expect(urlObj.hash).toEqual('myHash');
+    expect(urlObj.host).toEqual(['hehe', 'com']);
+    expect(urlObj.path).toEqual(['path1', 'path2']);
+    expect(urlObj.port).toEqual('6666');
+    expect(urlObj.protocol).toEqual('https:');
+
+    const queryParams = urlObj.query.toObject();
+    expect(queryParams[0].key).toEqual('q1');
+    expect(queryParams[0].value).toEqual('@');
+    expect(queryParams[1].key).toEqual('q2');
+    expect(queryParams[1].value).toEqual(':');
+  });
+
+  const urlParsingTests = [
+    {
+      testName: 'interal url',
+      url: 'inso/',
+    },
+    {
+      testName: 'interal url with protocol',
+      url: 'http://inso/',
+    },
+    {
+      testName: 'interal url with auth',
+      url: 'http://name:pwd@inso/',
+    },
+    {
+      testName: 'interal url with auth without protocol',
+      url: 'name:pwd@inso/',
+    },
+    {
+      testName: 'ip address',
+      url: 'http://127.0.0.1/',
+    },
+    {
+      testName: 'localhost',
+      url: 'https://localhost/',
+    },
+    {
+      testName: 'url with query params',
+      url: 'localhost/?k=v',
+    },
+    {
+      testName: 'url with hash',
+      url: 'localhost/#myHash',
+    },
+    {
+      testName: 'url with query params and hash',
+      url: 'localhost/?k=v#myHash',
+    },
+    {
+      testName: 'url with query params and hash',
+      url: 'localhost/?k={{ myValue }}',
+    },
+    {
+      testName: 'url with query params and hash',
+      url: 'localhost/#My{{ hashValue }}',
+    },
+    {
+      testName: 'url with path params',
+      url: 'inso.com/:path1/:path',
+    },
+    {
+      testName: 'url with tags and path params',
+      url: '{{ _.baseUrl }}/:path1/:path',
+    },
+    {
+      testName: 'hybrid of path params and tags',
+      url: '{{ baseUrl }}/:path_{{ _.pathSuffix }}',
+    },
+    {
+      testName: '@ is used in path',
+      url: '{{ baseUrl }}/tom@any.com',
+    },
+    {
+      testName: '@ is used in auth and path',
+      url: 'user:pass@a.com/tom@any.com',
+    },
+    {
+      testName: '@ is used in auth',
+      url: 'user:pass@a.com/',
+    },
+    {
+      testName: '@ is used in path with path params, targs and hash',
+      url: '{{ baseUrl }}/:path__{{ _.pathSuffix }}/tom@any.com#hash',
+    },
+  ];
+
+  urlParsingTests.forEach(testCase => {
+    it(`parsing url: ${testCase.testName}`, () => {
+      const urlObj = new Url(testCase.url);
+      expect(urlObj.toString()).toEqual(testCase.url);
     });
+  });
 
-    it('test Url property accessing', () => {
-        const urlStr = 'https://user:pwd@hehe.com:6666/path1/path2?q1=@&q2=:#myHash';
-        const urlObj = new Url(urlStr);
+  const additionalCases = [
+    {
+      origin: 'http://{{ urlWithTagOnly}}',
+      expected: 'http://{{ urlWithTagOnly}}',
+    },
+    {
+      origin: "http://httpbin.org/{{ method}}/{% uuid 'v4' %}",
+      expected: "http://httpbin.org/{{ method}}/{% uuid 'v4' %}",
+    },
+    {
+      origin: 'my-domain',
+      expected: 'my-domain',
+    },
+    {
+      origin: 'http://my-domain',
+      expected: 'http://my-domain',
+    },
+    {
+      origin: 'https://youdomain/api/validateuser/abc@.contos.com',
+      expected: 'https://youdomain/api/validateuser/abc@.contos.com',
+    },
+    {
+      origin:
+        'https://s3.amazonaws.com/finance-department-bucket/2022/tax-certificate.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA3SGQVQG7FGA6KKA6/20221104/us-east-1/s3/aws4_request&X-Amz-Date=20221104T140227Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=b228dbec8c1008c80c162e1210e4503dceead1e4d4751b4d9787314fd6da4d55',
+      expected:
+        'https://s3.amazonaws.com/finance-department-bucket/2022/tax-certificate.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA3SGQVQG7FGA6KKA6/20221104/us-east-1/s3/aws4_request&X-Amz-Date=20221104T140227Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=b228dbec8c1008c80c162e1210e4503dceead1e4d4751b4d9787314fd6da4d55',
+    },
+    {
+      origin: 'https://hehe.com',
+      expected: 'https://hehe.com',
+    },
+    {
+      origin: 'https://2001:db8:3333:4444:5555:6666:7777:8888',
+      expected: 'https://2001:db8:3333:4444:5555:6666:7777:8888',
+    },
+    {
+      origin: 'http://127.0.0.1:6666',
+      expected: 'http://127.0.0.1:6666',
+    },
+    {
+      origin: 'http://ihave@:inhostname.com',
+      expected: 'http://ihave@:inhostname.com',
+    },
+    {
+      origin: "https://{{ _['examplehost']}}",
+      expected: "https://{{ _['examplehost']}}",
+    },
+    {
+      origin: "http://{{ _['a']['b']['c']['url'] }}",
+      expected: "http://{{ _['a']['b']['c']['url'] }}",
+    },
+    {
+      origin: 'invalid?id=@:/&name=张三',
+      expected: 'invalid?id=@:/&name=张三',
+    },
+  ];
 
-        expect(urlObj.auth).toEqual({ username: 'user', password: 'pwd' });
-        expect(urlObj.hash).toEqual('myHash');
-        expect(urlObj.host).toEqual(['hehe', 'com']);
-        expect(urlObj.path).toEqual(['path1', 'path2']);
-        expect(urlObj.port).toEqual('6666');
-        expect(urlObj.protocol).toEqual('https:');
-
-        const queryParams = urlObj.query.toObject();
-        expect(queryParams[0].key).toEqual('q1');
-        expect(queryParams[0].value).toEqual('@');
-        expect(queryParams[1].key).toEqual('q2');
-        expect(queryParams[1].value).toEqual(':');
-    });
-
-    const urlParsingTests = [
-        {
-            testName: 'interal url',
-            url: 'inso/',
-        },
-        {
-            testName: 'interal url with protocol',
-            url: 'http://inso/',
-        },
-        {
-            testName: 'interal url with auth',
-            url: 'http://name:pwd@inso/',
-        },
-        {
-            testName: 'interal url with auth without protocol',
-            url: 'name:pwd@inso/',
-        },
-        {
-            testName: 'ip address',
-            url: 'http://127.0.0.1/',
-        },
-        {
-            testName: 'localhost',
-            url: 'https://localhost/',
-        },
-        {
-            testName: 'url with query params',
-            url: 'localhost/?k=v',
-        },
-        {
-            testName: 'url with hash',
-            url: 'localhost/#myHash',
-        },
-        {
-            testName: 'url with query params and hash',
-            url: 'localhost/?k=v#myHash',
-        },
-        {
-            testName: 'url with query params and hash',
-            url: 'localhost/?k={{ myValue }}',
-        },
-        {
-            testName: 'url with query params and hash',
-            url: 'localhost/#My{{ hashValue }}',
-        },
-        {
-            testName: 'url with path params',
-            url: 'inso.com/:path1/:path',
-        },
-        {
-            testName: 'url with tags and path params',
-            url: '{{ _.baseUrl }}/:path1/:path',
-        },
-        {
-            testName: 'hybrid of path params and tags',
-            url: '{{ baseUrl }}/:path_{{ _.pathSuffix }}',
-        },
-        {
-            testName: '@ is used in path',
-            url: '{{ baseUrl }}/tom@any.com',
-        },
-        {
-            testName: '@ is used in auth and path',
-            url: 'user:pass@a.com/tom@any.com',
-        },
-        {
-            testName: '@ is used in auth',
-            url: 'user:pass@a.com/',
-        },
-        {
-            testName: '@ is used in path with path params, targs and hash',
-            url: '{{ baseUrl }}/:path__{{ _.pathSuffix }}/tom@any.com#hash',
-        },
-    ];
-
-    urlParsingTests.forEach(testCase => {
-        it(`parsing url: ${testCase.testName}`, () => {
-            const urlObj = new Url(testCase.url);
-            expect(urlObj.toString()).toEqual(testCase.url);
-        });
-    });
-
-    const additionalCases = [
-        {
-            origin: 'http://{{ urlWithTagOnly}}',
-            expected: 'http://{{ urlWithTagOnly}}',
-        },
-        {
-            origin: "http://httpbin.org/{{ method}}/{% uuid 'v4' %}",
-            expected: "http://httpbin.org/{{ method}}/{% uuid 'v4' %}",
-        },
-        {
-            origin: 'my-domain',
-            expected: 'my-domain',
-        },
-        {
-            origin: 'http://my-domain',
-            expected: 'http://my-domain',
-        },
-        {
-            origin: 'https://youdomain/api/validateuser/abc@.contos.com',
-            expected: 'https://youdomain/api/validateuser/abc@.contos.com',
-        },
-        {
-            origin: 'https://s3.amazonaws.com/finance-department-bucket/2022/tax-certificate.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA3SGQVQG7FGA6KKA6/20221104/us-east-1/s3/aws4_request&X-Amz-Date=20221104T140227Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=b228dbec8c1008c80c162e1210e4503dceead1e4d4751b4d9787314fd6da4d55',
-            expected: 'https://s3.amazonaws.com/finance-department-bucket/2022/tax-certificate.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIA3SGQVQG7FGA6KKA6/20221104/us-east-1/s3/aws4_request&X-Amz-Date=20221104T140227Z&X-Amz-Expires=3600&X-Amz-SignedHeaders=host&X-Amz-Signature=b228dbec8c1008c80c162e1210e4503dceead1e4d4751b4d9787314fd6da4d55',
-        },
-        {
-            origin: 'https://hehe.com',
-            expected: 'https://hehe.com',
-        },
-        {
-            origin: 'https://2001:db8:3333:4444:5555:6666:7777:8888',
-            expected: 'https://2001:db8:3333:4444:5555:6666:7777:8888',
-        },
-        {
-            origin: 'http://127.0.0.1:6666',
-            expected: 'http://127.0.0.1:6666',
-        },
-        {
-            origin: 'http://ihave@:inhostname.com',
-            expected: 'http://ihave@:inhostname.com',
-        },
-        {
-            origin: "https://{{ _['examplehost']}}",
-            expected: "https://{{ _['examplehost']}}",
-        },
-        {
-            origin: "http://{{ _['a']['b']['c']['url'] }}",
-            expected: "http://{{ _['a']['b']['c']['url'] }}",
-        },
-        {
-            origin: 'invalid?id=@:/&name=张三',
-            expected: 'invalid?id=@:/&name=张三',
-        },
-    ];
-
-    additionalCases.forEach(testCase => {
-        it(`parsing url: ${testCase.origin}`, () => {
-            const urlObj = new Url(testCase.origin);
-            urlObj.addQueryParams([{ key: 'key', value: 'value' }]);
-            urlObj.removeQueryParams('key');
-            expect(urlObj.toString()).toEqual(testCase.expected);
-        });
+  additionalCases.forEach(testCase => {
+    it(`parsing url: ${testCase.origin}`, () => {
+      const urlObj = new Url(testCase.origin);
+      urlObj.addQueryParams([{ key: 'key', value: 'value' }]);
+      urlObj.removeQueryParams('key');
+      expect(urlObj.toString()).toEqual(testCase.expected);
     });
+  });
 });
 
 describe('test Url Match Pattern', () => {
-    it('test UrlMatchPattern', () => {
-        const pattern = 'http+https+custom://*.insomnia.com:80/p1/*';
-        const matchPattern = new UrlMatchPattern(pattern);
+  it('test UrlMatchPattern', () => {
+    const pattern = 'http+https+custom://*.insomnia.com:80/p1/*';
+    const matchPattern = new UrlMatchPattern(pattern);
 
-        expect(matchPattern.getProtocols()).toEqual(['http', 'https', 'custom']);
-        expect(matchPattern.testProtocol('http')).toBeTruthy();
-        expect(matchPattern.testProtocol('https')).toBeTruthy();
-        expect(matchPattern.testProtocol('custom')).toBeTruthy();
-        expect(matchPattern.testProtocol('unmatched')).toBeFalsy();
+    expect(matchPattern.getProtocols()).toEqual(['http', 'https', 'custom']);
+    expect(matchPattern.testProtocol('http')).toBeTruthy();
+    expect(matchPattern.testProtocol('https')).toBeTruthy();
+    expect(matchPattern.testProtocol('custom')).toBeTruthy();
+    expect(matchPattern.testProtocol('unmatched')).toBeFalsy();
 
-        expect(matchPattern.testHost('download.insomnia.com')).toBeTruthy();
-        expect(matchPattern.testHost('bin.download.insomnia.com')).toBeFalsy();
-        expect(matchPattern.testHost('insomnia.com')).toBeFalsy();
-        expect(matchPattern.testHost('com')).toBeFalsy();
+    expect(matchPattern.testHost('download.insomnia.com')).toBeTruthy();
+    expect(matchPattern.testHost('bin.download.insomnia.com')).toBeFalsy();
+    expect(matchPattern.testHost('insomnia.com')).toBeFalsy();
+    expect(matchPattern.testHost('com')).toBeFalsy();
 
-        expect(matchPattern.testPath('/p1/abc')).toBeTruthy();
-        expect(matchPattern.testPath('/p1/')).toBeTruthy();
-        expect(matchPattern.testPath('/p1')).toBeFalsy();
-        expect(matchPattern.testPath('/')).toBeFalsy();
-        expect(matchPattern.testPath('')).toBeFalsy();
+    expect(matchPattern.testPath('/p1/abc')).toBeTruthy();
+    expect(matchPattern.testPath('/p1/')).toBeTruthy();
+    expect(matchPattern.testPath('/p1')).toBeFalsy();
+    expect(matchPattern.testPath('/')).toBeFalsy();
+    expect(matchPattern.testPath('')).toBeFalsy();
 
-        expect(matchPattern.testPort('80', 'https')).toBeTruthy();
-        expect(matchPattern.testPort('443', 'https')).toBeFalsy();
-        expect(matchPattern.testPort('80', 'http')).toBeTruthy();
-        expect(matchPattern.testPort('80', 'unmatched')).toBeFalsy();
-    });
+    expect(matchPattern.testPort('80', 'https')).toBeTruthy();
+    expect(matchPattern.testPort('443', 'https')).toBeFalsy();
+    expect(matchPattern.testPort('80', 'http')).toBeTruthy();
+    expect(matchPattern.testPort('80', 'unmatched')).toBeFalsy();
+  });
 
-    it('test UrlMatchPattern with no protocol', () => {
-        const pattern = '*.insomnia.com/p1/*';
-        try {
-            const matchPattern = new UrlMatchPattern(pattern);
-            matchPattern.testProtocol('http');
-        } catch (e: any) {
-            expect(e.message).toContain('UrlMatchPattern: protocol is not specified');
-        }
-    });
+  it('test UrlMatchPattern with no protocol', () => {
+    const pattern = '*.insomnia.com/p1/*';
+    try {
+      const matchPattern = new UrlMatchPattern(pattern);
+      matchPattern.testProtocol('http');
+    } catch (e: any) {
+      expect(e.message).toContain('UrlMatchPattern: protocol is not specified');
+    }
+  });
 
-    it('test UrlMatchPattern with no port', () => {
-        const pattern = 'http+https+custom://*.insomnia.com/p1/*';
-        const matchPattern = new UrlMatchPattern(pattern);
+  it('test UrlMatchPattern with no port', () => {
+    const pattern = 'http+https+custom://*.insomnia.com/p1/*';
+    const matchPattern = new UrlMatchPattern(pattern);
 
-        expect(matchPattern.getProtocols()).toEqual(['http', 'https', 'custom']);
-        expect(matchPattern.testProtocol('http')).toBeTruthy();
-        expect(matchPattern.testProtocol('https')).toBeTruthy();
-        expect(matchPattern.testProtocol('custom')).toBeTruthy();
-        expect(matchPattern.testProtocol('unmatched')).toBeFalsy();
+    expect(matchPattern.getProtocols()).toEqual(['http', 'https', 'custom']);
+    expect(matchPattern.testProtocol('http')).toBeTruthy();
+    expect(matchPattern.testProtocol('https')).toBeTruthy();
+    expect(matchPattern.testProtocol('custom')).toBeTruthy();
+    expect(matchPattern.testProtocol('unmatched')).toBeFalsy();
 
-        expect(matchPattern.testHost('download.insomnia.com')).toBeTruthy();
-        expect(matchPattern.testHost('bin.download.insomnia.com')).toBeFalsy();
-        expect(matchPattern.testHost('insomnia.com')).toBeFalsy();
-        expect(matchPattern.testHost('com')).toBeFalsy();
+    expect(matchPattern.testHost('download.insomnia.com')).toBeTruthy();
+    expect(matchPattern.testHost('bin.download.insomnia.com')).toBeFalsy();
+    expect(matchPattern.testHost('insomnia.com')).toBeFalsy();
+    expect(matchPattern.testHost('com')).toBeFalsy();
 
-        expect(matchPattern.testPath('/p1/abc')).toBeTruthy();
-        expect(matchPattern.testPath('/p1/')).toBeTruthy();
-        expect(matchPattern.testPath('/p1')).toBeFalsy();
-        expect(matchPattern.testPath('/')).toBeFalsy();
-        expect(matchPattern.testPath('')).toBeFalsy();
+    expect(matchPattern.testPath('/p1/abc')).toBeTruthy();
+    expect(matchPattern.testPath('/p1/')).toBeTruthy();
+    expect(matchPattern.testPath('/p1')).toBeFalsy();
+    expect(matchPattern.testPath('/')).toBeFalsy();
+    expect(matchPattern.testPath('')).toBeFalsy();
 
-        expect(matchPattern.testPort('443', 'https')).toBeTruthy();
-        expect(matchPattern.testPort('80', 'http')).toBeTruthy();
-        expect(matchPattern.testPort('443', 'http')).toBeFalsy();
-        expect(matchPattern.testPort('80', 'https')).toBeFalsy();
-    });
+    expect(matchPattern.testPort('443', 'https')).toBeTruthy();
+    expect(matchPattern.testPort('80', 'http')).toBeTruthy();
+    expect(matchPattern.testPort('443', 'http')).toBeFalsy();
+    expect(matchPattern.testPort('80', 'https')).toBeFalsy();
+  });
 
-    it('test UrlMatchPattern with no path', () => {
-        const pattern = 'http+https+custom://*.insomnia.com';
-        const matchPattern = new UrlMatchPattern(pattern);
+  it('test UrlMatchPattern with no path', () => {
+    const pattern = 'http+https+custom://*.insomnia.com';
+    const matchPattern = new UrlMatchPattern(pattern);
 
-        expect(matchPattern.getProtocols()).toEqual(['http', 'https', 'custom']);
-        expect(matchPattern.testProtocol('http')).toBeTruthy();
-        expect(matchPattern.testProtocol('https')).toBeTruthy();
-        expect(matchPattern.testProtocol('custom')).toBeTruthy();
-        expect(matchPattern.testProtocol('unmatched')).toBeFalsy();
+    expect(matchPattern.getProtocols()).toEqual(['http', 'https', 'custom']);
+    expect(matchPattern.testProtocol('http')).toBeTruthy();
+    expect(matchPattern.testProtocol('https')).toBeTruthy();
+    expect(matchPattern.testProtocol('custom')).toBeTruthy();
+    expect(matchPattern.testProtocol('unmatched')).toBeFalsy();
 
-        expect(matchPattern.testHost('download.insomnia.com')).toBeTruthy();
-        expect(matchPattern.testHost('bin.download.insomnia.com')).toBeFalsy();
-        expect(matchPattern.testHost('insomnia.com')).toBeFalsy();
-        expect(matchPattern.testHost('com')).toBeFalsy();
+    expect(matchPattern.testHost('download.insomnia.com')).toBeTruthy();
+    expect(matchPattern.testHost('bin.download.insomnia.com')).toBeFalsy();
+    expect(matchPattern.testHost('insomnia.com')).toBeFalsy();
+    expect(matchPattern.testHost('com')).toBeFalsy();
 
-        expect(matchPattern.testPath('')).toBeTruthy();
-        expect(matchPattern.testPath('/')).toBeFalsy(); // it is not handled temporarily
+    expect(matchPattern.testPath('')).toBeTruthy();
+    expect(matchPattern.testPath('/')).toBeFalsy(); // it is not handled temporarily
 
-        expect(matchPattern.testPort('443', 'https')).toBeTruthy();
-        expect(matchPattern.testPort('80', 'http')).toBeTruthy();
-        expect(matchPattern.testPort('443', 'http')).toBeFalsy();
-        expect(matchPattern.testPort('80', 'https')).toBeFalsy();
-    });
+    expect(matchPattern.testPort('443', 'https')).toBeTruthy();
+    expect(matchPattern.testPort('80', 'http')).toBeTruthy();
+    expect(matchPattern.testPort('443', 'http')).toBeFalsy();
+    expect(matchPattern.testPort('80', 'https')).toBeFalsy();
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/__tests__/variables.test.ts b/packages/insomnia-scripting-environment/src/objects/__tests__/variables.test.ts
index 608883e80b..c2cdac253d 100644
--- a/packages/insomnia-scripting-environment/src/objects/__tests__/variables.test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/__tests__/variables.test.ts
@@ -3,34 +3,29 @@ import { describe, expect, it } from 'vitest';
 import { Variable, VariableList } from '../variables';
 
 describe('test Variables object', () => {
-    it('test basic operations', () => {
-
-        const variable = new Variable({
-            id: 'id',
-            key: 'key',
-            name: 'name',
-            value: 'value',
-            type: 'type',
-            disabled: false,
-        });
-
-        expect(variable.get()).toBe('value');
-        variable.set('value2');
-        expect(variable.get()).toBe('value2');
-
+  it('test basic operations', () => {
+    const variable = new Variable({
+      id: 'id',
+      key: 'key',
+      name: 'name',
+      value: 'value',
+      type: 'type',
+      disabled: false,
     });
 
-    it('VariableList operations', () => {
-        const varList = new VariableList(
-            undefined,
-            [
-                new Variable({ key: 'h1', value: 'v1' }),
-                new Variable({ key: 'h2', value: 'v2' }),
-            ]
-        );
+    expect(variable.get()).toBe('value');
+    variable.set('value2');
+    expect(variable.get()).toBe('value2');
+  });
 
-        const upserted = new Variable({ key: 'h1', value: 'v1upserted' });
-        varList.upsert(upserted);
-        expect(varList.one('h1')).toEqual(upserted);
-    });
+  it('VariableList operations', () => {
+    const varList = new VariableList(undefined, [
+      new Variable({ key: 'h1', value: 'v1' }),
+      new Variable({ key: 'h2', value: 'v2' }),
+    ]);
+
+    const upserted = new Variable({ key: 'h1', value: 'v1upserted' });
+    varList.upsert(upserted);
+    expect(varList.one('h1')).toEqual(upserted);
+  });
 });
diff --git a/packages/insomnia-scripting-environment/src/objects/async_objects.ts b/packages/insomnia-scripting-environment/src/objects/async_objects.ts
index 3db0fd1b77..137a453348 100644
--- a/packages/insomnia-scripting-environment/src/objects/async_objects.ts
+++ b/packages/insomnia-scripting-environment/src/objects/async_objects.ts
@@ -4,78 +4,73 @@ let scriptPromises = new Array<Promise<any>>();
 export const OriginalPromise = Promise;
 
 export class ProxiedPromise<T> extends Promise<T> {
-    constructor(
-        executor: (
-            resolve: (value: T | PromiseLike<T>) => void,
-            reject: (reason?: any) => void,
-        ) => void,
-    ) {
-        super(executor);
-        if (monitoring) {
-            scriptPromises.push(this);
-        }
+  constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
+    super(executor);
+    if (monitoring) {
+      scriptPromises.push(this);
     }
+  }
 
-    static override all(promises: Promise<any>[]) {
-        const promise = super.all(promises);
-        if (monitoring) {
-            scriptPromises.push(promise);
-        }
-        return promise;
+  static override all(promises: Promise<any>[]) {
+    const promise = super.all(promises);
+    if (monitoring) {
+      scriptPromises.push(promise);
     }
+    return promise;
+  }
 
-    static override allSettled(promises: Promise<any>[]) {
-        // promise will be counted in Promise.resolve
-        return super.allSettled(promises);
-    }
+  static override allSettled(promises: Promise<any>[]) {
+    // promise will be counted in Promise.resolve
+    return super.allSettled(promises);
+  }
 
-    // TODO: super.any seems not supported for the compile target (es2021)
-     
-    static any(_: Promise<any>[]) {
-        return super.reject("'super.any' not supported");
-    }
+  // TODO: super.any seems not supported for the compile target (es2021)
 
-    static override race(promises: Promise<any>[]) {
-        const promise = super.race(promises);
-        if (monitoring) {
-            scriptPromises.push(promise);
-        }
-        return promise;
-    }
+  static any(_: Promise<any>[]) {
+    return super.reject("'super.any' not supported");
+  }
 
-    static override reject(value: any) {
-        const promise = super.reject(value);
-        if (monitoring) {
-            scriptPromises.push(promise);
-        }
-        return promise;
+  static override race(promises: Promise<any>[]) {
+    const promise = super.race(promises);
+    if (monitoring) {
+      scriptPromises.push(promise);
     }
+    return promise;
+  }
 
-    static override resolve<T>(value?: T | PromiseLike<T>) {
-        const promise = super.resolve(value);
-        if (monitoring) {
-            scriptPromises.push(promise);
-        }
-        return promise;
+  static override reject(value: any) {
+    const promise = super.reject(value);
+    if (monitoring) {
+      scriptPromises.push(promise);
     }
+    return promise;
+  }
 
-    // TODO: Promise.any seems not supported for the compile target (es2021)
-     
-    static withResolvers() {
-        return super.reject("'Promise.withResolvers' not supported");
+  static override resolve<T>(value?: T | PromiseLike<T>) {
+    const promise = super.resolve(value);
+    if (monitoring) {
+      scriptPromises.push(promise);
     }
+    return promise;
+  }
+
+  // TODO: Promise.any seems not supported for the compile target (es2021)
+
+  static withResolvers() {
+    return super.reject("'Promise.withResolvers' not supported");
+  }
 }
 
 export const asyncTasksAllSettled = async () => {
-    await Promise.allSettled(scriptPromises);
-    scriptPromises = [];
+  await Promise.allSettled(scriptPromises);
+  scriptPromises = [];
 };
 
 export const stopMonitorAsyncTasks = () => {
-    monitoring = false;
+  monitoring = false;
 };
 
 export const resetAsyncTasks = async () => {
-    scriptPromises = [];
-    monitoring = true;
+  scriptPromises = [];
+  monitoring = true;
 };
diff --git a/packages/insomnia-scripting-environment/src/objects/auth.ts b/packages/insomnia-scripting-environment/src/objects/auth.ts
index ac5148ca6c..93908636e5 100644
--- a/packages/insomnia-scripting-environment/src/objects/auth.ts
+++ b/packages/insomnia-scripting-environment/src/objects/auth.ts
@@ -5,744 +5,760 @@ import { Property } from './properties';
 import { Variable, VariableList } from './variables';
 
 export type AuthOptionTypes =
-    'noauth'
-    | 'basic'
-    | 'bearer'
-    | 'jwt'
-    | 'digest'
-    | 'oauth1'
-    | 'oauth2'
-    | 'hawk'
-    | 'awsv4'
-    | 'ntlm'
-    | 'apikey'
-    | 'edgegrid'
-    | 'asap'
-    | 'netrc';
+  | 'noauth'
+  | 'basic'
+  | 'bearer'
+  | 'jwt'
+  | 'digest'
+  | 'oauth1'
+  | 'oauth2'
+  | 'hawk'
+  | 'awsv4'
+  | 'ntlm'
+  | 'apikey'
+  | 'edgegrid'
+  | 'asap'
+  | 'netrc';
 export const AuthTypes = new Set([
-    'noauth',
-    'basic',
-    'bearer',
-    'jwt',
-    'digest',
-    'oauth1',
-    'oauth2',
-    'hawk',
-    'awsv4',
-    'ntlm',
-    'apikey',
-    'edgegrid',
-    'asap',
-    'netrc',
+  'noauth',
+  'basic',
+  'bearer',
+  'jwt',
+  'digest',
+  'oauth1',
+  'oauth2',
+  'hawk',
+  'awsv4',
+  'ntlm',
+  'apikey',
+  'edgegrid',
+  'asap',
+  'netrc',
 ]);
 
 export interface AuthOption {
-    key: string;
-    value: string;
-    type?: string;
+  key: string;
+  value: string;
+  type?: string;
 }
 
 export interface OAuth2AuthOption {
-    key: string;
-    value: string | OAuth2Param[];
-    type?: string;
-};
+  key: string;
+  value: string | OAuth2Param[];
+  type?: string;
+}
 
 export interface BasicOptions {
-    password: string;
-    username: string;
-    id?: string;
+  password: string;
+  username: string;
+  id?: string;
 }
 
 export interface BearerOptions {
-    token: string;
-    id?: string;
+  token: string;
+  id?: string;
 }
 
 export interface JWTOptions {
-    secret: string;
-    algorithm: string;
-    isSecretBase64Encoded: boolean;
-    payload: string; // e.g. "{}"
-    addTokenTo: string;
-    headerPrefix: string;
-    queryParamKey: string;
-    header: string; // e.g. "{}"
-    id?: string;
+  secret: string;
+  algorithm: string;
+  isSecretBase64Encoded: boolean;
+  payload: string; // e.g. "{}"
+  addTokenTo: string;
+  headerPrefix: string;
+  queryParamKey: string;
+  header: string; // e.g. "{}"
+  id?: string;
 }
 
 export interface DigestOptions {
-    opaque: string;
-    clientNonce: string;
-    nonceCount: string;
-    qop: string;
-    nonce: string;
-    realm: string;
-    password: string;
-    username: string;
-    algorithm: string;
-    id?: string;
+  opaque: string;
+  clientNonce: string;
+  nonceCount: string;
+  qop: string;
+  nonce: string;
+  realm: string;
+  password: string;
+  username: string;
+  algorithm: string;
+  id?: string;
 }
 
 export interface OAuth1Options {
-    addEmptyParamsToSign: boolean;
-    includeBodyHash: boolean;
-    realm: string;
-    nonce: string;
-    timestamp: string;
-    verifier: string;
-    callback: string;
-    tokenSecret: string;
-    token: string;
-    consumerSecret: string;
-    consumerKey: string;
-    signatureMethod: string; // "HMAC-SHA1"
-    version: string;
-    addParamsToHeader: string;
-    id?: string;
+  addEmptyParamsToSign: boolean;
+  includeBodyHash: boolean;
+  realm: string;
+  nonce: string;
+  timestamp: string;
+  verifier: string;
+  callback: string;
+  tokenSecret: string;
+  token: string;
+  consumerSecret: string;
+  consumerKey: string;
+  signatureMethod: string; // "HMAC-SHA1"
+  version: string;
+  addParamsToHeader: string;
+  id?: string;
 }
 
 export interface OAuth2Param {
-    key: string;
-    value: string;
-    enabled: boolean;
-    send_as: string; // it follows existing naming
+  key: string;
+  value: string;
+  enabled: boolean;
+  send_as: string; // it follows existing naming
 }
 
 export interface OAuth2Options {
-    accessToken: string;
-    refreshRequestParams: OAuth2Param[];
-    tokenRequestParams: OAuth2Param[];
-    authRequestParams: OAuth2Param[];
-    refreshTokenUrl: string;
-    state: string;
-    scope: string;
-    clientSecret: string;
-    clientId: string;
-    accessTokenUrl: string;
-    authUrl: string;
-    tokenName: string;
-    addTokenTo: string;
-    code_verifier: string;
-    id?: string;
+  accessToken: string;
+  refreshRequestParams: OAuth2Param[];
+  tokenRequestParams: OAuth2Param[];
+  authRequestParams: OAuth2Param[];
+  refreshTokenUrl: string;
+  state: string;
+  scope: string;
+  clientSecret: string;
+  clientId: string;
+  accessTokenUrl: string;
+  authUrl: string;
+  tokenName: string;
+  addTokenTo: string;
+  code_verifier: string;
+  id?: string;
 }
 
 export interface HAWKOptions {
-    includePayloadHash: boolean;
-    timestamp: string;
-    delegation: string;
-    app: string;
-    extraData: string;
-    nonce: string;
-    user: string;
-    authKey: string;
-    authId: string;
-    algorithm: string;
-    id?: string;
+  includePayloadHash: boolean;
+  timestamp: string;
+  delegation: string;
+  app: string;
+  extraData: string;
+  nonce: string;
+  user: string;
+  authKey: string;
+  authId: string;
+  algorithm: string;
+  id?: string;
 }
 
 export interface AWSV4Options {
-    sessionToken: string;
-    service: string;
-    region: string;
-    secretKey: string;
-    accessKey: string;
-    id?: string;
+  sessionToken: string;
+  service: string;
+  region: string;
+  secretKey: string;
+  accessKey: string;
+  id?: string;
 }
 
 export interface NTLMOptions {
-    workstation: string;
-    domain: string;
-    password: string;
-    username: string;
-    id?: string;
+  workstation: string;
+  domain: string;
+  password: string;
+  username: string;
+  id?: string;
 }
 
 export interface APIKeyOptions {
-    key: string;
-    value: string;
-    id?: string;
+  key: string;
+  value: string;
+  id?: string;
 }
 
 export interface EdgegridOptions {
-    headersToSign: string;
-    baseURL: string;
-    timestamp: string;
-    nonce: string;
-    clientSecret: string;
-    clientToken: string;
-    accessToken: string;
-    id?: string;
+  headersToSign: string;
+  baseURL: string;
+  timestamp: string;
+  nonce: string;
+  clientSecret: string;
+  clientToken: string;
+  accessToken: string;
+  id?: string;
 }
 
 export interface ASAPOptions {
-    exp: string; // expiry
-    claims: string; // e.g., { "additional claim": "claim value" }
-    sub: string; // subject
-    privateKey: string; // private key
-    kid: string; // key id
-    aud: string; // audience
-    iss: string; // issuer
-    alg: string; // e.g., RS256
-    id?: string;
+  exp: string; // expiry
+  claims: string; // e.g., { "additional claim": "claim value" }
+  sub: string; // subject
+  privateKey: string; // private key
+  kid: string; // key id
+  aud: string; // audience
+  iss: string; // issuer
+  alg: string; // e.g., RS256
+  id?: string;
 }
 
 export function authOptionsToParams(
-    authMethod: BasicOptions | BearerOptions | JWTOptions | DigestOptions | OAuth1Options | OAuth2Options | HAWKOptions | AWSV4Options | NTLMOptions | APIKeyOptions | EdgegridOptions | ASAPOptions
+  authMethod:
+    | BasicOptions
+    | BearerOptions
+    | JWTOptions
+    | DigestOptions
+    | OAuth1Options
+    | OAuth2Options
+    | HAWKOptions
+    | AWSV4Options
+    | NTLMOptions
+    | APIKeyOptions
+    | EdgegridOptions
+    | ASAPOptions,
 ) {
-    return Object.entries(authMethod).
-        map(entry => ({
-            type: 'any',
-            key: entry[0],
-            value: entry[1],
-        }));
+  return Object.entries(authMethod).map(entry => ({
+    type: 'any',
+    key: entry[0],
+    value: entry[1],
+  }));
 }
 export interface AuthOptions {
-    type: AuthOptionTypes;
-    basic?: AuthOption[];
-    bearer?: AuthOption[];
-    jwt?: AuthOption[];
-    digest?: AuthOption[];
-    oauth1?: AuthOption[];
-    oauth2?: OAuth2AuthOption[];
-    hawk?: AuthOption[];
-    awsv4?: AuthOption[];
-    ntlm?: AuthOption[];
-    apikey?: AuthOption[];
-    edgegrid?: AuthOption[];
-    asap?: AuthOption[];
+  type: AuthOptionTypes;
+  basic?: AuthOption[];
+  bearer?: AuthOption[];
+  jwt?: AuthOption[];
+  digest?: AuthOption[];
+  oauth1?: AuthOption[];
+  oauth2?: OAuth2AuthOption[];
+  hawk?: AuthOption[];
+  awsv4?: AuthOption[];
+  ntlm?: AuthOption[];
+  apikey?: AuthOption[];
+  edgegrid?: AuthOption[];
+  asap?: AuthOption[];
 }
 
-function rawOptionsToVariables(options: VariableList<Variable> | Variable[] | AuthOptions, targetType?: string): VariableList<Variable>[] {
-    if (VariableList.isVariableList(options)) {
-        return [options as VariableList<Variable>];
-    } else if ('type' in options) {
-        // options is AuthOptions
-        const optsObj = options as AuthOptions;
-        const optsVarLists = Object.entries(optsObj)
-            .filter(optsObjEntry => {
-                return optsObjEntry[0] === targetType;
-            })
-            .map(optsEntry => {
-                const optVars = optsEntry[1].map((opt: AuthOption) => {
-                    return new Variable({
-                        key: opt.key,
-                        value: opt.value,
-                    });
-                });
-                return new VariableList(undefined, optVars);
-            });
+function rawOptionsToVariables(
+  options: VariableList<Variable> | Variable[] | AuthOptions,
+  targetType?: string,
+): VariableList<Variable>[] {
+  if (VariableList.isVariableList(options)) {
+    return [options as VariableList<Variable>];
+  } else if ('type' in options) {
+    // options is AuthOptions
+    const optsObj = options as AuthOptions;
+    const optsVarLists = Object.entries(optsObj)
+      .filter(optsObjEntry => {
+        return optsObjEntry[0] === targetType;
+      })
+      .map(optsEntry => {
+        const optVars = optsEntry[1].map((opt: AuthOption) => {
+          return new Variable({
+            key: opt.key,
+            value: opt.value,
+          });
+        });
+        return new VariableList(undefined, optVars);
+      });
 
-        return optsVarLists;
-    } else if ('length' in options) { // array
-        return [new VariableList(undefined, options)];
-    }
+    return optsVarLists;
+  } else if ('length' in options) {
+    // array
+    return [new VariableList(undefined, options)];
+  }
 
-    throw Error('options is not valid: it must be VariableList<Variable> | Variable[] | object');
+  throw Error('options is not valid: it must be VariableList<Variable> | Variable[] | object');
 }
 
 export class RequestAuth extends Property {
-    private type: AuthOptionTypes;
-    private authOptions = new Map<string, VariableList<Variable>>();
+  private type: AuthOptionTypes;
+  private authOptions = new Map<string, VariableList<Variable>>();
 
-    constructor(options: AuthOptions, parent?: Property) {
-        super();
+  constructor(options: AuthOptions, parent?: Property) {
+    super();
 
-        if (!RequestAuth.isValidType(options.type)) {
-            throw Error(`invalid auth type ${options.type}`);
-        }
-
-        this.type = options.type;
-        const optsObj = options as AuthOptions;
-        const optsEntries = Object.entries(optsObj)
-            .filter(optsObjEntry => optsObjEntry[0] !== 'type');
-
-        optsEntries.map((optsEntry: [string, AuthOption[]]) => {
-            const optVars = optsEntry[1]
-                .map(opt => {
-                    return new Variable({
-                        key: opt.key,
-                        value: opt.value,
-                        type: opt.type,
-                    });
-                });
-
-            return {
-                type: optsEntry[0],
-                options: new VariableList(undefined, optVars),
-            };
-        })
-            .forEach(authOpts => {
-                this.authOptions.set(authOpts.type, authOpts.options);
-            });
-
-        this._parent = parent;
+    if (!RequestAuth.isValidType(options.type)) {
+      throw Error(`invalid auth type ${options.type}`);
     }
 
-    static isValidType(authType: string) {
-        return AuthTypes.has(authType);
+    this.type = options.type;
+    const optsObj = options as AuthOptions;
+    const optsEntries = Object.entries(optsObj).filter(optsObjEntry => optsObjEntry[0] !== 'type');
+
+    optsEntries
+      .map((optsEntry: [string, AuthOption[]]) => {
+        const optVars = optsEntry[1].map(opt => {
+          return new Variable({
+            key: opt.key,
+            value: opt.value,
+            type: opt.type,
+          });
+        });
+
+        return {
+          type: optsEntry[0],
+          options: new VariableList(undefined, optVars),
+        };
+      })
+      .forEach(authOpts => {
+        this.authOptions.set(authOpts.type, authOpts.options);
+      });
+
+    this._parent = parent;
+  }
+
+  static isValidType(authType: string) {
+    return AuthTypes.has(authType);
+  }
+
+  clear(type: string) {
+    if (RequestAuth.isValidType(type)) {
+      this.authOptions.delete(type);
+    }
+  }
+
+  parameters(): VariableList<Variable> | undefined {
+    return this.authOptions.get(this.type);
+  }
+
+  override toJSON() {
+    const obj: AuthOptions = { type: this.type };
+    const authOption = this.authOptions.get(this.type);
+    if (!authOption) {
+      return obj;
     }
 
-    clear(type: string) {
-        if (RequestAuth.isValidType(type)) {
-            this.authOptions.delete(type);
-        }
+    if (this.type === 'noauth' || this.type === 'netrc') {
+      return obj;
+    }
+    obj[this.type] = authOption.map(optValue => optValue.toJSON(), {});
+    return obj;
+  }
+
+  update(options: VariableList<Variable> | Variable[] | AuthOptions, type?: AuthOptionTypes) {
+    const currentType = type ? type : this.type;
+    const authOpts = rawOptionsToVariables(options, currentType);
+
+    if (authOpts.length > 0 && authOpts[0]) {
+      this.type = currentType;
+      this.authOptions.set(currentType, authOpts[0]);
+    } else {
+      throw Error('no valid RequestAuth options is found');
+    }
+  }
+
+  use(type: AuthOptionTypes, options: VariableList<Variable> | Variable[] | AuthOptions) {
+    if (!RequestAuth.isValidType(type)) {
+      throw Error(
+        `invalid type (${type}), it must be noauth | basic | bearer | jwt | digest | oauth1 | oauth2 | hawk | awsv4 | ntlm | apikey | edgegrid | asap.`,
+      );
     }
 
-    parameters(): VariableList<Variable> | undefined {
-        return this.authOptions.get(this.type);
-    }
-
-    override toJSON() {
-        const obj: AuthOptions = { type: this.type };
-        const authOption = this.authOptions.get(this.type);
-        if (!authOption) {
-            return obj;
-        }
-
-        if (this.type === 'noauth' || this.type === 'netrc') {
-            return obj;
-        }
-        obj[this.type] = authOption.map(optValue => optValue.toJSON(), {});
-        return obj;
-    }
-
-    update(options: VariableList<Variable> | Variable[] | AuthOptions, type?: AuthOptionTypes) {
-        const currentType = type ? type : this.type;
-        const authOpts = rawOptionsToVariables(options, currentType);
-
-        if (authOpts.length > 0 && authOpts[0]) {
-            this.type = currentType;
-            this.authOptions.set(currentType, authOpts[0]);
-        } else {
-            throw Error('no valid RequestAuth options is found');
-        }
-    }
-
-    use(type: AuthOptionTypes, options: VariableList<Variable> | Variable[] | AuthOptions) {
-        if (!RequestAuth.isValidType(type)) {
-            throw Error(`invalid type (${type}), it must be noauth | basic | bearer | jwt | digest | oauth1 | oauth2 | hawk | awsv4 | ntlm | apikey | edgegrid | asap.`);
-        }
-
-        const authOpts = rawOptionsToVariables(options, type);
-        if (authOpts.length > 0 && authOpts[0]) {
-            this.type = type;
-            this.authOptions.set(type, authOpts[0]);
-        } else {
-            throw Error('no valid RequestAuth options is found');
-        }
+    const authOpts = rawOptionsToVariables(options, type);
+    if (authOpts.length > 0 && authOpts[0]) {
+      this.type = type;
+      this.authOptions.set(type, authOpts[0]);
+    } else {
+      throw Error('no valid RequestAuth options is found');
     }
+  }
 }
 
 export function fromPreRequestAuth(auth: RequestAuth): RequestAuthentication {
-    const authObj = auth.toJSON();
+  const authObj = auth.toJSON();
 
-    const findValueInKvArray = (targetKey: string, kvs?: { key: string; value: string }[]) =>
-        kvs?.find(({ key }) => key === targetKey)?.value || '';
+  const findValueInKvArray = (targetKey: string, kvs?: { key: string; value: string }[]) =>
+    kvs?.find(({ key }) => key === targetKey)?.value || '';
 
-    const findValueInOauth2Options = (
-        targetKey: string,
-        kvs?: { key: string; value: string }[] | OAuth2AuthOption[]
-    ) => {
-        if (!kvs) {
-            return '';
-        }
-
-        for (const kv of kvs) {
-            if (typeof kv.value === 'string' && kv.key === targetKey) {
-                return kv.value;
-            } else if (Array.isArray(kv.value)) {
-                const matched = kv.value.find(subKv => subKv.key === targetKey);
-                if (matched != null) {
-                    return matched.value;
-                }
-            }
-        }
-
-        return '';
-    };
-
-    switch (authObj.type) {
-        case 'noauth':
-            return {
-                type: 'none',
-                disabled: true,
-            };
-        case 'apikey':
-            return {
-                type: 'apikey',
-                disabled: findValueInKvArray('disabled', authObj.apikey) === 'true',
-                key: findValueInKvArray('key', authObj.apikey),
-                value: findValueInKvArray('value', authObj.apikey),
-                addTo: findValueInKvArray('in', authObj.apikey),
-            };
-        case 'bearer':
-            return {
-                type: 'bearer',
-                disabled: findValueInKvArray('disabled', authObj.bearer) === 'true',
-                token: findValueInKvArray('token', authObj.bearer),
-                prefix: findValueInKvArray('prefix', authObj.bearer),
-            };
-        case 'basic':
-            return {
-                type: 'basic',
-                disabled: findValueInKvArray('disabled', authObj.basic) === 'true',
-                useISO88591: findValueInKvArray('useISO88591', authObj.basic) === 'true',
-                username: findValueInKvArray('username', authObj.basic),
-                password: findValueInKvArray('password', authObj.basic),
-            };
-        case 'digest':
-            return {
-                type: 'digest',
-                disabled: findValueInKvArray('disabled', authObj.digest) === 'true',
-                username: findValueInKvArray('username', authObj.digest),
-                password: findValueInKvArray('password', authObj.digest),
-            };
-        case 'ntlm':
-            return {
-                type: 'ntlm',
-                disabled: findValueInKvArray('disabled', authObj.ntlm) === 'true',
-                username: findValueInKvArray('username', authObj.ntlm),
-                password: findValueInKvArray('password', authObj.ntlm),
-            };
-        case 'oauth1': {
-            const signMethod = ((): OAuth1SignatureMethod => {
-                const method = findValueInKvArray('signatureMethod', authObj.oauth1);
-                const unsupportedError = Error(`auth transforming(fromPreRequestAuth): unsupported signatureMethod type for oauth1: ${method}`);
-                switch (method) {
-                    case 'HMAC-SHA1':
-                        return 'HMAC-SHA1';
-                    case 'HMAC-SHA256':
-                        return 'HMAC-SHA256';
-                    case 'HMAC-SHA512':
-                        throw unsupportedError;
-                    case 'RSA-SHA1':
-                        return 'RSA-SHA1';
-                    case 'RSA-SHA256':
-                        throw unsupportedError;
-                    case 'RSA-SHA512':
-                        throw unsupportedError;
-                    case 'PLAINTEXT':
-                        return 'PLAINTEXT';
-                    default:
-                        throw Error(`auth transforming(fromPreRequestAuth): unknown signatureMethod type for oauth1: ${method}`);
-                }
-            })();
-
-            return {
-                type: 'oauth1',
-                disabled: findValueInKvArray('disabled', authObj.oauth1) === 'true',
-                signatureMethod: signMethod,
-                consumerKey: findValueInKvArray('consumerKey', authObj.oauth1),
-                consumerSecret: findValueInKvArray('consumerSecret', authObj.oauth1),
-                tokenKey: findValueInKvArray('token', authObj.oauth1),
-                tokenSecret: findValueInKvArray('tokenSecret', authObj.oauth1),
-                privateKey: findValueInKvArray('privateKey', authObj.oauth1), // it is not supported in the script side
-                version: findValueInKvArray('version', authObj.oauth1),
-                nonce: findValueInKvArray('nonce', authObj.oauth1),
-                timestamp: findValueInKvArray('timestamp', authObj.oauth1),
-                callback: findValueInKvArray('callback', authObj.oauth1),
-                realm: findValueInKvArray('realm', authObj.oauth1),
-                verifier: findValueInKvArray('verifier', authObj.oauth1),
-                includeBodyHash: findValueInKvArray('includeBodyHash', authObj.oauth1) === 'true',
-            };
-        };
-        case 'oauth2': {
-            const inputGrantType = findValueInOauth2Options('grant_type', authObj.oauth2);
-            const grantType = (() => {
-                switch (inputGrantType) {
-                    case 'authorization_code':
-                    case 'authorization_code_with_pkce':
-                        return 'authorization_code';
-                    case 'implicit':
-                        return 'implicit';
-                    case 'password_credentials':
-                        return 'password';
-                    case 'client_credentials':
-                        return 'client_credentials';
-                    case 'refresh_token':
-                        return 'refresh_token';
-                    default:
-                        throw Error(`auth transforming(fromPreRequestAuth): unknown auth grant type for oauth2: ${inputGrantType}`);
-                }
-            })();
-
-            const responseType = ((): OAuth2ResponseType => {
-                const inputResponseType = findValueInOauth2Options('response_type', authObj.oauth2);
-                // responseType is currently always set to '' in our request auth model, this should be investigated what is correct to be set
-                if (['code', 'id_token', 'id_token token', 'none', 'token', ''].includes(inputResponseType)) {
-                    return inputResponseType as OAuth2ResponseType;
-                };
-                throw Error(`unknown response type for oauth2: "${inputResponseType}", it could be: 'code' | 'id_token' | 'id_token token' | 'none' | 'token' | ''`);
-            })();
-
-            return {
-                type: 'oauth2',
-                disabled: findValueInOauth2Options('disabled', authObj.oauth2) === 'true',
-                grantType: grantType,
-                authorizationUrl: findValueInOauth2Options('authUrl', authObj.oauth2),
-                accessTokenUrl: findValueInOauth2Options('accessTokenUrl', authObj.oauth2),
-                clientId: findValueInOauth2Options('clientId', authObj.oauth2),
-                clientSecret: findValueInOauth2Options('clientSecret', authObj.oauth2),
-                scope: findValueInOauth2Options('scope', authObj.oauth2),
-                code: findValueInOauth2Options('code_verifier', authObj.oauth2),
-                accessToken: findValueInOauth2Options('accessToken', authObj.oauth2),
-                pkceMethod: findValueInOauth2Options('challengeAlgorithm', authObj.oauth2),
-                usePkce: findValueInOauth2Options('grant_type', authObj.oauth2) === 'authorization_code_with_pkce',
-                username: findValueInOauth2Options('username', authObj.oauth2),
-                password: findValueInOauth2Options('password', authObj.oauth2),
-                redirectUrl: findValueInOauth2Options('callBackUrl', authObj.oauth2),
-                state: findValueInOauth2Options('state', authObj.oauth2),
-                refreshToken: findValueInOauth2Options('refreshTokenUrl', authObj.oauth2),
-                credentialsInBody: findValueInOauth2Options('client_authentication', authObj.oauth2) === 'body',
-                audience: findValueInOauth2Options('audience', authObj.oauth2) || '',
-                resource: findValueInOauth2Options('resource', authObj.oauth2) || '',
-                // following properties are not supported yet in the script side, just try to find and set them
-                tokenPrefix: findValueInOauth2Options('tokenPrefix', authObj.oauth2),
-                responseType: responseType,
-                origin: findValueInOauth2Options('origin', authObj.oauth2),
-            };
-        };
-        case 'awsv4':
-            return {
-                type: 'iam',
-                disabled: findValueInKvArray('disabled', authObj.awsv4) === 'true',
-                accessKeyId: findValueInKvArray('accessKey', authObj.awsv4),
-                secretAccessKey: findValueInKvArray('secretKey', authObj.awsv4),
-                sessionToken: findValueInKvArray('sessionToken', authObj.awsv4),
-                region: findValueInKvArray('region', authObj.awsv4),
-                service: findValueInKvArray('service', authObj.awsv4),
-            };
-        case 'hawk':
-            return {
-                type: 'hawk',
-                disabled: findValueInKvArray('disabled', authObj.hawk) === 'true',
-                algorithm: findValueInKvArray('algorithm', authObj.hawk) === 'sha256' ? 'sha256' : 'sha1',
-                id: findValueInKvArray('authId', authObj.hawk),
-                key: findValueInKvArray('authKey', authObj.hawk),
-                ext: findValueInKvArray('extraData', authObj.hawk),
-                validatePayload: findValueInKvArray('validatePayload', authObj.hawk) === 'true',
-                // TODO(george): some keys are lost here, see if we can support them in Insomnia
-                // timestamp
-                // delegation
-                // app
-                // nonce
-                // user
-            };
-        case 'asap':
-            return {
-                type: 'asap',
-                disabled: findValueInKvArray('disabled', authObj.asap) === 'true',
-                issuer: findValueInKvArray('iss', authObj.asap),
-                subject: findValueInKvArray('sub', authObj.asap),
-                audience: findValueInKvArray('aud', authObj.asap),
-                additionalClaims: findValueInKvArray('claims', authObj.asap),
-                keyId: findValueInKvArray('kid', authObj.asap),
-                privateKey: findValueInKvArray('privateKey', authObj.asap),
-            };
-        case 'netrc':
-            // TODO(george): support this in the script side
-            throw Error('netrc is not supported yet');
-        default:
-            throw Error(`unknown auth type: ${authObj.type}`);
+  const findValueInOauth2Options = (targetKey: string, kvs?: { key: string; value: string }[] | OAuth2AuthOption[]) => {
+    if (!kvs) {
+      return '';
     }
+
+    for (const kv of kvs) {
+      if (typeof kv.value === 'string' && kv.key === targetKey) {
+        return kv.value;
+      } else if (Array.isArray(kv.value)) {
+        const matched = kv.value.find(subKv => subKv.key === targetKey);
+        if (matched != null) {
+          return matched.value;
+        }
+      }
+    }
+
+    return '';
+  };
+
+  switch (authObj.type) {
+    case 'noauth':
+      return {
+        type: 'none',
+        disabled: true,
+      };
+    case 'apikey':
+      return {
+        type: 'apikey',
+        disabled: findValueInKvArray('disabled', authObj.apikey) === 'true',
+        key: findValueInKvArray('key', authObj.apikey),
+        value: findValueInKvArray('value', authObj.apikey),
+        addTo: findValueInKvArray('in', authObj.apikey),
+      };
+    case 'bearer':
+      return {
+        type: 'bearer',
+        disabled: findValueInKvArray('disabled', authObj.bearer) === 'true',
+        token: findValueInKvArray('token', authObj.bearer),
+        prefix: findValueInKvArray('prefix', authObj.bearer),
+      };
+    case 'basic':
+      return {
+        type: 'basic',
+        disabled: findValueInKvArray('disabled', authObj.basic) === 'true',
+        useISO88591: findValueInKvArray('useISO88591', authObj.basic) === 'true',
+        username: findValueInKvArray('username', authObj.basic),
+        password: findValueInKvArray('password', authObj.basic),
+      };
+    case 'digest':
+      return {
+        type: 'digest',
+        disabled: findValueInKvArray('disabled', authObj.digest) === 'true',
+        username: findValueInKvArray('username', authObj.digest),
+        password: findValueInKvArray('password', authObj.digest),
+      };
+    case 'ntlm':
+      return {
+        type: 'ntlm',
+        disabled: findValueInKvArray('disabled', authObj.ntlm) === 'true',
+        username: findValueInKvArray('username', authObj.ntlm),
+        password: findValueInKvArray('password', authObj.ntlm),
+      };
+    case 'oauth1': {
+      const signMethod = ((): OAuth1SignatureMethod => {
+        const method = findValueInKvArray('signatureMethod', authObj.oauth1);
+        const unsupportedError = Error(
+          `auth transforming(fromPreRequestAuth): unsupported signatureMethod type for oauth1: ${method}`,
+        );
+        switch (method) {
+          case 'HMAC-SHA1':
+            return 'HMAC-SHA1';
+          case 'HMAC-SHA256':
+            return 'HMAC-SHA256';
+          case 'HMAC-SHA512':
+            throw unsupportedError;
+          case 'RSA-SHA1':
+            return 'RSA-SHA1';
+          case 'RSA-SHA256':
+            throw unsupportedError;
+          case 'RSA-SHA512':
+            throw unsupportedError;
+          case 'PLAINTEXT':
+            return 'PLAINTEXT';
+          default:
+            throw Error(`auth transforming(fromPreRequestAuth): unknown signatureMethod type for oauth1: ${method}`);
+        }
+      })();
+
+      return {
+        type: 'oauth1',
+        disabled: findValueInKvArray('disabled', authObj.oauth1) === 'true',
+        signatureMethod: signMethod,
+        consumerKey: findValueInKvArray('consumerKey', authObj.oauth1),
+        consumerSecret: findValueInKvArray('consumerSecret', authObj.oauth1),
+        tokenKey: findValueInKvArray('token', authObj.oauth1),
+        tokenSecret: findValueInKvArray('tokenSecret', authObj.oauth1),
+        privateKey: findValueInKvArray('privateKey', authObj.oauth1), // it is not supported in the script side
+        version: findValueInKvArray('version', authObj.oauth1),
+        nonce: findValueInKvArray('nonce', authObj.oauth1),
+        timestamp: findValueInKvArray('timestamp', authObj.oauth1),
+        callback: findValueInKvArray('callback', authObj.oauth1),
+        realm: findValueInKvArray('realm', authObj.oauth1),
+        verifier: findValueInKvArray('verifier', authObj.oauth1),
+        includeBodyHash: findValueInKvArray('includeBodyHash', authObj.oauth1) === 'true',
+      };
+    }
+    case 'oauth2': {
+      const inputGrantType = findValueInOauth2Options('grant_type', authObj.oauth2);
+      const grantType = (() => {
+        switch (inputGrantType) {
+          case 'authorization_code':
+          case 'authorization_code_with_pkce':
+            return 'authorization_code';
+          case 'implicit':
+            return 'implicit';
+          case 'password_credentials':
+            return 'password';
+          case 'client_credentials':
+            return 'client_credentials';
+          case 'refresh_token':
+            return 'refresh_token';
+          default:
+            throw Error(`auth transforming(fromPreRequestAuth): unknown auth grant type for oauth2: ${inputGrantType}`);
+        }
+      })();
+
+      const responseType = ((): OAuth2ResponseType => {
+        const inputResponseType = findValueInOauth2Options('response_type', authObj.oauth2);
+        // responseType is currently always set to '' in our request auth model, this should be investigated what is correct to be set
+        if (['code', 'id_token', 'id_token token', 'none', 'token', ''].includes(inputResponseType)) {
+          return inputResponseType as OAuth2ResponseType;
+        }
+        throw Error(
+          `unknown response type for oauth2: "${inputResponseType}", it could be: 'code' | 'id_token' | 'id_token token' | 'none' | 'token' | ''`,
+        );
+      })();
+
+      return {
+        type: 'oauth2',
+        disabled: findValueInOauth2Options('disabled', authObj.oauth2) === 'true',
+        grantType: grantType,
+        authorizationUrl: findValueInOauth2Options('authUrl', authObj.oauth2),
+        accessTokenUrl: findValueInOauth2Options('accessTokenUrl', authObj.oauth2),
+        clientId: findValueInOauth2Options('clientId', authObj.oauth2),
+        clientSecret: findValueInOauth2Options('clientSecret', authObj.oauth2),
+        scope: findValueInOauth2Options('scope', authObj.oauth2),
+        code: findValueInOauth2Options('code_verifier', authObj.oauth2),
+        accessToken: findValueInOauth2Options('accessToken', authObj.oauth2),
+        pkceMethod: findValueInOauth2Options('challengeAlgorithm', authObj.oauth2),
+        usePkce: findValueInOauth2Options('grant_type', authObj.oauth2) === 'authorization_code_with_pkce',
+        username: findValueInOauth2Options('username', authObj.oauth2),
+        password: findValueInOauth2Options('password', authObj.oauth2),
+        redirectUrl: findValueInOauth2Options('callBackUrl', authObj.oauth2),
+        state: findValueInOauth2Options('state', authObj.oauth2),
+        refreshToken: findValueInOauth2Options('refreshTokenUrl', authObj.oauth2),
+        credentialsInBody: findValueInOauth2Options('client_authentication', authObj.oauth2) === 'body',
+        audience: findValueInOauth2Options('audience', authObj.oauth2) || '',
+        resource: findValueInOauth2Options('resource', authObj.oauth2) || '',
+        // following properties are not supported yet in the script side, just try to find and set them
+        tokenPrefix: findValueInOauth2Options('tokenPrefix', authObj.oauth2),
+        responseType: responseType,
+        origin: findValueInOauth2Options('origin', authObj.oauth2),
+      };
+    }
+    case 'awsv4':
+      return {
+        type: 'iam',
+        disabled: findValueInKvArray('disabled', authObj.awsv4) === 'true',
+        accessKeyId: findValueInKvArray('accessKey', authObj.awsv4),
+        secretAccessKey: findValueInKvArray('secretKey', authObj.awsv4),
+        sessionToken: findValueInKvArray('sessionToken', authObj.awsv4),
+        region: findValueInKvArray('region', authObj.awsv4),
+        service: findValueInKvArray('service', authObj.awsv4),
+      };
+    case 'hawk':
+      return {
+        type: 'hawk',
+        disabled: findValueInKvArray('disabled', authObj.hawk) === 'true',
+        algorithm: findValueInKvArray('algorithm', authObj.hawk) === 'sha256' ? 'sha256' : 'sha1',
+        id: findValueInKvArray('authId', authObj.hawk),
+        key: findValueInKvArray('authKey', authObj.hawk),
+        ext: findValueInKvArray('extraData', authObj.hawk),
+        validatePayload: findValueInKvArray('validatePayload', authObj.hawk) === 'true',
+        // TODO(george): some keys are lost here, see if we can support them in Insomnia
+        // timestamp
+        // delegation
+        // app
+        // nonce
+        // user
+      };
+    case 'asap':
+      return {
+        type: 'asap',
+        disabled: findValueInKvArray('disabled', authObj.asap) === 'true',
+        issuer: findValueInKvArray('iss', authObj.asap),
+        subject: findValueInKvArray('sub', authObj.asap),
+        audience: findValueInKvArray('aud', authObj.asap),
+        additionalClaims: findValueInKvArray('claims', authObj.asap),
+        keyId: findValueInKvArray('kid', authObj.asap),
+        privateKey: findValueInKvArray('privateKey', authObj.asap),
+      };
+    case 'netrc':
+      // TODO(george): support this in the script side
+      throw Error('netrc is not supported yet');
+    default:
+      throw Error(`unknown auth type: ${authObj.type}`);
+  }
 }
 
 export function toPreRequestAuth(auth: RequestAuthentication | {}): AuthOptions {
-    if (!auth || !('type' in auth) || !auth.type) {
-        return { type: 'noauth' };
-    }
-
-    switch (auth.type) {
-        case 'none':
-            return { type: 'noauth' };
-        case 'apikey':
-            return {
-                type: 'apikey',
-                apikey: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'key', value: auth.key || '' },
-                    { key: 'value', value: auth.value || '' },
-                    { key: 'in', value: auth.addTo || '' },
-                ],
-            };
-        case 'bearer':
-            return {
-                type: 'bearer',
-                bearer: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'token', value: auth.token || '' },
-                    { key: 'prefix', value: auth.prefix || '' },
-                ],
-            };
-        case 'basic':
-            return {
-                type: 'basic',
-                basic: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'useISO88591', value: auth.useISO88591 ? 'true' : 'false' },
-                    { key: 'username', value: auth.username || '' },
-                    { key: 'password', value: auth.password || '' },
-                ],
-            };
-        case 'digest':
-            return {
-                type: 'digest',
-                digest: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'username', value: auth.username || '' },
-                    { key: 'password', value: auth.password || '' },
-                ],
-            };
-        case 'ntlm':
-            return {
-                type: 'ntlm',
-                ntlm: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'username', value: auth.username || '' },
-                    { key: 'password', value: auth.password || '' },
-                ],
-            };
-        case 'oauth1':
-            return {
-                type: 'oauth1',
-                oauth1: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'signatureMethod', value: auth.signatureMethod || '' },
-                    { key: 'consumerKey', value: auth.consumerKey || '' },
-                    { key: 'consumerSecret', value: auth.consumerSecret || '' },
-                    { key: 'token', value: auth.tokenKey || '' },
-
-                    { key: 'tokenSecret', value: auth.tokenSecret || '' },
-                    { key: 'privateKey', value: auth.privateKey || '' },
-                    { key: 'version', value: auth.version || '' },
-                    { key: 'nonce', value: auth.nonce || '' },
-                    { key: 'timestamp', value: auth.timestamp || '' },
-
-                    { key: 'callback', value: auth.callback || '' },
-                    { key: 'realm', value: auth.realm || '' },
-                    { key: 'verifier', value: auth.verifier || '' },
-                    { key: 'includeBodyHash', value: auth.includeBodyHash ? 'true' : 'false' },
-                ],
-            };
-        case 'oauth2': {
-            const inputGrantType = auth.grantType;
-            const grantType = (() => {
-                switch (inputGrantType) {
-                    case 'authorization_code':
-                        return auth.usePkce ? 'authorization_code_with_pkce' : 'authorization_code';
-                    case 'implicit':
-                        return 'implicit';
-                    case 'password':
-                        return 'password_credentials';
-                    case 'client_credentials':
-                        return 'client_credentials';
-                    case 'refresh_token':
-                        return 'refresh_token';
-                    default:
-                        throw Error(`auth transforming(toPreRequestAuth): unknown auth grant type for oauth2: ${inputGrantType}`);
-                }
-            })();
-
-            return {
-                type: 'oauth2',
-                oauth2: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-
-                    { key: 'grant_type', value: grantType },
-                    { key: 'authUrl', value: auth.authorizationUrl || '' },
-                    { key: 'accessTokenUrl', value: auth.accessTokenUrl || '' },
-                    { key: 'clientId', value: auth.clientId || '' },
-                    { key: 'clientSecret', value: auth.clientSecret || '' },
-                    { key: 'scope', value: auth.scope || '' },
-
-                    { key: 'code_verifier', value: auth.code || '' },
-                    { key: 'accessToken', value: auth.accessToken || '' },
-                    { key: 'challengeAlgorithm', value: auth.pkceMethod || '' },
-                    // { key: 'scope', value: auth.usePkce || ''},
-                    { key: 'username', value: auth.username || '' },
-                    { key: 'password', value: auth.password || '' },
-
-                    { key: 'callBackUrl', value: auth.redirectUrl || '' },
-                    { key: 'state', value: auth.state || '' },
-                    { key: 'refreshTokenUrl', value: auth.refreshToken || '' },
-                    { key: 'client_authentication', value: auth.credentialsInBody ? 'body' : 'header' },
-
-                    {
-                        key: 'tokenRequestParams', value: [
-                            {
-                                key: 'audience',
-                                value: auth.audience || '',
-                                enabled: true,
-                                send_as: 'request_url', // request_body or request_header
-
-                            },
-                            {
-                                key: 'resource',
-                                value: auth.resource || '',
-                                enabled: true,
-                                send_as: 'request_url', // request_body or request_header
-
-                            },
-                        ],
-                    },
-
-                    // following properties are not supported in script side, still set them
-                    { key: 'tokenPrefix', value: auth.tokenPrefix || '' },
-                    { key: 'response_type', value: auth.responseType || '' },
-                    { key: 'origin', value: auth.origin || '' },
-                ],
-            };
-        };
-        case 'iam':
-            return {
-                type: 'awsv4',
-                awsv4: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'accessKey', value: auth.accessKeyId || '' },
-                    { key: 'secretKey', value: auth.secretAccessKey || '' },
-                    { key: 'sessionToken', value: auth.sessionToken || '' },
-                    { key: 'region', value: auth.region || '' },
-                    { key: 'service', value: auth.service || '' },
-                ],
-            };
-        case 'hawk':
-            return {
-                type: 'hawk',
-                hawk: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'algorithm', value: auth.algorithm || '' },
-                    { key: 'authId', value: auth.id || '' },
-                    { key: 'authKey', value: auth.key || '' },
-                    { key: 'extraData', value: auth.ext || '' },
-                    { key: 'validatePayload', value: auth.validatePayload ? 'true' : 'false' },
-                    // TODO(george): these fields are not supported in Insomnia side
-                    { key: 'timestamp', value: '' },
-                    { key: 'delegation', value: '' },
-                    { key: 'app', value: '' },
-                    { key: 'nonce', value: '' },
-                    { key: 'user', value: '' },
-                    { key: 'includePayloadHash', value: 'false' },
-                ],
-            };
-        case 'asap':
-            return {
-                type: 'asap',
-                asap: [
-                    { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
-                    { key: 'iss', value: auth.issuer || '' },
-                    { key: 'sub', value: auth.subject || '' },
-                    { key: 'aud', value: auth.audience || '' },
-                    { key: 'claims', value: auth.additionalClaims || '' },
-                    { key: 'kid', value: auth.keyId || '' },
-                    { key: 'privateKey', value: auth.privateKey || '' },
-                ],
-            };
-        case 'netrc':
-            // TODO: not supported yet
-            throw Error('netrc auth is not supported in scripting yet');
-        default:
-            // @ts-expect-error - user can input any string
-            throw Error(`unknown auth type: ${auth.type}`);
+  if (!auth || !('type' in auth) || !auth.type) {
+    return { type: 'noauth' };
+  }
+
+  switch (auth.type) {
+    case 'none':
+      return { type: 'noauth' };
+    case 'apikey':
+      return {
+        type: 'apikey',
+        apikey: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'key', value: auth.key || '' },
+          { key: 'value', value: auth.value || '' },
+          { key: 'in', value: auth.addTo || '' },
+        ],
+      };
+    case 'bearer':
+      return {
+        type: 'bearer',
+        bearer: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'token', value: auth.token || '' },
+          { key: 'prefix', value: auth.prefix || '' },
+        ],
+      };
+    case 'basic':
+      return {
+        type: 'basic',
+        basic: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'useISO88591', value: auth.useISO88591 ? 'true' : 'false' },
+          { key: 'username', value: auth.username || '' },
+          { key: 'password', value: auth.password || '' },
+        ],
+      };
+    case 'digest':
+      return {
+        type: 'digest',
+        digest: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'username', value: auth.username || '' },
+          { key: 'password', value: auth.password || '' },
+        ],
+      };
+    case 'ntlm':
+      return {
+        type: 'ntlm',
+        ntlm: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'username', value: auth.username || '' },
+          { key: 'password', value: auth.password || '' },
+        ],
+      };
+    case 'oauth1':
+      return {
+        type: 'oauth1',
+        oauth1: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'signatureMethod', value: auth.signatureMethod || '' },
+          { key: 'consumerKey', value: auth.consumerKey || '' },
+          { key: 'consumerSecret', value: auth.consumerSecret || '' },
+          { key: 'token', value: auth.tokenKey || '' },
+
+          { key: 'tokenSecret', value: auth.tokenSecret || '' },
+          { key: 'privateKey', value: auth.privateKey || '' },
+          { key: 'version', value: auth.version || '' },
+          { key: 'nonce', value: auth.nonce || '' },
+          { key: 'timestamp', value: auth.timestamp || '' },
+
+          { key: 'callback', value: auth.callback || '' },
+          { key: 'realm', value: auth.realm || '' },
+          { key: 'verifier', value: auth.verifier || '' },
+          { key: 'includeBodyHash', value: auth.includeBodyHash ? 'true' : 'false' },
+        ],
+      };
+    case 'oauth2': {
+      const inputGrantType = auth.grantType;
+      const grantType = (() => {
+        switch (inputGrantType) {
+          case 'authorization_code':
+            return auth.usePkce ? 'authorization_code_with_pkce' : 'authorization_code';
+          case 'implicit':
+            return 'implicit';
+          case 'password':
+            return 'password_credentials';
+          case 'client_credentials':
+            return 'client_credentials';
+          case 'refresh_token':
+            return 'refresh_token';
+          default:
+            throw Error(`auth transforming(toPreRequestAuth): unknown auth grant type for oauth2: ${inputGrantType}`);
+        }
+      })();
+
+      return {
+        type: 'oauth2',
+        oauth2: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+
+          { key: 'grant_type', value: grantType },
+          { key: 'authUrl', value: auth.authorizationUrl || '' },
+          { key: 'accessTokenUrl', value: auth.accessTokenUrl || '' },
+          { key: 'clientId', value: auth.clientId || '' },
+          { key: 'clientSecret', value: auth.clientSecret || '' },
+          { key: 'scope', value: auth.scope || '' },
+
+          { key: 'code_verifier', value: auth.code || '' },
+          { key: 'accessToken', value: auth.accessToken || '' },
+          { key: 'challengeAlgorithm', value: auth.pkceMethod || '' },
+          // { key: 'scope', value: auth.usePkce || ''},
+          { key: 'username', value: auth.username || '' },
+          { key: 'password', value: auth.password || '' },
+
+          { key: 'callBackUrl', value: auth.redirectUrl || '' },
+          { key: 'state', value: auth.state || '' },
+          { key: 'refreshTokenUrl', value: auth.refreshToken || '' },
+          { key: 'client_authentication', value: auth.credentialsInBody ? 'body' : 'header' },
+
+          {
+            key: 'tokenRequestParams',
+            value: [
+              {
+                key: 'audience',
+                value: auth.audience || '',
+                enabled: true,
+                send_as: 'request_url', // request_body or request_header
+              },
+              {
+                key: 'resource',
+                value: auth.resource || '',
+                enabled: true,
+                send_as: 'request_url', // request_body or request_header
+              },
+            ],
+          },
+
+          // following properties are not supported in script side, still set them
+          { key: 'tokenPrefix', value: auth.tokenPrefix || '' },
+          { key: 'response_type', value: auth.responseType || '' },
+          { key: 'origin', value: auth.origin || '' },
+        ],
+      };
     }
+    case 'iam':
+      return {
+        type: 'awsv4',
+        awsv4: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'accessKey', value: auth.accessKeyId || '' },
+          { key: 'secretKey', value: auth.secretAccessKey || '' },
+          { key: 'sessionToken', value: auth.sessionToken || '' },
+          { key: 'region', value: auth.region || '' },
+          { key: 'service', value: auth.service || '' },
+        ],
+      };
+    case 'hawk':
+      return {
+        type: 'hawk',
+        hawk: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'algorithm', value: auth.algorithm || '' },
+          { key: 'authId', value: auth.id || '' },
+          { key: 'authKey', value: auth.key || '' },
+          { key: 'extraData', value: auth.ext || '' },
+          { key: 'validatePayload', value: auth.validatePayload ? 'true' : 'false' },
+          // TODO(george): these fields are not supported in Insomnia side
+          { key: 'timestamp', value: '' },
+          { key: 'delegation', value: '' },
+          { key: 'app', value: '' },
+          { key: 'nonce', value: '' },
+          { key: 'user', value: '' },
+          { key: 'includePayloadHash', value: 'false' },
+        ],
+      };
+    case 'asap':
+      return {
+        type: 'asap',
+        asap: [
+          { key: 'disabled', value: auth.disabled ? 'true' : 'false' },
+          { key: 'iss', value: auth.issuer || '' },
+          { key: 'sub', value: auth.subject || '' },
+          { key: 'aud', value: auth.audience || '' },
+          { key: 'claims', value: auth.additionalClaims || '' },
+          { key: 'kid', value: auth.keyId || '' },
+          { key: 'privateKey', value: auth.privateKey || '' },
+        ],
+      };
+    case 'netrc':
+      // TODO: not supported yet
+      throw Error('netrc auth is not supported in scripting yet');
+    default:
+      // @ts-expect-error - user can input any string
+      throw Error(`unknown auth type: ${auth.type}`);
+  }
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/certificates.ts b/packages/insomnia-scripting-environment/src/objects/certificates.ts
index b5dd36ef81..025c7fb418 100644
--- a/packages/insomnia-scripting-environment/src/objects/certificates.ts
+++ b/packages/insomnia-scripting-environment/src/objects/certificates.ts
@@ -2,65 +2,61 @@ import { Property } from './properties';
 import { UrlMatchPattern, UrlMatchPatternList } from './urls';
 
 export interface SrcRef {
-    src: string; // src is the path of the file
+  src: string; // src is the path of the file
 }
 
 export interface CertificateOptions {
-    name?: string;
-    matches?: string[];
-    key?: SrcRef;
-    cert?: SrcRef;
-    passphrase?: string;
-    pfx?: SrcRef; // PFX or PKCS12 Certificate
-    disabled?: boolean;
+  name?: string;
+  matches?: string[];
+  key?: SrcRef;
+  cert?: SrcRef;
+  passphrase?: string;
+  pfx?: SrcRef; // PFX or PKCS12 Certificate
+  disabled?: boolean;
 }
 
 export class Certificate extends Property {
-    override _kind = 'Certificate';
+  override _kind = 'Certificate';
 
-    override name?: string;
-    matches?: UrlMatchPatternList<UrlMatchPattern>;
-    key?: SrcRef;
-    cert?: SrcRef;
-    passphrase?: string;
-    pfx?: SrcRef; // PFX or PKCS12 Certificate
+  override name?: string;
+  matches?: UrlMatchPatternList<UrlMatchPattern>;
+  key?: SrcRef;
+  cert?: SrcRef;
+  passphrase?: string;
+  pfx?: SrcRef; // PFX or PKCS12 Certificate
 
-    constructor(options: CertificateOptions) {
-        super();
+  constructor(options: CertificateOptions) {
+    super();
 
-        this.name = options.name;
-        this.matches = new UrlMatchPatternList(
-            undefined,
-            options.matches ?
-                options.matches.map(matchStr => new UrlMatchPattern(matchStr)) :
-                [],
-        );
-        this.key = options.key;
-        this.cert = options.cert;
-        this.passphrase = options.passphrase;
-        this.pfx = options.pfx;
-        this.disabled = options.disabled;
-    }
+    this.name = options.name;
+    this.matches = new UrlMatchPatternList(
+      undefined,
+      options.matches ? options.matches.map(matchStr => new UrlMatchPattern(matchStr)) : [],
+    );
+    this.key = options.key;
+    this.cert = options.cert;
+    this.passphrase = options.passphrase;
+    this.pfx = options.pfx;
+    this.disabled = options.disabled;
+  }
 
-    static isCertificate(obj: object) {
-        return '_kind' in obj && obj._kind === 'Certificate';
-    }
+  static isCertificate(obj: object) {
+    return '_kind' in obj && obj._kind === 'Certificate';
+  }
 
-    canApplyTo(url: string) {
-        return this.matches ? this.matches.test(url) : false;
-    }
+  canApplyTo(url: string) {
+    return this.matches ? this.matches.test(url) : false;
+  }
 
-    update(options: CertificateOptions) {
-        this.name = options.name;
-        this.matches = new UrlMatchPatternList(
-            undefined,
-            options.matches ?
-                options.matches.map(matchStr => new UrlMatchPattern(matchStr)) :
-                [],
-        );
-        this.key = options.key;
-        this.cert = options.cert;
-        this.passphrase = options.passphrase;
-        this.pfx = options.pfx;
-    }
+  update(options: CertificateOptions) {
+    this.name = options.name;
+    this.matches = new UrlMatchPatternList(
+      undefined,
+      options.matches ? options.matches.map(matchStr => new UrlMatchPattern(matchStr)) : [],
+    );
+    this.key = options.key;
+    this.cert = options.cert;
+    this.passphrase = options.passphrase;
+    this.pfx = options.pfx;
+  }
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/console.ts b/packages/insomnia-scripting-environment/src/objects/console.ts
index c55b02ca9c..64af491ecc 100644
--- a/packages/insomnia-scripting-environment/src/objects/console.ts
+++ b/packages/insomnia-scripting-environment/src/objects/console.ts
@@ -1,81 +1,77 @@
 type LogLevel = 'debug' | 'info' | 'log' | 'warn' | 'error';
 
 export interface Row {
-    value: string;
-    name: string;
-    timestamp: number;
+  value: string;
+  name: string;
+  timestamp: number;
 }
 
 class Console {
-    rows: Row[] = [];
+  rows: Row[] = [];
 
-    // TODO: support replacing substitution
-    printLog = (rows: Row[], level: LogLevel, ...values: any) => {
-        try {
-            const content = values.map(
-                (value: any) => {
-                    return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
-                }
-            ).join(' ');
+  // TODO: support replacing substitution
+  printLog = (rows: Row[], level: LogLevel, ...values: any) => {
+    try {
+      const content = values
+        .map((value: any) => {
+          return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+        })
+        .join(' ');
 
-            const row = {
-                value: `${level}: ${content}`,
-                name: 'Text',
-                timestamp: Date.now(),
-            };
+      const row = {
+        value: `${level}: ${content}`,
+        name: 'Text',
+        timestamp: Date.now(),
+      };
 
-            rows.push(row);
-        } catch (e) {
-            rows.push({
-                value: 'error: ' + JSON.stringify(e, null, 2),
-                name: 'Text',
-                timestamp: Date.now(),
-            });
-        }
-    };
+      rows.push(row);
+    } catch (e) {
+      rows.push({
+        value: 'error: ' + JSON.stringify(e, null, 2),
+        name: 'Text',
+        timestamp: Date.now(),
+      });
+    }
+  };
 
-    log = (...values: any[]) => {
-        this.printLog(this.rows, 'log', ...values);
-    };
+  log = (...values: any[]) => {
+    this.printLog(this.rows, 'log', ...values);
+  };
 
-    warn = (...values: any[]) => {
-        this.printLog(this.rows, 'warn', ...values);
-    };
+  warn = (...values: any[]) => {
+    this.printLog(this.rows, 'warn', ...values);
+  };
 
-    debug = (...values: any[]) => {
-        this.printLog(this.rows, 'debug', ...values);
-    };
+  debug = (...values: any[]) => {
+    this.printLog(this.rows, 'debug', ...values);
+  };
 
-    info = (...values: any[]) => {
-        this.printLog(this.rows, 'info', ...values);
-    };
+  info = (...values: any[]) => {
+    this.printLog(this.rows, 'info', ...values);
+  };
 
-    error = (...values: any[]) => {
-        this.printLog(this.rows, 'error', ...values);
-    };
+  error = (...values: any[]) => {
+    this.printLog(this.rows, 'error', ...values);
+  };
 
+  clear = (_level: LogLevel, _message?: any, ..._optionalParams: any[]) => {
+    throw Error('currently "clear" is not supported for the timeline');
+  };
 
-    clear = (_level: LogLevel, _message?: any, ..._optionalParams: any[]) => {
-        throw Error('currently "clear" is not supported for the timeline');
-    };
+  dumpLogs = () => {
+    return this.rows.map(row => JSON.stringify(row) + '\n').join('\n');
+  };
 
-    dumpLogs = () => {
-        return this.rows
-            .map(row => JSON.stringify(row) + '\n')
-            .join('\n');
-    };
-
-    dumpLogsAsArray = () => {
-        return this.rows
-            .map(row => JSON.stringify(row) + '\n');
-    };
+  dumpLogsAsArray = () => {
+    return this.rows.map(row => JSON.stringify(row) + '\n');
+  };
 }
 
 let builtInConsole = new Console();
 export function getExistingConsole() {
-    return builtInConsole;
+  return builtInConsole;
 }
 export function getNewConsole() {
-    builtInConsole = new Console();
-    return builtInConsole;
+  builtInConsole = new Console();
+  return builtInConsole;
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/cookies.ts b/packages/insomnia-scripting-environment/src/objects/cookies.ts
index fc4bb89781..6cce508d64 100644
--- a/packages/insomnia-scripting-environment/src/objects/cookies.ts
+++ b/packages/insomnia-scripting-environment/src/objects/cookies.ts
@@ -6,372 +6,363 @@ import { getExistingConsole } from './console';
 import { Property, PropertyList } from './properties';
 
 export interface InsomniaCookieExtensions {
-    creation?: Date;
-    creationIndex?: number;
-    lastAccessed?: Date;
-    pathIsDefault?: boolean;
-};
+  creation?: Date;
+  creationIndex?: number;
+  lastAccessed?: Date;
+  pathIsDefault?: boolean;
+}
 
 export interface CookieOptions extends InsomniaCookieExtensions {
-    id?: string;
-    key: string;
-    value: string;
-    expires?: Date | string | null;
-    maxAge?: number | 'Infinity' | '-Infinity';
-    domain?: string;
-    path?: string;
-    secure?: boolean;
-    httpOnly?: boolean;
-    hostOnly?: boolean;
-    session?: boolean;
-    extensions?: { key: string; value: string }[];
+  id?: string;
+  key: string;
+  value: string;
+  expires?: Date | string | null;
+  maxAge?: number | 'Infinity' | '-Infinity';
+  domain?: string;
+  path?: string;
+  secure?: boolean;
+  httpOnly?: boolean;
+  hostOnly?: boolean;
+  session?: boolean;
+  extensions?: { key: string; value: string }[];
 }
 
 export class Cookie extends Property {
-    override readonly _kind: string = 'Cookie';
-    protected cookie: ToughCookie;
-    private extensions?: { key: string; value: string }[];
-    private insoExtensions: InsomniaCookieExtensions = {};
+  override readonly _kind: string = 'Cookie';
+  protected cookie: ToughCookie;
+  private extensions?: { key: string; value: string }[];
+  private insoExtensions: InsomniaCookieExtensions = {};
 
-    constructor(cookieDef: CookieOptions | string) {
-        super();
+  constructor(cookieDef: CookieOptions | string) {
+    super();
 
-        if (typeof cookieDef === 'string') {
-            const cookieDefParsed = Cookie.parse(cookieDef);
-            if (!cookieDefParsed) {
-                throw Error('failed to parse cookie, the cookie string seems invalid');
-            }
-            cookieDef = cookieDefParsed;
-        }
-
-        const def = { ...cookieDef };
-        this.extensions = def.extensions ? [...def.extensions] : [];
-        def.extensions = [];
-
-        const cookie = ToughCookie.fromJSON(def);
-        if (!cookie) {
-            throw Error('failed to parse cookie, the cookie string seems invalid');
-        }
-
-        this.id = cookieDef.id || '';
-        this.cookie = cookie;
-        this.insoExtensions = {
-            creation: cookieDef.creation,
-            creationIndex: cookieDef.creationIndex,
-            lastAccessed: cookieDef.lastAccessed,
-            pathIsDefault: cookieDef.pathIsDefault,
-        };
+    if (typeof cookieDef === 'string') {
+      const cookieDefParsed = Cookie.parse(cookieDef);
+      if (!cookieDefParsed) {
+        throw Error('failed to parse cookie, the cookie string seems invalid');
+      }
+      cookieDef = cookieDefParsed;
     }
 
-    static override _index = 'key';
+    const def = { ...cookieDef };
+    this.extensions = def.extensions ? [...def.extensions] : [];
+    def.extensions = [];
 
-    static isCookie(obj: Property) {
-        return '_kind' in obj && obj._kind === 'Cookie';
+    const cookie = ToughCookie.fromJSON(def);
+    if (!cookie) {
+      throw Error('failed to parse cookie, the cookie string seems invalid');
     }
 
-    static parse(cookieStr: string) {
-        const cookieObj = ToughCookie.parse(cookieStr, { loose: true });
-        if (!cookieObj) {
-            throw Error('failed to parse cookie, the cookie string seems invalid');
-        }
-
-        const hostOnly = cookieObj.extensions?.includes('HostOnly') || false;
-        const session = cookieObj.extensions?.includes('Session') || false;
-        if (hostOnly) {
-            cookieObj.extensions = cookieObj.extensions?.filter(item => item !== 'HostOnly') || [];
-        }
-        if (session) {
-            cookieObj.extensions = cookieObj.extensions?.filter(item => item !== 'Session') || [];
-        }
-
-        // Tough Cookies extensions works well with string[], but not {key: string; value: string}[]
-        const extensions = cookieObj.extensions?.map((entry: string | { key: string; value: string }) => {
-            if (typeof entry === 'string') {
-                const equalPos = entry.indexOf('=');
-                if (equalPos > 0) {
-                    return { key: entry.slice(0, equalPos), value: entry.slice(equalPos + 1) };
-                }
-                return { key: entry, value: 'true' };
-            } else if (
-                'key' in entry &&
-                'value' in entry &&
-                typeof entry.key === 'string' &&
-                typeof entry.value === 'string'
-            ) {
-                return { key: entry.key, value: entry.value };
-            } 
-                throw Error('failed to create cookie, extension must be: { key: string; value: string }[]');
-            
-
-        });
-
-        return {
-            key: cookieObj.key,
-            value: cookieObj.value,
-            expires: cookieObj.expires || undefined,
-            maxAge: cookieObj.maxAge,
-            domain: cookieObj.domain || undefined,
-            path: cookieObj.path || undefined,
-            secure: cookieObj.secure || false,
-            httpOnly: cookieObj.httpOnly || false,
-            hostOnly,
-            session,
-            extensions: extensions,
-        };
-    }
-
-    static stringify(cookie: Cookie) {
-        return cookie.toString();
-    }
-
-    static unparseSingle(cookieOpt: CookieOptions) {
-        const cookie = new Cookie(cookieOpt);
-        if (!cookie) {
-            throw Error('failed to unparse cookie, the cookie options seems invalid');
-        }
-        return cookie.toString();
-    }
-
-    static unparse(cookies: Cookie[]) {
-        const cookieStrs = cookies.map(cookie => cookie.toString());
-        return cookieStrs.join('; ');
-    }
-
-    override toString = () => {
-        const hostOnlyPart = this.cookie.hostOnly ? '; HostOnly' : '';
-        const sessionPart = this.cookie.extensions?.includes('session') ? '; Session' : '';
-        const extensionPart = this.extensions && this.extensions.length > 0 ?
-            '; ' + this.extensions.map(ext => `${ext.key}=${ext.value}`).join(';') :
-            '';
-
-        return this.cookie.toString() + hostOnlyPart + sessionPart + extensionPart;
+    this.id = cookieDef.id || '';
+    this.cookie = cookie;
+    this.insoExtensions = {
+      creation: cookieDef.creation,
+      creationIndex: cookieDef.creationIndex,
+      lastAccessed: cookieDef.lastAccessed,
+      pathIsDefault: cookieDef.pathIsDefault,
     };
+  }
 
-    override valueOf = () => {
-        return this.cookie.toJSON().value;
-    };
+  static override _index = 'key';
 
-    get key() {
-        return this.cookie.toJSON().key;
-    };
+  static isCookie(obj: Property) {
+    return '_kind' in obj && obj._kind === 'Cookie';
+  }
 
-    override toJSON = () => {
-        return {
-            id: this.id,
-            key: this.cookie.key,
-            value: this.cookie.value,
-            expires: this.cookie.expires === 'Infinity' ? undefined : this.cookie.expires,
-            maxAge: this.cookie.maxAge,
-            domain: this.cookie.domain,
-            path: this.cookie.path,
-            secure: this.cookie.secure,
-            httpOnly: this.cookie.httpOnly,
-            hostOnly: this.cookie.hostOnly,
-            session: this.cookie.extensions?.includes('session'),
-            extensions: this.extensions,
-            // extra fields from Insomnia
-            creation: this.insoExtensions.creation,
-            creationIndex: this.insoExtensions.creationIndex,
-            lastAccessed: this.insoExtensions.lastAccessed,
-            pathIsDefault: this.insoExtensions.pathIsDefault,
-        };
-    };
-}
-
-export class CookieList extends PropertyList<Cookie> {
-    override _kind = 'CookieList';
-
-    constructor(cookies: Cookie[]) {
-        super(
-            Cookie,
-            undefined,
-            cookies,
-        );
+  static parse(cookieStr: string) {
+    const cookieObj = ToughCookie.parse(cookieStr, { loose: true });
+    if (!cookieObj) {
+      throw Error('failed to parse cookie, the cookie string seems invalid');
     }
 
-    static isCookieList(obj: object) {
-        return '_kind' in obj && obj._kind === 'CookieList';
+    const hostOnly = cookieObj.extensions?.includes('HostOnly') || false;
+    const session = cookieObj.extensions?.includes('Session') || false;
+    if (hostOnly) {
+      cookieObj.extensions = cookieObj.extensions?.filter(item => item !== 'HostOnly') || [];
     }
-}
-
-export class CookieObject extends CookieList {
-    private cookieJar: CookieJar;
-
-    constructor(cookieJar: InsomniaCookieJar | null) {
-        const cookies = cookieJar
-            ? cookieJar.cookies.map((cookie: InsomniaCookie): Cookie => {
-                let expires: string | Date | null = null;
-                if (cookie.expires || cookie.expires === 0) {
-                    if (typeof cookie.expires === 'number') {
-                        expires = new Date(cookie.expires);
-                    } else {
-                        expires = cookie.expires;
-                    }
-                }
-
-                return new Cookie({
-                    id: cookie.id,
-                    key: cookie.key,
-                    value: cookie.value,
-                    expires: expires,
-                    maxAge: undefined, // not supported in Insomnia
-                    domain: cookie.domain,
-                    path: cookie.path,
-                    secure: cookie.secure,
-                    httpOnly: cookie.httpOnly,
-                    hostOnly: cookie.hostOnly,
-                    session: undefined, // not supported in Insomnia
-                    extensions: undefined, // TODO: its format from Insomnia is unknown
-                    // follows are properties from Insomnia
-                    creation: cookie.creation,
-                    creationIndex: cookie.creationIndex,
-                    lastAccessed: cookie.lastAccessed,
-                    pathIsDefault: cookie.pathIsDefault,
-                });
-            })
-            : [];
-
-        super(cookies);
-        const scriptCookieJar = cookieJar ? new CookieJar(cookieJar.name, cookies) : new CookieJar('', []);
-        this.cookieJar = scriptCookieJar;
-        this.typeClass = Cookie;
+    if (session) {
+      cookieObj.extensions = cookieObj.extensions?.filter(item => item !== 'Session') || [];
     }
 
-    jar() {
-        return this.cookieJar;
-    }
-}
-
-export class CookieJar {
-    // CookieJar from tough-cookie can not be used, as it will fail in comparing context location and cookies' domain
-    // as it reads location from the browser window, it is "localhost"
-    private jar: Map<string, Map<string, Cookie>>; // Map<domain, Map<cookieKey, cookieObject>>
-    private jarName: string;
-
-    constructor(jarName: string, cookies?: Cookie[]) {
-        this.jarName = jarName;
-        this.jar = new Map();
-
-        if (cookies) {
-            cookies.forEach(cookie => {
-                const properties = cookie.toJSON();
-                if (!properties.domain) {
-                    getExistingConsole().warn(`domain is not specified for the cookie "${cookie.key}" so it is omitted`);
-                    return;
-                }
-
-                const domainCookies = this.jar.get(properties.domain) || new Map();
-                this.jar.set(properties.domain, domainCookies.set(properties.key, cookie));
-            });
+    // Tough Cookies extensions works well with string[], but not {key: string; value: string}[]
+    const extensions = cookieObj.extensions?.map((entry: string | { key: string; value: string }) => {
+      if (typeof entry === 'string') {
+        const equalPos = entry.indexOf('=');
+        if (equalPos > 0) {
+          return { key: entry.slice(0, equalPos), value: entry.slice(equalPos + 1) };
         }
-    }
-
-    set(url: string, key: string, value: string | CookieOptions, cb: (error?: Error, cookie?: Cookie) => void) {
-        const domainCookies = this.jar.get(url) || new Map();
-        if (typeof value === 'string') {
-            const domainCookie = new Cookie({
-                key: key,
-                value: value,
-                domain: url,
-            });
-            this.jar.set(url, domainCookies.set(key, domainCookie));
-            cb(undefined, domainCookie);
-        } else {
-            const domainCookie = new Cookie(value);
-            this.jar.set(url, domainCookies.set(key, domainCookie));
-            cb(undefined, domainCookie);
-        }
-    }
-
-    // TODO: create a better method for setting cookie, or overload the above method
-    // set(
-    //     url: string,
-    //     info: { name: string; value: string; httpOnly: boolean },
-    //     cb: (error?: Error, cookie?: Cookie) => void,
-    // ) {
-    //     try {
-    //         const cookie = new ToughCookie({ key: info.name, value: info.value, httpOnly: info.httpOnly });
-    //         this.jar.setCookieSync(cookie, url, { http: info.httpOnly });
-    //         cb(undefined, new Cookie({ key: info.name, value: info.value, httpOnly: info.httpOnly }));
-    //     } catch (e) {
-    //         cb(e, undefined);
-    //     }
-    // }
-
-    get(url: string, name: string, cb: (error?: Error, cookie?: Cookie) => void) {
-        const domainCookies = this.jar.get(url) || new Map();
-        cb(undefined, domainCookies.get(name));
-    }
-
-    getAll(url: string, cb: (error?: Error, cookies?: Cookie[]) => void) {
-        const domainCookies = this.jar.get(url) || new Map();
-        cb(
-            undefined,
-            Array.from(domainCookies.values()),
-        );
-    }
-
-    unset(url: string, name: string, cb: (error?: Error | null) => void) {
-        const domainCookies = this.jar.get(url);
-        if (!domainCookies) {
-            cb(undefined);
-        } else {
-            domainCookies.delete(name);
-            cb(undefined);
-        }
-    }
-
-    clear(url: string, cb: (error?: Error | null) => void) {
-        this.jar.delete(url);
-        cb(undefined);
-    }
-
-    toInsomniaCookieJar() {
-        const cookies = new Array<Partial<InsomniaCookie>>();
-        Array.from(this.jar.values())
-            .forEach((domainCookies: Map<string, Cookie>) => {
-                Array.from(domainCookies.values()).forEach(cookie => {
-                    const cookieObj = cookie.toJSON();
-                    cookies.push({
-                        id: cookieObj.id,
-                        key: cookieObj.key,
-                        value: cookieObj.value,
-                        expires: cookieObj.expires || 'Infinity', // transform it back to 'Infinity', avoid edge cases
-                        domain: cookieObj.domain || undefined,
-                        path: cookieObj.path || undefined,
-                        secure: cookieObj.secure,
-                        httpOnly: cookieObj.httpOnly,
-                        extensions: cookieObj.extensions || undefined,
-                        creation: cookieObj.creation,
-                        creationIndex: cookieObj.creationIndex,
-                        hostOnly: cookieObj.hostOnly || undefined,
-                        pathIsDefault: cookieObj.pathIsDefault,
-                        lastAccessed: cookieObj.lastAccessed,
-                    });
-                });
-            });
-
-        return {
-            name: this.jarName,
-            cookies,
-        };
-    }
-}
-
-export function mergeCookieJar(
-    originalCookieJar: InsomniaCookieJar,
-    updatedCookieJar: { name: string; cookies: Partial<InsomniaCookie>[] },
-): InsomniaCookieJar {
-    const cookiesWithId = updatedCookieJar.cookies.map((cookie): InsomniaCookie => {
-        if (!cookie.id) {
-            // this follows the generation approach in the `cookie-list.tsx`
-            cookie.id = uuidv4();
-        }
-        return cookie as InsomniaCookie;
+        return { key: entry, value: 'true' };
+      } else if (
+        'key' in entry &&
+        'value' in entry &&
+        typeof entry.key === 'string' &&
+        typeof entry.value === 'string'
+      ) {
+        return { key: entry.key, value: entry.value };
+      }
+      throw Error('failed to create cookie, extension must be: { key: string; value: string }[]');
     });
 
     return {
-        ...originalCookieJar,
-        cookies: cookiesWithId,
+      key: cookieObj.key,
+      value: cookieObj.value,
+      expires: cookieObj.expires || undefined,
+      maxAge: cookieObj.maxAge,
+      domain: cookieObj.domain || undefined,
+      path: cookieObj.path || undefined,
+      secure: cookieObj.secure || false,
+      httpOnly: cookieObj.httpOnly || false,
+      hostOnly,
+      session,
+      extensions: extensions,
     };
+  }
+
+  static stringify(cookie: Cookie) {
+    return cookie.toString();
+  }
+
+  static unparseSingle(cookieOpt: CookieOptions) {
+    const cookie = new Cookie(cookieOpt);
+    if (!cookie) {
+      throw Error('failed to unparse cookie, the cookie options seems invalid');
+    }
+    return cookie.toString();
+  }
+
+  static unparse(cookies: Cookie[]) {
+    const cookieStrs = cookies.map(cookie => cookie.toString());
+    return cookieStrs.join('; ');
+  }
+
+  override toString = () => {
+    const hostOnlyPart = this.cookie.hostOnly ? '; HostOnly' : '';
+    const sessionPart = this.cookie.extensions?.includes('session') ? '; Session' : '';
+    const extensionPart =
+      this.extensions && this.extensions.length > 0
+        ? '; ' + this.extensions.map(ext => `${ext.key}=${ext.value}`).join(';')
+        : '';
+
+    return this.cookie.toString() + hostOnlyPart + sessionPart + extensionPart;
+  };
+
+  override valueOf = () => {
+    return this.cookie.toJSON().value;
+  };
+
+  get key() {
+    return this.cookie.toJSON().key;
+  }
+
+  override toJSON = () => {
+    return {
+      id: this.id,
+      key: this.cookie.key,
+      value: this.cookie.value,
+      expires: this.cookie.expires === 'Infinity' ? undefined : this.cookie.expires,
+      maxAge: this.cookie.maxAge,
+      domain: this.cookie.domain,
+      path: this.cookie.path,
+      secure: this.cookie.secure,
+      httpOnly: this.cookie.httpOnly,
+      hostOnly: this.cookie.hostOnly,
+      session: this.cookie.extensions?.includes('session'),
+      extensions: this.extensions,
+      // extra fields from Insomnia
+      creation: this.insoExtensions.creation,
+      creationIndex: this.insoExtensions.creationIndex,
+      lastAccessed: this.insoExtensions.lastAccessed,
+      pathIsDefault: this.insoExtensions.pathIsDefault,
+    };
+  };
+}
+
+export class CookieList extends PropertyList<Cookie> {
+  override _kind = 'CookieList';
+
+  constructor(cookies: Cookie[]) {
+    super(Cookie, undefined, cookies);
+  }
+
+  static isCookieList(obj: object) {
+    return '_kind' in obj && obj._kind === 'CookieList';
+  }
+}
+
+export class CookieObject extends CookieList {
+  private cookieJar: CookieJar;
+
+  constructor(cookieJar: InsomniaCookieJar | null) {
+    const cookies = cookieJar
+      ? cookieJar.cookies.map((cookie: InsomniaCookie): Cookie => {
+          let expires: string | Date | null = null;
+          if (cookie.expires || cookie.expires === 0) {
+            if (typeof cookie.expires === 'number') {
+              expires = new Date(cookie.expires);
+            } else {
+              expires = cookie.expires;
+            }
+          }
+
+          return new Cookie({
+            id: cookie.id,
+            key: cookie.key,
+            value: cookie.value,
+            expires: expires,
+            maxAge: undefined, // not supported in Insomnia
+            domain: cookie.domain,
+            path: cookie.path,
+            secure: cookie.secure,
+            httpOnly: cookie.httpOnly,
+            hostOnly: cookie.hostOnly,
+            session: undefined, // not supported in Insomnia
+            extensions: undefined, // TODO: its format from Insomnia is unknown
+            // follows are properties from Insomnia
+            creation: cookie.creation,
+            creationIndex: cookie.creationIndex,
+            lastAccessed: cookie.lastAccessed,
+            pathIsDefault: cookie.pathIsDefault,
+          });
+        })
+      : [];
+
+    super(cookies);
+    const scriptCookieJar = cookieJar ? new CookieJar(cookieJar.name, cookies) : new CookieJar('', []);
+    this.cookieJar = scriptCookieJar;
+    this.typeClass = Cookie;
+  }
+
+  jar() {
+    return this.cookieJar;
+  }
+}
+
+export class CookieJar {
+  // CookieJar from tough-cookie can not be used, as it will fail in comparing context location and cookies' domain
+  // as it reads location from the browser window, it is "localhost"
+  private jar: Map<string, Map<string, Cookie>>; // Map<domain, Map<cookieKey, cookieObject>>
+  private jarName: string;
+
+  constructor(jarName: string, cookies?: Cookie[]) {
+    this.jarName = jarName;
+    this.jar = new Map();
+
+    if (cookies) {
+      cookies.forEach(cookie => {
+        const properties = cookie.toJSON();
+        if (!properties.domain) {
+          getExistingConsole().warn(`domain is not specified for the cookie "${cookie.key}" so it is omitted`);
+          return;
+        }
+
+        const domainCookies = this.jar.get(properties.domain) || new Map();
+        this.jar.set(properties.domain, domainCookies.set(properties.key, cookie));
+      });
+    }
+  }
+
+  set(url: string, key: string, value: string | CookieOptions, cb: (error?: Error, cookie?: Cookie) => void) {
+    const domainCookies = this.jar.get(url) || new Map();
+    if (typeof value === 'string') {
+      const domainCookie = new Cookie({
+        key: key,
+        value: value,
+        domain: url,
+      });
+      this.jar.set(url, domainCookies.set(key, domainCookie));
+      cb(undefined, domainCookie);
+    } else {
+      const domainCookie = new Cookie(value);
+      this.jar.set(url, domainCookies.set(key, domainCookie));
+      cb(undefined, domainCookie);
+    }
+  }
+
+  // TODO: create a better method for setting cookie, or overload the above method
+  // set(
+  //     url: string,
+  //     info: { name: string; value: string; httpOnly: boolean },
+  //     cb: (error?: Error, cookie?: Cookie) => void,
+  // ) {
+  //     try {
+  //         const cookie = new ToughCookie({ key: info.name, value: info.value, httpOnly: info.httpOnly });
+  //         this.jar.setCookieSync(cookie, url, { http: info.httpOnly });
+  //         cb(undefined, new Cookie({ key: info.name, value: info.value, httpOnly: info.httpOnly }));
+  //     } catch (e) {
+  //         cb(e, undefined);
+  //     }
+  // }
+
+  get(url: string, name: string, cb: (error?: Error, cookie?: Cookie) => void) {
+    const domainCookies = this.jar.get(url) || new Map();
+    cb(undefined, domainCookies.get(name));
+  }
+
+  getAll(url: string, cb: (error?: Error, cookies?: Cookie[]) => void) {
+    const domainCookies = this.jar.get(url) || new Map();
+    cb(undefined, Array.from(domainCookies.values()));
+  }
+
+  unset(url: string, name: string, cb: (error?: Error | null) => void) {
+    const domainCookies = this.jar.get(url);
+    if (!domainCookies) {
+      cb(undefined);
+    } else {
+      domainCookies.delete(name);
+      cb(undefined);
+    }
+  }
+
+  clear(url: string, cb: (error?: Error | null) => void) {
+    this.jar.delete(url);
+    cb(undefined);
+  }
+
+  toInsomniaCookieJar() {
+    const cookies = new Array<Partial<InsomniaCookie>>();
+    Array.from(this.jar.values()).forEach((domainCookies: Map<string, Cookie>) => {
+      Array.from(domainCookies.values()).forEach(cookie => {
+        const cookieObj = cookie.toJSON();
+        cookies.push({
+          id: cookieObj.id,
+          key: cookieObj.key,
+          value: cookieObj.value,
+          expires: cookieObj.expires || 'Infinity', // transform it back to 'Infinity', avoid edge cases
+          domain: cookieObj.domain || undefined,
+          path: cookieObj.path || undefined,
+          secure: cookieObj.secure,
+          httpOnly: cookieObj.httpOnly,
+          extensions: cookieObj.extensions || undefined,
+          creation: cookieObj.creation,
+          creationIndex: cookieObj.creationIndex,
+          hostOnly: cookieObj.hostOnly || undefined,
+          pathIsDefault: cookieObj.pathIsDefault,
+          lastAccessed: cookieObj.lastAccessed,
+        });
+      });
+    });
+
+    return {
+      name: this.jarName,
+      cookies,
+    };
+  }
+}
+
+export function mergeCookieJar(
+  originalCookieJar: InsomniaCookieJar,
+  updatedCookieJar: { name: string; cookies: Partial<InsomniaCookie>[] },
+): InsomniaCookieJar {
+  const cookiesWithId = updatedCookieJar.cookies.map((cookie): InsomniaCookie => {
+    if (!cookie.id) {
+      // this follows the generation approach in the `cookie-list.tsx`
+      cookie.id = uuidv4();
+    }
+    return cookie as InsomniaCookie;
+  });
+
+  return {
+    ...originalCookieJar,
+    cookies: cookiesWithId,
+  };
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/environments.ts b/packages/insomnia-scripting-environment/src/objects/environments.ts
index 885fcdf0cb..0ae2f27762 100644
--- a/packages/insomnia-scripting-environment/src/objects/environments.ts
+++ b/packages/insomnia-scripting-environment/src/objects/environments.ts
@@ -2,181 +2,181 @@ import { getExistingConsole } from './console';
 import { getInterpolator } from './interpolator';
 
 export class Environment {
-    private _name: string;
-    private kvs = new Map<string, boolean | number | string | undefined>();
+  private _name: string;
+  private kvs = new Map<string, boolean | number | string | undefined>();
 
-    constructor(name: string, jsonObject: object | undefined) {
-        this._name = name;
-        this.kvs = new Map(Object.entries(jsonObject || {}));
+  constructor(name: string, jsonObject: object | undefined) {
+    this._name = name;
+    this.kvs = new Map(Object.entries(jsonObject || {}));
+  }
+
+  get name() {
+    return this._name;
+  }
+
+  has = (variableName: string) => {
+    return this.kvs.has(variableName);
+  };
+
+  get = (variableName: string) => {
+    return this.kvs.get(variableName);
+  };
+
+  set = (variableName: string, variableValue: boolean | number | string | undefined | null) => {
+    if (variableValue === null) {
+      getExistingConsole().warn(`Variable "${variableName}" has a null value`);
+      return;
     }
+    this.kvs.set(variableName, variableValue);
+  };
 
-    get name() {
-        return this._name;
-    }
+  unset = (variableName: string) => {
+    this.kvs.delete(variableName);
+  };
 
-    has = (variableName: string) => {
-        return this.kvs.has(variableName);
-    };
+  clear = () => {
+    this.kvs.clear();
+  };
 
-    get = (variableName: string) => {
-        return this.kvs.get(variableName);
-    };
+  replaceIn = (template: string) => {
+    return getInterpolator().render(template, this.toObject());
+  };
 
-    set = (variableName: string, variableValue: boolean | number | string | undefined | null) => {
-        if (variableValue === null) {
-            getExistingConsole().warn(`Variable "${variableName}" has a null value`);
-            return;
-        }
-        this.kvs.set(variableName, variableValue);
-    };
-
-    unset = (variableName: string) => {
-        this.kvs.delete(variableName);
-    };
-
-    clear = () => {
-        this.kvs.clear();
-    };
-
-    replaceIn = (template: string) => {
-        return getInterpolator().render(template, this.toObject());
-    };
-
-    toObject = () => {
-        return Object.fromEntries(this.kvs.entries());
-    };
+  toObject = () => {
+    return Object.fromEntries(this.kvs.entries());
+  };
 }
 
 function mergeFolderLevelVars(folderLevelVars: Environment[]) {
-    const mergedFolderLevelObject = folderLevelVars.reduce((merged: object, folderLevelEnv: Environment) => {
-        return { ...merged, ...folderLevelEnv.toObject() };
-    }, {});
-    return new Environment('mergedFolderLevelVars', mergedFolderLevelObject);
+  const mergedFolderLevelObject = folderLevelVars.reduce((merged: object, folderLevelEnv: Environment) => {
+    return { ...merged, ...folderLevelEnv.toObject() };
+  }, {});
+  return new Environment('mergedFolderLevelVars', mergedFolderLevelObject);
 }
 
 export class Variables {
-    // TODO: support vars for all levels
-    private globalVars: Environment;
-    private collectionVars: Environment;
-    private environmentVars: Environment;
-    private iterationDataVars: Environment;
-    private folderLevelVars: Environment[];
-    private localVars: Environment;
+  // TODO: support vars for all levels
+  private globalVars: Environment;
+  private collectionVars: Environment;
+  private environmentVars: Environment;
+  private iterationDataVars: Environment;
+  private folderLevelVars: Environment[];
+  private localVars: Environment;
 
-    constructor(
-        args: {
-            globalVars: Environment;
-            collectionVars: Environment;
-            environmentVars: Environment;
-            iterationDataVars: Environment;
-            folderLevelVars: Environment[];
-            localVars: Environment;
-        },
-    ) {
-        this.globalVars = args.globalVars;
-        this.collectionVars = args.collectionVars;
-        this.environmentVars = args.environmentVars;
-        this.iterationDataVars = args.iterationDataVars;
-        this.folderLevelVars = args.folderLevelVars;
-        this.localVars = args.localVars;
+  constructor(args: {
+    globalVars: Environment;
+    collectionVars: Environment;
+    environmentVars: Environment;
+    iterationDataVars: Environment;
+    folderLevelVars: Environment[];
+    localVars: Environment;
+  }) {
+    this.globalVars = args.globalVars;
+    this.collectionVars = args.collectionVars;
+    this.environmentVars = args.environmentVars;
+    this.iterationDataVars = args.iterationDataVars;
+    this.folderLevelVars = args.folderLevelVars;
+    this.localVars = args.localVars;
+  }
+
+  has = (variableName: string) => {
+    const globalVarsHas = this.globalVars.has(variableName);
+    const collectionVarsHas = this.collectionVars.has(variableName);
+    const environmentVarsHas = this.environmentVars.has(variableName);
+    const iterationDataVarsHas = this.iterationDataVars.has(variableName);
+    const folderLevelVarsHas = this.folderLevelVars.some(vars => vars.has(variableName));
+    const localVarsHas = this.localVars.has(variableName);
+
+    return (
+      globalVarsHas ||
+      collectionVarsHas ||
+      environmentVarsHas ||
+      iterationDataVarsHas ||
+      folderLevelVarsHas ||
+      localVarsHas
+    );
+  };
+
+  get = (variableName: string) => {
+    let finalVal: boolean | number | string | object | undefined = undefined;
+    [
+      this.localVars,
+      mergeFolderLevelVars(this.folderLevelVars),
+      this.iterationDataVars,
+      this.environmentVars,
+      this.collectionVars,
+      this.globalVars,
+    ].forEach(vars => {
+      const value = vars.get(variableName);
+      if (!finalVal && value) {
+        finalVal = value;
+      }
+    });
+
+    return finalVal;
+  };
+
+  set = (variableName: string, variableValue: boolean | number | string | undefined | null) => {
+    if (variableValue === null) {
+      getExistingConsole().warn(`Variable "${variableName}" has a null value`);
+      return;
     }
 
-    has = (variableName: string) => {
-        const globalVarsHas = this.globalVars.has(variableName);
-        const collectionVarsHas = this.collectionVars.has(variableName);
-        const environmentVarsHas = this.environmentVars.has(variableName);
-        const iterationDataVarsHas = this.iterationDataVars.has(variableName);
-        const folderLevelVarsHas = this.folderLevelVars.some(vars => vars.has(variableName));
-        const localVarsHas = this.localVars.has(variableName);
+    this.localVars.set(variableName, variableValue);
+  };
 
-        return globalVarsHas || collectionVarsHas || environmentVarsHas || iterationDataVarsHas || folderLevelVarsHas || localVarsHas;
-    };
+  replaceIn = (template: string) => {
+    const context = this.toObject();
+    return getInterpolator().render(template, context);
+  };
 
-    get = (variableName: string) => {
-        let finalVal: boolean | number | string | object | undefined = undefined;
-        [
-            this.localVars,
-            mergeFolderLevelVars(this.folderLevelVars),
-            this.iterationDataVars,
-            this.environmentVars,
-            this.collectionVars,
-            this.globalVars,
-        ].forEach(vars => {
-            const value = vars.get(variableName);
-            if (!finalVal && value) {
-                finalVal = value;
-            }
-        });
+  toObject = () => {
+    return [
+      this.globalVars,
+      this.collectionVars,
+      this.environmentVars,
+      this.iterationDataVars,
+      mergeFolderLevelVars(this.folderLevelVars),
+      this.localVars,
+    ]
+      .map(vars => vars.toObject())
+      .reduce((ctx, obj) => ({ ...ctx, ...obj }), {});
+  };
 
-        return finalVal;
-    };
-
-    set = (variableName: string, variableValue: boolean | number | string | undefined | null) => {
-        if (variableValue === null) {
-            getExistingConsole().warn(`Variable "${variableName}" has a null value`);
-            return;
-        }
-
-        this.localVars.set(variableName, variableValue);
-    };
-
-    replaceIn = (template: string) => {
-        const context = this.toObject();
-        return getInterpolator().render(template, context);
-    };
-
-    toObject = () => {
-        return [
-            this.globalVars,
-            this.collectionVars,
-            this.environmentVars,
-            this.iterationDataVars,
-            mergeFolderLevelVars(this.folderLevelVars),
-            this.localVars,
-        ].map(
-            vars => vars.toObject()
-        ).reduce(
-            (ctx, obj) => ({ ...ctx, ...obj }),
-            {},
-        );
-    };
-
-    localVarsToObject = () => {
-        return this.localVars.toObject();
-    };
+  localVarsToObject = () => {
+    return this.localVars.toObject();
+  };
 }
 
 export class Vault extends Environment {
+  constructor(name: string, jsonObject: object | undefined, enableVaultInScripts: boolean) {
+    super(name, jsonObject);
+    return new Proxy(this, {
+      // throw error on get or set method call if enableVaultInScripts is false
+      get: (target, prop, receiver) => {
+        if (!enableVaultInScripts) {
+          throw new Error('Vault is disabled in script');
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+      set: (target, prop, value, receiver) => {
+        if (!enableVaultInScripts) {
+          throw new Error('Vault is disabled in script');
+        }
+        return Reflect.set(target, prop, value, receiver);
+      },
+    });
+  }
 
-    constructor(name: string, jsonObject: object | undefined, enableVaultInScripts: boolean) {
-        super(name, jsonObject);
-        return new Proxy(this, {
-            // throw error on get or set method call if enableVaultInScripts is false
-            get: (target, prop, receiver) => {
-                if (!enableVaultInScripts) {
-                    throw new Error('Vault is disabled in script');
-                }
-                return Reflect.get(target, prop, receiver);
-            },
-            set: (target, prop, value, receiver) => {
-                if (!enableVaultInScripts) {
-                    throw new Error('Vault is disabled in script');
-                }
-                return Reflect.set(target, prop, value, receiver);
-            },
-        });
-    }
+  unset = () => {
+    throw new Error('Vault can not be unset in script');
+  };
 
-    unset = () => {
-        throw new Error('Vault can not be unset in script');
-    };
-
-    clear = () => {
-        throw new Error('Vault can not be cleared in script');
-    };
-
-    set = () => {
-        throw new Error('Vault can not be set in script');
-    };
+  clear = () => {
+    throw new Error('Vault can not be cleared in script');
+  };
 
+  set = () => {
+    throw new Error('Vault can not be set in script');
+  };
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/execution.ts b/packages/insomnia-scripting-environment/src/objects/execution.ts
index 1167669083..395a933da1 100644
--- a/packages/insomnia-scripting-environment/src/objects/execution.ts
+++ b/packages/insomnia-scripting-environment/src/objects/execution.ts
@@ -17,7 +17,7 @@ export class Execution {
         get: (target, prop, receiver) => {
           if (prop === 'current') {
             return target.length > 0 ? target[target.length - 1] : '';
-          };
+          }
           return Reflect.get(target, prop, receiver);
         },
       });
@@ -26,7 +26,7 @@ export class Execution {
     } else {
       throw new Error('Location input must be array of string');
     }
-  };
+  }
 
   skipRequest = () => {
     this._skipRequest = true;
@@ -43,4 +43,4 @@ export class Execution {
       nextRequestIdOrName: this._nextRequestIdOrName,
     };
   };
-};
+}
diff --git a/packages/insomnia-scripting-environment/src/objects/folders.ts b/packages/insomnia-scripting-environment/src/objects/folders.ts
index e12bedd8da..24d6715a6f 100644
--- a/packages/insomnia-scripting-environment/src/objects/folders.ts
+++ b/packages/insomnia-scripting-environment/src/objects/folders.ts
@@ -2,63 +2,63 @@ import { Environment } from './environments';
 
 // Folder reprensents a request folder in Insomnia.
 export class Folder {
-    id: string;
-    name: string;
-    environment: Environment;
+  id: string;
+  name: string;
+  environment: Environment;
 
-    constructor(id: string, name: string, environmentObject: object | undefined) {
-        this.id = id;
-        this.name = name;
-        this.environment = new Environment(`${id}.environment`, environmentObject);
-    }
+  constructor(id: string, name: string, environmentObject: object | undefined) {
+    this.id = id;
+    this.name = name;
+    this.environment = new Environment(`${id}.environment`, environmentObject);
+  }
 
-    toObject = () => {
-        return {
-            id: this.id,
-            name: this.name,
-            environment: this.environment.toObject(),
-        };
+  toObject = () => {
+    return {
+      id: this.id,
+      name: this.name,
+      environment: this.environment.toObject(),
     };
+  };
 }
 
 // ParentFolders reprensents ancestor folders of the active request
 export class ParentFolders {
-    constructor(private folders: Folder[]) { }
+  constructor(private folders: Folder[]) {}
 
-    get = (idOrName: string) => {
-        const folder = this.folders.find(folder => folder.name === idOrName || folder.id === idOrName);
-        if (!folder) {
-            throw Error(`Folder "${idOrName}" not found`);
-        }
-        return folder;
-    };
+  get = (idOrName: string) => {
+    const folder = this.folders.find(folder => folder.name === idOrName || folder.id === idOrName);
+    if (!folder) {
+      throw Error(`Folder "${idOrName}" not found`);
+    }
+    return folder;
+  };
 
-    getById = (id: string) => {
-        const folder = this.folders.find(folder => folder.id === id);
-        if (!folder) {
-            throw Error(`Folder "${id}" not found`);
-        }
-        return folder;
-    };
+  getById = (id: string) => {
+    const folder = this.folders.find(folder => folder.id === id);
+    if (!folder) {
+      throw Error(`Folder "${id}" not found`);
+    }
+    return folder;
+  };
 
-    getByName = (folderName: string) => {
-        const folder = this.folders.find(folder => folder.name === folderName);
-        if (!folder) {
-            throw Error(`Folder "${folderName}" not found`);
-        }
-        return folder;
-    };
+  getByName = (folderName: string) => {
+    const folder = this.folders.find(folder => folder.name === folderName);
+    if (!folder) {
+      throw Error(`Folder "${folderName}" not found`);
+    }
+    return folder;
+  };
 
-    findValue = (valueKey: string) => {
-        const targetEnv = [...this.folders].reverse().find(folder => folder.environment.has(valueKey));
-        return targetEnv !== undefined ? targetEnv.environment.get(valueKey) : undefined;
-    };
+  findValue = (valueKey: string) => {
+    const targetEnv = [...this.folders].reverse().find(folder => folder.environment.has(valueKey));
+    return targetEnv !== undefined ? targetEnv.environment.get(valueKey) : undefined;
+  };
 
-    toObject = () => {
-        return this.folders.map(folder => folder.toObject());
-    };
+  toObject = () => {
+    return this.folders.map(folder => folder.toObject());
+  };
 
-    getEnvironments = () => {
-        return this.folders.map(folder => folder.environment);
-    };
+  getEnvironments = () => {
+    return this.folders.map(folder => folder.environment);
+  };
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/headers.ts b/packages/insomnia-scripting-environment/src/objects/headers.ts
index 931fb67e95..9275df047a 100644
--- a/packages/insomnia-scripting-environment/src/objects/headers.ts
+++ b/packages/insomnia-scripting-environment/src/objects/headers.ts
@@ -1,119 +1,108 @@
 import { Property, PropertyList } from './properties';
 
 export interface HeaderDefinition {
-    key: string;
-    value: string;
-    id?: string;
-    name?: string;
-    type?: string;
-    disabled?: boolean;
+  key: string;
+  value: string;
+  id?: string;
+  name?: string;
+  type?: string;
+  disabled?: boolean;
 }
 
 export class Header extends Property {
-    override _kind = 'Header';
-    type = '';
-    key: string;
-    value: string;
+  override _kind = 'Header';
+  type = '';
+  key: string;
+  value: string;
 
-    constructor(
-        opts: HeaderDefinition | string,
-        name?: string, // if it is defined, it overrides 'key' (not 'name')
-    ) {
-        super();
+  constructor(
+    opts: HeaderDefinition | string,
+    name?: string, // if it is defined, it overrides 'key' (not 'name')
+  ) {
+    super();
 
-        if (typeof opts === 'string') {
-            const obj = Header.parseSingle(opts);
-            this.key = obj.key;
-            this.value = obj.value;
-        } else {
-            this.id = opts.id ? opts.id : '';
-            this.key = opts.key ? opts.key : '';
-            this.name = name ? name : (opts.name ? opts.name : '');
-            this.value = opts.value ? opts.value : '';
-            this.type = opts.type ? opts.type : '';
-            this.disabled = opts ? opts.disabled : false;
-        }
+    if (typeof opts === 'string') {
+      const obj = Header.parseSingle(opts);
+      this.key = obj.key;
+      this.value = obj.value;
+    } else {
+      this.id = opts.id ? opts.id : '';
+      this.key = opts.key ? opts.key : '';
+      this.name = name ? name : opts.name ? opts.name : '';
+      this.value = opts.value ? opts.value : '';
+      this.type = opts.type ? opts.type : '';
+      this.disabled = opts ? opts.disabled : false;
+    }
+  }
+
+  static override _index = 'key';
+
+  static create(input?: { key: string; value: string } | string, name?: string): Header {
+    return new Header(input || { key: '', value: '' }, name);
+  }
+
+  static isHeader(obj: object) {
+    return '_kind' in obj && obj._kind === 'Header';
+  }
+
+  // example: 'Content-Type: application/json\nUser-Agent: MyClientLibrary/2.0\n'
+  static parse(headerString: string): { key: string; value: string }[] {
+    return headerString
+      .split('\n')
+      .filter(kvPart => kvPart.trim() !== '')
+      .map(kvPart => Header.parseSingle(kvPart));
+  }
+
+  static parseSingle(headerStr: string): { key: string; value: string } {
+    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
+    // the first colon is the separator
+    const separatorPos = headerStr.indexOf(':');
+
+    if (separatorPos <= 0) {
+      throw Error('Header.parseSingle: the header string seems invalid');
     }
 
-    static override _index = 'key';
+    const key = headerStr.slice(0, separatorPos);
+    const value = headerStr.slice(separatorPos + 1);
 
-    static create(input?: { key: string; value: string } | string, name?: string): Header {
-        return new Header(input || { key: '', value: '' }, name);
-    }
+    return { key: key.trim(), value: value.trim() };
+  }
 
-    static isHeader(obj: object) {
-        return '_kind' in obj && obj._kind === 'Header';
-    }
+  static unparse(headers: { key: string; value: string }[] | PropertyList<Header>, separator?: string): string {
+    const headerArray: { key: string; value: string }[] = [...headers.map(header => this.unparseSingle(header), {})];
 
-    // example: 'Content-Type: application/json\nUser-Agent: MyClientLibrary/2.0\n'
-    static parse(headerString: string): { key: string; value: string }[] {
-        return headerString
-            .split('\n')
-            .filter(kvPart => kvPart.trim() !== '')
-            .map(kvPart => Header.parseSingle(kvPart));
-    }
+    return headerArray.join(separator || '\n');
+  }
 
-    static parseSingle(headerStr: string): { key: string; value: string } {
-        // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
-        // the first colon is the separator
-        const separatorPos = headerStr.indexOf(':');
+  static unparseSingle(header: { key: string; value: string } | Header): string {
+    // both PropertyList and object contains 'key' and 'value'
+    return `${header.key}: ${header.value}`;
+  }
 
-        if (separatorPos <= 0) {
-            throw Error('Header.parseSingle: the header string seems invalid');
-        }
+  update(newHeader: { key: string; value: string }) {
+    this.key = newHeader.key;
+    this.value = newHeader.value;
+  }
 
-        const key = headerStr.slice(0, separatorPos);
-        const value = headerStr.slice(separatorPos + 1);
-
-        return { key: key.trim(), value: value.trim() };
-    }
-
-    static unparse(headers: { key: string; value: string }[] | PropertyList<Header>, separator?: string): string {
-        const headerArray: { key: string; value: string }[] = [
-            ...headers.map(
-                header => this.unparseSingle(header), {}
-            ),
-        ];
-
-        return headerArray.join(separator || '\n');
-    }
-
-    static unparseSingle(header: { key: string; value: string } | Header): string {
-        // both PropertyList and object contains 'key' and 'value'
-        return `${header.key}: ${header.value}`;
-    }
-
-    update(newHeader: { key: string; value: string }) {
-        this.key = newHeader.key;
-        this.value = newHeader.value;
-    }
-
-    override valueOf() {
-        return this.value;
-    }
+  override valueOf() {
+    return this.value;
+  }
 }
 
 export class HeaderList<T extends Header> extends PropertyList<T> {
-    constructor(
-        parent: PropertyList<T> | undefined,
-        populate: T[]
-    ) {
-        super(
-            Header,
-            undefined,
-            populate
-        );
-        this.parent = parent;
-    }
+  constructor(parent: PropertyList<T> | undefined, populate: T[]) {
+    super(Header, undefined, populate);
+    this.parent = parent;
+  }
 
-    static isHeaderList(obj: any) {
-        return '_kind' in obj && obj._kind === 'HeaderList';
-    }
+  static isHeaderList(obj: any) {
+    return '_kind' in obj && obj._kind === 'HeaderList';
+  }
 
-    contentSize(): number {
-        return this.list
-            .map(header => header.toString())
-            .map(headerStr => headerStr.length) // TODO: handle special characters
-            .reduce((totalSize, headerSize) => totalSize + headerSize, 0);
-    }
+  contentSize(): number {
+    return this.list
+      .map(header => header.toString())
+      .map(headerStr => headerStr.length) // TODO: handle special characters
+      .reduce((totalSize, headerSize) => totalSize + headerSize, 0);
+  }
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/insomnia.ts b/packages/insomnia-scripting-environment/src/objects/insomnia.ts
index 821f2a3116..611360103f 100644
--- a/packages/insomnia-scripting-environment/src/objects/insomnia.ts
+++ b/packages/insomnia-scripting-environment/src/objects/insomnia.ts
@@ -22,260 +22,258 @@ import { toUrlObject } from './urls';
 import { checkIfUrlIncludesTag } from './utils';
 
 export class InsomniaObject {
-    public environment: Environment;
-    public collectionVariables: Environment;
-    public baseEnvironment: Environment;
-    public variables: Variables;
-    public request: ScriptRequest;
-    public cookies: CookieObject;
-    public info: RequestInfo;
-    public response?: ScriptResponse;
-    public execution: Execution;
-    public vault?: Vault;
+  public environment: Environment;
+  public collectionVariables: Environment;
+  public baseEnvironment: Environment;
+  public variables: Variables;
+  public request: ScriptRequest;
+  public cookies: CookieObject;
+  public info: RequestInfo;
+  public response?: ScriptResponse;
+  public execution: Execution;
+  public vault?: Vault;
 
-    public clientCertificates: ClientCertificate[];
-    private _expect = expect;
-    private _test = test;
-    private _skip = skip;
+  public clientCertificates: ClientCertificate[];
+  private _expect = expect;
+  private _test = test;
+  private _skip = skip;
 
-    private iterationData: Environment;
-    // TODO: follows will be enabled after Insomnia supports them
-    private globals: Environment;
-    private _settings: Settings;
+  private iterationData: Environment;
+  // TODO: follows will be enabled after Insomnia supports them
+  private globals: Environment;
+  private _settings: Settings;
 
-    private requestTestResults: RequestTestResult[];
+  private requestTestResults: RequestTestResult[];
 
-    private parentFolders: ParentFolders;
+  private parentFolders: ParentFolders;
 
-    constructor(
-        rawObj: {
-            globals: Environment;
-            iterationData: Environment;
-            environment: Environment;
-            baseEnvironment: Environment;
-            variables: Variables;
-            request: ScriptRequest;
-            settings: Settings;
-            clientCertificates: ClientCertificate[];
-            cookies: CookieObject;
-            requestInfo: RequestInfo;
-            execution: Execution;
-            response?: ScriptResponse;
-            parentFolders: ParentFolders;
-            vault?: Vault;
-        },
-    ) {
-        this.globals = rawObj.globals;
-        this.environment = rawObj.environment;
-        this.baseEnvironment = rawObj.baseEnvironment;
-        this.collectionVariables = this.baseEnvironment; // collectionVariables is mapped to baseEnvironment
-        this.iterationData = rawObj.iterationData;
-        this.variables = rawObj.variables;
-        this.cookies = rawObj.cookies;
-        this.response = rawObj.response;
-        this.execution = rawObj.execution;
-        this.vault = rawObj.vault;
+  constructor(rawObj: {
+    globals: Environment;
+    iterationData: Environment;
+    environment: Environment;
+    baseEnvironment: Environment;
+    variables: Variables;
+    request: ScriptRequest;
+    settings: Settings;
+    clientCertificates: ClientCertificate[];
+    cookies: CookieObject;
+    requestInfo: RequestInfo;
+    execution: Execution;
+    response?: ScriptResponse;
+    parentFolders: ParentFolders;
+    vault?: Vault;
+  }) {
+    this.globals = rawObj.globals;
+    this.environment = rawObj.environment;
+    this.baseEnvironment = rawObj.baseEnvironment;
+    this.collectionVariables = this.baseEnvironment; // collectionVariables is mapped to baseEnvironment
+    this.iterationData = rawObj.iterationData;
+    this.variables = rawObj.variables;
+    this.cookies = rawObj.cookies;
+    this.response = rawObj.response;
+    this.execution = rawObj.execution;
+    this.vault = rawObj.vault;
 
-        this.info = rawObj.requestInfo;
-        this.request = rawObj.request;
-        this._settings = rawObj.settings;
-        this.clientCertificates = rawObj.clientCertificates;
+    this.info = rawObj.requestInfo;
+    this.request = rawObj.request;
+    this._settings = rawObj.settings;
+    this.clientCertificates = rawObj.clientCertificates;
 
-        this.requestTestResults = new Array<RequestTestResult>();
-        this.parentFolders = rawObj.parentFolders;
+    this.requestTestResults = new Array<RequestTestResult>();
+    this.parentFolders = rawObj.parentFolders;
 
-        return new Proxy(this, {
-            get: (target, prop, receiver) => {
-                if (prop === 'test') {
-                    const testHandler: TestHandler = async (msg: string, fn: () => Promise<void>) => {
-                        await this._test(msg, fn, this.pushRequestTestResult);
-                    };
-                    testHandler.skip = async (msg: string, fn: () => Promise<void>) => {
-                        await this._skip(msg, fn, this.pushRequestTestResult);
-                    };
+    return new Proxy(this, {
+      get: (target, prop, receiver) => {
+        if (prop === 'test') {
+          const testHandler: TestHandler = async (msg: string, fn: () => Promise<void>) => {
+            await this._test(msg, fn, this.pushRequestTestResult);
+          };
+          testHandler.skip = async (msg: string, fn: () => Promise<void>) => {
+            await this._skip(msg, fn, this.pushRequestTestResult);
+          };
 
-                    return testHandler;
-                }
-                return Reflect.get(target, prop, receiver);
-            },
-        });
-    }
+          return testHandler;
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+    });
+  }
 
-    sendRequest(
-        request: string | ScriptRequest,
-        cb: (error?: string, response?: ScriptResponse) => void
-    ) {
-        return sendRequest(request, cb, this._settings);
-    }
+  sendRequest(request: string | ScriptRequest, cb: (error?: string, response?: ScriptResponse) => void) {
+    return sendRequest(request, cb, this._settings);
+  }
 
-    test = () => {
-        // this method is intercepted by the proxy above
-    };
-
-    private pushRequestTestResult = (testResult: RequestTestResult) => {
-        this.requestTestResults = [...this.requestTestResults, testResult];
-    };
-
-    expect = (exp: boolean | number | string | object) => {
-        return this._expect(exp);
-    };
-
-    get settings() {
-        return undefined;
-    }
-
-    toObject = () => {
-        return {
-            globals: this.globals.toObject(),
-            environment: this.environment.toObject(),
-            baseEnvironment: this.baseEnvironment.toObject(),
-            iterationData: this.iterationData.toObject(),
-            variables: this.variables.localVarsToObject(),
-            request: this.request,
-            settings: this.settings,
-            clientCertificates: this.clientCertificates,
-            cookieJar: this.cookies.jar().toInsomniaCookieJar(),
-            info: this.info.toObject(),
-            response: this.response ? this.response.toObject() : undefined,
-            requestTestResults: this.requestTestResults,
-            execution: this.execution.toObject(),
-            parentFolders: this.parentFolders.toObject(),
-        };
+  test = () => {
+    // this method is intercepted by the proxy above
+  };
+
+  private pushRequestTestResult = (testResult: RequestTestResult) => {
+    this.requestTestResults = [...this.requestTestResults, testResult];
+  };
+
+  expect = (exp: boolean | number | string | object) => {
+    return this._expect(exp);
+  };
+
+  get settings() {
+    return undefined;
+  }
+
+  toObject = () => {
+    return {
+      globals: this.globals.toObject(),
+      environment: this.environment.toObject(),
+      baseEnvironment: this.baseEnvironment.toObject(),
+      iterationData: this.iterationData.toObject(),
+      variables: this.variables.localVarsToObject(),
+      request: this.request,
+      settings: this.settings,
+      clientCertificates: this.clientCertificates,
+      cookieJar: this.cookies.jar().toInsomniaCookieJar(),
+      info: this.info.toObject(),
+      response: this.response ? this.response.toObject() : undefined,
+      requestTestResults: this.requestTestResults,
+      execution: this.execution.toObject(),
+      parentFolders: this.parentFolders.toObject(),
     };
+  };
 }
 
-export async function initInsomniaObject(
-    rawObj: RequestContext,
-    log: (...args: any[]) => void,
-) {
-    // Mapping rule for the global environment:
-    // - when one global environment is selected, `globals` points to the selected one
-    // Potential mapping rule for the future:
-    // - The base global environment could also be introduced
-    const globals = new Environment('globals', rawObj.globals || {}); // could be undefined
-    // Mapping rule for the environment and base environment:
-    // - If base environment is selected, both `baseEnvironment` and `environment` point to the selected one.
-    // - If one sub environment is selected,  `baseEnvironment` points to the base env and `environment` points to the selected one.
-    const baseEnvironment = new Environment(rawObj.baseEnvironment.name || '', rawObj.baseEnvironment.data);
-    // reuse baseEnvironment when the "selected envrionment" points to the base environment
-    const environment = rawObj.baseEnvironment.id === rawObj.environment.id ?
-        baseEnvironment :
-        new Environment(rawObj.environment.name || '', rawObj.environment.data);
-    if (rawObj.baseEnvironment.id === rawObj.environment.id) {
-        log('warning: No environment is selected, modification of insomnia.environment will be applied to the base environment.');
-    }
-    // Mapping rule for the environment user uploaded in collection runner
-    const iterationData = rawObj.iterationData ?
-        new Environment(rawObj.iterationData.name, rawObj.iterationData.data) : new Environment('iterationData', {});
-    const localVariables = rawObj.transientVariables ?
-        new Environment(rawObj.transientVariables.name, rawObj.transientVariables.data) : new Environment('transientVariables', {});
-    const enableVaultInScripts = rawObj.settings?.enableVaultInScripts || false;
-    const vault = rawObj.vault ?
-        new Vault('vault', rawObj.vault, enableVaultInScripts) : new Vault('vault', {}, enableVaultInScripts);
-    const cookies = new CookieObject(rawObj.cookieJar);
-    // TODO: update follows when post-request script and iterationData are introduced
-    const requestInfo = new RequestInfo({
-        eventName: rawObj.requestInfo.eventName || 'prerequest',
-        iteration: rawObj.requestInfo.iteration || 1,
-        iterationCount: rawObj.requestInfo.iterationCount || 0,
-        requestName: rawObj.request.name,
-        requestId: rawObj.request._id,
-    });
-
-    const parentFolders = new ParentFolders(rawObj.parentFolders.map(folderObj =>
-        new Folder(
-            folderObj.id,
-            folderObj.name,
-            folderObj.environment,
-        )
-    ));
-
-    const variables = new Variables({
-        globalVars: globals,
-        environmentVars: environment,
-        collectionVars: baseEnvironment,
-        iterationDataVars: iterationData,
-        folderLevelVars: parentFolders.getEnvironments(),
-        localVars: localVariables,
-    });
-
-    // todo: find if theres a better way to get the best cert
-    // (╯°□°）╯︵ ┻━┻
-    const ifUrlIncludesTag = checkIfUrlIncludesTag(rawObj.request.url);
-    const matchedCertificates = filterClientCertificates(rawObj.clientCertificates || [], rawObj.request.url);
-    const initEmptyCert = ifUrlIncludesTag || matchedCertificates?.length === 0;
-    if (initEmptyCert) {
-        getExistingConsole().warn('The URL contains tags or no matched certificate found, insomnia.request.certificate is initialized as an empty certificate.');
-    }
-    const defaultCertificate = initEmptyCert ?
-        {
-            disabled: false,
-            name: 'Default Certificate',
-            matches: [],
-            key: undefined,
-            cert: undefined,
-            passphrase: undefined,
-            pfx: undefined,
-        } : {
-            disabled: matchedCertificates[0].disabled,
-            name: 'The first matched certificate from Settings',
-            matches: [matchedCertificates[0].host],
-            key: { src: matchedCertificates[0].key || '' },
-            cert: { src: matchedCertificates[0].cert || '' },
-            passphrase: matchedCertificates[0].passphrase || undefined,
-            pfx: { src: matchedCertificates[0].pfx || '' }, // PFX or PKCS12 Certificate
-        };
-
-    const proxy = transformToSdkProxyOptions(
-        rawObj.settings.httpProxy,
-        rawObj.settings.httpsProxy,
-        rawObj.settings.proxyEnabled,
-        rawObj.settings.noProxy,
+export async function initInsomniaObject(rawObj: RequestContext, log: (...args: any[]) => void) {
+  // Mapping rule for the global environment:
+  // - when one global environment is selected, `globals` points to the selected one
+  // Potential mapping rule for the future:
+  // - The base global environment could also be introduced
+  const globals = new Environment('globals', rawObj.globals || {}); // could be undefined
+  // Mapping rule for the environment and base environment:
+  // - If base environment is selected, both `baseEnvironment` and `environment` point to the selected one.
+  // - If one sub environment is selected,  `baseEnvironment` points to the base env and `environment` points to the selected one.
+  const baseEnvironment = new Environment(rawObj.baseEnvironment.name || '', rawObj.baseEnvironment.data);
+  // reuse baseEnvironment when the "selected envrionment" points to the base environment
+  const environment =
+    rawObj.baseEnvironment.id === rawObj.environment.id
+      ? baseEnvironment
+      : new Environment(rawObj.environment.name || '', rawObj.environment.data);
+  if (rawObj.baseEnvironment.id === rawObj.environment.id) {
+    log(
+      'warning: No environment is selected, modification of insomnia.environment will be applied to the base environment.',
     );
+  }
+  // Mapping rule for the environment user uploaded in collection runner
+  const iterationData = rawObj.iterationData
+    ? new Environment(rawObj.iterationData.name, rawObj.iterationData.data)
+    : new Environment('iterationData', {});
+  const localVariables = rawObj.transientVariables
+    ? new Environment(rawObj.transientVariables.name, rawObj.transientVariables.data)
+    : new Environment('transientVariables', {});
+  const enableVaultInScripts = rawObj.settings?.enableVaultInScripts || false;
+  const vault = rawObj.vault
+    ? new Vault('vault', rawObj.vault, enableVaultInScripts)
+    : new Vault('vault', {}, enableVaultInScripts);
+  const cookies = new CookieObject(rawObj.cookieJar);
+  // TODO: update follows when post-request script and iterationData are introduced
+  const requestInfo = new RequestInfo({
+    eventName: rawObj.requestInfo.eventName || 'prerequest',
+    iteration: rawObj.requestInfo.iteration || 1,
+    iterationCount: rawObj.requestInfo.iterationCount || 0,
+    requestName: rawObj.request.name,
+    requestId: rawObj.request._id,
+  });
 
-    const reqUrl = toUrlObject(rawObj.request.url);
-    reqUrl.addQueryParams(
-        rawObj.request.parameters
-            .map(param => ({ key: param.name, value: param.value, disabled: param.disabled }))
+  const parentFolders = new ParentFolders(
+    rawObj.parentFolders.map(folderObj => new Folder(folderObj.id, folderObj.name, folderObj.environment)),
+  );
+
+  const variables = new Variables({
+    globalVars: globals,
+    environmentVars: environment,
+    collectionVars: baseEnvironment,
+    iterationDataVars: iterationData,
+    folderLevelVars: parentFolders.getEnvironments(),
+    localVars: localVariables,
+  });
+
+  // todo: find if theres a better way to get the best cert
+  // (╯°□°）╯︵ ┻━┻
+  const ifUrlIncludesTag = checkIfUrlIncludesTag(rawObj.request.url);
+  const matchedCertificates = filterClientCertificates(rawObj.clientCertificates || [], rawObj.request.url);
+  const initEmptyCert = ifUrlIncludesTag || matchedCertificates?.length === 0;
+  if (initEmptyCert) {
+    getExistingConsole().warn(
+      'The URL contains tags or no matched certificate found, insomnia.request.certificate is initialized as an empty certificate.',
     );
+  }
+  const defaultCertificate = initEmptyCert
+    ? {
+        disabled: false,
+        name: 'Default Certificate',
+        matches: [],
+        key: undefined,
+        cert: undefined,
+        passphrase: undefined,
+        pfx: undefined,
+      }
+    : {
+        disabled: matchedCertificates[0].disabled,
+        name: 'The first matched certificate from Settings',
+        matches: [matchedCertificates[0].host],
+        key: { src: matchedCertificates[0].key || '' },
+        cert: { src: matchedCertificates[0].cert || '' },
+        passphrase: matchedCertificates[0].passphrase || undefined,
+        pfx: { src: matchedCertificates[0].pfx || '' }, // PFX or PKCS12 Certificate
+      };
 
-    const reqOpt: RequestOptions = {
-        name: rawObj.request.name,
-        url: reqUrl,
-        method: rawObj.request.method,
-        header: rawObj.request.headers.map(
-            (header: RequestHeader) => ({ key: header.name, value: header.value, disabled: header.disabled })
-        ),
-        body: toScriptRequestBody(rawObj.request.body),
-        auth: toPreRequestAuth(rawObj.request.authentication),
-        proxy,
-        certificate: defaultCertificate,
-        pathParameters: rawObj.request.pathParameters,
-    };
-    const request = new ScriptRequest(reqOpt);
-    const execution = new Execution({
-        location: rawObj.execution.location,
-        skipRequest: rawObj.execution.skipRequest,
-        nextRequestIdOrName: rawObj.execution.nextRequestIdOrName,
-    });
+  const proxy = transformToSdkProxyOptions(
+    rawObj.settings.httpProxy,
+    rawObj.settings.httpsProxy,
+    rawObj.settings.proxyEnabled,
+    rawObj.settings.noProxy,
+  );
 
-    const responseBody = await readBodyFromPath(rawObj.response);
-    const response = rawObj.response ? toScriptResponse(request, rawObj.response, responseBody) : undefined;
+  const reqUrl = toUrlObject(rawObj.request.url);
+  reqUrl.addQueryParams(
+    rawObj.request.parameters.map(param => ({ key: param.name, value: param.value, disabled: param.disabled })),
+  );
 
-    return new InsomniaObject({
-        globals,
-        environment,
-        baseEnvironment,
-        iterationData,
-        vault,
-        variables,
-        request,
-        settings: rawObj.settings,
-        clientCertificates: rawObj.clientCertificates,
-        cookies,
-        requestInfo,
-        response,
-        execution,
-        parentFolders,
-    });
-};
+  const reqOpt: RequestOptions = {
+    name: rawObj.request.name,
+    url: reqUrl,
+    method: rawObj.request.method,
+    header: rawObj.request.headers.map((header: RequestHeader) => ({
+      key: header.name,
+      value: header.value,
+      disabled: header.disabled,
+    })),
+    body: toScriptRequestBody(rawObj.request.body),
+    auth: toPreRequestAuth(rawObj.request.authentication),
+    proxy,
+    certificate: defaultCertificate,
+    pathParameters: rawObj.request.pathParameters,
+  };
+  const request = new ScriptRequest(reqOpt);
+  const execution = new Execution({
+    location: rawObj.execution.location,
+    skipRequest: rawObj.execution.skipRequest,
+    nextRequestIdOrName: rawObj.execution.nextRequestIdOrName,
+  });
+
+  const responseBody = await readBodyFromPath(rawObj.response);
+  const response = rawObj.response ? toScriptResponse(request, rawObj.response, responseBody) : undefined;
+
+  return new InsomniaObject({
+    globals,
+    environment,
+    baseEnvironment,
+    iterationData,
+    vault,
+    variables,
+    request,
+    settings: rawObj.settings,
+    clientCertificates: rawObj.clientCertificates,
+    cookies,
+    requestInfo,
+    response,
+    execution,
+    parentFolders,
+  });
+}
diff --git a/packages/insomnia-scripting-environment/src/objects/interfaces.ts b/packages/insomnia-scripting-environment/src/objects/interfaces.ts
index 913a229a86..ee5ab979da 100644
--- a/packages/insomnia-scripting-environment/src/objects/interfaces.ts
+++ b/packages/insomnia-scripting-environment/src/objects/interfaces.ts
@@ -9,29 +9,29 @@ import type { RequestInfoOption } from './request-info';
 import type { RequestTestResult } from './test';
 
 export interface IEnvironment {
-    id: string;
-    name: string;
-    data: object;
+  id: string;
+  name: string;
+  data: object;
 }
 export interface RequestContext {
-    request: Request;
-    timelinePath: string;
-    environment: IEnvironment;
-    baseEnvironment: IEnvironment;
-    vault?: IEnvironment;
-    collectionVariables?: object;
-    globals?: object;
-    iterationData?: Omit<IEnvironment, 'id'>;
-    timeout: number;
-    settings: Settings;
-    clientCertificates: ClientCertificate[];
-    cookieJar: InsomniaCookieJar;
-    // only for the after-response script
-    response?: sendCurlAndWriteTimelineResponse | sendCurlAndWriteTimelineError;
-    requestTestResults?: RequestTestResult[];
-    requestInfo: RequestInfoOption;
-    execution: ExecutionOption;
-    logs: string[];
-    transientVariables?: Omit<IEnvironment, 'id'>;
-    parentFolders: { id: string; name: string; environment: Record<string, any> }[];
+  request: Request;
+  timelinePath: string;
+  environment: IEnvironment;
+  baseEnvironment: IEnvironment;
+  vault?: IEnvironment;
+  collectionVariables?: object;
+  globals?: object;
+  iterationData?: Omit<IEnvironment, 'id'>;
+  timeout: number;
+  settings: Settings;
+  clientCertificates: ClientCertificate[];
+  cookieJar: InsomniaCookieJar;
+  // only for the after-response script
+  response?: sendCurlAndWriteTimelineResponse | sendCurlAndWriteTimelineError;
+  requestTestResults?: RequestTestResult[];
+  requestInfo: RequestInfoOption;
+  execution: ExecutionOption;
+  logs: string[];
+  transientVariables?: Omit<IEnvironment, 'id'>;
+  parentFolders: { id: string; name: string; environment: Record<string, any> }[];
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/interpolator.ts b/packages/insomnia-scripting-environment/src/objects/interpolator.ts
index 450781395a..7a28c2455b 100644
--- a/packages/insomnia-scripting-environment/src/objects/interpolator.ts
+++ b/packages/insomnia-scripting-environment/src/objects/interpolator.ts
@@ -2,69 +2,64 @@ import { fakerFunctions } from 'insomnia/src/ui/components/templating/faker-func
 import { configure, type ConfigureOptions, type Environment as NunjuncksEnv } from 'nunjucks';
 
 class Interpolator {
-    private engine: NunjuncksEnv;
+  private engine: NunjuncksEnv;
 
-    constructor(config: ConfigureOptions) {
-        this.engine = configure(config);
+  constructor(config: ConfigureOptions) {
+    this.engine = configure(config);
+  }
+
+  render = (template: string, context: object) => {
+    // TODO: handle timeout
+    // TODO: support plugin?
+    return this.engine.renderString(this.renderWithFaker(template), context);
+  };
+
+  renderWithFaker = (template: string) => {
+    const segments = template.split('}}');
+    if (segments.length === 1) {
+      return template;
     }
 
-    render = (template: string, context: object) => {
-        // TODO: handle timeout
-        // TODO: support plugin?
-        return this.engine.renderString(
-            this.renderWithFaker(template),
-            context
-        );
-    };
+    const translatedSegments = segments.map(segment => {
+      const tagStart = segment.lastIndexOf('{{');
+      if (tagStart < 0) {
+        return segment;
+      }
 
-    renderWithFaker = (template: string) => {
-        const segments = template.split('}}');
-        if (segments.length === 1) {
-            return template;
-        }
+      const tagName = segment.slice(tagStart + 2).trim();
+      if (!tagName.startsWith('$')) {
+        // it is a tag probably for interpolating, at least not for generating
+        return segment + '}}';
+      }
+      const funcName = tagName.slice(1) as keyof typeof fakerFunctions; // remove prefix '$'
 
-        const translatedSegments = segments.map(segment => {
-            const tagStart = segment.lastIndexOf('{{');
-            if ((tagStart) < 0) {
-                return segment;
-            }
+      if (!fakerFunctions[funcName]) {
+        throw Error(`replaceIn: no faker function is found: ${funcName}`);
+      }
 
-            const tagName = segment
-                .slice(tagStart + 2)
-                .trim();
-            if (!tagName.startsWith('$')) {
-                // it is a tag probably for interpolating, at least not for generating
-                return segment + '}}';
-            }
-            const funcName = tagName.slice(1) as keyof typeof fakerFunctions; // remove prefix '$'
+      const generated = fakerFunctions[funcName]();
+      return segment.slice(0, tagStart) + generated;
+    });
 
-            if (!fakerFunctions[funcName]) {
-                throw Error(`replaceIn: no faker function is found: ${funcName}`);
-            };
-
-            const generated = fakerFunctions[funcName]();
-            return segment.slice(0, tagStart) + generated;
-        });
-
-        return translatedSegments.join('');
-    };
+    return translatedSegments.join('');
+  };
 }
 
 const interpolator = new Interpolator({
-    autoescape: false,
-    // Don't escape HTML
-    throwOnUndefined: true,
-    // Strict mode
-    tags: {
-        blockStart: '{%',
-        blockEnd: '%}',
-        variableStart: '{{',
-        variableEnd: '}}',
-        commentStart: '{#',
-        commentEnd: '#}',
-    },
+  autoescape: false,
+  // Don't escape HTML
+  throwOnUndefined: true,
+  // Strict mode
+  tags: {
+    blockStart: '{%',
+    blockEnd: '%}',
+    variableStart: '{{',
+    variableEnd: '}}',
+    commentStart: '{#',
+    commentEnd: '#}',
+  },
 });
 
 export function getInterpolator() {
-    return interpolator;
+  return interpolator;
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/properties.ts b/packages/insomnia-scripting-environment/src/objects/properties.ts
index 8dc4a1d1ff..194ffb7f23 100644
--- a/packages/insomnia-scripting-environment/src/objects/properties.ts
+++ b/packages/insomnia-scripting-environment/src/objects/properties.ts
@@ -5,429 +5,411 @@ import _ from 'lodash';
 import { getInterpolator } from './interpolator';
 
 export const unsupportedError = (featureName: string, alternative?: string) => {
-    const message = `${featureName} is not supported yet` +
-        (alternative ? `, please use ${alternative} instead temporarily.` : '');
-    return Error(message);
+  const message =
+    `${featureName} is not supported yet` + (alternative ? `, please use ${alternative} instead temporarily.` : '');
+  return Error(message);
 };
 
 export class PropertyBase {
-    public _kind = 'PropertyBase';
-    protected _parent: PropertyBase | undefined = undefined;
-    protected description?: string;
+  public _kind = 'PropertyBase';
+  protected _parent: PropertyBase | undefined = undefined;
+  protected description?: string;
 
-    constructor(description?: string) {
-        this.description = description;
+  constructor(description?: string) {
+    this.description = description;
+  }
+
+  static propertyIsMeta(_value: any, key: string) {
+    // no meta is defined in Insomnia and it basically find properties start with '_'
+    // '_' is also rejected here
+    return key && key.startsWith('_');
+  }
+
+  static propertyUnprefixMeta(_value: any, key: string) {
+    return _.trimStart(key, '_');
+  }
+
+  // TODO: temporarily disable this
+  // static toJSON(obj: { toJSON: () => string }) {
+  //     return obj.toJSON();
+  // }
+
+  meta() {
+    return {};
+  }
+
+  parent() {
+    return this._parent;
+  }
+
+  forEachParent(_options: { withRoot?: boolean }, iterator: (obj: PropertyBase) => boolean) {
+    const currentParent = this.parent();
+    if (!currentParent) {
+      return;
     }
 
-    static propertyIsMeta(_value: any, key: string) {
-        // no meta is defined in Insomnia and it basically find properties start with '_'
-        // '_' is also rejected here
-        return key && key.startsWith('_');
+    const queue: PropertyBase[] = [currentParent];
+    const parents: PropertyBase[] = [];
+
+    while (queue.length > 0) {
+      const ancester = queue.shift();
+      if (!ancester) {
+        continue;
+      }
+
+      // TODO: check options
+      const cloned = clone(ancester);
+      const keepIterating = iterator(cloned);
+      parents.push(cloned);
+      if (!keepIterating) {
+        break;
+      }
+
+      const olderAncester = ancester.parent();
+      if (olderAncester) {
+        queue.push(olderAncester);
+      }
     }
 
-    static propertyUnprefixMeta(_value: any, key: string) {
-        return _.trimStart(key, '_');
+    return parents;
+  }
+
+  findInParents(property: string, customizer?: (ancester: PropertyBase) => boolean): PropertyBase | undefined {
+    const currentParent = this.parent();
+    if (!currentParent) {
+      return;
     }
 
-    // TODO: temporarily disable this
-    // static toJSON(obj: { toJSON: () => string }) {
-    //     return obj.toJSON();
-    // }
+    const queue: PropertyBase[] = [currentParent];
 
-    meta() {
-        return {};
-    };
+    while (queue.length > 0) {
+      const ancester = queue.shift();
+      if (!ancester) {
+        continue;
+      }
 
-    parent() {
-        return this._parent;
-    }
-
-    forEachParent(
-        _options: { withRoot?: boolean },
-        iterator: (obj: PropertyBase) => boolean,
-    ) {
-        const currentParent = this.parent();
-        if (!currentParent) {
-            return;
+      const cloned = clone(ancester);
+      const hasProperty = Object.keys(cloned.meta()).includes(property);
+      if (!hasProperty) {
+        // keep traversing until parent has the property
+        // no op
+      } else {
+        if (customizer) {
+          if (customizer(cloned)) {
+            // continue until customizer returns a truthy value
+            return cloned;
+          }
+        } else {
+          // customizer is not specified
+          // stop at the first parent that contains the property
+          return cloned;
         }
+      }
 
-        const queue: PropertyBase[] = [currentParent];
-        const parents: PropertyBase[] = [];
-
-        while (queue.length > 0) {
-            const ancester = queue.shift();
-            if (!ancester) {
-                continue;
-            }
-
-            // TODO: check options
-            const cloned = clone(ancester);
-            const keepIterating = iterator(cloned);
-            parents.push(cloned);
-            if (!keepIterating) {
-                break;
-            }
-
-            const olderAncester = ancester.parent();
-            if (olderAncester) {
-                queue.push(olderAncester);
-            }
-        }
-
-        return parents;
+      const olderAncester = ancester.parent();
+      if (olderAncester) {
+        queue.push(olderAncester);
+      }
     }
 
-    findInParents(
-        property: string,
-        customizer?: (ancester: PropertyBase) => boolean,
-    ): PropertyBase | undefined {
-        const currentParent = this.parent();
-        if (!currentParent) {
-            return;
-        }
+    return undefined;
+  }
 
-        const queue: PropertyBase[] = [currentParent];
+  toJSON() {
+    const entriesToExport = Object.entries(this).filter(
+      (kv: [string, any]) => typeof kv[1] !== 'function' && typeof kv[1] !== 'undefined' && kv[0] !== '_kind',
+    );
 
-        while (queue.length > 0) {
-            const ancester = queue.shift();
-            if (!ancester) {
-                continue;
-            }
+    return Object.fromEntries(entriesToExport);
+  }
 
-            const cloned = clone(ancester);
-            const hasProperty = Object.keys(cloned.meta()).includes(property);
-            if (!hasProperty) {
-                // keep traversing until parent has the property
-                // no op
-            } else {
-                if (customizer) {
-                    if (customizer(cloned)) {
-                        // continue until customizer returns a truthy value
-                        return cloned;
-                    }
-                } else {
-                    // customizer is not specified
-                    // stop at the first parent that contains the property
-                    return cloned;
-                }
-            }
+  toObject() {
+    return this.toJSON();
+  }
 
-            const olderAncester = ancester.parent();
-            if (olderAncester) {
-                queue.push(olderAncester);
-            }
-        }
-
-        return undefined;
-    }
-
-    toJSON() {
-        const entriesToExport = Object
-            .entries(this)
-            .filter((kv: [string, any]) =>
-                typeof kv[1] !== 'function'
-                && typeof kv[1] !== 'undefined'
-                && kv[0] !== '_kind'
-            );
-
-        return Object.fromEntries(entriesToExport);
-    }
-
-    toObject() {
-        return this.toJSON();
-    }
-
-    toString() {
-        return JSON.stringify(this.toJSON());
-    }
+  toString() {
+    return JSON.stringify(this.toJSON());
+  }
 }
 
 export class Property extends PropertyBase {
-    id: string;
-    name?: string;
-    disabled?: boolean;
-    // TODO: parent property will be introduced when collection manipulation is supported
+  id: string;
+  name?: string;
+  disabled?: boolean;
+  // TODO: parent property will be introduced when collection manipulation is supported
 
-    constructor(
-        id?: string,
-        name?: string,
-        disabled?: boolean,
-        info?: { id?: string; name?: string },
-    ) {
-        super();
-        this._kind = 'Property';
-        this.id = info?.id || id || '';
-        this.name = info?.name || name || '';
-        this.disabled = disabled || false;
+  constructor(id?: string, name?: string, disabled?: boolean, info?: { id?: string; name?: string }) {
+    super();
+    this._kind = 'Property';
+    this.id = info?.id || id || '';
+    this.name = info?.name || name || '';
+    this.disabled = disabled || false;
+  }
 
+  static _index = 'id';
+
+  static replaceSubstitutions(content: string, ...variables: object[]): string {
+    if (!Array.isArray(variables) || typeof content !== 'string') {
+      throw Error("replaceSubstitutions: the first param's type is not string or other parameters are not an array");
     }
 
-    static _index = 'id';
+    let context: object = {};
+    // the searching priority of rendering is from left to right
+    variables.reverse().forEach(variable => (context = { ...context, ...variable }));
 
-    static replaceSubstitutions(content: string, ...variables: object[]): string {
-        if (!Array.isArray(variables) || typeof content !== 'string') {
-            throw Error("replaceSubstitutions: the first param's type is not string or other parameters are not an array");
-        }
+    return getInterpolator().render(content, context);
+  }
 
-        let context: object = {};
-        // the searching priority of rendering is from left to right
-        variables.reverse().forEach(variable => context = { ...context, ...variable });
-
-        return getInterpolator().render(content, context);
+  static replaceSubstitutionsIn(obj: object, ...variables: object[]): object {
+    if (!Array.isArray(variables) || typeof obj !== 'object') {
+      throw Error("replaceSubstitutions: the first param's type is not object or other parameters are not an array");
     }
 
-    static replaceSubstitutionsIn(obj: object, ...variables: object[]): object {
-        if (!Array.isArray(variables) || typeof obj !== 'object') {
-            throw Error("replaceSubstitutions: the first param's type is not object or other parameters are not an array");
-        }
+    try {
+      const content = JSON.stringify(obj);
 
-        try {
-            const content = JSON.stringify(obj);
+      let context: object = {};
+      // the searching priority of rendering is from left to right
+      variables.reverse().forEach(variable => {
+        context = { ...context, ...variable };
+      });
 
-            let context: object = {};
-            // the searching priority of rendering is from left to right
-            variables.reverse().forEach(variable => {
-                context = { ...context, ...variable };
-            });
-
-            const rendered = getInterpolator().render(content, context);
-            return JSON.parse(rendered);
-
-        } catch (e: any) {
-            throw Error(`replaceSubstitutionsIn: ${e.toString()}`);
-        }
+      const rendered = getInterpolator().render(content, context);
+      return JSON.parse(rendered);
+    } catch (e: any) {
+      throw Error(`replaceSubstitutionsIn: ${e.toString()}`);
     }
+  }
 
-    describe(content: string, typeName: string) {
-        this._kind = typeName;
-        this.description = content;
-    }
+  describe(content: string, typeName: string) {
+    this._kind = typeName;
+    this.description = content;
+  }
 }
 
 export class PropertyList<T extends Property> {
-    protected _kind = 'PropertyList';
-    protected list: T[] = [];
+  protected _kind = 'PropertyList';
+  protected list: T[] = [];
 
-    constructor(
-        protected typeClass: { _index?: string },
-        protected parent: Property | PropertyList<any> | undefined,
-        populate: T[],
-    ) {
-        this.parent = parent;
-        this.list = populate;
+  constructor(
+    protected typeClass: { _index?: string },
+    protected parent: Property | PropertyList<any> | undefined,
+    populate: T[],
+  ) {
+    this.parent = parent;
+    this.list = populate;
+  }
+
+  static isPropertyList(obj: object) {
+    return '_kind' in obj && obj._kind === 'PropertyList';
+  }
+
+  add(item: T) {
+    this.list.push(item);
+  }
+
+  all() {
+    return this.list.map(pp => pp.toJSON());
+  }
+
+  append(item: T) {
+    this.add(item);
+  }
+
+  assimilate(source: T[] | PropertyList<T>, prune?: boolean) {
+    // it doesn't update values from a source list
+    if (prune) {
+      this.clear();
+    }
+    if ('list' in source) {
+      // it is PropertyList<T>
+      this.list.push(...source.list);
+    } else {
+      this.list.push(...source);
+    }
+  }
+
+  clear() {
+    this.list = [];
+  }
+
+  count() {
+    return this.list.length;
+  }
+
+  each(iterator: (item: T) => void, context: object) {
+    interface Iterator {
+      context?: object;
+      (item: T): void;
+    }
+    const it: Iterator = iterator;
+    it.context = context;
+
+    this.list.forEach(it);
+  }
+
+  // TODO: unsupported yet as properties are not organized as hierarchy
+
+  eachParent(_iterator: (parent: Property, prev: Property) => void, _context?: object) {
+    throw unsupportedError('eachParent');
+  }
+
+  filter(rule: (item: T) => boolean, context: object) {
+    interface Iterator {
+      context?: object;
+      (item: T): boolean;
+    }
+    const it: Iterator = rule;
+    it.context = context;
+
+    return this.list.filter(it);
+  }
+
+  // TODO: support returning {Item|ItemGroup}
+  find(rule: (item: T) => boolean, context?: object) {
+    interface Finder {
+      context?: object;
+      (item: T): boolean;
+    }
+    const finder: Finder = rule;
+    finder.context = context;
+
+    return this.list.find(finder);
+  }
+
+  // it does not return underlying type of the item because they are not supported
+  get(key: string) {
+    return this.one(key);
+  }
+
+  // TODO: value is not used as its usage is unknown
+
+  has(item: T, _value?: any) {
+    return this.indexOf(item) >= 0;
+  }
+
+  idx(index: number) {
+    if (index <= this.list.length - 1) {
+      return this.list[index];
+    }
+    return undefined;
+  }
+
+  indexOf(item: string | T) {
+    const indexFieldName = this.typeClass._index || 'id';
+
+    for (let i = 0; i < this.list.length; i++) {
+      const record = this.list[i] as Record<string, any>;
+
+      if (typeof item === 'string' && record[indexFieldName] === item) {
+        return i;
+      }
+      const itemRecord = item as Record<string, any>;
+      if (record[indexFieldName] === itemRecord[indexFieldName]) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  insert(item: T, before?: number) {
+    if (before != null && before >= 0 && before <= this.list.length - 1) {
+      this.list = [...this.list.slice(0, before), item, ...this.list.slice(before)];
+    } else {
+      this.append(item);
+    }
+  }
+
+  insertAfter(item: T, after?: number) {
+    if (after != null && after >= 0 && after <= this.list.length - 1) {
+      this.list = [...this.list.slice(0, after + 1), item, ...this.list.slice(after + 1)];
+    } else {
+      this.append(item);
+    }
+  }
+
+  map(iterator: (item: T) => any, context: object) {
+    interface Iterator {
+      context?: object;
+      (item: T): any;
+    }
+    const it: Iterator = iterator;
+    it.context = context;
+
+    return this.list.map(it);
+  }
+
+  one(id: string) {
+    const indexFieldName = this.typeClass._index || 'id';
+
+    for (let i = this.list.length - 1; i >= 0; i--) {
+      const record = this.list[i] as Record<string, any>;
+      if (record[indexFieldName] === id) {
+        return this.list[i];
+      }
     }
 
-    static isPropertyList(obj: object) {
-        return '_kind' in obj && obj._kind === 'PropertyList';
+    return undefined;
+  }
+
+  populate(items: T[]) {
+    this.list = [...this.list, ...items];
+  }
+
+  prepend(item: T) {
+    this.list = [item, ...this.list];
+  }
+
+  reduce(iterator: (acc: any, item: T) => any, accumulator: any, context: object) {
+    interface Iterator {
+      context?: object;
+      (acc: any, item: T): any;
+    }
+    const it: Iterator = iterator;
+    it.context = context;
+
+    return this.list.reduce(it, accumulator);
+  }
+
+  remove(predicate: T | ((item: T) => boolean), context: object) {
+    if (typeof predicate === 'function') {
+      const reversePredicate = (item: T) => !predicate(item);
+      this.list = this.filter(reversePredicate, context);
+    } else {
+      this.list = this.filter(item => !equal(predicate, item), context);
+    }
+  }
+
+  repopulate(items: T[]) {
+    this.clear();
+    this.populate(items);
+  }
+
+  // TODO: unsupported yet
+
+  toObject(_excludeDisabled?: boolean, _caseSensitive?: boolean, _multiValue?: boolean, _sanitizeKeys?: boolean) {
+    // it just dump all properties of each element without arguments
+    // then user is able to handle them by themself
+    return this.list.map(elem => elem.toJSON());
+  }
+
+  toString() {
+    const itemStrs = this.list.map(item => item.toString());
+    return `[${itemStrs.join('; ')}]`;
+  }
+
+  upsert(item: T): boolean {
+    if (item == null) {
+      return false;
     }
 
-    add(item: T) {
-        this.list.push(item);
+    const itemIdx = this.indexOf(item);
+    if (itemIdx >= 0) {
+      this.list = [...this.list.splice(0, itemIdx), item, ...this.list.splice(itemIdx + 1)];
+      return false;
     }
 
-    all() {
-        return this.list.map(pp => pp.toJSON());
-    }
-
-    append(item: T) {
-        this.add(item);
-    }
-
-    assimilate(source: T[] | PropertyList<T>, prune?: boolean) {
-        // it doesn't update values from a source list
-        if (prune) {
-            this.clear();
-        }
-        if ('list' in source) { // it is PropertyList<T>
-            this.list.push(...source.list);
-        } else {
-            this.list.push(...source);
-        }
-    }
-
-    clear() {
-        this.list = [];
-    }
-
-    count() {
-        return this.list.length;
-    }
-
-    each(iterator: (item: T) => void, context: object) {
-        interface Iterator {
-            context?: object;
-            (item: T): void;
-        }
-        const it: Iterator = iterator;
-        it.context = context;
-
-        this.list.forEach(it);
-    }
-
-    // TODO: unsupported yet as properties are not organized as hierarchy
-     
-    eachParent(_iterator: (parent: Property, prev: Property) => void, _context?: object) {
-        throw unsupportedError('eachParent');
-    }
-
-    filter(rule: (item: T) => boolean, context: object) {
-        interface Iterator {
-            context?: object;
-            (item: T): boolean;
-        }
-        const it: Iterator = rule;
-        it.context = context;
-
-        return this.list.filter(it);
-    }
-
-    // TODO: support returning {Item|ItemGroup}
-    find(rule: (item: T) => boolean, context?: object) {
-        interface Finder {
-            context?: object;
-            (item: T): boolean;
-        }
-        const finder: Finder = rule;
-        finder.context = context;
-
-        return this.list.find(finder);
-    }
-
-    // it does not return underlying type of the item because they are not supported
-    get(key: string) {
-        return this.one(key);
-    }
-
-    // TODO: value is not used as its usage is unknown
-     
-    has(item: T, _value?: any) {
-        return this.indexOf(item) >= 0;
-    }
-
-    idx(index: number) {
-        if (index <= this.list.length - 1) {
-            return this.list[index];
-        }
-        return undefined;
-    }
-
-    indexOf(item: string | T) {
-        const indexFieldName = this.typeClass._index || 'id';
-
-        for (let i = 0; i < this.list.length; i++) {
-            const record = this.list[i] as Record<string, any>;
-
-            if (typeof item === 'string' && record[indexFieldName] === item) {
-                return i;
-            } 
-                const itemRecord = item as Record<string, any>;
-                if (record[indexFieldName] === itemRecord[indexFieldName]) {
-                    return i;
-                }
-            
-        }
-        return -1;
-    }
-
-    insert(item: T, before?: number) {
-        if (before != null && before >= 0 && before <= this.list.length - 1) {
-            this.list = [...this.list.slice(0, before), item, ...this.list.slice(before)];
-        } else {
-            this.append(item);
-        }
-    }
-
-    insertAfter(item: T, after?: number) {
-        if (after != null && after >= 0 && after <= this.list.length - 1) {
-            this.list = [...this.list.slice(0, after + 1), item, ...this.list.slice(after + 1)];
-        } else {
-            this.append(item);
-        }
-    }
-
-    map(iterator: (item: T) => any, context: object) {
-        interface Iterator {
-            context?: object;
-            (item: T): any;
-        }
-        const it: Iterator = iterator;
-        it.context = context;
-
-        return this.list.map(it);
-    }
-
-    one(id: string) {
-        const indexFieldName = this.typeClass._index || 'id';
-
-        for (let i = this.list.length - 1; i >= 0; i--) {
-
-            const record = this.list[i] as Record<string, any>;
-            if (record[indexFieldName] === id) {
-                return this.list[i];
-            }
-        }
-
-        return undefined;
-    }
-
-    populate(items: T[]) {
-        this.list = [...this.list, ...items];
-    }
-
-    prepend(item: T) {
-        this.list = [item, ...this.list];
-    }
-
-    reduce(iterator: ((acc: any, item: T) => any), accumulator: any, context: object) {
-        interface Iterator {
-            context?: object;
-            (acc: any, item: T): any;
-        }
-        const it: Iterator = iterator;
-        it.context = context;
-
-        return this.list.reduce(it, accumulator);
-    }
-
-    remove(predicate: T | ((item: T) => boolean), context: object) {
-        if (typeof predicate === 'function') {
-            const reversePredicate = (item: T) => !predicate(item);
-            this.list = this.filter(reversePredicate, context);
-        } else {
-            this.list = this.filter(item => !equal(predicate, item), context);
-        }
-    }
-
-    repopulate(items: T[]) {
-        this.clear();
-        this.populate(items);
-    }
-
-    // TODO: unsupported yet
-     
-    toObject(_excludeDisabled?: boolean, _caseSensitive?: boolean, _multiValue?: boolean, _sanitizeKeys?: boolean) {
-        // it just dump all properties of each element without arguments
-        // then user is able to handle them by themself
-        return this.list.map(elem => elem.toJSON());
-    }
-
-    toString() {
-        const itemStrs = this.list.map(item => item.toString());
-        return `[${itemStrs.join('; ')}]`;
-    }
-
-    upsert(item: T): boolean {
-        if (item == null) {
-            return false;
-        }
-
-        const itemIdx = this.indexOf(item);
-        if (itemIdx >= 0) {
-            this.list = [...this.list.splice(0, itemIdx), item, ...this.list.splice(itemIdx + 1)];
-            return false;
-        }
-
-        this.add(item);
-        return true;
-    }
+    this.add(item);
+    return true;
+  }
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/proxy-configs.ts b/packages/insomnia-scripting-environment/src/objects/proxy-configs.ts
index 5d578cb062..42147df2f1 100644
--- a/packages/insomnia-scripting-environment/src/objects/proxy-configs.ts
+++ b/packages/insomnia-scripting-environment/src/objects/proxy-configs.ts
@@ -1,9 +1,51 @@
 import { getExistingConsole } from './console';
 import { Property, PropertyList } from './properties';
-import type { Url} from './urls';
+import type { Url } from './urls';
 import { UrlMatchPattern, UrlMatchPatternList } from './urls';
 
 export interface ProxyConfigOptions {
+  match: string;
+  host: string;
+  port?: number;
+  tunnel: boolean;
+  disabled?: boolean;
+  authenticate: boolean;
+  username: string;
+  password: string;
+  // follows are for compatibility with Insomnia
+  bypass?: string[];
+  protocol: string;
+}
+
+export class ProxyConfig extends Property {
+  override _kind = 'ProxyConfig';
+  type: string;
+
+  host: string;
+  match: string;
+  port?: number;
+  tunnel: boolean;
+  authenticate: boolean;
+  username: string;
+  password: string;
+  bypass: string[]; // it is for compatibility with Insomnia's bypass list
+  protocol: string;
+
+  static authenticate = false;
+  static bypass: UrlMatchPatternList<UrlMatchPattern> = new UrlMatchPatternList<UrlMatchPattern>(undefined, []);
+  static host = '';
+  static match = '';
+  static password = '';
+  static port?: number = undefined;
+  static tunnel = false; // unsupported
+  static username = '';
+  static protocol = 'https:';
+
+  constructor(def: {
+    id?: string;
+    name?: string;
+    type?: string;
+
     match: string;
     host: string;
     port?: number;
@@ -12,15 +54,63 @@ export interface ProxyConfigOptions {
     authenticate: boolean;
     username: string;
     password: string;
-    // follows are for compatibility with Insomnia
     bypass?: string[];
     protocol: string;
-}
+  }) {
+    super();
 
-export class ProxyConfig extends Property {
-    override _kind = 'ProxyConfig';
-    type: string;
+    this.id = def.id ? def.id : '';
+    this.name = def.name ? def.name : '';
+    this.type = def.type ? def.type : '';
+    this.disabled = def.disabled ? def.disabled : false;
 
+    this.host = def.host;
+    this.match = def.match;
+    this.port = def.port;
+    this.tunnel = def.tunnel;
+    this.authenticate = def.authenticate;
+    this.username = def.username;
+    this.password = def.password;
+    this.bypass = def.bypass || [];
+    this.protocol = def.protocol;
+  }
+
+  static override _index = 'key';
+
+  static isProxyConfig(obj: object) {
+    return '_kind' in obj && obj._kind === 'ProxyConfig';
+  }
+
+  getProtocols(): string[] {
+    // match field example: 'http+https://example.com/*'
+    const urlMatch = new UrlMatchPattern(this.match);
+    return urlMatch.getProtocols();
+  }
+
+  getProxyUrl(): string {
+    // http://proxy_username:proxy_password@proxy.com:8080
+    const portSegment = this.port === undefined ? '' : `:${this.port}`;
+
+    if (this.authenticate) {
+      return `${this.protocol}//${this.username}:${this.password}@${this.host}${portSegment}`;
+    }
+    return `${this.protocol}//${this.host}${portSegment}`;
+  }
+
+  test(url?: string) {
+    if (!url) {
+      // TODO: it is confusing in which case url arg is optional
+      return false;
+    }
+    if (this.bypass.includes(url)) {
+      return false;
+    }
+
+    const urlMatch = new UrlMatchPattern(this.match);
+    return urlMatch.test(url);
+  }
+
+  update(options: {
     host: string;
     match: string;
     port?: number;
@@ -28,112 +118,20 @@ export class ProxyConfig extends Property {
     authenticate: boolean;
     username: string;
     password: string;
-    bypass: string[]; // it is for compatibility with Insomnia's bypass list
-    protocol: string;
+  }) {
+    this.host = options.host;
+    this.match = options.match;
+    this.port = options.port;
+    this.tunnel = options.tunnel;
+    this.authenticate = options.authenticate;
+    this.username = options.username;
+    this.password = options.password;
+  }
 
-    static authenticate = false;
-    static bypass: UrlMatchPatternList<UrlMatchPattern> = new UrlMatchPatternList<UrlMatchPattern>(undefined, []);
-    static host = '';
-    static match = '';
-    static password = '';
-    static port?: number = undefined;
-    static tunnel = false; // unsupported
-    static username = '';
-    static protocol = 'https:';
-
-    constructor(def: {
-        id?: string;
-        name?: string;
-        type?: string;
-
-        match: string;
-        host: string;
-        port?: number;
-        tunnel: boolean;
-        disabled?: boolean;
-        authenticate: boolean;
-        username: string;
-        password: string;
-        bypass?: string[];
-        protocol: string;
-    }) {
-        super();
-
-        this.id = def.id ? def.id : '';
-        this.name = def.name ? def.name : '';
-        this.type = def.type ? def.type : '';
-        this.disabled = def.disabled ? def.disabled : false;
-
-        this.host = def.host;
-        this.match = def.match;
-        this.port = def.port;
-        this.tunnel = def.tunnel;
-        this.authenticate = def.authenticate;
-        this.username = def.username;
-        this.password = def.password;
-        this.bypass = def.bypass || [];
-        this.protocol = def.protocol;
-    }
-
-    static override _index = 'key';
-
-    static isProxyConfig(obj: object) {
-        return '_kind' in obj && obj._kind === 'ProxyConfig';
-    }
-
-    getProtocols(): string[] {
-        // match field example: 'http+https://example.com/*'
-        const urlMatch = new UrlMatchPattern(this.match);
-        return urlMatch.getProtocols();
-    }
-
-    getProxyUrl(): string {
-        // http://proxy_username:proxy_password@proxy.com:8080
-        const portSegment = this.port === undefined ? '' : `:${this.port}`;
-
-        if (this.authenticate) {
-            return `${this.protocol}//${this.username}:${this.password}@${this.host}${portSegment}`;
-        }
-        return `${this.protocol}//${this.host}${portSegment}`;
-
-    }
-
-    test(url?: string) {
-        if (!url) {
-            // TODO: it is confusing in which case url arg is optional
-            return false;
-        }
-        if (this.bypass.includes(url)) {
-            return false;
-        }
-
-        const urlMatch = new UrlMatchPattern(this.match);
-        return urlMatch.test(url);
-    }
-
-    update(options: {
-        host: string;
-        match: string;
-        port?: number;
-        tunnel: boolean;
-        authenticate: boolean;
-        username: string;
-        password: string;
-    }) {
-        this.host = options.host;
-        this.match = options.match;
-        this.port = options.port;
-        this.tunnel = options.tunnel;
-        this.authenticate = options.authenticate;
-        this.username = options.username;
-        this.password = options.password;
-    }
-
-     
-    updateProtocols(_protocols: string[]) {
-        // In Insomnia there is no whitelist while there is a blacklist
-        throw Error('updateProtocols is not supported in Insomnia');
-    }
+  updateProtocols(_protocols: string[]) {
+    // In Insomnia there is no whitelist while there is a blacklist
+    throw Error('updateProtocols is not supported in Insomnia');
+  }
 }
 
 // example:
@@ -143,89 +141,81 @@ export class ProxyConfig extends Property {
 // ]);
 
 export class ProxyConfigList<T extends ProxyConfig> extends PropertyList<T> {
-    constructor(parent: PropertyList<T> | undefined, populate: T[]) {
-        super(
-            ProxyConfig,
-            undefined,
-            populate
-        );
-        this.parent = parent;
+  constructor(parent: PropertyList<T> | undefined, populate: T[]) {
+    super(ProxyConfig, undefined, populate);
+    this.parent = parent;
+  }
+
+  static isProxyConfigList(obj: any) {
+    return '_kind' in obj && obj._kind === 'ProxyConfigList';
+  }
+
+  resolve(url?: Url) {
+    if (!url) {
+      return null;
     }
 
-    static isProxyConfigList(obj: any) {
-        return '_kind' in obj && obj._kind === 'ProxyConfigList';
-    }
-
-    resolve(url?: Url) {
-        if (!url) {
-            return null;
-        }
-
-        const urlStr = url.toString();
-        const matches = this.list
-            .filter((proxyConfig: ProxyConfig) => {
-                return proxyConfig.test(urlStr);
-            })
-            .map(proxyConfig => proxyConfig.toJSON());
-
-        if (matches.length > 0) {
-            return matches[0];
-        }
-        return null;
+    const urlStr = url.toString();
+    const matches = this.list
+      .filter((proxyConfig: ProxyConfig) => {
+        return proxyConfig.test(urlStr);
+      })
+      .map(proxyConfig => proxyConfig.toJSON());
+
+    if (matches.length > 0) {
+      return matches[0];
     }
+    return null;
+  }
 }
 
 export function transformToSdkProxyOptions(
-    httpProxy: string,
-    httpsProxy: string,
-    proxyEnabled: boolean,
-    noProxy: string,
+  httpProxy: string,
+  httpsProxy: string,
+  proxyEnabled: boolean,
+  noProxy: string,
 ) {
-    const bestProxy = httpsProxy || httpProxy || '';
-    const enabledProxy = proxyEnabled && bestProxy.trim() !== '';
-    const bypassProxyList = noProxy ?
-        noProxy
-            .split(',')
-            .map(urlStr => urlStr.trim()) :
-        [];
-    const proxy: ProxyConfigOptions = {
-        disabled: !enabledProxy,
-        match: '<all_urls>',
-        bypass: bypassProxyList,
-        host: '',
-        port: undefined,
-        tunnel: false,
-        authenticate: false,
-        username: '',
-        password: '',
-        protocol: 'http',
-    };
+  const bestProxy = httpsProxy || httpProxy || '';
+  const enabledProxy = proxyEnabled && bestProxy.trim() !== '';
+  const bypassProxyList = noProxy ? noProxy.split(',').map(urlStr => urlStr.trim()) : [];
+  const proxy: ProxyConfigOptions = {
+    disabled: !enabledProxy,
+    match: '<all_urls>',
+    bypass: bypassProxyList,
+    host: '',
+    port: undefined,
+    tunnel: false,
+    authenticate: false,
+    username: '',
+    password: '',
+    protocol: 'http',
+  };
 
-    if (bestProxy !== '') {
-        let sanitizedProxy = bestProxy;
-        if (bestProxy.indexOf('://') === -1) {
-            getExistingConsole().warn(`The protocol is missing for proxy, 'https:' is enabled for: ${bestProxy}`);
-            sanitizedProxy = 'https://' + bestProxy;
-        }
-
-        try {
-            const sanitizedProxyUrlOptions = new URL(sanitizedProxy); // it should just work in node and browser
-
-            if (sanitizedProxyUrlOptions.port !== '') {
-                proxy.port = parseInt(sanitizedProxyUrlOptions.port, 10);
-            }
-
-            proxy.protocol = sanitizedProxyUrlOptions.protocol;
-            proxy.host = sanitizedProxyUrlOptions.hostname;
-            proxy.username = sanitizedProxyUrlOptions.username;
-            proxy.password = sanitizedProxyUrlOptions.password;
-            if (proxy.username || proxy.password) {
-                proxy.authenticate = true;
-            }
-        } catch (e) {
-            throw `Failed to parse proxy (${sanitizedProxy}): ${e.message}`;
-        }
+  if (bestProxy !== '') {
+    let sanitizedProxy = bestProxy;
+    if (bestProxy.indexOf('://') === -1) {
+      getExistingConsole().warn(`The protocol is missing for proxy, 'https:' is enabled for: ${bestProxy}`);
+      sanitizedProxy = 'https://' + bestProxy;
     }
 
-    return proxy;
+    try {
+      const sanitizedProxyUrlOptions = new URL(sanitizedProxy); // it should just work in node and browser
+
+      if (sanitizedProxyUrlOptions.port !== '') {
+        proxy.port = parseInt(sanitizedProxyUrlOptions.port, 10);
+      }
+
+      proxy.protocol = sanitizedProxyUrlOptions.protocol;
+      proxy.host = sanitizedProxyUrlOptions.hostname;
+      proxy.username = sanitizedProxyUrlOptions.username;
+      proxy.password = sanitizedProxyUrlOptions.password;
+      if (proxy.username || proxy.password) {
+        proxy.authenticate = true;
+      }
+    } catch (e) {
+      throw `Failed to parse proxy (${sanitizedProxy}): ${e.message}`;
+    }
+  }
+
+  return proxy;
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/request-info.ts b/packages/insomnia-scripting-environment/src/objects/request-info.ts
index 9faad2b01c..66b7e3d61d 100644
--- a/packages/insomnia-scripting-environment/src/objects/request-info.ts
+++ b/packages/insomnia-scripting-environment/src/objects/request-info.ts
@@ -1,35 +1,35 @@
 export type EventName = 'prerequest' | 'test';
 
 export interface RequestInfoOption {
-    eventName?: EventName;
-    iteration?: number;
-    iterationCount?: number;
-    requestName?: string;
-    requestId?: string;
-};
+  eventName?: EventName;
+  iteration?: number;
+  iterationCount?: number;
+  requestName?: string;
+  requestId?: string;
+}
 
 export class RequestInfo {
-    public eventName: EventName;
-    public iteration: number;
-    public iterationCount: number;
-    public requestName: string;
-    public requestId: string;
+  public eventName: EventName;
+  public iteration: number;
+  public iterationCount: number;
+  public requestName: string;
+  public requestId: string;
 
-    constructor(options: RequestInfoOption) {
-        this.eventName = options.eventName || 'prerequest';
-        this.iteration = options.iteration || 1;
-        this.iterationCount = options.iterationCount || 1;
-        this.requestName = options.requestName || '';
-        this.requestId = options.requestId || '';
-    }
+  constructor(options: RequestInfoOption) {
+    this.eventName = options.eventName || 'prerequest';
+    this.iteration = options.iteration || 1;
+    this.iterationCount = options.iterationCount || 1;
+    this.requestName = options.requestName || '';
+    this.requestId = options.requestId || '';
+  }
 
-    toObject = () => {
-        return {
-            eventName: this.eventName,
-            iteration: this.iteration,
-            iterationCount: this.iterationCount,
-            requestName: this.requestName,
-            requestId: this.requestId,
-        };
+  toObject = () => {
+    return {
+      eventName: this.eventName,
+      iteration: this.iteration,
+      iterationCount: this.iterationCount,
+      requestName: this.requestName,
+      requestId: this.requestId,
     };
+  };
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/request.ts b/packages/insomnia-scripting-environment/src/objects/request.ts
index 637b262e66..79af8160f8 100644
--- a/packages/insomnia-scripting-environment/src/objects/request.ts
+++ b/packages/insomnia-scripting-environment/src/objects/request.ts
@@ -1,5 +1,10 @@
 import { type ClientCertificate, init as initClientCertificate } from 'insomnia/src/models/client-certificate';
-import type { Request as InsomniaRequest, RequestBody as InsomniaRequestBody, RequestBodyParameter, RequestPathParameter } from 'insomnia/src/models/request';
+import type {
+  Request as InsomniaRequest,
+  RequestBody as InsomniaRequestBody,
+  RequestBodyParameter,
+  RequestPathParameter,
+} from 'insomnia/src/models/request';
 import type { Settings } from 'insomnia/src/models/settings';
 
 import { type AuthOptions, type AuthOptionTypes, fromPreRequestAuth, RequestAuth } from './auth';
@@ -16,708 +21,688 @@ import type { Variable, VariableList } from './variables';
 export type RequestBodyMode = undefined | 'formdata' | 'urlencoded' | 'raw' | 'file' | 'graphql';
 
 export interface RequestBodyOptions {
-    mode: RequestBodyMode;
-    file?: string;
-    formdata?: { key: string; value: string; type?: string; disabled?: boolean }[];
-    graphql?: { query: string; operationName: string; variables: object; disabled?: boolean };
-    raw?: string;
-    urlencoded?: { key: string; value: string; type?: string; disabled?: boolean; multiline?: boolean | string; fileName?: string }[];
-    options?: object;
-}
-
-export class FormParam extends Property {
+  mode: RequestBodyMode;
+  file?: string;
+  formdata?: { key: string; value: string; type?: string; disabled?: boolean }[];
+  graphql?: { query: string; operationName: string; variables: object; disabled?: boolean };
+  raw?: string;
+  urlencoded?: {
     key: string;
     value: string;
     type?: string;
+    disabled?: boolean;
+    multiline?: boolean | string;
+    fileName?: string;
+  }[];
+  options?: object;
+}
 
-    constructor(options: { key: string; value: string; type?: string; disabled?: boolean }) {
-        super();
-        this.key = options.key;
-        this.value = options.value;
-        this.type = options.type;
-        this.disabled = options.disabled;
-    }
+export class FormParam extends Property {
+  key: string;
+  value: string;
+  type?: string;
 
-    static _postman_propertyAllowsMultipleValues() {
-        throw Error('unsupported');
-    }
+  constructor(options: { key: string; value: string; type?: string; disabled?: boolean }) {
+    super();
+    this.key = options.key;
+    this.value = options.value;
+    this.type = options.type;
+    this.disabled = options.disabled;
+  }
 
-    static _postman_propertyIndexKey() {
-        throw Error('unsupported');
-    }
+  static _postman_propertyAllowsMultipleValues() {
+    throw Error('unsupported');
+  }
 
-    // TODO: it is not supported yet in existing scripts
-    // static parse(param: FormParam) {
-    // }
+  static _postman_propertyIndexKey() {
+    throw Error('unsupported');
+  }
 
-    override toJSON() {
-        return { key: this.key, value: this.value, type: this.type, disabled: this.disabled };
-    }
+  // TODO: it is not supported yet in existing scripts
+  // static parse(param: FormParam) {
+  // }
 
-    override toString() {
-        const key = encodeURIComponent(this.key);
-        const value = encodeURIComponent(this.value);
-        return `${key}=${value}`;
-    }
+  override toJSON() {
+    return { key: this.key, value: this.value, type: this.type, disabled: this.disabled };
+  }
 
-    override valueOf() {
-        return this.value;
-    }
+  override toString() {
+    const key = encodeURIComponent(this.key);
+    const value = encodeURIComponent(this.value);
+    return `${key}=${value}`;
+  }
+
+  override valueOf() {
+    return this.value;
+  }
 }
 
 function getClassFields(opts: RequestBodyOptions) {
-    const formdata = opts.formdata ?
-        new PropertyList(
-            FormParam,
-            undefined,
-            opts.formdata.
-                map(formParamObj => new FormParam({
-                    ...formParamObj,
-                }))
-        ) :
-        undefined;
+  const formdata = opts.formdata
+    ? new PropertyList(
+        FormParam,
+        undefined,
+        opts.formdata.map(
+          formParamObj =>
+            new FormParam({
+              ...formParamObj,
+            }),
+        ),
+      )
+    : undefined;
 
-    let urlencoded = undefined;
-    if (opts.urlencoded != null) {
-        if (typeof opts.urlencoded === 'string') {
-            const queryParamObj = QueryParam.parse(opts.urlencoded);
-            urlencoded = new PropertyList(
-                QueryParam,
-                undefined,
-                Object.entries(queryParamObj)
-                    .map(entry => ({ key: entry[0], value: JSON.stringify(entry[1]) }))
-                    .map(kv => new QueryParam(kv)),
-            );
-        } else {
-            urlencoded = new PropertyList(
-                QueryParam,
-                undefined,
-                opts.urlencoded
-                    .map(entry => ({
-                        key: entry.key,
-                        value: entry.value,
-                        type: entry.type,
-                        disabled: entry.disabled,
-                        fileName: entry.fileName,
-                        multiline: entry.multiline,
-                    }))
-                    .map(kv => new QueryParam(kv)),
-            );
-        }
+  let urlencoded = undefined;
+  if (opts.urlencoded != null) {
+    if (typeof opts.urlencoded === 'string') {
+      const queryParamObj = QueryParam.parse(opts.urlencoded);
+      urlencoded = new PropertyList(
+        QueryParam,
+        undefined,
+        Object.entries(queryParamObj)
+          .map(entry => ({ key: entry[0], value: JSON.stringify(entry[1]) }))
+          .map(kv => new QueryParam(kv)),
+      );
+    } else {
+      urlencoded = new PropertyList(
+        QueryParam,
+        undefined,
+        opts.urlencoded
+          .map(entry => ({
+            key: entry.key,
+            value: entry.value,
+            type: entry.type,
+            disabled: entry.disabled,
+            fileName: entry.fileName,
+            multiline: entry.multiline,
+          }))
+          .map(kv => new QueryParam(kv)),
+      );
     }
+  }
 
-    return {
-        mode: opts.mode,
-        file: opts.file,
-        graphql: opts.graphql,
-        raw: opts.raw,
-        options: opts.options,
-        formdata,
-        urlencoded,
-    };
+  return {
+    mode: opts.mode,
+    file: opts.file,
+    graphql: opts.graphql,
+    raw: opts.raw,
+    options: opts.options,
+    formdata,
+    urlencoded,
+  };
 }
 
 export class RequestBody extends PropertyBase {
-    mode: RequestBodyMode; // type of request data
-    // It can be a file path (when used with Node.js) or a unique ID (when used with the browser).
-    // or it could be "data:application/octet-stream;base64"
-    file?: string;
-    formdata?: PropertyList<FormParam>;
-    graphql?: { query: string; operationName: string; variables: object }; // raw graphql data
-    // TODO: option's usage is unknown
-    raw?: string; // raw body
-    urlencoded?: PropertyList<QueryParam>; // URL encoded body params
-    options?: object; // request body options
+  mode: RequestBodyMode; // type of request data
+  // It can be a file path (when used with Node.js) or a unique ID (when used with the browser).
+  // or it could be "data:application/octet-stream;base64"
+  file?: string;
+  formdata?: PropertyList<FormParam>;
+  graphql?: { query: string; operationName: string; variables: object }; // raw graphql data
+  // TODO: option's usage is unknown
+  raw?: string; // raw body
+  urlencoded?: PropertyList<QueryParam>; // URL encoded body params
+  options?: object; // request body options
 
-    constructor(opts: RequestBodyOptions) {
-        super();
+  constructor(opts: RequestBodyOptions) {
+    super();
 
-        const transformedOpts = getClassFields(opts);
-        this.mode = transformedOpts.mode;
-        this.file = transformedOpts.file;
-        this.formdata = transformedOpts.formdata;
-        this.graphql = transformedOpts.graphql;
-        this.options = transformedOpts.options;
-        this.raw = transformedOpts.raw;
-        this.urlencoded = transformedOpts.urlencoded;
+    const transformedOpts = getClassFields(opts);
+    this.mode = transformedOpts.mode;
+    this.file = transformedOpts.file;
+    this.formdata = transformedOpts.formdata;
+    this.graphql = transformedOpts.graphql;
+    this.options = transformedOpts.options;
+    this.raw = transformedOpts.raw;
+    this.urlencoded = transformedOpts.urlencoded;
+  }
+
+  isEmpty() {
+    switch (this.mode) {
+      case 'formdata':
+        return this.formdata == null;
+      case 'urlencoded':
+        return this.urlencoded == null;
+      case 'raw':
+        return this.raw == null;
+      case 'file':
+        return this.file == null;
+      case 'graphql':
+        return this.graphql == null;
+      default:
+        throw Error(`isEmpty: mode (${this.mode}) is unexpected`);
     }
+  }
 
-    isEmpty() {
-        switch (this.mode) {
-            case 'formdata':
-                return this.formdata == null;
-            case 'urlencoded':
-                return this.urlencoded == null;
-            case 'raw':
-                return this.raw == null;
-            case 'file':
-                return this.file == null;
-            case 'graphql':
-                return this.graphql == null;
-            default:
-                throw Error(`isEmpty: mode (${this.mode}) is unexpected`);
-        }
-    }
-
-    override toString() {
-        if (this.mode === undefined) {
-            return '';
-        }
-
-        try {
-            switch (this.mode) {
-                case 'formdata':
-                    return this.formdata?.map(param => param.toString(), {}).join('&') || '';
-                case 'urlencoded':
-                    return this.urlencoded?.map(param => param.toString(), {}).join('&') || '';
-                case 'raw':
-                    return this.raw || '';
-                case 'file':
-                    return this.file || '';
-                case 'graphql':
-                    return this.graphql ? JSON.stringify(this.graphql) : '';
-                default:
-                    throw Error(`mode (${this.mode}) is unexpected`);
-            }
-        } catch (e) {
-            throw Error(`toString: ${e}`);
-        }
-    }
-
-    update(opts: RequestBodyOptions) {
-        const transformedOpts = getClassFields(opts);
-        this.mode = transformedOpts.mode;
-        this.file = transformedOpts.file;
-        this.formdata = transformedOpts.formdata;
-        this.graphql = transformedOpts.graphql;
-        this.options = transformedOpts.options;
-        this.raw = transformedOpts.raw;
-        this.urlencoded = transformedOpts.urlencoded;
-    }
-}
-
-export interface RequestOptions {
-    url: string | Url;
-    method?: string;
-    header?: HeaderDefinition[] | object;
-    body?: RequestBodyOptions;
-    auth?: AuthOptions;
-    proxy?: ProxyConfigOptions;
-    certificate?: CertificateOptions;
-    pathParameters?: RequestPathParameter[];
-    name?: string;
-}
-
-export interface RequestSize {
-    body: number;
-    header: number;
-    total: number;
-    source: string;
-}
-
-function requestOptionsToClassFields(options: RequestOptions) {
-    const url = toUrlObject(options.url);
-    const method = options.method || 'GET';
-
-    let headers: HeaderList<Header>;
-    if (options.header != null) {
-        if (Array.isArray(options.header)) {
-            headers = new HeaderList(
-                undefined,
-                options.header ? options.header.map(header => new Header(header)) : [],
-            );
-        } else {
-            headers = new HeaderList(
-                undefined,
-                Object.entries(options.header)
-                    .map(entry => new Header({ key: entry[0], value: entry[1] })),
-            );
-        }
-    } else {
-        headers = new HeaderList(undefined, new Array<Header>());
-    }
-
-    const body = options.body ? new RequestBody(options.body) : undefined;
-    const auth = new RequestAuth(options.auth || { type: 'noauth' });
-    const proxy = options.proxy ? new ProxyConfig(options.proxy) : undefined;
-    const certificate = options.certificate ? new Certificate(options.certificate) : undefined;
-    const pathParameters = options.pathParameters ? options.pathParameters : new Array<RequestPathParameter>();
-
-    return {
-        name: options.name || '',
-        url,
-        method,
-        headers,
-        body,
-        auth,
-        proxy,
-        certificate,
-        pathParameters,
-    };
-}
-
-export class Request extends Property {
-    override name: string;
-    url: Url;
-    method: string;
-    headers: HeaderList<Header>;
-    body?: RequestBody;
-    auth: RequestAuth;
-    proxy?: ProxyConfig;
-    certificate?: Certificate;
-    pathParameters: RequestPathParameter[];
-
-    constructor(options: RequestOptions) {
-        super();
-
-        this._kind = 'Request';
-
-        const transformedOpts = requestOptionsToClassFields(options);
-
-        this.name = transformedOpts.name;
-        this.url = transformedOpts.url;
-        this.method = transformedOpts.method;
-        this.headers = transformedOpts.headers;
-        this.body = transformedOpts.body;
-        this.auth = transformedOpts.auth;
-        this.proxy = transformedOpts.proxy;
-        this.certificate = transformedOpts.certificate;
-        this.pathParameters = transformedOpts.pathParameters;
-    }
-
-    static isRequest(obj: object) {
-        return '_kind' in obj && obj._kind === 'Request';
-    }
-
-    addHeader(header: Header | object) {
-        if (Header.isHeader(header)) {
-            const headerInstance = header as Header;
-            this.headers.add(headerInstance);
-        } else if ('key' in header && 'value' in header) {
-            const headerInstance = new Header(header);
-            this.headers.add(headerInstance);
-        } else {
-            throw Error('header must be Header | {key: string; value: string}');
-        }
-    }
-
-    addQueryParams(params: QueryParam[] | string) {
-        this.url.addQueryParams(params);
-    }
-
-    authorizeUsing(authType: AuthOptionTypes | AuthOptions, options?: VariableList<Variable>) {
-        const selectedAuth = typeof authType === 'string' ? authType : authType.type;
-        this.auth.use(selectedAuth, options || { type: 'noauth' });
-    }
-
-    clone() {
-        return new Request({ ...this.toJSON() });
-    }
-
-    forEachHeader(callback: (header: Header, context?: object) => void) {
-        this.headers.each(callback, {});
-    }
-
-    getHeaders(options?: {
-        ignoreCase: boolean;
-        enabled: boolean;
-        multiValue: boolean;
-        sanitizeKeys: boolean;
-    }) {
-        // merge headers with same key into an array
-        const headerMap = new Map<string, string[]>();
-        this.headers.each(header => {
-            // if the disable is null, it means enabled.
-            const enabled = options?.enabled ? header.disabled == null || !header.disabled : true;
-            const isFalsyValue = options?.sanitizeKeys ? !header.value : false;
-            const hasName = !!header.key;
-
-            if (!enabled || isFalsyValue || !hasName) {
-                return;
-            }
-
-            header.key = options?.ignoreCase ? header.key?.toLocaleLowerCase() : header.key;
-
-            if (headerMap.has(header.key)) {
-                const existingHeader = headerMap.get(header.key) || [];
-                headerMap.set(header.key, [...existingHeader, header.value]);
-            } else {
-                headerMap.set(header.key, [header.value]);
-            }
-        }, {});
-
-        const headersObj: Record<string, string[] | string> = {};
-        Array.from(headerMap.entries())
-            .forEach(headerEntry => {
-                headersObj[headerEntry[0]] = headerEntry[1];
-            });
-
-        return headersObj;
-    }
-
-    removeHeader(toRemove: string | Header, options?: { ignoreCase: boolean }) {
-        const filteredHeaders = this.headers.filter(
-            header => {
-                if (!header.key) {
-                    return false;
-                }
-
-                if (typeof toRemove === 'string') {
-                    return options != null && options.ignoreCase ?
-                        header.key.toLocaleLowerCase() !== toRemove.toLocaleLowerCase() :
-                        header.key !== toRemove;
-                } else if (toRemove instanceof Header) {
-                    if (!toRemove.key) {
-                        return false;
-                    }
-
-                    return options != null && options.ignoreCase ?
-                        header.key.toLocaleLowerCase() !== toRemove.key.toLocaleLowerCase() :
-                        header.key !== toRemove.key;
-                } 
-                    throw Error('type of the "toRemove" must be: string | Header');
-                
-            },
-            {},
-        );
-
-        this.headers = new HeaderList(undefined, filteredHeaders);
-    }
-
-    removeQueryParams(params: string | string[] | QueryParam[]) {
-        this.url.removeQueryParams(params);
-    }
-
-    size(): RequestSize {
-        return calculatePayloadSize((this.body || '').toString(), this.headers);
-    }
-
-    override toJSON() {
-        return {
-            url: this.url.toString(),
-            method: this.method,
-            header: this.headers.map(header => header.toJSON(), {}),
-            body: {
-                mode: this.body?.mode,
-                file: this.body?.file,
-                formdata: this.body?.formdata?.map(formParam => formParam.toJSON(), {}),
-                graphql: this.body?.graphql,
-                raw: this.body?.raw,
-                urlencoded: this.body?.urlencoded?.map(queryParam => queryParam.toJSON(), {}),
-            },
-            auth: this.auth.toJSON(),
-            proxy: this.proxy ? {
-                match: this.proxy.match,
-                host: this.proxy.host,
-                port: this.proxy.port,
-                tunnel: this.proxy.tunnel,
-                disabled: this.proxy.disabled,
-                authenticate: this.proxy.authenticate,
-                username: this.proxy.username,
-                password: this.proxy.password,
-                protocol: this.proxy.protocol,
-            } : undefined,
-            certificate: this.certificate ? {
-                name: this.certificate?.name,
-                matches: this.certificate?.matches?.map(match => match.toString(), {}),
-                key: this.certificate?.key,
-                cert: this.certificate?.cert,
-                passphrase: this.certificate?.passphrase,
-                pfx: this.certificate?.pfx,
-            } : undefined,
-        };
-    }
-
-    update(options: RequestOptions) {
-        const transformedOptions = requestOptionsToClassFields(options);
-
-        this.name = transformedOptions.name;
-        this.url = transformedOptions.url;
-        this.method = transformedOptions.method;
-        this.headers = transformedOptions.headers;
-        this.body = transformedOptions.body;
-        this.auth = transformedOptions.auth;
-        this.proxy = transformedOptions.proxy;
-        this.certificate = transformedOptions.certificate;
-        this.pathParameters = transformedOptions.pathParameters;
-    }
-
-    upsertHeader(header: HeaderDefinition) {
-        // remove keys with same name
-        this.headers = new HeaderList(
-            undefined,
-            this.headers
-                .filter(
-                    existingHeader => existingHeader.key !== header.key,
-                    {},
-                )
-        );
-
-        // append new
-        this.headers.append(new Header(header));
-    }
-}
-
-export function mergeSettings(
-    originalSettings: Settings,
-    updatedReq: Request,
-): Settings {
-    const proxyEnabled = updatedReq.proxy != null
-        && !updatedReq.proxy.disabled
-        && updatedReq.proxy.getProxyUrl() !== '';
-    if (!proxyEnabled) {
-        return originalSettings;
-    }
-
-    const proxyUrl = updatedReq.proxy?.getProxyUrl();
-    if (!proxyUrl) {
-        return originalSettings;
-    }
-
-    // it always override both http and https proxies
-    const httpProxy = proxyUrl;
-    const httpsProxy = proxyUrl;
-
-    return {
-        ...originalSettings,
-        proxyEnabled,
-        httpProxy,
-        httpsProxy,
-    };
-}
-
-export function mergeClientCertificates(
-    originalClientCertificates: ClientCertificate[],
-    updatedReq: Request,
-): ClientCertificate[] {
-    // as Pre-request script request only supports one certificate while Insomnia supports configuring multiple ones
-    // then the mapping rule is:
-    // - if the pre-request script request cert is specified, it replaces all original certs
-    // - if not, it returns original certs
-
-    if (!updatedReq.certificate) {
-        return originalClientCertificates;
-    } else if (
-        updatedReq.certificate.key == null &&
-        updatedReq.certificate.cert == null &&
-        updatedReq.certificate.pfx == null
-    ) {
-        return originalClientCertificates;
-    }
-
-    const baseCertificate = originalClientCertificates && originalClientCertificates.length > 0 ?
-        {
-            // TODO: remove baseModelPart currently it is necessary for type checking
-            ...initClientCertificate(),
-            ...originalClientCertificates[0],
-        } :
-        {
-            // TODO: remove baseModelPart currently it is necessary for type checking
-            ...initClientCertificate(),
-            _id: '',
-            type: '',
-            parentId: '',
-            modified: 0,
-            created: 0,
-            isPrivate: false,
-            name: '',
-        };
-
-    if (updatedReq.certificate.pfx && updatedReq.certificate.pfx?.src !== '') {
-        const specifiedCert: ClientCertificate = {
-            ...baseCertificate,
-            key: null,
-            cert: null,
-            name: updatedReq.certificate.name || '',
-            disabled: updatedReq.certificate.disabled || false,
-            passphrase: updatedReq.certificate.passphrase || null,
-            pfx: updatedReq.certificate.pfx?.src,
-            host: '*',
-        };
-
-        return [specifiedCert, ...originalClientCertificates];
-    } else if (
-        updatedReq &&
-        updatedReq.certificate.key &&
-        updatedReq.certificate.cert &&
-        updatedReq.certificate.key?.src !== '' &&
-        updatedReq.certificate.cert?.src !== ''
-    ) {
-        const specifiedCert: ClientCertificate = {
-            ...baseCertificate,
-
-            _id: '',
-            type: '',
-            parentId: '',
-            modified: 0,
-            created: 0,
-            isPrivate: false,
-            name: updatedReq.certificate.name || '',
-            disabled: updatedReq.certificate.disabled || false,
-            host: '*',
-            key: updatedReq.certificate.key?.src,
-            cert: updatedReq.certificate.cert?.src,
-            passphrase: updatedReq.certificate.passphrase || null,
-            pfx: null,
-        };
-
-        return [specifiedCert, ...originalClientCertificates];
-    }
-
-    throw Error('Invalid certificate configuration: "cert+key" and "pfx" can not be set at the same time');
-}
-
-export function toScriptRequestBody(insomniaReqBody: InsomniaRequestBody): RequestBodyOptions {
-    let reqBodyOpt: RequestBodyOptions = { mode: undefined };
-
-    if (insomniaReqBody.text !== undefined) {
-        reqBodyOpt = {
-            mode: 'raw',
-            raw: insomniaReqBody.text,
-        };
-    } else if (insomniaReqBody.fileName !== undefined && insomniaReqBody.fileName !== '') {
-        reqBodyOpt = {
-            mode: 'file',
-            file: insomniaReqBody.fileName,
-        };
-    } else if (insomniaReqBody.params !== undefined) {
-        reqBodyOpt = {
-            mode: 'urlencoded',
-            urlencoded: insomniaReqBody.params.map(
-                (param: RequestBodyParameter) => ({
-                    key: param.name,
-                    value: param.value,
-                    type: param.type,
-                    multiline: param.multiline,
-                    disabled: param.disabled,
-                    fileName: param.fileName,
-                })
-            ),
-        };
-    }
-
-    return reqBodyOpt;
-}
-
-export function mergeRequestBody(
-    updatedReqBody: RequestBody | undefined,
-    originalReqBody: InsomniaRequestBody
-): InsomniaRequestBody {
-    let mimeType = 'application/octet-stream';
-    if (updatedReqBody) {
-        switch (updatedReqBody.mode) {
-            case undefined:
-                mimeType = 'application/octet-stream';
-                break;
-            case 'raw':
-                mimeType = 'text/plain';
-                break;
-            case 'file':
-                // TODO: improve this by sniffing
-                mimeType = 'application/octet-stream';
-                break;
-            case 'formdata':
-                // boundary should already be part of Content-Type header
-                mimeType = 'multipart/form-data';
-                break;
-            case 'urlencoded':
-                mimeType = 'application/x-www-form-urlencoded';
-                break;
-            case 'graphql':
-                mimeType = 'application/json';
-                break;
-            default:
-                throw Error(`unknown request body mode: ${updatedReqBody.mode}`);
-        }
-    }
-    if (originalReqBody.mimeType) {
-        mimeType = originalReqBody.mimeType;
+  override toString() {
+    if (this.mode === undefined) {
+      return '';
     }
 
     try {
-        const textContent = updatedReqBody?.raw !== undefined ? updatedReqBody?.raw :
-            updatedReqBody?.graphql ? JSON.stringify(updatedReqBody?.graphql) : undefined;
-
-        return {
-            mimeType: mimeType,
-            text: textContent,
-            fileName: updatedReqBody?.file,
-            params: updatedReqBody?.urlencoded?.map(
-                (param: QueryParam) => {
-                    return {
-                        name: param.key,
-                        value: param.value,
-                        type: param.type,
-                        fileName: param.fileName,
-                        multiline: param.multiline,
-                        disabled: param.disabled,
-                    };
-                },
-                {},
-            ),
-        };
+      switch (this.mode) {
+        case 'formdata':
+          return this.formdata?.map(param => param.toString(), {}).join('&') || '';
+        case 'urlencoded':
+          return this.urlencoded?.map(param => param.toString(), {}).join('&') || '';
+        case 'raw':
+          return this.raw || '';
+        case 'file':
+          return this.file || '';
+        case 'graphql':
+          return this.graphql ? JSON.stringify(this.graphql) : '';
+        default:
+          throw Error(`mode (${this.mode}) is unexpected`);
+      }
     } catch (e) {
-        throw Error(`failed to update body: ${e}`);
+      throw Error(`toString: ${e}`);
     }
+  }
+
+  update(opts: RequestBodyOptions) {
+    const transformedOpts = getClassFields(opts);
+    this.mode = transformedOpts.mode;
+    this.file = transformedOpts.file;
+    this.formdata = transformedOpts.formdata;
+    this.graphql = transformedOpts.graphql;
+    this.options = transformedOpts.options;
+    this.raw = transformedOpts.raw;
+    this.urlencoded = transformedOpts.urlencoded;
+  }
 }
 
-export function mergeRequests(
-    originalReq: InsomniaRequest,
-    updatedReq: Request
-): InsomniaRequest {
-    const queryParamObjects = updatedReq.url.query.map(
-        queryParam => ({
-            name: queryParam.key,
-            value: queryParam.value,
-            disabled: queryParam.disabled,
-        }),
-        {},
+export interface RequestOptions {
+  url: string | Url;
+  method?: string;
+  header?: HeaderDefinition[] | object;
+  body?: RequestBodyOptions;
+  auth?: AuthOptions;
+  proxy?: ProxyConfigOptions;
+  certificate?: CertificateOptions;
+  pathParameters?: RequestPathParameter[];
+  name?: string;
+}
+
+export interface RequestSize {
+  body: number;
+  header: number;
+  total: number;
+  source: string;
+}
+
+function requestOptionsToClassFields(options: RequestOptions) {
+  const url = toUrlObject(options.url);
+  const method = options.method || 'GET';
+
+  let headers: HeaderList<Header>;
+  if (options.header != null) {
+    if (Array.isArray(options.header)) {
+      headers = new HeaderList(undefined, options.header ? options.header.map(header => new Header(header)) : []);
+    } else {
+      headers = new HeaderList(
+        undefined,
+        Object.entries(options.header).map(entry => new Header({ key: entry[0], value: entry[1] })),
+      );
+    }
+  } else {
+    headers = new HeaderList(undefined, new Array<Header>());
+  }
+
+  const body = options.body ? new RequestBody(options.body) : undefined;
+  const auth = new RequestAuth(options.auth || { type: 'noauth' });
+  const proxy = options.proxy ? new ProxyConfig(options.proxy) : undefined;
+  const certificate = options.certificate ? new Certificate(options.certificate) : undefined;
+  const pathParameters = options.pathParameters ? options.pathParameters : new Array<RequestPathParameter>();
+
+  return {
+    name: options.name || '',
+    url,
+    method,
+    headers,
+    body,
+    auth,
+    proxy,
+    certificate,
+    pathParameters,
+  };
+}
+
+export class Request extends Property {
+  override name: string;
+  url: Url;
+  method: string;
+  headers: HeaderList<Header>;
+  body?: RequestBody;
+  auth: RequestAuth;
+  proxy?: ProxyConfig;
+  certificate?: Certificate;
+  pathParameters: RequestPathParameter[];
+
+  constructor(options: RequestOptions) {
+    super();
+
+    this._kind = 'Request';
+
+    const transformedOpts = requestOptionsToClassFields(options);
+
+    this.name = transformedOpts.name;
+    this.url = transformedOpts.url;
+    this.method = transformedOpts.method;
+    this.headers = transformedOpts.headers;
+    this.body = transformedOpts.body;
+    this.auth = transformedOpts.auth;
+    this.proxy = transformedOpts.proxy;
+    this.certificate = transformedOpts.certificate;
+    this.pathParameters = transformedOpts.pathParameters;
+  }
+
+  static isRequest(obj: object) {
+    return '_kind' in obj && obj._kind === 'Request';
+  }
+
+  addHeader(header: Header | object) {
+    if (Header.isHeader(header)) {
+      const headerInstance = header as Header;
+      this.headers.add(headerInstance);
+    } else if ('key' in header && 'value' in header) {
+      const headerInstance = new Header(header);
+      this.headers.add(headerInstance);
+    } else {
+      throw Error('header must be Header | {key: string; value: string}');
+    }
+  }
+
+  addQueryParams(params: QueryParam[] | string) {
+    this.url.addQueryParams(params);
+  }
+
+  authorizeUsing(authType: AuthOptionTypes | AuthOptions, options?: VariableList<Variable>) {
+    const selectedAuth = typeof authType === 'string' ? authType : authType.type;
+    this.auth.use(selectedAuth, options || { type: 'noauth' });
+  }
+
+  clone() {
+    return new Request({ ...this.toJSON() });
+  }
+
+  forEachHeader(callback: (header: Header, context?: object) => void) {
+    this.headers.each(callback, {});
+  }
+
+  getHeaders(options?: { ignoreCase: boolean; enabled: boolean; multiValue: boolean; sanitizeKeys: boolean }) {
+    // merge headers with same key into an array
+    const headerMap = new Map<string, string[]>();
+    this.headers.each(header => {
+      // if the disable is null, it means enabled.
+      const enabled = options?.enabled ? header.disabled == null || !header.disabled : true;
+      const isFalsyValue = options?.sanitizeKeys ? !header.value : false;
+      const hasName = !!header.key;
+
+      if (!enabled || isFalsyValue || !hasName) {
+        return;
+      }
+
+      header.key = options?.ignoreCase ? header.key?.toLocaleLowerCase() : header.key;
+
+      if (headerMap.has(header.key)) {
+        const existingHeader = headerMap.get(header.key) || [];
+        headerMap.set(header.key, [...existingHeader, header.value]);
+      } else {
+        headerMap.set(header.key, [header.value]);
+      }
+    }, {});
+
+    const headersObj: Record<string, string[] | string> = {};
+    Array.from(headerMap.entries()).forEach(headerEntry => {
+      headersObj[headerEntry[0]] = headerEntry[1];
+    });
+
+    return headersObj;
+  }
+
+  removeHeader(toRemove: string | Header, options?: { ignoreCase: boolean }) {
+    const filteredHeaders = this.headers.filter(header => {
+      if (!header.key) {
+        return false;
+      }
+
+      if (typeof toRemove === 'string') {
+        return options != null && options.ignoreCase
+          ? header.key.toLocaleLowerCase() !== toRemove.toLocaleLowerCase()
+          : header.key !== toRemove;
+      } else if (toRemove instanceof Header) {
+        if (!toRemove.key) {
+          return false;
+        }
+
+        return options != null && options.ignoreCase
+          ? header.key.toLocaleLowerCase() !== toRemove.key.toLocaleLowerCase()
+          : header.key !== toRemove.key;
+      }
+      throw Error('type of the "toRemove" must be: string | Header');
+    }, {});
+
+    this.headers = new HeaderList(undefined, filteredHeaders);
+  }
+
+  removeQueryParams(params: string | string[] | QueryParam[]) {
+    this.url.removeQueryParams(params);
+  }
+
+  size(): RequestSize {
+    return calculatePayloadSize((this.body || '').toString(), this.headers);
+  }
+
+  override toJSON() {
+    return {
+      url: this.url.toString(),
+      method: this.method,
+      header: this.headers.map(header => header.toJSON(), {}),
+      body: {
+        mode: this.body?.mode,
+        file: this.body?.file,
+        formdata: this.body?.formdata?.map(formParam => formParam.toJSON(), {}),
+        graphql: this.body?.graphql,
+        raw: this.body?.raw,
+        urlencoded: this.body?.urlencoded?.map(queryParam => queryParam.toJSON(), {}),
+      },
+      auth: this.auth.toJSON(),
+      proxy: this.proxy
+        ? {
+            match: this.proxy.match,
+            host: this.proxy.host,
+            port: this.proxy.port,
+            tunnel: this.proxy.tunnel,
+            disabled: this.proxy.disabled,
+            authenticate: this.proxy.authenticate,
+            username: this.proxy.username,
+            password: this.proxy.password,
+            protocol: this.proxy.protocol,
+          }
+        : undefined,
+      certificate: this.certificate
+        ? {
+            name: this.certificate?.name,
+            matches: this.certificate?.matches?.map(match => match.toString(), {}),
+            key: this.certificate?.key,
+            cert: this.certificate?.cert,
+            passphrase: this.certificate?.passphrase,
+            pfx: this.certificate?.pfx,
+          }
+        : undefined,
+    };
+  }
+
+  update(options: RequestOptions) {
+    const transformedOptions = requestOptionsToClassFields(options);
+
+    this.name = transformedOptions.name;
+    this.url = transformedOptions.url;
+    this.method = transformedOptions.method;
+    this.headers = transformedOptions.headers;
+    this.body = transformedOptions.body;
+    this.auth = transformedOptions.auth;
+    this.proxy = transformedOptions.proxy;
+    this.certificate = transformedOptions.certificate;
+    this.pathParameters = transformedOptions.pathParameters;
+  }
+
+  upsertHeader(header: HeaderDefinition) {
+    // remove keys with same name
+    this.headers = new HeaderList(
+      undefined,
+      this.headers.filter(existingHeader => existingHeader.key !== header.key, {}),
     );
-    const updatedReqProperties: Partial<InsomniaRequest> = {
-        name: updatedReq.name,
-        url: updatedReq.url.toStringWithoutQuery(),
-        method: updatedReq.method,
-        body: mergeRequestBody(updatedReq.body, originalReq.body),
-        headers: updatedReq.headers
-            .map(
-                (header: Header) => ({
-                    name: header.key,
-                    value: header.value,
-                    disabled: header.disabled,
-                }),
-                {},
-            ),
-        authentication: fromPreRequestAuth(updatedReq.auth),
-        preRequestScript: '',
-        pathParameters: updatedReq.pathParameters,
-        parameters: queryParamObjects,
+
+    // append new
+    this.headers.append(new Header(header));
+  }
+}
+
+export function mergeSettings(originalSettings: Settings, updatedReq: Request): Settings {
+  const proxyEnabled = updatedReq.proxy != null && !updatedReq.proxy.disabled && updatedReq.proxy.getProxyUrl() !== '';
+  if (!proxyEnabled) {
+    return originalSettings;
+  }
+
+  const proxyUrl = updatedReq.proxy?.getProxyUrl();
+  if (!proxyUrl) {
+    return originalSettings;
+  }
+
+  // it always override both http and https proxies
+  const httpProxy = proxyUrl;
+  const httpsProxy = proxyUrl;
+
+  return {
+    ...originalSettings,
+    proxyEnabled,
+    httpProxy,
+    httpsProxy,
+  };
+}
+
+export function mergeClientCertificates(
+  originalClientCertificates: ClientCertificate[],
+  updatedReq: Request,
+): ClientCertificate[] {
+  // as Pre-request script request only supports one certificate while Insomnia supports configuring multiple ones
+  // then the mapping rule is:
+  // - if the pre-request script request cert is specified, it replaces all original certs
+  // - if not, it returns original certs
+
+  if (!updatedReq.certificate) {
+    return originalClientCertificates;
+  } else if (
+    updatedReq.certificate.key == null &&
+    updatedReq.certificate.cert == null &&
+    updatedReq.certificate.pfx == null
+  ) {
+    return originalClientCertificates;
+  }
+
+  const baseCertificate =
+    originalClientCertificates && originalClientCertificates.length > 0
+      ? {
+          // TODO: remove baseModelPart currently it is necessary for type checking
+          ...initClientCertificate(),
+          ...originalClientCertificates[0],
+        }
+      : {
+          // TODO: remove baseModelPart currently it is necessary for type checking
+          ...initClientCertificate(),
+          _id: '',
+          type: '',
+          parentId: '',
+          modified: 0,
+          created: 0,
+          isPrivate: false,
+          name: '',
+        };
+
+  if (updatedReq.certificate.pfx && updatedReq.certificate.pfx?.src !== '') {
+    const specifiedCert: ClientCertificate = {
+      ...baseCertificate,
+      key: null,
+      cert: null,
+      name: updatedReq.certificate.name || '',
+      disabled: updatedReq.certificate.disabled || false,
+      passphrase: updatedReq.certificate.passphrase || null,
+      pfx: updatedReq.certificate.pfx?.src,
+      host: '*',
     };
 
-    return {
-        ...originalReq,
-        ...updatedReqProperties,
+    return [specifiedCert, ...originalClientCertificates];
+  } else if (
+    updatedReq &&
+    updatedReq.certificate.key &&
+    updatedReq.certificate.cert &&
+    updatedReq.certificate.key?.src !== '' &&
+    updatedReq.certificate.cert?.src !== ''
+  ) {
+    const specifiedCert: ClientCertificate = {
+      ...baseCertificate,
+
+      _id: '',
+      type: '',
+      parentId: '',
+      modified: 0,
+      created: 0,
+      isPrivate: false,
+      name: updatedReq.certificate.name || '',
+      disabled: updatedReq.certificate.disabled || false,
+      host: '*',
+      key: updatedReq.certificate.key?.src,
+      cert: updatedReq.certificate.cert?.src,
+      passphrase: updatedReq.certificate.passphrase || null,
+      pfx: null,
     };
+
+    return [specifiedCert, ...originalClientCertificates];
+  }
+
+  throw Error('Invalid certificate configuration: "cert+key" and "pfx" can not be set at the same time');
+}
+
+export function toScriptRequestBody(insomniaReqBody: InsomniaRequestBody): RequestBodyOptions {
+  let reqBodyOpt: RequestBodyOptions = { mode: undefined };
+
+  if (insomniaReqBody.text !== undefined) {
+    reqBodyOpt = {
+      mode: 'raw',
+      raw: insomniaReqBody.text,
+    };
+  } else if (insomniaReqBody.fileName !== undefined && insomniaReqBody.fileName !== '') {
+    reqBodyOpt = {
+      mode: 'file',
+      file: insomniaReqBody.fileName,
+    };
+  } else if (insomniaReqBody.params !== undefined) {
+    reqBodyOpt = {
+      mode: 'urlencoded',
+      urlencoded: insomniaReqBody.params.map((param: RequestBodyParameter) => ({
+        key: param.name,
+        value: param.value,
+        type: param.type,
+        multiline: param.multiline,
+        disabled: param.disabled,
+        fileName: param.fileName,
+      })),
+    };
+  }
+
+  return reqBodyOpt;
+}
+
+export function mergeRequestBody(
+  updatedReqBody: RequestBody | undefined,
+  originalReqBody: InsomniaRequestBody,
+): InsomniaRequestBody {
+  let mimeType = 'application/octet-stream';
+  if (updatedReqBody) {
+    switch (updatedReqBody.mode) {
+      case undefined:
+        mimeType = 'application/octet-stream';
+        break;
+      case 'raw':
+        mimeType = 'text/plain';
+        break;
+      case 'file':
+        // TODO: improve this by sniffing
+        mimeType = 'application/octet-stream';
+        break;
+      case 'formdata':
+        // boundary should already be part of Content-Type header
+        mimeType = 'multipart/form-data';
+        break;
+      case 'urlencoded':
+        mimeType = 'application/x-www-form-urlencoded';
+        break;
+      case 'graphql':
+        mimeType = 'application/json';
+        break;
+      default:
+        throw Error(`unknown request body mode: ${updatedReqBody.mode}`);
+    }
+  }
+  if (originalReqBody.mimeType) {
+    mimeType = originalReqBody.mimeType;
+  }
+
+  try {
+    const textContent =
+      updatedReqBody?.raw !== undefined
+        ? updatedReqBody?.raw
+        : updatedReqBody?.graphql
+          ? JSON.stringify(updatedReqBody?.graphql)
+          : undefined;
+
+    return {
+      mimeType: mimeType,
+      text: textContent,
+      fileName: updatedReqBody?.file,
+      params: updatedReqBody?.urlencoded?.map((param: QueryParam) => {
+        return {
+          name: param.key,
+          value: param.value,
+          type: param.type,
+          fileName: param.fileName,
+          multiline: param.multiline,
+          disabled: param.disabled,
+        };
+      }, {}),
+    };
+  } catch (e) {
+    throw Error(`failed to update body: ${e}`);
+  }
+}
+
+export function mergeRequests(originalReq: InsomniaRequest, updatedReq: Request): InsomniaRequest {
+  const queryParamObjects = updatedReq.url.query.map(
+    queryParam => ({
+      name: queryParam.key,
+      value: queryParam.value,
+      disabled: queryParam.disabled,
+    }),
+    {},
+  );
+  const updatedReqProperties: Partial<InsomniaRequest> = {
+    name: updatedReq.name,
+    url: updatedReq.url.toStringWithoutQuery(),
+    method: updatedReq.method,
+    body: mergeRequestBody(updatedReq.body, originalReq.body),
+    headers: updatedReq.headers.map(
+      (header: Header) => ({
+        name: header.key,
+        value: header.value,
+        disabled: header.disabled,
+      }),
+      {},
+    ),
+    authentication: fromPreRequestAuth(updatedReq.auth),
+    preRequestScript: '',
+    pathParameters: updatedReq.pathParameters,
+    parameters: queryParamObjects,
+  };
+
+  return {
+    ...originalReq,
+    ...updatedReqProperties,
+  };
 }
 
 export function calculatePayloadSize(body: string, headers: HeaderList<Header>): RequestSize {
-    const bodySize = new Blob([body]).size;
-    const headerSize = calculateHeadersSize(headers);
-    return {
-        body: bodySize,
-        header: headerSize,
-        total: bodySize + headerSize,
-        source: 'COMPUTED',
-    };
+  const bodySize = new Blob([body]).size;
+  const headerSize = calculateHeadersSize(headers);
+  return {
+    body: bodySize,
+    header: headerSize,
+    total: bodySize + headerSize,
+    source: 'COMPUTED',
+  };
 }
 
 export function calculateHeadersSize(headers: HeaderList<Header>): number {
-    const headerSize = new Blob([
-        headers.reduce(
-            (acc, header) => (acc + header.toString() + '\n'),
-            '',
-            {},
-        ),
-    ]).size;
+  const headerSize = new Blob([headers.reduce((acc, header) => acc + header.toString() + '\n', '', {})]).size;
 
-    return headerSize;
+  return headerSize;
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/response.ts b/packages/insomnia-scripting-environment/src/objects/response.ts
index fd5213f27a..85026708f9 100644
--- a/packages/insomnia-scripting-environment/src/objects/response.ts
+++ b/packages/insomnia-scripting-environment/src/objects/response.ts
@@ -12,326 +12,317 @@ import type { Request } from './request';
 import { calculateHeadersSize } from './request';
 
 export interface ResponseOptions {
-    code: number;
-    reason?: string;
-    header?: HeaderDefinition[];
-    cookie?: CookieOptions[];
-    body?: string;
-    // ideally it should work in both browser and node
-    stream?: Buffer | ArrayBuffer;
-    responseTime: number;
-    originalRequest: Request;
-    bytesRead?: number; // this is from Insomnia for returning response size() directly
+  code: number;
+  reason?: string;
+  header?: HeaderDefinition[];
+  cookie?: CookieOptions[];
+  body?: string;
+  // ideally it should work in both browser and node
+  stream?: Buffer | ArrayBuffer;
+  responseTime: number;
+  originalRequest: Request;
+  bytesRead?: number; // this is from Insomnia for returning response size() directly
 }
 
 export interface ResponseContentInfo {
-    mimeType: string;
-    mimeFormat: string;
-    charset: string;
-    fileExtension: string;
-    fileName: string;
-    contentType: string;
+  mimeType: string;
+  mimeFormat: string;
+  charset: string;
+  fileExtension: string;
+  fileName: string;
+  contentType: string;
 }
 
 // TODO: unknown usage
 // export interface Timings
 
 export class Response extends Property {
-    body: string;
-    code: number;
-    cookies: CookieList;
-    headers: HeaderList<Header>;
-    originalRequest: Request;
-    responseTime: number;
-    status: string;
-    stream?: Buffer | ArrayBuffer;
+  body: string;
+  code: number;
+  cookies: CookieList;
+  headers: HeaderList<Header>;
+  originalRequest: Request;
+  responseTime: number;
+  status: string;
+  stream?: Buffer | ArrayBuffer;
 
-    private bytesRead: number; //
+  private bytesRead: number; //
 
-    constructor(options: ResponseOptions) {
-        super();
+  constructor(options: ResponseOptions) {
+    super();
 
-        this._kind = 'Response';
+    this._kind = 'Response';
 
-        this.body = options.body || '';
-        this.code = options.code;
-        this.cookies = new CookieList(
-            options.cookie?.map(cookie => new Cookie(cookie)) || [],
-        );
-        this.headers = new HeaderList(
-            undefined,
-            options.header?.map(headerOpt => new Header(headerOpt)) || [],
-        );
-        this.originalRequest = options.originalRequest;
-        this.responseTime = options.responseTime;
-        this.stream = options.stream;
-        const detectedStatus = options.reason || RESPONSE_CODE_REASONS[options.code];
-        if (!detectedStatus) {
-            throw Error(`Response constructor: reason or code field must be set in the options(reason: ${options.reason}, code:${options.code})`);
-        } else {
-            this.status = detectedStatus;
-        }
-
-        this.bytesRead = options.bytesRead || 0;
+    this.body = options.body || '';
+    this.code = options.code;
+    this.cookies = new CookieList(options.cookie?.map(cookie => new Cookie(cookie)) || []);
+    this.headers = new HeaderList(undefined, options.header?.map(headerOpt => new Header(headerOpt)) || []);
+    this.originalRequest = options.originalRequest;
+    this.responseTime = options.responseTime;
+    this.stream = options.stream;
+    const detectedStatus = options.reason || RESPONSE_CODE_REASONS[options.code];
+    if (!detectedStatus) {
+      throw Error(
+        `Response constructor: reason or code field must be set in the options(reason: ${options.reason}, code:${options.code})`,
+      );
+    } else {
+      this.status = detectedStatus;
     }
 
-    // TODO: the accurate type of the response should be given
-    static createFromNode(
-        response: {
-            body: string;
-            headers: HeaderDefinition[];
-            statusCode: number;
-            statusMessage: string;
-            elapsedTime: number;
-            originalRequest: Request;
-            stream: Buffer | ArrayBuffer;
-        },
-        cookies: CookieOptions[],
-    ) {
-        return new Response({
-            cookie: cookies,
-            body: response.body.toString(),
-            stream: response.stream,
-            header: response.headers,
-            code: response.statusCode,
-            reason: response.statusMessage,
-            responseTime: response.elapsedTime,
-            originalRequest: response.originalRequest,
+    this.bytesRead = options.bytesRead || 0;
+  }
+
+  // TODO: the accurate type of the response should be given
+  static createFromNode(
+    response: {
+      body: string;
+      headers: HeaderDefinition[];
+      statusCode: number;
+      statusMessage: string;
+      elapsedTime: number;
+      originalRequest: Request;
+      stream: Buffer | ArrayBuffer;
+    },
+    cookies: CookieOptions[],
+  ) {
+    return new Response({
+      cookie: cookies,
+      body: response.body.toString(),
+      stream: response.stream,
+      header: response.headers,
+      code: response.statusCode,
+      reason: response.statusMessage,
+      responseTime: response.elapsedTime,
+      originalRequest: response.originalRequest,
+    });
+  }
+
+  static isResponse(obj: object) {
+    return '_kind' in obj && obj._kind === 'Response';
+  }
+
+  contentInfo(): ResponseContentInfo {
+    const mimeInfo = {
+      mimeType: 'application/octet-stream',
+      mimeFormat: '', // TODO: it's definition is unknown
+      charset: 'utf-8',
+    };
+
+    const contentType = this.headers.find(header => header.key === 'Content-Type');
+    if (contentType) {
+      const directives = contentType.valueOf().split('; ');
+      if (directives.length === 0) {
+        throw Error('contentInfo: header Content-Type value is blank');
+      } else {
+        const mimeType = directives[0];
+        if (!mimeType) {
+          throw Error('contentInfo: mime type in header Content-Type is invalid');
+        }
+        mimeInfo.mimeType = mimeType;
+        directives.forEach(dir => {
+          if (dir.startsWith('charset')) {
+            mimeInfo.charset = dir.slice(dir.indexOf('=') + 1);
+          }
         });
+      }
     }
 
-    static isResponse(obj: object) {
-        return '_kind' in obj && obj._kind === 'Response';
-    }
+    const fileInfo = {
+      extension: '',
+      name: 'unknown',
+    };
 
-    contentInfo(): ResponseContentInfo {
-        const mimeInfo = {
-            mimeType: 'application/octet-stream',
-            mimeFormat: '', // TODO: it's definition is unknown
-            charset: 'utf-8',
-        };
-
-        const contentType = this.headers.find(header => header.key === 'Content-Type');
-        if (contentType) {
-            const directives = contentType.valueOf().split('; ');
-            if (directives.length === 0) {
-                throw Error('contentInfo: header Content-Type value is blank');
-            } else {
-                const mimeType = directives[0];
-                if (!mimeType) {
-                    throw Error('contentInfo: mime type in header Content-Type is invalid');
-                }
-                mimeInfo.mimeType = mimeType;
-                directives.forEach(dir => {
-                    if (dir.startsWith('charset')) {
-                        mimeInfo.charset = dir.slice(dir.indexOf('=') + 1);
-                    }
-                });
-            }
+    const contentDisposition = this.headers.find(header => header.key === 'Content-Disposition');
+    if (contentDisposition) {
+      const directives = contentDisposition.valueOf().split('; ');
+      directives.forEach(dir => {
+        if (dir.startsWith('filename')) {
+          const fileName = (fileInfo.extension = dir.slice(dir.indexOf('=') + 1));
+          fileInfo.name = fileName.slice(1, fileName.lastIndexOf('.')); // ignore '"' arounds the file name
+          fileInfo.extension = fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length - 1);
         }
+      });
+    }
 
-        const fileInfo = {
-            extension: '',
-            name: 'unknown',
-        };
+    return {
+      mimeType: mimeInfo.mimeType,
+      mimeFormat: mimeInfo.mimeFormat,
+      charset: mimeInfo.charset,
+      fileExtension: fileInfo.extension,
+      fileName: fileInfo.name,
+      contentType: contentType?.valueOf() || 'application/octet-stream',
+    };
+  }
 
-        const contentDisposition = this.headers.find(header => header.key === 'Content-Disposition');;
-        if (contentDisposition) {
-            const directives = contentDisposition.valueOf().split('; ');
-            directives.forEach(dir => {
-                if (dir.startsWith('filename')) {
-                    const fileName = fileInfo.extension = dir.slice(dir.indexOf('=') + 1);
-                    fileInfo.name = fileName.slice(1, fileName.lastIndexOf('.')); // ignore '"' arounds the file name
-                    fileInfo.extension = fileName.slice(fileName.lastIndexOf('.') + 1, fileName.length - 1);
-                }
-            });
+  dataURI() {
+    const contentInfo = this.contentInfo();
+    const bodyInBase64 = this.stream || this.body;
+    if (!bodyInBase64) {
+      throw Error('dataURI(): response body is not defined');
+    }
+
+    return `data:${contentInfo.contentType};baseg4, ${bodyInBase64}`;
+  }
+
+  json(reviver?: (key: string, value: any) => any, _strict?: boolean) {
+    // TODO: enable strict after common module is introduced
+    try {
+      return JSON.parse(this.body.toString(), reviver);
+    } catch (e) {
+      throw Error(`json: failed to parse: ${e}`);
+    }
+  }
+
+  jsonp(_reviver?: (key: string, value: any) => any, _strict?: boolean) {
+    throw unsupportedError('jsonp()');
+  }
+
+  reason() {
+    return this.status;
+  }
+
+  size() {
+    const headerSize = calculateHeadersSize(this.headers);
+    return {
+      body: this.bytesRead,
+      header: headerSize,
+      total: this.bytesRead + headerSize,
+      source: 'COMPUTED',
+    };
+  }
+
+  text() {
+    return this.body.toString();
+  }
+
+  // Besides chai.expect, "to" is extended to support cases like:
+  // insomnia.response.to.have.status(200);
+  // insomnia.response.to.not.have.status(200);
+  get to() {
+    type valueType = boolean | number | string | object | undefined;
+
+    const verify = (got: valueType, expected: valueType, checkEquality = true) => {
+      if (['boolean', 'number', 'string', 'undefined'].includes(typeof got)) {
+        if ((checkEquality && expected === got) || (!checkEquality && expected !== got)) {
+          return;
         }
+      } else if (
+        (checkEquality && deepEqual(got, expected, { strict: true })) ||
+        (!checkEquality && !deepEqual(got, expected, { strict: true }))
+      ) {
+        return;
+      }
+      throw Error(`"${got}" is not equal to the expected value: "${expected}"`);
+    };
+    const haveStatus = (expected: number | string, checkEquality: boolean) => {
+      if (typeof expected === 'string') {
+        verify(this.status, expected, checkEquality);
+      } else {
+        verify(this.code, expected, checkEquality);
+      }
+    };
+    const haveHeader = (expected: string, checkEquality: boolean) =>
+      verify(this.headers.toObject().find(header => header.key === expected) !== undefined, checkEquality);
+    const haveBody = (expected: string, checkEquality: boolean) => verify(this.text(), expected, checkEquality);
+    const haveJsonBody = (expected: object, checkEquality: boolean) => verify(this.json(), expected, checkEquality);
+    const haveJsonSchema = (expected: object, checkEquality: boolean) => {
+      const ajv = new Ajv();
 
-        return {
-            mimeType: mimeInfo.mimeType,
-            mimeFormat: mimeInfo.mimeFormat,
-            charset: mimeInfo.charset,
-            fileExtension: fileInfo.extension,
-            fileName: fileInfo.name,
-            contentType: contentType?.valueOf() || 'application/octet-stream',
-        };
-    }
-
-    dataURI() {
-        const contentInfo = this.contentInfo();
-        const bodyInBase64 = this.stream || this.body;
-        if (!bodyInBase64) {
-            throw Error('dataURI(): response body is not defined');
+      try {
+        const jsonBody = JSON.parse(this.body);
+        const schemaMatched = ajv.validate(expected, jsonBody);
+        if ((schemaMatched && checkEquality) || (!schemaMatched && !checkEquality)) {
+          return;
         }
+      } catch (e) {
+        throw Error(`Failed to verify response body schema, response could not be a valid json: "${e}"`);
+      }
+      throw Error("Response's schema is not equal to the expected value");
+    };
 
-        return `data:${contentInfo.contentType};baseg4, ${bodyInBase64}`;
-    }
-
-     
-    json(reviver?: (key: string, value: any) => any, _strict?: boolean) {
-        // TODO: enable strict after common module is introduced
-        try {
-            return JSON.parse(this.body.toString(), reviver);
-        } catch (e) {
-            throw Error(`json: failed to parse: ${e}`);
-        }
-    }
-
-     
-    jsonp(_reviver?: (key: string, value: any) => any, _strict?: boolean) {
-        throw unsupportedError('jsonp()');
-    }
-
-    reason() {
-        return this.status;
-    }
-
-    size() {
-        const headerSize = calculateHeadersSize(this.headers);
-        return {
-            body: this.bytesRead,
-            header: headerSize,
-            total: this.bytesRead + headerSize,
-            source: 'COMPUTED',
-        };
-    }
-
-    text() {
-        return this.body.toString();
-    }
-
-    // Besides chai.expect, "to" is extended to support cases like:
-    // insomnia.response.to.have.status(200);
-    // insomnia.response.to.not.have.status(200);
-    get to() {
-        type valueType = boolean | number | string | object | undefined;
-
-        const verify = (got: valueType, expected: valueType, checkEquality = true) => {
-            if (['boolean', 'number', 'string', 'undefined'].includes(typeof got)) {
-                if ((checkEquality && expected === got) || (!checkEquality && expected !== got)) {
-                    return;
-                }
-            } else if (
-                (checkEquality && deepEqual(got, expected, { strict: true })) ||
-                (!checkEquality && !deepEqual(got, expected, { strict: true }))
-            ) {
-                return;
-            }
-            throw Error(`"${got}" is not equal to the expected value: "${expected}"`);
-        };
-        const haveStatus = (expected: number | string, checkEquality: boolean) => {
-            if (typeof expected === 'string') {
-                verify(this.status, expected, checkEquality);
-            } else {
-                verify(this.code, expected, checkEquality);
-            }
-        };
-        const haveHeader = (expected: string, checkEquality: boolean) => verify(
-            this.headers.toObject().find(header => header.key === expected) !== undefined,
-            checkEquality,
-        );
-        const haveBody = (expected: string, checkEquality: boolean) => verify(this.text(), expected, checkEquality);
-        const haveJsonBody = (expected: object, checkEquality: boolean) => verify(this.json(), expected, checkEquality);
-        const haveJsonSchema = (expected: object, checkEquality: boolean) => {
-            const ajv = new Ajv();
-
-            try {
-                const jsonBody = JSON.parse(this.body);
-                const schemaMatched = ajv.validate(expected, jsonBody);
-                if ((schemaMatched && checkEquality) || (!schemaMatched && !checkEquality)) {
-                    return;
-                }
-            } catch (e) {
-                throw Error(`Failed to verify response body schema, response could not be a valid json: "${e}"`);
-            }
-            throw Error("Response's schema is not equal to the expected value");
-        };
-
-        return {
-            // follows extend chai's chains for compatibility
-            have: {
-                status: (expected: number | string) => haveStatus(expected, true),
-                header: (expected: string) => haveHeader(expected, true),
-                body: (expected: string) => haveBody(expected, true),
-                jsonBody: (expected: object) => haveJsonBody(expected, true),
-                jsonSchema: (expected: object) => haveJsonSchema(expected, true),
-            },
-            not: {
-                have: {
-                    status: (expected: number | string) => haveStatus(expected, false),
-                    header: (expected: string) => haveHeader(expected, false),
-                    body: (expected: string) => haveBody(expected, false),
-                    jsonBody: (expected: object) => haveJsonBody(expected, false),
-                    jsonSchema: (expected: object) => haveJsonSchema(expected, false),
-                },
-            },
-        };
-    }
+    return {
+      // follows extend chai's chains for compatibility
+      have: {
+        status: (expected: number | string) => haveStatus(expected, true),
+        header: (expected: string) => haveHeader(expected, true),
+        body: (expected: string) => haveBody(expected, true),
+        jsonBody: (expected: object) => haveJsonBody(expected, true),
+        jsonSchema: (expected: object) => haveJsonSchema(expected, true),
+      },
+      not: {
+        have: {
+          status: (expected: number | string) => haveStatus(expected, false),
+          header: (expected: string) => haveHeader(expected, false),
+          body: (expected: string) => haveBody(expected, false),
+          jsonBody: (expected: object) => haveJsonBody(expected, false),
+          jsonSchema: (expected: object) => haveJsonSchema(expected, false),
+        },
+      },
+    };
+  }
 }
 
 export function toScriptResponse(
-    originalRequest: Request,
-    partialInsoResponse: sendCurlAndWriteTimelineResponse | sendCurlAndWriteTimelineError,
-    responseBody: string,
+  originalRequest: Request,
+  partialInsoResponse: sendCurlAndWriteTimelineResponse | sendCurlAndWriteTimelineError,
+  responseBody: string,
 ): Response | undefined {
-    if ('error' in partialInsoResponse) {
-        // it is sendCurlAndWriteTimelineError and basically doesn't contain anything useful
-        return undefined;
-    }
-    const partialResponse = partialInsoResponse as sendCurlAndWriteTimelineResponse;
+  if ('error' in partialInsoResponse) {
+    // it is sendCurlAndWriteTimelineError and basically doesn't contain anything useful
+    return undefined;
+  }
+  const partialResponse = partialInsoResponse as sendCurlAndWriteTimelineResponse;
 
-    const headers = partialResponse.headers ?
-        partialResponse.headers.map(
-            insoHeader => ({
-                key: insoHeader.name,
-                value: insoHeader.value,
-            }),
-            {},
-        )
-        : [];
+  const headers = partialResponse.headers
+    ? partialResponse.headers.map(
+        insoHeader => ({
+          key: insoHeader.name,
+          value: insoHeader.value,
+        }),
+        {},
+      )
+    : [];
 
-    const insoCookieOptions = partialResponse.headers ?
-        partialResponse.headers
-            .filter(
-                header => {
-                    return header.name.toLowerCase() === 'set-cookie';
-                },
-                {},
-            ).map(
-                setCookieHeader => Cookie.parse(setCookieHeader.value)
-            )
-        : [];
+  const insoCookieOptions = partialResponse.headers
+    ? partialResponse.headers
+        .filter(header => {
+          return header.name.toLowerCase() === 'set-cookie';
+        }, {})
+        .map(setCookieHeader => Cookie.parse(setCookieHeader.value))
+    : [];
 
-    const responseOption = {
-        code: partialResponse.statusCode || 0,
-        reason: partialResponse.statusMessage,
-        header: headers,
-        cookie: insoCookieOptions,
-        body: responseBody,
-        // stream is duplicated with body
-        responseTime: partialResponse.elapsedTime,
-        originalRequest,
-        bytesRead: partialResponse.bytesRead,
-    };
+  const responseOption = {
+    code: partialResponse.statusCode || 0,
+    reason: partialResponse.statusMessage,
+    header: headers,
+    cookie: insoCookieOptions,
+    body: responseBody,
+    // stream is duplicated with body
+    responseTime: partialResponse.elapsedTime,
+    originalRequest,
+    bytesRead: partialResponse.bytesRead,
+  };
 
-    return new Response(responseOption);
-};
-
-export async function readBodyFromPath(response: sendCurlAndWriteTimelineResponse | sendCurlAndWriteTimelineError | undefined) {
-    // it allows to execute scripts (e.g., for testing) but body contains nothing
-    if (!response || 'error' in response) {
-        return '';
-    } else if (!response.bodyPath) {
-        return '';
-    }
-    const nodejsReadCurlResponse = process.type === 'renderer' ? window.bridge.readCurlResponse : readCurlResponse;
-    const readResponseResult = await nodejsReadCurlResponse({
-        bodyPath: response.bodyPath,
-        bodyCompression: response.bodyCompression,
-    });
-
-    if (readResponseResult.error) {
-        throw Error(`Failed to read body: ${readResponseResult.error}`);
-    }
-    return readResponseResult.body;
+  return new Response(responseOption);
+}
+
+export async function readBodyFromPath(
+  response: sendCurlAndWriteTimelineResponse | sendCurlAndWriteTimelineError | undefined,
+) {
+  // it allows to execute scripts (e.g., for testing) but body contains nothing
+  if (!response || 'error' in response) {
+    return '';
+  } else if (!response.bodyPath) {
+    return '';
+  }
+  const nodejsReadCurlResponse = process.type === 'renderer' ? window.bridge.readCurlResponse : readCurlResponse;
+  const readResponseResult = await nodejsReadCurlResponse({
+    bodyPath: response.bodyPath,
+    bodyCompression: response.bodyCompression,
+  });
+
+  if (readResponseResult.error) {
+    throw Error(`Failed to read body: ${readResponseResult.error}`);
+  }
+  return readResponseResult.body;
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/send-request.ts b/packages/insomnia-scripting-environment/src/objects/send-request.ts
index 8d0addcfd9..24917f8e89 100644
--- a/packages/insomnia-scripting-environment/src/objects/send-request.ts
+++ b/packages/insomnia-scripting-environment/src/objects/send-request.ts
@@ -11,272 +11,276 @@ import { Request, type RequestOptions } from './request';
 import { Response } from './response';
 
 export async function sendRequest(
-    request: string | Request | RequestOptions,
-    cb: (error?: string, response?: Response) => void,
-    settings: Settings,
+  request: string | Request | RequestOptions,
+  cb: (error?: string, response?: Response) => void,
+  settings: Settings,
 ): Promise<Response | undefined> {
-    return new Promise<Response | undefined>(async resolve => {
-        // TODO(george): enable cascading cancellation later as current solution just adds complexity
-        const requestOptions = requestToCurlOptions(request, settings);
+  return new Promise<Response | undefined>(async resolve => {
+    // TODO(george): enable cascading cancellation later as current solution just adds complexity
+    const requestOptions = requestToCurlOptions(request, settings);
 
-        try {
-            const nodejsCurlRequest = process.type === 'renderer' ? window.bridge.curlRequest : (await import('insomnia/src/main/network/libcurl-promise')).curlRequest;
-            nodejsCurlRequest(requestOptions)
-                .then((result: any) => {
-                    const output = result as CurlRequestOutput;
-                    return curlOutputToResponse(output, request);
-                }).then((transformedOutput: Response) => {
-                    cb(undefined, transformedOutput);
-                    resolve(transformedOutput);
-                }).catch(e => {
-                    cb(e, undefined);
-                    resolve(undefined);
-                });
-        } catch (err: any) {
-            if (err.name === 'AbortError') {
-                cb(`Request was cancelled: ${err.message}`, undefined);
-            } else {
-                cb(`Something went wrong: ${err.message}`, undefined);
-            }
-            resolve(undefined);
-        }
-    });
-};
+    try {
+      const nodejsCurlRequest =
+        process.type === 'renderer'
+          ? window.bridge.curlRequest
+          : (await import('insomnia/src/main/network/libcurl-promise')).curlRequest;
+      nodejsCurlRequest(requestOptions)
+        .then((result: any) => {
+          const output = result as CurlRequestOutput;
+          return curlOutputToResponse(output, request);
+        })
+        .then((transformedOutput: Response) => {
+          cb(undefined, transformedOutput);
+          resolve(transformedOutput);
+        })
+        .catch(e => {
+          cb(e, undefined);
+          resolve(undefined);
+        });
+    } catch (err: any) {
+      if (err.name === 'AbortError') {
+        cb(`Request was cancelled: ${err.message}`, undefined);
+      } else {
+        cb(`Something went wrong: ${err.message}`, undefined);
+      }
+      resolve(undefined);
+    }
+  });
+}
 
 function requestToCurlOptions(req: string | Request | RequestOptions, settings: Settings) {
-    const id = uuidv4();
-    const settingFollowRedirects: 'global' | 'on' | 'off' = settings.followRedirects ? 'on' : 'off';
+  const id = uuidv4();
+  const settingFollowRedirects: 'global' | 'on' | 'off' = settings.followRedirects ? 'on' : 'off';
 
-    if (typeof req === 'string') {
-        return {
-            requestId: `pre-request-script-adhoc-req-simple:${id}`,
-            req: {
-                headers: [],
-                method: 'GET',
-                body: { mimeType: undefined }, // no body is set so it's type is undefined
-                authentication: fromPreRequestAuth(
-                    new RequestAuth({ type: 'noauth' }),
-                ),
-                settingFollowRedirects: settingFollowRedirects,
-                settingRebuildPath: true,
-                settingSendCookies: true,
-                url: req,
-                // currently cookies should be handled by user in headers
-                cookieJar: {
-                    cookies: [],
-                },
-                cookies: [],
-                suppressUserAgent: false,
-            },
-            finalUrl: req,
-            settings,
-            certificates: [],
-            caCertficatePath: null,
-            socketPath: undefined,
-            authHeader: undefined, // TODO: add this for bearer and other auth methods
-        };
-    } else if (req instanceof Request || typeof req === 'object') {
-        const finalReq = req instanceof Request ? req : new Request(req);
+  if (typeof req === 'string') {
+    return {
+      requestId: `pre-request-script-adhoc-req-simple:${id}`,
+      req: {
+        headers: [],
+        method: 'GET',
+        body: { mimeType: undefined }, // no body is set so it's type is undefined
+        authentication: fromPreRequestAuth(new RequestAuth({ type: 'noauth' })),
+        settingFollowRedirects: settingFollowRedirects,
+        settingRebuildPath: true,
+        settingSendCookies: true,
+        url: req,
+        // currently cookies should be handled by user in headers
+        cookieJar: {
+          cookies: [],
+        },
+        cookies: [],
+        suppressUserAgent: false,
+      },
+      finalUrl: req,
+      settings,
+      certificates: [],
+      caCertficatePath: null,
+      socketPath: undefined,
+      authHeader: undefined, // TODO: add this for bearer and other auth methods
+    };
+  } else if (req instanceof Request || typeof req === 'object') {
+    const finalReq = req instanceof Request ? req : new Request(req);
 
-        let mimeType = 'application/octet-stream';
-        if (finalReq.body) {
-            switch (finalReq.body.mode) {
-                case 'raw':
-                    mimeType = 'text/plain';
-                    break;
-                case 'file':
-                    // TODO: improve this by sniffing
-                    mimeType = 'application/octet-stream';
-                    break;
-                case 'formdata':
-                    // boundary should already be part of Content-Type header
-                    mimeType = 'multipart/form-data';
-                    break;
-                case 'urlencoded':
-                    mimeType = 'application/x-www-form-urlencoded';
-                    break;
-                case 'graphql':
-                    mimeType = 'application/json';
-                    break;
-                default:
-                    throw Error(`unknown body mode: ${finalReq.body.mode}`);
-            }
-        }
-
-        // const authHeaders = [];
-        // const authObj = fromPreRequestAuth(finalReq.auth);
-        // switch (authObj.type) {
-        //     case 'apikey':
-        //         if (authObj.in === 'header') {
-        //             authHeaders.push({
-        //                 name: authObj.key,
-        //                 value: authObj.key,
-        //             });
-        //         }
-        //     case 'bearer':
-        //         authHeaders.push({
-        //             name: 'Authorization',
-        //             value: `Bearer ${authObj.token}`,
-        //         });
-        //     default:
-        //     // TODO: support other methods
-        // }
-
-        const urlencodedParams = finalReq.body?.urlencoded?.all().map(
-            param => ({ name: param.key, value: param.value }),
-        );
-        const formdataParams = finalReq.body?.formdata?.all().map(
-            param => ({
-                type: param.type,
-                name: param.key,
-                value: param.type === 'file' ? '' : param.value,
-                fileName: param.type === 'file' ? param.value : '',
-            }),
-        );
-
-        const params = finalReq.body?.mode === 'formdata' || finalReq.body?.mode === 'urlencoded' ?
-            finalReq.body?.mode === 'formdata' ? formdataParams : urlencodedParams :
-            [];
-
-        return {
-            requestId: finalReq.id || `pre-request-script-adhoc-req-custom:${id}`,
-            req: {
-                headers: finalReq.headers.map(header => ({ name: header.key, value: header.value }), {}),
-                method: finalReq.method,
-                body: {
-                    mimeType,
-                    method: finalReq.method,
-                    text: finalReq.body?.toString(),
-                    params,
-                    fileName: finalReq.body?.mode === 'file' ? finalReq.body?.toString() : undefined,
-                },
-                authentication: fromPreRequestAuth(finalReq.auth),
-                settingFollowRedirects: settingFollowRedirects,
-                settingRebuildPath: true,
-                settingSendCookies: true,
-                url: finalReq.url.toString(),
-                // currently cookies should be handled by user in headers
-                cookieJar: {
-                    cookies: [],
-                },
-                cookies: [],
-                suppressUserAgent: finalReq.headers.map(
-                    h => h.key.toLowerCase() === 'user-agent' && h.disabled === true,
-                    {},
-                ).length > 0,
-            },
-            finalUrl: finalReq.url.toString(),
-            settings,
-            certificates: finalReq.certificate ?
-                [{
-                    host: finalReq.certificate?.name || '',
-                    passphrase: finalReq.certificate?.passphrase || '',
-                    cert: finalReq.certificate?.cert?.src || '',
-                    key: finalReq.certificate?.key?.src || '',
-                    pfx: finalReq.certificate?.pfx?.src || '',
-                    // unused fields because they are not persisted
-                    disabled: false,
-                    isPrivate: false,
-                    _id: '',
-                    type: '',
-                    parentId: '',
-                    modified: 0,
-                    created: 0,
-                    name: '',
-                }] :
-                [],
-            caCertficatePath: null, // the request in pre-request script doesn't support customizing ca yet
-            socketPath: undefined,
-            authHeader: undefined, // TODO: add this for bearer and other auth methods
-        };
+    let mimeType = 'application/octet-stream';
+    if (finalReq.body) {
+      switch (finalReq.body.mode) {
+        case 'raw':
+          mimeType = 'text/plain';
+          break;
+        case 'file':
+          // TODO: improve this by sniffing
+          mimeType = 'application/octet-stream';
+          break;
+        case 'formdata':
+          // boundary should already be part of Content-Type header
+          mimeType = 'multipart/form-data';
+          break;
+        case 'urlencoded':
+          mimeType = 'application/x-www-form-urlencoded';
+          break;
+        case 'graphql':
+          mimeType = 'application/json';
+          break;
+        default:
+          throw Error(`unknown body mode: ${finalReq.body.mode}`);
+      }
     }
 
-    throw Error('the request type must be: string | Request | RequestOptions.');
+    // const authHeaders = [];
+    // const authObj = fromPreRequestAuth(finalReq.auth);
+    // switch (authObj.type) {
+    //     case 'apikey':
+    //         if (authObj.in === 'header') {
+    //             authHeaders.push({
+    //                 name: authObj.key,
+    //                 value: authObj.key,
+    //             });
+    //         }
+    //     case 'bearer':
+    //         authHeaders.push({
+    //             name: 'Authorization',
+    //             value: `Bearer ${authObj.token}`,
+    //         });
+    //     default:
+    //     // TODO: support other methods
+    // }
+
+    const urlencodedParams = finalReq.body?.urlencoded?.all().map(param => ({ name: param.key, value: param.value }));
+    const formdataParams = finalReq.body?.formdata?.all().map(param => ({
+      type: param.type,
+      name: param.key,
+      value: param.type === 'file' ? '' : param.value,
+      fileName: param.type === 'file' ? param.value : '',
+    }));
+
+    const params =
+      finalReq.body?.mode === 'formdata' || finalReq.body?.mode === 'urlencoded'
+        ? finalReq.body?.mode === 'formdata'
+          ? formdataParams
+          : urlencodedParams
+        : [];
+
+    return {
+      requestId: finalReq.id || `pre-request-script-adhoc-req-custom:${id}`,
+      req: {
+        headers: finalReq.headers.map(header => ({ name: header.key, value: header.value }), {}),
+        method: finalReq.method,
+        body: {
+          mimeType,
+          method: finalReq.method,
+          text: finalReq.body?.toString(),
+          params,
+          fileName: finalReq.body?.mode === 'file' ? finalReq.body?.toString() : undefined,
+        },
+        authentication: fromPreRequestAuth(finalReq.auth),
+        settingFollowRedirects: settingFollowRedirects,
+        settingRebuildPath: true,
+        settingSendCookies: true,
+        url: finalReq.url.toString(),
+        // currently cookies should be handled by user in headers
+        cookieJar: {
+          cookies: [],
+        },
+        cookies: [],
+        suppressUserAgent:
+          finalReq.headers.map(h => h.key.toLowerCase() === 'user-agent' && h.disabled === true, {}).length > 0,
+      },
+      finalUrl: finalReq.url.toString(),
+      settings,
+      certificates: finalReq.certificate
+        ? [
+            {
+              host: finalReq.certificate?.name || '',
+              passphrase: finalReq.certificate?.passphrase || '',
+              cert: finalReq.certificate?.cert?.src || '',
+              key: finalReq.certificate?.key?.src || '',
+              pfx: finalReq.certificate?.pfx?.src || '',
+              // unused fields because they are not persisted
+              disabled: false,
+              isPrivate: false,
+              _id: '',
+              type: '',
+              parentId: '',
+              modified: 0,
+              created: 0,
+              name: '',
+            },
+          ]
+        : [],
+      caCertficatePath: null, // the request in pre-request script doesn't support customizing ca yet
+      socketPath: undefined,
+      authHeader: undefined, // TODO: add this for bearer and other auth methods
+    };
+  }
+
+  throw Error('the request type must be: string | Request | RequestOptions.');
 }
 
 async function curlOutputToResponse(
-    result: CurlRequestOutput,
-    request: string | Request | RequestOptions,
+  result: CurlRequestOutput,
+  request: string | Request | RequestOptions,
 ): Promise<Response> {
-    if (result.headerResults.length === 0) {
-        throw Error('curlOutputToResponse: no header result is found');
-    }
-    if (result.patch.error) {
-        throw result.patch.error;
-    }
+  if (result.headerResults.length === 0) {
+    throw Error('curlOutputToResponse: no header result is found');
+  }
+  if (result.patch.error) {
+    throw result.patch.error;
+  }
 
-    const lastRedirect = result.headerResults[result.headerResults.length - 1];
-    if (!lastRedirect) {
-        throw Error('curlOutputToResponse: the lastRedirect is not defined');
-    }
+  const lastRedirect = result.headerResults[result.headerResults.length - 1];
+  if (!lastRedirect) {
+    throw Error('curlOutputToResponse: the lastRedirect is not defined');
+  }
 
-    const originalRequest = typeof request === 'string' ?
-        new Request({ url: request, method: 'GET' }) :
-        request instanceof Request ?
-            request :
-            new Request(request);
+  const originalRequest =
+    typeof request === 'string'
+      ? new Request({ url: request, method: 'GET' })
+      : request instanceof Request
+        ? request
+        : new Request(request);
 
-    const headers = lastRedirect.headers.map(
-        (header: { name: string; value: string }) => ({ key: header.name, value: header.value })
-    );
+  const headers = lastRedirect.headers.map((header: { name: string; value: string }) => ({
+    key: header.name,
+    value: header.value,
+  }));
 
-    const cookieHeaders = lastRedirect.headers.filter(header => {
-        return header.name.toLowerCase() === 'set-cookie';
-    });
-    // TODO: tackle stream field but currently it is just a duplication of body
-    const cookies = cookieHeaders
-        .map(cookieHeader => {
-            const cookieObj = Cookie.parse(cookieHeader.value || '', { loose: true });
-            if (cookieObj) {
-                return {
-                    key: cookieObj.key,
-                    value: cookieObj.value,
-                    expires: cookieObj.expires,
-                    maxAge: cookieObj.maxAge,
-                    domain: cookieObj.domain,
-                    path: cookieObj.path,
-                    secure: cookieObj.secure,
-                    httpOnly: cookieObj.httpOnly,
-                    hostOnly: cookieObj.hostOnly,
-                    // session: cookieObj.session, // not supported
-                    // extensions: cookieObj.extensions,
-                };
-            }
+  const cookieHeaders = lastRedirect.headers.filter(header => {
+    return header.name.toLowerCase() === 'set-cookie';
+  });
+  // TODO: tackle stream field but currently it is just a duplication of body
+  const cookies = cookieHeaders
+    .map(cookieHeader => {
+      const cookieObj = Cookie.parse(cookieHeader.value || '', { loose: true });
+      if (cookieObj) {
+        return {
+          key: cookieObj.key,
+          value: cookieObj.value,
+          expires: cookieObj.expires,
+          maxAge: cookieObj.maxAge,
+          domain: cookieObj.domain,
+          path: cookieObj.path,
+          secure: cookieObj.secure,
+          httpOnly: cookieObj.httpOnly,
+          hostOnly: cookieObj.hostOnly,
+          // session: cookieObj.session, // not supported
+          // extensions: cookieObj.extensions,
+        };
+      }
 
-            return cookieObj;
-        })
-        .filter(cookieOpt => cookieOpt !== undefined);
+      return cookieObj;
+    })
+    .filter(cookieOpt => cookieOpt !== undefined);
 
-    if (!result.responseBodyPath) {
-        return new Response({
-            code: lastRedirect.code,
-            reason: lastRedirect.reason,
-            header: headers,
-            cookie: cookies as CookieOptions[],
-            body: '',
-            stream: undefined,
-            responseTime: result.patch.elapsedTime,
-            originalRequest,
-        });
-    }
-    const nodejsReadCurlResponse = process.type === 'renderer' ? window.bridge.readCurlResponse : readCurlResponse;
-    const bodyResult = await nodejsReadCurlResponse({
-        bodyPath: result.responseBodyPath,
-        bodyCompression: result.patch.bodyCompression,
-    });
-    if (bodyResult.error) {
-        throw Error(bodyResult.error);
-    }
+  if (!result.responseBodyPath) {
     return new Response({
-        code: lastRedirect.code,
-        reason: lastRedirect.reason,
-        header: headers,
-        cookie: cookies as CookieOptions[],
-        body: bodyResult.body,
-        // stream is always undefined
-        // because it is inaccurate to differentiate if body is binary
-        stream: undefined,
-        responseTime: result.patch.elapsedTime,
-        originalRequest,
+      code: lastRedirect.code,
+      reason: lastRedirect.reason,
+      header: headers,
+      cookie: cookies as CookieOptions[],
+      body: '',
+      stream: undefined,
+      responseTime: result.patch.elapsedTime,
+      originalRequest,
     });
+  }
+  const nodejsReadCurlResponse = process.type === 'renderer' ? window.bridge.readCurlResponse : readCurlResponse;
+  const bodyResult = await nodejsReadCurlResponse({
+    bodyPath: result.responseBodyPath,
+    bodyCompression: result.patch.bodyCompression,
+  });
+  if (bodyResult.error) {
+    throw Error(bodyResult.error);
+  }
+  return new Response({
+    code: lastRedirect.code,
+    reason: lastRedirect.reason,
+    header: headers,
+    cookie: cookies as CookieOptions[],
+    body: bodyResult.body,
+    // stream is always undefined
+    // because it is inaccurate to differentiate if body is binary
+    stream: undefined,
+    responseTime: result.patch.elapsedTime,
+    originalRequest,
+  });
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/test.ts b/packages/insomnia-scripting-environment/src/objects/test.ts
index 8b32ce3b00..2276e55c5b 100644
--- a/packages/insomnia-scripting-environment/src/objects/test.ts
+++ b/packages/insomnia-scripting-environment/src/objects/test.ts
@@ -1,71 +1,63 @@
-export async function test(
-    msg: string,
-    fn: () => Promise<void>,
-    log: (testResult: RequestTestResult) => void,
-) {
-    const wrapFn = async () => {
-        const started = performance.now();
+export async function test(msg: string, fn: () => Promise<void>, log: (testResult: RequestTestResult) => void) {
+  const wrapFn = async () => {
+    const started = performance.now();
 
-        try {
-            await fn();
+    try {
+      await fn();
 
-            const executionTime = performance.now() - started;
-            log({
-                testCase: msg,
-                status: 'passed',
-                executionTime,
-                category: 'unknown',
-            });
-        } catch (e) {
-            const executionTime = performance.now() - started;
-            log({
-                testCase: msg,
-                status: 'failed',
-                executionTime,
-                errorMessage: `error: ${e} | ACTUAL: ${e.actual} | EXPECTED: ${e.expected}`,
-                category: 'unknown',
-            });
-        }
-    };
+      const executionTime = performance.now() - started;
+      log({
+        testCase: msg,
+        status: 'passed',
+        executionTime,
+        category: 'unknown',
+      });
+    } catch (e) {
+      const executionTime = performance.now() - started;
+      log({
+        testCase: msg,
+        status: 'failed',
+        executionTime,
+        errorMessage: `error: ${e} | ACTUAL: ${e.actual} | EXPECTED: ${e.expected}`,
+        category: 'unknown',
+      });
+    }
+  };
 
-    const testPromise = wrapFn();
-    startTestObserver(testPromise);
-    return testPromise;
+  const testPromise = wrapFn();
+  startTestObserver(testPromise);
+  return testPromise;
 }
 
 let testPromises = new Array<Promise<void>>();
 export async function waitForAllTestsDone() {
-    await Promise.allSettled(testPromises);
-    testPromises = [];
+  await Promise.allSettled(testPromises);
+  testPromises = [];
 }
 function startTestObserver(promise: Promise<void>) {
-    testPromises.push(promise);
+  testPromises.push(promise);
 }
 
-export async function skip(
-    msg: string,
-    _: () => Promise<void>,
-    log: (testResult: RequestTestResult) => void,
-) {
-    log({
-        testCase: msg,
-        status: 'skipped',
-        executionTime: 0,
-        category: 'unknown',
-    });
+export async function skip(msg: string, _: () => Promise<void>, log: (testResult: RequestTestResult) => void) {
+  log({
+    testCase: msg,
+    status: 'skipped',
+    executionTime: 0,
+    category: 'unknown',
+  });
 }
 
 export type TestStatus = 'passed' | 'failed' | 'skipped';
 export type TestCategory = 'unknown' | 'pre-request' | 'after-response';
 export interface RequestTestResult {
-    testCase: string;
-    status: TestStatus;
-    executionTime: number; // milliseconds
-    errorMessage?: string;
-    category: TestCategory;
+  testCase: string;
+  status: TestStatus;
+  executionTime: number; // milliseconds
+  errorMessage?: string;
+  category: TestCategory;
 }
 
 export interface TestHandler {
-    (msg: string, fn: () => Promise<void>): Promise<void>;
-    skip?: (msg: string, fn: () => Promise<void>) => void;
-};
+  (msg: string, fn: () => Promise<void>): Promise<void>;
+  skip?: (msg: string, fn: () => Promise<void>) => void;
+}
diff --git a/packages/insomnia-scripting-environment/src/objects/urls.ts b/packages/insomnia-scripting-environment/src/objects/urls.ts
index 40429f5464..1ad2e6b296 100644
--- a/packages/insomnia-scripting-environment/src/objects/urls.ts
+++ b/packages/insomnia-scripting-environment/src/objects/urls.ts
@@ -3,370 +3,364 @@ import { checkIfUrlIncludesTag } from './utils';
 
 let UrlSearchParams = URLSearchParams;
 export function setUrlSearchParams(provider: any) {
-    UrlSearchParams = provider;
+  UrlSearchParams = provider;
 }
 
 export interface QueryParamOptions {
-    key: string;
-    value: string;
-    type?: string;
-    multiline?: string | boolean;
-    disabled?: boolean;
-    fileName?: string;
+  key: string;
+  value: string;
+  type?: string;
+  multiline?: string | boolean;
+  disabled?: boolean;
+  fileName?: string;
 }
 
 export class QueryParam extends Property {
-    override _kind = 'QueryParam';
+  override _kind = 'QueryParam';
 
-    key: string;
-    value: string;
-    type?: string;
-    // the `multiline` and `fileName` are properties from Insomnia
-    // they are added here to avoid being dropped
-    multiline?: string | boolean;
-    fileName?: string;
+  key: string;
+  value: string;
+  type?: string;
+  // the `multiline` and `fileName` are properties from Insomnia
+  // they are added here to avoid being dropped
+  multiline?: string | boolean;
+  fileName?: string;
 
-    constructor(options: QueryParamOptions | string) {
-        super();
+  constructor(options: QueryParamOptions | string) {
+    super();
 
-        if (typeof options === 'string') {
-            try {
-                const optionsObj = JSON.parse(options);
-                this.key = optionsObj.key;
-                this.value = optionsObj.value;
-                this.type = optionsObj.type;
-                this.multiline = optionsObj.multiline;
-                this.disabled = optionsObj.disabled;
-                this.fileName = optionsObj.fileName;
-            } catch (e) {
-                throw Error(`invalid QueryParam options ${e}`);
-            }
-        } else if (typeof options === 'object' && ('key' in options) && ('value' in options)) {
-            this.key = options.key;
-            this.value = options.value;
-            this.type = options.type;
-            this.multiline = options.multiline;
-            this.disabled = options.disabled;
-            this.fileName = options.fileName;
-        } else {
-            throw Error('unknown options for new QueryParam');
-        }
+    if (typeof options === 'string') {
+      try {
+        const optionsObj = JSON.parse(options);
+        this.key = optionsObj.key;
+        this.value = optionsObj.value;
+        this.type = optionsObj.type;
+        this.multiline = optionsObj.multiline;
+        this.disabled = optionsObj.disabled;
+        this.fileName = optionsObj.fileName;
+      } catch (e) {
+        throw Error(`invalid QueryParam options ${e}`);
+      }
+    } else if (typeof options === 'object' && 'key' in options && 'value' in options) {
+      this.key = options.key;
+      this.value = options.value;
+      this.type = options.type;
+      this.multiline = options.multiline;
+      this.disabled = options.disabled;
+      this.fileName = options.fileName;
+    } else {
+      throw Error('unknown options for new QueryParam');
+    }
+  }
+
+  // TODO:
+  // (static) _postman_propertyAllowsMultipleValues :Boolean
+  // (static) _postman_propertyIndexKey :String
+
+  static override _index = 'key';
+
+  static parse(queryStr: string) {
+    const params = new UrlSearchParams(queryStr);
+    return Array.from(params.entries()).map(entry => ({ key: entry[0], value: entry[1] }));
+  }
+
+  static parseSingle(paramStr: string, _idx?: number, _all?: string[]) {
+    const pairs = QueryParam.parse(paramStr);
+    if (pairs.length === 0) {
+      throw Error('invalid search query string');
     }
 
-    // TODO:
-    // (static) _postman_propertyAllowsMultipleValues :Boolean
-    // (static) _postman_propertyIndexKey :String
+    return pairs[0];
+  }
 
-    static override _index = 'key';
+  static unparse(params: QueryParamOptions[] | Record<string, string>) {
+    const searchParams = new UrlSearchParams();
 
-    static parse(queryStr: string) {
-        const params = new UrlSearchParams(queryStr);
-        return Array.from(params.entries())
-            .map(entry => ({ key: entry[0], value: entry[1] }));
+    if (Array.isArray(params)) {
+      params.forEach((entry: QueryParamOptions) => searchParams.append(entry.key, entry.value));
+    } else {
+      Object.entries(params).forEach(entry => searchParams.append(entry[0], entry[1]));
     }
 
+    return searchParams.toString();
+  }
 
-    static parseSingle(paramStr: string, _idx?: number, _all?: string[]) {
-        const pairs = QueryParam.parse(paramStr);
-        if (pairs.length === 0) {
-            throw Error('invalid search query string');
-        }
+  static unparseSingle(obj: { key: string; value: string }) {
+    if ('key' in obj && 'value' in obj) {
+      const params = new UrlSearchParams();
+      params.append(obj.key, obj.value);
 
-        return pairs[0];
+      return params.toString();
     }
+    return {};
+  }
 
-    static unparse(params: QueryParamOptions[] | Record<string, string>) {
-        const searchParams = new UrlSearchParams();
+  override toString() {
+    const params = new UrlSearchParams();
+    params.append(this.key, this.value);
 
-        if (Array.isArray(params)) {
-            params.forEach((entry: QueryParamOptions) => searchParams.append(entry.key, entry.value));
-        } else {
-            Object.entries(params)
-                .forEach(entry => searchParams.append(entry[0], entry[1]));
-        }
+    return params.toString();
+  }
 
-        return searchParams.toString();
-    }
-
-    static unparseSingle(obj: { key: string; value: string }) {
-        if ('key' in obj && 'value' in obj) {
-            const params = new UrlSearchParams();
-            params.append(obj.key, obj.value);
-
-            return params.toString();
-        }
-        return {};
-    }
-
-    override toString() {
-        const params = new UrlSearchParams();
-        params.append(this.key, this.value);
-
-        return params.toString();
-    }
-
-    toRawString() {
-        return `${this.key}=${this.value}`;
-    }
-
-    update(param: string | { key: string; value: string; type?: string }) {
-        if (typeof param === 'string') {
-            const paramObj = QueryParam.parseSingle(param);
-            if (!paramObj) {
-                throw Error('failed to update param: input `param` is invalid');
-            }
-            this.key = typeof paramObj.key === 'string' ? paramObj.key : '';
-            this.value = typeof paramObj.value === 'string' ? paramObj.value : '';
-        } else if ('key' in param && 'value' in param) {
-            this.key = param.key;
-            this.value = param.value;
-            this.type = param.type;
-        } else {
-            throw Error('the param for update must be: string | { key: string; value: string }');
-        }
+  toRawString() {
+    return `${this.key}=${this.value}`;
+  }
+
+  update(param: string | { key: string; value: string; type?: string }) {
+    if (typeof param === 'string') {
+      const paramObj = QueryParam.parseSingle(param);
+      if (!paramObj) {
+        throw Error('failed to update param: input `param` is invalid');
+      }
+      this.key = typeof paramObj.key === 'string' ? paramObj.key : '';
+      this.value = typeof paramObj.value === 'string' ? paramObj.value : '';
+    } else if ('key' in param && 'value' in param) {
+      this.key = param.key;
+      this.value = param.value;
+      this.type = param.type;
+    } else {
+      throw Error('the param for update must be: string | { key: string; value: string }');
     }
+  }
 }
 
 export interface UrlOptions {
-    id?: string;
-    auth?: {
-        username: string;
-        password: string;
-    };
-    hash?: string;
-    host: string[];
-    path?: string[];
-    port?: string;
-    protocol: string;
-    query: { key: string; value: string }[];
-    variables: { key: string; value: string }[];
+  id?: string;
+  auth?: {
+    username: string;
+    password: string;
+  };
+  hash?: string;
+  host: string[];
+  path?: string[];
+  port?: string;
+  protocol: string;
+  query: { key: string; value: string }[];
+  variables: { key: string; value: string }[];
 }
 
 export class Url extends PropertyBase {
-    override _kind = 'Url';
+  override _kind = 'Url';
 
-    id?: string;
-    private urlObject?: URL;
-    private origin?: string;
-    private queryParams: QueryParam[] = []; // query params are handled separately as URL object encodes content
+  id?: string;
+  private urlObject?: URL;
+  private origin?: string;
+  private queryParams: QueryParam[] = []; // query params are handled separately as URL object encodes content
 
-    get auth(): { username: string; password: string } | undefined {
-        // TODO: probably it should be related to the RequestAuth class
-        // but the implementation seems only supporting username + password
-        return this.urlObject && this.urlObject.username !== ''
-            ? { username: this.urlObject.username, password: this.urlObject.password }
-            : undefined;
+  get auth(): { username: string; password: string } | undefined {
+    // TODO: probably it should be related to the RequestAuth class
+    // but the implementation seems only supporting username + password
+    return this.urlObject && this.urlObject.username !== ''
+      ? { username: this.urlObject.username, password: this.urlObject.password }
+      : undefined;
+  }
+  get hash(): string {
+    const fullHash = this.urlObject ? this.urlObject.hash : '';
+    return fullHash.startsWith('#') ? fullHash.slice(1) : fullHash;
+  }
+  get host(): string[] {
+    return this.urlObject ? this.urlObject.hostname.split('.') : [];
+  }
+  get path(): string[] {
+    return this.urlObject ? this.urlObject.pathname.split('/').filter(segment => segment.trim() !== '') : [];
+  }
+  get port(): string {
+    return this.urlObject ? this.urlObject.port : '';
+  }
+  get protocol(): string {
+    return this.urlObject ? this.urlObject.protocol : '';
+  }
+  get query(): PropertyList<QueryParam> {
+    return new PropertyList<QueryParam>(QueryParam, undefined, this.queryParams);
+  }
+  get variables(): string[] {
+    // TODO: it's usage is unknown
+    return [];
+  }
+
+  constructor(def: UrlOptions | string) {
+    super();
+    this.initFields(def);
+  }
+
+  private initFields(urlOptions: UrlOptions | string | undefined) {
+    if (typeof urlOptions === 'string') {
+      // avoid escaping tags by the parser: {% uuid 'v4' %} -> %7B%%20uuid%20'v4'%20%%7D
+      const ifUrlIncludesTag = checkIfUrlIncludesTag(urlOptions);
+      if (URL.canParse(urlOptions) && !ifUrlIncludesTag) {
+        this.urlObject = new URL(urlOptions);
+        // maintain query params separately
+        this.urlObject.searchParams.forEach((value: string, key: string) => {
+          this.queryParams = [...this.queryParams, new QueryParam({ key, value })];
+        });
+        this.urlObject.search = '';
+      } else {
+        this.urlObject = undefined;
+      }
+      this.origin = urlOptions;
+    } else if (typeof urlOptions === 'object') {
+      const protocolStr = (urlOptions.protocol || '').trim() ? urlOptions.protocol.trim() : 'https://';
+      const authStr = urlOptions.auth ? `${urlOptions.auth.username}:${urlOptions.auth.password}@` : '';
+      const hostStr = urlOptions.host.join('.');
+      const portStr = urlOptions.port ? `:${urlOptions.port}` : '';
+      const pathStr =
+        urlOptions.path && urlOptions.path.length > 0
+          ? `/${urlOptions.path.filter(segment => segment.trim() !== '').join('/')}`
+          : '';
+      const queryStr =
+        urlOptions.query && urlOptions.query.length > 0
+          ? '?' + urlOptions.query.map(pair => `${pair.key}=${pair.value}`).join('&')
+          : '';
+      const hashStr = urlOptions.hash ? `#${urlOptions.hash}` : '';
+
+      const urlString = `${protocolStr}${authStr}${hostStr}${portStr}${pathStr}${queryStr}${hashStr}`;
+
+      if (URL.canParse(urlString)) {
+        this.urlObject = new URL(urlString);
+        // maintain query params separately
+        this.urlObject.searchParams.forEach((value: string, key: string) => {
+          this.queryParams = [...this.queryParams, new QueryParam({ key, value })];
+        });
+        this.urlObject.search = '';
+      } else {
+        this.urlObject = undefined;
+      }
+      this.origin = urlString;
+    } else {
+      throw Error(`url is invalid: ${urlOptions} `); // TODO:
     }
-    get hash(): string {
-        const fullHash = this.urlObject ? this.urlObject.hash : '';
-        return fullHash.startsWith('#') ? fullHash.slice(1) : fullHash;
-    }
-    get host(): string[] {
-        return this.urlObject ? this.urlObject.hostname.split('.') : [];
-    }
-    get path(): string[] {
-        return this.urlObject ? this.urlObject.pathname.split('/').filter(segment => segment.trim() !== '') : [];
-    }
-    get port(): string {
-        return this.urlObject ? this.urlObject.port : '';
-    }
-    get protocol(): string {
-        return this.urlObject ? this.urlObject.protocol : '';
-    }
-    get query(): PropertyList<QueryParam> {
-        return new PropertyList<QueryParam>(
-            QueryParam,
-            undefined,
-            this.queryParams,
-        );
-    }
-    get variables(): string[] {
-        // TODO: it's usage is unknown
-        return [];
+  }
+
+  static _index = 'id';
+
+  static isUrl(obj: object) {
+    return '_kind' in obj && obj._kind === 'Url';
+  }
+
+  static parse(urlStr: string): UrlOptions | undefined {
+    if (URL.canParse(urlStr)) {
+      const urlObject = new URL(urlStr);
+      const auth =
+        urlObject.username === '' ? undefined : { username: urlObject.username, password: urlObject.password };
+      const query = Array.from(urlObject.searchParams.entries()).map(entry => ({ key: entry[0], value: entry[1] }));
+
+      return {
+        auth,
+        protocol: urlObject.protocol,
+        host: urlObject.hostname.split('.'),
+        port: urlObject.port,
+        path: urlObject.pathname.split('/'),
+        query,
+        hash: urlObject.hash,
+        variables: [],
+      };
     }
 
-    constructor(
-        def: UrlOptions | string
-    ) {
-        super();
-        this.initFields(def);
+    return undefined;
+  }
+
+  addQueryParams(params: QueryParamOptions[] | string) {
+    if (typeof params === 'string') {
+      // URLSearchParams is not used here as it encodes content
+      const pairs = params.split('&');
+      pairs.forEach(pair => {
+        const parts = pair.split('=');
+        this.queryParams = [...this.queryParams, new QueryParam({ key: parts[0], value: parts[1] })];
+        // this.urlObject.searchParams.append(pair[0], pair[1]);
+      });
+    } else if (Array.isArray(params)) {
+      params.forEach(pair => {
+        this.queryParams = [...this.queryParams, new QueryParam({ ...pair })];
+      });
+    } else {
+      throw Error(`addQueryParams: invalid params: ${JSON.stringify(params)}`);
     }
+  }
 
-    private initFields(urlOptions: UrlOptions | string | undefined) {
-        if (typeof urlOptions === 'string') {
-            // avoid escaping tags by the parser: {% uuid 'v4' %} -> %7B%%20uuid%20'v4'%20%%7D
-            const ifUrlIncludesTag = checkIfUrlIncludesTag(urlOptions);
-            if (URL.canParse(urlOptions) && !ifUrlIncludesTag) {
-                this.urlObject = new URL(urlOptions);
-                // maintain query params separately
-                this.urlObject.searchParams.forEach((value: string, key: string) => {
-                    this.queryParams = [...this.queryParams, new QueryParam({ key, value })];
-                });
-                this.urlObject.search = '';
-            } else {
-                this.urlObject = undefined;
-            }
-            this.origin = urlOptions;
-        } else if (typeof urlOptions === 'object') {
-            const protocolStr = (urlOptions.protocol || '').trim() ? urlOptions.protocol.trim() : 'https://';
-            const authStr = urlOptions.auth ? `${urlOptions.auth.username}:${urlOptions.auth.password}@` : '';
-            const hostStr = urlOptions.host.join('.');
-            const portStr = urlOptions.port ? `:${urlOptions.port}` : '';
-            const pathStr = urlOptions.path && urlOptions.path.length > 0 ? `/${urlOptions.path.filter(segment => segment.trim() !== '').join('/')}` : '';
-            const queryStr = urlOptions.query && urlOptions.query.length > 0 ? '?' + urlOptions.query.map(pair => `${pair.key}=${pair.value}`).join('&') : '';
-            const hashStr = urlOptions.hash ? `#${urlOptions.hash}` : '';
-
-            const urlString = `${protocolStr}${authStr}${hostStr}${portStr}${pathStr}${queryStr}${hashStr}`;
-
-            if (URL.canParse(urlString)) {
-                this.urlObject = new URL(urlString);
-                // maintain query params separately
-                this.urlObject.searchParams.forEach((value: string, key: string) => {
-                    this.queryParams = [...this.queryParams, new QueryParam({ key, value })];
-                });
-                this.urlObject.search = '';
-            } else {
-                this.urlObject = undefined;
-            }
-            this.origin = urlString;
-        } else {
-            throw Error(`url is invalid: ${urlOptions} `); // TODO:
-        }
+  getHost() {
+    if (this.urlObject) {
+      return this.urlObject.hostname;
     }
+    return '';
+  }
 
-    static _index = 'id';
-
-    static isUrl(obj: object) {
-        return '_kind' in obj && obj._kind === 'Url';
+  getPath(_unresolved?: boolean) {
+    if (this.urlObject) {
+      return this.urlObject.pathname;
     }
+    return '';
+  }
 
-    static parse(urlStr: string): UrlOptions | undefined {
-        if (URL.canParse(urlStr)) {
-            const urlObject = new URL(urlStr);
-            const auth = urlObject.username === '' ? undefined : { username: urlObject.username, password: urlObject.password };
-            const query = Array.from(urlObject.searchParams.entries())
-                .map(entry => ({ key: entry[0], value: entry[1] }));
-
-            return {
-                auth,
-                protocol: urlObject.protocol,
-                host: urlObject.hostname.split('.'),
-                port: urlObject.port,
-                path: urlObject.pathname.split('/'),
-                query,
-                hash: urlObject.hash,
-                variables: [],
-            };
-        }
-
-        return undefined;
+  getPathWithQuery() {
+    if (this.getPath(true).trim() === '') {
+      return this.getQueryString();
     }
+    return `${this.getPath(true)}?${this.getQueryString()}`;
+  }
 
-    addQueryParams(params: QueryParamOptions[] | string) {
-        if (typeof params === 'string') {
-            // URLSearchParams is not used here as it encodes content
-            const pairs = params.split('&');
-            pairs
-                .forEach(pair => {
-                    const parts = pair.split('=');
-                    this.queryParams = [...this.queryParams, new QueryParam({ key: parts[0], value: parts[1] })];
-                    // this.urlObject.searchParams.append(pair[0], pair[1]);
-                });
-        } else if (Array.isArray(params)) {
-            params.forEach(pair => {
-                this.queryParams = [...this.queryParams, new QueryParam({ ...pair })];
-            });
-        } else {
-            throw Error(`addQueryParams: invalid params: ${JSON.stringify(params)}`);
-        }
+  getQueryString() {
+    return this.queryParams.map(param => param.toRawString()).join('&');
+  }
+
+  getRemote(_forcePort?: boolean) {
+    if (this.urlObject) {
+      return this.urlObject.host;
     }
+    return '';
+  }
 
-    getHost() {
-        if (this.urlObject) {
-            return this.urlObject.hostname;
-        }
-        return '';
+  removeQueryParams(params: QueryParam[] | string[] | string) {
+    if (typeof params === 'string') {
+      this.queryParams = this.queryParams.filter(param => param.key !== params);
+    } else if (Array.isArray(params)) {
+      this.queryParams = this.queryParams.filter(param => {
+        const shouldDelete = params.some(paramToRemove => {
+          if (typeof paramToRemove === 'string') {
+            return param.key === paramToRemove;
+          }
+          return param.key === paramToRemove.key;
+        });
+
+        return !shouldDelete;
+      });
+    } else {
+      throw Error(
+        'removeQueryParams: failed to remove query params: unknown params type, only supports QueryParam[], string[] or string',
+      );
     }
+  }
 
-
-    getPath(_unresolved?: boolean) {
-        if (this.urlObject) {
-            return this.urlObject.pathname;
-        }
-        return '';
+  override toString(_forceProtocol?: boolean) {
+    if (this.urlObject) {
+      const newUrlObject = new URL(this.urlObject.toString());
+      newUrlObject.search = this.getQueryString();
+      const urlInString = newUrlObject.toString();
+      if (this.urlObject.pathname === '/' && urlInString === this.origin + '/') {
+        // try to avoid replacing empty path with '/'
+        return urlInString.slice(0, urlInString.length - 1);
+      }
+      return urlInString;
     }
+    return this.origin || '';
+  }
 
-    getPathWithQuery() {
-        if (this.getPath(true).trim() === '') {
-            return this.getQueryString();
-        }
-        return `${this.getPath(true)}?${this.getQueryString()}`;
+  toStringWithoutQuery(_forceProtocol?: boolean) {
+    if (this.urlObject) {
+      const newUrlObject = new URL(this.urlObject.toString());
+      newUrlObject.search = '';
+      const urlInString = newUrlObject.toString();
+      if (this.urlObject.pathname === '/' && urlInString === this.origin + '/') {
+        // try to avoid replacing empty path with '/'
+        return urlInString.slice(0, urlInString.length - 1);
+      }
+      return urlInString;
     }
+    return this.origin || '';
+  }
 
-    getQueryString() {
-        return this.queryParams.map(param => param.toRawString()).join('&');
-    }
-
-
-    getRemote(_forcePort?: boolean) {
-        if (this.urlObject) {
-            return this.urlObject.host;
-        }
-        return '';
-    }
-
-    removeQueryParams(params: QueryParam[] | string[] | string) {
-        if (typeof params === 'string') {
-            this.queryParams = this.queryParams.filter(param => param.key !== params);
-        } else if (Array.isArray(params)) {
-            this.queryParams = this.queryParams.filter(param => {
-                const shouldDelete = params.some(paramToRemove => {
-                    if (typeof paramToRemove === 'string') {
-                        return param.key === paramToRemove;
-                    }
-                    return param.key === paramToRemove.key;
-                });
-
-                return !shouldDelete;
-            });
-        } else {
-            throw Error('removeQueryParams: failed to remove query params: unknown params type, only supports QueryParam[], string[] or string');
-        }
-    }
-
-
-    override toString(_forceProtocol?: boolean) {
-        if (this.urlObject) {
-            const newUrlObject = new URL(this.urlObject.toString());
-            newUrlObject.search = this.getQueryString();
-            const urlInString = newUrlObject.toString();
-            if (this.urlObject.pathname === '/' && urlInString === this.origin + '/') {
-                // try to avoid replacing empty path with '/'
-                return urlInString.slice(0, urlInString.length - 1);
-            }
-            return urlInString;
-        }
-        return this.origin || '';
-    }
-
-
-    toStringWithoutQuery(_forceProtocol?: boolean) {
-        if (this.urlObject) {
-            const newUrlObject = new URL(this.urlObject.toString());
-            newUrlObject.search = '';
-            const urlInString = newUrlObject.toString();
-            if (this.urlObject.pathname === '/' && urlInString === this.origin + '/') {
-                // try to avoid replacing empty path with '/'
-                return urlInString.slice(0, urlInString.length - 1);
-            }
-            return urlInString;
-        }
-        return this.origin || '';
-    }
-
-    update(url: UrlOptions | string) {
-        this.initFields(url);
-    }
+  update(url: UrlOptions | string) {
+    this.initFields(url);
+  }
 }
 
 // interface Matcher {
@@ -376,248 +370,250 @@ export class Url extends PropertyBase {
 // UrlMatchPattern implements chrome extension match patterns:
 // https://developer.chrome.com/docs/extensions/develop/concepts/match-patterns
 export class UrlMatchPattern extends Property {
-    // scheme
-    // scheme: 'http:' | 'https:' | '*' | 'file:';
+  // scheme
+  // scheme: 'http:' | 'https:' | '*' | 'file:';
 
-    // host
-    // About wildcard:
-    // If you use a wildcard in the host pattern
-    // it must be the first or only character, and it must be followed by a period (.) or forward slash (/).
+  // host
+  // About wildcard:
+  // If you use a wildcard in the host pattern
+  // it must be the first or only character, and it must be followed by a period (.) or forward slash (/).
 
-    // path
-    // Must contain at least a forward slash
-    // The slash by itself matches any path.
+  // path
+  // Must contain at least a forward slash
+  // The slash by itself matches any path.
 
-    // Special cases: https://developer.chrome.com/docs/extensions/develop/concepts/match-patterns#special
-    // "<all_urls>"
-    // "file:///"
-    // "http://localhost/*"
-    // It doesn't support match patterns for top Level domains (TLD).
+  // Special cases: https://developer.chrome.com/docs/extensions/develop/concepts/match-patterns#special
+  // "<all_urls>"
+  // "file:///"
+  // "http://localhost/*"
+  // It doesn't support match patterns for top Level domains (TLD).
 
-    override id = '';
-    private pattern: string;
+  override id = '';
+  private pattern: string;
 
-    constructor(pattern: string) {
-        super();
+  constructor(pattern: string) {
+    super();
 
-        this.pattern = pattern;
+    this.pattern = pattern;
+  }
+
+  static override _index = 'id';
+  static readonly MATCH_ALL_URLS: string = '<all_urls>';
+  static pattern: string | undefined = undefined; // TODO: its usage is unknown
+  static readonly PROTOCOL_DELIMITER: string = '+';
+
+  // TODO: the url can not start with -
+
+  getProtocols(): string[] {
+    if (this.pattern === '<all_urls>') {
+      return ['http', 'https', 'file'];
     }
 
-    static override _index = 'id';
-    static readonly MATCH_ALL_URLS: string = '<all_urls>';
-    static pattern: string | undefined = undefined; // TODO: its usage is unknown
-    static readonly PROTOCOL_DELIMITER: string = '+';
-
-    // TODO: the url can not start with -
-
-    getProtocols(): string[] {
-        if (this.pattern === '<all_urls>') {
-            return ['http', 'https', 'file'];
-        }
-
-        const protocolEndPos = this.pattern.indexOf('://');
-        if (protocolEndPos < 0) {
-            return [];
-        }
-
-        const protocolPattern = this.pattern.slice(0, protocolEndPos);
-        const protocols = protocolPattern.split(UrlMatchPattern.PROTOCOL_DELIMITER);
-
-        return protocols.map(protocol => protocol.replace(':', ''));
+    const protocolEndPos = this.pattern.indexOf('://');
+    if (protocolEndPos < 0) {
+      return [];
     }
 
-    test(urlStr: string) {
-        const protoEndPos = urlStr.indexOf(':');
-        const protoStr = urlStr.slice(0, protoEndPos);
-        const hostStr = this.getHost(urlStr);
-        const pathStr = this.getPath(this.pattern);
-        const portStr = this.getPort(urlStr);
+    const protocolPattern = this.pattern.slice(0, protocolEndPos);
+    const protocols = protocolPattern.split(UrlMatchPattern.PROTOCOL_DELIMITER);
 
-        return this.testProtocol(protoStr) &&
-            this.testHost(hostStr) &&
-            this.testPath(pathStr) &&
-            this.testPort(portStr, protoStr);
+    return protocols.map(protocol => protocol.replace(':', ''));
+  }
+
+  test(urlStr: string) {
+    const protoEndPos = urlStr.indexOf(':');
+    const protoStr = urlStr.slice(0, protoEndPos);
+    const hostStr = this.getHost(urlStr);
+    const pathStr = this.getPath(this.pattern);
+    const portStr = this.getPort(urlStr);
+
+    return (
+      this.testProtocol(protoStr) &&
+      this.testHost(hostStr) &&
+      this.testPath(pathStr) &&
+      this.testPort(portStr, protoStr)
+    );
+  }
+
+  private getHost(urlStr: string) {
+    const protocolEndPos = urlStr.indexOf('://') + 3;
+    const hostBegPos = protocolEndPos;
+
+    const portBegPos = urlStr.indexOf(':', protocolEndPos);
+    const pathBegPos = urlStr.indexOf('/', protocolEndPos);
+    const queryBegPos = urlStr.indexOf('?', protocolEndPos);
+    const hashBegPos = urlStr.indexOf('?', protocolEndPos);
+
+    let hostEndPos = urlStr.length;
+    if (portBegPos >= 0) {
+      hostEndPos = portBegPos;
+    } else if (pathBegPos >= 0) {
+      hostEndPos = pathBegPos;
+    } else if (queryBegPos >= 0) {
+      hostEndPos = queryBegPos;
+    } else if (hashBegPos >= 0) {
+      hostEndPos = hashBegPos;
     }
 
-    private getHost(urlStr: string) {
-        const protocolEndPos = urlStr.indexOf('://') + 3;
-        const hostBegPos = protocolEndPos;
+    return urlStr.slice(hostBegPos, hostEndPos);
+  }
 
-        const portBegPos = urlStr.indexOf(':', protocolEndPos);
-        const pathBegPos = urlStr.indexOf('/', protocolEndPos);
-        const queryBegPos = urlStr.indexOf('?', protocolEndPos);
-        const hashBegPos = urlStr.indexOf('?', protocolEndPos);
+  testHost(hostStr: string) {
+    const patternSegments = this.getHost(this.pattern).split('.');
 
-        let hostEndPos = urlStr.length;
-        if (portBegPos >= 0) {
-            hostEndPos = portBegPos;
-        } else if (pathBegPos >= 0) {
-            hostEndPos = pathBegPos;
-        } else if (queryBegPos >= 0) {
-            hostEndPos = queryBegPos;
-        } else if (hashBegPos >= 0) {
-            hostEndPos = hashBegPos;
-        }
+    const inputHostSegments = hostStr.split('.');
 
-        return urlStr.slice(hostBegPos, hostEndPos);
+    if (patternSegments.length !== inputHostSegments.length) {
+      return false;
     }
 
-    testHost(hostStr: string) {
-        const patternSegments = this.getHost(this.pattern).split('.');
-
-        const inputHostSegments = hostStr.split('.');
-
-        if (patternSegments.length !== inputHostSegments.length) {
-            return false;
-        }
-
-        for (let i = 0; i < patternSegments.length; i++) {
-            if (patternSegments[i] === '*') {
-                continue;
-            } else if (patternSegments[i] !== inputHostSegments[i]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    private getPath(urlStr: string) {
-        const protocolEndPos = urlStr.indexOf('://') + 3;
-        const hostBegPos = protocolEndPos;
-        const pathBegPos = urlStr.indexOf('/', hostBegPos);
-        if (pathBegPos < 0) {
-            return '';
-        }
-
-        const queryBegPos = urlStr.indexOf('?');
-        const hashBegPos = urlStr.indexOf('#');
-        let pathEndPos = urlStr.length;
-        if (queryBegPos >= 0) {
-            pathEndPos = queryBegPos;
-        } else if (hashBegPos >= 0) {
-            pathEndPos = hashBegPos;
-        }
-
-        return urlStr.slice(pathBegPos, pathEndPos);
-    }
-
-    testPath(pathStr: string) {
-        const patternSegments = this.getPath(this.pattern).split('/');
-        const inputSegments = pathStr.split('/');
-
-        if (patternSegments.length !== inputSegments.length) {
-            return false;
-        }
-
-        for (let i = 0; i < patternSegments.length; i++) {
-            if (patternSegments[i] === '*') {
-                continue;
-            } else if (patternSegments[i] !== inputSegments[i]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    private getPort(urlStr: string) {
-        const protocolEndPos = urlStr.indexOf('/') + 2;
-        const hostBegPos = protocolEndPos;
-
-        let portBegPos = urlStr.indexOf(':', protocolEndPos);
-        if (portBegPos <= 0) {
-            return '';
-        }
-        portBegPos += 1; // the port is after ':'
-
-        let portEndPos = urlStr.length;
-        const pathBegPos = urlStr.indexOf('/', hostBegPos);
-        const queryBegPos = urlStr.indexOf('?');
-        const hashBegPos = urlStr.indexOf('#');
-
-        if (pathBegPos >= 0) {
-            portEndPos = pathBegPos;
-        } else if (queryBegPos >= 0) {
-            portEndPos = queryBegPos;
-        } else if (hashBegPos >= 0) {
-            portEndPos = hashBegPos;
-        }
-
-        return urlStr.slice(portBegPos, portEndPos);
-    }
-
-    testPort(port: string, protocol: string) {
-        if (!this.testProtocol(protocol)) {
-            return false;
-        }
-
-        const portPattern = this.getPort(this.pattern);
-        if (portPattern === '*') {
-            return true;
-        } else if (portPattern === '' || port === '') {
-            const protos = this.getProtocols();
-
-            if (protocol === 'https') {
-                return protos.includes('https') && (
-                    (port === '443' && portPattern === '') ||
-                    (port === '' && portPattern === '443') ||
-                    (port === '' && portPattern === '')
-                );
-            } else if (protocol === 'http') {
-                return protos.includes('http') && (
-                    (port === '80' && portPattern === '') ||
-                    (port === '' && portPattern === '80') ||
-                    (port === '' && portPattern === '')
-                );
-            }
-        }
-
-        return portPattern === port;
-    }
-
-    testProtocol(protocol: string) {
-        const protoPatterns = this.getProtocols();
-
-        for (const pattern of protoPatterns) {
-            if (pattern === '*') {
-                return true;
-            } else if (pattern === protocol) {
-                return true;
-            }
-        }
+    for (let i = 0; i < patternSegments.length; i++) {
+      if (patternSegments[i] === '*') {
+        continue;
+      } else if (patternSegments[i] !== inputHostSegments[i]) {
         return false;
+      }
+    }
+    return true;
+  }
+
+  private getPath(urlStr: string) {
+    const protocolEndPos = urlStr.indexOf('://') + 3;
+    const hostBegPos = protocolEndPos;
+    const pathBegPos = urlStr.indexOf('/', hostBegPos);
+    if (pathBegPos < 0) {
+      return '';
     }
 
-    override toString() {
-        return this.pattern;
+    const queryBegPos = urlStr.indexOf('?');
+    const hashBegPos = urlStr.indexOf('#');
+    let pathEndPos = urlStr.length;
+    if (queryBegPos >= 0) {
+      pathEndPos = queryBegPos;
+    } else if (hashBegPos >= 0) {
+      pathEndPos = hashBegPos;
     }
 
-    update(pattern: string) {
-        this.pattern = pattern;
+    return urlStr.slice(pathBegPos, pathEndPos);
+  }
+
+  testPath(pathStr: string) {
+    const patternSegments = this.getPath(this.pattern).split('/');
+    const inputSegments = pathStr.split('/');
+
+    if (patternSegments.length !== inputSegments.length) {
+      return false;
     }
+
+    for (let i = 0; i < patternSegments.length; i++) {
+      if (patternSegments[i] === '*') {
+        continue;
+      } else if (patternSegments[i] !== inputSegments[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private getPort(urlStr: string) {
+    const protocolEndPos = urlStr.indexOf('/') + 2;
+    const hostBegPos = protocolEndPos;
+
+    let portBegPos = urlStr.indexOf(':', protocolEndPos);
+    if (portBegPos <= 0) {
+      return '';
+    }
+    portBegPos += 1; // the port is after ':'
+
+    let portEndPos = urlStr.length;
+    const pathBegPos = urlStr.indexOf('/', hostBegPos);
+    const queryBegPos = urlStr.indexOf('?');
+    const hashBegPos = urlStr.indexOf('#');
+
+    if (pathBegPos >= 0) {
+      portEndPos = pathBegPos;
+    } else if (queryBegPos >= 0) {
+      portEndPos = queryBegPos;
+    } else if (hashBegPos >= 0) {
+      portEndPos = hashBegPos;
+    }
+
+    return urlStr.slice(portBegPos, portEndPos);
+  }
+
+  testPort(port: string, protocol: string) {
+    if (!this.testProtocol(protocol)) {
+      return false;
+    }
+
+    const portPattern = this.getPort(this.pattern);
+    if (portPattern === '*') {
+      return true;
+    } else if (portPattern === '' || port === '') {
+      const protos = this.getProtocols();
+
+      if (protocol === 'https') {
+        return (
+          protos.includes('https') &&
+          ((port === '443' && portPattern === '') ||
+            (port === '' && portPattern === '443') ||
+            (port === '' && portPattern === ''))
+        );
+      } else if (protocol === 'http') {
+        return (
+          protos.includes('http') &&
+          ((port === '80' && portPattern === '') ||
+            (port === '' && portPattern === '80') ||
+            (port === '' && portPattern === ''))
+        );
+      }
+    }
+
+    return portPattern === port;
+  }
+
+  testProtocol(protocol: string) {
+    const protoPatterns = this.getProtocols();
+
+    for (const pattern of protoPatterns) {
+      if (pattern === '*') {
+        return true;
+      } else if (pattern === protocol) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  override toString() {
+    return this.pattern;
+  }
+
+  update(pattern: string) {
+    this.pattern = pattern;
+  }
 }
 
 export class UrlMatchPatternList<T extends UrlMatchPattern> extends PropertyList<T> {
-    override _kind = 'UrlMatchPatternList';
+  override _kind = 'UrlMatchPatternList';
 
-    constructor(parent: PropertyList<T> | undefined, populate: T[]) {
-        super(UrlMatchPattern, undefined, populate);
-        this.parent = parent;
-    }
+  constructor(parent: PropertyList<T> | undefined, populate: T[]) {
+    super(UrlMatchPattern, undefined, populate);
+    this.parent = parent;
+  }
 
-    static isUrlMatchPatternList(obj: any) {
-        return '_kind' in obj && obj._kind === 'UrlMatchPatternList';
-    }
+  static isUrlMatchPatternList(obj: any) {
+    return '_kind' in obj && obj._kind === 'UrlMatchPatternList';
+  }
 
-    test(urlStr: string) {
-        return this
-            .filter(matchPattern => matchPattern.test(urlStr), {})
-            .length > 0;
-    }
+  test(urlStr: string) {
+    return this.filter(matchPattern => matchPattern.test(urlStr), {}).length > 0;
+  }
 }
 
 export function toUrlObject(url: string | Url): Url {
-    if (!url) {
-        throw Error('Request URL is not specified');
-    }
-    return typeof url === 'string' ? new Url(url) : url;
+  if (!url) {
+    throw Error('Request URL is not specified');
+  }
+  return typeof url === 'string' ? new Url(url) : url;
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/utils.ts b/packages/insomnia-scripting-environment/src/objects/utils.ts
index 2f0282ba89..f3f2c7aef3 100644
--- a/packages/insomnia-scripting-environment/src/objects/utils.ts
+++ b/packages/insomnia-scripting-environment/src/objects/utils.ts
@@ -1,6 +1,3 @@
 export function checkIfUrlIncludesTag(url: string): boolean {
-    return /{%/.test(`${url}`) ||
-        /%}/.test(`${url}`) ||
-        /{{/.test(`${url}`) ||
-        /}}/.test(`${url}`);
+  return /{%/.test(`${url}`) || /%}/.test(`${url}`) || /{{/.test(`${url}`) || /}}/.test(`${url}`);
 }
diff --git a/packages/insomnia-scripting-environment/src/objects/variables.ts b/packages/insomnia-scripting-environment/src/objects/variables.ts
index e4986bfffa..44bbbbf873 100644
--- a/packages/insomnia-scripting-environment/src/objects/variables.ts
+++ b/packages/insomnia-scripting-environment/src/objects/variables.ts
@@ -2,68 +2,64 @@ import { unsupportedError } from './properties';
 import { Property, PropertyList } from './properties';
 
 export interface VariableDefinition {
-    id?: string;
-    key: string;
-    name?: string;
-    value: string;
-    type?: string;
-    disabled?: boolean;
+  id?: string;
+  key: string;
+  name?: string;
+  value: string;
+  type?: string;
+  disabled?: boolean;
 }
 
 export class Variable extends Property {
-    key: string;
-    value: any;
-    type: string;
-    override _kind = 'Variable';
+  key: string;
+  value: any;
+  type: string;
+  override _kind = 'Variable';
 
-    constructor(def?: VariableDefinition) {
-        super();
+  constructor(def?: VariableDefinition) {
+    super();
 
-        this.id = def ? def.id || '' : '';
-        this.key = def ? def.key : '';
-        this.name = def ? def.name : '';
-        this.value = def ? def.value : '';
-        this.type = def && def.type ? def.type : 'Variable';
-        this.disabled = def ? def.disabled : false;
+    this.id = def ? def.id || '' : '';
+    this.key = def ? def.key : '';
+    this.name = def ? def.name : '';
+    this.value = def ? def.value : '';
+    this.type = def && def.type ? def.type : 'Variable';
+    this.disabled = def ? def.disabled : false;
+  }
+
+  static override _index = 'key';
+
+  // unknown usage and unsupported
+  static types() {
+    throw unsupportedError('types');
+  }
+
+  // cast typecasts a value to the Variable.types of this Variable.
+  cast(value: any) {
+    if ('_kind' in value && value._kind === 'Variable') {
+      return value.value;
     }
+    return undefined;
+  }
 
-    static override _index = 'key';
+  get() {
+    return this.value;
+  }
 
-    // unknown usage and unsupported
-    static types() {
-        throw unsupportedError('types');
-    }
-
-    // cast typecasts a value to the Variable.types of this Variable.
-    cast(value: any) {
-        if ('_kind' in value && value._kind === 'Variable') {
-            return value.value;
-        }
-        return undefined;
-    }
-
-    get() {
-        return this.value;
-    }
-
-    set(value: any) {
-        this.value = value;
-    }
+  set(value: any) {
+    this.value = value;
+  }
 }
 
 export class VariableList<T extends Variable> extends PropertyList<T> {
-    override _kind = 'VariableList';
+  override _kind = 'VariableList';
 
-    constructor(parent: PropertyList<T> | undefined, populate: T[]) {
-        super(
-            Variable,
-            undefined,
-            populate
-        );
-        this.parent = parent;
-    }
+  constructor(parent: PropertyList<T> | undefined, populate: T[]) {
+    super(Variable, undefined, populate);
+    this.parent = parent;
+  }
 
-    static isVariableList(obj: any) {
-        return '_kind' in obj && obj._kind === 'VariableList';
-    }
+  static isVariableList(obj: any) {
+    return '_kind' in obj && obj._kind === 'VariableList';
+  }
 }
diff --git a/packages/insomnia-scripting-environment/tsconfig.json b/packages/insomnia-scripting-environment/tsconfig.json
index 92caa82ffa..34e2332196 100644
--- a/packages/insomnia-scripting-environment/tsconfig.json
+++ b/packages/insomnia-scripting-environment/tsconfig.json
@@ -19,17 +19,8 @@
     "verbatimModuleSyntax": true,
     "jsx": "react",
     /* If your code runs in the DOM: */
-    "lib": [
-      "es2023",
-      "dom",
-      "dom.iterable"
-    ],
+    "lib": ["es2023", "dom", "dom.iterable"]
   },
-  "include": [
-    "../insomnia/types"
-  ],
-  "exclude": [
-    "**/__tests__",
-    "node_modules"
-  ]
+  "include": ["../insomnia/types"],
+  "exclude": ["**/__tests__", "node_modules"]
 }
diff --git a/packages/insomnia-smoke-test/playwright/paths.ts b/packages/insomnia-smoke-test/playwright/paths.ts
index c3dd6c0d76..ed81858003 100644
--- a/packages/insomnia-smoke-test/playwright/paths.ts
+++ b/packages/insomnia-smoke-test/playwright/paths.ts
@@ -38,19 +38,24 @@ const pathLookup: Record<string, string | Record<string, string>> = {
 };
 
 let binaryPath: string;
-const platformPath = pathLookup[process.platform]
+const platformPath = pathLookup[process.platform];
 if (typeof platformPath === 'string') {
-  binaryPath = platformPath
+  binaryPath = platformPath;
 } else if (process.arch in platformPath) {
-  binaryPath = platformPath[process.arch]
+  binaryPath = platformPath[process.arch];
 } else {
-  throw new Error(`Cannot find binary path for ${process.platform} ${process.arch}`)
+  throw new Error(`Cannot find binary path for ${process.platform} ${process.arch}`);
 }
 
 export const cwd = path.resolve(__dirname, '..', '..', 'insomnia');
 const repoRoot = path.resolve(__dirname, '..', '..', '..');
 const insomniaBinary = path.join(cwd, 'dist', binaryPath);
-const electronBinary = path.join(repoRoot, 'node_modules', '.bin', process.platform === 'win32' ? 'electron.cmd' : 'electron');
+const electronBinary = path.join(
+  repoRoot,
+  'node_modules',
+  '.bin',
+  process.platform === 'win32' ? 'electron.cmd' : 'electron',
+);
 
 export const executablePath = bundleType() === 'package' ? insomniaBinary : electronBinary;
 
diff --git a/packages/insomnia-smoke-test/playwright/test.ts b/packages/insomnia-smoke-test/playwright/test.ts
index c5d6b4f5d6..720bd2fa02 100644
--- a/packages/insomnia-smoke-test/playwright/test.ts
+++ b/packages/insomnia-smoke-test/playwright/test.ts
@@ -2,13 +2,7 @@
 import { ElectronApplication, test as baseTest, TraceMode } from '@playwright/test';
 import path from 'path';
 
-import {
-  bundleType,
-  cwd,
-  executablePath,
-  mainPath,
-  randomDataPath,
-} from './paths';
+import { bundleType, cwd, executablePath, mainPath, randomDataPath } from './paths';
 
 // Throw an error if the condition fails
 // > Not providing an inline default argument for message as the result is smaller
@@ -97,7 +91,7 @@ export const test = baseTest.extend<{
       INSOMNIA_VAULT_KEY: userConfig.vaultKey || '',
       INSOMNIA_VAULT_SALT: userConfig.vaultSalt || '',
       INSOMNIA_VAULT_SRP_SECRET: userConfig.vaultSrpSecret || '',
-      ...userConfig.session ? { INSOMNIA_SESSION: JSON.stringify(userConfig.session) } : {},
+      ...(userConfig.session ? { INSOMNIA_SESSION: JSON.stringify(userConfig.session) } : {}),
     };
 
     const electronApp = await playwright._electron.launch({
@@ -113,11 +107,15 @@ export const test = baseTest.extend<{
 
     const appContext = electronApp.context();
 
-    const traceMode: TraceMode = typeof trace === 'string' ? trace as TraceMode : trace.mode;
+    const traceMode: TraceMode = typeof trace === 'string' ? (trace as TraceMode) : trace.mode;
 
     const defaultTraceOptions = { screenshots: true, snapshots: true, sources: true };
-    const traceOptions = typeof trace === 'string' ? defaultTraceOptions : { ...defaultTraceOptions, ...trace, mode: undefined };
-    const captureTrace = (traceMode === 'on' || traceMode === 'retain-on-failure' || (traceMode === 'on-first-retry' && testInfo.retry === 1));
+    const traceOptions =
+      typeof trace === 'string' ? defaultTraceOptions : { ...defaultTraceOptions, ...trace, mode: undefined };
+    const captureTrace =
+      traceMode === 'on' ||
+      traceMode === 'retain-on-failure' ||
+      (traceMode === 'on-first-retry' && testInfo.retry === 1);
 
     if (captureTrace) {
       await appContext.tracing.start(traceOptions);
@@ -132,7 +130,11 @@ export const test = baseTest.extend<{
     } finally {
       // set testFailed to true if the test timed out or failed
       testFailed = testFailed || testInfo.status === 'timedOut' || testInfo.status === 'failed';
-      if (traceMode === 'on' || (traceMode === 'retain-on-failure' && testFailed) || (traceMode === 'on-first-retry' && testInfo.retry === 1)) {
+      if (
+        traceMode === 'on' ||
+        (traceMode === 'retain-on-failure' && testFailed) ||
+        (traceMode === 'on-first-retry' && testInfo.retry === 1)
+      ) {
         // Use a different name rather than the default trace.zip to avoid overwriting the trace.
         // Refer: https://github.com/microsoft/playwright/issues/35005
         await appContext.tracing.stop({
@@ -153,46 +155,46 @@ export const test = baseTest.extend<{
 
     await use(page);
   },
-  dataPath: async ({ }, use) => {
+  dataPath: async ({}, use) => {
     const insomniaDataPath = randomDataPath();
 
     await use(insomniaDataPath);
   },
-  userConfig: async ({ }, use) => {
+  userConfig: async ({}, use) => {
     await use({
       skipOnboarding: true,
       publicKey: 'txb/w8DASTpPQqeHE/hpI3ABKzit+pv5n2We5dbtYRo=',
       secretKey: 'Tb1QKsI3wVZxhS8TuQESHB2x7f68PzeTzTMmLpnnFVU=',
       code: 'BTxpIfgXY1VgUpoPpqA25RkCPGQ2MAkZsaY6IZ0bamd0WsYQlJM6iy8PV9hEHS1Gk96SBC6%2BM%2FGhv8IaVl1N6V5wdghHwU2sGKGkW%2Fevx1HiqAUsAqIry8aWRqAkc0n3KmW%2B%2F8lyeHCpy5jhsXqMMqXMbZh8dN1q%2ByRe2C6MJS1A706KbPUhI7PRi%2FsmK0TcNT7lgBKKHRVzPTvjpLcjgzSJFL4K%2BEzgY9Ue4gh0gPw89sM9dV%2F2sAlpw0LA7rF06NyoPhA%3D',
       session: {
-        'id': 'sess_64a477e6b59d43a5a607f84b4f73e3ce',
+        id: 'sess_64a477e6b59d43a5a607f84b4f73e3ce',
         // Expire in 2077
-        'sessionExpiry': new Date(2147483647000),
-        'publicKey': {
-          'alg': 'RSA-OAEP-256',
-          'e': 'AQAB',
-          'ext': true,
-          'key_ops': ['encrypt'],
-          'kty': 'RSA',
-          'n': 'pTQVaUaiqggIldSKm6ib6eFRLLoGj9W-2O4gTbiorR-2b8-ZmKUwQ0F-jgYX71AjYaFn5VjOHOHSP6byNAjN7WzJ6A_Z3tytNraLoZfwK8KdfflOCZiZzQeD3nO8BNgh_zEgCHStU61b6N6bSpCKjbyPkmZcOkJfsz0LJMAxrXvFB-I42WYA2vJKReTJKXeYx4d6L_XGNIoYtmGZit8FldT4AucfQUXgdlKvr4_OZmt6hgjwt_Pjcu-_jO7m589mMWMebfUhjte3Lp1jps0MqTOvgRb0FQf5eoBHnL01OZjvFPDKeqlvoz7II9wFNHIKzSvgAKnyemh6DiyPuIukyQ',
+        sessionExpiry: new Date(2147483647000),
+        publicKey: {
+          alg: 'RSA-OAEP-256',
+          e: 'AQAB',
+          ext: true,
+          key_ops: ['encrypt'],
+          kty: 'RSA',
+          n: 'pTQVaUaiqggIldSKm6ib6eFRLLoGj9W-2O4gTbiorR-2b8-ZmKUwQ0F-jgYX71AjYaFn5VjOHOHSP6byNAjN7WzJ6A_Z3tytNraLoZfwK8KdfflOCZiZzQeD3nO8BNgh_zEgCHStU61b6N6bSpCKjbyPkmZcOkJfsz0LJMAxrXvFB-I42WYA2vJKReTJKXeYx4d6L_XGNIoYtmGZit8FldT4AucfQUXgdlKvr4_OZmt6hgjwt_Pjcu-_jO7m589mMWMebfUhjte3Lp1jps0MqTOvgRb0FQf5eoBHnL01OZjvFPDKeqlvoz7II9wFNHIKzSvgAKnyemh6DiyPuIukyQ',
         },
-        'encPrivateKey': {
-          'iv': '3a1f2bdb8acbf15f469d57a2',
-          't': '904d6b1bc0ece8e5df6fefb9efefda7c',
-          'd': '2a7b0c4beb773fa3e3c2158f0bfa654a88c4041184c3b1e01b4ddd2da2c647244a0d66d258b6abb6a9385251bf5d79e6b03ef35bdfafcb400547f8f88adb8bceb7020f2d873d5a74fb5fc561e7bd67cea0a37c49107bf5c96631374dc44ddb1e4a8b5688dc6560fc6143294ed92c3ad8e1696395dfdf15975aa67b9212366dbfcb31191e4f4fe3559c89a92fb1f0f1cc6cbf90d8a062307fce6e7701f6f5169d9247c56dae79b55fba1e10fde562b971ca708c9a4d87e6e9d9e890b88fa0480360420e610c4e41459570e52ae72f349eadf84fc0a68153722de3280becf8a1762e7faebe964f0ad706991c521feda3440d3e1b22f2c221a80490359879bd47c0d059ace81213c74a1e192dbebd8a80cf58c9eb1fe461a971b88d3899baf4c4ef7141623c93fb4a54758f5e1cf9ee35cd00777fa89b24e4ded57219e770de2670619c6e971935c61ae72e3276cf8db49dfa0e91c68222f02d7e0c69b399af505de7e5a90852d83e0a30934b0362db986f3aaefaaf1a96fef3e8165287a3a7f0ee1e072d9dee3aefb86194e1d877d6b34529d45a70ec4573c35a7fe27833c77c3154b0ad02187e4fcecd408bcf4b29a85a5dc358cb479140f4983fcd936141f581764669651530af97d2b7d9416aea7de67e787f3e29ae3eba6672bcd934dc1e308783aa63a4ab46d48d213cf53ad6bd8828011f5bfa3aa5ee24551c694e829b54c93b1dda6c3ddda04756d68a28bec8d044c8af4147680dc5b972d0ca74299b0ab6306b9e7b99bf0557558df120455a272145b7aa792654730f3d670b76d72408f5ce1cf5fbd453d2903fa72cf26397437854ba8abbb731a8107f6a86a01fa98edc81bb42a4c1330f779e7a0fbd1820eaed78e03e40a996e03884b707556be06fd14ee8f4035469210d1d2bb8f58285fc2ab6de3d3cc0e4e1f40c6d9d24b50dc8e2e2374a0aff52031b3736c2982133bb19dd551ce1f953f4ba02b0cf53382c15752e202c138cb42b2322df103ff17fd886dfd5f992b711673cdf16048c4bff19038138b161c2e1783b85fc7b965a91ac4795fcbfebf827940cacdeae57946863aee027df43b36612f3cb8f34dc44396e87c564bf10f5b1a9dfbd6da3d7f4f65024b0b4f8ce51d01c230840941fc4523b17eb1c2522032f410e8328239a11a15ab755c32945ce52966d5bfb4666909ed2ca04d536e4bf92091563dd44d46cbb35e53c2481400058ab3b52a0280d262551073f61db125ee280e2cc1ec0bdf9c4817824261465011e34c2296411384f7f5e16742157c5520f137631edf498aa39c7c32b107e3634cbeb70feea19a233c8bd939d665135c9f7c1bb33cb47edc58bdbbcde9b0b9eb73a46642e4639289a62638fb7813e1eeaadd105c803de8357236f33c4bcf31a876b5867591af8f165eba0b35cf0b0886af17dab35a6a39f8f576387d6ffb9e677ee46fc0f11ff069a2a068fce441ff8f4125095fad228c2bf45c788d641941ed13c0a16fffcafd7c7eff11bb7550c0b7d54eebdbd2066e3bbdb47aaee2b5f1e499726324a40015458c7de1db0abe872594d8e6802deff7ea9518bdb3a3e46f07139267fd67dc570ba8ab04c2b37ce6a34ec73b802c7052a2eef0cae1b0979322ef86395535db80cf2a9a88aa7c2e5cc28a93612a8dafe1982f741d7cec28a866f6c09dba5b99ead24c3df0ca03c6c5afae41f3d39608a8f49b0d6a0b541a159409791c25ede103eb4f79cfbd0cc9c9aa6b591755c1e9fd07b5b9e38ed85b5939e65d127256f6a4c078f8c9d655c4f072f9cbcfb2e1e17eaa83dc62aaab2a6dc3735ee76ce7a215740f795f1fbe7136c7734ae3714438015e8fc383d63775a8abddb23cbc5f906c046bb0b5b31d492a7c151b40ea82c7c966e25820641c55b343b89d6378f90de5983fa76547e9d6c634effdf019a0fd9b6d3e488a5aa94f0710d517ba4f7c1ed82f9f3072612e953e036c0ec7f3c618368362f6da6f3af76056a66aef914805cc8b628f1c11695f760b535ded9ff66727273ae7e12d67a01243d75f22fec8ed1b043122a211c923aa92ecbbe01dd0d7195c3c0e09a2a6ab3eca354963122d5a0ec16e2b2b81b0ddce6ec0a312c492a96a4fd392f1deb6a1f3318541a3f87e5c9e73ee7edd3b855910f412789e25038108e1eaae04dcfb02b4d958c00c630dc8caa87a40798ce7156d2ade882e68832d39fe8f9bce6a995249a7383013a5093c4af55c3b7232de0f2593d82c30b8dabd0784455037f25f6bb66a6d0d8f72bc7be0dee2d0a8af44bb4e143257d873268d331722c3253ea5c004e72daf04c875e2054f2b4b2bca2979fd046a1e835600045edf2f159d851a540a91a1ab8fbcb64594d21942bbaa2160535d32496ba7ce4a76c6bdeb9bb4c5cab7bed1ae26564058d0be125803d7019b83b3953c4b0cc1f8299c4edcf6a5faa4765092412d368b277689900e71fb5d47581057adaa2dd494e0f66dc1aa16f3741973b0d9ffa1728aeafab84b777394a7afae0f8eabaa6b740f1c60ca26469f0c9356ec880ad6f4dc01b99bd14d7a4bb8afc97662a9e68b0155e4cdf3caa3402819ac6ce562c8fe06edb50a31cfd7a',
-          'ad': '',
+        encPrivateKey: {
+          iv: '3a1f2bdb8acbf15f469d57a2',
+          t: '904d6b1bc0ece8e5df6fefb9efefda7c',
+          d: '2a7b0c4beb773fa3e3c2158f0bfa654a88c4041184c3b1e01b4ddd2da2c647244a0d66d258b6abb6a9385251bf5d79e6b03ef35bdfafcb400547f8f88adb8bceb7020f2d873d5a74fb5fc561e7bd67cea0a37c49107bf5c96631374dc44ddb1e4a8b5688dc6560fc6143294ed92c3ad8e1696395dfdf15975aa67b9212366dbfcb31191e4f4fe3559c89a92fb1f0f1cc6cbf90d8a062307fce6e7701f6f5169d9247c56dae79b55fba1e10fde562b971ca708c9a4d87e6e9d9e890b88fa0480360420e610c4e41459570e52ae72f349eadf84fc0a68153722de3280becf8a1762e7faebe964f0ad706991c521feda3440d3e1b22f2c221a80490359879bd47c0d059ace81213c74a1e192dbebd8a80cf58c9eb1fe461a971b88d3899baf4c4ef7141623c93fb4a54758f5e1cf9ee35cd00777fa89b24e4ded57219e770de2670619c6e971935c61ae72e3276cf8db49dfa0e91c68222f02d7e0c69b399af505de7e5a90852d83e0a30934b0362db986f3aaefaaf1a96fef3e8165287a3a7f0ee1e072d9dee3aefb86194e1d877d6b34529d45a70ec4573c35a7fe27833c77c3154b0ad02187e4fcecd408bcf4b29a85a5dc358cb479140f4983fcd936141f581764669651530af97d2b7d9416aea7de67e787f3e29ae3eba6672bcd934dc1e308783aa63a4ab46d48d213cf53ad6bd8828011f5bfa3aa5ee24551c694e829b54c93b1dda6c3ddda04756d68a28bec8d044c8af4147680dc5b972d0ca74299b0ab6306b9e7b99bf0557558df120455a272145b7aa792654730f3d670b76d72408f5ce1cf5fbd453d2903fa72cf26397437854ba8abbb731a8107f6a86a01fa98edc81bb42a4c1330f779e7a0fbd1820eaed78e03e40a996e03884b707556be06fd14ee8f4035469210d1d2bb8f58285fc2ab6de3d3cc0e4e1f40c6d9d24b50dc8e2e2374a0aff52031b3736c2982133bb19dd551ce1f953f4ba02b0cf53382c15752e202c138cb42b2322df103ff17fd886dfd5f992b711673cdf16048c4bff19038138b161c2e1783b85fc7b965a91ac4795fcbfebf827940cacdeae57946863aee027df43b36612f3cb8f34dc44396e87c564bf10f5b1a9dfbd6da3d7f4f65024b0b4f8ce51d01c230840941fc4523b17eb1c2522032f410e8328239a11a15ab755c32945ce52966d5bfb4666909ed2ca04d536e4bf92091563dd44d46cbb35e53c2481400058ab3b52a0280d262551073f61db125ee280e2cc1ec0bdf9c4817824261465011e34c2296411384f7f5e16742157c5520f137631edf498aa39c7c32b107e3634cbeb70feea19a233c8bd939d665135c9f7c1bb33cb47edc58bdbbcde9b0b9eb73a46642e4639289a62638fb7813e1eeaadd105c803de8357236f33c4bcf31a876b5867591af8f165eba0b35cf0b0886af17dab35a6a39f8f576387d6ffb9e677ee46fc0f11ff069a2a068fce441ff8f4125095fad228c2bf45c788d641941ed13c0a16fffcafd7c7eff11bb7550c0b7d54eebdbd2066e3bbdb47aaee2b5f1e499726324a40015458c7de1db0abe872594d8e6802deff7ea9518bdb3a3e46f07139267fd67dc570ba8ab04c2b37ce6a34ec73b802c7052a2eef0cae1b0979322ef86395535db80cf2a9a88aa7c2e5cc28a93612a8dafe1982f741d7cec28a866f6c09dba5b99ead24c3df0ca03c6c5afae41f3d39608a8f49b0d6a0b541a159409791c25ede103eb4f79cfbd0cc9c9aa6b591755c1e9fd07b5b9e38ed85b5939e65d127256f6a4c078f8c9d655c4f072f9cbcfb2e1e17eaa83dc62aaab2a6dc3735ee76ce7a215740f795f1fbe7136c7734ae3714438015e8fc383d63775a8abddb23cbc5f906c046bb0b5b31d492a7c151b40ea82c7c966e25820641c55b343b89d6378f90de5983fa76547e9d6c634effdf019a0fd9b6d3e488a5aa94f0710d517ba4f7c1ed82f9f3072612e953e036c0ec7f3c618368362f6da6f3af76056a66aef914805cc8b628f1c11695f760b535ded9ff66727273ae7e12d67a01243d75f22fec8ed1b043122a211c923aa92ecbbe01dd0d7195c3c0e09a2a6ab3eca354963122d5a0ec16e2b2b81b0ddce6ec0a312c492a96a4fd392f1deb6a1f3318541a3f87e5c9e73ee7edd3b855910f412789e25038108e1eaae04dcfb02b4d958c00c630dc8caa87a40798ce7156d2ade882e68832d39fe8f9bce6a995249a7383013a5093c4af55c3b7232de0f2593d82c30b8dabd0784455037f25f6bb66a6d0d8f72bc7be0dee2d0a8af44bb4e143257d873268d331722c3253ea5c004e72daf04c875e2054f2b4b2bca2979fd046a1e835600045edf2f159d851a540a91a1ab8fbcb64594d21942bbaa2160535d32496ba7ce4a76c6bdeb9bb4c5cab7bed1ae26564058d0be125803d7019b83b3953c4b0cc1f8299c4edcf6a5faa4765092412d368b277689900e71fb5d47581057adaa2dd494e0f66dc1aa16f3741973b0d9ffa1728aeafab84b777394a7afae0f8eabaa6b740f1c60ca26469f0c9356ec880ad6f4dc01b99bd14d7a4bb8afc97662a9e68b0155e4cdf3caa3402819ac6ce562c8fe06edb50a31cfd7a',
+          ad: '',
         },
-        'symmetricKey': {
-          'alg': 'A256GCM',
-          'ext': true,
-          'k': 'w62OJNWF4G8iWA8ZrTpModiY8dICyHI7ko1vMLb877g=',
-          'key_ops': ['encrypt', 'decrypt'],
-          'kty': 'oct',
+        symmetricKey: {
+          alg: 'A256GCM',
+          ext: true,
+          k: 'w62OJNWF4G8iWA8ZrTpModiY8dICyHI7ko1vMLb877g=',
+          key_ops: ['encrypt', 'decrypt'],
+          kty: 'oct',
         },
-        'email': 'insomnia-user@konghq.com',
-        'accountId': 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
-        'firstName': 'Rick',
-        'lastName': 'Morty',
+        email: 'insomnia-user@konghq.com',
+        accountId: 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
+        firstName: 'Rick',
+        lastName: 'Morty',
       },
     });
   },
diff --git a/packages/insomnia-smoke-test/server/basic-auth.ts b/packages/insomnia-smoke-test/server/basic-auth.ts
index 4f6c6874a5..c0d61066ef 100644
--- a/packages/insomnia-smoke-test/server/basic-auth.ts
+++ b/packages/insomnia-smoke-test/server/basic-auth.ts
@@ -15,8 +15,5 @@ export const basicAuthRouter = express.Router();
 basicAuthRouter.use(basicAuth({ users }));
 
 basicAuthRouter.get('/', (_, res) => {
-  res
-    .status(200)
-    .header('content-type', 'text/plain')
-    .send('basic auth received');
+  res.status(200).header('content-type', 'text/plain').send('basic auth received');
 });
diff --git a/packages/insomnia-smoke-test/server/github-api.ts b/packages/insomnia-smoke-test/server/github-api.ts
index 280b7646e0..441eb7bc97 100644
--- a/packages/insomnia-smoke-test/server/github-api.ts
+++ b/packages/insomnia-smoke-test/server/github-api.ts
@@ -36,13 +36,13 @@ export default (app: Application) => {
 
   app.post('/v1/oauth/github', (_req, res) => {
     res.status(200).send({
-      'access_token': '123456789',
+      access_token: '123456789',
     });
   });
 
   app.post('/v1/oauth/github-app', (_req, res) => {
     res.status(200).send({
-      'access_token': '123456789',
+      access_token: '123456789',
     });
   });
 };
diff --git a/packages/insomnia-smoke-test/server/gitlab-api.ts b/packages/insomnia-smoke-test/server/gitlab-api.ts
index 8396721585..4ea2599bf9 100644
--- a/packages/insomnia-smoke-test/server/gitlab-api.ts
+++ b/packages/insomnia-smoke-test/server/gitlab-api.ts
@@ -3,11 +3,11 @@ import type { Application } from 'express';
 export default (app: Application) => {
   app.post('/gitlab-api/api/graphql', (_req, res) => {
     res.status(200).send({
-      'data': {
-        'currentUser': {
-          'publicEmail': null,
-          'name': 'Mark Kim',
-          'avatarUrl': null,
+      data: {
+        currentUser: {
+          publicEmail: null,
+          name: 'Mark Kim',
+          avatarUrl: null,
         },
       },
     });
@@ -22,18 +22,18 @@ export default (app: Application) => {
 
   app.post('/gitlab-api/oauth/token', (_req, res) => {
     res.status(200).send({
-      'access_token': '123456789',
-      'created_at': 1652246628,
-      'expires_in': 6955,
-      'refresh_token': '1234567891',
+      access_token: '123456789',
+      created_at: 1652246628,
+      expires_in: 6955,
+      refresh_token: '1234567891',
       scope: 'api read_user write_repository read_repository email',
-      'token_type': 'Bearer',
+      token_type: 'Bearer',
     });
   });
 
   app.post('/gitlab-api/oauth/authorize', (_req, res) => {
     res.status(200).send({
-      'access_token': '123456789',
+      access_token: '123456789',
     });
   });
 };
diff --git a/packages/insomnia-smoke-test/server/graphql.ts b/packages/insomnia-smoke-test/server/graphql.ts
index 7137ebe900..76b8241657 100644
--- a/packages/insomnia-smoke-test/server/graphql.ts
+++ b/packages/insomnia-smoke-test/server/graphql.ts
@@ -1,4 +1,11 @@
-import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInt, GraphQLObjectType, GraphQLSchema, GraphQLString } from 'graphql';
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInt,
+  GraphQLObjectType,
+  GraphQLSchema,
+  GraphQLString,
+} from 'graphql';
 
 const TypeVars = new GraphQLObjectType({
   name: 'Vars',
@@ -47,14 +54,14 @@ export const schema = new GraphQLSchema({
       echoNum: {
         type: GraphQLInt,
         args: {
-          'intVar': { type: GraphQLInt },
+          intVar: { type: GraphQLInt },
         },
         resolve: () => 777,
       },
       echoVars: {
         type: TypeVars,
         args: {
-          'vars': { type: InputVars },
+          vars: { type: InputVars },
         },
         resolve: vars => vars,
       },
diff --git a/packages/insomnia-smoke-test/server/grpc.ts b/packages/insomnia-smoke-test/server/grpc.ts
index 2b63dc12e3..b15c790664 100644
--- a/packages/insomnia-smoke-test/server/grpc.ts
+++ b/packages/insomnia-smoke-test/server/grpc.ts
@@ -9,15 +9,13 @@ import fs from 'fs';
 import path from 'path';
 
 const PROTO_PATH = path.resolve('../../packages/insomnia/src/network/grpc/__fixtures__/library/route_guide.proto');
-const packageDefinition = protoLoader.loadSync(
-  PROTO_PATH,
-  {
-    keepCase: true,
-    longs: String,
-    enums: String,
-    defaults: true,
-    oneofs: true,
-  });
+const packageDefinition = protoLoader.loadSync(PROTO_PATH, {
+  keepCase: true,
+  longs: String,
+  enums: String,
+  defaults: true,
+  oneofs: true,
+});
 
 const routeguide = grpc.loadPackageDefinition(packageDefinition).routeguide;
 
@@ -38,8 +36,7 @@ function checkFeature(point: { latitude: any; longitude: any }) {
   // Check if there is already a feature object for the given point
   for (let i = 0; i < featureList.length; i++) {
     feature = featureList[i];
-    if (feature.location.latitude === point.latitude &&
-        feature.location.longitude === point.longitude) {
+    if (feature.location.latitude === point.latitude && feature.location.longitude === point.longitude) {
       return feature;
     }
   }
@@ -71,14 +68,16 @@ const listFeatures: HandleCall<any, any> = (call: any) => {
   const top = Math.max(lo.latitude, hi.latitude);
   const bottom = Math.min(lo.latitude, hi.latitude);
   // For each feature, check if it is in the given bounding box
-  featureList.forEach(function(feature) {
+  featureList.forEach(function (feature) {
     if (feature.name === '') {
       return;
     }
-    if (feature.location.longitude >= left &&
-        feature.location.longitude <= right &&
-        feature.location.latitude >= bottom &&
-        feature.location.latitude <= top) {
+    if (
+      feature.location.longitude >= left &&
+      feature.location.longitude <= right &&
+      feature.location.latitude >= bottom &&
+      feature.location.latitude <= top
+    ) {
       call.write(feature);
     }
   });
@@ -94,9 +93,9 @@ const listFeatures: HandleCall<any, any> = (call: any) => {
  */
 function getDistance(start: { latitude: number; longitude: number }, end: { latitude: number; longitude: number }) {
   function toRadians(num: number) {
-    return num * Math.PI / 180;
+    return (num * Math.PI) / 180;
   }
-  const R = 6371000;  // earth radius in metres
+  const R = 6371000; // earth radius in metres
   const lat1 = toRadians(start.latitude / COORD_FACTOR);
   const lat2 = toRadians(end.latitude / COORD_FACTOR);
   const lon1 = toRadians(start.longitude / COORD_FACTOR);
@@ -104,9 +103,9 @@ function getDistance(start: { latitude: number; longitude: number }, end: { lati
 
   const deltalat = lat2 - lat1;
   const deltalon = lon2 - lon1;
-  const a = Math.sin(deltalat / 2) * Math.sin(deltalat / 2) +
-      Math.cos(lat1) * Math.cos(lat2) *
-      Math.sin(deltalon / 2) * Math.sin(deltalon / 2);
+  const a =
+    Math.sin(deltalat / 2) * Math.sin(deltalat / 2) +
+    Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltalon / 2) * Math.sin(deltalon / 2);
   const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
   return R * c;
 }
@@ -121,7 +120,7 @@ const recordRoute: HandleCall<any, any> = (call: any, callback: any) => {
   let previous: { latitude: number; longitude: number } | null = null;
   // Start a timer
   const startTime = process.hrtime();
-  call.on('data', function(point: any) {
+  call.on('data', function (point: any) {
     pointCount += 1;
     if (checkFeature(point).name !== '') {
       featureCount += 1;
@@ -133,7 +132,7 @@ const recordRoute: HandleCall<any, any> = (call: any, callback: any) => {
     }
     previous = point;
   });
-  call.on('end', function() {
+  call.on('end', function () {
     callback(null, {
       point_count: pointCount,
       feature_count: featureCount,
@@ -162,12 +161,12 @@ function pointKey(point: { latitude: string; longitude: string }) {
  * @param {Duplex} call The stream for incoming and outgoing messages
  */
 const routeChat: HandleCall<any, any> = (call: any) => {
-  call.on('data', function(note: any) {
+  call.on('data', function (note: any) {
     const key = pointKey(note.location);
     /* For each note sent, respond with all previous notes that correspond to
      * the same point */
     if (routeNotes.hasOwnProperty(key)) {
-      routeNotes[key].forEach(function(note: any) {
+      routeNotes[key].forEach(function (note: any) {
         call.write(note);
       });
     } else {
@@ -176,7 +175,7 @@ const routeChat: HandleCall<any, any> = (call: any) => {
     // Then add the new note to the list
     routeNotes[key].push(JSON.parse(JSON.stringify(note)));
   });
-  call.on('end', function() {
+  call.on('end', function () {
     call.end();
   });
 };
@@ -204,7 +203,7 @@ export const startGRPCServer = (port: number) => {
       }
 
       const dbPath = '../../packages/insomnia/src/network/grpc/__fixtures__/library/route_guide_db.json';
-      fs.readFile(path.resolve(dbPath), function(err, data) {
+      fs.readFile(path.resolve(dbPath), function (err, data) {
         if (err) {
           throw err;
         }
@@ -238,7 +237,7 @@ export const startGRPCServer = (port: number) => {
           private_key: serverKey,
         },
       ],
-      true // mTLS enabled, temporarily change to false for local testing if needed
+      true, // mTLS enabled, temporarily change to false for local testing if needed
     );
     serverWithTLS.bindAsync('localhost:50052', serverCredentials, error => {
       if (error) {
diff --git a/packages/insomnia-smoke-test/server/index.ts b/packages/insomnia-smoke-test/server/index.ts
index d4ba7eabf7..a7aca2dbb9 100644
--- a/packages/insomnia-smoke-test/server/index.ts
+++ b/packages/insomnia-smoke-test/server/index.ts
@@ -46,7 +46,7 @@ async function echoHandler(req: any, res: any) {
     data: req.body.toString(),
     cookies: req.cookies,
   });
-};
+}
 
 app.get('/echo', rawParser, echoHandler);
 app.post('/echo', rawParser, echoHandler);
@@ -123,20 +123,27 @@ app.post('/send-event', (request, response) => {
   response.json({ success: true });
 });
 
-startWebSocketServer(app.listen(port, () => {
-  console.log(`Listening at http://localhost:${port}`);
-  console.log(`Listening at ws://localhost:${port}`);
-}));
+startWebSocketServer(
+  app.listen(port, () => {
+    console.log(`Listening at http://localhost:${port}`);
+    console.log(`Listening at ws://localhost:${port}`);
+  }),
+);
 
-startWebSocketServer(createServer({
-  cert: readFileSync(join(__dirname, '../fixtures/certificates/localhost.pem')),
-  key: readFileSync(join(__dirname, '../fixtures/certificates/localhost-key.pem')),
-  ca: readFileSync(join(__dirname, '../fixtures/certificates/rootCA.pem')),
-  requestCert: true,
-  rejectUnauthorized: false,
-}, app).listen(httpsPort, () => {
-  console.log(`Listening at https://localhost:${httpsPort}`);
-  console.log(`Listening at wss://localhost:${httpsPort}`);
-}));
+startWebSocketServer(
+  createServer(
+    {
+      cert: readFileSync(join(__dirname, '../fixtures/certificates/localhost.pem')),
+      key: readFileSync(join(__dirname, '../fixtures/certificates/localhost-key.pem')),
+      ca: readFileSync(join(__dirname, '../fixtures/certificates/rootCA.pem')),
+      requestCert: true,
+      rejectUnauthorized: false,
+    },
+    app,
+  ).listen(httpsPort, () => {
+    console.log(`Listening at https://localhost:${httpsPort}`);
+    console.log(`Listening at wss://localhost:${httpsPort}`);
+  }),
+);
 
 startGRPCServer(grpcPort);
diff --git a/packages/insomnia-smoke-test/server/insomnia-api.ts b/packages/insomnia-smoke-test/server/insomnia-api.ts
index 8ace4791f5..7d342b4133 100644
--- a/packages/insomnia-smoke-test/server/insomnia-api.ts
+++ b/packages/insomnia-smoke-test/server/insomnia-api.ts
@@ -14,47 +14,49 @@ const currentPlan = {
   type: 'team',
 };
 
-const projectsByOrgId = new Map(Object.entries({
-  'org_7ef19d06-5a24-47ca-bc81-3dea011edec2': [
-    {
-      id: 'proj_org_7ef19d06-5a24-47ca-bc81-3dea011edec2',
-      name: 'Personal Workspace',
-    },
-  ],
-  'team_195a6ce0edb1427eb2e8ba7b986072e4': [
-    {
-      id: 'proj_team_195a6ce0edb1427eb2e8ba7b986072e4',
-      name: 'Personal Workspace',
-    },
-  ],
-}));
+const projectsByOrgId = new Map(
+  Object.entries({
+    'org_7ef19d06-5a24-47ca-bc81-3dea011edec2': [
+      {
+        id: 'proj_org_7ef19d06-5a24-47ca-bc81-3dea011edec2',
+        name: 'Personal Workspace',
+      },
+    ],
+    'team_195a6ce0edb1427eb2e8ba7b986072e4': [
+      {
+        id: 'proj_team_195a6ce0edb1427eb2e8ba7b986072e4',
+        name: 'Personal Workspace',
+      },
+    ],
+  }),
+);
 
 const organizations = [
   // Personal organization
   {
-    'id': 'org_7ef19d06-5a24-47ca-bc81-3dea011edec2',
-    'name': 'feb56ab4b19347c4b648c99bfa7db363',
-    'display_name': 'Personal workspace',
-    'branding': {
-      'logo_url': '',
+    id: 'org_7ef19d06-5a24-47ca-bc81-3dea011edec2',
+    name: 'feb56ab4b19347c4b648c99bfa7db363',
+    display_name: 'Personal workspace',
+    branding: {
+      logo_url: '',
     },
-    'metadata': {
-      'organizationType': 'personal',
-      'ownerAccountId': 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
+    metadata: {
+      organizationType: 'personal',
+      ownerAccountId: 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
     },
   },
   // Team Organization: Was a team before the migration now looks like this:
   // Teams migrated to Organizations have an id that starts with team_ and the team id is the same as the organization id
   {
-    'id': 'team_195a6ce0edb1427eb2e8ba7b986072e4',
-    'name': '07df6d95b60e4593af0424c74d96637a-team',
-    'display_name': '🦄 Magic',
-    'branding': {
-      'logo_url': '',
+    id: 'team_195a6ce0edb1427eb2e8ba7b986072e4',
+    name: '07df6d95b60e4593af0424c74d96637a-team',
+    display_name: '🦄 Magic',
+    branding: {
+      logo_url: '',
     },
-    'metadata': {
-      'organizationType': 'team',
-      'ownerAccountId': 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
+    metadata: {
+      organizationType: 'team',
+      ownerAccountId: 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
     },
   },
 ];
@@ -68,72 +70,72 @@ const organizationFeatures = {
 };
 
 const user = {
-  'id': 'email|64f0dd619ab0786da330d83a',
-  'email': 'insomnia-user@konghq.com',
-  'name': 'Rick Morty',
-  'picture': '',
-  'bio': 'My BIO',
-  'github': '',
-  'linkedin': '',
-  'twitter': '',
-  'identities': null,
-  'given_name': '',
-  'family_name': '',
+  id: 'email|64f0dd619ab0786da330d83a',
+  email: 'insomnia-user@konghq.com',
+  name: 'Rick Morty',
+  picture: '',
+  bio: 'My BIO',
+  github: '',
+  linkedin: '',
+  twitter: '',
+  identities: null,
+  given_name: '',
+  family_name: '',
 };
 
 const whoami = {
-  'sessionExpiry': 4838400,
-  'publicKey': {
-    'alg': 'RSA-OAEP-256',
-    'e': 'AQAB',
-    'ext': true,
-    'key_ops': ['encrypt'],
-    'kty': 'RSA',
-    'n': 'pTQVaUaiqggIldSKm6ib6eFRLLoGj9W-2O4gTbiorR-2b8-ZmKUwQ0F-jgYX71AjYaFn5VjOHOHSP6byNAjN7WzJ6A_Z3tytNraLoZfwK8KdfflOCZiZzQeD3nO8BNgh_zEgCHStU61b6N6bSpCKjbyPkmZcOkJfsz0LJMAxrXvFB-I42WYA2vJKReTJKXeYx4d6L_XGNIoYtmGZit8FldT4AucfQUXgdlKvr4_OZmt6hgjwt_Pjcu-_jO7m589mMWMebfUhjte3Lp1jps0MqTOvgRb0FQf5eoBHnL01OZjvFPDKeqlvoz7II9wFNHIKzSvgAKnyemh6DiyPuIukyQ',
+  sessionExpiry: 4838400,
+  publicKey: {
+    alg: 'RSA-OAEP-256',
+    e: 'AQAB',
+    ext: true,
+    key_ops: ['encrypt'],
+    kty: 'RSA',
+    n: 'pTQVaUaiqggIldSKm6ib6eFRLLoGj9W-2O4gTbiorR-2b8-ZmKUwQ0F-jgYX71AjYaFn5VjOHOHSP6byNAjN7WzJ6A_Z3tytNraLoZfwK8KdfflOCZiZzQeD3nO8BNgh_zEgCHStU61b6N6bSpCKjbyPkmZcOkJfsz0LJMAxrXvFB-I42WYA2vJKReTJKXeYx4d6L_XGNIoYtmGZit8FldT4AucfQUXgdlKvr4_OZmt6hgjwt_Pjcu-_jO7m589mMWMebfUhjte3Lp1jps0MqTOvgRb0FQf5eoBHnL01OZjvFPDKeqlvoz7II9wFNHIKzSvgAKnyemh6DiyPuIukyQ',
   },
-  'encPrivateKey': {
-    'iv': '3a1f2bdb8acbf15f469d57a2',
-    't': '904d6b1bc0ece8e5df6fefb9efefda7c',
-    'd': '2a7b0c4beb773fa3e3c2158f0bfa654a88c4041184c3b1e01b4ddd2da2c647244a0d66d258b6abb6a9385251bf5d79e6b03ef35bdfafcb400547f8f88adb8bceb7020f2d873d5a74fb5fc561e7bd67cea0a37c49107bf5c96631374dc44ddb1e4a8b5688dc6560fc6143294ed92c3ad8e1696395dfdf15975aa67b9212366dbfcb31191e4f4fe3559c89a92fb1f0f1cc6cbf90d8a062307fce6e7701f6f5169d9247c56dae79b55fba1e10fde562b971ca708c9a4d87e6e9d9e890b88fa0480360420e610c4e41459570e52ae72f349eadf84fc0a68153722de3280becf8a1762e7faebe964f0ad706991c521feda3440d3e1b22f2c221a80490359879bd47c0d059ace81213c74a1e192dbebd8a80cf58c9eb1fe461a971b88d3899baf4c4ef7141623c93fb4a54758f5e1cf9ee35cd00777fa89b24e4ded57219e770de2670619c6e971935c61ae72e3276cf8db49dfa0e91c68222f02d7e0c69b399af505de7e5a90852d83e0a30934b0362db986f3aaefaaf1a96fef3e8165287a3a7f0ee1e072d9dee3aefb86194e1d877d6b34529d45a70ec4573c35a7fe27833c77c3154b0ad02187e4fcecd408bcf4b29a85a5dc358cb479140f4983fcd936141f581764669651530af97d2b7d9416aea7de67e787f3e29ae3eba6672bcd934dc1e308783aa63a4ab46d48d213cf53ad6bd8828011f5bfa3aa5ee24551c694e829b54c93b1dda6c3ddda04756d68a28bec8d044c8af4147680dc5b972d0ca74299b0ab6306b9e7b99bf0557558df120455a272145b7aa792654730f3d670b76d72408f5ce1cf5fbd453d2903fa72cf26397437854ba8abbb731a8107f6a86a01fa98edc81bb42a4c1330f779e7a0fbd1820eaed78e03e40a996e03884b707556be06fd14ee8f4035469210d1d2bb8f58285fc2ab6de3d3cc0e4e1f40c6d9d24b50dc8e2e2374a0aff52031b3736c2982133bb19dd551ce1f953f4ba02b0cf53382c15752e202c138cb42b2322df103ff17fd886dfd5f992b711673cdf16048c4bff19038138b161c2e1783b85fc7b965a91ac4795fcbfebf827940cacdeae57946863aee027df43b36612f3cb8f34dc44396e87c564bf10f5b1a9dfbd6da3d7f4f65024b0b4f8ce51d01c230840941fc4523b17eb1c2522032f410e8328239a11a15ab755c32945ce52966d5bfb4666909ed2ca04d536e4bf92091563dd44d46cbb35e53c2481400058ab3b52a0280d262551073f61db125ee280e2cc1ec0bdf9c4817824261465011e34c2296411384f7f5e16742157c5520f137631edf498aa39c7c32b107e3634cbeb70feea19a233c8bd939d665135c9f7c1bb33cb47edc58bdbbcde9b0b9eb73a46642e4639289a62638fb7813e1eeaadd105c803de8357236f33c4bcf31a876b5867591af8f165eba0b35cf0b0886af17dab35a6a39f8f576387d6ffb9e677ee46fc0f11ff069a2a068fce441ff8f4125095fad228c2bf45c788d641941ed13c0a16fffcafd7c7eff11bb7550c0b7d54eebdbd2066e3bbdb47aaee2b5f1e499726324a40015458c7de1db0abe872594d8e6802deff7ea9518bdb3a3e46f07139267fd67dc570ba8ab04c2b37ce6a34ec73b802c7052a2eef0cae1b0979322ef86395535db80cf2a9a88aa7c2e5cc28a93612a8dafe1982f741d7cec28a866f6c09dba5b99ead24c3df0ca03c6c5afae41f3d39608a8f49b0d6a0b541a159409791c25ede103eb4f79cfbd0cc9c9aa6b591755c1e9fd07b5b9e38ed85b5939e65d127256f6a4c078f8c9d655c4f072f9cbcfb2e1e17eaa83dc62aaab2a6dc3735ee76ce7a215740f795f1fbe7136c7734ae3714438015e8fc383d63775a8abddb23cbc5f906c046bb0b5b31d492a7c151b40ea82c7c966e25820641c55b343b89d6378f90de5983fa76547e9d6c634effdf019a0fd9b6d3e488a5aa94f0710d517ba4f7c1ed82f9f3072612e953e036c0ec7f3c618368362f6da6f3af76056a66aef914805cc8b628f1c11695f760b535ded9ff66727273ae7e12d67a01243d75f22fec8ed1b043122a211c923aa92ecbbe01dd0d7195c3c0e09a2a6ab3eca354963122d5a0ec16e2b2b81b0ddce6ec0a312c492a96a4fd392f1deb6a1f3318541a3f87e5c9e73ee7edd3b855910f412789e25038108e1eaae04dcfb02b4d958c00c630dc8caa87a40798ce7156d2ade882e68832d39fe8f9bce6a995249a7383013a5093c4af55c3b7232de0f2593d82c30b8dabd0784455037f25f6bb66a6d0d8f72bc7be0dee2d0a8af44bb4e143257d873268d331722c3253ea5c004e72daf04c875e2054f2b4b2bca2979fd046a1e835600045edf2f159d851a540a91a1ab8fbcb64594d21942bbaa2160535d32496ba7ce4a76c6bdeb9bb4c5cab7bed1ae26564058d0be125803d7019b83b3953c4b0cc1f8299c4edcf6a5faa4765092412d368b277689900e71fb5d47581057adaa2dd494e0f66dc1aa16f3741973b0d9ffa1728aeafab84b777394a7afae0f8eabaa6b740f1c60ca26469f0c9356ec880ad6f4dc01b99bd14d7a4bb8afc97662a9e68b0155e4cdf3caa3402819ac6ce562c8fe06edb50a31cfd7a',
-    'ad': '',
+  encPrivateKey: {
+    iv: '3a1f2bdb8acbf15f469d57a2',
+    t: '904d6b1bc0ece8e5df6fefb9efefda7c',
+    d: '2a7b0c4beb773fa3e3c2158f0bfa654a88c4041184c3b1e01b4ddd2da2c647244a0d66d258b6abb6a9385251bf5d79e6b03ef35bdfafcb400547f8f88adb8bceb7020f2d873d5a74fb5fc561e7bd67cea0a37c49107bf5c96631374dc44ddb1e4a8b5688dc6560fc6143294ed92c3ad8e1696395dfdf15975aa67b9212366dbfcb31191e4f4fe3559c89a92fb1f0f1cc6cbf90d8a062307fce6e7701f6f5169d9247c56dae79b55fba1e10fde562b971ca708c9a4d87e6e9d9e890b88fa0480360420e610c4e41459570e52ae72f349eadf84fc0a68153722de3280becf8a1762e7faebe964f0ad706991c521feda3440d3e1b22f2c221a80490359879bd47c0d059ace81213c74a1e192dbebd8a80cf58c9eb1fe461a971b88d3899baf4c4ef7141623c93fb4a54758f5e1cf9ee35cd00777fa89b24e4ded57219e770de2670619c6e971935c61ae72e3276cf8db49dfa0e91c68222f02d7e0c69b399af505de7e5a90852d83e0a30934b0362db986f3aaefaaf1a96fef3e8165287a3a7f0ee1e072d9dee3aefb86194e1d877d6b34529d45a70ec4573c35a7fe27833c77c3154b0ad02187e4fcecd408bcf4b29a85a5dc358cb479140f4983fcd936141f581764669651530af97d2b7d9416aea7de67e787f3e29ae3eba6672bcd934dc1e308783aa63a4ab46d48d213cf53ad6bd8828011f5bfa3aa5ee24551c694e829b54c93b1dda6c3ddda04756d68a28bec8d044c8af4147680dc5b972d0ca74299b0ab6306b9e7b99bf0557558df120455a272145b7aa792654730f3d670b76d72408f5ce1cf5fbd453d2903fa72cf26397437854ba8abbb731a8107f6a86a01fa98edc81bb42a4c1330f779e7a0fbd1820eaed78e03e40a996e03884b707556be06fd14ee8f4035469210d1d2bb8f58285fc2ab6de3d3cc0e4e1f40c6d9d24b50dc8e2e2374a0aff52031b3736c2982133bb19dd551ce1f953f4ba02b0cf53382c15752e202c138cb42b2322df103ff17fd886dfd5f992b711673cdf16048c4bff19038138b161c2e1783b85fc7b965a91ac4795fcbfebf827940cacdeae57946863aee027df43b36612f3cb8f34dc44396e87c564bf10f5b1a9dfbd6da3d7f4f65024b0b4f8ce51d01c230840941fc4523b17eb1c2522032f410e8328239a11a15ab755c32945ce52966d5bfb4666909ed2ca04d536e4bf92091563dd44d46cbb35e53c2481400058ab3b52a0280d262551073f61db125ee280e2cc1ec0bdf9c4817824261465011e34c2296411384f7f5e16742157c5520f137631edf498aa39c7c32b107e3634cbeb70feea19a233c8bd939d665135c9f7c1bb33cb47edc58bdbbcde9b0b9eb73a46642e4639289a62638fb7813e1eeaadd105c803de8357236f33c4bcf31a876b5867591af8f165eba0b35cf0b0886af17dab35a6a39f8f576387d6ffb9e677ee46fc0f11ff069a2a068fce441ff8f4125095fad228c2bf45c788d641941ed13c0a16fffcafd7c7eff11bb7550c0b7d54eebdbd2066e3bbdb47aaee2b5f1e499726324a40015458c7de1db0abe872594d8e6802deff7ea9518bdb3a3e46f07139267fd67dc570ba8ab04c2b37ce6a34ec73b802c7052a2eef0cae1b0979322ef86395535db80cf2a9a88aa7c2e5cc28a93612a8dafe1982f741d7cec28a866f6c09dba5b99ead24c3df0ca03c6c5afae41f3d39608a8f49b0d6a0b541a159409791c25ede103eb4f79cfbd0cc9c9aa6b591755c1e9fd07b5b9e38ed85b5939e65d127256f6a4c078f8c9d655c4f072f9cbcfb2e1e17eaa83dc62aaab2a6dc3735ee76ce7a215740f795f1fbe7136c7734ae3714438015e8fc383d63775a8abddb23cbc5f906c046bb0b5b31d492a7c151b40ea82c7c966e25820641c55b343b89d6378f90de5983fa76547e9d6c634effdf019a0fd9b6d3e488a5aa94f0710d517ba4f7c1ed82f9f3072612e953e036c0ec7f3c618368362f6da6f3af76056a66aef914805cc8b628f1c11695f760b535ded9ff66727273ae7e12d67a01243d75f22fec8ed1b043122a211c923aa92ecbbe01dd0d7195c3c0e09a2a6ab3eca354963122d5a0ec16e2b2b81b0ddce6ec0a312c492a96a4fd392f1deb6a1f3318541a3f87e5c9e73ee7edd3b855910f412789e25038108e1eaae04dcfb02b4d958c00c630dc8caa87a40798ce7156d2ade882e68832d39fe8f9bce6a995249a7383013a5093c4af55c3b7232de0f2593d82c30b8dabd0784455037f25f6bb66a6d0d8f72bc7be0dee2d0a8af44bb4e143257d873268d331722c3253ea5c004e72daf04c875e2054f2b4b2bca2979fd046a1e835600045edf2f159d851a540a91a1ab8fbcb64594d21942bbaa2160535d32496ba7ce4a76c6bdeb9bb4c5cab7bed1ae26564058d0be125803d7019b83b3953c4b0cc1f8299c4edcf6a5faa4765092412d368b277689900e71fb5d47581057adaa2dd494e0f66dc1aa16f3741973b0d9ffa1728aeafab84b777394a7afae0f8eabaa6b740f1c60ca26469f0c9356ec880ad6f4dc01b99bd14d7a4bb8afc97662a9e68b0155e4cdf3caa3402819ac6ce562c8fe06edb50a31cfd7a',
+    ad: '',
   },
-  'symmetricKey': {
-    'alg': 'A256GCM',
-    'ext': true,
-    'k': 'w62OJNWF4G8iWA8ZrTpModiY8dICyHI7ko1vMLb877g=',
-    'key_ops': ['encrypt', 'decrypt'],
-    'kty': 'oct',
+  symmetricKey: {
+    alg: 'A256GCM',
+    ext: true,
+    k: 'w62OJNWF4G8iWA8ZrTpModiY8dICyHI7ko1vMLb877g=',
+    key_ops: ['encrypt', 'decrypt'],
+    kty: 'oct',
   },
-  'email': 'insomnia-user@konghq.com',
-  'accountId': 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
-  'firstName': 'Rick',
-  'lastName': 'Morty',
+  email: 'insomnia-user@konghq.com',
+  accountId: 'acct_64a477e6b59d43a5a607f84b4f73e3ce',
+  firstName: 'Rick',
+  lastName: 'Morty',
 };
 
 const userVerifyA = {
-  'sessionStarterId': 'strt_157355638c2c41d19f2ebc366b2a18e6',
-  'srpB': '4e6480c057c206e68ddf3d2e6dba06f1a27d528af2b15c01058da1d37f0d4bfe70cfb0147d8c2092fb9d276f46a114ea3ad9ef2564c2c4ca39e2b82387b0c9ca236717a719dd793feda4392bf7c928ff0728f8a8abe89d6be29d8dc7ab285e12ab4e04e7cb309ddf585c97eb15e7181a96f4ecb73bd0cf3c476a2f9869e3f907107a6419bbc76990a761f1e7b073dffe9c295e06324b41740bde2627221f135c3ef3cb49851d30370c5d9d96d47decc849740a9bc4e1c2c1169dcbd2bd1213a5f87310332c343c1340644d172e01f2e21c71184d69c48faf6eb7f4cac5f56a68747b202314f7f05dc24c728f2bef0d845d3b7bc1b381d5871c8fda153334e353',
+  sessionStarterId: 'strt_157355638c2c41d19f2ebc366b2a18e6',
+  srpB: '4e6480c057c206e68ddf3d2e6dba06f1a27d528af2b15c01058da1d37f0d4bfe70cfb0147d8c2092fb9d276f46a114ea3ad9ef2564c2c4ca39e2b82387b0c9ca236717a719dd793feda4392bf7c928ff0728f8a8abe89d6be29d8dc7ab285e12ab4e04e7cb309ddf585c97eb15e7181a96f4ecb73bd0cf3c476a2f9869e3f907107a6419bbc76990a761f1e7b073dffe9c295e06324b41740bde2627221f135c3ef3cb49851d30370c5d9d96d47decc849740a9bc4e1c2c1169dcbd2bd1213a5f87310332c343c1340644d172e01f2e21c71184d69c48faf6eb7f4cac5f56a68747b202314f7f05dc24c728f2bef0d845d3b7bc1b381d5871c8fda153334e353',
 };
 
 const userVerifyM1 = {
-  'srpM2': 'f0f748c3bdc4dc3f1404b74cebd10d0c7ce20c6107a0ce7f5888c04219f1a594',
+  srpM2: 'f0f748c3bdc4dc3f1404b74cebd10d0c7ce20c6107a0ce7f5888c04219f1a594',
 };
 
 const allRoles = [
   {
-    'id': 'role_d32b9d6c-1fb2-4ac1-b780-b4c15074d6cb',
-    'name': 'owner',
-    'description': 'Owner can manage the organization and also delete it.',
+    id: 'role_d32b9d6c-1fb2-4ac1-b780-b4c15074d6cb',
+    name: 'owner',
+    description: 'Owner can manage the organization and also delete it.',
   },
   {
-    'id': 'role_013aeb67-15c9-42c5-bcd0-5c70a33f8719',
-    'name': 'admin',
-    'description': 'Admin can only manage the organization.',
+    id: 'role_013aeb67-15c9-42c5-bcd0-5c70a33f8719',
+    name: 'admin',
+    description: 'Admin can only manage the organization.',
   },
   {
-    'id': 'role_3fbb17e4-249c-47d5-a5ee-b7f1f43a9c63',
-    'name': 'member',
-    'description': 'Member cannot manage the organization.',
+    id: 'role_3fbb17e4-249c-47d5-a5ee-b7f1f43a9c63',
+    name: 'member',
+    description: 'Member cannot manage the organization.',
   },
 ];
 
@@ -163,105 +165,101 @@ const userPermissions = {
 };
 
 const orgInfo = {
-  'id': 'org_3d314c35-b9ca-4aec-b57d-04cea38da05c',
-  'name': 'Sync',
-  'display_name': 'Sync',
-  'branding': {
-    'logo_url': 'https://d2evto68nv31gd.cloudfront.net/org_98e187f8-a753-4abf-b0b2-58cdb852eba6',
+  id: 'org_3d314c35-b9ca-4aec-b57d-04cea38da05c',
+  name: 'Sync',
+  display_name: 'Sync',
+  branding: {
+    logo_url: 'https://d2evto68nv31gd.cloudfront.net/org_98e187f8-a753-4abf-b0b2-58cdb852eba6',
   },
-  'metadata': {
-    'organizationType': 'team',
-    'ownerAccountId': 'acct_e9cf786dc67b4dbc8c002359b3cc3d70',
+  metadata: {
+    organizationType: 'team',
+    ownerAccountId: 'acct_e9cf786dc67b4dbc8c002359b3cc3d70',
   },
 };
 
 const currentRole = {
-  'roleId': 'role_d32b9d6c-1fb2-4ac1-b780-b4c15074d6cb',
-  'name': 'owner',
-  'description': 'Owner can manage the organization and also delete it.',
+  roleId: 'role_d32b9d6c-1fb2-4ac1-b780-b4c15074d6cb',
+  name: 'owner',
+  description: 'Owner can manage the organization and also delete it.',
 };
 
 const storageRule = {
-  'enableCloudSync': true,
-  'enableGitSync': true,
-  'enableLocalVault': true,
-  'isOverridden': false
+  enableCloudSync: true,
+  enableGitSync: true,
+  enableLocalVault: true,
+  isOverridden: false,
 };
 
 const members = {
-  'start': 0,
-  'limit': 0,
-  'length': 0,
-  'total': 2,
-  'next': '',
-  'members': [
+  start: 0,
+  limit: 0,
+  length: 0,
+  total: 2,
+  next: '',
+  members: [
     {
-      'user_id': 'acct_e9cf786dc67b4dbc8c002359b3cc3d70',
-      'picture': 'https://s.gravatar.com/avatar/5301bf735ebace330bb801abb593dc78?s=480\u0026r=pg\u0026d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fwe.png',
-      'name': 'wei.yao+2@konghq.com ',
-      'email': 'wei.yao+2@konghq.com',
-      'role_name': 'owner',
-      'created': '2024-08-28T07:02:04.341983Z',
+      user_id: 'acct_e9cf786dc67b4dbc8c002359b3cc3d70',
+      picture:
+        'https://s.gravatar.com/avatar/5301bf735ebace330bb801abb593dc78?s=480\u0026r=pg\u0026d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fwe.png',
+      name: 'wei.yao+2@konghq.com ',
+      email: 'wei.yao+2@konghq.com',
+      role_name: 'owner',
+      created: '2024-08-28T07:02:04.341983Z',
     },
     {
-      'user_id': 'acct_f883f98dbb9945fba7bb23925361e02a',
-      'picture': 'https://s.gravatar.com/avatar/fe822a9c78b8154da82635055895e6e6?s=480\u0026r=pg\u0026d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fwe.png',
-      'name': 'wei.yao+3@konghq.com ',
-      'email': 'wei.yao+3@konghq.com',
-      'role_name': 'member',
-      'created': '2024-09-12T11:40:43.168144Z',
+      user_id: 'acct_f883f98dbb9945fba7bb23925361e02a',
+      picture:
+        'https://s.gravatar.com/avatar/fe822a9c78b8154da82635055895e6e6?s=480\u0026r=pg\u0026d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fwe.png',
+      name: 'wei.yao+3@konghq.com ',
+      email: 'wei.yao+3@konghq.com',
+      role_name: 'member',
+      created: '2024-09-12T11:40:43.168144Z',
     },
   ],
 };
 
 const invites = {
-  'start': 0,
-  'limit': 3,
-  'length': 0,
-  'total': 3,
-  'next': '',
-  'invitations': [
+  start: 0,
+  limit: 3,
+  length: 0,
+  total: 3,
+  next: '',
+  invitations: [
     {
-      'id': 'uinv_1dmvK1rTehbiBV85',
-      'inviter': {
-        'name': 'wei.yao+2@konghq.com ',
+      id: 'uinv_1dmvK1rTehbiBV85',
+      inviter: {
+        name: 'wei.yao+2@konghq.com ',
       },
-      'invitee': {
-        'email': 'wei.yao@konghq.com',
+      invitee: {
+        email: 'wei.yao@konghq.com',
       },
-      'created_at': '2024-09-14T10:16:10.513Z',
-      'expires_at': '2024-09-21T10:16:10.513Z',
-      'roles': [
-        'member',
-      ],
+      created_at: '2024-09-14T10:16:10.513Z',
+      expires_at: '2024-09-21T10:16:10.513Z',
+      roles: ['member'],
     },
     {
-      'id': 'uinv_T9uaMMeoRQQVKF2E',
-      'inviter': {
-        'name': 'wei.yao+2@konghq.com ',
+      id: 'uinv_T9uaMMeoRQQVKF2E',
+      inviter: {
+        name: 'wei.yao+2@konghq.com ',
       },
-      'invitee': {
-        'email': 'wei.yao+6@konghq.com',
+      invitee: {
+        email: 'wei.yao+6@konghq.com',
       },
-      'created_at': '2024-09-12T10:33:45.320Z',
-      'expires_at': '2024-09-19T10:33:45.320Z',
-      'roles': [
-        'member',
-      ],
+      created_at: '2024-09-12T10:33:45.320Z',
+      expires_at: '2024-09-19T10:33:45.320Z',
+      roles: ['member'],
     },
     {
-      'id': 'uinv_TIYVQQC2aH7Ev5hW',
-      'inviter': {
-        'name': 'wei.yao+2@konghq.com ',
+      id: 'uinv_TIYVQQC2aH7Ev5hW',
+      inviter: {
+        name: 'wei.yao+2@konghq.com ',
       },
-      'invitee': {
-        'email': 'wei.yao+4@konghq.com',
+      invitee: {
+        email: 'wei.yao+4@konghq.com',
       },
-      'created_at': '2024-09-12T10:03:51.638Z',
-      'expires_at': '2024-09-19T10:03:51.638Z',
-      'roles': [
-        'member',
-      ],
+      created_at: '2024-09-12T10:03:51.638Z',
+      expires_at: '2024-09-19T10:03:51.638Z',
+      roles: ['member'],
     },
   ],
 };
@@ -271,19 +269,15 @@ interface CollaboratorSearchResultItem {
   picture: string;
   type: CollaboratorType;
   name: string;
-};
+}
 
 interface EmailsList {
   invitesCount: number;
   membersCount: number;
   groupsCount: number;
-};
+}
 
-const getEmailsForInviteSearch = ({
-  invitesCount = 0,
-  membersCount = 0,
-  groupsCount = 0,
-}: EmailsList) => {
+const getEmailsForInviteSearch = ({ invitesCount = 0, membersCount = 0, groupsCount = 0 }: EmailsList) => {
   const emails: CollaboratorSearchResultItem[] = [];
 
   for (let i = 0; i < groupsCount; i++) {
@@ -332,11 +326,7 @@ const OWNER_ROLE_ID = 'role_b3cf4fed-9208-497a-93c6-ae1a82b7b889';
 const ADMIN_ROLE_ID = 'role_1c7938bc-c53b-49a1-819e-72f0c3a5baa6';
 const MEMBER_ROLE_ID = 'role_4c924f55-7706-4de8-94ab-0a2085890641';
 
-const getCollaborators = ({
-  invitesCount = 0,
-  membersCount = 0,
-  groupsCount = 0,
-}: EmailsList) => {
+const getCollaborators = ({ invitesCount = 0, membersCount = 0, groupsCount = 0 }: EmailsList) => {
   const collaborators: Collaborator[] = [];
 
   for (let i = 0; i < groupsCount; i++) {
@@ -507,10 +497,7 @@ export default (app: Application) => {
         name: _req.body.name,
       };
 
-      const projects = [
-        ...(projectsByOrgId.get(personalOrg.id) || []),
-        newProject,
-      ];
+      const projects = [...(projectsByOrgId.get(personalOrg.id) || []), newProject];
 
       projectsByOrgId.set(personalOrg.id, projects);
       res.status(200).send({ ...newProject, organizationId: personalOrg.id });
@@ -529,17 +516,14 @@ export default (app: Application) => {
       name: _req.body.name,
     };
 
-    const projects = [
-      ...(projectsByOrgId.get(organization.id) || []),
-      newProject,
-    ];
+    const projects = [...(projectsByOrgId.get(organization.id) || []), newProject];
 
     projectsByOrgId.set(organization.id, projects);
     res.status(200).send({ ...newProject, organizationId: organization.id });
   });
 
   app.post('/v1/organizations/:organizationId/collaborators', (_req, res) => {
-    res.json({ 'data': [] });
+    res.json({ data: [] });
   });
 
   app.get('/v1/organizations/roles', (_req, res) => {
@@ -576,36 +560,41 @@ export default (app: Application) => {
 
   app.post('/v1/desktop/organizations/:organizationId/collaborators/start-adding', (_req, res) => {
     res.json({
-      'acct_2346c8e88dae47e2a1a5cae04dc68ea3': {
-        'accountId': 'acct_2346c8e88dae47e2a1a5cae04dc68ea3',
-        'publicKey': '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"o7QI0X9cue5ErinBTTz24YuTXGCbQQfhuqXKEq8xpBinqL8lW0CgTe3HqDDyGN6Ip3kE2wCCBLNTTheSS3FB0172VhsqE2mnlBsopfGWbNmFT-cT517464u9yrsFK2ywVDURDDjdh2BSl1T-3axy1P74BjvcOz7nzlAMNfT8Wp41Dwzb5o9-HPU_1nJQYzOb1zJlV1pwKzeufq81tNecT7td1QB3mnXhJAFFbRINiGu-uIaP7gl-J4ICOTh0Tjzzn7fKC-3EUbfLRvFUZBtRcZncWa5OjuGB5DhgHj8mcWvGyP_3gKzvOB2b4piE6N3NnbwO9-skIw5MdY-kQMvJLQ=="}',
-        'autoLinked': false,
+      acct_2346c8e88dae47e2a1a5cae04dc68ea3: {
+        accountId: 'acct_2346c8e88dae47e2a1a5cae04dc68ea3',
+        publicKey:
+          '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"o7QI0X9cue5ErinBTTz24YuTXGCbQQfhuqXKEq8xpBinqL8lW0CgTe3HqDDyGN6Ip3kE2wCCBLNTTheSS3FB0172VhsqE2mnlBsopfGWbNmFT-cT517464u9yrsFK2ywVDURDDjdh2BSl1T-3axy1P74BjvcOz7nzlAMNfT8Wp41Dwzb5o9-HPU_1nJQYzOb1zJlV1pwKzeufq81tNecT7td1QB3mnXhJAFFbRINiGu-uIaP7gl-J4ICOTh0Tjzzn7fKC-3EUbfLRvFUZBtRcZncWa5OjuGB5DhgHj8mcWvGyP_3gKzvOB2b4piE6N3NnbwO9-skIw5MdY-kQMvJLQ=="}',
+        autoLinked: false,
       },
-      'acct_2a1f5086018442b98fbb15120b75a27e': {
-        'accountId': 'acct_2a1f5086018442b98fbb15120b75a27e',
-        'publicKey': '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"nvmA4jWOAUiopX7Ct9Z5mH6mmTB7I4SlSgDNCMtVxHKjEEegXuxTqkScklHnrZCT7ohmWY-6ouJW4ocjln3Falu8lxxB0V7YqBrxgf81lKlDIGr5f0VYp-R9JSBtR6btVj3xV-3I3APGH5lRBW0VGTdgrBaRAl7o9_4hy7xLSy_hqgqdH2-CS2gEZfRjN-1kjSI4nvqD1BSMfyWhu-pbhP6WdhmOa3JkWLPRtxQInv14Kp1-gWjsAfXYOEvldTH4DvCGYkvEBYvSr9FQ6NQKJFOHho4NAyXJhagvuqwc134XuwiFDgCmK0bh1jXR2fy-OR255S0NseArZPkY3l2Tjw=="}',
-        'autoLinked': false,
+      acct_2a1f5086018442b98fbb15120b75a27e: {
+        accountId: 'acct_2a1f5086018442b98fbb15120b75a27e',
+        publicKey:
+          '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"nvmA4jWOAUiopX7Ct9Z5mH6mmTB7I4SlSgDNCMtVxHKjEEegXuxTqkScklHnrZCT7ohmWY-6ouJW4ocjln3Falu8lxxB0V7YqBrxgf81lKlDIGr5f0VYp-R9JSBtR6btVj3xV-3I3APGH5lRBW0VGTdgrBaRAl7o9_4hy7xLSy_hqgqdH2-CS2gEZfRjN-1kjSI4nvqD1BSMfyWhu-pbhP6WdhmOa3JkWLPRtxQInv14Kp1-gWjsAfXYOEvldTH4DvCGYkvEBYvSr9FQ6NQKJFOHho4NAyXJhagvuqwc134XuwiFDgCmK0bh1jXR2fy-OR255S0NseArZPkY3l2Tjw=="}',
+        autoLinked: false,
       },
-      'acct_6694e55cce2c4dacb69c86844ba92d91': {
-        'accountId': 'acct_6694e55cce2c4dacb69c86844ba92d91',
-        'publicKey': '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"wCd42bJqAZz5lRMk8MdMoF35ga9yhIjirMUhUXXKvA29LUYGsT6J_LxF6pXWV7CSZdxZPrf8Ur8L2AC7gz0ESHfV-uAVPBFnPrGBTiiHTBCDAtkt8tW3hqullJxfLS8PsGL6IYGYloq9gbKXiz-u37ba282vYQbbzkWO_382QJKS6eYAlE5JOpxmtNl7r5a3Okxz8JekBN5WhZrxEQzOv7ov7zmmRZPBgCm3Xo7RzAuUpBam1EkO5UvGL3DEjnc_Kx7R9jVbmLgDcryJDooKiCVLWv-tyg9H5QYMVd76uxAcQE9fJNoxSX-UU-Tu78-6CHk68IyTa2Rf4BwvSZJw-Q=="}',
-        'autoLinked': false,
+      acct_6694e55cce2c4dacb69c86844ba92d91: {
+        accountId: 'acct_6694e55cce2c4dacb69c86844ba92d91',
+        publicKey:
+          '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"wCd42bJqAZz5lRMk8MdMoF35ga9yhIjirMUhUXXKvA29LUYGsT6J_LxF6pXWV7CSZdxZPrf8Ur8L2AC7gz0ESHfV-uAVPBFnPrGBTiiHTBCDAtkt8tW3hqullJxfLS8PsGL6IYGYloq9gbKXiz-u37ba282vYQbbzkWO_382QJKS6eYAlE5JOpxmtNl7r5a3Okxz8JekBN5WhZrxEQzOv7ov7zmmRZPBgCm3Xo7RzAuUpBam1EkO5UvGL3DEjnc_Kx7R9jVbmLgDcryJDooKiCVLWv-tyg9H5QYMVd76uxAcQE9fJNoxSX-UU-Tu78-6CHk68IyTa2Rf4BwvSZJw-Q=="}',
+        autoLinked: false,
       },
-      'acct_72196d3295b243b48ea4de15391873b7': {
-        'accountId': 'acct_72196d3295b243b48ea4de15391873b7',
-        'publicKey': '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"94S0IWkw5RgnhJy1Dspynt1gsRnOrG_A5UqI2sbp8fNCdlU9Z0M-r9O-ern0Wgupxxqt8s3xpQzaRYSPcCOK4z9F-w2MT6wIKn7EKKWCpXa94pra4J5abVukwtbPILIi9-uKu8RisnaeYT82OfZKAaQi-J24yzRI7qYLyS0GCrSxWgr1-wVzeRrE8gnwQU677TVAyGDTioz3EQ2-pB4fTkXdrBlVZ8qQkruwcTJ--rr550MD1cRK95J0jT1qGn8e0bTMW5lHP3dZH7vveFj1RP3cD7jnO6b3pD7jhDaMLJqXw0Nvxru__lToP-_r054Ea8ffEWVjygtqvplxq4R3Cw=="}',
-        'autoLinked': false,
+      acct_72196d3295b243b48ea4de15391873b7: {
+        accountId: 'acct_72196d3295b243b48ea4de15391873b7',
+        publicKey:
+          '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"94S0IWkw5RgnhJy1Dspynt1gsRnOrG_A5UqI2sbp8fNCdlU9Z0M-r9O-ern0Wgupxxqt8s3xpQzaRYSPcCOK4z9F-w2MT6wIKn7EKKWCpXa94pra4J5abVukwtbPILIi9-uKu8RisnaeYT82OfZKAaQi-J24yzRI7qYLyS0GCrSxWgr1-wVzeRrE8gnwQU677TVAyGDTioz3EQ2-pB4fTkXdrBlVZ8qQkruwcTJ--rr550MD1cRK95J0jT1qGn8e0bTMW5lHP3dZH7vveFj1RP3cD7jnO6b3pD7jhDaMLJqXw0Nvxru__lToP-_r054Ea8ffEWVjygtqvplxq4R3Cw=="}',
+        autoLinked: false,
       },
-      'acct_fe023b1398ab48fd8f9d3dfb622f5bf6': {
-        'accountId': 'acct_fe023b1398ab48fd8f9d3dfb622f5bf6',
-        'publicKey': '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"s0W6IbaPmPaMgzf2-rGOffm4tNg8_ZykiX2C6ZgFdC-GsMGiF08pSjD7UfGTPSTIWFv4Ncz6D0J8wbFBa87IYTuIZhewbNAqRcX1eu_g0-4dNIw9KqhvIoy_O-r-MT1T11TuU5gWWyHw8mY2Aax9Z_JDdDMQc-dP_FqxGCTIHfe52xQNaCL3AgMp0nU5sDUp_vo3YXSWk0yuERqQ9TMcB9l27hQhbHZHDfsdHTodXutbBG5MwpcDBppriBVlMVjY8M7QHt61C7KF5mhgniEd2msF0bAZZaVz1ibZ9QNdFHHPrdfLLQvPyZFD4m8a7Wt0Qcq9FfrFubWv1208Ocet3Q=="}',
-        'autoLinked': false,
+      acct_fe023b1398ab48fd8f9d3dfb622f5bf6: {
+        accountId: 'acct_fe023b1398ab48fd8f9d3dfb622f5bf6',
+        publicKey:
+          '{"alg":"RSA-OAEP-256","e":"AQAB","ext":true,"key_ops":["encrypt"],"kty":"RSA","n":"s0W6IbaPmPaMgzf2-rGOffm4tNg8_ZykiX2C6ZgFdC-GsMGiF08pSjD7UfGTPSTIWFv4Ncz6D0J8wbFBa87IYTuIZhewbNAqRcX1eu_g0-4dNIw9KqhvIoy_O-r-MT1T11TuU5gWWyHw8mY2Aax9Z_JDdDMQc-dP_FqxGCTIHfe52xQNaCL3AgMp0nU5sDUp_vo3YXSWk0yuERqQ9TMcB9l27hQhbHZHDfsdHTodXutbBG5MwpcDBppriBVlMVjY8M7QHt61C7KF5mhgniEd2msF0bAZZaVz1ibZ9QNdFHHPrdfLLQvPyZFD4m8a7Wt0Qcq9FfrFubWv1208Ocet3Q=="}',
+        autoLinked: false,
       },
     });
   });
 
   app.get('/v1/organizations/:organizationId/my-project-keys', (_req, res) => {
-    res.json({ 'projectKeys': [], 'members': [] });
+    res.json({ projectKeys: [], members: [] });
   });
 
   app.post('/v1/organizations/:organizationId/reconcile-keys', (_req, res) => {
diff --git a/packages/insomnia-smoke-test/server/oauth.ts b/packages/insomnia-smoke-test/server/oauth.ts
index 2daeb692ec..61f2040311 100644
--- a/packages/insomnia-smoke-test/server/oauth.ts
+++ b/packages/insomnia-smoke-test/server/oauth.ts
@@ -80,26 +80,19 @@ export const oauthRoutes = async (port: number) => {
       },
     ],
     pkce: {
-      methods: [
-        'S256',
-        'plain',
-      ],
+      methods: ['S256', 'plain'],
       required: (_, client) => {
         // Require PKCE for the PKCE client id
         return client.clientId === clientIDAuthorizationCodePKCE;
       },
     },
-    responseTypes: [
-      'code',
-      'id_token', 'id_token token',
-      'none',
-    ],
+    responseTypes: ['code', 'id_token', 'id_token token', 'none'],
     issueRefreshToken: () => {
       return false;
     },
     // https://github.com/panva/node-oidc-provider/blob/main/recipes/skip_consent.md
     loadExistingGrant: async ctx => {
-      const grantId = (ctx.oidc.result?.consent?.grantId) || (ctx.oidc.session!.grantIdFor(ctx.oidc.client!.clientId));
+      const grantId = ctx.oidc.result?.consent?.grantId || ctx.oidc.session!.grantIdFor(ctx.oidc.client!.clientId);
 
       if (grantId) {
         const grant = await ctx.oidc.provider.Grant.find(grantId);
@@ -138,32 +131,21 @@ export const oauthRoutes = async (port: number) => {
   oauthRouter.get('/id-token', async (req, res) => {
     const client = await oidc.Client.find(clientIDImplicit);
     if (!client) {
-      res
-        .status(500)
-        .header('Content-Type', 'text/plain')
-        .send('Client not found');
+      res.status(500).header('Content-Type', 'text/plain').send('Client not found');
       return;
     }
 
     const authorizationHeader = req.header('Authorization');
     if (!authorizationHeader) {
-      res
-        .status(400)
-        .header('Content-Type', 'text/plain')
-        .send('Missing Authorization header');
+      res.status(400).header('Content-Type', 'text/plain').send('Missing Authorization header');
       return;
     }
 
     try {
       const validated = await oidc.IdToken.validate(extractToken(authorizationHeader), client);
-      res
-        .status(200)
-        .json(validated);
+      res.status(200).json(validated);
     } catch (err) {
-      res
-        .status(500)
-        .header('Content-Type', 'text/plain')
-        .send('Invalid authorization header');
+      res.status(500).header('Content-Type', 'text/plain').send('Invalid authorization header');
     }
   });
 
@@ -171,32 +153,22 @@ export const oauthRoutes = async (port: number) => {
   oauthRouter.get('/client-credential', async (req, res) => {
     const authorizationHeader = req.header('Authorization');
     if (!authorizationHeader) {
-      res
-        .status(400)
-        .header('Content-Type', 'text/plain')
-        .send('Missing Authorization header');
+      res.status(400).header('Content-Type', 'text/plain').send('Missing Authorization header');
       return;
     }
 
     const clientCredentials = await oidc.ClientCredentials.find(extractToken(authorizationHeader));
     if (!clientCredentials) {
-      res
-        .status(400)
-        .header('Content-Type', 'text/plain')
-        .send('Invalid client credentials');
+      res.status(400).header('Content-Type', 'text/plain').send('Invalid client credentials');
       return;
     }
 
-    res
-      .status(200)
-      .json(clientCredentials);
+    res.status(200).json(clientCredentials);
   });
 
   oauthRouter.get('/interaction/:uid', async (req, res, next) => {
     try {
-      const {
-        uid, prompt,
-      } = await oidc.interactionDetails(req, res);
+      const { uid, prompt } = await oidc.interactionDetails(req, res);
 
       switch (prompt.name) {
         case 'login': {
@@ -227,10 +199,7 @@ export const oauthRoutes = async (port: number) => {
     try {
       await oidc.interactionDetails(req, res);
 
-      const account = await (oidc.Account as any).findAccount(
-        null,
-        req.body.login,
-      );
+      const account = await (oidc.Account as any).findAccount(null, req.body.login);
 
       const result = {
         login: {
@@ -267,64 +236,65 @@ function allowLocalhostImplicit(oidc: Provider) {
 // https://github.com/panva/node-oidc-provider/tree/main/docs#password-grant-type-ropc
 const parameters = ['username', 'password', 'scope'];
 function registerROPC(oidc: Provider) {
-  oidc.registerGrantType('password', async (ctx, next) => {
-    const params = ctx.oidc.params;
+  oidc.registerGrantType(
+    'password',
+    async (ctx, next) => {
+      const params = ctx.oidc.params;
 
-    if (!params) {
-      throw new Error('invalid params provided');
-    }
+      if (!params) {
+        throw new Error('invalid params provided');
+      }
 
-    if (!ctx.oidc.client) {
-      throw new Error('invalid client provided');
-    }
+      if (!ctx.oidc.client) {
+        throw new Error('invalid client provided');
+      }
 
-    if (typeof params.username !== 'string' || typeof params.password !== 'string') {
-      throw new Error('invalid credentials provided');
-    }
+      if (typeof params.username !== 'string' || typeof params.password !== 'string') {
+        throw new Error('invalid credentials provided');
+      }
 
-    const account = await ctx.oidc.provider.Account.findAccount(
-      ctx,
-      params.username
-    );
-    if (!account) {
-      throw new Error('invalid account');
-    }
+      const account = await ctx.oidc.provider.Account.findAccount(ctx, params.username);
+      if (!account) {
+        throw new Error('invalid account');
+      }
 
-    const grant = new ctx.oidc.provider.Grant({
-      clientId: ctx.oidc.client.clientId,
-      accountId: account.accountId,
-    });
-    await grant.save();
+      const grant = new ctx.oidc.provider.Grant({
+        clientId: ctx.oidc.client.clientId,
+        accountId: account.accountId,
+      });
+      await grant.save();
 
-    const { AccessToken } = ctx.oidc.provider;
-    const at = new AccessToken({
-      accountId: account.accountId,
-      client: ctx.oidc.client,
-      grantId: grant.jti,
-      gty: 'password',
-      scope: typeof params.scope === 'string' ? params.scope : '',
-      claims: {
-        userinfo: {
-          sub: {
-            value: account.accountId,
+      const { AccessToken } = ctx.oidc.provider;
+      const at = new AccessToken({
+        accountId: account.accountId,
+        client: ctx.oidc.client,
+        grantId: grant.jti,
+        gty: 'password',
+        scope: typeof params.scope === 'string' ? params.scope : '',
+        claims: {
+          userinfo: {
+            sub: {
+              value: account.accountId,
+            },
           },
         },
-      },
-    });
+      });
 
-    const accessToken = await at.save();
+      const accessToken = await at.save();
 
-    /* eslint-disable camelcase */
-    ctx.body = {
-      access_token: accessToken,
-      expires_in: at.expiration,
-      scope: at.scope,
-      token_type: at.tokenType,
-    };
-    /* eslint-enable camelcase */
+      /* eslint-disable camelcase */
+      ctx.body = {
+        access_token: accessToken,
+        expires_in: at.expiration,
+        scope: at.scope,
+        token_type: at.tokenType,
+      };
+      /* eslint-enable camelcase */
 
-    await next();
-  }, parameters);
+      await next();
+    },
+    parameters,
+  );
 }
 
 function extractToken(authorizationHeader: string) {
diff --git a/packages/insomnia-smoke-test/server/websocket.ts b/packages/insomnia-smoke-test/server/websocket.ts
index 29344ccade..112d3506e4 100644
--- a/packages/insomnia-smoke-test/server/websocket.ts
+++ b/packages/insomnia-smoke-test/server/websocket.ts
@@ -79,11 +79,11 @@ const upgrade = (wss: WebSocketServer, request: IncomingMessage, socket: Socket,
     return redirectOnSuccess(socket);
   }
   if (request.url === '/delay') {
-    const delaySec = Number.parseInt(request.headers.duration as string || '5');
-    setTimeout(function() {
+    const delaySec = Number.parseInt((request.headers.duration as string) || '5');
+    setTimeout(function () {
       redirectOnSuccess(socket);
     }, delaySec * 1000);
-    return ;
+    return;
   }
   if (request.url === '/basic-auth') {
     // login with user:password
diff --git a/packages/insomnia-smoke-test/tests/critical/backup.test.ts b/packages/insomnia-smoke-test/tests/critical/backup.test.ts
index fa0aec3350..67a458acad 100644
--- a/packages/insomnia-smoke-test/tests/critical/backup.test.ts
+++ b/packages/insomnia-smoke-test/tests/critical/backup.test.ts
@@ -5,25 +5,24 @@ import path from 'path';
 import { test } from '../../playwright/test';
 
 test('can backup data on new version available', async ({ app, page }) => {
-
-    const dataPath = await app.evaluate(async ({ app }) => app.getPath('userData'));
-    let foundBackups = false;
-    // retry 5 times
-    for (let i = 0; i < 5; i++) {
-        console.log('Retry', i);
-        if (fs.existsSync(path.join(dataPath, 'backups'))) {
-            console.log('Backups exists!');
-            const rootBackupsFolder = fs.readdirSync(path.join(dataPath, 'backups'));
-            const backupDir = fs.readdirSync(path.join(dataPath, 'backups', rootBackupsFolder[0]));
-            const hasFilesInsideBackup = backupDir.length > 0;
-            const hasProjectDbFile = backupDir.includes('insomnia.Project.db');
-            foundBackups = hasFilesInsideBackup && hasProjectDbFile;
-            break;
-        } else {
-            console.log('backups not found. Waiting 5 seconds...');
-            await page.waitForTimeout(5000);
-        }
+  const dataPath = await app.evaluate(async ({ app }) => app.getPath('userData'));
+  let foundBackups = false;
+  // retry 5 times
+  for (let i = 0; i < 5; i++) {
+    console.log('Retry', i);
+    if (fs.existsSync(path.join(dataPath, 'backups'))) {
+      console.log('Backups exists!');
+      const rootBackupsFolder = fs.readdirSync(path.join(dataPath, 'backups'));
+      const backupDir = fs.readdirSync(path.join(dataPath, 'backups', rootBackupsFolder[0]));
+      const hasFilesInsideBackup = backupDir.length > 0;
+      const hasProjectDbFile = backupDir.includes('insomnia.Project.db');
+      foundBackups = hasFilesInsideBackup && hasProjectDbFile;
+      break;
+    } else {
+      console.log('backups not found. Waiting 5 seconds...');
+      await page.waitForTimeout(5000);
     }
+  }
 
-    await expect(foundBackups).toBe(true);
+  await expect(foundBackups).toBe(true);
 });
diff --git a/packages/insomnia-smoke-test/tests/critical/scratchpad.test.ts b/packages/insomnia-smoke-test/tests/critical/scratchpad.test.ts
index e413166196..1b041fb183 100644
--- a/packages/insomnia-smoke-test/tests/critical/scratchpad.test.ts
+++ b/packages/insomnia-smoke-test/tests/critical/scratchpad.test.ts
@@ -1,8 +1,8 @@
 import { test } from '../../playwright/test';
 
 test('can open scratchpad', async ({ page }) => {
-    await page.locator('[data-testid="user-dropdown"]').click();
-    await page.getByText('Log Out').click();
-    await page.getByLabel('Use the Scratch Pad').click();
-    await page.getByText('Welcome to the Scratch Pad').click();
+  await page.locator('[data-testid="user-dropdown"]').click();
+  await page.getByText('Log Out').click();
+  await page.getByLabel('Use the Scratch Pad').click();
+  await page.getByText('Welcome to the Scratch Pad').click();
 });
diff --git a/packages/insomnia-smoke-test/tests/migration/local-to-cloud-projects.test.ts b/packages/insomnia-smoke-test/tests/migration/local-to-cloud-projects.test.ts
index 66156cab0a..9b46fe572f 100644
--- a/packages/insomnia-smoke-test/tests/migration/local-to-cloud-projects.test.ts
+++ b/packages/insomnia-smoke-test/tests/migration/local-to-cloud-projects.test.ts
@@ -20,9 +20,7 @@ testWithLegacyDatabase('Run data migration to version 8', async ({ page, userCon
   // Migration takes a while, adding this to avoid test timeout before it ends
   test.slow();
 
-  await page.getByLabel('Continue with Google').click(),
-
-  await page.locator('input[name="code"]').click();
+  await page.getByLabel('Continue with Google').click(), await page.locator('input[name="code"]').click();
   await page.locator('input[name="code"]').fill(userConfig.code);
 
   await page.getByRole('button', { name: 'Log in' }).click();
diff --git a/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts b/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts
index 85eae3d7a3..a385aae568 100644
--- a/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/after-response-script-features.test.ts
@@ -1,83 +1,89 @@
 import { expect } from '@playwright/test';
 
 import { loadFixture } from '../../playwright/paths';
-import { test } from '../../playwright/test';;
+import { test } from '../../playwright/test';
 
 test.describe('after-response script features tests', async () => {
-    test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
+  test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
 
-    test.beforeEach(async ({ app, page }) => {
-        const text = await loadFixture('after-response-collection.yaml');
-        await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
+  test.beforeEach(async ({ app, page }) => {
+    const text = await loadFixture('after-response-collection.yaml');
+    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
 
-        await page.getByLabel('Import').click();
-        await page.locator('[data-test-id="import-from-clipboard"]').click();
-        await page.getByRole('button', { name: 'Scan' }).click();
-        await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
+    await page.getByLabel('Import').click();
+    await page.locator('[data-test-id="import-from-clipboard"]').click();
+    await page.getByRole('button', { name: 'Scan' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
 
-        await page.getByLabel('After-response Scripts').click();
+    await page.getByLabel('After-response Scripts').click();
+  });
+
+  test('post: insomnia.test and insomnia.expect can work together', async ({ page }) => {
+    await page.getByLabel('Request Collection').getByTestId('tests with expect and test').press('Enter');
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+
+    // verify
+    await page.getByRole('tab', { name: 'Tests' }).click();
+
+    const responsePane = page.getByTestId('response-pane');
+    await expect(responsePane).toContainText('PASS');
+    await expect(responsePane).toContainText(
+      'FAILunhappy tests | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200',
+    );
+    await expect(responsePane).toContainText('PASShappyTestInFunc');
+    await expect(responsePane).toContainText(
+      'FAILsadTestInFunc | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200',
+    );
+    await expect(responsePane).toContainText('PASSasyncHappyTestInFunc');
+    await expect(responsePane).toContainText(
+      'FAILasyncSadTestInFunc | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200',
+    );
+  });
+
+  test('environment and baseEnvironment can be persisted', async ({ page }) => {
+    const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+    await page.getByLabel('Request Collection').getByTestId('persist environments').press('Enter');
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+
+    // verify response
+    await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+    await expect(statusTag).toContainText('200 OK');
+
+    // verify persisted environment
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
+    const responseBody = page.getByRole('dialog').getByTestId('CodeEditor').locator('.CodeMirror-line');
+    const rows = await responseBody.allInnerTexts();
+    const bodyJson = JSON.parse(rows.join(' '));
+
+    expect(bodyJson).toEqual({
+      // no environment is selected so the environment value will be persisted to the base environment
+      __fromAfterScript1: 'baseEnvironment',
+      __fromAfterScript2: 'collection',
+      __fromAfterScript: 'environment',
+      base_url: 'http://localhost:4010',
     });
+  });
 
-    test('post: insomnia.test and insomnia.expect can work together', async ({ page }) => {
-        await page.getByLabel('Request Collection').getByTestId('tests with expect and test').press('Enter');
+  test('set transient var', async ({ page }) => {
+    const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+    await page.getByLabel('Request Collection').getByTestId('transient var').press('Enter');
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
 
-        // verify
-        await page.getByRole('tab', { name: 'Tests' }).click();
+    // verify response
+    await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+    await expect(statusTag).toContainText('200 OK');
 
-        const responsePane = page.getByTestId('response-pane');
-        await expect(responsePane).toContainText('PASS');
-        await expect(responsePane).toContainText('FAILunhappy tests | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200');
-        await expect(responsePane).toContainText('PASShappyTestInFunc');
-        await expect(responsePane).toContainText('FAILsadTestInFunc | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200');
-        await expect(responsePane).toContainText('PASSasyncHappyTestInFunc');
-        await expect(responsePane).toContainText('FAILasyncSadTestInFunc | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200');
-    });
+    // verify
+    await page.getByRole('tab', { name: 'Tests' }).click();
 
-    test('environment and baseEnvironment can be persisted', async ({ page }) => {
-        const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-        await page.getByLabel('Request Collection').getByTestId('persist environments').press('Enter');
-
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-        // verify response
-        await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-        await expect(statusTag).toContainText('200 OK');
-
-        // verify persisted environment
-        await page.getByRole('button', { name: 'Manage Environments' }).click();
-        await page.getByRole('button', { name: 'Manage collection environments' }).click();
-        const responseBody = page.getByRole('dialog').getByTestId('CodeEditor').locator('.CodeMirror-line');
-        const rows = await responseBody.allInnerTexts();
-        const bodyJson = JSON.parse(rows.join(' '));
-
-        expect(bodyJson).toEqual({
-            // no environment is selected so the environment value will be persisted to the base environment
-            '__fromAfterScript1': 'baseEnvironment',
-            '__fromAfterScript2': 'collection',
-            '__fromAfterScript': 'environment',
-            'base_url': 'http://localhost:4010',
-        });
-    });
-
-    test('set transient var', async ({ page }) => {
-        const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-        await page.getByLabel('Request Collection').getByTestId('transient var').press('Enter');
-
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-        // verify response
-        await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-        await expect(statusTag).toContainText('200 OK');
-
-        // verify
-        await page.getByRole('tab', { name: 'Tests' }).click();
-
-        const rows = page.getByTestId('test-result-row');
-        await expect(rows.first()).toContainText('PASS');
-    });
+    const rows = page.getByTestId('test-result-row');
+    await expect(rows.first()).toContainText('PASS');
+  });
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/analytics.test.ts b/packages/insomnia-smoke-test/tests/smoke/analytics.test.ts
index 0640f675d4..d4fcc20702 100644
--- a/packages/insomnia-smoke-test/tests/smoke/analytics.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/analytics.test.ts
@@ -3,93 +3,94 @@ import { expect } from '@playwright/test';
 import { test } from '../../playwright/test';
 
 interface SegmentRequestData {
-    batch: {
-        timestamp: string;
-        integrations: {};
-        type: string;
-        properties: {};
-        name?: string;
-        context: {
-            app: {
-                name: string;
-                version: string;
-            };
-            os: {
-                name: string;
-                version: string;
-            };
-            library: {
-                name: string;
-                version: string;
-            };
-        };
-        anonymousId: string;
-        userId: string;
-        messageId: string;
-        _metadata: {
-            nodeVersion: string;
-            jsRuntime: string;
-        };
-        event?: string;
-    }[];
-    writeKey: string;
-    sentAt: string;
+  batch: {
+    timestamp: string;
+    integrations: {};
+    type: string;
+    properties: {};
+    name?: string;
+    context: {
+      app: {
+        name: string;
+        version: string;
+      };
+      os: {
+        name: string;
+        version: string;
+      };
+      library: {
+        name: string;
+        version: string;
+      };
+    };
+    anonymousId: string;
+    userId: string;
+    messageId: string;
+    _metadata: {
+      nodeVersion: string;
+      jsRuntime: string;
+    };
+    event?: string;
+  }[];
+  writeKey: string;
+  sentAt: string;
 }
 
 interface SegmentLog {
-    url: string;
-    data: SegmentRequestData[];
+  url: string;
+  data: SegmentRequestData[];
 }
 
 test('analytics events are sent', async ({ page, app }) => {
-    await app.evaluate(async ({ session }) => {
-        // Capture segment requests to a global variable in main process
-        globalThis.segmentLogs = [];
+  await app.evaluate(async ({ session }) => {
+    // Capture segment requests to a global variable in main process
+    globalThis.segmentLogs = [];
 
-        session.defaultSession.webRequest.onBeforeRequest((details, callback) => {
-            if (details.url.includes('segment')) {
-                globalThis.segmentLogs.push({ url: details.url, data: details.uploadData });
-            }
-            callback({ cancel: false });
-        });
+    session.defaultSession.webRequest.onBeforeRequest((details, callback) => {
+      if (details.url.includes('segment')) {
+        globalThis.segmentLogs.push({ url: details.url, data: details.uploadData });
+      }
+      callback({ cancel: false });
     });
+  });
 
-    // Create a collection and requests that cause analytics events:
-    await page.getByRole('button', { name: 'Create document', exact: true }).click();
-    await page.getByRole('button', { name: 'Create', exact: true }).click();
+  // Create a collection and requests that cause analytics events:
+  await page.getByRole('button', { name: 'Create document', exact: true }).click();
+  await page.getByRole('button', { name: 'Create', exact: true }).click();
 
-    await page.getByTestId('workspace-debug').click();
+  await page.getByTestId('workspace-debug').click();
 
-    for (let i = 0; i < 10; i++) {
-        await page.getByLabel('Create in collection').click();
-        await page.getByRole('menuitemradio', { name: 'HTTP Request' }).press('Enter');
-    }
+  for (let i = 0; i < 10; i++) {
+    await page.getByLabel('Create in collection').click();
+    await page.getByRole('menuitemradio', { name: 'HTTP Request' }).press('Enter');
+  }
 
-    const segmentLogs = await app.evaluate(() => globalThis.segmentLogs);
+  const segmentLogs = await app.evaluate(() => globalThis.segmentLogs);
 
-    const decodedLogs: SegmentLog[] = segmentLogs.map((log: { url: string; data: { type: string; bytes: number[] }[] }) => {
-        return {
-            url: log.url,
-            data: log.data.map(data => JSON.parse(Buffer.from(Object.values(data.bytes)).toString('utf-8'))),
-        };
-    });
+  const decodedLogs: SegmentLog[] = segmentLogs.map(
+    (log: { url: string; data: { type: string; bytes: number[] }[] }) => {
+      return {
+        url: log.url,
+        data: log.data.map(data => JSON.parse(Buffer.from(Object.values(data.bytes)).toString('utf-8'))),
+      };
+    },
+  );
 
-    const analyticsBatch = decodedLogs[0].data[0].batch;
-    const [appStartEvent, ...restEvents] = analyticsBatch;
+  const analyticsBatch = decodedLogs[0].data[0].batch;
+  const [appStartEvent, ...restEvents] = analyticsBatch;
 
-    // Analytics need at least 15 events to be sent
-    expect(analyticsBatch.length).toBeGreaterThanOrEqual(5);
+  // Analytics need at least 15 events to be sent
+  expect(analyticsBatch.length).toBeGreaterThanOrEqual(5);
 
-    // App start event
-    expect(appStartEvent.anonymousId).toBeTruthy();
-    expect(appStartEvent.event).toBe('App Started');
+  // App start event
+  expect(appStartEvent.anonymousId).toBeTruthy();
+  expect(appStartEvent.event).toBe('App Started');
 
-    // First event should have userId and anonymousId
-    expect(restEvents[0].anonymousId).toBeTruthy();
-    expect(restEvents[0].userId).toBeTruthy();
-
-    // Last event should have userId and anonymousId
-    expect(restEvents.at(-1)?.anonymousId).toBeTruthy();
-    expect(restEvents.at(-1)?.userId).toBeTruthy();
+  // First event should have userId and anonymousId
+  expect(restEvents[0].anonymousId).toBeTruthy();
+  expect(restEvents[0].userId).toBeTruthy();
 
+  // Last event should have userId and anonymousId
+  expect(restEvents.at(-1)?.anonymousId).toBeTruthy();
+  expect(restEvents.at(-1)?.userId).toBeTruthy();
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/app.test.ts b/packages/insomnia-smoke-test/tests/smoke/app.test.ts
index 01b9e0ac2b..d4e44e8aeb 100644
--- a/packages/insomnia-smoke-test/tests/smoke/app.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/app.test.ts
@@ -41,27 +41,39 @@ test('can send requests', async ({ app, page }) => {
   await page.getByRole('menuitem', { name: 'Raw Data' }).click();
   await expect(responseBody).toContainText('{"id":"1"}');
 
-  await page.getByLabel('Request Collection').getByTestId('connects to event stream and shows ping response').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('connects to event stream and shows ping response')
+    .press('Enter');
   await page.getByTestId('request-pane').getByRole('button', { name: 'Connect' }).click();
   await expect(statusTag).toContainText('200 OK');
   await page.getByRole('tab', { name: 'Console' }).click();
   await expect(responseBody).toContainText('Connected to 127.0.0.1');
   await page.getByTestId('request-pane').getByRole('button', { name: 'Disconnect' }).click();
 
-  await page.getByLabel('Request Collection').getByTestId('sends dummy.csv request and shows rich response').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('sends dummy.csv request and shows rich response')
+    .press('Enter');
   await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
   await expect(statusTag).toContainText('200 OK');
   await page.getByRole('button', { name: 'Preview' }).click();
   await page.getByRole('menuitem', { name: 'Raw Data' }).click();
   await expect(responseBody).toContainText('a,b,c');
 
-  await page.getByLabel('Request Collection').getByTestId('sends dummy.xml request and shows raw response').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('sends dummy.xml request and shows raw response')
+    .press('Enter');
   await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
   await expect(statusTag).toContainText('200 OK');
   await expect(responseBody).toContainText('xml version="1.0"');
   await expect(responseBody).toContainText('<LoginResult>');
 
-  await page.getByLabel('Request Collection').getByTestId('sends dummy.pdf request and shows rich response').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('sends dummy.pdf request and shows rich response')
+    .press('Enter');
   await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
   await expect(statusTag).toContainText('200 OK');
   // TODO(filipe): re-add a check for the preview that is less flaky
@@ -73,7 +85,10 @@ test('can send requests', async ({ app, page }) => {
   await expect(statusTag).toContainText('200 OK');
   await expect(responseBody).toContainText('basic auth received');
 
-  await page.getByLabel('Request Collection').getByTestId('sends request with cookie and get cookie in response').press('Enter');
+  await page
+    .getByLabel('Request Collection')
+    .getByTestId('sends request with cookie and get cookie in response')
+    .press('Enter');
   await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
   await expect(statusTag).toContainText('200 OK');
   await page.getByRole('tab', { name: 'Console' }).click();
diff --git a/packages/insomnia-smoke-test/tests/smoke/command-palette.test.ts b/packages/insomnia-smoke-test/tests/smoke/command-palette.test.ts
index cc03ed58dc..82682e55b2 100644
--- a/packages/insomnia-smoke-test/tests/smoke/command-palette.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/command-palette.test.ts
@@ -25,7 +25,10 @@ test('Command palette - can switch between requests and workspaces', async ({ ap
   await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
 
   await page.getByLabel('Smoke tests').click();
-  await page.getByTestId('sends request with cookie and get cookie in response').getByText('GET', { exact: true }).click();
+  await page
+    .getByTestId('sends request with cookie and get cookie in response')
+    .getByText('GET', { exact: true })
+    .click();
   await page.getByTestId('OneLineEditor').getByText('http://127.0.0.1:4010/cookies').click();
   const requestSwitchKeyboardShortcut = process.platform === 'darwin' ? 'Meta+p' : 'Control+p';
   await page.locator('body').press(requestSwitchKeyboardShortcut);
@@ -40,5 +43,7 @@ test('Command palette - can switch between requests and workspaces', async ({ ap
   await page.getByPlaceholder('Search and switch between').press('ArrowUp');
   await page.getByPlaceholder('Search and switch between').press('ArrowUp');
   await page.getByPlaceholder('Search and switch between').press('Enter');
-  await expect(page.getByTestId('workspace-context-dropdown').locator('span')).toContainText('E2E testing specification - swagger 2 1.0.0');
+  await expect(page.getByTestId('workspace-context-dropdown').locator('span')).toContainText(
+    'E2E testing specification - swagger 2 1.0.0',
+  );
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts
index 74d79cc9a5..1159b0225e 100644
--- a/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/cookie-editor-interactions.test.ts
@@ -4,7 +4,6 @@ import { loadFixture } from '../../playwright/paths';
 import { test } from '../../playwright/test';
 
 test.describe('Cookie editor', async () => {
-
   test.beforeEach(async ({ app, page }) => {
     const text = await loadFixture('simple.yaml');
     await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
@@ -16,7 +15,6 @@ test.describe('Cookie editor', async () => {
   });
 
   test('create and send a cookie', async ({ page }) => {
-
     // Open cookie editor
     await page.click('button:has-text("Cookies")');
 
@@ -34,7 +32,9 @@ test.describe('Cookie editor', async () => {
 
     // Try to replace text in Raw view
     await page.getByRole('tab', { name: 'Raw' }).click();
-    await page.locator('text=Raw Cookie String >> input[type="text"]').fill('foo2=bar2; Expires=Tue, 19 Jan 2038 03:14:07 GMT; Domain=localhost; Path=/');
+    await page
+      .locator('text=Raw Cookie String >> input[type="text"]')
+      .fill('foo2=bar2; Expires=Tue, 19 Jan 2038 03:14:07 GMT; Domain=localhost; Path=/');
     await page.locator('text=Done').nth(1).click();
     await page.getByTestId('cookie-test-iteration-0').click();
 
diff --git a/packages/insomnia-smoke-test/tests/smoke/dashboard-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/dashboard-interactions.test.ts
index 8b39ac4298..1bbc9896a6 100644
--- a/packages/insomnia-smoke-test/tests/smoke/dashboard-interactions.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/dashboard-interactions.test.ts
@@ -21,7 +21,11 @@ test.describe('Dashboard', async () => {
 
       // Rename Project
       await page.getByRole('row', { name: 'My Project' }).first().focus();
-      await page.getByRole('row', { name: 'My Project' }).first().getByRole('button', { name: 'Project Actions' }).click();
+      await page
+        .getByRole('row', { name: 'My Project' })
+        .first()
+        .getByRole('button', { name: 'Project Actions' })
+        .click();
       await page.getByRole('menuitemradio', { name: 'Settings' }).click();
       await page.getByPlaceholder('My Project').click();
       await page.getByPlaceholder('My Project').fill('My Project123');
@@ -36,7 +40,11 @@ test.describe('Dashboard', async () => {
 
       // Delete project
       await page.getByRole('row', { name: 'My Project' }).first().focus();
-      await page.getByRole('row', { name: 'My Project' }).first().getByRole('button', { name: 'Project Actions' }).click();
+      await page
+        .getByRole('row', { name: 'My Project' })
+        .first()
+        .getByRole('button', { name: 'Project Actions' })
+        .click();
       await page.getByRole('menuitemradio', { name: 'Delete' }).click();
       await page.getByRole('button', { name: 'Delete' }).click();
 
@@ -48,7 +56,8 @@ test.describe('Dashboard', async () => {
       await expect(page.locator('.app')).not.toContainText('Setup Git Sync');
     });
   });
-  test.describe('Interactions', async () => { // Not sure about the name here
+  test.describe('Interactions', async () => {
+    // Not sure about the name here
 
     test('Can create, rename and delete a document', async ({ page }) => {
       await page.getByLabel('All Files (0)').click();
diff --git a/packages/insomnia-smoke-test/tests/smoke/design-document-naming.test.ts b/packages/insomnia-smoke-test/tests/smoke/design-document-naming.test.ts
index a03288402f..b1ba904a0d 100644
--- a/packages/insomnia-smoke-test/tests/smoke/design-document-naming.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/design-document-naming.test.ts
@@ -1,23 +1,23 @@
 import { test } from '../../playwright/test';
 
 test.describe('design document operations', async () => {
-    test('can name design documents', async ({ page }) => {
-        await page.getByRole('button', { name: 'Create document' }).click();
-        await page.locator('body').click();
-        await page.getByPlaceholder('Enter a name for your Design Document').fill('jurassic park');
-        await page.getByPlaceholder('Enter a name for your Design Document').press('Enter');
-        await page.getByTestId('project').click();
-        await page.getByLabel('Files').getByLabel('jurassic park').click();
-    });
+  test('can name design documents', async ({ page }) => {
+    await page.getByRole('button', { name: 'Create document' }).click();
+    await page.locator('body').click();
+    await page.getByPlaceholder('Enter a name for your Design Document').fill('jurassic park');
+    await page.getByPlaceholder('Enter a name for your Design Document').press('Enter');
+    await page.getByTestId('project').click();
+    await page.getByLabel('Files').getByLabel('jurassic park').click();
+  });
 
-    test('can delete a test suite with confirmation modal', async ({ page }) => {
-        await page.getByRole('button', { name: 'Create document' }).click();
-        await page.getByPlaceholder('Enter a name for your Design Document').fill('jurassic park');
-        await page.getByPlaceholder('Enter a name for your Design Document').press('Enter');
-        await page.getByTestId('workspace-test').click();
-        await page.getByText('New test suite').click();
-        await page.getByLabel('Test Suites').getByLabel('Unit Test Actions').click();
-        await page.getByRole('menuitemradio', { name: 'Delete suite' }).click();
-        await page.locator('.modal__content').getByRole('button', { name: 'Delete' }).click();
-    });
+  test('can delete a test suite with confirmation modal', async ({ page }) => {
+    await page.getByRole('button', { name: 'Create document' }).click();
+    await page.getByPlaceholder('Enter a name for your Design Document').fill('jurassic park');
+    await page.getByPlaceholder('Enter a name for your Design Document').press('Enter');
+    await page.getByTestId('workspace-test').click();
+    await page.getByText('New test suite').click();
+    await page.getByLabel('Test Suites').getByLabel('Unit Test Actions').click();
+    await page.getByRole('menuitemradio', { name: 'Delete suite' }).click();
+    await page.locator('.modal__content').getByRole('button', { name: 'Delete' }).click();
+  });
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts
index 5f797c684d..f660a42e4a 100644
--- a/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/environment-editor-interactions.test.ts
@@ -4,7 +4,6 @@ import { loadFixture } from '../../playwright/paths';
 import { test } from '../../playwright/test';
 
 test.describe('Environment Editor', async () => {
-
   test.beforeEach(async ({ app, page }) => {
     const text = await loadFixture('environments.yaml');
     await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
@@ -111,7 +110,6 @@ test.describe('Environment Editor', async () => {
 
     // NOTE - Test fails due to actual bug - the variables are not being added to the request body when the request is sent
     // await page.locator('pre').filter({ hasText: '| Gandalf' }).click();
-
   });
 
   test('Switch to table view and edit environment', async ({ page }) => {
@@ -168,5 +166,4 @@ test.describe('Environment Editor', async () => {
     await page.getByText('kvAnotherStr').click();
     await page.getByText('12345').click();
   });
-
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/git-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/git-interactions.test.ts
index 6cabf4f145..f317e17670 100644
--- a/packages/insomnia-smoke-test/tests/smoke/git-interactions.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/git-interactions.test.ts
@@ -2,116 +2,120 @@
 import { test } from '../../playwright/test';
 
 test.skip('Git Interactions (clone, checkout branch, pull, push, stage changes, ...)', async ({ page }) => {
-    const gitSyncSmokeTestToken = process.env.GIT_SYNC_SMOKE_TEST_TOKEN;
-    test.setTimeout(600000);
+  const gitSyncSmokeTestToken = process.env.GIT_SYNC_SMOKE_TEST_TOKEN;
+  test.setTimeout(600000);
 
-    // read env variable to skip test
-    if (!gitSyncSmokeTestToken) {
-        console.log('Skipping, set GIT_SYNC_SMOKE_TEST_TOKEN to run, TIP: "gh auth login to get a token" and "export GIT_SYNC_SMOKE_TEST_TOKEN=$(gh auth token)"');
-        test.skip();
-        return;
-    }
+  // read env variable to skip test
+  if (!gitSyncSmokeTestToken) {
+    console.log(
+      'Skipping, set GIT_SYNC_SMOKE_TEST_TOKEN to run, TIP: "gh auth login to get a token" and "export GIT_SYNC_SMOKE_TEST_TOKEN=$(gh auth token)"',
+    );
+    test.skip();
+    return;
+  }
 
-    // generate a uuid string
-    const testUUID = crypto.randomUUID();
+  // generate a uuid string
+  const testUUID = crypto.randomUUID();
 
-    // git clone
-    await page.waitForSelector('[data-test-git-enable="true"]');
-    await page.getByLabel('Clone git repository').click();
-    await page.getByRole('tab', { name: ' Git' }).click();
-    await page.getByPlaceholder('https://github.com/org/repo.git').fill('https://github.com/Kong/insomnia-git-example.git');
-    await page.getByPlaceholder('Name').fill('Test User');
-    await page.getByPlaceholder('Email').fill('test@test.com');
-    await page.getByPlaceholder('MyUser').fill('test');
-    await page.getByPlaceholder('88e7ee63b254e4b0bf047559eafe86ba9dd49507').fill(gitSyncSmokeTestToken);
-    await page.getByTestId('git-repository-settings-modal__sync-btn').click();
-    await page.getByLabel('Toggle preview').click();
+  // git clone
+  await page.waitForSelector('[data-test-git-enable="true"]');
+  await page.getByLabel('Clone git repository').click();
+  await page.getByRole('tab', { name: ' Git' }).click();
+  await page
+    .getByPlaceholder('https://github.com/org/repo.git')
+    .fill('https://github.com/Kong/insomnia-git-example.git');
+  await page.getByPlaceholder('Name').fill('Test User');
+  await page.getByPlaceholder('Email').fill('test@test.com');
+  await page.getByPlaceholder('MyUser').fill('test');
+  await page.getByPlaceholder('88e7ee63b254e4b0bf047559eafe86ba9dd49507').fill(gitSyncSmokeTestToken);
+  await page.getByTestId('git-repository-settings-modal__sync-btn').click();
+  await page.getByLabel('Toggle preview').click();
 
-    // switch branches
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Branches').click();
-    await page.getByLabel('main').getByText('main').click();
-    await page.getByText('abc').click();
-    await page.getByLabel('abc').getByRole('button', { name: 'Fetch' }).click();
-    await page.getByText('abc *').click();
-    await page.getByRole('heading', { name: 'Branches', exact: true }).press('Escape');
+  // switch branches
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Branches').click();
+  await page.getByLabel('main').getByText('main').click();
+  await page.getByText('abc').click();
+  await page.getByLabel('abc').getByRole('button', { name: 'Fetch' }).click();
+  await page.getByText('abc *').click();
+  await page.getByRole('heading', { name: 'Branches', exact: true }).press('Escape');
 
-    // perform some changes and commit them
-    await page.locator('pre').filter({ hasText: 'title: Endpoint Security' }).click();
-    await page.getByRole('textbox').fill(' test');
-    // make sure the changes are stored
-    await page.waitForTimeout(1000);
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Commit').click();
-    await page.getByRole('row', { name: 'spec.yaml' }).click();
-    await page.locator('button[name="Stage all changes"]').click();
-    await page.getByPlaceholder('This is a helpful message').click();
-    await page.getByPlaceholder('This is a helpful message').fill('example commit message');
-    await page.getByRole('button', { name: 'Commit', exact: true }).click();
+  // perform some changes and commit them
+  await page.locator('pre').filter({ hasText: 'title: Endpoint Security' }).click();
+  await page.getByRole('textbox').fill(' test');
+  // make sure the changes are stored
+  await page.waitForTimeout(1000);
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Commit').click();
+  await page.getByRole('row', { name: 'spec.yaml' }).click();
+  await page.locator('button[name="Stage all changes"]').click();
+  await page.getByPlaceholder('This is a helpful message').click();
+  await page.getByPlaceholder('This is a helpful message').fill('example commit message');
+  await page.getByRole('button', { name: 'Commit', exact: true }).click();
 
-    // switch back to main branch, which should not have said changes
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('main').click();
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Branches').click();
-    await page.getByText('main *').click();
-    await page.getByText('main *').press('Escape');
-    await page.getByTestId('CodeEditor').getByText('Endpoint Security').click();
+  // switch back to main branch, which should not have said changes
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('main').click();
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Branches').click();
+  await page.getByText('main *').click();
+  await page.getByText('main *').press('Escape');
+  await page.getByTestId('CodeEditor').getByText('Endpoint Security').click();
 
-    // switch to the branch with the changes and check if they are there
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('abc').click();
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Branches').click();
-    await page.getByText('abc *').click();
-    await page.getByRole('heading', { name: 'Branches', exact: true }).press('Escape');
-    await page.getByLabel('Toggle preview').click();
-    // TODO: the following action is flaky and seems pointless, added above operation to make it work
-    await page.getByText('Endpoint Security test').click();
+  // switch to the branch with the changes and check if they are there
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('abc').click();
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Branches').click();
+  await page.getByText('abc *').click();
+  await page.getByRole('heading', { name: 'Branches', exact: true }).press('Escape');
+  await page.getByLabel('Toggle preview').click();
+  // TODO: the following action is flaky and seems pointless, added above operation to make it work
+  await page.getByText('Endpoint Security test').click();
 
-    // check git history
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Fetch').click();
+  // check git history
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Fetch').click();
 
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('History').click();
-    await page.getByRole('rowheader', { name: 'example commit message' }).click();
-    await page.getByRole('gridcell', { name: 'just now' }).click();
-    await page.getByRole('heading', { name: 'History', exact: true }).click();
-    await page.getByRole('heading', { name: 'History', exact: true }).press('Escape');
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('History').click();
+  await page.getByRole('rowheader', { name: 'example commit message' }).click();
+  await page.getByRole('gridcell', { name: 'just now' }).click();
+  await page.getByRole('heading', { name: 'History', exact: true }).click();
+  await page.getByRole('heading', { name: 'History', exact: true }).press('Escape');
 
-    // push changes test
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Branches').click();
-    await page.getByLabel('push-pull-test').getByRole('button', { name: 'Fetch' }).click();
-    await page.getByText('push-pull-test *').click();
-    await page.getByText('push-pull-test *').press('Escape');
-    await page.getByTestId('workspace-debug').click();
-    await page.getByLabel('Create in collection').click();
-    await page.getByLabel('New Folder').click();
-    await page.getByLabel('Name', { exact: true }).click();
-    await page.getByLabel('Name', { exact: true }).fill(`My Folder ${testUUID}`);
-    await page.getByRole('button', { name: 'Create', exact: true }).click();
-    await page.getByTestId('git-dropdown').click();
+  // push changes test
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Branches').click();
+  await page.getByLabel('push-pull-test').getByRole('button', { name: 'Fetch' }).click();
+  await page.getByText('push-pull-test *').click();
+  await page.getByText('push-pull-test *').press('Escape');
+  await page.getByTestId('workspace-debug').click();
+  await page.getByLabel('Create in collection').click();
+  await page.getByLabel('New Folder').click();
+  await page.getByLabel('Name', { exact: true }).click();
+  await page.getByLabel('Name', { exact: true }).fill(`My Folder ${testUUID}`);
+  await page.getByRole('button', { name: 'Create', exact: true }).click();
+  await page.getByTestId('git-dropdown').click();
 
-    // Commit changes
-    await page.getByText('Commit').click();
-    await page.getByRole('row', { name: `My Folder ${testUUID}`, exact: true }).click();
-    await page.locator('button[name="Stage all changes"]').click();
-    await page.getByPlaceholder('This is a helpful message').click();
-    await page.getByPlaceholder('This is a helpful message').fill(`commit test ${testUUID}`);
-    await page.getByRole('button', { name: 'Commit', exact: true }).click();
+  // Commit changes
+  await page.getByText('Commit').click();
+  await page.getByRole('row', { name: `My Folder ${testUUID}`, exact: true }).click();
+  await page.locator('button[name="Stage all changes"]').click();
+  await page.getByPlaceholder('This is a helpful message').click();
+  await page.getByPlaceholder('This is a helpful message').fill(`commit test ${testUUID}`);
+  await page.getByRole('button', { name: 'Commit', exact: true }).click();
 
-    // Push changes
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('Push', { exact: true }).click();
-    await page.getByTestId('git-dropdown').click();
+  // Push changes
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('Push', { exact: true }).click();
+  await page.getByTestId('git-dropdown').click();
 
-    // Check if the changes are pushed
-    await page.getByText('Fetch').click();
-    await page.getByTestId('git-dropdown').click();
-    await page.getByText('History').click();
-    await page.getByRole('rowheader', { name: `commit test ${testUUID}` }).click();
-    await page.getByRole('heading', { name: 'History', exact: true }).click();
-    await page.getByRole('heading', { name: 'History', exact: true }).press('Escape');
+  // Check if the changes are pushed
+  await page.getByText('Fetch').click();
+  await page.getByTestId('git-dropdown').click();
+  await page.getByText('History').click();
+  await page.getByRole('rowheader', { name: `commit test ${testUUID}` }).click();
+  await page.getByRole('heading', { name: 'History', exact: true }).click();
+  await page.getByRole('heading', { name: 'History', exact: true }).press('Escape');
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/global-environments.test.ts b/packages/insomnia-smoke-test/tests/smoke/global-environments.test.ts
index 267af8af4a..aecc6e4035 100644
--- a/packages/insomnia-smoke-test/tests/smoke/global-environments.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/global-environments.test.ts
@@ -4,50 +4,51 @@ import { loadFixture } from '../../playwright/paths';
 import { test } from '../../playwright/test';
 
 test.describe('Global Environments', async () => {
+  test('import and use a global environment from a collection', async ({ app, page }) => {
+    await loadFixtureFile('collection-for-global-environments.yaml', app, page);
+    await loadFixtureFile('global-environment.yaml', app, page);
 
-    test('import and use a global environment from a collection', async ({ app, page }) => {
-        await loadFixtureFile('collection-for-global-environments.yaml', app, page);
-        await loadFixtureFile('global-environment.yaml', app, page);
-
-        await page.getByRole('link', { name: 'collection-for-global-' }).click();
-        await page.getByTestId('New Request').getByLabel('GET New Request', { exact: true }).click();
-        // check if it has error message
-        await page.getByText('Body', { exact: true }).click();
-        await expect(page.getByTitle('Failed to render environment variables: _[\'global-base\']')).toHaveText('_[\'global-base\']');
-        // check if it appears as a custom message when sending the request
-        await page.getByRole('button', { name: 'Send' }).click();
-        await page.getByRole('heading', { name: '2 environment variables are' }).click();
-        await page.getByRole('button', { name: 'Cancel' }).click();
-        await page.getByLabel('Manage Environments').click();
-        await page.getByPlaceholder('Choose a global environment').click();
-        await page.getByRole('option', { name: 'global-environment' }).click();
-        await page.getByText('New Environment').click();
-        await page.getByTestId('underlay').click();
-        await page.getByRole('button', { name: 'Send' }).click();
-        await page.getByRole('tab', { name: 'Console' }).click();
-        await page.locator('pre').filter({ hasText: '| 4444' }).click();
-        await page.locator('pre').filter({ hasText: '| 55555' }).click();
-    });
-    test('create a new global environment', async ({ page }) => {
-        // Create new document
-        await page.getByRole('button', { name: 'Create document', exact: true }).click();
-        await page.getByRole('button', { name: 'Create', exact: true }).click();
-        await page.getByTestId('project').click();
-        await page.getByLabel('Create in project').click();
-        await page.getByLabel('Create', { exact: true }).getByText('Environment').click();
-        await page.getByRole('button', { name: 'Create', exact: true }).click();
-        await page.getByTestId('CreateEnvironmentDropdown').click();
-        await page.getByText('Private environment').click();
-        await page.getByLabel('Project Actions').click();
-        await page.getByText('Duplicate').click();
-        await page.getByText('New Environment (Copy)').click();
-    });
+    await page.getByRole('link', { name: 'collection-for-global-' }).click();
+    await page.getByTestId('New Request').getByLabel('GET New Request', { exact: true }).click();
+    // check if it has error message
+    await page.getByText('Body', { exact: true }).click();
+    await expect(page.getByTitle("Failed to render environment variables: _['global-base']")).toHaveText(
+      "_['global-base']",
+    );
+    // check if it appears as a custom message when sending the request
+    await page.getByRole('button', { name: 'Send' }).click();
+    await page.getByRole('heading', { name: '2 environment variables are' }).click();
+    await page.getByRole('button', { name: 'Cancel' }).click();
+    await page.getByLabel('Manage Environments').click();
+    await page.getByPlaceholder('Choose a global environment').click();
+    await page.getByRole('option', { name: 'global-environment' }).click();
+    await page.getByText('New Environment').click();
+    await page.getByTestId('underlay').click();
+    await page.getByRole('button', { name: 'Send' }).click();
+    await page.getByRole('tab', { name: 'Console' }).click();
+    await page.locator('pre').filter({ hasText: '| 4444' }).click();
+    await page.locator('pre').filter({ hasText: '| 55555' }).click();
+  });
+  test('create a new global environment', async ({ page }) => {
+    // Create new document
+    await page.getByRole('button', { name: 'Create document', exact: true }).click();
+    await page.getByRole('button', { name: 'Create', exact: true }).click();
+    await page.getByTestId('project').click();
+    await page.getByLabel('Create in project').click();
+    await page.getByLabel('Create', { exact: true }).getByText('Environment').click();
+    await page.getByRole('button', { name: 'Create', exact: true }).click();
+    await page.getByTestId('CreateEnvironmentDropdown').click();
+    await page.getByText('Private environment').click();
+    await page.getByLabel('Project Actions').click();
+    await page.getByText('Duplicate').click();
+    await page.getByText('New Environment (Copy)').click();
+  });
 });
 async function loadFixtureFile(fixture: string, app, page) {
-    const text = await loadFixture(fixture);
-    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
-    await page.getByLabel('Import').click();
-    await page.locator('[data-test-id="import-from-clipboard"]').click();
-    await page.getByRole('button', { name: 'Scan' }).click();
-    await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
+  const text = await loadFixture(fixture);
+  await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
+  await page.getByLabel('Import').click();
+  await page.locator('[data-test-id="import-from-clipboard"]').click();
+  await page.getByRole('button', { name: 'Scan' }).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
 }
diff --git a/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts b/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts
index 9ec885fe78..df77f04f45 100644
--- a/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/grpc-interactions.test.ts
@@ -4,7 +4,6 @@ import { loadFixture } from '../../playwright/paths';
 import { test } from '../../playwright/test';
 
 test.describe('gRPC interactions', () => {
-
   test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
   let statusTag: Locator;
   let responseBody: Locator;
@@ -85,5 +84,4 @@ test.describe('gRPC interactions', () => {
     await page.locator('text=Response 64').click();
     await expect(responseBody).toContainText('3 Hasta Way');
   });
-
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts b/packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts
index eeda37e193..cd7270aaea 100644
--- a/packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/insomnia-tab.test.ts
@@ -92,5 +92,4 @@ test.describe('multiple-tab feature test', () => {
     await tabLocator.click({ button: 'middle' });
     await expect(tabLocator).toBeHidden();
   });
-
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/insomnia-vault.test.ts b/packages/insomnia-smoke-test/tests/smoke/insomnia-vault.test.ts
index fb6ef3fada..8f091b1b05 100644
--- a/packages/insomnia-smoke-test/tests/smoke/insomnia-vault.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/insomnia-vault.test.ts
@@ -3,7 +3,8 @@ import { expect } from '@playwright/test';
 import { loadFixture } from '../../playwright/paths';
 import { test } from '../../playwright/test';
 
-const testVaultKey = 'eyJhbGciOiJBMjU2R0NNIiwiZXh0Ijp0cnVlLCJrIjoiaEoxaW03cjcwV3ltZ3puT3hXcDNTb0ZQS3RBaGMwcmFfd2VQb2Z2b2xRNCIsImtleV9vcHMiOlsiZW5jcnlwdCIsImRlY3J5cHQiXSwia3R5Ijoib2N0In0=';
+const testVaultKey =
+  'eyJhbGciOiJBMjU2R0NNIiwiZXh0Ijp0cnVlLCJrIjoiaEoxaW03cjcwV3ltZ3puT3hXcDNTb0ZQS3RBaGMwcmFfd2VQb2Z2b2xRNCIsImtleV9vcHMiOlsiZW5jcnlwdCIsImRlY3J5cHQiXSwia3R5Ijoib2N0In0=';
 const testVaultSalt = 'e619272433fc739d52ff1ba1b45debedfe55cb42685af10a46e2b1285acb7120';
 const tesSrpSecret = 'b424e8700ef89f77a6cffc648b9c6d42bb7de58914d88cd79966684ffe5b4ebe';
 
@@ -94,7 +95,7 @@ test.describe('Vault key actions', async () => {
     // fill the input with aria lable test with valid and invalid vault key
     await page.getByLabel('Vault Key Input').fill('invalidVaultKey');
     await page.getByRole('button', { name: 'Unlock' }).click();
-    await modal.getByText('M2 didn\'t Check').click();
+    await modal.getByText("M2 didn't Check").click();
   });
 });
 
@@ -154,7 +155,11 @@ test.describe('Check vault used in environment', async () => {
     await page.getByRole('menuitemradio', { name: 'Secret' }).click();
 
     // go back
-    await page.locator('[data-icon="chevron-left"]').filter({ has: page.locator(':visible') }).first().click();
+    await page
+      .locator('[data-icon="chevron-left"]')
+      .filter({ has: page.locator(':visible') })
+      .first()
+      .click();
 
     // activate global private vault environment
     await page.getByText('Vault Collection').click();
@@ -233,7 +238,7 @@ test.describe('Check vault used in environment', async () => {
     await page.getByTestId('underlay').click();
     // activate request
     await page.getByTestId('legacy-invalid-vault').getByLabel('GET legacy-invalid-vault', { exact: true }).click();
-    await page.getByRole('button', { name: 'Send' }).click();    // Expect to see error message
+    await page.getByRole('button', { name: 'Send' }).click(); // Expect to see error message
     await expect(page.getByText('Unexpected Request Failure')).toBeVisible();
     await expect(page.getByText('vault is a reserved key for insomnia vault')).toBeVisible();
   });
diff --git a/packages/insomnia-smoke-test/tests/smoke/mtls.test.ts b/packages/insomnia-smoke-test/tests/smoke/mtls.test.ts
index 9e3ee4d2ff..5a202b67ca 100644
--- a/packages/insomnia-smoke-test/tests/smoke/mtls.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/mtls.test.ts
@@ -1,4 +1,3 @@
-
 import path from 'node:path';
 
 import { expect } from '@playwright/test';
@@ -69,5 +68,4 @@ test('can use client certificate for mTLS', async ({ app, page }) => {
   await page.getByRole('button', { name: 'Send', exact: true }).click();
   await expect(statusTag).toContainText('401 Unauthorized');
   await expect(responseBody).toContainText('Client certificate required');
-
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/oauth.test.ts b/packages/insomnia-smoke-test/tests/smoke/oauth.test.ts
index a2d11557a4..ae5aecc465 100644
--- a/packages/insomnia-smoke-test/tests/smoke/oauth.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/oauth.test.ts
@@ -31,10 +31,7 @@ test('can make oauth2 requests', async ({ app, page }) => {
   await projectView.getByLabel('Request Collection').getByTestId('No PKCE').press('Enter');
   await expect(page.locator('.app')).toContainText('http://127.0.0.1:4010/oidc/me');
 
-  const [authorizationCodePage] = await Promise.all([
-    app.waitForEvent('window'),
-    sendButton.click(),
-  ]);
+  const [authorizationCodePage] = await Promise.all([app.waitForEvent('window'), sendButton.click()]);
 
   await authorizationCodePage.waitForLoadState();
   await authorizationCodePage.waitForFunction("document.cookie !== ''");
@@ -112,10 +109,7 @@ test('can make oauth2 requests', async ({ app, page }) => {
   await expect(page.locator('.app')).toContainText('http://127.0.0.1:4010/oidc/id-token');
   await expect(page.locator('#Grant-Type')).toHaveValue('implicit');
 
-  const [implicitPage] = await Promise.all([
-    app.waitForEvent('window'),
-    sendButton.click(),
-  ]);
+  const [implicitPage] = await Promise.all([app.waitForEvent('window'), sendButton.click()]);
   await implicitPage.waitForLoadState();
   await implicitPage.waitForFunction("document.cookie !== ''");
   await implicitPage.locator('[name="login"]').fill('admin');
diff --git a/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts b/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts
index 7f8c26889d..9da11eaf9d 100644
--- a/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/pre-request-script-features.test.ts
@@ -4,253 +4,255 @@ import { expect } from '@playwright/test';
 import { Buffer } from 'buffer';
 
 import { getFixturePath, loadFixture } from '../../playwright/paths';
-import { test } from '../../playwright/test';;
+import { test } from '../../playwright/test';
 
 test.describe('pre-request features tests', async () => {
-    test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
+  test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
 
-    test.beforeEach(async ({ app, page }) => {
-        const text = await loadFixture('pre-request-collection.yaml');
-        await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
+  test.beforeEach(async ({ app, page }) => {
+    const text = await loadFixture('pre-request-collection.yaml');
+    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
 
-        await page.getByLabel('Import').click();
-        await page.locator('[data-test-id="import-from-clipboard"]').click();
-        await page.getByRole('button', { name: 'Scan' }).click();
-        await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
+    await page.getByLabel('Import').click();
+    await page.locator('[data-test-id="import-from-clipboard"]').click();
+    await page.getByRole('button', { name: 'Scan' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
 
-        await page.getByLabel('Pre-request Scripts').click();
-    });
+    await page.getByLabel('Pre-request Scripts').click();
+  });
 
-    const testCases = [
-        {
-            name: 'environments setting and overriding',
-            expectedBody: {
-                // fallbackToGlobal: 'fallbackToGlobal',
-                fallbackToBase: 'fallbackToBase',
-                scriptValue: 'fromEnv',
-                preDefinedValue: 'fromScript',
-                folderEnv: 'fromFolder',
-            },
+  const testCases = [
+    {
+      name: 'environments setting and overriding',
+      expectedBody: {
+        // fallbackToGlobal: 'fallbackToGlobal',
+        fallbackToBase: 'fallbackToBase',
+        scriptValue: 'fromEnv',
+        preDefinedValue: 'fromScript',
+        folderEnv: 'fromFolder',
+      },
+    },
+    {
+      name: 'variables / manipulate variables and set them to environment',
+      expectedBody: {
+        varStr: 'varStr',
+        varNum: 777,
+        varBool: true,
+      },
+    },
+    {
+      name: 'require / require classes from insomnia-collection module and init them',
+      expectedBody: {
+        propJson: {
+          disabled: false,
+          id: 'pid',
+          name: 'pname',
         },
-        {
-            name: 'variables / manipulate variables and set them to environment',
-            expectedBody: {
-                varStr: 'varStr',
-                varNum: 777,
-                varBool: true,
-            },
+        headerJson: {
+          key: 'headerKey',
+          value: 'headerValue',
+          id: '',
+          name: '',
+          type: '',
         },
-        {
-            name: 'require / require classes from insomnia-collection module and init them',
-            expectedBody: {
-                propJson: {
-                    disabled: false,
-                    id: 'pid',
-                    name: 'pname',
-                },
-                headerJson: {
-                    key: 'headerKey',
-                    value: 'headerValue',
-                    id: '',
-                    name: '',
-                    type: '',
-                },
-            },
-        },
-        {
-            name: 'insomnia.request manipulation',
-            customVerify: (bodyJson: any) => {
-                expect(bodyJson.method).toEqual('GET');
-                expect(bodyJson.headers['x-hello']).toEqual('hello');
-                expect(bodyJson.data).toEqual('rawContent');
-            },
-        },
-        {
-            name: 'insomnia.request auth manipulation (bearer)',
-            customVerify: (bodyJson: any) => {
-                const authzHeader = bodyJson.headers['authorization'];
-                expect(authzHeader != null).toBeTruthy();
-                expect(bodyJson.headers['authorization']).toEqual('CustomTokenPrefix tokenValue');
-            },
-        },
-        {
-            name: 'insomnia.request auth manipulation (basic)',
-            customVerify: (bodyJson: any) => {
-                const authzHeader = bodyJson.headers['authorization'];
-                expect(authzHeader != null).toBeTruthy();
-                const expectedEncCred = Buffer.from('myName:myPwd', 'utf-8').toString('base64');
-                expect(bodyJson.headers['authorization']).toEqual(`Basic ${expectedEncCred}`);
-            },
-        },
-        {
-            name: 'eval() works in script',
-            expectedBody: {
-                evalResult: 16,
-            },
-        },
-        {
-            name: 'require the url module',
-            customVerify: (bodyJson: any) => {
-                const reqBodyJsons = JSON.parse(bodyJson.data);
-                expect(reqBodyJsons).toEqual({
-                    hash: '#hashcontent',
-                    host: 'insomnia.com:6666',
-                    hostname: 'insomnia.com',
-                    href: 'https://user:pwd@insomnia.com:6666/p1?q1=a&q2=b#hashcontent',
-                    origin: 'https://insomnia.com:6666',
-                    password: 'pwd',
-                    pathname: '/p1',
-                    port: '6666',
-                    protocol: 'https:',
-                    search: '?q1=a&q2=b',
-                    username: 'user',
-                    seachParam: 'q1=a&q2=b',
-                });
-            },
-        },
-        {
-            name: 'require node.js modules',
-            expectedBody: {
-                path: true,
-                assert: true,
-                buffer: true,
-                util: true,
-                url: true,
-                punycode: true,
-                querystring: true,
-                stringDecoder: true,
-                stream: true,
-                timers: true,
-                events: true,
-            },
-        },
-        {
-            name: 'get sendRequest response through await or callback',
-            customVerify: (bodyJson: any) => {
-                const requestBody = JSON.parse(bodyJson.data);
-                expect(requestBody.bodyFromAwait.method).toEqual('GET');
-                expect(requestBody.bodyFromCallback.method).toEqual('GET');
-            },
-        },
-        {
-            name: 'require the uuid module',
-            expectedBody: {
-                uuid: '00000000-0000-0000-0000-000000000000',
-            },
-        },
-        {
-            name: 'require external modules and built-in lodash',
-            expectedBody: {
-                atob: true,
-                btoa: true,
-                chai: true,
-                cheerio: true,
-                crypto: true,
-                csv: true,
-                lodash: true,
-                moment: true,
-                tv4: true,
-                uuid: true,
-                xml2js: true,
-                builtInLodash: true,
-            },
-        },
-        {
-            name: 'not return until all Promise settled',
-            expectedBody: {
-                asyncTaskDone: true,
-            },
-        },
-        {
-            name: 'not return until all setTimeout finished',
-            expectedBody: {
-                asyncTaskDone: true,
-            },
-        },
-        {
-            name: 'not return until all async tasks finished',
-            expectedBody: {
-                asyncTaskDone: true,
-            },
-        },
-        {
-            name: 'run parent scripts only',
-            expectedBody: {
-                'onlySetByFolderPreScript': 888,
-            },
-        },
-        {
-            name: 'manipulate folder envs',
-            expectedBody: {
-                'folder1ValByReq': 1,
-                'folder1ValByReqByName': 1,
-                'folder2ValByReq': 2,
-                'folder2ValByReqByName': 2,
-                'valFound': 2,
-
-                'folder1ValByFolder1': 1,
-                'folder1ValByFolder1ByName': 1,
-                'folder2ValByFolder1': 2,
-                'folder2ValByFolder1ByName': 2,
-                'valFoundByFolder1': 2,
-
-                'folder1ValByFolder2': 1,
-                'folder1ValByFolder2ByName': 1,
-                'folder2ValByFolder2': 2,
-                'folder2ValByFolder2ByName': 2,
-                'valFoundByFolder2': 2,
-            },
-        },
-    ];
-
-    for (let i = 0; i < testCases.length; i++) {
-        const tc = testCases[i];
-
-        test(tc.name, async ({ page }) => {
-            const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-            const responseBody = page.getByTestId('response-pane').getByTestId('CodeEditor').locator('.CodeMirror-line');
-
-            await page.getByLabel('Request Collection').getByTestId(tc.name).press('Enter');
-
-            // send
-            await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-            // verify
-            await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-
-            await expect(statusTag).toContainText('200 OK');
-
-            const rows = await responseBody.allInnerTexts();
-            expect(rows.length).toBeGreaterThan(0);
-
-            const bodyJson = JSON.parse(rows.join(' '));
-            if (tc.expectedBody) {
-                expect(JSON.parse(bodyJson.data)).toEqual(tc.expectedBody);
-            }
-            if (tc.customVerify) {
-                tc.customVerify(bodyJson);
-            }
+      },
+    },
+    {
+      name: 'insomnia.request manipulation',
+      customVerify: (bodyJson: any) => {
+        expect(bodyJson.method).toEqual('GET');
+        expect(bodyJson.headers['x-hello']).toEqual('hello');
+        expect(bodyJson.data).toEqual('rawContent');
+      },
+    },
+    {
+      name: 'insomnia.request auth manipulation (bearer)',
+      customVerify: (bodyJson: any) => {
+        const authzHeader = bodyJson.headers['authorization'];
+        expect(authzHeader != null).toBeTruthy();
+        expect(bodyJson.headers['authorization']).toEqual('CustomTokenPrefix tokenValue');
+      },
+    },
+    {
+      name: 'insomnia.request auth manipulation (basic)',
+      customVerify: (bodyJson: any) => {
+        const authzHeader = bodyJson.headers['authorization'];
+        expect(authzHeader != null).toBeTruthy();
+        const expectedEncCred = Buffer.from('myName:myPwd', 'utf-8').toString('base64');
+        expect(bodyJson.headers['authorization']).toEqual(`Basic ${expectedEncCred}`);
+      },
+    },
+    {
+      name: 'eval() works in script',
+      expectedBody: {
+        evalResult: 16,
+      },
+    },
+    {
+      name: 'require the url module',
+      customVerify: (bodyJson: any) => {
+        const reqBodyJsons = JSON.parse(bodyJson.data);
+        expect(reqBodyJsons).toEqual({
+          hash: '#hashcontent',
+          host: 'insomnia.com:6666',
+          hostname: 'insomnia.com',
+          href: 'https://user:pwd@insomnia.com:6666/p1?q1=a&q2=b#hashcontent',
+          origin: 'https://insomnia.com:6666',
+          password: 'pwd',
+          pathname: '/p1',
+          port: '6666',
+          protocol: 'https:',
+          search: '?q1=a&q2=b',
+          username: 'user',
+          seachParam: 'q1=a&q2=b',
         });
-    }
+      },
+    },
+    {
+      name: 'require node.js modules',
+      expectedBody: {
+        path: true,
+        assert: true,
+        buffer: true,
+        util: true,
+        url: true,
+        punycode: true,
+        querystring: true,
+        stringDecoder: true,
+        stream: true,
+        timers: true,
+        events: true,
+      },
+    },
+    {
+      name: 'get sendRequest response through await or callback',
+      customVerify: (bodyJson: any) => {
+        const requestBody = JSON.parse(bodyJson.data);
+        expect(requestBody.bodyFromAwait.method).toEqual('GET');
+        expect(requestBody.bodyFromCallback.method).toEqual('GET');
+      },
+    },
+    {
+      name: 'require the uuid module',
+      expectedBody: {
+        uuid: '00000000-0000-0000-0000-000000000000',
+      },
+    },
+    {
+      name: 'require external modules and built-in lodash',
+      expectedBody: {
+        atob: true,
+        btoa: true,
+        chai: true,
+        cheerio: true,
+        crypto: true,
+        csv: true,
+        lodash: true,
+        moment: true,
+        tv4: true,
+        uuid: true,
+        xml2js: true,
+        builtInLodash: true,
+      },
+    },
+    {
+      name: 'not return until all Promise settled',
+      expectedBody: {
+        asyncTaskDone: true,
+      },
+    },
+    {
+      name: 'not return until all setTimeout finished',
+      expectedBody: {
+        asyncTaskDone: true,
+      },
+    },
+    {
+      name: 'not return until all async tasks finished',
+      expectedBody: {
+        asyncTaskDone: true,
+      },
+    },
+    {
+      name: 'run parent scripts only',
+      expectedBody: {
+        onlySetByFolderPreScript: 888,
+      },
+    },
+    {
+      name: 'manipulate folder envs',
+      expectedBody: {
+        folder1ValByReq: 1,
+        folder1ValByReqByName: 1,
+        folder2ValByReq: 2,
+        folder2ValByReqByName: 2,
+        valFound: 2,
 
-    test('send request with content type', async ({ page }) => {
-        const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-        const responseBody = page.getByTestId('response-pane').getByTestId('CodeEditor').locator('.CodeMirror-line');
+        folder1ValByFolder1: 1,
+        folder1ValByFolder1ByName: 1,
+        folder2ValByFolder1: 2,
+        folder2ValByFolder1ByName: 2,
+        valFoundByFolder1: 2,
 
-        await page.getByLabel('Request Collection').getByTestId('echo pre-request script result').press('Enter');
+        folder1ValByFolder2: 1,
+        folder1ValByFolder2ByName: 1,
+        folder2ValByFolder2: 2,
+        folder2ValByFolder2ByName: 2,
+        valFoundByFolder2: 2,
+      },
+    },
+  ];
 
-        // set request body
-        await page.getByRole('tab', { name: 'Body' }).click();
-        await page.getByRole('button', { name: 'Body' }).click();
-        await page.getByRole('option', { name: 'JSON' }).click();
+  for (let i = 0; i < testCases.length; i++) {
+    const tc = testCases[i];
 
-        const bodyEditor = page.getByTestId('CodeEditor').getByRole('textbox');
-        await bodyEditor.fill('{ "rawBody": {{ _.rawBody }}, "urlencodedBody": {{ _.urlencodedBody }}, "gqlBody": {{ _.gqlBody }}, "fileBody": {{ _.fileBody }}, "formdataBody": {{ _.formdataBody }} }');
+    test(tc.name, async ({ page }) => {
+      const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+      const responseBody = page.getByTestId('response-pane').getByTestId('CodeEditor').locator('.CodeMirror-line');
 
-        // enter script
-        await page.getByRole('tab', { name: 'Scripts' }).click();
-        const preRequestScriptEditor = page.getByTestId('CodeEditor').getByRole('textbox');
-        await preRequestScriptEditor.fill(`
+      await page.getByLabel('Request Collection').getByTestId(tc.name).press('Enter');
+
+      // send
+      await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+
+      // verify
+      await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+
+      await expect(statusTag).toContainText('200 OK');
+
+      const rows = await responseBody.allInnerTexts();
+      expect(rows.length).toBeGreaterThan(0);
+
+      const bodyJson = JSON.parse(rows.join(' '));
+      if (tc.expectedBody) {
+        expect(JSON.parse(bodyJson.data)).toEqual(tc.expectedBody);
+      }
+      if (tc.customVerify) {
+        tc.customVerify(bodyJson);
+      }
+    });
+  }
+
+  test('send request with content type', async ({ page }) => {
+    const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+    const responseBody = page.getByTestId('response-pane').getByTestId('CodeEditor').locator('.CodeMirror-line');
+
+    await page.getByLabel('Request Collection').getByTestId('echo pre-request script result').press('Enter');
+
+    // set request body
+    await page.getByRole('tab', { name: 'Body' }).click();
+    await page.getByRole('button', { name: 'Body' }).click();
+    await page.getByRole('option', { name: 'JSON' }).click();
+
+    const bodyEditor = page.getByTestId('CodeEditor').getByRole('textbox');
+    await bodyEditor.fill(
+      '{ "rawBody": {{ _.rawBody }}, "urlencodedBody": {{ _.urlencodedBody }}, "gqlBody": {{ _.gqlBody }}, "fileBody": {{ _.fileBody }}, "formdataBody": {{ _.formdataBody }} }',
+    );
+
+    // enter script
+    await page.getByRole('tab', { name: 'Scripts' }).click();
+    const preRequestScriptEditor = page.getByTestId('CodeEditor').getByRole('textbox');
+    await preRequestScriptEditor.fill(`
         const rawReq = {
             url: 'http://127.0.0.1:4010/echo',
             method: 'POST',
@@ -341,266 +343,273 @@ test.describe('pre-request features tests', async () => {
         insomnia.environment.set('formdataBody', resps[4].body);
         `);
 
-        // TODO: wait for body and pre - request script are persisted to the disk
-        // should improve this part, we should avoid sync this state through db as it introduces race condition
-        await page.waitForTimeout(500);
+    // TODO: wait for body and pre - request script are persisted to the disk
+    // should improve this part, we should avoid sync this state through db as it introduces race condition
+    await page.waitForTimeout(500);
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
 
-        // verify
-        await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+    // verify
+    await page.waitForSelector('[data-testid="response-status-tag"]:visible');
 
-        await expect(statusTag).toContainText('200 OK');
+    await expect(statusTag).toContainText('200 OK');
 
-        const rows = await responseBody.allInnerTexts();
-        expect(rows.length).toBeGreaterThan(0);
+    const rows = await responseBody.allInnerTexts();
+    expect(rows.length).toBeGreaterThan(0);
 
-        const bodyJson = JSON.parse(rows.join(' '));
+    const bodyJson = JSON.parse(rows.join(' '));
 
-        const reqBodyJsons = JSON.parse(bodyJson.data);
-        expect(reqBodyJsons.rawBody.data).toEqual('rawContent');
-        expect(reqBodyJsons.urlencodedBody.data).toEqual('k1=v1&k2=v2');
-        expect(JSON.parse(reqBodyJsons.gqlBody.data)).toEqual({
-            query: 'query',
-            operationName: 'operation',
-            variables: 'var',
-        });
-        expect(reqBodyJsons.fileBody.data).toEqual('raw file content');
-        expect(reqBodyJsons.formdataBody.data).toEqual('--X-INSOMNIA-BOUNDARY\r\nContent-Disposition: form-data; name=\"k1\"\r\n\r\nv1\r\n--X-INSOMNIA-BOUNDARY\r\nContent-Disposition: form-data; name=\"k2\"; filename=\"rawfile.txt\"\r\nContent-Type: text/plain\r\n\r\nraw file content\r\n--X-INSOMNIA-BOUNDARY--\r\n');
+    const reqBodyJsons = JSON.parse(bodyJson.data);
+    expect(reqBodyJsons.rawBody.data).toEqual('rawContent');
+    expect(reqBodyJsons.urlencodedBody.data).toEqual('k1=v1&k2=v2');
+    expect(JSON.parse(reqBodyJsons.gqlBody.data)).toEqual({
+      query: 'query',
+      operationName: 'operation',
+      variables: 'var',
     });
+    expect(reqBodyJsons.fileBody.data).toEqual('raw file content');
+    expect(reqBodyJsons.formdataBody.data).toEqual(
+      '--X-INSOMNIA-BOUNDARY\r\nContent-Disposition: form-data; name="k1"\r\n\r\nv1\r\n--X-INSOMNIA-BOUNDARY\r\nContent-Disposition: form-data; name="k2"; filename="rawfile.txt"\r\nContent-Type: text/plain\r\n\r\nraw file content\r\n--X-INSOMNIA-BOUNDARY--\r\n',
+    );
+  });
 
-    test('insomnia.request / update proxy configuration', async ({ page }) => {
-        const responsePane = page.getByTestId('response-pane');
+  test('insomnia.request / update proxy configuration', async ({ page }) => {
+    const responsePane = page.getByTestId('response-pane');
 
-        // update proxy configuration
-        await page.locator('[data-testid="settings-button"]').click();
-        await page.locator('text=Insomnia Preferences').first().click();
-        await page.getByRole('tab', { name: 'Proxy' }).click();
-        await page.locator('text=Enable proxy').click();
-        await page.locator('[name="httpProxy"]').fill('localhost:1111');
-        await page.locator('[name="httpsProxy"]').fill('localhost:2222');
-        await page.locator('[name="noProxy"]').fill('http://a.com,https://b.com');
-        await page.locator('.app').press('Escape');
-        // add 1s timeout to ensure noProxy settings is applied - INS-4155
-        await page.waitForTimeout(1000);
+    // update proxy configuration
+    await page.locator('[data-testid="settings-button"]').click();
+    await page.locator('text=Insomnia Preferences').first().click();
+    await page.getByRole('tab', { name: 'Proxy' }).click();
+    await page.locator('text=Enable proxy').click();
+    await page.locator('[name="httpProxy"]').fill('localhost:1111');
+    await page.locator('[name="httpsProxy"]').fill('localhost:2222');
+    await page.locator('[name="noProxy"]').fill('http://a.com,https://b.com');
+    await page.locator('.app').press('Escape');
+    // add 1s timeout to ensure noProxy settings is applied - INS-4155
+    await page.waitForTimeout(1000);
 
-        await page.getByLabel('Request Collection').getByTestId('test proxies manipulation').press('Enter');
+    await page.getByLabel('Request Collection').getByTestId('test proxies manipulation').press('Enter');
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
 
-        // verify
-        await page.getByRole('tab', { name: 'Console' }).click();
-        await expect(responsePane).toContainText('localhost:2222'); // original proxy
-        await expect(responsePane).toContainText('Trying 127.0.0.1:8888'); // updated proxy
+    // verify
+    await page.getByRole('tab', { name: 'Console' }).click();
+    await expect(responsePane).toContainText('localhost:2222'); // original proxy
+    await expect(responsePane).toContainText('Trying 127.0.0.1:8888'); // updated proxy
+  });
+
+  test('update clientCertificate if request url contains tag', async ({ page }) => {
+    const responsePane = page.getByTestId('response-pane');
+    const fixturePath = getFixturePath('certificates');
+
+    // update proxy configuration
+    await page.locator('text=Add Certificates').click();
+    await page.locator('text=Add client certificate').click();
+    await page.locator('[name="host"]').fill('127.0.0.1:4010');
+    await page.locator('[data-key="pfx"]').click();
+
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.locator('text=Add PFX or PKCS12 file').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(path.join(fixturePath, 'fake.pfx'));
+    await page.getByRole('button', { name: 'Add certificate' }).click();
+    await page.getByRole('button', { name: 'Done' }).click();
+
+    await page
+      .getByLabel('Request Collection')
+      .getByTestId('test certificate manipulation with tagged url')
+      .press('Enter');
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+    // verify
+    await page.getByRole('tab', { name: 'Console' }).click();
+    await expect(responsePane).toContainText('* Adding SSL PEM certificate');
+    await expect(responsePane).toContainText('Adding SSL KEY certificate');
+  });
+
+  test('insomnia.request / update clientCertificate', async ({ page }) => {
+    const responsePane = page.getByTestId('response-pane');
+    await page.getByLabel('Request Collection').getByTestId('test certificate manipulation').press('Enter');
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+    // verify
+    await page.getByRole('tab', { name: 'Console' }).click();
+    await expect(responsePane).toContainText('Adding SSL PEM certificate');
+    await expect(responsePane).toContainText('Adding SSL KEY certificate');
+  });
+
+  test('pre: insomnia.test and insomnia.expect can work together', async ({ page }) => {
+    await page.getByLabel('Request Collection').getByTestId('insomnia.test').press('Enter');
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+
+    // verify
+    await page.getByRole('tab', { name: 'Tests' }).click();
+
+    const responsePane = page.getByTestId('response-pane');
+    await expect(responsePane).toContainText(
+      'FAILunhappy tests | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200Pre-request Test',
+    );
+    await expect(responsePane).toContainText('PASShappy tests');
+  });
+
+  test('environment and baseEnvironment can be persisted', async ({ page }) => {
+    const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+    await page.getByLabel('Request Collection').getByTestId('persist environment').press('Enter');
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+
+    // verify response
+    await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+    await expect(statusTag).toContainText('200 OK');
+
+    // verify persisted environment
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
+    const responseBody = page.getByRole('dialog').getByTestId('CodeEditor').locator('.CodeMirror-line');
+    const rows = await responseBody.allInnerTexts();
+    const bodyJson = JSON.parse(rows.join(' '));
+
+    expect(bodyJson).toEqual({
+      // no environment is selected so the environment value will be persisted to the base environment
+      fromUrlValue: 'fromUrlValue',
+      fromEditorValue: 'fromEditorValue',
+      __fromScript1: 'baseEnvironment',
+      __fromScript2: 'collection',
+      __fromScript: 'environment',
+      examplehost: 'https://mock.insomnia.rest',
+      a: {
+        b: {
+          c: {
+            url: 'https://mock.insomnia.rest',
+          },
+        },
+      },
     });
+  });
 
-    test('update clientCertificate if request url contains tag', async ({ page }) => {
-        const responsePane = page.getByTestId('response-pane');
-        const fixturePath = getFixturePath('certificates');
+  test('kv pair environment can be updated', async ({ page }) => {
+    const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+    await page.getByLabel('Request Collection').getByTestId('update kv pair environment').press('Enter');
+    // switch to table view environment
+    await page.getByLabel('Manage Environments').click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
+    await page.getByLabel('Table Edit').click();
+    await page.getByRole('button', { name: 'Close' }).click();
+    await page.getByTestId('underlay').click();
 
-        // update proxy configuration
-        await page.locator('text=Add Certificates').click();
-        await page.locator('text=Add client certificate').click();
-        await page.locator('[name="host"]').fill('127.0.0.1:4010');
-        await page.locator('[data-key="pfx"]').click();
+    // send request
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
 
-        const fileChooserPromise = page.waitForEvent('filechooser');
-        await page.locator('text=Add PFX or PKCS12 file').click();
-        const fileChooser = await fileChooserPromise;
-        await fileChooser.setFiles(path.join(fixturePath, 'fake.pfx'));
-        await page.getByRole('button', { name: 'Add certificate' }).click();
-        await page.getByRole('button', { name: 'Done' }).click();
+    // verify response
+    await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+    await expect(statusTag).toContainText('200 OK');
 
-        await page.getByLabel('Request Collection').getByTestId('test certificate manipulation with tagged url').press('Enter');
+    // verify table environments have been updated
+    await page.getByRole('button', { name: 'Manage Environments' }).click();
+    await page.getByRole('button', { name: 'Manage collection environments' }).click();
+    await page.getByText('__environment_type').click();
+    await page.getByText('__environment_value_kv').click();
+    await page.getByText('http://url-from-script').click();
+  });
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-        // verify
-        await page.getByRole('tab', { name: 'Console' }).click();
-        await expect(responsePane).toContainText('* Adding SSL PEM certificate');
-        await expect(responsePane).toContainText('Adding SSL KEY certificate');
-    });
+  test('query params should be transformed correctly', async ({ page }) => {
+    await page.getByLabel('Request Collection').getByTestId('testQueryParams').press('Enter');
 
-    test('insomnia.request / update clientCertificate', async ({ page }) => {
-        const responsePane = page.getByTestId('response-pane');
-        await page.getByLabel('Request Collection').getByTestId('test certificate manipulation').press('Enter');
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-        // verify
-        await page.getByRole('tab', { name: 'Console' }).click();
-        await expect(responsePane).toContainText('Adding SSL PEM certificate');
-        await expect(responsePane).toContainText('Adding SSL KEY certificate');
-    });
+    // verify response
+    const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
+    await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+    await expect(statusTag).toContainText('200 OK');
 
-    test('pre: insomnia.test and insomnia.expect can work together', async ({ page }) => {
-        await page.getByLabel('Request Collection').getByTestId('insomnia.test').press('Enter');
+    const responsePane = page.getByTestId('response-pane');
+    await page.getByRole('tab', { name: 'Console' }).click();
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-        // verify
-        await page.getByRole('tab', { name: 'Tests' }).click();
-
-        const responsePane = page.getByTestId('response-pane');
-        await expect(responsePane).toContainText('FAILunhappy tests | error: AssertionError: expected 199 to deeply equal 200 | ACTUAL: 199 | EXPECTED: 200Pre-request Test');
-        await expect(responsePane).toContainText('PASShappy tests');
-    });
-
-    test('environment and baseEnvironment can be persisted', async ({ page }) => {
-        const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-        await page.getByLabel('Request Collection').getByTestId('persist environment').press('Enter');
-
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-        // verify response
-        await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-        await expect(statusTag).toContainText('200 OK');
-
-        // verify persisted environment
-        await page.getByRole('button', { name: 'Manage Environments' }).click();
-        await page.getByRole('button', { name: 'Manage collection environments' }).click();
-        const responseBody = page.getByRole('dialog').getByTestId('CodeEditor').locator('.CodeMirror-line');
-        const rows = await responseBody.allInnerTexts();
-        const bodyJson = JSON.parse(rows.join(' '));
-
-        expect(bodyJson).toEqual({
-            // no environment is selected so the environment value will be persisted to the base environment
-            'fromUrlValue': 'fromUrlValue',
-            'fromEditorValue': 'fromEditorValue',
-            '__fromScript1': 'baseEnvironment',
-            '__fromScript2': 'collection',
-            '__fromScript': 'environment',
-            'examplehost': 'https://mock.insomnia.rest',
-            'a': {
-                'b': {
-                    'c': {
-                        'url': 'https://mock.insomnia.rest',
-                    },
-                },
-            },
-        });
-    });
-
-    test('kv pair environment can be updated', async ({ page }) => {
-        const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-        await page.getByLabel('Request Collection').getByTestId('update kv pair environment').press('Enter');
-        // switch to table view environment
-        await page.getByLabel('Manage Environments').click();
-        await page.getByRole('button', { name: 'Manage collection environments' }).click();
-        await page.getByLabel('Table Edit').click();
-        await page.getByRole('button', { name: 'Close' }).click();
-        await page.getByTestId('underlay').click();
-
-        // send request
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-        // verify response
-        await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-        await expect(statusTag).toContainText('200 OK');
-
-        // verify table environments have been updated
-        await page.getByRole('button', { name: 'Manage Environments' }).click();
-        await page.getByRole('button', { name: 'Manage collection environments' }).click();
-        await page.getByText('__environment_type').click();
-        await page.getByText('__environment_value_kv').click();
-        await page.getByText('http://url-from-script').click();
-    });
-
-    test('query params should be transformed correctly', async ({ page }) => {
-        await page.getByLabel('Request Collection').getByTestId('testQueryParams').press('Enter');
-
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
-
-        // verify response
-        const statusTag = page.locator('[data-testid="response-status-tag"]:visible');
-        await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-        await expect(statusTag).toContainText('200 OK');
-
-        const responsePane = page.getByTestId('response-pane');
-        await page.getByRole('tab', { name: 'Console' }).click();
-
-        await expect(responsePane).toContainText('key=fromUrl');
-        await expect(responsePane).toContainText('key=fromUrlValue');
-        await expect(responsePane).toContainText('key=fromEditorValue');
-        await expect(responsePane).toContainText('key=%2F');
-    });
+    await expect(responsePane).toContainText('key=fromUrl');
+    await expect(responsePane).toContainText('key=fromUrlValue');
+    await expect(responsePane).toContainText('key=fromEditorValue');
+    await expect(responsePane).toContainText('key=%2F');
+  });
 });
 
 test.describe('unhappy paths', async () => {
-    test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
+  test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
 
-    test.beforeEach(async ({ app, page }) => {
-        const text = await loadFixture('pre-request-collection.yaml');
-        await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
+  test.beforeEach(async ({ app, page }) => {
+    const text = await loadFixture('pre-request-collection.yaml');
+    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
 
-        await page.getByLabel('Import').click();
-        await page.locator('[data-test-id="import-from-clipboard"]').click();
-        await page.getByRole('button', { name: 'Scan' }).click();
-        await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
+    await page.getByLabel('Import').click();
+    await page.locator('[data-test-id="import-from-clipboard"]').click();
+    await page.getByRole('button', { name: 'Scan' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
 
-        await page.getByLabel('Pre-request Scripts').click();
-    });
+    await page.getByLabel('Pre-request Scripts').click();
+  });
 
-    const testCases = [
-        {
-            name: 'custom error is returned',
-            preReqScript: `
+  const testCases = [
+    {
+      name: 'custom error is returned',
+      preReqScript: `
           throw Error('my custom error');
           `,
-            context: {
-                insomnia: {},
-            },
-            expectedResult: {
-                message: 'my custom error',
-            },
-        },
-        {
-            name: 'syntax error',
-            preReqScript: `
+      context: {
+        insomnia: {},
+      },
+      expectedResult: {
+        message: 'my custom error',
+      },
+    },
+    {
+      name: 'syntax error',
+      preReqScript: `
           insomnia.INVALID_FIELD.set('', '')
           `,
-            context: {
-                insomnia: {},
-            },
-            expectedResult: {
-                message: "Cannot read properties of undefined (reading 'set')",
-            },
-        },
-    ];
+      context: {
+        insomnia: {},
+      },
+      expectedResult: {
+        message: "Cannot read properties of undefined (reading 'set')",
+      },
+    },
+  ];
 
-    for (let i = 0; i < testCases.length; i++) {
-        const tc = testCases[i];
+  for (let i = 0; i < testCases.length; i++) {
+    const tc = testCases[i];
 
-        test(tc.name, async ({ page }) => {
-            const responsePane = page.getByTestId('response-pane');
+    test(tc.name, async ({ page }) => {
+      const responsePane = page.getByTestId('response-pane');
 
-            await page.getByLabel('Request Collection').getByTestId('echo pre-request script result').press('Enter');
+      await page.getByLabel('Request Collection').getByTestId('echo pre-request script result').press('Enter');
 
-            // set request body
-            await page.getByRole('tab', { name: 'Body' }).click();
-            await page.getByRole('button', { name: 'Body' }).click();
-            await page.getByRole('option', { name: 'JSON' }).click();
+      // set request body
+      await page.getByRole('tab', { name: 'Body' }).click();
+      await page.getByRole('button', { name: 'Body' }).click();
+      await page.getByRole('option', { name: 'JSON' }).click();
 
-            // enter script
-            await page.getByRole('tab', { name: 'Scripts' }).click();
-            const preRequestScriptEditor = page.getByTestId('CodeEditor').getByRole('textbox');
-            await preRequestScriptEditor.fill(tc.preReqScript);
+      // enter script
+      await page.getByRole('tab', { name: 'Scripts' }).click();
+      const preRequestScriptEditor = page.getByTestId('CodeEditor').getByRole('textbox');
+      await preRequestScriptEditor.fill(tc.preReqScript);
 
-            // TODO: wait for body and pre-request script are persisted to the disk
-            // should improve this part, we should avoid sync this state through db as it introduces race condition
-            await page.waitForTimeout(500);
+      // TODO: wait for body and pre-request script are persisted to the disk
+      // should improve this part, we should avoid sync this state through db as it introduces race condition
+      await page.waitForTimeout(500);
 
-            // send
-            await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
+      // send
+      await page.getByTestId('request-pane').getByRole('button', { name: 'Send' }).click();
 
-            // verify
-            await page.waitForSelector('[data-testid="response-status-tag"]:visible');
-            await expect(responsePane).toContainText(tc.expectedResult.message);
-        });
-    }
+      // verify
+      await page.waitForSelector('[data-testid="response-status-tag"]:visible');
+      await expect(responsePane).toContainText(tc.expectedResult.message);
+    });
+  }
 });
diff --git a/packages/insomnia-smoke-test/tests/smoke/runner.test.ts b/packages/insomnia-smoke-test/tests/smoke/runner.test.ts
index 6468056d9f..9a221ef8ca 100644
--- a/packages/insomnia-smoke-test/tests/smoke/runner.test.ts
+++ b/packages/insomnia-smoke-test/tests/smoke/runner.test.ts
@@ -1,300 +1,274 @@
 import { expect, type Page } from '@playwright/test';
 
 import { getFixturePath, loadFixture } from '../../playwright/paths';
-import { test } from '../../playwright/test';;
+import { test } from '../../playwright/test';
 
 test.describe('runner features tests', async () => {
-    test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
+  test.slow(process.platform === 'darwin' || process.platform === 'win32', 'Slow app start on these platforms');
 
-    test.beforeEach(async ({ app, page }) => {
-        const text = await loadFixture('runner-collection.yaml');
-        await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
+  test.beforeEach(async ({ app, page }) => {
+    const text = await loadFixture('runner-collection.yaml');
+    await app.evaluate(async ({ clipboard }, text) => clipboard.writeText(text), text);
 
-        await page.getByLabel('Import').click();
-        await page.locator('[data-test-id="import-from-clipboard"]').click();
-        await page.getByRole('button', { name: 'Scan' }).click();
-        await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
+    await page.getByLabel('Import').click();
+    await page.locator('[data-test-id="import-from-clipboard"]').click();
+    await page.getByRole('button', { name: 'Scan' }).click();
+    await page.getByRole('dialog').getByRole('button', { name: 'Import' }).click();
 
-        await page.getByLabel('Runner').click();
-    });
+    await page.getByLabel('Runner').click();
+  });
 
-    const verifyResultRows = async (
-        page: Page,
-        expectedPassed: number,
-        expectedSkipped: number,
-        expectedTotal: number,
-        expectedTestOrder: string[],
-        iteration: number = 1,
-    ) => {
-        let passedResultCount = 0;
-        let failedResultCount = 0;
-        let skippedResultCount = 0;
+  const verifyResultRows = async (
+    page: Page,
+    expectedPassed: number,
+    expectedSkipped: number,
+    expectedTotal: number,
+    expectedTestOrder: string[],
+    iteration: number = 1,
+  ) => {
+    let passedResultCount = 0;
+    let failedResultCount = 0;
+    let skippedResultCount = 0;
 
-        const testResults = page.getByTestId(`runner-test-result-iteration-${iteration}`).getByTestId('test-result-row');
-        const testResultCount = await testResults.count();
+    const testResults = page.getByTestId(`runner-test-result-iteration-${iteration}`).getByTestId('test-result-row');
+    const testResultCount = await testResults.count();
 
-        expect(expectedTestOrder.length).toEqual(testResultCount);
+    expect(expectedTestOrder.length).toEqual(testResultCount);
 
-        for (let i = 0; i < testResultCount; i++) {
-            const resultMsg = await testResults.nth(i).textContent();
-            if (resultMsg?.startsWith('PASS')) {
-                passedResultCount++;
-            }
-            if (resultMsg?.startsWith('FAIL')) {
-                failedResultCount++;
-            }
-            if (resultMsg?.startsWith('SKIP')) {
-                skippedResultCount++;
-            }
+    for (let i = 0; i < testResultCount; i++) {
+      const resultMsg = await testResults.nth(i).textContent();
+      if (resultMsg?.startsWith('PASS')) {
+        passedResultCount++;
+      }
+      if (resultMsg?.startsWith('FAIL')) {
+        failedResultCount++;
+      }
+      if (resultMsg?.startsWith('SKIP')) {
+        skippedResultCount++;
+      }
 
-            const expectedResultText = expectedTestOrder[i];
-            expect(resultMsg).toContain(expectedResultText);
-        }
-        expect(passedResultCount).toEqual(expectedPassed);
-        expect(skippedResultCount).toEqual(expectedSkipped);
-        expect(passedResultCount + failedResultCount + skippedResultCount).toEqual(expectedTotal);
+      const expectedResultText = expectedTestOrder[i];
+      expect(resultMsg).toContain(expectedResultText);
+    }
+    expect(passedResultCount).toEqual(expectedPassed);
+    expect(skippedResultCount).toEqual(expectedSkipped);
+    expect(passedResultCount + failedResultCount + skippedResultCount).toEqual(expectedTotal);
+  };
+
+  test('run collection runner', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
+
+    // select requests to test
+    await page.locator('.runner-request-list-req1').click();
+    await page.locator('.runner-request-list-req2').click();
+
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Run' }).click();
+
+    // verification
+    const verifyTestCounts = async (expectedPassed: number, expectedTotal: number) => {
+      await page.getByText('Req2-Pre-Check').click();
+
+      const testResultCounts = await page.locator('.test-result-count').allInnerTexts();
+      expect(testResultCounts.length).toBe(1);
+
+      const countParts = testResultCounts[0].split('/');
+      expect(countParts.length).toBe(2);
+
+      const summarizedPassedCount = parseInt(countParts[0], 10);
+      const summarizedTotalCount = parseInt(countParts[1], 10);
+      expect(summarizedPassedCount).toEqual(expectedPassed);
+      expect(summarizedTotalCount).toEqual(expectedTotal);
     };
+    await page.getByText('6 / 8').click();
+    await verifyTestCounts(6, 8);
 
-    test('run collection runner', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    const expectedTestOrder = [
+      'folder-pre-check',
+      'req1-pre-check-skipped',
+      'req1-pre-check',
+      'folder-post-check',
+      'req1-post-check',
+      'expected 200 to deeply equal 201',
+      'req2-pre-check',
+      'req2-post-check',
+    ];
 
-        // select requests to test
-        await page.locator('.runner-request-list-req1').click();
-        await page.locator('.runner-request-list-req2').click();
+    await verifyResultRows(page, 6, 1, 8, expectedTestOrder);
+  });
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Run' }).click();
+  test('run collection runner with data upload', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        // verification
-        const verifyTestCounts = async (
-            expectedPassed: number,
-            expectedTotal: number,
-        ) => {
-            await page.getByText('Req2-Pre-Check').click();
+    // upload data
+    await page.getByText('Upload Data').click();
+    const uploadDataPath = getFixturePath('files/runner-data.json');
+    const fileChooserPromise = page.waitForEvent('filechooser');
+    await page.getByText('Select Data File').click();
+    const fileChooser = await fileChooserPromise;
+    await fileChooser.setFiles(uploadDataPath);
+    await page.getByRole('dialog').getByText('Upload').click();
+    // check iteration number match json data length
+    expect(await page.locator('input[name="Iterations"]').inputValue()).toBe('2');
 
-            const testResultCounts = await page.locator('.test-result-count').allInnerTexts();
-            expect(testResultCounts.length).toBe(1);
+    // select requests to test
+    await page.locator('.runner-request-list-req1').click();
+    await page.locator('.runner-request-list-req2').click();
+    await page.locator('.runner-request-list-req3').click();
+    await page.locator('.runner-request-list-req4').click();
+    await page.locator('.runner-request-list-req5').click();
 
-            const countParts = testResultCounts[0].split('/');
-            expect(countParts.length).toBe(2);
+    // send
+    await page.getByTestId('request-pane').getByRole('button', { name: 'Run' }).click();
+    // check result
+    await page.getByText('ITERATION 1').click();
+    for (let i = 1; i <= 2; i++) {
+      const testId = `runner-test-result-iteration-${i}`;
+      const iterationTestResultElement = page.getByTestId(testId);
+      await iterationTestResultElement.click();
+      expect(iterationTestResultElement).toBeVisible();
+      // req2 should be skipped from pre-request script
+      expect(iterationTestResultElement).not.toContainText('req2');
+    }
 
-            const summarizedPassedCount = parseInt(countParts[0], 10);
-            const summarizedTotalCount = parseInt(countParts[1], 10);
-            expect(summarizedPassedCount).toEqual(expectedPassed);
-            expect(summarizedTotalCount).toEqual(expectedTotal);
-        };
-        await page.getByText('6 / 8').click();
-        await verifyTestCounts(6, 8);
+    await verifyResultRows(page, 4, 1, 6, [
+      'folder-pre-check',
+      'req1-pre-check-skipped',
+      'req1-pre-check',
+      'folder-post-check',
+      'req1-post-check',
+      'expected 200 to deeply equal 201',
+    ]);
+  });
 
-        const expectedTestOrder = [
-            'folder-pre-check',
-            'req1-pre-check-skipped',
-            'req1-pre-check',
-            'folder-post-check',
-            'req1-post-check',
-            'expected 200 to deeply equal 201',
-            'req2-pre-check',
-            'req2-post-check',
-        ];
+  test('run req4 3 times with setNextRequest the pre-request script', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        await verifyResultRows(page, 6, 1, 8, expectedTestOrder);
-    });
+    await page.locator('.runner-request-list-req4').click();
 
-    test('run collection runner with data upload', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    // send
+    await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        // upload data
-        await page.getByText('Upload Data').click();
-        const uploadDataPath = getFixturePath('files/runner-data.json');
-        const fileChooserPromise = page.waitForEvent('filechooser');
-        await page.getByText('Select Data File').click();
-        const fileChooser = await fileChooserPromise;
-        await fileChooser.setFiles(uploadDataPath);
-        await page.getByRole('dialog').getByText('Upload').click();
-        // check iteration number match json data length
-        expect(await page.locator('input[name="Iterations"]').inputValue()).toBe('2');
+    // check result
+    await page.getByText('3 / 3').first().click();
 
-        // select requests to test
-        await page.locator('.runner-request-list-req1').click();
-        await page.locator('.runner-request-list-req2').click();
-        await page.locator('.runner-request-list-req3').click();
-        await page.locator('.runner-request-list-req4').click();
-        await page.locator('.runner-request-list-req5').click();
+    const expectedTestOrder = ['req4-post-check', 'req4-post-check', 'req4-post-check'];
 
-        // send
-        await page.getByTestId('request-pane').getByRole('button', { name: 'Run' }).click();
-        // check result
-        await page.getByText('ITERATION 1').click();
-        for (let i = 1; i <= 2; i++) {
-            const testId = `runner-test-result-iteration-${i}`;
-            const iterationTestResultElement = page.getByTestId(testId);
-            await iterationTestResultElement.click();
-            expect(iterationTestResultElement).toBeVisible();
-            // req2 should be skipped from pre-request script
-            expect(iterationTestResultElement).not.toContainText('req2');
-        }
+    await verifyResultRows(page, 3, 0, 3, expectedTestOrder, 1);
+  });
 
-        await verifyResultRows(page, 4, 1, 6, [
-            'folder-pre-check',
-            'req1-pre-check-skipped',
-            'req1-pre-check',
-            'folder-post-check',
-            'req1-post-check',
-            'expected 200 to deeply equal 201',
-        ]);
+  test('await test works', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-    });
+    await page.locator('.runner-request-list-await-test').click();
 
-    test('run req4 3 times with setNextRequest the pre-request script', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    // send
+    await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        await page.locator('.runner-request-list-req4').click();
+    // check result
+    await page.getByText('0 / 3').first().click();
 
-        // send
-        await page.getByRole('button', { name: 'Run', exact: true }).click();
+    const expectedTestOrder = ['t1', 't2', 't3'];
 
-        // check result
-        await page.getByText('3 / 3').first().click();
+    await verifyResultRows(page, 0, 0, 3, expectedTestOrder, 1);
+  });
 
-        const expectedTestOrder = [
-            'req4-post-check',
-            'req4-post-check',
-            'req4-post-check',
-        ];
+  test('run req5 3 times with setNextRequest in the after-response script', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        await verifyResultRows(page, 3, 0, 3, expectedTestOrder, 1);
-    });
+    await page.locator('.runner-request-list-req5').click();
 
-    test('await test works', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    // send
+    await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        await page.locator('.runner-request-list-await-test').click();
+    // check result
+    await page.getByText('3 / 3').first().click();
 
-        // send
-        await page.getByRole('button', { name: 'Run', exact: true }).click();
+    const expectedTestOrder = ['req5-post-check', 'req5-post-check', 'req5-post-check'];
 
-        // check result
-        await page.getByText('0 / 3').first().click();
+    await verifyResultRows(page, 3, 0, 3, expectedTestOrder, 1);
+  });
 
-        const expectedTestOrder = [
-            't1',
-            't2',
-            't3',
-        ];
+  test('skip req01 with setNextRequest', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        await verifyResultRows(page, 0, 0, 3, expectedTestOrder, 1);
-    });
+    await page.locator('.runner-request-list-req0').click();
+    await page.locator('.runner-request-list-req01').click();
+    await page.locator('.runner-request-list-req02').click();
 
-    test('run req5 3 times with setNextRequest in the after-response script', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    // send
+    await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        await page.locator('.runner-request-list-req5').click();
+    // check result
+    await page.getByText('1 / 2').first().click();
 
-        // send
-        await page.getByRole('button', { name: 'Run', exact: true }).click();
+    const expectedTestOrder = [
+      'req0-post-check',
+      // 'req01-post-check' is skipped
+      'req02-post-check',
+    ];
 
-        // check result
-        await page.getByText('3 / 3').first().click();
+    await verifyResultRows(page, 1, 1, 2, expectedTestOrder, 1);
+  });
 
-        const expectedTestOrder = [
-            'req5-post-check',
-            'req5-post-check',
-            'req5-post-check',
-        ];
+  test('can read variables during whole execution', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        await verifyResultRows(page, 3, 0, 3, expectedTestOrder, 1);
-    });
+    await page.locator('.runner-request-list-set-var1').click();
+    await page.locator('.runner-request-list-read-var1').click();
 
-    test('skip req01 with setNextRequest', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    // send
+    await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        await page.locator('.runner-request-list-req0').click();
-        await page.locator('.runner-request-list-req01').click();
-        await page.locator('.runner-request-list-req02').click();
+    // check result
+    await page.getByText('3 / 3').first().click();
 
-        // send
-        await page.getByRole('button', { name: 'Run', exact: true }).click();
+    const expectedTestOrder = ['set-var1-check', 'read-var1-pre-check', 'read-var1-post-check'];
 
-        // check result
-        await page.getByText('1 / 2').first().click();
+    await verifyResultRows(page, 3, 0, 3, expectedTestOrder, 1);
+  });
 
-        const expectedTestOrder = [
-            'req0-post-check',
-            // 'req01-post-check' is skipped
-            'req02-post-check',
-        ];
+  test('can detect sync and async test failure', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        await verifyResultRows(page, 1, 1, 2, expectedTestOrder, 1);
-    });
+    await page.locator('.runner-request-list-async-test').click();
 
-    test('can read variables during whole execution', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    // send
+    await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        await page.locator('.runner-request-list-set-var1').click();
-        await page.locator('.runner-request-list-read-var1').click();
+    // check result
+    await page.getByText('0 / 4').first().click();
 
-        // send
-        await page.getByRole('button', { name: 'Run', exact: true }).click();
+    const expectedTestOrder = ['sync_pre_test', 'async_pre_test', 'sync_post_test', 'async_post_test'];
 
-        // check result
-        await page.getByText('3 / 3').first().click();
+    await verifyResultRows(page, 0, 0, 4, expectedTestOrder, 1);
+  });
 
-        const expectedTestOrder = [
-            'set-var1-check',
-            'read-var1-pre-check',
-            'read-var1-post-check',
-        ];
+  test('settings: can turn off logs', async ({ page }) => {
+    await page.getByTestId('run-collection-btn-quick').click();
 
-        await verifyResultRows(page, 3, 0, 3, expectedTestOrder, 1);
-    });
+    await page.locator('.runner-request-list-printLogs').click();
 
-    test('can detect sync and async test failure', async ({ page }) => {
-        await page.getByTestId('run-collection-btn-quick').click();
+    const expectToHaveLogs = [false, true];
 
-        await page.locator('.runner-request-list-async-test').click();
+    for (const expectToHaveLog of expectToHaveLogs) {
+      // configure
+      await page.getByRole('tab', { name: 'advanced' }).click();
+      await page.locator('input[name="enable-log"]').click();
 
-        // send
-        await page.getByRole('button', { name: 'Run', exact: true }).click();
+      // send
+      await page.getByRole('button', { name: 'Run', exact: true }).click();
 
-        // check result
-        await page.getByText('0 / 4').first().click();
+      // verify there's no log
+      await page.getByText('1 / 1').first().click();
+      await page.getByRole('tab', { name: 'Console' }).click();
 
-        const expectedTestOrder = [
-            'sync_pre_test',
-            'async_pre_test',
-            'sync_post_test',
-            'async_post_test',
-        ];
-
-        await verifyResultRows(page, 0, 0, 4, expectedTestOrder, 1);
-    });
-
-    test('settings: can turn off logs', async ({ page }) => {
-
-        await page.getByTestId('run-collection-btn-quick').click();
-
-        await page.locator('.runner-request-list-printLogs').click();
-
-        const expectToHaveLogs = [false, true];
-
-        for (const expectToHaveLog of expectToHaveLogs) {
-            // configure
-            await page.getByRole('tab', { name: 'advanced' }).click();
-            await page.locator('input[name="enable-log"]').click();
-
-            // send
-            await page.getByRole('button', { name: 'Run', exact: true }).click();
-
-            // verify there's no log
-            await page.getByText('1 / 1').first().click();
-            await page.getByRole('tab', { name: 'Console' }).click();
-
-            const consoleTabContent = page.locator('.pane-two');
-            if (expectToHaveLog) {
-                await expect(consoleTabContent).toContainText("it won't print");
-            } else {
-                await expect(consoleTabContent).not.toContainText("it won't print");
-            }
-        }
-    });
+      const consoleTabContent = page.locator('.pane-two');
+      if (expectToHaveLog) {
+        await expect(consoleTabContent).toContainText("it won't print");
+      } else {
+        await expect(consoleTabContent).not.toContainText("it won't print");
+      }
+    }
+  });
 });
diff --git a/packages/insomnia-testing/src/generate/generate.ts b/packages/insomnia-testing/src/generate/generate.ts
index 3e98bd6435..4c4d6273d0 100644
--- a/packages/insomnia-testing/src/generate/generate.ts
+++ b/packages/insomnia-testing/src/generate/generate.ts
@@ -30,10 +30,7 @@ export const generate = (suites: TestSuite[]) => {
   return lines.join('\n');
 };
 
-export const generateToFile = async (
-  filepath: string,
-  suites: TestSuite[],
-) => {
+export const generateToFile = async (filepath: string, suites: TestSuite[]) => {
   return new Promise<void>((resolve, reject) => {
     const js = generate(suites);
     return writeFile(filepath, js, err => {
@@ -46,10 +43,7 @@ export const generateToFile = async (
   });
 };
 
-const generateSuiteLines = (
-  n: number,
-  suite?: TestSuite | null,
-) => {
+const generateSuiteLines = (n: number, suite?: TestSuite | null) => {
   if (!suite) {
     return [];
   }
@@ -98,9 +92,7 @@ const generateTestLines = (num: number, test?: Test | null) => {
 
   if (typeof defaultRequestId === 'string') {
     lines.push(indent(num, '// Set active request on global insomnia object'));
-    lines.push(
-      indent(num, `insomnia.setActiveRequestId('${defaultRequestId}');`),
-    );
+    lines.push(indent(num, `insomnia.setActiveRequestId('${defaultRequestId}');`));
   }
 
   // Add user-defined test source
diff --git a/packages/insomnia-testing/src/generate/index.ts b/packages/insomnia-testing/src/generate/index.ts
index 97674e02d3..d067027158 100644
--- a/packages/insomnia-testing/src/generate/index.ts
+++ b/packages/insomnia-testing/src/generate/index.ts
@@ -1,8 +1,5 @@
 import type { Test, TestSuite } from './generate';
 
-export {
-  generate,
-  generateToFile,
-} from './generate';
+export { generate, generateToFile } from './generate';
 
 export type { Test, TestSuite };
diff --git a/packages/insomnia-testing/src/generate/util.test.ts b/packages/insomnia-testing/src/generate/util.test.ts
index 1760cb4fb4..44c46908d5 100644
--- a/packages/insomnia-testing/src/generate/util.test.ts
+++ b/packages/insomnia-testing/src/generate/util.test.ts
@@ -15,10 +15,8 @@ describe('util', () => {
     });
 
     it('indents multi-line blocks', () => {
-      const text = 'function greet() {\n  console.log(\'Hello World!\');\n}';
-      expect(indent(1, text)).toBe(
-        '  function greet() {\n    console.log(\'Hello World!\');\n  }',
-      );
+      const text = "function greet() {\n  console.log('Hello World!');\n}";
+      expect(indent(1, text)).toBe("  function greet() {\n    console.log('Hello World!');\n  }");
     });
   });
 
diff --git a/packages/insomnia-testing/src/generate/util.ts b/packages/insomnia-testing/src/generate/util.ts
index 45733eb9bf..61f63864d7 100644
--- a/packages/insomnia-testing/src/generate/util.ts
+++ b/packages/insomnia-testing/src/generate/util.ts
@@ -1,5 +1,5 @@
 export const escapeJsStr = (s: string) => {
-  return s.replace(/'/g, '\\\'');
+  return s.replace(/'/g, "\\'");
 };
 
 export const indent = (level: number, code: string) => {
diff --git a/packages/insomnia-testing/src/index.ts b/packages/insomnia-testing/src/index.ts
index 16f646581e..94c4866be4 100644
--- a/packages/insomnia-testing/src/index.ts
+++ b/packages/insomnia-testing/src/index.ts
@@ -1,13 +1,7 @@
 import type { Test, TestSuite } from './generate';
 import type { TestResults } from './run';
-export {
-  generate,
-  generateToFile,
-} from './generate';
+export { generate, generateToFile } from './generate';
 
-export {
-  runTests,
-  runTestsCli,
-} from './run';
+export { runTests, runTestsCli } from './run';
 
 export type { Test, TestSuite, TestResults };
diff --git a/packages/insomnia-testing/src/integration/integration.test.ts b/packages/insomnia-testing/src/integration/integration.test.ts
index 3afec7749f..d5b2d74627 100644
--- a/packages/insomnia-testing/src/integration/integration.test.ts
+++ b/packages/insomnia-testing/src/integration/integration.test.ts
@@ -1,4 +1,3 @@
-
 import { describe, expect, it } from 'vitest';
 import { vi } from 'vitest';
 
@@ -14,8 +13,7 @@ describe('integration', () => {
         tests: [
           {
             name: 'should return -1 when the value is not present',
-            code:
-              'expect([1, 2, 3].indexOf(4)).to.equal(-1);\nexpect(true).to.equal(true);',
+            code: 'expect([1, 2, 3].indexOf(4)).to.equal(-1);\nexpect(true).to.equal(true);',
             defaultRequestId: null,
           },
           {
@@ -43,8 +41,7 @@ describe('integration', () => {
         tests: [
           {
             name: 'should return -1 when the value is not present',
-            code:
-              'expect([1, 2, 3].indexOf(4)).to.equal(-1);\nexpect(true).to.be.true;',
+            code: 'expect([1, 2, 3].indexOf(4)).to.equal(-1);\nexpect(true).to.be.true;',
             defaultRequestId: null,
           },
           {
@@ -95,9 +92,9 @@ describe('integration', () => {
             name: 'Tests referencing request by ID',
             defaultRequestId: null,
             code: [
-              'const resp = await insomnia.send(\'foo\');',
+              "const resp = await insomnia.send('foo');",
               'expect(resp.status).to.equal(200);',
-              'expect(resp.statusMessage).to.equal(\'abc\');',
+              "expect(resp.statusMessage).to.equal('abc');",
             ].join('\n'),
           },
           {
@@ -106,7 +103,7 @@ describe('integration', () => {
             code: [
               'const resp = await insomnia.send();',
               'expect(resp.status).to.equal(301);',
-              'expect(resp.statusMessage).to.equal(\'def\');',
+              "expect(resp.statusMessage).to.equal('def');",
             ].join('\n'),
           },
         ],
diff --git a/packages/insomnia-testing/src/run/index.ts b/packages/insomnia-testing/src/run/index.ts
index 464d833f7d..19a7c5faf0 100644
--- a/packages/insomnia-testing/src/run/index.ts
+++ b/packages/insomnia-testing/src/run/index.ts
@@ -1,9 +1,4 @@
 import type { TestResults } from './entities';
-export {
-  runTests,
-  runTestsCli,
-} from './run';
+export { runTests, runTestsCli } from './run';
 
-export type {
-  TestResults,
-};
+export type { TestResults };
diff --git a/packages/insomnia-testing/src/run/javascript-reporter.ts b/packages/insomnia-testing/src/run/javascript-reporter.ts
index 1aef2e9ee6..6c3939acef 100644
--- a/packages/insomnia-testing/src/run/javascript-reporter.ts
+++ b/packages/insomnia-testing/src/run/javascript-reporter.ts
@@ -3,8 +3,8 @@
  *
  * https://github.com/mochajs/mocha/blob/9d4a8ec2d22ee154aecb1f8eeb25af8e6309faa8/lib/reporters/json.js
  */
-import type { Runnable, Runner, Test } from 'mocha';
-import Mocha, { type MochaOptions, reporters } from 'mocha';
+import type { MochaOptions, Runnable, Runner, Test } from 'mocha';
+import Mocha, { reporters } from 'mocha';
 
 import type { TestResult, TestResults } from './entities';
 
diff --git a/packages/insomnia-testing/src/run/run.test.ts b/packages/insomnia-testing/src/run/run.test.ts
index 6552f351a6..8c084b370b 100644
--- a/packages/insomnia-testing/src/run/run.test.ts
+++ b/packages/insomnia-testing/src/run/run.test.ts
@@ -28,7 +28,8 @@ describe('Example', () => {
 `;
 
 describe('run', () => {
-  const getMockedSendRequest = () => vi.fn<SendRequestCallback<{ status: number }>>().mockResolvedValue({ status: 200 });
+  const getMockedSendRequest = () =>
+    vi.fn<SendRequestCallback<{ status: number }>>().mockResolvedValue({ status: 200 });
 
   it('runs a mocha suite', async () => {
     const { stats } = await runTests(exampleTest, { sendRequest: getMockedSendRequest() });
@@ -54,10 +55,7 @@ describe('run', () => {
   it('calls sendRequest() callback', async () => {
     const sendRequest = getMockedSendRequest();
 
-    const { stats } = await runTests(
-      exampleTestWithRequest,
-      { sendRequest },
-    );
+    const { stats } = await runTests(exampleTestWithRequest, { sendRequest });
 
     expect(sendRequest).toHaveBeenCalledWith('req_123');
     expect(stats.passes).toBe(1);
diff --git a/packages/insomnia-testing/src/run/run.ts b/packages/insomnia-testing/src/run/run.ts
index dcdbf953d7..df1ffc132e 100644
--- a/packages/insomnia-testing/src/run/run.ts
+++ b/packages/insomnia-testing/src/run/run.ts
@@ -1,12 +1,14 @@
 import chai from 'chai';
 import { unlink, writeFileSync } from 'fs';
 import fs from 'fs';
-import Mocha, { type Reporter, type ReporterConstructor } from 'mocha';
+import type { Reporter, ReporterConstructor } from 'mocha';
+import Mocha from 'mocha';
 import { tmpdir } from 'os';
 import { join } from 'path';
 
 import type { TestResults } from './entities';
-import { Insomnia, type InsomniaOptions } from './insomnia';
+import type { InsomniaOptions } from './insomnia';
+import { Insomnia } from './insomnia';
 import { JavaScriptReporter } from './javascript-reporter';
 
 // declare var insomnia: Insomnia;
@@ -15,61 +17,61 @@ const runInternal = async <TReturn, TNetworkResponse>(
   options: InsomniaOptions<TNetworkResponse>,
   reporter: Reporter | ReporterConstructor = 'spec',
   extractResult: (runner: Mocha.Runner) => TReturn,
-) => new Promise<TReturn>((resolve, reject) => {
-  const { bail, keepFile, testFilter } = options;
+) =>
+  new Promise<TReturn>((resolve, reject) => {
+    const { bail, keepFile, testFilter } = options;
 
-  // Add global `insomnia` helper.
-  // This is the only way to add new globals to the Mocha environment as far as I can tell
-  // @ts-expect-error -- global hack
-  global.insomnia = new Insomnia(options);
+    // Add global `insomnia` helper.
+    // This is the only way to add new globals to the Mocha environment as far as I can tell
+    // @ts-expect-error -- global hack
+    global.insomnia = new Insomnia(options);
 
-   
-  chai.use(require('chai-json-schema'));
-  // @ts-expect-error -- global hack
-  global.chai = chai;
+    chai.use(require('chai-json-schema'));
+    // @ts-expect-error -- global hack
+    global.chai = chai;
 
-  const mocha: Mocha = new Mocha({
-    //       ms   * sec * min
-    timeout: 1000 * 60 * 1,
-    globals: ['insomnia', 'chai'],
-    bail,
-    reporter,
-    fgrep: testFilter,
-  });
+    const mocha: Mocha = new Mocha({
+      //       ms   * sec * min
+      timeout: 1000 * 60 * 1,
+      globals: ['insomnia', 'chai'],
+      bail,
+      reporter,
+      fgrep: testFilter,
+    });
 
-  const sources = Array.isArray(testSrc) ? testSrc : [testSrc];
-  sources.forEach(source => {
-    mocha.addFile(writeTempFile(source));
-  });
+    const sources = Array.isArray(testSrc) ? testSrc : [testSrc];
+    sources.forEach(source => {
+      mocha.addFile(writeTempFile(source));
+    });
 
-  try {
-    const runner = mocha.run(() => {
-      resolve(extractResult(runner));
+    try {
+      const runner = mocha.run(() => {
+        resolve(extractResult(runner));
 
-      // Remove global since we don't need it anymore
-      // @ts-expect-error -- global hack
-      delete global.insomnia;
-      // @ts-expect-error -- global hack
-      delete global.chai;
+        // Remove global since we don't need it anymore
+        // @ts-expect-error -- global hack
+        delete global.insomnia;
+        // @ts-expect-error -- global hack
+        delete global.chai;
 
-      if (keepFile && mocha.files.length) {
-        console.log(`Test files: ${JSON.stringify(mocha.files)}.`);
-        return;
-      }
+        if (keepFile && mocha.files.length) {
+          console.log(`Test files: ${JSON.stringify(mocha.files)}.`);
+          return;
+        }
 
-      // Clean up temp files
-      mocha.files.forEach(file => {
-        unlink(file, err => {
-          if (err) {
-            console.log('Failed to clean up test file', file, err);
-          }
+        // Clean up temp files
+        mocha.files.forEach(file => {
+          unlink(file, err => {
+            if (err) {
+              console.log('Failed to clean up test file', file, err);
+            }
+          });
         });
       });
-    });
-  } catch (err) {
-    reject(err);
-  }
-});
+    } catch (err) {
+      reject(err);
+    }
+  });
 
 /**
  * Copy test to tmp dir and return the file path
@@ -93,12 +95,7 @@ type CliOptions<TNetworkResponse> = InsomniaOptions<TNetworkResponse> & {
 export const runTestsCli = async <TNetworkResponse>(
   testSrc: string | string[],
   { reporter, ...options }: CliOptions<TNetworkResponse>,
-) => runInternal(
-  testSrc,
-  options,
-  reporter,
-  runner => !runner.stats?.failures,
-);
+) => runInternal(testSrc, options, reporter, runner => !runner.stats?.failures);
 
 /**
  * Run a test file using Mocha and returns JS results
@@ -106,10 +103,11 @@ export const runTestsCli = async <TNetworkResponse>(
 export const runTests = async <TNetworkResponse>(
   testSrc: string | string[],
   options: InsomniaOptions<TNetworkResponse>,
-) => runInternal(
-  testSrc,
-  options,
-  JavaScriptReporter,
-  // @ts-expect-error the `testResults` property is added onto the runner by the JavascriptReporter
-  runner => runner.testResults as TestResults,
-);
+) =>
+  runInternal(
+    testSrc,
+    options,
+    JavaScriptReporter,
+    // @ts-expect-error the `testResults` property is added onto the runner by the JavascriptReporter
+    runner => runner.testResults as TestResults,
+  );
diff --git a/packages/insomnia-testing/tsconfig.json b/packages/insomnia-testing/tsconfig.json
index fcb163244c..75657383e2 100644
--- a/packages/insomnia-testing/tsconfig.json
+++ b/packages/insomnia-testing/tsconfig.json
@@ -17,8 +17,6 @@
     "module": "preserve",
     "noEmit": true,
     /* If your code runs in the DOM: */
-    "lib": [
-      "es2022",
-    ],
+    "lib": ["es2022"]
   }
 }
diff --git a/packages/insomnia/README.md b/packages/insomnia/README.md
index 6790a09c69..60a3fd53a9 100644
--- a/packages/insomnia/README.md
+++ b/packages/insomnia/README.md
@@ -9,7 +9,7 @@ The main desktop application.
 - For real-time data fetching we use SSE (Server-Sent Events). This is a standard way to receive data from the server in real-time. The server will send a message to the client when something happens. The client will receive the message and update the data accordingly. To handle SSE we use the `insomnia-event-source://` protocol which is a custom protocol that gets handled by the app in the main process. This allows us to overcome cross-origin issues and also to handle SSE in a centralized way.
 
 - Polling is also used to fetch data from the server. This is used when we need to fetch data periodically as SSE can sometimes fail and data can go out of sync.
-The main places we use polling are:
+  The main places we use polling are:
   - Refreshing Insomnia Sync data.
   - Refreshing Git Sync data.
   - Refreshing Presence data.
diff --git a/packages/insomnia/customSign.js b/packages/insomnia/customSign.js
index af2c68e7ba..c14d82f8c5 100644
--- a/packages/insomnia/customSign.js
+++ b/packages/insomnia/customSign.js
@@ -8,31 +8,31 @@ const execAsync = util.promisify(exec);
 // through hooking into the signing step of electron-builder while the final squirrel installer is being built
 // This makes it possible to sign the Update.exe and stub of Insomnia.exe that end up in C:\Users\<user>\AppData\Local\insomnia
 exports.default = async function (configuration) {
-    // skip signing if not windows squirrel
-    if (configuration.options.target.length === 0 || configuration.options.target[0].target !== 'squirrel') {
-        console.log('[customSign] Skipping signing because target is not windows squirrel.');
-        return;
-    }
+  // skip signing if not windows squirrel
+  if (configuration.options.target.length === 0 || configuration.options.target[0].target !== 'squirrel') {
+    console.log('[customSign] Skipping signing because target is not windows squirrel.');
+    return;
+  }
 
-    const { USERNAME, PASSWORD, CREDENTIAL_ID, TOTP_SECRET } = process.env;
-    if (!USERNAME || !PASSWORD || !CREDENTIAL_ID || !TOTP_SECRET) {
-        console.log('[customSign] Skipping signing,  Missing required environment variables.');
-        return;
-    }
+  const { USERNAME, PASSWORD, CREDENTIAL_ID, TOTP_SECRET } = process.env;
+  if (!USERNAME || !PASSWORD || !CREDENTIAL_ID || !TOTP_SECRET) {
+    console.log('[customSign] Skipping signing,  Missing required environment variables.');
+    return;
+  }
 
-    // Note: Avoid changing the lines bellow. Risk of breaking the windows code-signing process.
-    // Feedback loop > 15 mins. Requires a branch on origin, a PR, and a separate dummy release pipeline to test changes.
-    // sslcom/codesigner-win has large image size (>1GB) and requires docker within windows-latest host.
-    const rawPath = configuration.path.replace(/(\r\n|\n|\r)/gm, ''); // remove /n and other crap from path
-    console.log('[customSign] File to sign before final packaging:', rawPath);
-    const absolutePath = path.resolve(rawPath); // C:\Users\...\Update.exe
-    const fixedAbsolutePath = absolutePath.replace(/\\/g, '/'); // C:/Users/.../Update.exe
-    const lastSlashIndex = fixedAbsolutePath.lastIndexOf('/'); // index of last / slash
-    const directoryPath = fixedAbsolutePath.substring(0, lastSlashIndex); // C:/Users/...
-    const inputFileName = path.basename(absolutePath); // Update.exe
-    const codeSignPath = 'C:/CodeSignTool/Insomnia'; // path inside docker container
-    const dockerInputFilePath = path.join(codeSignPath, inputFileName); // C:/CodeSignTool/Insomnia/Update.exe
-    const dockerCommand = `docker run --rm \
+  // Note: Avoid changing the lines bellow. Risk of breaking the windows code-signing process.
+  // Feedback loop > 15 mins. Requires a branch on origin, a PR, and a separate dummy release pipeline to test changes.
+  // sslcom/codesigner-win has large image size (>1GB) and requires docker within windows-latest host.
+  const rawPath = configuration.path.replace(/(\r\n|\n|\r)/gm, ''); // remove /n and other crap from path
+  console.log('[customSign] File to sign before final packaging:', rawPath);
+  const absolutePath = path.resolve(rawPath); // C:\Users\...\Update.exe
+  const fixedAbsolutePath = absolutePath.replace(/\\/g, '/'); // C:/Users/.../Update.exe
+  const lastSlashIndex = fixedAbsolutePath.lastIndexOf('/'); // index of last / slash
+  const directoryPath = fixedAbsolutePath.substring(0, lastSlashIndex); // C:/Users/...
+  const inputFileName = path.basename(absolutePath); // Update.exe
+  const codeSignPath = 'C:/CodeSignTool/Insomnia'; // path inside docker container
+  const dockerInputFilePath = path.join(codeSignPath, inputFileName); // C:/CodeSignTool/Insomnia/Update.exe
+  const dockerCommand = `docker run --rm \
         -v "${directoryPath}:${codeSignPath}" \
         -e USERNAME="${USERNAME}" \
         -e PASSWORD="${PASSWORD}" \
@@ -41,19 +41,19 @@ exports.default = async function (configuration) {
         ghcr.io/sslcom/codesigner-win:latest sign \
         \`\`-input_file_path="${dockerInputFilePath}" \`\`-override`;
 
-    try {
-        console.log('[customSign] Docker command:', dockerCommand);
-        console.log('[customSign] Starting to run sign cmd via docker...');
-        const { stdout, stderr } = await execAsync(dockerCommand);
+  try {
+    console.log('[customSign] Docker command:', dockerCommand);
+    console.log('[customSign] Starting to run sign cmd via docker...');
+    const { stdout, stderr } = await execAsync(dockerCommand);
 
-        console.log('[customSign] Docker command output:', stdout);
-        if (stderr) {
-            console.error('[customSign] Docker command error output:', stderr);
-        }
-
-        console.log('[customSign] File signed successfully.');
-    } catch (error) {
-        console.error('[customSign] Error executing Docker command:', error);
-        throw error;
+    console.log('[customSign] Docker command output:', stdout);
+    if (stderr) {
+      console.error('[customSign] Docker command error output:', stderr);
     }
+
+    console.log('[customSign] File signed successfully.');
+  } catch (error) {
+    console.error('[customSign] Error executing Docker command:', error);
+    throw error;
+  }
 };
diff --git a/packages/insomnia/electron-builder.config.js b/packages/insomnia/electron-builder.config.js
index 1f806967cc..a913c3b765 100644
--- a/packages/insomnia/electron-builder.config.js
+++ b/packages/insomnia/electron-builder.config.js
@@ -58,9 +58,7 @@ const config = {
     },
     // If this step fails its possible apple has new license terms which need to be accepted by logging into https://developer.apple.com/account
     notarize: true,
-    asarUnpack: [
-      'node_modules/@getinsomnia/node-libcurl',
-    ],
+    asarUnpack: ['node_modules/@getinsomnia/node-libcurl'],
   },
   dmg: {
     window: {
@@ -88,13 +86,12 @@ const config = {
     ],
     signtoolOptions: {
       sign: './customSign.js',
-      signingHashAlgorithms: ['sha256'], // avoid duplicate signing hook calls https://github.com/electron-userland/electron-builder/issues/3995#issuecomment-505725704  
+      signingHashAlgorithms: ['sha256'], // avoid duplicate signing hook calls https://github.com/electron-userland/electron-builder/issues/3995#issuecomment-505725704
     },
   },
   squirrelWindows: {
     artifactName: `${BINARY_PREFIX}-\${version}.\${ext}`,
-    iconUrl:
-      'https://github.com/kong/insomnia/blob/develop/packages/insomnia/src/icons/icon.ico?raw=true',
+    iconUrl: 'https://github.com/kong/insomnia/blob/develop/packages/insomnia/src/icons/icon.ico?raw=true',
   },
   portable: {
     artifactName: `${BINARY_PREFIX}-\${version}-portable.\${ext}`,
@@ -111,7 +108,7 @@ const config = {
         Comment: 'Insomnia is a cross-platform REST client, built on top of Electron.',
         Categories: 'Development',
         Keywords: 'GraphQL;REST;gRPC;SOAP;openAPI;GitOps;',
-      }
+      },
     },
     target: [
       {
@@ -135,20 +132,23 @@ const config = {
     // Prevents RPM from packaging build-id metadata, some of which is the
     // same across all electron-builder applications, which causes package
     // conflicts
-    fpm: [
-      '--rpm-rpmbuild-define=_build_id_links none',
-    ],
+    fpm: ['--rpm-rpmbuild-define=_build_id_links none'],
   },
   snap: {
     base: 'core22',
   },
 };
 
-const { env: { BUILD_TARGETS }, platform } = process;
+const {
+  env: { BUILD_TARGETS },
+  platform,
+} = process;
 const targets = BUILD_TARGETS?.split(',');
 if (platform && targets) {
   console.log('overriding build targets to: ', targets);
   const PLATFORM_MAP = { darwin: 'mac', linux: 'linux', win32: 'win' };
-  config[PLATFORM_MAP[platform]].target = config[PLATFORM_MAP[platform]].target.filter(({ target }) => targets.includes(target));
+  config[PLATFORM_MAP[platform]].target = config[PLATFORM_MAP[platform]].target.filter(({ target }) =>
+    targets.includes(target),
+  );
 }
 module.exports = config;
diff --git a/packages/insomnia/esbuild.main.ts b/packages/insomnia/esbuild.main.ts
index 81549e94cf..c7a1f22452 100644
--- a/packages/insomnia/esbuild.main.ts
+++ b/packages/insomnia/esbuild.main.ts
@@ -13,27 +13,21 @@ export default async function build(options: Options) {
   const __DEV__ = mode !== 'production';
   const PORT = pkg.dev['dev-server-port'];
 
-  const outdir = __DEV__
-    ? path.join(__dirname, 'src')
-    : path.join(__dirname, 'build');
+  const outdir = __DEV__ ? path.join(__dirname, 'src') : path.join(__dirname, 'build');
 
   const env: Record<string, string> = __DEV__
     ? {
-      'process.env.APP_RENDER_URL': JSON.stringify(
-        `http://localhost:${PORT}/index.html`
-      ),
-      'process.env.HIDDEN_BROWSER_WINDOW_URL': JSON.stringify(
-        `http://localhost:${PORT}/hidden-window.html`
-      ),
-      'process.env.NODE_ENV': JSON.stringify('development'),
-      'process.env.INSOMNIA_ENV': JSON.stringify('development'),
-      'process.env.BUILD_DATE': JSON.stringify(new Date()),
-    }
+        'process.env.APP_RENDER_URL': JSON.stringify(`http://localhost:${PORT}/index.html`),
+        'process.env.HIDDEN_BROWSER_WINDOW_URL': JSON.stringify(`http://localhost:${PORT}/hidden-window.html`),
+        'process.env.NODE_ENV': JSON.stringify('development'),
+        'process.env.INSOMNIA_ENV': JSON.stringify('development'),
+        'process.env.BUILD_DATE': JSON.stringify(new Date()),
+      }
     : {
-      'process.env.NODE_ENV': JSON.stringify('production'),
-      'process.env.INSOMNIA_ENV': JSON.stringify('production'),
-      'process.env.BUILD_DATE': JSON.stringify(new Date()),
-    };
+        'process.env.NODE_ENV': JSON.stringify('production'),
+        'process.env.INSOMNIA_ENV': JSON.stringify('production'),
+        'process.env.BUILD_DATE': JSON.stringify(new Date()),
+      };
   const preload = esbuild.build({
     entryPoints: ['./src/preload.ts'],
     outfile: path.join(outdir, 'preload.js'),
@@ -76,18 +70,13 @@ export default async function build(options: Options) {
     ],
   });
 
-  return Promise.all([
-    main,
-    preload,
-    hiddenBrowserWindowPreload,
-  ]);
+  return Promise.all([main, preload, hiddenBrowserWindowPreload]);
 }
 
 // Build if ran as a cli script
 const isMain = require.main === module;
 
 if (isMain) {
-  const mode =
-    process.env.NODE_ENV === 'development' ? 'development' : 'production';
+  const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production';
   build({ mode });
 }
diff --git a/packages/insomnia/postcss.config.js b/packages/insomnia/postcss.config.js
index cdbe50f3a4..df56d11471 100644
--- a/packages/insomnia/postcss.config.js
+++ b/packages/insomnia/postcss.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   plugins: {
     'tailwindcss/nesting': {},
-    tailwindcss: {},
-    autoprefixer: {},
+    'tailwindcss': {},
+    'autoprefixer': {},
   },
 };
diff --git a/packages/insomnia/scripts/build.ts b/packages/insomnia/scripts/build.ts
index d377172072..a0af80f70a 100644
--- a/packages/insomnia/scripts/build.ts
+++ b/packages/insomnia/scripts/build.ts
@@ -20,12 +20,8 @@ if (require.main === module) {
 export const start = async () => {
   console.log('[build] Starting build');
 
-  console.log(
-    `[build] npm: ${childProcess.spawnSync('npm', ['--version']).stdout}`.trim()
-  );
-  console.log(
-    `[build] node: ${childProcess.spawnSync('node', ['--version']).stdout}`.trim()
-  );
+  console.log(`[build] npm: ${childProcess.spawnSync('npm', ['--version']).stdout}`.trim());
+  console.log(`[build] node: ${childProcess.spawnSync('node', ['--version']).stdout}`.trim());
 
   if (process.version.indexOf('v22.') !== 0) {
     console.log('[build] Node 22.x.x is required to build');
diff --git a/packages/insomnia/send-request/electron/index.js b/packages/insomnia/send-request/electron/index.js
index 5c3240e5e7..a338fd35d7 100644
--- a/packages/insomnia/send-request/electron/index.js
+++ b/packages/insomnia/send-request/electron/index.js
@@ -1,7 +1,8 @@
 // This file implements just enough of the electron module to get sending requests to work
 module.exports = {
   app: {
-    getPath: (/** @type {string} */ name) => name === 'temp' ? require('os').tmpdir() : require('path').join(require('os').tmpdir(), 'insomnia-send-request'),
+    getPath: (/** @type {string} */ name) =>
+      name === 'temp' ? require('os').tmpdir() : require('path').join(require('os').tmpdir(), 'insomnia-send-request'),
   },
   ipcMain: {
     on: () => {
diff --git a/packages/insomnia/setup-vitest.ts b/packages/insomnia/setup-vitest.ts
index feb70c481d..a648df2d06 100644
--- a/packages/insomnia/setup-vitest.ts
+++ b/packages/insomnia/setup-vitest.ts
@@ -5,7 +5,7 @@ import { electronMock } from './src/__mocks__/electron';
 import { database as db } from './src/common/database';
 import * as models from './src/models';
 import { v4Mock } from './src/models/__mocks__/uuid';
-await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
 vi.mock('electron', () => ({ default: electronMock }));
 
 vi.mock('uuid', () => ({
diff --git a/packages/insomnia/src/__mocks__/@getinsomnia/node-libcurl.ts b/packages/insomnia/src/__mocks__/@getinsomnia/node-libcurl.ts
index 783f2db9a3..f317346584 100644
--- a/packages/insomnia/src/__mocks__/@getinsomnia/node-libcurl.ts
+++ b/packages/insomnia/src/__mocks__/@getinsomnia/node-libcurl.ts
@@ -155,12 +155,7 @@ class Curl extends EventEmitter {
           'end',
           'NOT_USED',
           'NOT_USED',
-          [
-            'HTTP/1.1 200 OK',
-            `Content-Length: ${data.length}`,
-            'Content-Type: application/json',
-            '',
-          ].join('\n'),
+          ['HTTP/1.1 200 OK', `Content-Length: ${data.length}`, 'Content-Type: application/json', ''].join('\n'),
         );
       });
     });
diff --git a/packages/insomnia/src/__mocks__/@grpc/grpc-js.ts b/packages/insomnia/src/__mocks__/@grpc/grpc-js.ts
index 6188ef92a9..2308fa14d0 100644
--- a/packages/insomnia/src/__mocks__/@grpc/grpc-js.ts
+++ b/packages/insomnia/src/__mocks__/@grpc/grpc-js.ts
@@ -82,7 +82,6 @@ class MockGrpcClient {
     makeMockCall();
     return getMockCall();
   }
-
 }
 
 export function makeGenericClientConstructor() {
diff --git a/packages/insomnia/src/__tests__/install.test.ts b/packages/insomnia/src/__tests__/install.test.ts
index bd467dba24..4575a285d4 100644
--- a/packages/insomnia/src/__tests__/install.test.ts
+++ b/packages/insomnia/src/__tests__/install.test.ts
@@ -5,7 +5,7 @@ import { containsOnlyDeprecationWarnings, isDeprecatedDependencies } from '../ma
 describe('install.js', () => {
   describe('containsOnlyDeprecationWarning', () => {
     it('should return true when all lines in stderr are deprecation warnings', () => {
-      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       const stderr = // Warning #1
         'warning insomnia-plugin-xxx-yyy > xyz > xyz > xyz > xyz > xyz: ' +
         'xyz is no longer maintained and not recommended for usage due to the number of issues. ' +
@@ -21,7 +21,7 @@ describe('install.js', () => {
     });
 
     it('should return false when stderr contains a deprecation warning and an error', () => {
-      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       const stderr = // Warning #1
         'warning insomnia-plugin-xxx-yyy > xyz > xyz > xyz > xyz > xyz: ' +
         'xyz is no longer maintained and not recommended for usage due to the number of issues. ' +
diff --git a/packages/insomnia/src/account/__tests__/crypt.test.ts b/packages/insomnia/src/account/__tests__/crypt.test.ts
index 0717bb3e3a..642a5f5efe 100644
--- a/packages/insomnia/src/account/__tests__/crypt.test.ts
+++ b/packages/insomnia/src/account/__tests__/crypt.test.ts
@@ -3,8 +3,8 @@ import { describe, expect, it } from 'vitest';
 
 import * as crypt from '../crypt';
 /**
-* @vitest-environment jsdom
-*/
+ * @vitest-environment jsdom
+ */
 
 describe('crypt', () => {
   describe('deriveKey()', () => {
diff --git a/packages/insomnia/src/account/crypt.ts b/packages/insomnia/src/account/crypt.ts
index 2c6b3ff27c..bc9e3f1d04 100644
--- a/packages/insomnia/src/account/crypt.ts
+++ b/packages/insomnia/src/account/crypt.ts
@@ -56,8 +56,16 @@ export function encryptRSAWithJWK(publicKeyJWK: JsonWebKey, plaintext: string) {
 }
 
 export function decryptRSAWithJWK(privateJWK: JsonWebKey, encryptedBlob: string) {
-  if (!privateJWK.n || !privateJWK.e || !privateJWK.d || !privateJWK.p ||
-    !privateJWK.q || !privateJWK.dp || !privateJWK.dq || !privateJWK.qi) {
+  if (
+    !privateJWK.n ||
+    !privateJWK.e ||
+    !privateJWK.d ||
+    !privateJWK.p ||
+    !privateJWK.q ||
+    !privateJWK.dp ||
+    !privateJWK.dq ||
+    !privateJWK.qi
+  ) {
     throw new Error('Private key is missing parameters');
   }
 
@@ -171,7 +179,6 @@ export function decryptAES(jwkOrKey: string | JsonWebKey, encryptedResult: AESMe
     return decodeURIComponent(decipher.output.toString());
   }
   throw new Error('Failed to decrypt data');
-
 }
 
 /**
@@ -202,7 +209,6 @@ export function decryptAESToBuffer(jwkOrKey: string | JsonWebKey, encryptedResul
     return Buffer.from(forge.util.bytesToHex(decipher.output), 'hex');
   }
   throw new Error('Failed to decrypt data');
-
 }
 
 /**
@@ -234,7 +240,6 @@ export async function generateAES256Key() {
     key_ops: ['encrypt', 'decrypt'],
     k: _hexToB64Url(key),
   };
-
 }
 
 /**
@@ -296,7 +301,6 @@ export async function generateKeyPairJWK() {
     privateKey,
     publicKey,
   };
-
 }
 
 // ~~~~~~~~~~~~~~~~ //
@@ -381,5 +385,4 @@ async function _pbkdf2Passphrase(passphrase: string, salt: string) {
     forge.md.sha256.create(),
   );
   return forge.util.bytesToHex(derivedKeyRaw);
-
 }
diff --git a/packages/insomnia/src/account/session.ts b/packages/insomnia/src/account/session.ts
index 1e821e5081..e0a2280396 100644
--- a/packages/insomnia/src/account/session.ts
+++ b/packages/insomnia/src/account/session.ts
@@ -46,15 +46,7 @@ export function onLoginLogout(loginCallback: LoginCallback) {
 /** Creates a session from a sessionId and derived symmetric key. */
 export async function absorbKey(sessionId: string, key: string) {
   // Get and store some extra info (salts and keys)
-  const {
-    publicKey,
-    encPrivateKey,
-    encSymmetricKey,
-    email,
-    accountId,
-    firstName,
-    lastName,
-  } = await _whoami(sessionId);
+  const { publicKey, encPrivateKey, encSymmetricKey, email, accountId, firstName, lastName } = await _whoami(sessionId);
   const symmetricKeyStr = crypt.decryptAES(key, JSON.parse(encSymmetricKey));
 
   // Store the information for later
@@ -170,7 +162,7 @@ async function _whoami(sessionId: string | null = null): Promise<WhoamiResponse>
   const response = await insomniaFetch<WhoamiResponse | string>({
     method: 'GET',
     path: '/auth/whoami',
-    sessionId: sessionId || await getCurrentSessionId(),
+    sessionId: sessionId || (await getCurrentSessionId()),
   });
   if (typeof response === 'string') {
     throw new Error('Unexpected plaintext response: ' + response);
diff --git a/packages/insomnia/src/common/__tests__/constants.test.ts b/packages/insomnia/src/common/__tests__/constants.test.ts
index aba0c0010e..97f9a1b938 100644
--- a/packages/insomnia/src/common/__tests__/constants.test.ts
+++ b/packages/insomnia/src/common/__tests__/constants.test.ts
@@ -91,19 +91,25 @@ describe('getContentTypeName', () => {
 
 describe('getMockSeviceBinUrl', () => {
   it('should return correct mock url', () => {
-    expect(getMockServiceBinURL({
-      useInsomniaCloud: true,
-      _id: 'mock_617eac05d9a94e38a1187f9b4400039b',
-      url: '',
-    } as MockServer, '/my-route')).toBe(
-      'https://mock-617eac05d9a94e38a1187f9b4400039b.mock.insomnia.rest/my-route'
-    );
-    expect(getMockServiceBinURL({
-      useInsomniaCloud: false,
-      _id: 'mock_617eac05d9a94e38a1187f9b4400039b',
-      url: 'http://localhost:8080',
-    } as MockServer, '/my-route')).toBe(
-      'http://localhost:8080/bin/mock_617eac05d9a94e38a1187f9b4400039b/my-route'
-    );
+    expect(
+      getMockServiceBinURL(
+        {
+          useInsomniaCloud: true,
+          _id: 'mock_617eac05d9a94e38a1187f9b4400039b',
+          url: '',
+        } as MockServer,
+        '/my-route',
+      ),
+    ).toBe('https://mock-617eac05d9a94e38a1187f9b4400039b.mock.insomnia.rest/my-route');
+    expect(
+      getMockServiceBinURL(
+        {
+          useInsomniaCloud: false,
+          _id: 'mock_617eac05d9a94e38a1187f9b4400039b',
+          url: 'http://localhost:8080',
+        } as MockServer,
+        '/my-route',
+      ),
+    ).toBe('http://localhost:8080/bin/mock_617eac05d9a94e38a1187f9b4400039b/my-route');
   });
 });
diff --git a/packages/insomnia/src/common/__tests__/cookies.test.ts b/packages/insomnia/src/common/__tests__/cookies.test.ts
index d883fda185..a61121fe29 100644
--- a/packages/insomnia/src/common/__tests__/cookies.test.ts
+++ b/packages/insomnia/src/common/__tests__/cookies.test.ts
@@ -1,4 +1,4 @@
-import type { Cookie} from 'tough-cookie';
+import type { Cookie } from 'tough-cookie';
 import { CookieJar } from 'tough-cookie';
 import { describe, expect, it, vi } from 'vitest';
 
@@ -25,7 +25,7 @@ describe('jarFromCookies()', async () => {
   });
 
   it('handles malformed JSON', () => {
-    vi.spyOn(console, 'log').mockImplementationOnce(() => { });
+    vi.spyOn(console, 'log').mockImplementationOnce(() => {});
     // @ts-expect-error this test is verifying that an invalid input is handled appropriately
     const jar = jarFromCookies('not a jar');
     expect(jar.constructor.name).toBe('CookieJar');
@@ -61,7 +61,7 @@ describe('cookiesFromJar()', () => {
 
   it('handles bad jar', async () => {
     const jar = CookieJar.fromJSON({ cookies: [] });
-    vi.spyOn(console, 'warn').mockImplementationOnce(() => { });
+    vi.spyOn(console, 'warn').mockImplementationOnce(() => {});
     // MemoryStore never actually throws errors, so lets mock the function to force it to this time.
     // @ts-expect-error intentionally invalid value
     jar.store.getAllCookies = cb => cb(new Error('Dummy Error'));
diff --git a/packages/insomnia/src/common/__tests__/database.test.ts b/packages/insomnia/src/common/__tests__/database.test.ts
index 30533475ea..23a3cdd363 100644
--- a/packages/insomnia/src/common/__tests__/database.test.ts
+++ b/packages/insomnia/src/common/__tests__/database.test.ts
@@ -2,7 +2,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { BaseModel } from '../../models';
 import * as models from '../../models';
-import type { ChangeBufferEvent} from '../database';
+import type { ChangeBufferEvent } from '../database';
 import { _repairDatabase, database as db } from '../database';
 
 describe('init()', () => {
@@ -19,7 +19,7 @@ describe('init()', () => {
 
 describe('onChange()', () => {
   beforeEach(async () => {
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
   });
   it('handles change listeners', async () => {
     const doc = {
@@ -38,10 +38,7 @@ describe('onChange()', () => {
     const updatedDoc = await models.request.update(newDoc, {
       name: 'bar',
     });
-    expect(changesSeen).toEqual([
-      [['insert', newDoc, false, []]],
-      [['update', updatedDoc, false, [{ name: 'bar' }]]],
-    ]);
+    expect(changesSeen).toEqual([[['insert', newDoc, false, []]], [['update', updatedDoc, false, [{ name: 'bar' }]]]]);
     db.offChange(callback);
     await models.request.create(doc);
     expect(changesSeen.length).toBe(2);
@@ -49,7 +46,6 @@ describe('onChange()', () => {
 });
 
 describe('bufferChanges()', () => {
-
   it('properly buffers changes', async () => {
     const doc = {
       type: models.request.type,
@@ -142,7 +138,6 @@ describe('bufferChanges()', () => {
 });
 
 describe('bufferChangesIndefinitely()', () => {
-
   it('should not auto flush', async () => {
     const doc = {
       type: models.request.type,
@@ -176,7 +171,6 @@ describe('bufferChangesIndefinitely()', () => {
 });
 
 describe('requestCreate()', () => {
-
   it('creates a valid request', async () => {
     const now = Date.now();
     const patch = {
@@ -212,7 +206,7 @@ describe('requestCreate()', () => {
 
 describe('_repairDatabase()', async () => {
   beforeEach(async () => {
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
   });
 
   it('fixes duplicate environments', async () => {
@@ -597,7 +591,6 @@ describe('_repairDatabase()', async () => {
 });
 
 describe('duplicate()', () => {
-
   afterEach(() => vi.restoreAllMocks());
 
   it('should overwrite appropriate fields on the parent when duplicating', async () => {
@@ -649,7 +642,6 @@ describe('docCreate()', () => {
 });
 
 describe('withAncestors()', () => {
-
   it('should return itself and all parents but exclude siblings', async () => {
     const spc = await models.project.create();
     const wrk = await models.workspace.create({
@@ -680,16 +672,11 @@ describe('withAncestors()', () => {
     await expect(db.withAncestors(grpReq)).resolves.toStrictEqual([grpReq, grp, wrk, spc]);
     await expect(db.withAncestors(grpGrpcReq)).resolves.toStrictEqual([grpGrpcReq, grp, wrk, spc]);
     // Group child searching for ancestors with filters
-    await expect(db.withAncestors(grpGrpcReq, [models.requestGroup.type])).resolves.toStrictEqual([
-      grpGrpcReq,
-      grp,
-    ]);
+    await expect(db.withAncestors(grpGrpcReq, [models.requestGroup.type])).resolves.toStrictEqual([grpGrpcReq, grp]);
     await expect(
       db.withAncestors(grpGrpcReq, [models.requestGroup.type, models.workspace.type]),
     ).resolves.toStrictEqual([grpGrpcReq, grp, wrk]);
     // Group child searching for ancestors but excluding groups will not find the workspace
-    await expect(db.withAncestors(grpGrpcReq, [models.workspace.type])).resolves.toStrictEqual([
-      grpGrpcReq,
-    ]);
+    await expect(db.withAncestors(grpGrpcReq, [models.workspace.type])).resolves.toStrictEqual([grpGrpcReq]);
   });
 });
diff --git a/packages/insomnia/src/common/__tests__/electron-storage.test.ts b/packages/insomnia/src/common/__tests__/electron-storage.test.ts
index 88aebb3275..1108dd37b3 100644
--- a/packages/insomnia/src/common/__tests__/electron-storage.test.ts
+++ b/packages/insomnia/src/common/__tests__/electron-storage.test.ts
@@ -44,7 +44,7 @@ describe('Test electron storage()', () => {
   });
 
   it('does handles malformed files', () => {
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     const basePath = `/tmp/insomnia-electronstorage-${Math.random()}`;
     const electronStorage = new ElectronStorage(basePath);
 
@@ -61,7 +61,7 @@ describe('Test electron storage()', () => {
   });
 
   it('does handles failing to write file', () => {
-    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => { });
+    const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
     const basePath = `/tmp/insomnia-electronstorage-${Math.random()}`;
     const electronStorage = new ElectronStorage(basePath);
     fs.rmdirSync(basePath);
diff --git a/packages/insomnia/src/common/__tests__/export.test.ts b/packages/insomnia/src/common/__tests__/export.test.ts
index 7c0a54fe85..4abd599c95 100644
--- a/packages/insomnia/src/common/__tests__/export.test.ts
+++ b/packages/insomnia/src/common/__tests__/export.test.ts
@@ -107,7 +107,7 @@ describe('exportWorkspacesHAR() and exportRequestsHAR()', () => {
   });
 
   it('exports all workspaces as an HTTP Archive', async () => {
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
 
     const wrk1 = await models.workspace.create({
       _id: 'wrk_1',
diff --git a/packages/insomnia/src/common/__tests__/har.test.ts b/packages/insomnia/src/common/__tests__/har.test.ts
index 2267ba69d2..cefeb8e679 100644
--- a/packages/insomnia/src/common/__tests__/har.test.ts
+++ b/packages/insomnia/src/common/__tests__/har.test.ts
@@ -12,7 +12,7 @@ import { getRenderedRequestAndContext } from '../render';
 
 describe('export', () => {
   beforeEach(async () => {
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
     await models.project.all();
     await models.settings.getOrCreate();
   });
diff --git a/packages/insomnia/src/common/__tests__/import.test.ts b/packages/insomnia/src/common/__tests__/import.test.ts
index 0b3da88af2..b1444bb555 100644
--- a/packages/insomnia/src/common/__tests__/import.test.ts
+++ b/packages/insomnia/src/common/__tests__/import.test.ts
@@ -10,12 +10,9 @@ import * as importUtil from '../import';
 */
 
 describe('isApiSpecImport()', () => {
-  it.each(['swagger2', 'openapi3'])(
-    'should return true if spec id is %o',
-    (id: string) => {
-      expect(importUtil.isApiSpecImport({ id })).toBe(true);
-    }
-  );
+  it.each(['swagger2', 'openapi3'])('should return true if spec id is %o', (id: string) => {
+    expect(importUtil.isApiSpecImport({ id })).toBe(true);
+  });
 
   it('should return false if spec id is not valid', () => {
     const id = 'invalid-id';
@@ -51,16 +48,14 @@ describe('importRaw()', () => {
     });
 
     const workspacesCount = await workspace.count();
-    const projectWorkspaces = await workspace.findByParentId(
-      projectToImportTo._id
-    );
+    const projectWorkspaces = await workspace.findByParentId(projectToImportTo._id);
     const curlRequests = await request.findByParentId(projectWorkspaces[0]._id);
 
     expect(workspacesCount).toBe(1);
 
     expect(curlRequests[0]).toMatchObject({
       body: {
-        'text': '{\"email_id\": \"tem_123\"}',
+        text: '{\"email_id\": \"tem_123\"}',
       },
     });
   });
@@ -84,7 +79,7 @@ describe('importRaw()', () => {
 
     expect(curlRequests[0]).toMatchObject({
       body: {
-        'text': '{\"email_id\": \"tem_123\"}',
+        text: '{\"email_id\": \"tem_123\"}',
       },
     });
   });
@@ -102,9 +97,7 @@ describe('importRaw()', () => {
       projectId: projectToImportTo._id,
     });
 
-    const projectWorkspaces = await workspace.findByParentId(
-      projectToImportTo._id
-    );
+    const projectWorkspaces = await workspace.findByParentId(projectToImportTo._id);
 
     const requestGroups = await requestGroup.findByParentId(projectWorkspaces[0]._id);
     const requests = await request.findByParentId(requestGroups[0]._id);
@@ -146,5 +139,4 @@ describe('importRaw()', () => {
     expect(scanResult[0].type?.id).toBe('openapi3');
     expect(scanResult[0].errors.length).toBe(0);
   });
-
 });
diff --git a/packages/insomnia/src/common/__tests__/render.test.ts b/packages/insomnia/src/common/__tests__/render.test.ts
index b99742cb6a..6f49e38d1b 100644
--- a/packages/insomnia/src/common/__tests__/render.test.ts
+++ b/packages/insomnia/src/common/__tests__/render.test.ts
@@ -97,9 +97,7 @@ describe('render tests', () => {
     });
 
     it('rendered recursive should not infinite loop', async () => {
-      const ancestors = [
-        reqGroupBuilder.environment({ recursive: '{{ recursive }}/hello' }).build(),
-      ];
+      const ancestors = [reqGroupBuilder.environment({ recursive: '{{ recursive }}/hello' }).build()];
 
       const context = await renderUtils.buildRenderContext({ ancestors });
       // This is longer than 3 because it multiplies every time (1 -> 2 -> 4 -> 8)
@@ -109,25 +107,31 @@ describe('render tests', () => {
     });
 
     it('does not recursive render if itself is not used in var', async () => {
-      const root = envBuilder.data({
-        proto: 'http',
-        domain: 'base.com',
-        url: '{{ proto }}://{{ domain }}',
-      }).build();
+      const root = envBuilder
+        .data({
+          proto: 'http',
+          domain: 'base.com',
+          url: '{{ proto }}://{{ domain }}',
+        })
+        .build();
 
-      const sub = envBuilder.data({
-        proto: 'https',
-        domain: 'sub.com',
-        port: 8000,
-        url: '{{ proto }}://{{ domain }}:{{ port }}',
-      }).build();
+      const sub = envBuilder
+        .data({
+          proto: 'https',
+          domain: 'sub.com',
+          port: 8000,
+          url: '{{ proto }}://{{ domain }}:{{ port }}',
+        })
+        .build();
 
       const ancestors = [
-        reqGroupBuilder.environment({
-          proto: 'https',
-          domain: 'folder.com',
-          port: 7000,
-        }).build(),
+        reqGroupBuilder
+          .environment({
+            proto: 'https',
+            domain: 'folder.com',
+            port: 7000,
+          })
+          .build(),
       ];
       const context = await renderUtils.buildRenderContext({ ancestors, rootEnvironment: root, subEnvironment: sub });
       expect(context).toEqual({
@@ -142,10 +146,12 @@ describe('render tests', () => {
       const root = envBuilder.data({ url: 'insomnia.rest' }).build();
       const sub = envBuilder.data({ url: '{{ url }}/sub' }).build();
       const ancestors = [
-        reqGroupBuilder.environment({
-          url: '{{ url }}/{{ name }}',
-          name: 'folder',
-        }).build(),
+        reqGroupBuilder
+          .environment({
+            url: '{{ url }}/{{ name }}',
+            name: 'folder',
+          })
+          .build(),
       ];
 
       const context = await renderUtils.buildRenderContext({ ancestors, rootEnvironment: root, subEnvironment: sub });
@@ -157,13 +163,15 @@ describe('render tests', () => {
 
     it('render up to 3 recursion levels', async () => {
       const ancestors = [
-        reqGroupBuilder.environment({
-          d: '/d',
-          c: '/c{{ d }}',
-          b: '/b{{ c }}',
-          a: '/a{{ b }}',
-          test: 'http://insomnia.rest{{ a }}',
-        }).build(),
+        reqGroupBuilder
+          .environment({
+            d: '/d',
+            c: '/c{{ d }}',
+            b: '/b{{ c }}',
+            a: '/a{{ b }}',
+            test: 'http://insomnia.rest{{ a }}',
+          })
+          .build(),
       ];
       const context = await renderUtils.buildRenderContext({ ancestors });
       expect(context).toEqual({
@@ -177,10 +185,12 @@ describe('render tests', () => {
 
     it('rendered sibling environment variables', async () => {
       const ancestors = [
-        reqGroupBuilder.environment({
-          sibling: 'sibling',
-          test: '{{ sibling }}/hello',
-        }).build(),
+        reqGroupBuilder
+          .environment({
+            sibling: 'sibling',
+            test: '{{ sibling }}/hello',
+          })
+          .build(),
       ];
       const context = await renderUtils.buildRenderContext({ ancestors });
       expect(context).toEqual({
@@ -257,12 +267,8 @@ describe('render tests', () => {
           .build(),
       ];
       const context = await renderUtils.buildRenderContext({ ancestors });
-      expect(await renderUtils.render('{{ urls.admin }}/foo', context)).toBe(
-        'https://parent.com/admin/foo',
-      );
-      expect(await renderUtils.render('{{ urls.test }}/foo', context)).toBe(
-        'https://parent.com/test/foo',
-      );
+      expect(await renderUtils.render('{{ urls.admin }}/foo', context)).toBe('https://parent.com/admin/foo');
+      expect(await renderUtils.render('{{ urls.test }}/foo', context)).toBe('https://parent.com/test/foo');
     });
 
     it('renders child environment variables', async () => {
@@ -289,10 +295,7 @@ describe('render tests', () => {
 
     it('works with object arrays', async () => {
       const ancestors = [
-        reqGroupBuilder
-          .name('Parent')
-          .environment({})
-          .build(),
+        reqGroupBuilder.name('Parent').environment({}).build(),
         reqGroupBuilder
           .name('Grandparent')
           .environment({
@@ -374,7 +377,8 @@ describe('render tests', () => {
               parentA: 'pa',
               parentB: 'pb',
             },
-          }).build(),
+          })
+          .build(),
         reqGroupBuilder
           .name('Grandparent')
           .environment({
@@ -384,7 +388,8 @@ describe('render tests', () => {
               grandParentA: 'gpa',
               grandParentB: 'gpb',
             },
-          }).build(),
+          })
+          .build(),
       ];
       const context = await renderUtils.buildRenderContext({ ancestors });
       expect(context).toEqual({
@@ -416,19 +421,21 @@ describe('render tests', () => {
           })
           .build(),
       ];
-      const subEnvironment = envBuilder.data({
-        winner: 'sub',
-        sub: true,
-        base_url: 'https://insomnia.rest',
-      }).build();
-      const rootEnvironment = envBuilder.data({
-        winner: 'root',
-        root: true,
-        base_url: 'ignore this',
-      }).build();
-      const context = await renderUtils.buildRenderContext(
-        { ancestors, rootEnvironment, subEnvironment },
-      );
+      const subEnvironment = envBuilder
+        .data({
+          winner: 'sub',
+          sub: true,
+          base_url: 'https://insomnia.rest',
+        })
+        .build();
+      const rootEnvironment = envBuilder
+        .data({
+          winner: 'root',
+          root: true,
+          base_url: 'ignore this',
+        })
+        .build();
+      const context = await renderUtils.buildRenderContext({ ancestors, rootEnvironment, subEnvironment });
       expect(context).toEqual({
         base_url: 'https://insomnia.rest',
         url: 'https://insomnia.rest/resource',
@@ -568,12 +575,7 @@ describe('render tests', () => {
       const context = {
         foo: 'bar',
       };
-      const resultOnlyVars = await renderUtils.render(
-        template,
-        context,
-        null,
-        'keep',
-      );
+      const resultOnlyVars = await renderUtils.render(template, context, null, 'keep');
       expect(resultOnlyVars).toBe('{{ foo }} {% invalid "hi" %}');
 
       try {
@@ -695,7 +697,11 @@ describe('render tests', () => {
           text: '{ "prop": "{{ foo }}" }',
         },
       });
-      const request = await renderUtils.getRenderedGrpcRequest({ request: grpcRequest, environmentId: env._id, skipBody: true });
+      const request = await renderUtils.getRenderedGrpcRequest({
+        request: grpcRequest,
+        environmentId: env._id,
+        skipBody: true,
+      });
       expect(request).toEqual(
         expect.objectContaining({
           name: 'hi bar',
diff --git a/packages/insomnia/src/common/__tests__/sorting.test.ts b/packages/insomnia/src/common/__tests__/sorting.test.ts
index 179f5c8c5e..c5631364ca 100644
--- a/packages/insomnia/src/common/__tests__/sorting.test.ts
+++ b/packages/insomnia/src/common/__tests__/sorting.test.ts
@@ -32,7 +32,8 @@ describe('Sorting methods', () => {
       { _id: '', metaSortKey: -800 },
       { _id: '', metaSortKey: -799 },
       { _id: '', metaSortKey: -1000 },
-      { _id: '', metaSortKey: -999 }];
+      { _id: '', metaSortKey: -999 },
+    ];
     const sorted = unsorted.sort(sortMethodMap['type-manual']);
     expect(sorted).toEqual([
       { _id: '', metaSortKey: -1000 },
diff --git a/packages/insomnia/src/common/api-specs.ts b/packages/insomnia/src/common/api-specs.ts
index 5471c04b1e..f72ab72e54 100644
--- a/packages/insomnia/src/common/api-specs.ts
+++ b/packages/insomnia/src/common/api-specs.ts
@@ -7,9 +7,7 @@ export interface ParsedApiSpec {
   formatVersion: string | null;
 }
 
-export function parseApiSpec(
-  rawDocument: string,
-) {
+export function parseApiSpec(rawDocument: string) {
   const result: ParsedApiSpec = {
     contents: null,
     rawContents: rawDocument,
@@ -41,10 +39,7 @@ export function parseApiSpec(
   return result;
 }
 
-export function resolveComponentSchemaRefs(
-  spec: ParsedApiSpec,
-  methodInfo: Record<string, any>,
-) {
+export function resolveComponentSchemaRefs(spec: ParsedApiSpec, methodInfo: Record<string, any>) {
   const schemas = spec.contents?.components?.schemas;
   if (!schemas) {
     return;
diff --git a/packages/insomnia/src/common/common-headers.ts b/packages/insomnia/src/common/common-headers.ts
index 67ee4745ed..7789b25f7e 100644
--- a/packages/insomnia/src/common/common-headers.ts
+++ b/packages/insomnia/src/common/common-headers.ts
@@ -1,4 +1,3 @@
-
 import allCharsets from '../datasets/charsets';
 import allMimeTypes from '../datasets/content-types';
 import allEncodings from '../datasets/encodings';
diff --git a/packages/insomnia/src/common/constants.ts b/packages/insomnia/src/common/constants.ts
index 13537c18c0..6d2610da02 100644
--- a/packages/insomnia/src/common/constants.ts
+++ b/packages/insomnia/src/common/constants.ts
@@ -33,15 +33,17 @@ export const isLinux = () => getAppPlatform() === 'linux';
 export const isWindows = () => getAppPlatform() === 'win32';
 export const getAppEnvironment = () => process.env.INSOMNIA_ENV || 'production';
 export const isDevelopment = () => getAppEnvironment() === 'development';
-export const getSegmentWriteKey = () => appConfig.segmentWriteKeys[(isDevelopment() || env.PLAYWRIGHT) ? 'development' : 'production'];
+export const getSegmentWriteKey = () =>
+  appConfig.segmentWriteKeys[isDevelopment() || env.PLAYWRIGHT ? 'development' : 'production'];
 export const getSentryDsn = () => appConfig.sentryDsn;
 export const getAppBuildDate = () => new Date(process.env.BUILD_DATE ?? '').toLocaleDateString();
 
-export const getBrowserUserAgent = () => encodeURIComponent(
-  String(window.navigator.userAgent)
-    .replace(new RegExp(`${getAppId()}\\/\\d+\\.\\d+\\.\\d+ `), '')
-    .replace(/Electron\/\d+\.\d+\.\d+ /, ''),
-).replace('%2C', ',');
+export const getBrowserUserAgent = () =>
+  encodeURIComponent(
+    String(window.navigator.userAgent)
+      .replace(new RegExp(`${getAppId()}\\/\\d+\\.\\d+\\.\\d+ `), '')
+      .replace(/Electron\/\d+\.\d+\.\d+ /, ''),
+  ).replace('%2C', ',');
 
 export function updatesSupported() {
   // Updates are not supported on Linux
@@ -67,7 +69,8 @@ export const CDN_INVALIDATION_TTL = 10_000; // 10 seconds
 export const STATUS_CODE_PLUGIN_ERROR = -222;
 export const LARGE_RESPONSE_MB = 5;
 export const HUGE_RESPONSE_MB = 100;
-export const FLEXIBLE_URL_REGEX = /^(http|https):\/\/[\wàâäèéêëîïôóœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ\-_.]+[/\wàâäèéêëîïôóœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ.\-+=:\][@%^*&!#?;$~'(),]*/;
+export const FLEXIBLE_URL_REGEX =
+  /^(http|https):\/\/[\wàâäèéêëîïôóœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ\-_.]+[/\wàâäèéêëîïôóœùûüÿçÀÂÄÈÉÊËÎÏÔŒÙÛÜŸÇ.\-+=:\][@%^*&!#?;$~'(),]*/;
 export const CHECK_FOR_UPDATES_INTERVAL = 1000 * 60 * 60 * 24;
 
 export const ACCEPTED_NODE_CA_FILE_EXTS = ['.pem', '.crt', '.cer', '.p12'];
@@ -134,7 +137,6 @@ export const getMockServiceBinURL = (mockServer: MockServer, path: string) => {
   const url = new URL(baseUrl);
   url.host = mockServer._id.replace('_', '-') + '.' + url.host;
   return url.origin + path;
-
 };
 
 export const getAIServiceURL = () => env.INSOMNIA_AI_URL || 'https://ai-helper.insomnia.rest';
@@ -163,11 +165,7 @@ export const MAX_EDITOR_FONT_SIZE = 24;
 export const DEFAULT_SIDEBAR_SIZE = 25;
 
 // Activities
-export type GlobalActivity =
-  | 'spec'
-  | 'debug'
-  | 'unittest'
-  | 'home';
+export type GlobalActivity = 'spec' | 'debug' | 'unittest' | 'home';
 export const ACTIVITY_SPEC: GlobalActivity = 'spec';
 export const ACTIVITY_DEBUG: GlobalActivity = 'debug';
 export const ACTIVITY_UNIT_TEST: GlobalActivity = 'unittest';
@@ -348,12 +346,7 @@ export const sortOrderName: Record<SortOrder, string> = {
   [SORT_TYPE_ASC]: 'Requests First',
 };
 
-export type DashboardSortOrder =
-  | 'name-asc'
-  | 'name-desc'
-  | 'created-asc'
-  | 'created-desc'
-  | 'modified-desc';
+export type DashboardSortOrder = 'name-asc' | 'name-desc' | 'created-asc' | 'created-desc' | 'modified-desc';
 
 export const DASHBOARD_SORT_ORDERS: DashboardSortOrder[] = [
   SORT_MODIFIED_DESC,
@@ -378,7 +371,6 @@ export function getPreviewModeName(previewMode: PreviewMode, useLong = false) {
     return useLong ? previewModeMap[previewMode][1] : previewModeMap[previewMode][0];
   }
   return '';
-
 }
 export function getMimeTypeFromContentType(contentType: string) {
   // Check if the Content-Type header is provided
@@ -412,7 +404,6 @@ export function getAuthTypeName(authType?: string, useLong = false) {
     return useLong ? authTypesMap[authType][1] : authTypesMap[authType][0];
   }
   return 'Auth';
-
 }
 
 export function getContentTypeFromHeaders(headers: any[], defaultValue: string | null = null) {
@@ -427,8 +418,7 @@ export function getContentTypeFromHeaders(headers: any[], defaultValue: string |
 // Sourced from https://developer.mozilla.org/en-US/docs/Web/HTTP/Status
 export const RESPONSE_CODE_DESCRIPTIONS: Record<number, string> = {
   // Special
-  [STATUS_CODE_PLUGIN_ERROR]:
-    'An Insomnia plugin threw an error which prevented the request from sending',
+  [STATUS_CODE_PLUGIN_ERROR]: 'An Insomnia plugin threw an error which prevented the request from sending',
   // 100s
   100: 'This interim response indicates that everything so far is OK and that the client should continue with the request or ignore it if it is already finished.',
   101: 'This code is sent in response to an Upgrade: request header by the client and indicates the protocol the server is switching to.',
diff --git a/packages/insomnia/src/common/database.ts b/packages/insomnia/src/common/database.ts
index ddbd98f413..a430c460ff 100644
--- a/packages/insomnia/src/common/database.ts
+++ b/packages/insomnia/src/common/database.ts
@@ -165,11 +165,7 @@ export const database = {
   },
 
   /** find documents matching query */
-  find: async function <T extends BaseModel>(
-    type: string,
-    query: Query<T> | string = {},
-    sort: Sort = { created: 1 },
-  ) {
+  find: async function <T extends BaseModel>(type: string, query: Query<T> | string = {}, sort: Sort = { created: 1 }) {
     if (db._empty) {
       return _send<T[]>('find', ...arguments);
     }
@@ -278,7 +274,6 @@ export const database = {
       return null;
     }
     return database.getWhere<T>(type, { _id: id });
-
   },
 
   getMostRecentlyModified: async function <T extends BaseModel>(type: string, query: Query<T> = {}) {
@@ -567,7 +562,6 @@ export const database = {
       return database.update<T>(doc, fromSync);
     }
     return database.insert<T>(doc, fromSync);
-
   },
 
   /** get all ancestors of specified types of a document */
@@ -599,10 +593,7 @@ export const database = {
       }
 
       // Continue searching for children
-      docsToReturn = [
-        ...docsToReturn,
-        ...foundDocs,
-      ];
+      docsToReturn = [...docsToReturn, ...foundDocs];
       return next(foundDocs);
     }
 
@@ -622,7 +613,11 @@ export const database = {
    * @param queryTypes - An optional array of document types to query. If not provided, all types are queried.
    * @returns A promise that resolves to an array of all descendant documents.
    */
-  withDescendants: async function <T extends BaseModel>(doc: T | null, stopType: string | null = null, queryTypes: string[] = []): Promise<BaseModel[]> {
+  withDescendants: async function <T extends BaseModel>(
+    doc: T | null,
+    stopType: string | null = null,
+    queryTypes: string[] = [],
+  ): Promise<BaseModel[]> {
     if (db._empty) {
       return _send<BaseModel[]>('withDescendants', ...arguments);
     }
@@ -648,10 +643,7 @@ export const database = {
         }
 
         for (const more of await Promise.all(promises)) {
-          foundDocs = [
-            ...foundDocs,
-            ...more,
-          ];
+          foundDocs = [...foundDocs, ...more];
         }
       }
 
@@ -708,7 +700,12 @@ let changeListeners: ChangeListener[] = [];
 
 /** push changes into the buffer, so that changeListeners can get change contents when database.flushChanges is called,
  * this method should be called whenever a document change happens */
-async function notifyOfChange<T extends BaseModel>(event: ChangeType, doc: T, fromSync: boolean, patches: Patch<T>[] = []) {
+async function notifyOfChange<T extends BaseModel>(
+  event: ChangeType,
+  doc: T,
+  fromSync: boolean,
+  patches: Patch<T>[] = [],
+) {
   const updatedDoc = doc;
 
   // TODO: Use object is better than array
diff --git a/packages/insomnia/src/common/documentation.ts b/packages/insomnia/src/common/documentation.ts
index 9f32ee8f0f..0ae0163740 100644
--- a/packages/insomnia/src/common/documentation.ts
+++ b/packages/insomnia/src/common/documentation.ts
@@ -19,7 +19,8 @@ export const docsGitAccessToken = {
   gitlab: 'https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html',
   bitbucket: 'https://support.atlassian.com/bitbucket-cloud/docs/app-passwords/',
   bitbucketServer: 'https://confluence.atlassian.com/bitbucketserver/personal-access-tokens-939515499.html',
-  azureDevOps: 'https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate',
+  azureDevOps:
+    'https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate',
 };
 
 export const documentationLinks = {
diff --git a/packages/insomnia/src/common/export.tsx b/packages/insomnia/src/common/export.tsx
index ffee2a05be..bdb564c186 100644
--- a/packages/insomnia/src/common/export.tsx
+++ b/packages/insomnia/src/common/export.tsx
@@ -18,37 +18,30 @@ import * as har from './har';
 import { getInsomniaV5DataExport } from './insomnia-v5';
 import { strings } from './strings';
 
-const getDocWithDescendants = (includePrivateDocs = false) => async (parentDoc: BaseModel | null) => {
-  const docs = await db.withDescendants(parentDoc);
-  return docs.filter(
-    // Don't include if private, except if we want to
-    doc => !doc?.isPrivate || includePrivateDocs,
-  );
-};
+const getDocWithDescendants =
+  (includePrivateDocs = false) =>
+  async (parentDoc: BaseModel | null) => {
+    const docs = await db.withDescendants(parentDoc);
+    return docs.filter(
+      // Don't include if private, except if we want to
+      doc => !doc?.isPrivate || includePrivateDocs,
+    );
+  };
 
-export async function exportWorkspacesHAR(
-  workspaces: Workspace[],
-  includePrivateDocs = false,
-) {
+export async function exportWorkspacesHAR(workspaces: Workspace[], includePrivateDocs = false) {
   const promises = workspaces.map(getDocWithDescendants(includePrivateDocs));
   const docs = (await Promise.all(promises)).flat();
   const requests = docs.filter(isRequest);
   return exportRequestsHAR(requests, includePrivateDocs);
 }
 
-export async function exportRequestsHAR(
-  requests: BaseModel[],
-  includePrivateDocs = false,
-) {
+export async function exportRequestsHAR(requests: BaseModel[], includePrivateDocs = false) {
   const workspaces: BaseModel[] = [];
   const mapRequestIdToWorkspace: Record<string, any> = {};
   const workspaceLookup: Record<string, any> = {};
 
   for (const request of requests) {
-    const ancestors: BaseModel[] = await db.withAncestors(request, [
-      models.workspace.type,
-      models.requestGroup.type,
-    ]);
+    const ancestors: BaseModel[] = await db.withAncestors(request, [models.workspace.type, models.requestGroup.type]);
     const workspace = ancestors.find(isWorkspace);
     mapRequestIdToWorkspace[request._id] = workspace;
 
@@ -101,14 +94,9 @@ export async function exportRequestsHAR(
 const VALUE_YAML = 'yaml';
 const VALUE_HAR = 'har';
 
-export type SelectedFormat =
-  | typeof VALUE_HAR
-  | typeof VALUE_YAML
-  ;
+export type SelectedFormat = typeof VALUE_HAR | typeof VALUE_YAML;
 
-const showSelectExportTypeModal = ({ onDone }: {
-  onDone: (selectedFormat: SelectedFormat) => Promise<void>;
-}) => {
+const showSelectExportTypeModal = ({ onDone }: { onDone: (selectedFormat: SelectedFormat) => Promise<void> }) => {
   const options = [
     {
       name: 'Insomnia v5',
@@ -203,7 +191,12 @@ export const exportProjectToFile = (activeProjectName: string, workspacesForActi
   if (!workspacesForActiveProject.length) {
     showAlert({
       title: 'Cannot export',
-      message: <>There are no workspaces to export in the <strong>{activeProjectName}</strong> {strings.project.singular.toLowerCase()}.</>,
+      message: (
+        <>
+          There are no workspaces to export in the <strong>{activeProjectName}</strong>{' '}
+          {strings.project.singular.toLowerCase()}.
+        </>
+      ),
     });
     return;
   }
@@ -234,7 +227,10 @@ export const exportProjectToFile = (activeProjectName: string, workspacesForActi
             if (!fileName) {
               return;
             }
-            const stringifiedExport = await exportWorkspacesHAR(workspacesForActiveProject, shouldExportPrivateEnvironments);
+            const stringifiedExport = await exportWorkspacesHAR(
+              workspacesForActiveProject,
+              shouldExportPrivateEnvironments,
+            );
 
             await writeExportedFileToFileSystem(fileName, stringifiedExport);
 
@@ -258,7 +254,10 @@ export const exportProjectToFile = (activeProjectName: string, workspacesForActi
             for (const workspace of workspacesForActiveProject) {
               const workspaceName = workspace.name.replace(/ /g, '-');
               const fileName = path.join(insomniaProjectExportFolder, `${workspaceName}-${workspace._id}.yaml`);
-              const stringifiedExport = await getInsomniaV5DataExport({ workspaceId: workspace._id, includePrivateEnvironments: shouldExportPrivateEnvironments });
+              const stringifiedExport = await getInsomniaV5DataExport({
+                workspaceId: workspace._id,
+                includePrivateEnvironments: shouldExportPrivateEnvironments,
+              });
               await writeExportedFileToFileSystem(fileName, stringifiedExport);
             }
             break;
@@ -290,9 +289,15 @@ export const exportMockServerToFile = async (workspace: Workspace) => {
   }
 
   try {
-    const stringifiedExport = await getInsomniaV5DataExport({ workspaceId: workspace._id, includePrivateEnvironments: false });
+    const stringifiedExport = await getInsomniaV5DataExport({
+      workspaceId: workspace._id,
+      includePrivateEnvironments: false,
+    });
     await writeExportedFileToFileSystem(fileName, stringifiedExport);
-    window.main.trackSegmentEvent({ event: SegmentEvent.dataExport, properties: { type: 'yaml', scope: 'mock-server' } });
+    window.main.trackSegmentEvent({
+      event: SegmentEvent.dataExport,
+      properties: { type: 'yaml', scope: 'mock-server' },
+    });
   } catch (err) {
     showError({
       title: 'Export Failed',
@@ -326,9 +331,15 @@ export const exportGlobalEnvironmentToFile = async (workspace: Workspace) => {
   }
 
   try {
-    const stringifiedExport = await getInsomniaV5DataExport({ workspaceId: workspace._id, includePrivateEnvironments: shouldExportPrivateEnvironments });
+    const stringifiedExport = await getInsomniaV5DataExport({
+      workspaceId: workspace._id,
+      includePrivateEnvironments: shouldExportPrivateEnvironments,
+    });
     await writeExportedFileToFileSystem(fileName, stringifiedExport);
-    window.main.trackSegmentEvent({ event: SegmentEvent.dataExport, properties: { type: 'yaml', scope: 'environment' } });
+    window.main.trackSegmentEvent({
+      event: SegmentEvent.dataExport,
+      properties: { type: 'yaml', scope: 'environment' },
+    });
   } catch (err) {
     showError({
       title: 'Export Failed',
@@ -379,7 +390,11 @@ export const exportRequestsToFile = (workspaceId: string, requestIds: string[])
             break;
 
           case VALUE_YAML:
-            stringifiedExport = await getInsomniaV5DataExport({ workspaceId, includePrivateEnvironments: shouldExportPrivateEnvironments, requestIds });
+            stringifiedExport = await getInsomniaV5DataExport({
+              workspaceId,
+              includePrivateEnvironments: shouldExportPrivateEnvironments,
+              requestIds,
+            });
             break;
 
           default:
@@ -395,7 +410,6 @@ export const exportRequestsToFile = (workspaceId: string, requestIds: string[])
         });
         return;
       }
-
     },
   });
 };
@@ -420,11 +434,7 @@ export async function exportWorkspaceData({
   }
 }
 
-export async function exportAllData({
-  dirPath,
-}: {
-  dirPath: string;
-}): Promise<void> {
+export async function exportAllData({ dirPath }: { dirPath: string }): Promise<void> {
   const workspaces = await database.find<Workspace>(models.workspace.type);
 
   const baseEnvironments = await database.find<Environment>(environment.type, {
diff --git a/packages/insomnia/src/common/har.ts b/packages/insomnia/src/common/har.ts
index f52aede477..8128a6a38c 100644
--- a/packages/insomnia/src/common/har.ts
+++ b/packages/insomnia/src/common/har.ts
@@ -152,11 +152,7 @@ export async function exportHarResponse(response: Response | null) {
   return harResponse;
 }
 
-export async function exportHarRequest(
-  requestId: string,
-  environmentId: string,
-  addContentLength = false,
-) {
+export async function exportHarRequest(requestId: string, environmentId: string, addContentLength = false) {
   const request = await models.request.getById(requestId);
 
   if (!request) {
@@ -166,17 +162,10 @@ export async function exportHarRequest(
   return exportHarWithRequest(request, environmentId, addContentLength);
 }
 
-export async function exportHarWithRequest(
-  request: Request,
-  environmentId?: string,
-  addContentLength = false,
-) {
+export async function exportHarWithRequest(request: Request, environmentId?: string, addContentLength = false) {
   try {
     const renderResult = await getRenderedRequestAndContext({ request, environment: environmentId });
-    const renderedRequest = await _applyRequestPluginHooks(
-      renderResult.request,
-      renderResult.context,
-    );
+    const renderedRequest = await _applyRequestPluginHooks(renderResult.request, renderResult.context);
     parseGraphQLReqeustBody(renderedRequest);
     return exportHarWithRenderedRequest(renderedRequest, addContentLength);
   } catch (err) {
@@ -213,15 +202,11 @@ async function _applyRequestPluginHooks(
   return newRenderedRequest;
 }
 
-export async function exportHarWithRenderedRequest(
-  renderedRequest: RenderedRequest,
-  addContentLength = false,
-) {
+export async function exportHarWithRenderedRequest(renderedRequest: RenderedRequest, addContentLength = false) {
   const url = smartEncodeUrl(renderedRequest.url, renderedRequest.settingEncodeUrl);
 
   if (addContentLength) {
-    const hasContentLengthHeader =
-      filterHeaders(renderedRequest.headers, 'Content-Length').length > 0;
+    const hasContentLengthHeader = filterHeaders(renderedRequest.headers, 'Content-Length').length > 0;
 
     if (!hasContentLengthHeader) {
       const name = 'Content-Length';
@@ -277,23 +262,19 @@ function getRequestCookies(renderedRequest: RenderedRequest) {
 }
 
 export function getResponseCookiesFromHeaders(headers: Har.Cookie[]) {
-  return getSetCookieHeaders(headers)
-    .reduce((accumulator, harCookie) => {
-      let cookie: null | undefined | ToughCookie = null;
+  return getSetCookieHeaders(headers).reduce((accumulator, harCookie) => {
+    let cookie: null | undefined | ToughCookie = null;
 
-      try {
-        cookie = ToughCookie.parse(harCookie.value || '', { loose: true });
-      } catch (error) { }
+    try {
+      cookie = ToughCookie.parse(harCookie.value || '', { loose: true });
+    } catch (error) {}
 
-      if (cookie === null || cookie === undefined) {
-        return accumulator;
-      }
+    if (cookie === null || cookie === undefined) {
+      return accumulator;
+    }
 
-      return [
-        ...accumulator,
-        mapCookie(cookie),
-      ];
-    }, [] as Har.Cookie[]);
+    return [...accumulator, mapCookie(cookie)];
+  }, [] as Har.Cookie[]);
 }
 
 function getResponseCookies(response: Response) {
@@ -403,9 +384,7 @@ function getRequestPostData(renderedRequest: RenderedRequest): Har.PostData | un
       mimeType: body.mimeType || '',
       params: body.params.map(({ name, value, fileName, type }) => ({
         name,
-        ...(type === 'file'
-          ? { fileName }
-          : { value }),
+        ...(type === 'file' ? { fileName } : { value }),
       })),
     };
   }
diff --git a/packages/insomnia/src/common/hotkeys.ts b/packages/insomnia/src/common/hotkeys.ts
index e7b4ab4f6f..879bf29eee 100644
--- a/packages/insomnia/src/common/hotkeys.ts
+++ b/packages/insomnia/src/common/hotkeys.ts
@@ -8,34 +8,34 @@ import { strings } from './strings';
  * @IMPORTANT Not using dot, because NeDB prohibits field names to contain dots.
  */
 export const keyboardShortcutDescriptions: Record<KeyboardShortcut, string> = {
-  'workspace_showSettings': `Show ${strings.document.singular} / ${strings.collection.singular} Settings`,
-  'request_showSettings': 'Show Request Settings',
-  'preferences_showKeyboardShortcuts': 'Show Keyboard Shortcuts',
-  'preferences_showGeneral': 'Show App Preferences',
-  'request_quickSwitch': 'Quick search',
-  'plugin_reload': 'Reload Plugins',
-  'showAutocomplete': 'Show Autocomplete',
-  'request_send': 'Send Request',
-  'request_showOptions': 'Send Request (Options)',
-  'environment_showEditor': 'Show Environment Editor',
-  'environment_showSwitchMenu': 'Switch Environments',
-  'request_toggleHttpMethodMenu': 'Change HTTP Method',
-  'request_toggleHistory': 'Show Request History',
-  'request_focusUrl': 'Focus URL',
-  'request_showGenerateCodeEditor': 'Generate Code',
-  'sidebar_focusFilter': 'Filter Sidebar',
-  'sidebar_toggle': 'Toggle Sidebar',
-  'response_focus': 'Focus Response',
-  'showCookiesEditor': 'Edit Cookies',
-  'request_createHTTP': 'Create HTTP Request',
-  'request_showDelete': 'Delete Request',
-  'request_showCreateFolder': 'Create Folder',
-  'request_showDuplicate': 'Duplicate Request',
-  'request_togglePin': 'Pin/Unpin Request',
-  'environment_showVariableSourceAndValue': 'Show variable source and value',
-  'beautifyRequestBody': 'Beautify Active Code Editors',
-  'graphql_explorer_focus_filter': 'Focus GraphQL Explorer Filter',
-  'close_tab': 'Close Tab',
+  workspace_showSettings: `Show ${strings.document.singular} / ${strings.collection.singular} Settings`,
+  request_showSettings: 'Show Request Settings',
+  preferences_showKeyboardShortcuts: 'Show Keyboard Shortcuts',
+  preferences_showGeneral: 'Show App Preferences',
+  request_quickSwitch: 'Quick search',
+  plugin_reload: 'Reload Plugins',
+  showAutocomplete: 'Show Autocomplete',
+  request_send: 'Send Request',
+  request_showOptions: 'Send Request (Options)',
+  environment_showEditor: 'Show Environment Editor',
+  environment_showSwitchMenu: 'Switch Environments',
+  request_toggleHttpMethodMenu: 'Change HTTP Method',
+  request_toggleHistory: 'Show Request History',
+  request_focusUrl: 'Focus URL',
+  request_showGenerateCodeEditor: 'Generate Code',
+  sidebar_focusFilter: 'Filter Sidebar',
+  sidebar_toggle: 'Toggle Sidebar',
+  response_focus: 'Focus Response',
+  showCookiesEditor: 'Edit Cookies',
+  request_createHTTP: 'Create HTTP Request',
+  request_showDelete: 'Delete Request',
+  request_showCreateFolder: 'Create Folder',
+  request_showDuplicate: 'Duplicate Request',
+  request_togglePin: 'Pin/Unpin Request',
+  environment_showVariableSourceAndValue: 'Show variable source and value',
+  beautifyRequestBody: 'Beautify Active Code Editors',
+  graphql_explorer_focus_filter: 'Focus GraphQL Explorer Filter',
+  close_tab: 'Close Tab',
 };
 
 /**
@@ -191,10 +191,7 @@ export function getPlatformKeyCombinations(bindings: PlatformKeyCombinations): K
 /**
  * Determine whether two key combinations are the same by comparing each of their keys.
  */
-export function areSameKeyCombinations(
-  keyComb1: KeyCombination,
-  keyComb2: KeyCombination,
-) {
+export function areSameKeyCombinations(keyComb1: KeyCombination, keyComb2: KeyCombination) {
   return (
     keyComb1.keyCode === keyComb2.keyCode &&
     Boolean(keyComb1.alt) === Boolean(keyComb2.alt) &&
@@ -236,7 +233,6 @@ export function isModifierKeyCode(keyCode: number): boolean {
     keyCode === keyboardKeys.alt.keyCode ||
     keyCode === keyboardKeys.shift.keyCode ||
     keyCode === keyboardKeys.ctrl.keyCode ||
-
     // Meta keys.
     keyCode === keyboardKeys.leftwindowkey.keyCode ||
     keyCode === keyboardKeys.rightwindowkey.keyCode ||
@@ -253,10 +249,7 @@ export function isModifierKeyCode(keyCode: number): boolean {
  * @returns the constructed string, if keyCode is null and the characters are joined with " + ",
  * it will have a dangling "+" as the last character, e.g., "Alt + Ctrl +".
  */
-export function constructKeyCombinationDisplay(
-  keyComb: KeyCombination,
-  mustUsePlus: boolean,
-) {
+export function constructKeyCombinationDisplay(keyComb: KeyCombination, mustUsePlus: boolean) {
   const { keyCode } = keyComb;
   const chars: string[] = [];
 
diff --git a/packages/insomnia/src/common/import-v5-parser.ts b/packages/insomnia/src/common/import-v5-parser.ts
index 0d58667865..f66bcc6f76 100644
--- a/packages/insomnia/src/common/import-v5-parser.ts
+++ b/packages/insomnia/src/common/import-v5-parser.ts
@@ -6,9 +6,7 @@ const literalSchema = z.union([z.string(), z.number(), z.boolean(), z.null()]);
 
 type Literal = z.infer<typeof literalSchema>;
 type Json = Literal | { [key: string]: Json } | Json[];
-const jsonSchema: z.ZodType<Json> = z.lazy(() =>
-  z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)])
-);
+const jsonSchema: z.ZodType<Json> = z.lazy(() => z.union([literalSchema, z.array(jsonSchema), z.record(jsonSchema)]));
 
 const MetaSchema = z.object({
   id: z.string(),
@@ -28,7 +26,10 @@ const CACertificateSchema = z.object({
 });
 
 const CookieSchema = z.object({
-  id: z.string().optional().default(() => crypto.randomUUID()),
+  id: z
+    .string()
+    .optional()
+    .default(() => crypto.randomUUID()),
   key: z.string().optional().default(''),
   value: z.string().optional().default(''),
   expires: z.coerce.date().nullable().default(null),
@@ -58,15 +59,19 @@ const EnvironmentSchema = z.object({
   meta: MetaSchema.extend({
     sortKey: z.number().optional(),
   }).optional(),
-  subEnvironments: z.array(z.object({
-    name: z.string(),
-    data: jsonSchema.optional(),
-    dataPropertyOrder: jsonSchema.optional(),
-    color: z.string().optional().nullable(),
-    meta: MetaSchema.extend({
-      sortKey: z.number().optional(),
-    }).optional(),
-  })).optional(),
+  subEnvironments: z
+    .array(
+      z.object({
+        name: z.string(),
+        data: jsonSchema.optional(),
+        dataPropertyOrder: jsonSchema.optional(),
+        color: z.string().optional().nullable(),
+        meta: MetaSchema.extend({
+          sortKey: z.number().optional(),
+        }).optional(),
+      }),
+    )
+    .optional(),
 });
 
 export const GRPCRequestSchema = z.object({
@@ -74,15 +79,21 @@ export const GRPCRequestSchema = z.object({
   url: z.string().optional().default(''),
   protoFileId: z.string().optional().nullable(),
   protoMethodName: z.string().optional(),
-  body: z.object({
-    text: z.string().optional(),
-  }).optional(),
-  metadata: z.array(z.object({
-    name: z.string().optional().default(''),
-    value: z.string().optional().default(''),
-    description: z.string().optional(),
-    disabled: z.boolean().optional(),
-  })).optional(),
+  body: z
+    .object({
+      text: z.string().optional(),
+    })
+    .optional(),
+  metadata: z
+    .array(
+      z.object({
+        name: z.string().optional().default(''),
+        value: z.string().optional().default(''),
+        description: z.string().optional(),
+        disabled: z.boolean().optional(),
+      }),
+    )
+    .optional(),
   reflectionApi: z.object({
     enabled: z.boolean().optional().default(false),
     url: z.string().optional().default(''),
@@ -101,148 +112,188 @@ const MockRouteSchema = z.object({
   name: z.string().optional(),
   mimeType: z.string().optional(),
   method: z.string().optional(),
-  headers: z.array(z.object({
-    name: z.string(),
-    value: z.string(),
-  })).optional(),
+  headers: z
+    .array(
+      z.object({
+        name: z.string(),
+        value: z.string(),
+      }),
+    )
+    .optional(),
   meta: MetaSchema.optional(),
 });
 
 const AuthenticationSchema = z.union([
   z.discriminatedUnion('type', [
-    z.object({
-      type: z.literal('basic'),
-      useISO88591: z.boolean().default(false),
-      username: z.string(),
-      password: z.string(),
-      disabled: z.boolean().optional(),
-    }, {
-      description: 'Basic Authentication',
-    }),
-    z.object({
-      type: z.literal('apikey'),
-      key: z.string().optional(),
-      value: z.string().optional(),
-      disabled: z.boolean().optional(),
-      addTo: z.string().optional(),
-    }, {
-      description: 'API Key Authentication',
-    }),
-    z.object({
-      type: z.literal('oauth2'),
-      disabled: z.boolean().optional(),
-      grantType: z.enum(['authorization_code', 'client_credentials', 'implicit', 'password', 'refresh_token']),
-      accessTokenUrl: z.string().optional(),
-      authorizationUrl: z.string().optional(),
-      clientId: z.string().optional(),
-      clientSecret: z.string().optional(),
-      audience: z.string().optional(),
-      scope: z.string().optional(),
-      resource: z.string().optional(),
-      username: z.string().optional(),
-      password: z.string().optional(),
-      redirectUrl: z.string().optional(),
-      credentialsInBody: z.boolean().optional(),
-      state: z.string().optional(),
-      code: z.string().optional(),
-      accessToken: z.string().optional(),
-      refreshToken: z.string().optional(),
-      tokenPrefix: z.string().optional(),
-      usePkce: z.boolean().optional(),
-      pkceMethod: z.string().optional(),
-      responseType: z.enum(['code', 'token', 'none', 'id_token', 'id_token token']).optional(),
-      origin: z.string().optional(),
-    }, {
-      description: 'OAuth 2.0 Authentication',
-    }),
-    z.object({
-      type: z.literal('hawk'),
-      id: z.string().optional().default(''),
-      key: z.string().optional().default(''),
-      ext: z.string().optional(),
-      validatePayload: z.boolean().optional(),
-      algorithm: z.enum(['sha1', 'sha256']),
-      disabled: z.boolean().optional(),
-    }, {
-      description: 'Hawk Authentication',
-    }),
-    z.object({
-      type: z.literal('oauth1'),
-      disabled: z.boolean().optional(),
-      signatureMethod: z.enum(['HMAC-SHA1', 'RSA-SHA1', 'HMAC-SHA256', 'PLAINTEXT']),
-      consumerKey: z.string().optional(),
-      tokenKey: z.string().optional(),
-      tokenSecret: z.string().optional(),
-      privateKey: z.string().optional(),
-      version: z.string().optional(),
-      nonce: z.string().optional(),
-      timestamp: z.string().optional(),
-      callback: z.string().optional(),
-      realm: z.string().optional(),
-      verifier: z.string().optional(),
-      includeBodyHash: z.boolean().optional(),
-    }, {
-      description: 'OAuth 1.0 Authentication',
-    }),
-    z.object({
-      type: z.literal('digest'),
-      disabled: z.boolean().optional(),
-      username: z.string().optional(),
-      password: z.string().optional(),
-    }, {
-      description: 'Digest Authentication',
-    }),
-    z.object({
-      type: z.literal('ntlm'),
-      disabled: z.boolean().optional(),
-      username: z.string().optional().default(''),
-      password: z.string().optional().default(''),
-    }, {
-      description: 'NTLM Authentication',
-    }),
-    z.object({
-      type: z.literal('bearer'),
-      disabled: z.boolean().optional(),
-      token: z.string().optional(),
-      prefix: z.string().optional(),
-    }, {
-      description: 'Bearer Authentication',
-    }),
-    z.object({
-      type: z.literal('iam'),
-      disabled: z.boolean().optional(),
-      accessKeyId: z.string().optional(),
-      secretAccessKey: z.string().optional(),
-      sessionToken: z.string().optional(),
-      region: z.string().optional(),
-      service: z.string().optional(),
-    }, {
-      description: 'AWS IAM Authentication',
-    }),
-    z.object({
-      type: z.literal('netrc'),
-      disabled: z.boolean().optional(),
-    }, {
-      description: 'Netrc Authentication',
-    }),
-    z.object({
-      type: z.literal('asap'),
-      disabled: z.boolean().optional(),
-      issuer: z.string().optional(),
-      subject: z.string().optional(),
-      audience: z.string().optional(),
-      addintionalClaims: z.string().optional(),
-      privateKey: z.string().optional(),
-      keyId: z.string().optional(),
-    }, {
-      description: 'ASAP Authentication',
-    }),
-    z.object({
-      type: z.literal('none'),
-      disabled: z.boolean().optional(),
-    }, {
-      description: 'No Authentication',
-    }),
+    z.object(
+      {
+        type: z.literal('basic'),
+        useISO88591: z.boolean().default(false),
+        username: z.string(),
+        password: z.string(),
+        disabled: z.boolean().optional(),
+      },
+      {
+        description: 'Basic Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('apikey'),
+        key: z.string().optional(),
+        value: z.string().optional(),
+        disabled: z.boolean().optional(),
+        addTo: z.string().optional(),
+      },
+      {
+        description: 'API Key Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('oauth2'),
+        disabled: z.boolean().optional(),
+        grantType: z.enum(['authorization_code', 'client_credentials', 'implicit', 'password', 'refresh_token']),
+        accessTokenUrl: z.string().optional(),
+        authorizationUrl: z.string().optional(),
+        clientId: z.string().optional(),
+        clientSecret: z.string().optional(),
+        audience: z.string().optional(),
+        scope: z.string().optional(),
+        resource: z.string().optional(),
+        username: z.string().optional(),
+        password: z.string().optional(),
+        redirectUrl: z.string().optional(),
+        credentialsInBody: z.boolean().optional(),
+        state: z.string().optional(),
+        code: z.string().optional(),
+        accessToken: z.string().optional(),
+        refreshToken: z.string().optional(),
+        tokenPrefix: z.string().optional(),
+        usePkce: z.boolean().optional(),
+        pkceMethod: z.string().optional(),
+        responseType: z.enum(['code', 'token', 'none', 'id_token', 'id_token token']).optional(),
+        origin: z.string().optional(),
+      },
+      {
+        description: 'OAuth 2.0 Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('hawk'),
+        id: z.string().optional().default(''),
+        key: z.string().optional().default(''),
+        ext: z.string().optional(),
+        validatePayload: z.boolean().optional(),
+        algorithm: z.enum(['sha1', 'sha256']),
+        disabled: z.boolean().optional(),
+      },
+      {
+        description: 'Hawk Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('oauth1'),
+        disabled: z.boolean().optional(),
+        signatureMethod: z.enum(['HMAC-SHA1', 'RSA-SHA1', 'HMAC-SHA256', 'PLAINTEXT']),
+        consumerKey: z.string().optional(),
+        tokenKey: z.string().optional(),
+        tokenSecret: z.string().optional(),
+        privateKey: z.string().optional(),
+        version: z.string().optional(),
+        nonce: z.string().optional(),
+        timestamp: z.string().optional(),
+        callback: z.string().optional(),
+        realm: z.string().optional(),
+        verifier: z.string().optional(),
+        includeBodyHash: z.boolean().optional(),
+      },
+      {
+        description: 'OAuth 1.0 Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('digest'),
+        disabled: z.boolean().optional(),
+        username: z.string().optional(),
+        password: z.string().optional(),
+      },
+      {
+        description: 'Digest Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('ntlm'),
+        disabled: z.boolean().optional(),
+        username: z.string().optional().default(''),
+        password: z.string().optional().default(''),
+      },
+      {
+        description: 'NTLM Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('bearer'),
+        disabled: z.boolean().optional(),
+        token: z.string().optional(),
+        prefix: z.string().optional(),
+      },
+      {
+        description: 'Bearer Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('iam'),
+        disabled: z.boolean().optional(),
+        accessKeyId: z.string().optional(),
+        secretAccessKey: z.string().optional(),
+        sessionToken: z.string().optional(),
+        region: z.string().optional(),
+        service: z.string().optional(),
+      },
+      {
+        description: 'AWS IAM Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('netrc'),
+        disabled: z.boolean().optional(),
+      },
+      {
+        description: 'Netrc Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('asap'),
+        disabled: z.boolean().optional(),
+        issuer: z.string().optional(),
+        subject: z.string().optional(),
+        audience: z.string().optional(),
+        addintionalClaims: z.string().optional(),
+        privateKey: z.string().optional(),
+        keyId: z.string().optional(),
+      },
+      {
+        description: 'ASAP Authentication',
+      },
+    ),
+    z.object(
+      {
+        type: z.literal('none'),
+        disabled: z.boolean().optional(),
+      },
+      {
+        description: 'No Authentication',
+      },
+    ),
   ]),
   z.object({}),
 ]);
@@ -272,15 +323,19 @@ export const WebSocketRequestSettingsSchema = z.object({
   followRedirects: z.enum(['global', 'on', 'off']).optional().default('global'),
 });
 
-export const RequestParametersSchema = z.array(z.object({
-  name: z.string().optional().default(''),
-  value: z.string().optional().default(''),
-}));
+export const RequestParametersSchema = z.array(
+  z.object({
+    name: z.string().optional().default(''),
+    value: z.string().optional().default(''),
+  }),
+);
 
-export const RequestHeadersSchema = z.array(z.object({
-  name: z.string().optional().default(''),
-  value: z.string().optional().default(''),
-}));
+export const RequestHeadersSchema = z.array(
+  z.object({
+    name: z.string().optional().default(''),
+    value: z.string().optional().default(''),
+  }),
+);
 
 export const RequestGroupSchema = z.object({
   name: z.string().optional().default(''),
@@ -299,36 +354,54 @@ export const RequestSchema = z.object({
   url: z.string().optional().default(''),
   name: z.string().optional().default(''),
   method: z.string(),
-  body: z.object({
-    mimeType: z.string().optional().nullable(),
-    text: z.string().optional(),
-    fileName: z.string().optional(),
-    params: z.array(z.object({
-      name: z.string(),
-      value: z.string().optional().default(''),
-      description: z.string().optional(),
-      disabled: z.boolean().optional(),
-      multiline: z.string().optional(),
-      id: z.string().optional(),
+  body: z
+    .object({
+      mimeType: z.string().optional().nullable(),
+      text: z.string().optional(),
       fileName: z.string().optional(),
-      type: z.string().optional(),
-    })).optional(),
-  }).optional(),
-  headers: z.array(z.object({
-    name: z.string().optional().default(''),
-    value: z.string().optional().default(''),
-  })).optional(),
-  parameters: z.array(z.object({
-    name: z.string().optional().default(''),
-    value: z.string().optional().default(''),
-    disabled: z.boolean().optional(),
-    id: z.string().optional(),
-    fileName: z.string().optional(),
-  })).optional(),
-  pathParameters: z.array(z.object({
-    name: z.string().optional().default(''),
-    value: z.string().optional().default(''),
-  })).optional(),
+      params: z
+        .array(
+          z.object({
+            name: z.string(),
+            value: z.string().optional().default(''),
+            description: z.string().optional(),
+            disabled: z.boolean().optional(),
+            multiline: z.string().optional(),
+            id: z.string().optional(),
+            fileName: z.string().optional(),
+            type: z.string().optional(),
+          }),
+        )
+        .optional(),
+    })
+    .optional(),
+  headers: z
+    .array(
+      z.object({
+        name: z.string().optional().default(''),
+        value: z.string().optional().default(''),
+      }),
+    )
+    .optional(),
+  parameters: z
+    .array(
+      z.object({
+        name: z.string().optional().default(''),
+        value: z.string().optional().default(''),
+        disabled: z.boolean().optional(),
+        id: z.string().optional(),
+        fileName: z.string().optional(),
+      }),
+    )
+    .optional(),
+  pathParameters: z
+    .array(
+      z.object({
+        name: z.string().optional().default(''),
+        value: z.string().optional().default(''),
+      }),
+    )
+    .optional(),
   authentication: AuthenticationSchema.optional(),
   scripts: ScriptsSchema.optional(),
   settings: RequestSettingsSchema.optional().default({
@@ -382,23 +455,25 @@ const RequestGroupWithChildrenSchema: z.ZodType<RequestGroup> = RequestGroupSche
   pathParameters: z.undefined(),
 });
 
-const RequestCollectionSchema = z.union([
-  GRPCRequestSchema.extend({
-    // These undefined properties are added to differentiate between the different types of children in the union
-    children: z.undefined(),
-    method: z.undefined(),
-  }),
-  RequestSchema.extend({
-    // These undefined properties are added to differentiate between the different types of children in the union
-    children: z.undefined(),
-  }),
-  WebsocketRequestSchema.extend({
-    // These undefined properties are added to differentiate between the different types of children in the union
-    children: z.undefined(),
-    method: z.undefined(),
-  }),
-  RequestGroupWithChildrenSchema,
-]).array();
+const RequestCollectionSchema = z
+  .union([
+    GRPCRequestSchema.extend({
+      // These undefined properties are added to differentiate between the different types of children in the union
+      children: z.undefined(),
+      method: z.undefined(),
+    }),
+    RequestSchema.extend({
+      // These undefined properties are added to differentiate between the different types of children in the union
+      children: z.undefined(),
+    }),
+    WebsocketRequestSchema.extend({
+      // These undefined properties are added to differentiate between the different types of children in the union
+      children: z.undefined(),
+      method: z.undefined(),
+    }),
+    RequestGroupWithChildrenSchema,
+  ])
+  .array();
 
 const TestSchema = z.object({
   name: z.string().optional().default(''),
@@ -417,13 +492,16 @@ const TestSuiteSchema = z.object({
   tests: z.array(TestSchema).optional(),
 });
 
-const SpecSchema = z.union([z.object({
-  meta: MetaSchema.optional(),
-  file: z.string(),
-}), z.object({
-  meta: MetaSchema.optional(),
-  contents: jsonSchema.optional(),
-})]);
+const SpecSchema = z.union([
+  z.object({
+    meta: MetaSchema.optional(),
+    file: z.string(),
+  }),
+  z.object({
+    meta: MetaSchema.optional(),
+    contents: jsonSchema.optional(),
+  }),
+]);
 
 const collectionSchema = z.object({
   type: z.literal('collection.insomnia.rest/5.0'),
@@ -454,11 +532,13 @@ const mockServerSchema = z.object({
   meta: MetaSchema.optional(),
   name: z.string().optional(),
   description: z.string().optional(),
-  server: z.object({
-    meta: MetaSchema.optional(),
-    url: z.string(),
-    useInsomniaCloud: z.boolean().default(true),
-  }).optional(),
+  server: z
+    .object({
+      meta: MetaSchema.optional(),
+      url: z.string(),
+      useInsomniaCloud: z.boolean().default(true),
+    })
+    .optional(),
   routes: z.array(MockRouteSchema).optional(),
 });
 
diff --git a/packages/insomnia/src/common/import.ts b/packages/insomnia/src/common/import.ts
index 086689b29a..163e71ecb2 100644
--- a/packages/insomnia/src/common/import.ts
+++ b/packages/insomnia/src/common/import.ts
@@ -12,10 +12,7 @@ import { isRequest, type Request } from '../models/request';
 import { isRequestGroup } from '../models/request-group';
 import { isUnitTest, type UnitTest } from '../models/unit-test';
 import { isUnitTestSuite, type UnitTestSuite } from '../models/unit-test-suite';
-import {
-  isWebSocketRequest,
-  type WebSocketRequest,
-} from '../models/websocket-request';
+import { isWebSocketRequest, type WebSocketRequest } from '../models/websocket-request';
 import { isWorkspace, type Workspace } from '../models/workspace';
 import type { CurrentPlan } from '../ui/routes/organization';
 import { convert, type InsomniaImporter } from '../utils/importers/convert';
@@ -37,19 +34,20 @@ interface ConvertResult {
 }
 
 const isSubEnvironmentResource = (environment: Environment) => {
-  return !environment.parentId || environment.parentId.startsWith(models.environment.prefix) || environment.parentId.startsWith('__BASE_ENVIRONMENT_ID__');
+  return (
+    !environment.parentId ||
+    environment.parentId.startsWith(models.environment.prefix) ||
+    environment.parentId.startsWith('__BASE_ENVIRONMENT_ID__')
+  );
 };
 
-export const isInsomniaV4Import = ({ id }: Pick<InsomniaImporter, 'id'>) =>
-  id === 'insomnia-4';
+export const isInsomniaV4Import = ({ id }: Pick<InsomniaImporter, 'id'>) => id === 'insomnia-4';
 
 export async function fetchImportContentFromURI({ uri }: { uri: string }) {
   const url = new URL(uri);
 
   if (url.origin === 'https://github.com') {
-    uri = uri
-      .replace('https://github.com', 'https://raw.githubusercontent.com')
-      .replace('blob/', '');
+    uri = uri.replace('https://github.com', 'https://raw.githubusercontent.com').replace('blob/', '');
   }
 
   if (uri.match(/^(http|https):\/\//)) {
@@ -67,7 +65,6 @@ export async function fetchImportContentFromURI({ uri }: { uri: string }) {
   const content = decodeURIComponent(uri);
 
   return content;
-
 }
 
 export interface ImportFileDetail {
@@ -120,91 +117,93 @@ let resourceCacheList: ResourceCacheType[] = [];
 
 export async function scanResources(contentList: string[] | ImportFileDetail[]): Promise<ScanResult[]> {
   resourceCacheList = [];
-  const results = await Promise.allSettled(contentList.map(async content => {
-    const contentStr = typeof content === 'string' ? content : content.contentStr;
-    const oriFileName = typeof content === 'string' ? '' : content.oriFileName;
+  const results = await Promise.allSettled(
+    contentList.map(async content => {
+      const contentStr = typeof content === 'string' ? content : content.contentStr;
+      const oriFileName = typeof content === 'string' ? '' : content.oriFileName;
 
-    let result: ConvertResult | null = null;
+      let result: ConvertResult | null = null;
 
-    try {
-      const insomnia5Import = importInsomniaV5Data(contentStr);
-      if (insomnia5Import.length > 0) {
-        result = {
-          type: {
-            id: 'insomnia-5',
-            name: 'Insomnia v5',
-            description: 'Insomnia v5',
-          },
-          data: {
-            // @ts-expect-error -- TSCONVERSION
-            resources: insomnia5Import,
-          },
-        };
-      } else {
-        result = (await convert(contentStr)) as unknown as ConvertResult;
+      try {
+        const insomnia5Import = importInsomniaV5Data(contentStr);
+        if (insomnia5Import.length > 0) {
+          result = {
+            type: {
+              id: 'insomnia-5',
+              name: 'Insomnia v5',
+              description: 'Insomnia v5',
+            },
+            data: {
+              // @ts-expect-error -- TSCONVERSION
+              resources: insomnia5Import,
+            },
+          };
+        } else {
+          result = (await convert(contentStr)) as unknown as ConvertResult;
+        }
+      } catch (err: unknown) {
+        if (err instanceof Error) {
+          return {
+            oriFileName,
+            errors: [err.message],
+          };
+        }
       }
-    } catch (err: unknown) {
-      if (err instanceof Error) {
+
+      if (!result) {
         return {
           oriFileName,
-          errors: [err.message],
+          errors: ['No resources found to import.'],
         };
       }
-    }
 
-    if (!result) {
-      return {
-        oriFileName,
-        errors: ['No resources found to import.'],
-      };
-    }
+      const { type, data } = result;
 
-    const { type, data } = result;
+      const resources = data.resources
+        .filter(r => r._type)
+        .map(r => {
+          const { _type, ...model } = r;
+          return { ...model, type: models.MODELS_BY_EXPORT_TYPE[_type].type };
+        });
 
-    const resources = data.resources
-      .filter(r => r._type)
-      .map(r => {
-        const { _type, ...model } = r;
-        return { ...model, type: models.MODELS_BY_EXPORT_TYPE[_type].type };
+      resourceCacheList.push({
+        resources,
+        importer: type,
+        content: contentStr,
       });
 
-    resourceCacheList.push({
-      resources,
-      importer: type,
-      content: contentStr,
-    });
+      const requests = resources.filter(isRequest);
+      const websocketRequests = resources.filter(isWebSocketRequest);
+      const grpcRequests = resources.filter(isGrpcRequest);
+      const environments = resources.filter(isEnvironment);
+      const unitTests = resources.filter(isUnitTest);
+      const unitTestSuites = resources.filter(isUnitTestSuite);
+      const apiSpecs = resources.filter(isApiSpec);
+      const workspaces = resources.filter(isWorkspace);
+      const cookieJars = resources.filter(isCookieJar);
+      const mockRoutes = resources.filter(isMockRoute);
 
-    const requests = resources.filter(isRequest);
-    const websocketRequests = resources.filter(isWebSocketRequest);
-    const grpcRequests = resources.filter(isGrpcRequest);
-    const environments = resources.filter(isEnvironment);
-    const unitTests = resources.filter(isUnitTest);
-    const unitTestSuites = resources.filter(isUnitTestSuite);
-    const apiSpecs = resources.filter(isApiSpec);
-    const workspaces = resources.filter(isWorkspace);
-    const cookieJars = resources.filter(isCookieJar);
-    const mockRoutes = resources.filter(isMockRoute);
-
-    return {
-      type,
-      unitTests,
-      unitTestSuites,
-      requests: [...requests, ...websocketRequests, ...grpcRequests],
-      workspaces,
-      environments,
-      apiSpecs,
-      cookieJars,
-      mockRoutes,
-      oriFileName,
-      errors: [],
-    };
-  }));
-  return results.map(
-    retObj => retObj.status === 'fulfilled'
+      return {
+        type,
+        unitTests,
+        unitTestSuites,
+        requests: [...requests, ...websocketRequests, ...grpcRequests],
+        workspaces,
+        environments,
+        apiSpecs,
+        cookieJars,
+        mockRoutes,
+        oriFileName,
+        errors: [],
+      };
+    }),
+  );
+  return results.map(retObj =>
+    retObj.status === 'fulfilled'
       ? retObj.value
       : {
-        errors: [retObj.reason.toString()],
-      }
+          errors: [retObj.reason.toString()],
+        },
   );
 }
 
@@ -217,15 +216,12 @@ export async function importResourcesToProject({
 }) {
   invariant(resourceCacheList.length > 0, 'No resources to import');
   for (const resourceCacheItem of resourceCacheList) {
-    const {
-      resources,
-      importer,
-    } = resourceCacheItem;
+    const { resources, importer } = resourceCacheItem;
     const bufferId = await db.bufferChanges();
 
     // if the resource is postman collection
     const postmanTopLevelFolder = resources.find(
-      resource => isRequestGroup(resource) && resource.parentId === '__WORKSPACE_ID__'
+      resource => isRequestGroup(resource) && resource.parentId === '__WORKSPACE_ID__',
     ) as Workspace | undefined;
     if (importer.id === 'postman' && postmanTopLevelFolder) {
       await importResourcesToNewWorkspace({
@@ -239,19 +235,21 @@ export async function importResourcesToProject({
 
     // if the resource is postman environment,
     if (importer.id === postmanEnvImporterId && resources.find(isEnvironment)) {
-      await Promise.all(resources.filter(isEnvironment).map(resource =>
-        importResourcesToNewWorkspace({
-          projectId,
-          resourceCacheItem,
-          workspaceToImport: {
-            name: resource.name,
-            scope: 'environment',
-            // __BASE_ENVIRONMENT_ID__ is the default parentId for environment imported by postman env importer, we use it to indicate the new workspace id
-            _id: '__BASE_ENVIRONMENT_ID__',
-          } as Workspace,
-          syncNewWorkspaceIfNeeded,
-        })
-      ));
+      await Promise.all(
+        resources.filter(isEnvironment).map(resource =>
+          importResourcesToNewWorkspace({
+            projectId,
+            resourceCacheItem,
+            workspaceToImport: {
+              name: resource.name,
+              scope: 'environment',
+              // __BASE_ENVIRONMENT_ID__ is the default parentId for environment imported by postman env importer, we use it to indicate the new workspace id
+              _id: '__BASE_ENVIRONMENT_ID__',
+            } as Workspace,
+            syncNewWorkspaceIfNeeded,
+          }),
+        ),
+      );
       continue;
     }
 
@@ -268,10 +266,12 @@ export async function importResourcesToProject({
     }
 
     // One or more workspaces in one resourceCacheItem(A resourceCacheItem corresponds to an import file), filter in the resources that belong to each workspace and then import to new workspaces respectively
-    await Promise.all(workspaceResources
-      .map(workspace => {
+    await Promise.all(
+      workspaceResources.map(workspace => {
         if (workspaceResources.filter(({ _id }) => _id === '__WORKSPACE_ID__').length > 1) {
-          console.warn(`There are more than one workspace with id __WORKSPACE_ID__ in the resources, the importer is ${resourceCacheItem.importer.name}`);
+          console.warn(
+            `There are more than one workspace with id __WORKSPACE_ID__ in the resources, the importer is ${resourceCacheItem.importer.name}`,
+          );
         }
         // Here if there is only one workspace in the resources, we import all resources to it
         let resourcesInCurrentWorkspace = resources;
@@ -288,17 +288,15 @@ export async function importResourcesToProject({
           workspaceToImport: workspace,
           syncNewWorkspaceIfNeeded,
         });
-      }));
+      }),
+    );
 
     await db.flushChanges(bufferId);
   }
 }
 
 // Filter resources that belong to the workspace, including the workspace itself
-function filterResourcesInWorkspace(
-  resources: BaseModel[],
-  workspace: Workspace,
-) {
+function filterResourcesInWorkspace(resources: BaseModel[], workspace: Workspace) {
   const workspaceId = workspace._id;
   const idToParentIdMap = new Map<string, string>();
   resources.forEach(resource => {
@@ -325,7 +323,7 @@ function filterResourcesInWorkspace(
 
 const isTeamOrAbove = async () => {
   const { accountId } = await userSession.getOrCreate();
-  const currentPlan = JSON.parse(localStorage.getItem(`${accountId}:currentPlan`) || '{}') as CurrentPlan || {};
+  const currentPlan = (JSON.parse(localStorage.getItem(`${accountId}:currentPlan`) || '{}') as CurrentPlan) || {};
   return ['team', 'enterprise', 'enterprise-member'].includes(currentPlan?.type);
 };
 const updateIdsInString = (str: string, ResourceIdMap: Map<string, string>) => {
@@ -337,14 +335,15 @@ const updateIdsInString = (str: string, ResourceIdMap: Map<string, string>) => {
 };
 const importRequestWithNewIds = (request: Request, ResourceIdMap: Map<string, string>, canTransform: boolean) => {
   let transformedRequest = request;
-  if (canTransform) { // if not logged in, this wont run
+  if (canTransform) {
+    // if not logged in, this wont run
     transformedRequest = JSON.parse(updateIdsInString(JSON.stringify(request), ResourceIdMap));
   }
-  return ({
+  return {
     ...transformedRequest,
     _id: ResourceIdMap.get(request._id),
     parentId: ResourceIdMap.get(request.parentId),
-  });
+  };
 };
 
 export const importResourcesToWorkspace = async ({ workspaceId }: { workspaceId: string }) => {
@@ -355,10 +354,7 @@ export const importResourcesToWorkspace = async ({ workspaceId }: { workspaceId:
     const ResourceIdMap = new Map();
     const existingWorkspace = await models.workspace.getById(workspaceId);
 
-    invariant(
-      existingWorkspace,
-      `Could not find workspace with id ${workspaceId}`
-    );
+    invariant(existingWorkspace, `Could not find workspace with id ${workspaceId}`);
     // Map new IDs
     ResourceIdMap.set(workspaceId, existingWorkspace._id);
     ResourceIdMap.set('__WORKSPACE_ID__', existingWorkspace._id);
@@ -366,17 +362,15 @@ export const importResourcesToWorkspace = async ({ workspaceId }: { workspaceId:
     toImport && ResourceIdMap.set(toImport._id, existingWorkspace._id);
 
     const optionalResources = resources.filter(
-      resource =>
-        !isWorkspace(resource) &&
-        !isApiSpec(resource) &&
-        !isCookieJar(resource) &&
-        !isEnvironment(resource)
+      resource => !isWorkspace(resource) && !isApiSpec(resource) && !isCookieJar(resource) && !isEnvironment(resource),
     );
 
     const baseEnvironment = await models.environment.getOrCreateForParentId(workspaceId);
     invariant(baseEnvironment, 'Could not create base environment');
 
-    const baseEnvironmentFromResources = resources.filter(isEnvironment).find(env => env.parentId && env.parentId.startsWith('__WORKSPACE_ID__'));
+    const baseEnvironmentFromResources = resources
+      .filter(isEnvironment)
+      .find(env => env.parentId && env.parentId.startsWith('__WORKSPACE_ID__'));
     if (baseEnvironmentFromResources) {
       await models.environment.update(baseEnvironment, { data: baseEnvironmentFromResources.data });
     }
@@ -436,22 +430,19 @@ export const importResourcesToWorkspace = async ({ workspaceId }: { workspaceId:
   }
 };
 
-export const isApiSpecImport = ({ id }: Pick<InsomniaImporter, 'id'>) =>
-  id === 'openapi3' || id === 'swagger2';
+export const isApiSpecImport = ({ id }: Pick<InsomniaImporter, 'id'>) => id === 'openapi3' || id === 'swagger2';
 
-const importResourcesToNewWorkspace = async (
-  {
-    projectId,
-    resourceCacheItem,
-    workspaceToImport,
-    syncNewWorkspaceIfNeeded,
-  }: {
-    projectId: string;
-    resourceCacheItem: ResourceCacheType;
-    workspaceToImport?: Workspace;
-    syncNewWorkspaceIfNeeded?: (workspace: Workspace) => Promise<void>;
-  }
-) => {
+const importResourcesToNewWorkspace = async ({
+  projectId,
+  resourceCacheItem,
+  workspaceToImport,
+  syncNewWorkspaceIfNeeded,
+}: {
+  projectId: string;
+  resourceCacheItem: ResourceCacheType;
+  workspaceToImport?: Workspace;
+  syncNewWorkspaceIfNeeded?: (workspace: Workspace) => Promise<void>;
+}) => {
   invariant(resourceCacheItem, 'No resources to import');
 
   const project = await models.project.getById(projectId);
@@ -504,7 +495,6 @@ const importResourcesToNewWorkspace = async (
         contentType: apiSpec.contentType,
         fileName: workspaceToImport?.name,
       });
-
     }
 
     // If we're importing into a new workspace
@@ -513,7 +503,7 @@ const importResourcesToNewWorkspace = async (
     workspaceToImport && ResourceIdMap.set(workspaceToImport._id, newWorkspace._id);
 
     const resourcesWithoutWorkspaceAndApiSpec = resources.filter(
-      resource => !isWorkspace(resource) && !isApiSpec(resource)
+      resource => !isWorkspace(resource) && !isApiSpec(resource),
     );
 
     for (const resource of resourcesWithoutWorkspaceAndApiSpec) {
@@ -564,9 +554,7 @@ const importResourcesToNewWorkspace = async (
       const firstSubEnvironment = subEnvironments[0];
 
       if (firstSubEnvironment) {
-        const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(
-          newWorkspace._id
-        );
+        const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(newWorkspace._id);
 
         await models.workspaceMeta.update(workspaceMeta, {
           activeEnvironmentId: ResourceIdMap.get(firstSubEnvironment._id),
diff --git a/packages/insomnia/src/common/insomnia-v5.ts b/packages/insomnia/src/common/insomnia-v5.ts
index 5494d9c803..44d1620f8a 100644
--- a/packages/insomnia/src/common/insomnia-v5.ts
+++ b/packages/insomnia/src/common/insomnia-v5.ts
@@ -13,14 +13,41 @@ import type { UnitTest } from '../models/unit-test';
 import type { UnitTestSuite } from '../models/unit-test-suite';
 import type { WebSocketRequest } from '../models/websocket-request';
 import type { Workspace, WorkspaceScope } from '../models/workspace';
-import { EXPORT_TYPE_API_SPEC, EXPORT_TYPE_COOKIE_JAR, EXPORT_TYPE_ENVIRONMENT, EXPORT_TYPE_GRPC_REQUEST, EXPORT_TYPE_MOCK_ROUTE, EXPORT_TYPE_MOCK_SERVER, EXPORT_TYPE_REQUEST, EXPORT_TYPE_REQUEST_GROUP, EXPORT_TYPE_UNIT_TEST, EXPORT_TYPE_UNIT_TEST_SUITE, EXPORT_TYPE_WEBSOCKET_REQUEST, EXPORT_TYPE_WORKSPACE } from './constants';
+import {
+  EXPORT_TYPE_API_SPEC,
+  EXPORT_TYPE_COOKIE_JAR,
+  EXPORT_TYPE_ENVIRONMENT,
+  EXPORT_TYPE_GRPC_REQUEST,
+  EXPORT_TYPE_MOCK_ROUTE,
+  EXPORT_TYPE_MOCK_SERVER,
+  EXPORT_TYPE_REQUEST,
+  EXPORT_TYPE_REQUEST_GROUP,
+  EXPORT_TYPE_UNIT_TEST,
+  EXPORT_TYPE_UNIT_TEST_SUITE,
+  EXPORT_TYPE_WEBSOCKET_REQUEST,
+  EXPORT_TYPE_WORKSPACE,
+} from './constants';
 import { database } from './database';
-import { type InsomniaFile, insomniaFileSchema, type Meta, WebsocketRequestSchema, type Z_GRPCRequest, type Z_Request, type Z_RequestGroup, type Z_WebsocketRequest } from './import-v5-parser';
+import {
+  type InsomniaFile,
+  insomniaFileSchema,
+  type Meta,
+  WebsocketRequestSchema,
+  type Z_GRPCRequest,
+  type Z_Request,
+  type Z_RequestGroup,
+  type Z_WebsocketRequest,
+} from './import-v5-parser';
 
 type WithExportType<T extends models.BaseModel> = T & { _type: string };
 
 function filterEmptyValue(value: string | number | boolean | null | undefined) {
-  return value !== null && value !== undefined && value !== '' && !(typeof value === 'object' && Object.keys(value).length === 0);
+  return (
+    value !== null &&
+    value !== undefined &&
+    value !== '' &&
+    !(typeof value === 'object' && Object.keys(value).length === 0)
+  );
 }
 
 function removeEmptyFields(data: any): any {
@@ -67,14 +94,15 @@ export function insomniaSchemaTypeToScope(type: InsomniaFile['type']): Workspace
     return 'design';
   }
   return 'mock-server';
-
 }
 
 function getWorkspace(file: InsomniaFile): WithExportType<Workspace> {
   return {
-    ...mapMetaToInsomniaMeta(file.meta || {
-      id: '__WORKSPACE_ID__',
-    }),
+    ...mapMetaToInsomniaMeta(
+      file.meta || {
+        id: '__WORKSPACE_ID__',
+      },
+    ),
     type: 'Workspace',
     _type: EXPORT_TYPE_WORKSPACE,
     name: file.name || 'Imported Collection',
@@ -86,30 +114,35 @@ function getWorkspace(file: InsomniaFile): WithExportType<Workspace> {
 function getEnvironments(file: InsomniaFile): Environment[] {
   if ('environments' in file && file.environments) {
     const baseEnvironment: WithExportType<Environment> = {
-      ...mapMetaToInsomniaMeta(file.environments.meta || {
-        id: '__ENVIRONMENT_ID__',
-      }),
+      ...mapMetaToInsomniaMeta(
+        file.environments.meta || {
+          id: '__ENVIRONMENT_ID__',
+        },
+      ),
       type: 'Environment',
       _type: EXPORT_TYPE_ENVIRONMENT,
       parentId: file.meta?.id || '__WORKSPACE_ID__',
       color: file.environments.color || null,
-      data: file.environments.data as Record<string, any> || {},
-      dataPropertyOrder: file.environments.dataPropertyOrder as Record<string, any> || undefined,
+      data: (file.environments.data as Record<string, any>) || {},
+      dataPropertyOrder: (file.environments.dataPropertyOrder as Record<string, any>) || undefined,
       name: file.environments.name || 'Base Environment',
     };
 
-    const subEnvironments: WithExportType<Environment>[] = file.environments.subEnvironments?.map((environment, index) => ({
-      ...mapMetaToInsomniaMeta(environment.meta || {
-        id: '__ENVIRONMENT_ID__',
-      }),
-      type: 'Environment',
-      _type: EXPORT_TYPE_ENVIRONMENT,
-      color: environment.color || null,
-      data: environment.data as Record<string, any> || {},
-      dataPropertyOrder: environment.dataPropertyOrder as Record<string, any> || undefined,
-      name: environment.name || `Environment ${index}`,
-      parentId: baseEnvironment._id,
-    })) || [];
+    const subEnvironments: WithExportType<Environment>[] =
+      file.environments.subEnvironments?.map((environment, index) => ({
+        ...mapMetaToInsomniaMeta(
+          environment.meta || {
+            id: '__ENVIRONMENT_ID__',
+          },
+        ),
+        type: 'Environment',
+        _type: EXPORT_TYPE_ENVIRONMENT,
+        color: environment.color || null,
+        data: (environment.data as Record<string, any>) || {},
+        dataPropertyOrder: (environment.dataPropertyOrder as Record<string, any>) || undefined,
+        name: environment.name || `Environment ${index}`,
+        parentId: baseEnvironment._id,
+      })) || [];
 
     return [baseEnvironment, ...subEnvironments];
   }
@@ -120,9 +153,11 @@ function getEnvironments(file: InsomniaFile): Environment[] {
 function getCookieJar(file: InsomniaFile): [CookieJar] | [] {
   if ('cookieJar' in file && file.cookieJar) {
     const cookieJar: WithExportType<CookieJar> = {
-      ...mapMetaToInsomniaMeta(file.cookieJar.meta || {
-        id: '__COOKIE_JAR_ID__',
-      }),
+      ...mapMetaToInsomniaMeta(
+        file.cookieJar.meta || {
+          id: '__COOKIE_JAR_ID__',
+        },
+      ),
       type: 'CookieJar',
       _type: EXPORT_TYPE_COOKIE_JAR,
       name: file.cookieJar.name || 'Imported Cookie Jar',
@@ -138,18 +173,22 @@ function getCookieJar(file: InsomniaFile): [CookieJar] | [] {
 
 function getApiSpec(file: InsomniaFile): [WithExportType<ApiSpec>] | [] {
   if ('spec' in file && file.spec) {
-    return [{
-      ...mapMetaToInsomniaMeta(file.spec.meta || {
-        id: '__API_SPEC_ID__',
-      }),
-      type: 'ApiSpec',
-      name: file.name || 'Api Spec',
-      _type: EXPORT_TYPE_API_SPEC,
-      fileName: 'file' in file.spec ? file.spec.file : '',
-      contentType: 'json',
-      contents: 'contents' in file.spec && file.spec.contents ? stringify(file.spec.contents) : '',
-      parentId: file.meta?.id || '__WORKSPACE_ID__',
-    }];
+    return [
+      {
+        ...mapMetaToInsomniaMeta(
+          file.spec.meta || {
+            id: '__API_SPEC_ID__',
+          },
+        ),
+        type: 'ApiSpec',
+        name: file.name || 'Api Spec',
+        _type: EXPORT_TYPE_API_SPEC,
+        fileName: 'file' in file.spec ? file.spec.file : '',
+        contentType: 'json',
+        contents: 'contents' in file.spec && file.spec.contents ? stringify(file.spec.contents) : '',
+        parentId: file.meta?.id || '__WORKSPACE_ID__',
+      },
+    ];
   }
 
   return [];
@@ -158,9 +197,11 @@ function getApiSpec(file: InsomniaFile): [WithExportType<ApiSpec>] | [] {
 function getMockServer(file: InsomniaFile): WithExportType<MockServer> {
   if (file.type === 'mock.insomnia.rest/5.0') {
     return {
-      ...mapMetaToInsomniaMeta(file.server?.meta || {
-        id: '__MOCK_SERVER_ID__',
-      }),
+      ...mapMetaToInsomniaMeta(
+        file.server?.meta || {
+          id: '__MOCK_SERVER_ID__',
+        },
+      ),
       type: 'MockServer',
       _type: EXPORT_TYPE_MOCK_SERVER,
       name: file.name || 'Imported Mock Server',
@@ -175,21 +216,25 @@ function getMockServer(file: InsomniaFile): WithExportType<MockServer> {
 
 function getMockRoutes(file: InsomniaFile): WithExportType<MockRoute>[] {
   if (file.type === 'mock.insomnia.rest/5.0') {
-    return file.routes?.map(mock => ({
-      ...mapMetaToInsomniaMeta(mock.meta || {
-        id: '__MOCK_ROUTE_ID__',
-      }),
-      type: 'MockRoute',
-      _type: EXPORT_TYPE_MOCK_ROUTE,
-      name: mock.name || 'Imported Mock Route',
-      parentId: file.server?.meta?.id || '__MOCK_SERVER_ID__',
-      body: mock.body || '',
-      headers: mock.headers || [],
-      method: mock.method || '',
-      mimeType: mock.mimeType || '',
-      statusCode: mock.statusCode,
-      statusText: mock.statusText || '',
-    })) || [];
+    return (
+      file.routes?.map(mock => ({
+        ...mapMetaToInsomniaMeta(
+          mock.meta || {
+            id: '__MOCK_ROUTE_ID__',
+          },
+        ),
+        type: 'MockRoute',
+        _type: EXPORT_TYPE_MOCK_ROUTE,
+        name: mock.name || 'Imported Mock Route',
+        parentId: file.server?.meta?.id || '__MOCK_SERVER_ID__',
+        body: mock.body || '',
+        headers: mock.headers || [],
+        method: mock.method || '',
+        mimeType: mock.mimeType || '',
+        statusCode: mock.statusCode,
+        statusText: mock.statusText || '',
+      })) || []
+    );
   }
 
   return [];
@@ -201,9 +246,11 @@ function getTestSuites(file: InsomniaFile): (UnitTestSuite | UnitTest)[] {
 
     file.testSuites?.forEach((testSuite, index) => {
       const suite: WithExportType<UnitTestSuite> = {
-        ...mapMetaToInsomniaMeta(testSuite.meta || {
-          id: '__UNIT_TEST_SUITE_ID__',
-        }),
+        ...mapMetaToInsomniaMeta(
+          testSuite.meta || {
+            id: '__UNIT_TEST_SUITE_ID__',
+          },
+        ),
         type: 'UnitTestSuite',
         _type: EXPORT_TYPE_UNIT_TEST_SUITE,
         name: testSuite.name || 'Imported Test Suite',
@@ -213,18 +260,21 @@ function getTestSuites(file: InsomniaFile): (UnitTestSuite | UnitTest)[] {
 
       resources.push(suite);
 
-      const tests: WithExportType<UnitTest>[] = testSuite.tests?.map((test, index) => ({
-        ...mapMetaToInsomniaMeta(test.meta || {
-          id: '__UNIT_TEST_ID__',
-        }),
-        type: 'UnitTest',
-        _type: EXPORT_TYPE_UNIT_TEST,
-        name: test.name || 'Imported Test',
-        parentId: suite._id,
-        requestId: test.requestId,
-        code: test.code,
-        metaSortKey: test.meta?.sortKey ?? index,
-      })) || [];
+      const tests: WithExportType<UnitTest>[] =
+        testSuite.tests?.map((test, index) => ({
+          ...mapMetaToInsomniaMeta(
+            test.meta || {
+              id: '__UNIT_TEST_ID__',
+            },
+          ),
+          type: 'UnitTest',
+          _type: EXPORT_TYPE_UNIT_TEST,
+          name: test.name || 'Imported Test',
+          parentId: suite._id,
+          requestId: test.requestId,
+          code: test.code,
+          metaSortKey: test.meta?.sortKey ?? index,
+        })) || [];
 
       resources.push(...tests);
     });
@@ -239,13 +289,18 @@ function getCollection(file: InsomniaFile): (Request | WebSocketRequest | GrpcRe
   if (file.type === 'collection.insomnia.rest/5.0' || file.type === 'spec.insomnia.rest/5.0') {
     const resources: (Request | WebSocketRequest | GrpcRequest | RequestGroup)[] = [];
 
-    function walkCollection(collection: Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['collection'], parentId: string) {
+    function walkCollection(
+      collection: Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['collection'],
+      parentId: string,
+    ) {
       collection?.forEach(item => {
         if ('children' in item && item.children) {
           const requestGroup: WithExportType<RequestGroup> = {
-            ...mapMetaToInsomniaMeta(item.meta || {
-              id: '__REQUEST_GROUP_ID__',
-            }),
+            ...mapMetaToInsomniaMeta(
+              item.meta || {
+                id: '__REQUEST_GROUP_ID__',
+              },
+            ),
             type: 'RequestGroup',
             _type: EXPORT_TYPE_REQUEST_GROUP,
             name: item.name || 'Imported Folder',
@@ -253,9 +308,9 @@ function getCollection(file: InsomniaFile): (Request | WebSocketRequest | GrpcRe
             preRequestScript: item.scripts?.preRequest || '',
             afterResponseScript: item.scripts?.afterResponse || '',
             authentication: item.authentication || {},
-            environment: item.environment as Record<string, any> || {},
+            environment: (item.environment as Record<string, any>) || {},
             // 🚧 WARNING 🚧 If we set the order to an empty object instead of undefined it will remove the environment from the folder due to filtering logic (related to json-order)
-            environmentPropertyOrder: item.environmentPropertyOrder as Record<string, any> || undefined,
+            environmentPropertyOrder: (item.environmentPropertyOrder as Record<string, any>) || undefined,
           };
 
           resources.push(requestGroup);
@@ -263,9 +318,11 @@ function getCollection(file: InsomniaFile): (Request | WebSocketRequest | GrpcRe
           walkCollection(item.children, requestGroup._id);
         } else if ('method' in item && item.method) {
           const request: WithExportType<Request> = {
-            ...mapMetaToInsomniaMeta(item.meta || {
-              id: '__REQUEST_ID__',
-            }),
+            ...mapMetaToInsomniaMeta(
+              item.meta || {
+                id: '__REQUEST_ID__',
+              },
+            ),
             type: 'Request',
             _type: EXPORT_TYPE_REQUEST,
             name: item.name || 'Imported Request',
@@ -291,9 +348,11 @@ function getCollection(file: InsomniaFile): (Request | WebSocketRequest | GrpcRe
           resources.push(request);
         } else if ('reflectionApi' in item) {
           const grpcRequest: WithExportType<GrpcRequest> = {
-            ...mapMetaToInsomniaMeta(item.meta || {
-              id: '__GRPC_REQUEST_ID__',
-            }),
+            ...mapMetaToInsomniaMeta(
+              item.meta || {
+                id: '__GRPC_REQUEST_ID__',
+              },
+            ),
             type: 'GrpcRequest',
             _type: EXPORT_TYPE_GRPC_REQUEST,
             name: item.name || 'Imported gRPC Request',
@@ -318,9 +377,11 @@ function getCollection(file: InsomniaFile): (Request | WebSocketRequest | GrpcRe
           if (wbRequest.success) {
             const data = wbRequest.data;
             const websocketRequest: WithExportType<WebSocketRequest> = {
-              ...mapMetaToInsomniaMeta(data.meta || {
-                id: '__WEBSOCKET_REQUEST_ID__',
-              }),
+              ...mapMetaToInsomniaMeta(
+                data.meta || {
+                  id: '__WEBSOCKET_REQUEST_ID__',
+                },
+              ),
               type: 'WebSocketRequest',
               _type: EXPORT_TYPE_WEBSOCKET_REQUEST,
               name: item.name || 'Imported WebSocket Request',
@@ -356,12 +417,7 @@ export function importInsomniaV5Data(rawData: string) {
     const file = insomniaFileSchema.parse(parse(rawData));
 
     if (file.type === 'collection.insomnia.rest/5.0') {
-      return [
-        getWorkspace(file),
-        ...getEnvironments(file),
-        ...getCookieJar(file),
-        ...getCollection(file),
-      ];
+      return [getWorkspace(file), ...getEnvironments(file), ...getCookieJar(file), ...getCollection(file)];
     }
 
     if (file.type === 'spec.insomnia.rest/5.0') {
@@ -376,17 +432,10 @@ export function importInsomniaV5Data(rawData: string) {
     }
 
     if (file.type === 'environment.insomnia.rest/5.0') {
-      return [
-        getWorkspace(file),
-        ...getEnvironments(file),
-      ];
+      return [getWorkspace(file), ...getEnvironments(file)];
     }
 
-    return [
-      getWorkspace(file),
-      getMockServer(file),
-      ...getMockRoutes(file),
-    ];
+    return [getWorkspace(file), getMockServer(file), ...getMockRoutes(file)];
   } catch (err) {
     console.error('Failed to import Insomnia v5 data', err);
     return [];
@@ -397,9 +446,12 @@ export async function getInsomniaV5DataExport({
   workspaceId,
   includePrivateEnvironments,
   requestIds,
-}: { workspaceId: string; includePrivateEnvironments: boolean; requestIds?: string[] }) {
+}: {
+  workspaceId: string;
+  includePrivateEnvironments: boolean;
+  requestIds?: string[];
+}) {
   try {
-
     const workspace = await models.workspace.getById(workspaceId);
 
     if (!workspace) {
@@ -418,131 +470,142 @@ export async function getInsomniaV5DataExport({
       return false;
     });
 
-    function getCollectionFromResources(resources: (Request | RequestGroup | WebSocketRequest | GrpcRequest)[], parentId: string): Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['collection'] {
+    function getCollectionFromResources(
+      resources: (Request | RequestGroup | WebSocketRequest | GrpcRequest)[],
+      parentId: string,
+    ): Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['collection'] {
       const collection: Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['collection'] = [];
 
-      resources.filter(resource => {
-        if (!requestIds || requestIds.length === 0 || models.requestGroup.isRequestGroup(resource)) {
-          return true;
-        }
+      resources
+        .filter(resource => {
+          if (!requestIds || requestIds.length === 0 || models.requestGroup.isRequestGroup(resource)) {
+            return true;
+          }
 
-        return requestIds.includes(resource._id);
-      }).filter(resource => resource.parentId === parentId).forEach(resource => {
-        if (models.request.isRequest(resource)) {
-          const request: Z_Request = {
-            url: resource.url,
-            name: resource.name,
-            meta: {
-              id: resource._id,
-              created: resource.created,
-              modified: resource.modified,
-              isPrivate: resource.isPrivate,
-              description: resource.description,
-              sortKey: resource.metaSortKey,
-            },
-            method: resource.method,
-            body: resource.body,
-            parameters: resource.parameters,
-            headers: resource.headers,
-            authentication: resource.authentication,
-            scripts: {
-              preRequest: resource.preRequestScript,
-              afterResponse: resource.afterResponseScript,
-            },
-            settings: {
-              renderRequestBody: !resource.settingDisableRenderRequestBody,
-              encodeUrl: resource.settingEncodeUrl,
-              followRedirects: resource.settingFollowRedirects,
-              cookies: {
-                send: resource.settingSendCookies,
-                store: resource.settingStoreCookies,
+          return requestIds.includes(resource._id);
+        })
+        .filter(resource => resource.parentId === parentId)
+        .forEach(resource => {
+          if (models.request.isRequest(resource)) {
+            const request: Z_Request = {
+              url: resource.url,
+              name: resource.name,
+              meta: {
+                id: resource._id,
+                created: resource.created,
+                modified: resource.modified,
+                isPrivate: resource.isPrivate,
+                description: resource.description,
+                sortKey: resource.metaSortKey,
               },
-              rebuildPath: resource.settingRebuildPath,
-            },
-            pathParameters: resource.pathParameters,
-          };
-          collection.push(request);
-        } else if (models.requestGroup.isRequestGroup(resource)) {
-          const requestGroup: Z_RequestGroup = {
-            name: resource.name,
-            meta: {
-              id: resource._id,
-              created: resource.created,
-              modified: resource.modified,
-              isPrivate: resource.isPrivate,
-              sortKey: resource.metaSortKey,
-              description: resource.description,
-            },
-            children: getCollectionFromResources(resources, resource._id),
-            scripts: {
-              afterResponse: resource.afterResponseScript,
-              preRequest: resource.preRequestScript,
-            },
-            authentication: resource.authentication,
-            environment: resource.environment,
-            environmentPropertyOrder: resource.environmentPropertyOrder,
-            headers: resource.headers,
-          };
-          collection.push(requestGroup);
-        } else if (models.webSocketRequest.isWebSocketRequest(resource)) {
-          const webSocketRequest: Z_WebsocketRequest = {
-            url: resource.url,
-            name: resource.name,
-            meta: {
-              id: resource._id,
-              created: resource.created,
-              modified: resource.modified,
-              isPrivate: resource.isPrivate,
-              description: resource.description,
-              sortKey: resource.metaSortKey,
-            },
-            settings: {
-              encodeUrl: resource.settingEncodeUrl,
-              followRedirects: resource.settingFollowRedirects,
-              cookies: {
-                send: resource.settingSendCookies,
-                store: resource.settingStoreCookies,
+              method: resource.method,
+              body: resource.body,
+              parameters: resource.parameters,
+              headers: resource.headers,
+              authentication: resource.authentication,
+              scripts: {
+                preRequest: resource.preRequestScript,
+                afterResponse: resource.afterResponseScript,
               },
-            },
-            authentication: resource.authentication,
-            headers: resource.headers,
-            parameters: resource.parameters,
-            pathParameters: resource.pathParameters,
-          };
-          collection.push(webSocketRequest);
-        } else if (models.grpcRequest.isGrpcRequest(resource)) {
-          const grpcRequest: Z_GRPCRequest = {
-            url: resource.url,
-            name: resource.name,
-            meta: {
-              id: resource._id,
-              created: resource.created,
-              modified: resource.modified,
-              isPrivate: resource.isPrivate,
-              sortKey: resource.metaSortKey,
-              description: resource.description,
-            },
-            body: resource.body,
-            metadata: resource.metadata,
-            protoFileId: resource.protoFileId,
-            protoMethodName: resource.protoMethodName,
-            reflectionApi: resource.reflectionApi,
-          };
+              settings: {
+                renderRequestBody: !resource.settingDisableRenderRequestBody,
+                encodeUrl: resource.settingEncodeUrl,
+                followRedirects: resource.settingFollowRedirects,
+                cookies: {
+                  send: resource.settingSendCookies,
+                  store: resource.settingStoreCookies,
+                },
+                rebuildPath: resource.settingRebuildPath,
+              },
+              pathParameters: resource.pathParameters,
+            };
+            collection.push(request);
+          } else if (models.requestGroup.isRequestGroup(resource)) {
+            const requestGroup: Z_RequestGroup = {
+              name: resource.name,
+              meta: {
+                id: resource._id,
+                created: resource.created,
+                modified: resource.modified,
+                isPrivate: resource.isPrivate,
+                sortKey: resource.metaSortKey,
+                description: resource.description,
+              },
+              children: getCollectionFromResources(resources, resource._id),
+              scripts: {
+                afterResponse: resource.afterResponseScript,
+                preRequest: resource.preRequestScript,
+              },
+              authentication: resource.authentication,
+              environment: resource.environment,
+              environmentPropertyOrder: resource.environmentPropertyOrder,
+              headers: resource.headers,
+            };
+            collection.push(requestGroup);
+          } else if (models.webSocketRequest.isWebSocketRequest(resource)) {
+            const webSocketRequest: Z_WebsocketRequest = {
+              url: resource.url,
+              name: resource.name,
+              meta: {
+                id: resource._id,
+                created: resource.created,
+                modified: resource.modified,
+                isPrivate: resource.isPrivate,
+                description: resource.description,
+                sortKey: resource.metaSortKey,
+              },
+              settings: {
+                encodeUrl: resource.settingEncodeUrl,
+                followRedirects: resource.settingFollowRedirects,
+                cookies: {
+                  send: resource.settingSendCookies,
+                  store: resource.settingStoreCookies,
+                },
+              },
+              authentication: resource.authentication,
+              headers: resource.headers,
+              parameters: resource.parameters,
+              pathParameters: resource.pathParameters,
+            };
+            collection.push(webSocketRequest);
+          } else if (models.grpcRequest.isGrpcRequest(resource)) {
+            const grpcRequest: Z_GRPCRequest = {
+              url: resource.url,
+              name: resource.name,
+              meta: {
+                id: resource._id,
+                created: resource.created,
+                modified: resource.modified,
+                isPrivate: resource.isPrivate,
+                sortKey: resource.metaSortKey,
+                description: resource.description,
+              },
+              body: resource.body,
+              metadata: resource.metadata,
+              protoFileId: resource.protoFileId,
+              protoMethodName: resource.protoMethodName,
+              reflectionApi: resource.reflectionApi,
+            };
 
-          collection.push(grpcRequest);
-        }
-      });
+            collection.push(grpcRequest);
+          }
+        });
 
       return collection;
     }
 
-    function getEnvironmentsFromResources(resources: Environment[], includePrivateEnvironments: boolean): Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['environments'] {
+    function getEnvironmentsFromResources(
+      resources: Environment[],
+      includePrivateEnvironments: boolean,
+    ): Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['environments'] {
       const baseEnvironment = resources.find(environment => environment.parentId.startsWith('wrk_'));
       if (!baseEnvironment) {
         throw new Error('Base environment not found');
       }
 
-      const subEnvironments = resources.filter(environment => environment.parentId === baseEnvironment?._id).filter(environment => includePrivateEnvironments || !environment.isPrivate);
+      const subEnvironments = resources
+        .filter(environment => environment.parentId === baseEnvironment?._id)
+        .filter(environment => includePrivateEnvironments || !environment.isPrivate);
 
       return {
         name: baseEnvironment.name,
@@ -569,7 +632,9 @@ export async function getInsomniaV5DataExport({
       };
     }
 
-    function getCookieJarFromResources(resources: CookieJar[]): Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['cookieJar'] {
+    function getCookieJarFromResources(
+      resources: CookieJar[],
+    ): Extract<InsomniaFile, { type: 'collection.insomnia.rest/5.0' }>['cookieJar'] {
       return resources.map(resource => ({
         name: resource.name,
         meta: {
@@ -585,7 +650,9 @@ export async function getInsomniaV5DataExport({
       }))[0];
     }
 
-    function getTestSuitesFromResources(resources: (UnitTestSuite | UnitTest)[]): Extract<InsomniaFile, { type: 'spec.insomnia.rest/5.0' }>['testSuites'] {
+    function getTestSuitesFromResources(
+      resources: (UnitTestSuite | UnitTest)[],
+    ): Extract<InsomniaFile, { type: 'spec.insomnia.rest/5.0' }>['testSuites'] {
       const testSuites: Extract<InsomniaFile, { type: 'spec.insomnia.rest/5.0' }>['testSuites'] = [];
 
       resources.filter(models.unitTestSuite.isUnitTestSuite).forEach(testSuite => {
@@ -618,7 +685,9 @@ export async function getInsomniaV5DataExport({
       return testSuites;
     }
 
-    function getSpecFromResources(resources: ApiSpec[]): Extract<InsomniaFile, { type: 'spec.insomnia.rest/5.0' }>['spec'] {
+    function getSpecFromResources(
+      resources: ApiSpec[],
+    ): Extract<InsomniaFile, { type: 'spec.insomnia.rest/5.0' }>['spec'] {
       const spec = resources[0];
       // const parser = spec.contentType === 'json' ? JSON.parse : parse;
       let contents = {};
@@ -646,7 +715,9 @@ export async function getInsomniaV5DataExport({
       };
     }
 
-    function getRoutesFromResources(resources: MockRoute[]): Extract<InsomniaFile, { type: 'mock.insomnia.rest/5.0' }>['routes'] {
+    function getRoutesFromResources(
+      resources: MockRoute[],
+    ): Extract<InsomniaFile, { type: 'mock.insomnia.rest/5.0' }>['routes'] {
       return resources.map(resource => ({
         name: resource.name,
         meta: {
@@ -675,9 +746,21 @@ export async function getInsomniaV5DataExport({
           isPrivate: workspace.isPrivate,
           description: workspace.description,
         },
-        collection: getCollectionFromResources(exportableResources.filter(resource => models.requestGroup.isRequestGroup(resource) || models.request.isRequest(resource) || models.webSocketRequest.isWebSocketRequest(resource) || models.grpcRequest.isGrpcRequest(resource)), workspace._id),
+        collection: getCollectionFromResources(
+          exportableResources.filter(
+            resource =>
+              models.requestGroup.isRequestGroup(resource) ||
+              models.request.isRequest(resource) ||
+              models.webSocketRequest.isWebSocketRequest(resource) ||
+              models.grpcRequest.isGrpcRequest(resource),
+          ),
+          workspace._id,
+        ),
         cookieJar: getCookieJarFromResources(exportableResources.filter(models.cookieJar.isCookieJar)),
-        environments: getEnvironmentsFromResources(exportableResources.filter(models.environment.isEnvironment), includePrivateEnvironments),
+        environments: getEnvironmentsFromResources(
+          exportableResources.filter(models.environment.isEnvironment),
+          includePrivateEnvironments,
+        ),
       };
 
       return stringify(removeEmptyFields(collection));
@@ -692,11 +775,27 @@ export async function getInsomniaV5DataExport({
           isPrivate: workspace.isPrivate,
           description: workspace.description,
         },
-        collection: getCollectionFromResources(exportableResources.filter(resource => models.requestGroup.isRequestGroup(resource) || models.request.isRequest(resource) || models.webSocketRequest.isWebSocketRequest(resource) || models.grpcRequest.isGrpcRequest(resource)), workspace._id),
+        collection: getCollectionFromResources(
+          exportableResources.filter(
+            resource =>
+              models.requestGroup.isRequestGroup(resource) ||
+              models.request.isRequest(resource) ||
+              models.webSocketRequest.isWebSocketRequest(resource) ||
+              models.grpcRequest.isGrpcRequest(resource),
+          ),
+          workspace._id,
+        ),
         cookieJar: getCookieJarFromResources(exportableResources.filter(models.cookieJar.isCookieJar)),
-        environments: getEnvironmentsFromResources(exportableResources.filter(models.environment.isEnvironment), includePrivateEnvironments),
+        environments: getEnvironmentsFromResources(
+          exportableResources.filter(models.environment.isEnvironment),
+          includePrivateEnvironments,
+        ),
         spec: getSpecFromResources(exportableResources.filter(models.apiSpec.isApiSpec)),
-        testSuites: getTestSuitesFromResources(exportableResources.filter(resource => models.unitTestSuite.isUnitTestSuite(resource) || models.unitTest.isUnitTest(resource))),
+        testSuites: getTestSuitesFromResources(
+          exportableResources.filter(
+            resource => models.unitTestSuite.isUnitTestSuite(resource) || models.unitTest.isUnitTest(resource),
+          ),
+        ),
       };
 
       return stringify(removeEmptyFields(spec));
@@ -711,7 +810,10 @@ export async function getInsomniaV5DataExport({
           isPrivate: workspace.isPrivate,
           description: workspace.description,
         },
-        environments: getEnvironmentsFromResources(exportableResources.filter(models.environment.isEnvironment), includePrivateEnvironments),
+        environments: getEnvironmentsFromResources(
+          exportableResources.filter(models.environment.isEnvironment),
+          includePrivateEnvironments,
+        ),
       };
 
       return stringify(removeEmptyFields(environment));
@@ -744,7 +846,6 @@ export async function getInsomniaV5DataExport({
       return stringify(removeEmptyFields(mockServer), {});
     }
     throw new Error('Unknown workspace scope');
-
   } catch (err) {
     console.error('Failed to export Insomnia v5 data', err);
     return '';
diff --git a/packages/insomnia/src/common/misc.ts b/packages/insomnia/src/common/misc.ts
index 35fdea4ac4..c8935192aa 100644
--- a/packages/insomnia/src/common/misc.ts
+++ b/packages/insomnia/src/common/misc.ts
@@ -87,7 +87,6 @@ export function generateId(prefix?: string) {
     return `${prefix}_${id}`;
   }
   return id;
-
 }
 
 export function delay(milliseconds: number = DEBOUNCE_MILLIS) {
@@ -98,15 +97,15 @@ export const debounce = <F extends (...args: Parameters<F>) => ReturnType<F>>(
   func: F,
   waitFor: number = DEBOUNCE_MILLIS,
 ) => {
-  let timeout: NodeJS.Timeout
+  let timeout: NodeJS.Timeout;
 
   const debounced = (...args: Parameters<F>) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => func(...args), waitFor)
-  }
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), waitFor);
+  };
 
-  return debounced
-}
+  return debounced;
+};
 
 export function describeByteSize(bytes: number, long = false) {
   bytes = Math.round(bytes * 10) / 10;
@@ -138,7 +137,6 @@ export function fnOrString(v: string | ((...args: any[]) => any), ...args: any[]
     return v;
   }
   return v(...args);
-
 }
 
 export function compressObject(obj: any) {
@@ -180,11 +178,7 @@ export function fuzzyMatch(
   return fuzzyMatchAll(searchString, [text], options);
 }
 
-export function fuzzyMatchAll(
-  searchString: string,
-  allText: string[],
-  options: FuzzyMatchOptions = {},
-) {
+export function fuzzyMatchAll(searchString: string, allText: string[], options: FuzzyMatchOptions = {}) {
   if (!searchString || !searchString.trim()) {
     return null;
   }
@@ -239,9 +233,7 @@ export function fuzzyMatchAll(
   };
 }
 
-export function isNotNullOrUndefined<ValueType>(
-  value: ValueType | null | undefined
-): value is ValueType {
+export function isNotNullOrUndefined<ValueType>(value: ValueType | null | undefined): value is ValueType {
   if (value === null || value === undefined) {
     return false;
   }
diff --git a/packages/insomnia/src/common/render.ts b/packages/insomnia/src/common/render.ts
index 7203568a24..e8c1597d69 100644
--- a/packages/insomnia/src/common/render.ts
+++ b/packages/insomnia/src/common/render.ts
@@ -2,7 +2,12 @@ import clone from 'clone';
 import orderedJSON from 'json-order';
 
 import * as models from '../models';
-import { type Environment, type UserUploadEnvironment, vaultEnvironmentPath, vaultEnvironmentRuntimePath } from '../models/environment';
+import {
+  type Environment,
+  type UserUploadEnvironment,
+  vaultEnvironmentPath,
+  vaultEnvironmentRuntimePath,
+} from '../models/environment';
 import type { GrpcRequest, GrpcRequestBody } from '../models/grpc-request';
 import { isProject } from '../models/project';
 import { PATH_PARAMETER_REGEX, type Request } from '../models/request';
@@ -25,27 +30,25 @@ import { setDefaultProtocol } from '../utils/url/protocol';
 import { CONTENT_TYPE_GRAPHQL, JSON_ORDER_SEPARATOR } from './constants';
 import { database as db } from './database';
 
-export async function buildRenderContext(
-  {
-    ancestors,
-    rootEnvironment,
-    subEnvironment,
-    rootGlobalEnvironment,
-    subGlobalEnvironment,
-    userUploadEnvironment,
-    transientVariables,
-    baseContext,
-  }: {
-    ancestors?: RenderContextAncestor[];
-    rootEnvironment?: Environment;
-    subEnvironment?: Environment;
-    rootGlobalEnvironment?: Environment | null;
-    subGlobalEnvironment?: Environment | null;
-    userUploadEnvironment?: UserUploadEnvironment;
-    transientVariables?: Environment;
-    baseContext: BaseRenderContext;
-  },
-): Promise<BaseRenderContext> {
+export async function buildRenderContext({
+  ancestors,
+  rootEnvironment,
+  subEnvironment,
+  rootGlobalEnvironment,
+  subGlobalEnvironment,
+  userUploadEnvironment,
+  transientVariables,
+  baseContext,
+}: {
+  ancestors?: RenderContextAncestor[];
+  rootEnvironment?: Environment;
+  subEnvironment?: Environment;
+  rootGlobalEnvironment?: Environment | null;
+  subGlobalEnvironment?: Environment | null;
+  userUploadEnvironment?: UserUploadEnvironment;
+  transientVariables?: Environment;
+  baseContext: BaseRenderContext;
+}): Promise<BaseRenderContext> {
   const envObjects: Record<string, any>[] = [];
 
   if (rootGlobalEnvironment) {
@@ -70,20 +73,12 @@ export async function buildRenderContext(
   // Then get sub environment keys in correct order
   // Then get ancestor (folder) environment keys in correct order
   if (rootEnvironment) {
-    const ordered = orderedJSON.order(
-      rootEnvironment.data,
-      rootEnvironment.dataPropertyOrder,
-      JSON_ORDER_SEPARATOR,
-    );
+    const ordered = orderedJSON.order(rootEnvironment.data, rootEnvironment.dataPropertyOrder, JSON_ORDER_SEPARATOR);
     envObjects.push(ordered);
   }
 
   if (subEnvironment) {
-    const ordered = orderedJSON.order(
-      subEnvironment.data,
-      subEnvironment.dataPropertyOrder,
-      JSON_ORDER_SEPARATOR,
-    );
+    const ordered = orderedJSON.order(subEnvironment.data, subEnvironment.dataPropertyOrder, JSON_ORDER_SEPARATOR);
     envObjects.push(ordered);
   }
 
@@ -92,11 +87,7 @@ export async function buildRenderContext(
     const { environment, environmentPropertyOrder } = ancestor;
 
     if (typeof environment === 'object' && environment !== null) {
-      const ordered = orderedJSON.order(
-        environment,
-        environmentPropertyOrder,
-        JSON_ORDER_SEPARATOR,
-      );
+      const ordered = orderedJSON.order(environment, environmentPropertyOrder, JSON_ORDER_SEPARATOR);
       envObjects.push(ordered);
     }
   }
@@ -129,10 +120,7 @@ export async function buildRenderContext(
   const renderContext = baseContext;
 
   // Made the rendering into a recursive function to handle nested Objects
-  async function renderSubContext(
-    subObject: Record<string, any>,
-    subContext: BaseRenderContext,
-  ) {
+  async function renderSubContext(subObject: Record<string, any>, subContext: BaseRenderContext) {
     const keys = _getOrderedEnvironmentKeys(subObject);
 
     for (const key of keys) {
@@ -182,11 +170,17 @@ export async function buildRenderContext(
     finalRenderContext = await renderSubContext(envObject, finalRenderContext);
   }
 
-  finalRenderContext[vaultEnvironmentPath] = await maskOrDecryptVaultDataIfNecessary(finalRenderContext[vaultEnvironmentPath], renderContext?.getPurpose());
+  finalRenderContext[vaultEnvironmentPath] = await maskOrDecryptVaultDataIfNecessary(
+    finalRenderContext[vaultEnvironmentPath],
+    renderContext?.getPurpose(),
+  );
   // Merge all vault environments under vaultEnvironmentPath to vaultEnvironmentRuntimePath which is more human readable.
   // This will also keep all legacy environment variables defined under the vaultEnvironmentRuntimePath.
   if (finalRenderContext[vaultEnvironmentPath]) {
-    if (finalRenderContext[vaultEnvironmentRuntimePath] && typeof finalRenderContext[vaultEnvironmentRuntimePath] !== 'object') {
+    if (
+      finalRenderContext[vaultEnvironmentRuntimePath] &&
+      typeof finalRenderContext[vaultEnvironmentRuntimePath] !== 'object'
+    ) {
       const errorMsg = `${vaultEnvironmentRuntimePath} is a reserved key for insomnia vault, please rename your environment with vault as key.`;
       const newError = new RenderError(errorMsg);
       newError.type = 'render';
@@ -215,13 +209,7 @@ export async function buildRenderContext(
         continue;
       }
 
-      const renderResult = await render(
-        finalRenderContext[key],
-        finalRenderContext,
-        null,
-        'keep',
-        'Environment',
-      );
+      const renderResult = await render(finalRenderContext[key], finalRenderContext, null, 'keep', 'Environment');
 
       // Result didn't change, so skip
       if (renderResult === finalRenderContext[key]) {
@@ -235,7 +223,12 @@ export async function buildRenderContext(
 
   return finalRenderContext;
 }
-const renderInThisProcess = async (input: { input: string; context: BaseRenderContext; path: string; ignoreUndefinedEnvVariable: boolean }) => {
+const renderInThisProcess = async (input: {
+  input: string;
+  context: BaseRenderContext;
+  path: string;
+  ignoreUndefinedEnvVariable: boolean;
+}) => {
   return templating.render(input.input, {
     context: input.context,
     path: input.path,
@@ -303,7 +296,8 @@ export async function render<T>(
 
         const settings = await models.settings.get();
         const pluginsAreRestrictedToRunInWorker = settings?.pluginsAllowElevatedAccess === false;
-        const currentProcessIsRendererAndPluginsAreRestricted = process.type === 'renderer' && pluginsAreRestrictedToRunInWorker;
+        const currentProcessIsRendererAndPluginsAreRestricted =
+          process.type === 'renderer' && pluginsAreRestrictedToRunInWorker;
         const renderFork = currentProcessIsRendererAndPluginsAreRestricted
           ? (await import('../ui/worker/templating-handler')).renderInWorker
           : renderInThisProcess;
@@ -360,7 +354,9 @@ export async function render<T>(
 
   const renderResult = await next<T>(newObj, name, true);
   if (undefinedEnvironmentVariables.length > 0) {
-    const error = new RenderError(`Failed to render environment variables: ${undefinedEnvironmentVariables.join(', ')}`);
+    const error = new RenderError(
+      `Failed to render environment variables: ${undefinedEnvironmentVariables.join(', ')}`,
+    );
     error.type = 'render';
     error.extraInfo = {
       subType: 'environmentVariable',
@@ -372,19 +368,17 @@ export async function render<T>(
   return renderResult;
 }
 
-export async function getRenderContext(
-  {
-    request,
-    environment,
-    baseEnvironment,
-    userUploadEnvironment,
-    transientVariables,
-    ancestors: _ancestors,
-    purpose,
-    extraInfo,
-  }: RenderContextOptions,
-): Promise<BaseRenderContext> {
-  const ancestors = _ancestors || await getRenderContextAncestors(request);
+export async function getRenderContext({
+  request,
+  environment,
+  baseEnvironment,
+  userUploadEnvironment,
+  transientVariables,
+  ancestors: _ancestors,
+  purpose,
+  extraInfo,
+}: RenderContextOptions): Promise<BaseRenderContext> {
+  const ancestors = _ancestors || (await getRenderContextAncestors(request));
 
   const project = ancestors.find(isProject);
   const workspace = ancestors.find(isWorkspace);
@@ -415,15 +409,14 @@ export async function getRenderContext(
     }
   }
 
-  const rootEnvironment = baseEnvironment || await models.environment.getOrCreateForParentId(
-    workspace ? workspace._id : 'n/a',
-  );
-  const subEnvironmentId = environment ?
-    typeof environment === 'string' ? environment : environment._id :
-    'n/a';
-  const subEnvironment = environment ?
-    typeof environment === 'string' ? await models.environment.getById(environment) : environment :
-    await models.environment.getById('n/a');
+  const rootEnvironment =
+    baseEnvironment || (await models.environment.getOrCreateForParentId(workspace ? workspace._id : 'n/a'));
+  const subEnvironmentId = environment ? (typeof environment === 'string' ? environment : environment._id) : 'n/a';
+  const subEnvironment = environment
+    ? typeof environment === 'string'
+      ? await models.environment.getById(environment)
+      : environment
+    : await models.environment.getById('n/a');
 
   const keySource: Record<string, string> = {};
   // Function that gets Keys and stores their Source location
@@ -515,15 +508,13 @@ export async function getRenderContext(
   });
 }
 
-export async function getRenderedGrpcRequest(
-  {
-    purpose,
-    extraInfo,
-    request,
-    environment,
-    skipBody,
-  }: BaseRenderContextOptions & { request: GrpcRequest; skipBody?: boolean },
-) {
+export async function getRenderedGrpcRequest({
+  purpose,
+  extraInfo,
+  request,
+  environment,
+  skipBody,
+}: BaseRenderContextOptions & { request: GrpcRequest; skipBody?: boolean }) {
   const renderContext = await getRenderContext({ request, environment, purpose, extraInfo });
   const description = request.description;
   // Render description separately because it's lower priority
@@ -531,41 +522,33 @@ export async function getRenderedGrpcRequest(
   // Ignore body by default and only include if specified to
   const ignorePathRegex = skipBody ? /^body.*/ : null;
   // Render all request properties
-  const renderedRequest: GrpcRequest = await render(
-    request,
-    renderContext,
-    ignorePathRegex,
-  );
+  const renderedRequest: GrpcRequest = await render(request, renderContext, ignorePathRegex);
   renderedRequest.description = await render(description, renderContext, null, 'keep');
   return renderedRequest;
 }
 
-export async function getRenderedGrpcRequestMessage(
-  {
-    environment,
-    request,
-    extraInfo,
-    purpose,
-  }: BaseRenderContextOptions & { request: GrpcRequest },
-) {
+export async function getRenderedGrpcRequestMessage({
+  environment,
+  request,
+  extraInfo,
+  purpose,
+}: BaseRenderContextOptions & { request: GrpcRequest }) {
   const renderContext = await getRenderContext({ request, environment, purpose, extraInfo });
   // Render request body
   const renderedBody: GrpcRequestBody = await render(request.body, renderContext);
   return renderedBody;
 }
 
-export async function getRenderedRequestAndContext(
-  {
-    request,
-    environment,
-    baseEnvironment,
-    userUploadEnvironment,
-    transientVariables,
-    extraInfo,
-    purpose,
-    ignoreUndefinedEnvVariable,
-  }: BaseRenderContextOptions & { request: Request },
-): Promise<{
+export async function getRenderedRequestAndContext({
+  request,
+  environment,
+  baseEnvironment,
+  userUploadEnvironment,
+  transientVariables,
+  extraInfo,
+  purpose,
+  ignoreUndefinedEnvVariable,
+}: BaseRenderContextOptions & { request: Request }): Promise<{
   request: RenderedRequest;
   context: Record<string, any>;
 }> {
@@ -575,7 +558,16 @@ export async function getRenderedRequestAndContext(
 
   const parentId = workspace ? workspace._id : 'n/a';
   const cookieJar = await models.cookieJar.getOrCreateForParentId(parentId);
-  const renderContext = await getRenderContext({ request, environment, ancestors, purpose, extraInfo, baseEnvironment, userUploadEnvironment, transientVariables });
+  const renderContext = await getRenderContext({
+    request,
+    environment,
+    ancestors,
+    purpose,
+    extraInfo,
+    baseEnvironment,
+    userUploadEnvironment,
+    transientVariables,
+  });
 
   // HACK: Switch '#}' to '# }' to prevent Nunjucks from barfing
   // https://github.com/kong/insomnia/issues/895
@@ -585,7 +577,7 @@ export async function getRenderedRequestAndContext(
       o.query = o.query.replace(/#}/g, '# }');
       request.body.text = JSON.stringify(o);
     }
-  } catch (err) { }
+  } catch (err) {}
 
   // Render description separately because it's lower priority
   const description = request.description;
@@ -624,7 +616,11 @@ export async function getRenderedRequestAndContext(
   }
 
   // Remove disabled authentication
-  if (renderedRequest.authentication && 'disabled' in renderedRequest.authentication && renderedRequest.authentication.disabled) {
+  if (
+    renderedRequest.authentication &&
+    'disabled' in renderedRequest.authentication &&
+    renderedRequest.authentication.disabled
+  ) {
     renderedRequest.authentication = {};
   }
 
@@ -704,7 +700,9 @@ function _getOrderedEnvironmentKeys(finalRenderContext: Record<string, any>): st
   });
 }
 
-export async function getRenderContextAncestors(base?: Request | GrpcRequest | WebSocketRequest | Workspace): Promise<RenderContextAncestor[]> {
+export async function getRenderContextAncestors(
+  base?: Request | GrpcRequest | WebSocketRequest | Workspace,
+): Promise<RenderContextAncestor[]> {
   return await db.withAncestors<RenderContextAncestor>(base || null, [
     models.request.type,
     models.grpcRequest.type,
diff --git a/packages/insomnia/src/common/select-file-or-folder.ts b/packages/insomnia/src/common/select-file-or-folder.ts
index 86a225f056..46fb580967 100644
--- a/packages/insomnia/src/common/select-file-or-folder.ts
+++ b/packages/insomnia/src/common/select-file-or-folder.ts
@@ -40,10 +40,12 @@ export const selectFileOrFolder = async ({ itemTypes, extensions }: Options) =>
           throw new Error(`unrecognized item type: "${type}"`);
       }
     }),
-    filters: [{
-      extensions: (extensions?.length ? extensions : ['*']),
-      name: '',
-    }],
+    filters: [
+      {
+        extensions: extensions?.length ? extensions : ['*'],
+        name: '',
+      },
+    ],
   });
 
   const fileSelection: FileSelection = {
diff --git a/packages/insomnia/src/common/send-request.ts b/packages/insomnia/src/common/send-request.ts
index c885bc6db7..8f201f534d 100644
--- a/packages/insomnia/src/common/send-request.ts
+++ b/packages/insomnia/src/common/send-request.ts
@@ -24,7 +24,10 @@ import { generateId } from './misc';
 // The network layer uses settings from the settings model
 // We want to give consumers the ability to override certain settings
 type SettingsOverride = Pick<Settings, 'validateSSL'>;
-const wrapAroundIterationOverIterationData = (list?: UserUploadEnvironment[], currentIteration?: number): UserUploadEnvironment | undefined => {
+const wrapAroundIterationOverIterationData = (
+  list?: UserUploadEnvironment[],
+  currentIteration?: number,
+): UserUploadEnvironment | undefined => {
   if (currentIteration === undefined || !Array.isArray(list) || list.length === 0) {
     return undefined;
   }
@@ -34,7 +37,14 @@ const wrapAroundIterationOverIterationData = (list?: UserUploadEnvironment[], cu
   return list[(currentIteration + 1) % list.length];
 };
 
-export async function getSendRequestCallbackMemDb(environmentId: string, memDB: any, transientVariables: Environment, settingsOverrides?: SettingsOverride, iterationData?: UserUploadEnvironment[], iterationCount?: number) {
+export async function getSendRequestCallbackMemDb(
+  environmentId: string,
+  memDB: any,
+  transientVariables: Environment,
+  settingsOverrides?: SettingsOverride,
+  iterationData?: UserUploadEnvironment[],
+  iterationCount?: number,
+) {
   // Initialize the DB in-memory and fill it with data if we're given one
   await database.init(
     modelTypes(),
@@ -42,7 +52,7 @@ export async function getSendRequestCallbackMemDb(environmentId: string, memDB:
       inMemoryOnly: true,
     },
     true,
-    () => { },
+    () => {},
   );
   const docs: BaseModel[] = [];
 
@@ -89,11 +99,16 @@ export async function getSendRequestCallbackMemDb(environmentId: string, memDB:
     const workspaceMeta = await models.workspaceMeta.getByParentId(workspaceId);
     let activeGlobalEnvironment: Environment | undefined = undefined;
     if (workspaceMeta?.activeGlobalEnvironmentId) {
-      activeGlobalEnvironment = await models.environment.getById(workspaceMeta.activeGlobalEnvironmentId) || undefined;
+      activeGlobalEnvironment =
+        (await models.environment.getById(workspaceMeta.activeGlobalEnvironmentId)) || undefined;
     }
 
     const responseId = generateId('res');
-    const responsesDir = path.join(process.env['INSOMNIA_DATA_PATH'] || (process.type === 'renderer' ? window : require('electron')).app.getPath('userData'), 'responses');
+    const responsesDir = path.join(
+      process.env['INSOMNIA_DATA_PATH'] ||
+        (process.type === 'renderer' ? window : require('electron')).app.getPath('userData'),
+      'responses',
+    );
     const timelinePath = path.join(responsesDir, responseId + '.timeline');
 
     return {
@@ -119,7 +134,13 @@ export async function getSendRequestCallbackMemDb(environmentId: string, memDB:
     const getCurrentRowOfIterationData = wrapAroundIterationOverIterationData(iterationData, iteration);
     await fs.mkdir(path.dirname(requestData.timelinePath), { recursive: true });
 
-    const mutatedContext = await tryToExecutePreRequestScript(requestData, transientVariables, getCurrentRowOfIterationData, iteration, iterationCount);
+    const mutatedContext = await tryToExecutePreRequestScript(
+      requestData,
+      transientVariables,
+      getCurrentRowOfIterationData,
+      iteration,
+      iterationCount,
+    );
     if (mutatedContext === null) {
       console.error('Time out while executing pre-request script');
       return null;
@@ -144,7 +165,7 @@ export async function getSendRequestCallbackMemDb(environmentId: string, memDB:
       requestData.caCert,
       mutatedContext.settings,
       requestData.timelinePath,
-      requestData.responseId
+      requestData.responseId,
     );
     const res = await responseTransform(response, environmentId, renderedRequest, renderedResult.context);
     const postMutatedContext = await tryToExecuteAfterResponseScript({
@@ -156,19 +177,33 @@ export async function getSendRequestCallbackMemDb(environmentId: string, memDB:
     });
     // TODO: figure out how to handle this error
     if ('error' in postMutatedContext) {
-      console.error('[network] An error occurred while running after-response script for request named:', renderedRequest.name);
+      console.error(
+        '[network] An error occurred while running after-response script for request named:',
+        renderedRequest.name,
+      );
       throw {
         error: postMutatedContext.error,
-        response: await responseTransform(response, requestData.activeEnvironmentId, renderedRequest, renderedResult.context),
+        response: await responseTransform(
+          response,
+          requestData.activeEnvironmentId,
+          renderedRequest,
+          renderedResult.context,
+        ),
       };
     }
     const { statusCode: status, statusMessage, headers: headerArray, elapsedTime: responseTime } = res;
 
-    const headers = headerArray?.reduce((acc, { name, value }) => ({ ...acc, [name.toLowerCase() || '']: value || '' }), []);
-    const bodyBuffer = await getBodyBuffer(res) as Buffer;
+    const headers = headerArray?.reduce(
+      (acc, { name, value }) => ({ ...acc, [name.toLowerCase() || '']: value || '' }),
+      [],
+    );
+    const bodyBuffer = (await getBodyBuffer(res)) as Buffer;
     const data = bodyBuffer ? bodyBuffer.toString('utf8') : undefined;
 
-    const testResults = [...(mutatedContext.requestTestResults || []), ...(postMutatedContext.requestTestResults || [])];
+    const testResults = [
+      ...(mutatedContext.requestTestResults || []),
+      ...(postMutatedContext.requestTestResults || []),
+    ];
     return {
       status,
       statusMessage,
diff --git a/packages/insomnia/src/common/settings.ts b/packages/insomnia/src/common/settings.ts
index ad1c9c0bc6..9788b6ecb6 100644
--- a/packages/insomnia/src/common/settings.ts
+++ b/packages/insomnia/src/common/settings.ts
@@ -82,9 +82,11 @@ export enum UpdateChannel {
 }
 
 /** Gets a subset of Settings where the values match a condition */
-export type SettingsOfType<MatchType> = NonNullable<{
-  [Key in keyof Settings]: Settings[Key] extends MatchType ? Key : never;
-}[keyof Settings]>;
+export type SettingsOfType<MatchType> = NonNullable<
+  {
+    [Key in keyof Settings]: Settings[Key] extends MatchType ? Key : never;
+  }[keyof Settings]
+>;
 
 export interface PluginConfig {
   disabled: boolean;
diff --git a/packages/insomnia/src/common/strings.ts b/packages/insomnia/src/common/strings.ts
index 5f45edb215..f8516085a8 100644
--- a/packages/insomnia/src/common/strings.ts
+++ b/packages/insomnia/src/common/strings.ts
@@ -12,8 +12,7 @@ type StringId =
   | 'defaultProject'
   | 'localProject'
   | 'remoteProject'
-  | 'environment'
-  ;
+  | 'environment';
 
 export const strings: Record<StringId, StringInfo> = {
   collection: {
diff --git a/packages/insomnia/src/hidden-window-preload.ts b/packages/insomnia/src/hidden-window-preload.ts
index db7649ec04..1f767bf7cb 100644
--- a/packages/insomnia/src/hidden-window-preload.ts
+++ b/packages/insomnia/src/hidden-window-preload.ts
@@ -2,7 +2,14 @@ import * as fs from 'node:fs';
 
 import { contextBridge, ipcRenderer, type IpcRendererEvent } from 'electron';
 
-import { asyncTasksAllSettled, OriginalPromise, ProxiedPromise, type RequestContext, resetAsyncTasks, stopMonitorAsyncTasks } from '../../insomnia-scripting-environment/src/objects';
+import {
+  asyncTasksAllSettled,
+  OriginalPromise,
+  ProxiedPromise,
+  type RequestContext,
+  resetAsyncTasks,
+  stopMonitorAsyncTasks,
+} from '../../insomnia-scripting-environment/src/objects';
 import type { Compression } from './models/response';
 // this will also import lots of node_modules into the preload script, consider moving this file insomnia-scripting-environment
 import { requireInterceptor } from './requireInterceptor';
@@ -11,7 +18,10 @@ export interface HiddenBrowserWindowToMainBridgeAPI {
   requireInterceptor: (module: string) => any;
   onmessage: (listener: (data: any, callback: (result: any) => void) => void) => void;
   curlRequest: (options: any) => Promise<any>;
-  readCurlResponse: (options: { bodyPath: string; bodyCompression: Compression }) => Promise<{ body: string; error: string }>;
+  readCurlResponse: (options: {
+    bodyPath: string;
+    bodyCompression: Compression;
+  }) => Promise<{ body: string; error: string }>;
   setBusy: (busy: boolean) => void;
   appendFile: (logPath: string, logContent: string) => Promise<void>;
   asyncTasksAllSettled: () => Promise<void>;
diff --git a/packages/insomnia/src/hidden-window.html b/packages/insomnia/src/hidden-window.html
index 5634422d1a..f1c1172215 100644
--- a/packages/insomnia/src/hidden-window.html
+++ b/packages/insomnia/src/hidden-window.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-US">
   <head>
     <meta charset="utf-8" />
diff --git a/packages/insomnia/src/hidden-window.ts b/packages/insomnia/src/hidden-window.ts
index 24037bac8e..4b6a631167 100644
--- a/packages/insomnia/src/hidden-window.ts
+++ b/packages/insomnia/src/hidden-window.ts
@@ -2,8 +2,19 @@ import * as Sentry from '@sentry/electron/renderer';
 import { SENTRY_OPTIONS } from 'insomnia/src/common/sentry';
 import * as _ from 'lodash';
 
-import { initInsomniaObject, InsomniaObject, waitForAllTestsDone } from '../../insomnia-scripting-environment/src/objects';
-import { getNewConsole, mergeClientCertificates, mergeCookieJar, mergeRequests, mergeSettings, type RequestContext } from '../../insomnia-scripting-environment/src/objects';
+import {
+  initInsomniaObject,
+  InsomniaObject,
+  waitForAllTestsDone,
+} from '../../insomnia-scripting-environment/src/objects';
+import {
+  getNewConsole,
+  mergeClientCertificates,
+  mergeCookieJar,
+  mergeRequests,
+  mergeSettings,
+  type RequestContext,
+} from '../../insomnia-scripting-environment/src/objects';
 
 export interface HiddenBrowserWindowBridgeAPI {
   runScript: (options: { script: string; context: RequestContext }) => Promise<RequestContext>;
@@ -40,14 +51,12 @@ window.bridge.onmessage(async (data, callback) => {
 
 // This function is duplicated in scriptExecutor.ts to run in nodejs
 // TODO: consider removing this implementation and using only nodejs scripting
-const runScript = async (
-  { script, context }: { script: string; context: RequestContext },
-): Promise<RequestContext> => {
+const runScript = async ({ script, context }: { script: string; context: RequestContext }): Promise<RequestContext> => {
   const scriptConsole = getNewConsole();
 
   const executionContext = await initInsomniaObject(context, scriptConsole.log);
 
-  const AsyncFunction = (async () => { }).constructor;
+  const AsyncFunction = (async () => {}).constructor;
   const executeScript = AsyncFunction(
     'insomnia',
     'require',
@@ -66,7 +75,7 @@ const runScript = async (
       await waitForAllTestsDone();
       window.bridge.stopMonitorAsyncTasks();  // the next one should not be monitored
       await window.bridge.asyncTasksAllSettled();
-      return insomnia;`
+      return insomnia;`,
   );
 
   const mutatedInsomniaObject = await executeScript(
@@ -86,7 +95,10 @@ const runScript = async (
   const mutatedContextObject = mutatedInsomniaObject.toObject();
   const updatedRequest = mergeRequests(context.request, mutatedContextObject.request);
   const updatedSettings = mergeSettings(context.settings, mutatedContextObject.request);
-  const updatedCertificates = mergeClientCertificates(mutatedContextObject.clientCertificates, mutatedContextObject.request);
+  const updatedCertificates = mergeClientCertificates(
+    mutatedContextObject.clientCertificates,
+    mutatedContextObject.request,
+  );
   const updatedCookieJar = mergeCookieJar(context.cookieJar, mutatedContextObject.cookieJar);
 
   return {
@@ -101,10 +113,12 @@ const runScript = async (
       name: context.baseEnvironment.name,
       data: mutatedContextObject.baseEnvironment,
     },
-    iterationData: context.iterationData ? {
-      name: context.iterationData.name,
-      data: mutatedContextObject.iterationData,
-    } : undefined,
+    iterationData: context.iterationData
+      ? {
+          name: context.iterationData.name,
+          data: mutatedContextObject.iterationData,
+        }
+      : undefined,
     transientVariables: {
       name: context.transientVariables?.name || 'transientVariables',
       data: mutatedContextObject.variables,
@@ -122,21 +136,15 @@ const runScript = async (
 };
 
 // proxiedSetTimeout has to be here as callback could be an async task
-function proxiedSetTimeout(
-  callback: () => void,
-  ms?: number | undefined,
-) {
+function proxiedSetTimeout(callback: () => void, ms?: number | undefined) {
   let resolveHdl: (value: unknown) => void;
 
   new Promise(resolve => {
     resolveHdl = resolve;
   });
 
-  return setTimeout(
-    () => {
-      callback();
-      resolveHdl(null);
-    },
-    ms,
-  );
+  return setTimeout(() => {
+    callback();
+    resolveHdl(null);
+  }, ms);
 }
diff --git a/packages/insomnia/src/index.html b/packages/insomnia/src/index.html
index cda03c76b3..f1f45cd2a2 100644
--- a/packages/insomnia/src/index.html
+++ b/packages/insomnia/src/index.html
@@ -1,5 +1,5 @@
-<!DOCTYPE html>
-<html lang="en-US" class="w-full h-full overflow-hidden">
+<!doctype html>
+<html lang="en-US" class="h-full w-full overflow-hidden">
   <head>
     <meta charset="utf-8" />
     <meta
@@ -47,21 +47,9 @@
     <link rel="stylesheet" href="./ui/css/styles.css" />
   </head>
 
-  <body class="w-full h-full">
-    <div id="root" class="w-full h-full">
-      <div
-        id="app-loading-indicator"
-        class="
-          w-full
-          h-full
-          flex
-          items-center
-          justify-center
-          fixed
-          top-0
-          left-0
-        "
-      >
+  <body class="h-full w-full">
+    <div id="root" class="h-full w-full">
+      <div id="app-loading-indicator" class="fixed left-0 top-0 flex h-full w-full items-center justify-center">
         <div class="relative">
           <svg
             viewBox="0 0 378 378"
diff --git a/packages/insomnia/src/main.development.ts b/packages/insomnia/src/main.development.ts
index 73fe7ffc66..8425a98f2b 100644
--- a/packages/insomnia/src/main.development.ts
+++ b/packages/insomnia/src/main.development.ts
@@ -32,7 +32,9 @@ import type { ToastNotification } from './ui/components/toast';
 // Override the Electron userData path
 // This makes Chromium use this folder for eg localStorage
 // ensure userData dir change is made before configure sentry SDK (https://docs.sentry.io/platforms/javascript/guides/electron/#app-userdata-directory)
-const dataPath = process.env.INSOMNIA_DATA_PATH || path.join(app.getPath('userData'), '../', isDevelopment() ? 'insomnia-app' : userDataFolder);
+const dataPath =
+  process.env.INSOMNIA_DATA_PATH ||
+  path.join(app.getPath('userData'), '../', isDevelopment() ? 'insomnia-app' : userDataFolder);
 app.setPath('userData', dataPath);
 
 initializeLogging();
@@ -72,15 +74,13 @@ app.on('ready', async () => {
   registerSecretStorageHandlers();
 
   /**
- * There's no option that prevents Electron from fetching spellcheck dictionaries from Chromium's CDN and passing a non-resolving URL is the only known way to prevent it from fetching.
- * see: https://github.com/electron/electron/issues/22995
- * On macOS the OS spellchecker is used and therefore we do not download any dictionary files.
- * This API is a no-op on macOS.
- */
+   * There's no option that prevents Electron from fetching spellcheck dictionaries from Chromium's CDN and passing a non-resolving URL is the only known way to prevent it from fetching.
+   * see: https://github.com/electron/electron/issues/22995
+   * On macOS the OS spellchecker is used and therefore we do not download any dictionary files.
+   * This API is a no-op on macOS.
+   */
   const disableSpellcheckerDownload = () => {
-    electron.session.defaultSession.setSpellCheckerDictionaryDownloadURL(
-      'https://00.00/'
-    );
+    electron.session.defaultSession.setSpellCheckerDictionaryDownloadURL('https://00.00/');
   };
   disableSpellcheckerDownload();
 
@@ -119,15 +119,21 @@ if (defaultProtocolSuccessful) {
   console.error(`[electron client protocol] FAILED to set default protocol '${fullDefaultProtocol}'`);
   const isDefaultAlready = app.isDefaultProtocolClient(defaultProtocol);
   if (isDefaultAlready) {
-    console.log(`[electron client protocol] the current executable is the default protocol for '${fullDefaultProtocol}'`);
+    console.log(
+      `[electron client protocol] the current executable is the default protocol for '${fullDefaultProtocol}'`,
+    );
   } else {
-    console.log(`[electron client protocol] the current executable is not the default protocol for '${fullDefaultProtocol}'`);
+    console.log(
+      `[electron client protocol] the current executable is not the default protocol for '${fullDefaultProtocol}'`,
+    );
   }
 
   // Note: `getApplicationInfoForProtocol` is not available on Linux, so we use `getApplicationNameForProtocol` instead
   const applicationName = app.getApplicationNameForProtocol(fullDefaultProtocol);
   if (applicationName) {
-    console.log(`[electron client protocol] the default application set for '${fullDefaultProtocol}' is '${applicationName}'`);
+    console.log(
+      `[electron client protocol] the default application set for '${fullDefaultProtocol}' is '${applicationName}'`,
+    );
   } else {
     console.error(`[electron client protocol] the default application set for '${fullDefaultProtocol}' was not found`);
   }
@@ -237,12 +243,22 @@ async function _createModelInstances() {
     const scratchPad = await models.workspace.getById(models.workspace.SCRATCHPAD_WORKSPACE_ID);
     if (!scratchpadProject) {
       console.log('[main] Initializing Scratch Pad Project');
-      await models.project.create({ _id: models.project.SCRATCHPAD_PROJECT_ID, name: getProductName(), remoteId: null, parentId: models.organization.SCRATCHPAD_ORGANIZATION_ID });
+      await models.project.create({
+        _id: models.project.SCRATCHPAD_PROJECT_ID,
+        name: getProductName(),
+        remoteId: null,
+        parentId: models.organization.SCRATCHPAD_ORGANIZATION_ID,
+      });
     }
 
     if (!scratchPad) {
       console.log('[main] Initializing Scratch Pad');
-      await models.workspace.create({ _id: models.workspace.SCRATCHPAD_WORKSPACE_ID, name: 'Scratch Pad', parentId: models.project.SCRATCHPAD_PROJECT_ID, scope: 'collection' });
+      await models.workspace.create({
+        _id: models.workspace.SCRATCHPAD_WORKSPACE_ID,
+        name: 'Scratch Pad',
+        parentId: models.project.SCRATCHPAD_PROJECT_ID,
+        scope: 'collection',
+      });
     }
   } catch (err) {
     console.warn('[main] Failed to create default project. It probably already exists', err);
diff --git a/packages/insomnia/src/main/analytics.ts b/packages/insomnia/src/main/analytics.ts
index eb54d02bb0..60933fb0cf 100644
--- a/packages/insomnia/src/main/analytics.ts
+++ b/packages/insomnia/src/main/analytics.ts
@@ -63,10 +63,7 @@ function hashString(input: string) {
   return crypto.createHash('sha256').update(input).digest('hex');
 }
 
-export async function trackSegmentEvent(
-  event: SegmentEvent,
-  properties?: Record<string, any>,
-) {
+export async function trackSegmentEvent(event: SegmentEvent, properties?: Record<string, any>) {
   const settings = await models.settings.getOrCreate();
   const userSession = await models.userSession.getOrCreate();
   if (!userSession?.hashedAccountId) {
@@ -75,23 +72,26 @@ export async function trackSegmentEvent(
   const allowAnalytics = settings.enableAnalytics || userSession?.hashedAccountId;
   if (allowAnalytics) {
     try {
-      const anonymousId = await getDeviceId() ?? '';
+      const anonymousId = (await getDeviceId()) ?? '';
       const context = {
         app: { name: getProductName(), version: getAppVersion() },
         os: { name: _getOsName(), version: process.getSystemVersion() },
       };
 
-      analytics.track({
-        event,
-        properties,
-        context,
-        anonymousId,
-        userId: userSession?.hashedAccountId || '',
-      }, error => {
-        if (error) {
-          console.warn('[analytics] Error sending segment event', error);
-        }
-      });
+      analytics.track(
+        {
+          event,
+          properties,
+          context,
+          anonymousId,
+          userId: userSession?.hashedAccountId || '',
+        },
+        error => {
+          if (error) {
+            console.warn('[analytics] Error sending segment event', error);
+          }
+        },
+      );
     } catch (error: unknown) {
       console.warn('[analytics] Unexpected error while sending segment event', error);
     }
@@ -108,7 +108,7 @@ export async function trackPageView(name: string) {
   const allowAnalytics = settings.enableAnalytics || userSession?.hashedAccountId;
   if (allowAnalytics) {
     try {
-      const anonymousId = await getDeviceId() ?? '';
+      const anonymousId = (await getDeviceId()) ?? '';
       const context = {
         app: { name: getProductName(), version: getAppVersion() },
         os: { name: _getOsName(), version: process.getSystemVersion() },
diff --git a/packages/insomnia/src/main/api.protocol.ts b/packages/insomnia/src/main/api.protocol.ts
index d1265e0152..8e93c8a958 100644
--- a/packages/insomnia/src/main/api.protocol.ts
+++ b/packages/insomnia/src/main/api.protocol.ts
@@ -13,19 +13,24 @@ const httpScheme = 'http';
 const templatingWorkerDatabaseInterface = 'insomnia-templating-worker-database';
 
 export async function registerInsomniaProtocols() {
-  protocol.registerSchemesAsPrivileged([{
-    scheme: insomniaStreamScheme,
-    privileges: { secure: true, standard: true, supportFetchAPI: true },
-  }, {
-    scheme: httpsScheme,
+  protocol.registerSchemesAsPrivileged([
+    {
+      scheme: insomniaStreamScheme,
       privileges: { secure: true, standard: true, supportFetchAPI: true },
-    }, {
-    scheme: httpScheme,
+    },
+    {
+      scheme: httpsScheme,
       privileges: { secure: true, standard: true, supportFetchAPI: true },
-    }, {
-    scheme: templatingWorkerDatabaseInterface,
+    },
+    {
+      scheme: httpScheme,
       privileges: { secure: true, standard: true, supportFetchAPI: true },
-  }]);
+    },
+    {
+      scheme: templatingWorkerDatabaseInterface,
+      privileges: { secure: true, standard: true, supportFetchAPI: true },
+    },
+  ]);
 
   await app.whenReady();
 
diff --git a/packages/insomnia/src/main/authorizeUserInWindow.ts b/packages/insomnia/src/main/authorizeUserInWindow.ts
index 8c76cb7bbc..79ffe085a5 100644
--- a/packages/insomnia/src/main/authorizeUserInWindow.ts
+++ b/packages/insomnia/src/main/authorizeUserInWindow.ts
@@ -4,7 +4,7 @@ import * as models from '../models';
 
 export enum ChromiumVerificationResult {
   BLIND_TRUST = 0,
-  USE_CHROMIUM_RESULT = -3
+  USE_CHROMIUM_RESULT = -3,
 }
 
 export enum URLLoadErrorCodes {
@@ -14,7 +14,7 @@ export enum URLLoadErrorCodes {
    * - https://www.electronjs.org/docs/latest/api/web-contents#event-did-fail-load
    * - https://source.chromium.org/chromium/chromium/src/+/main:net/base/net_error_list.h
    */
-  ERR_ABORTED = -3
+  ERR_ABORTED = -3,
 }
 
 export function authorizeUserInWindow({
@@ -32,13 +32,7 @@ export function authorizeUserInWindow({
     let finalUrl: string | null = null;
 
     // Fetch user setting to determine whether to validate SSL certificates during auth
-    const {
-      validateAuthSSL,
-      proxyEnabled,
-      httpProxy,
-      httpsProxy,
-      noProxy,
-    } = await models.settings.get();
+    const { validateAuthSSL, proxyEnabled, httpProxy, httpsProxy, noProxy } = await models.settings.get();
 
     // Create a child window
     const child = new BrowserWindow({
@@ -51,18 +45,20 @@ export function authorizeUserInWindow({
 
     function _parseUrl(currentUrl: string, source: string) {
       if (currentUrl.match(urlSuccessRegex)) {
-        console.log(`[oauth2] ${source}: Matched success redirect to "${currentUrl}" with ${urlSuccessRegex.toString()}`,);
+        console.log(
+          `[oauth2] ${source}: Matched success redirect to "${currentUrl}" with ${urlSuccessRegex.toString()}`,
+        );
         finalUrl = currentUrl;
         child.close();
       } else if (currentUrl.match(urlFailureRegex)) {
-        console.log(`[oauth2] ${source}: Matched error redirect to "${currentUrl}" with ${urlFailureRegex.toString()}`,);
+        console.log(`[oauth2] ${source}: Matched error redirect to "${currentUrl}" with ${urlFailureRegex.toString()}`);
         finalUrl = currentUrl;
         child.close();
       } else if (currentUrl === url) {
         // It's the first one, so it's not a redirect
         console.log(`[oauth2] ${source}: Loaded "${currentUrl}"`);
       } else {
-        console.log(`[oauth2] ${source}: Ignoring URL "${currentUrl}". Didn't match ${urlSuccessRegex.toString()}`,);
+        console.log(`[oauth2] ${source}: Ignoring URL "${currentUrl}". Didn't match ${urlSuccessRegex.toString()}`);
       }
     }
 
@@ -93,23 +89,26 @@ export function authorizeUserInWindow({
       const cancelId = buttonLabels.length;
 
       // Prompt the user to select a certificate to use.
-      dialog.showMessageBox(child, {
-        type: 'none',
-        buttons: [...buttonLabels, 'Cancel'],
-        cancelId: cancelId,
-        message: `The website\n"${url}"\nrequires a client certificate.`,
-        detail: 'This website requires a certificate to validate your identity. Select the certificate to use when you connect to this website.',
-        textWidth: 300,
-      }).then(r => {
-        const selectedButtonIndex = r.response;
-        // Cancel button clicked
-        if (r.response === cancelId) {
-          child.close();
-          return;
-        }
-        const selectedCertificate = certificateList[selectedButtonIndex];
-        callback(selectedCertificate);
-      });
+      dialog
+        .showMessageBox(child, {
+          type: 'none',
+          buttons: [...buttonLabels, 'Cancel'],
+          cancelId: cancelId,
+          message: `The website\n"${url}"\nrequires a client certificate.`,
+          detail:
+            'This website requires a certificate to validate your identity. Select the certificate to use when you connect to this website.',
+          textWidth: 300,
+        })
+        .then(r => {
+          const selectedButtonIndex = r.response;
+          // Cancel button clicked
+          if (r.response === cancelId) {
+            child.close();
+            return;
+          }
+          const selectedCertificate = certificateList[selectedButtonIndex];
+          callback(selectedCertificate);
+        });
     });
 
     // Catch the redirect after login
@@ -144,9 +143,7 @@ export function authorizeUserInWindow({
     // Set proxy for browser window
     if (proxyEnabled) {
       await child.webContents.session.setProxy({
-        proxyRules:
-          (httpProxy ? `http=${httpProxy};` : '') +
-          (httpsProxy ? `https=${httpsProxy}` : ''),
+        proxyRules: (httpProxy ? `http=${httpProxy};` : '') + (httpsProxy ? `https=${httpsProxy}` : ''),
         proxyBypassRules: noProxy,
       });
       console.log('[oauth2] Proxy loaded');
diff --git a/packages/insomnia/src/main/backup.ts b/packages/insomnia/src/main/backup.ts
index 2b6bf3f112..f181e1b828 100644
--- a/packages/insomnia/src/main/backup.ts
+++ b/packages/insomnia/src/main/backup.ts
@@ -12,12 +12,15 @@ export async function backupIfNewerVersionAvailable() {
   try {
     const settings = await models.settings.get();
     console.log('[main] Checking for newer version than ', version);
-    const response = await electron.net.fetch(`${getUpdatesBaseURL()}/builds/check/mac?v=${version}&app=${appConfig.appId}&channel=${settings.updateChannel}`, {
-      method: 'GET',
-      headers: new Headers({
-        'X-Insomnia-Client': getClientString(),
-      }),
-    });
+    const response = await electron.net.fetch(
+      `${getUpdatesBaseURL()}/builds/check/mac?v=${version}&app=${appConfig.appId}&channel=${settings.updateChannel}`,
+      {
+        method: 'GET',
+        headers: new Headers({
+          'X-Insomnia-Client': getClientString(),
+        }),
+      },
+    );
     if (response) {
       console.log('[main] Found newer version');
       backup();
diff --git a/packages/insomnia/src/main/git-service.ts b/packages/insomnia/src/main/git-service.ts
index 61594c9ee3..83d9b61c87 100644
--- a/packages/insomnia/src/main/git-service.ts
+++ b/packages/insomnia/src/main/git-service.ts
@@ -7,7 +7,16 @@ import path from 'path';
 import { v4 } from 'uuid';
 import YAML, { parse } from 'yaml';
 
-import { getApiBaseURL, getAppWebsiteBaseURL, getGitHubGraphQLApiURL, getGitHubRestApiUrl, INSOMNIA_GITLAB_API_URL, INSOMNIA_GITLAB_CLIENT_ID, INSOMNIA_GITLAB_REDIRECT_URI, PLAYWRIGHT } from '../common/constants';
+import {
+  getApiBaseURL,
+  getAppWebsiteBaseURL,
+  getGitHubGraphQLApiURL,
+  getGitHubRestApiUrl,
+  INSOMNIA_GITLAB_API_URL,
+  INSOMNIA_GITLAB_CLIENT_ID,
+  INSOMNIA_GITLAB_REDIRECT_URI,
+  PLAYWRIGHT,
+} from '../common/constants';
 import { database } from '../common/database';
 import { insomniaFileSchema } from '../common/import-v5-parser';
 import { insomniaSchemaTypeToScope } from '../common/insomnia-v5';
@@ -15,7 +24,13 @@ import * as models from '../models';
 import type { GitRepository } from '../models/git-repository';
 import { type WorkspaceScope, WorkspaceScopeKeys } from '../models/workspace';
 import { fsClient } from '../sync/git/fs-client';
-import GitVCS, { GIT_CLONE_DIR, GIT_INSOMNIA_DIR, GIT_INSOMNIA_DIR_NAME, GIT_INTERNAL_DIR, MergeConflictError } from '../sync/git/git-vcs';
+import GitVCS, {
+  GIT_CLONE_DIR,
+  GIT_INSOMNIA_DIR,
+  GIT_INSOMNIA_DIR_NAME,
+  GIT_INTERNAL_DIR,
+  MergeConflictError,
+} from '../sync/git/git-vcs';
 import { MemClient } from '../sync/git/mem-client';
 import { NeDBClient } from '../sync/git/ne-db-client';
 import { GitProjectNeDBClient } from '../sync/git/project-ne-db-client';
@@ -29,16 +44,25 @@ import { SegmentEvent, trackSegmentEvent } from './analytics';
 import { ipcMainHandle } from './ipc/electron';
 
 type PushPull = 'push' | 'pull';
-type VCSAction = PushPull | `force_${PushPull}` |
-  'create_branch' | 'merge_branch' | 'delete_branch' | 'checkout_branch' |
-  'commit' | 'stage_all' | 'stage' | 'unstage_all' | 'unstage' | 'rollback' | 'rollback_all' |
-  'update' | 'setup' | 'clone';
+type VCSAction =
+  | PushPull
+  | `force_${PushPull}`
+  | 'create_branch'
+  | 'merge_branch'
+  | 'delete_branch'
+  | 'checkout_branch'
+  | 'commit'
+  | 'stage_all'
+  | 'stage'
+  | 'unstage_all'
+  | 'unstage'
+  | 'rollback'
+  | 'rollback_all'
+  | 'update'
+  | 'setup'
+  | 'clone';
 
-export function vcsSegmentEventProperties(
-  type: 'git',
-  action: VCSAction,
-  error?: string
-) {
+export function vcsSegmentEventProperties(type: 'git', action: VCSAction, error?: string) {
   return { type, action, error };
 }
 
@@ -73,9 +97,7 @@ async function getGitRepository({ projectId, workspaceId }: { projectId: string;
       throw new Error('Workspace is not linked to a git repository');
     }
 
-    const gitRepository = await models.gitRepository.getById(
-      workspaceMeta.gitRepositoryId
-    );
+    const gitRepository = await models.gitRepository.getById(workspaceMeta.gitRepositoryId);
     invariant(gitRepository, 'Git Repository not found');
 
     return gitRepository;
@@ -85,9 +107,7 @@ async function getGitRepository({ projectId, workspaceId }: { projectId: string;
   const project = await models.project.getById(projectId);
   invariant(project, 'Project not found');
   invariant(project.gitRepositoryId, 'Project is not linked to a git repository');
-  const gitRepository = await models.gitRepository.getById(
-    project.gitRepositoryId
-  );
+  const gitRepository = await models.gitRepository.getById(project.gitRepositoryId);
   invariant(gitRepository, 'Git Repository not found');
   return gitRepository;
 }
@@ -103,7 +123,7 @@ async function getGitFSClient({
 }) {
   const baseDir = path.join(
     process.env['INSOMNIA_DATA_PATH'] || app.getPath('userData'),
-    `version-control/git/${gitRepositoryId}`
+    `version-control/git/${gitRepositoryId}`,
   );
 
   // Workspace FS Client
@@ -144,13 +164,7 @@ async function getGitFSClient({
   return routableFS;
 }
 
-export async function loadGitRepository({
-  projectId,
-  workspaceId,
-}: {
-  projectId: string;
-  workspaceId?: string;
-}) {
+export async function loadGitRepository({ projectId, workspaceId }: { projectId: string; workspaceId?: string }) {
   try {
     const gitRepository = await getGitRepository({ workspaceId, projectId });
 
@@ -201,8 +215,7 @@ export async function loadGitRepository({
       gitRepository,
     };
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Error while fetching git repository.';
+    const errorMessage = e instanceof Error ? e.message : 'Error while fetching git repository.';
     return {
       errors: [errorMessage],
     };
@@ -211,14 +224,17 @@ export async function loadGitRepository({
 
 export type GitBranchesLoaderData =
   | {
-    branches: string[];
-    remoteBranches: string[];
-  }
+      branches: string[];
+      remoteBranches: string[];
+    }
   | {
-    errors: string[];
-  };
+      errors: string[];
+    };
 
-export const getGitBranches = async ({ projectId, workspaceId }: {
+export const getGitBranches = async ({
+  projectId,
+  workspaceId,
+}: {
   projectId: string;
   workspaceId?: string;
 }): Promise<GitBranchesLoaderData> => {
@@ -239,10 +255,7 @@ export const getGitBranches = async ({ projectId, workspaceId }: {
   }
 };
 
-export const gitFetchAction = async ({ projectId, workspaceId }: {
-  projectId: string;
-  workspaceId?: string;
-}) => {
+export const gitFetchAction = async ({ projectId, workspaceId }: { projectId: string; workspaceId?: string }) => {
   try {
     const gitRepository = await getGitRepository({ projectId, workspaceId });
     await GitVCS.fetch({
@@ -262,10 +275,7 @@ export const gitFetchAction = async ({ projectId, workspaceId }: {
   }
 };
 
-export const gitLogLoader = async ({ projectId, workspaceId }: {
-  projectId: string;
-  workspaceId?: string;
-}) => {
+export const gitLogLoader = async ({ projectId, workspaceId }: { projectId: string; workspaceId?: string }) => {
   try {
     await getGitRepository({ projectId, workspaceId });
     const log = await GitVCS.log({ depth: 35 });
@@ -334,7 +344,10 @@ export interface GitCanPushLoaderData {
   canPush: boolean;
 }
 
-export const canPushLoader = async ({ projectId, workspaceId }: {
+export const canPushLoader = async ({
+  projectId,
+  workspaceId,
+}: {
   projectId: string;
   workspaceId?: string;
 }): Promise<GitCanPushLoaderData> => {
@@ -364,7 +377,11 @@ async function isInsomniaFile(fullPath: string, fsClient: PromiseFsClient) {
 
 // Recursively finds all .yaml files in a repository that are Insomnia files and returns their paths relative to the repo root.
 // Insomnia files are defined as files that contain the string 'insomnia.rest' in the first line.
-const recursivelyFindInsomniaFiles = async (fsClient: PromiseFsClient, dir: string, files: string[] = []): Promise<string[]> => {
+const recursivelyFindInsomniaFiles = async (
+  fsClient: PromiseFsClient,
+  dir: string,
+  files: string[] = [],
+): Promise<string[]> => {
   const dirFiles = await fsClient.promises.readdir(dir);
   for (const file of dirFiles) {
     const repoRelativePath = path.join(dir, file);
@@ -374,7 +391,7 @@ const recursivelyFindInsomniaFiles = async (fsClient: PromiseFsClient, dir: stri
       await recursivelyFindInsomniaFiles(fsClient, repoRelativePath, files);
     }
 
-    if (!isDirectory && await isInsomniaFile(repoRelativePath, fsClient)) {
+    if (!isDirectory && (await isInsomniaFile(repoRelativePath, fsClient))) {
       files.push(repoRelativePath);
     }
   }
@@ -398,15 +415,18 @@ export const initGitRepoCloneAction = async ({
   token: string;
   username: string;
   oauth2format?: string;
-}): Promise<{
-  files: {
-    scope: WorkspaceScope;
-    name: string;
-    path: string;
-  }[];
-} | {
-  errors: string[];
-}> => {
+}): Promise<
+  | {
+      files: {
+        scope: WorkspaceScope;
+        name: string;
+        path: string;
+      }[];
+    }
+  | {
+      errors: string[];
+    }
+> => {
   const repoSettingsPatch: Partial<GitRepository> = {};
   repoSettingsPatch.uri = parseGitToHttpsURL(uri);
   repoSettingsPatch.author = {
@@ -416,10 +436,7 @@ export const initGitRepoCloneAction = async ({
 
   // Git Credentials
   if (oauth2format) {
-    invariant(
-      oauth2format === 'gitlab' || oauth2format === 'github',
-      'OAuth2 format is required'
-    );
+    invariant(oauth2format === 'gitlab' || oauth2format === 'github', 'OAuth2 format is required');
 
     repoSettingsPatch.credentials = {
       username,
@@ -472,7 +489,7 @@ export const initGitRepoCloneAction = async ({
         name: insomniaFile.name || 'Untitled',
         path: file,
       };
-    })
+    }),
   );
 
   return { files };
@@ -512,10 +529,7 @@ export const cloneGitRepoAction = async ({
 
       // Git Credentials
       if (oauth2format) {
-        invariant(
-          oauth2format === 'gitlab' || oauth2format === 'github',
-          'OAuth2 format is required'
-        );
+        invariant(oauth2format === 'gitlab' || oauth2format === 'github', 'OAuth2 format is required');
 
         repoSettingsPatch.credentials = {
           username,
@@ -532,10 +546,7 @@ export const cloneGitRepoAction = async ({
         };
       }
 
-      trackSegmentEvent(
-        SegmentEvent.vcsSyncStart,
-        vcsSegmentEventProperties('git', 'clone'),
-      );
+      trackSegmentEvent(SegmentEvent.vcsSyncStart, vcsSegmentEventProperties('git', 'clone'));
       repoSettingsPatch.needsFullClone = true;
 
       const inMemoryFsClient = MemClient.createClient();
@@ -659,10 +670,7 @@ export const cloneGitRepoAction = async ({
 
     // Git Credentials
     if (oauth2format) {
-      invariant(
-        oauth2format === 'gitlab' || oauth2format === 'github',
-        'OAuth2 format is required'
-      );
+      invariant(oauth2format === 'gitlab' || oauth2format === 'github', 'OAuth2 format is required');
 
       repoSettingsPatch.credentials = {
         username,
@@ -679,10 +687,7 @@ export const cloneGitRepoAction = async ({
       };
     }
 
-    trackSegmentEvent(
-      SegmentEvent.vcsSyncStart,
-      vcsSegmentEventProperties('git', 'clone'),
-    );
+    trackSegmentEvent(SegmentEvent.vcsSyncStart, vcsSegmentEventProperties('git', 'clone'));
     repoSettingsPatch.needsFullClone = true;
 
     const inMemoryFsClient = MemClient.createClient();
@@ -707,23 +712,17 @@ export const cloneGitRepoAction = async ({
       };
     }
 
-    const containsInsomniaDir = async (
-      fsClient: Record<string, any>
-    ): Promise<boolean> => {
+    const containsInsomniaDir = async (fsClient: Record<string, any>): Promise<boolean> => {
       const rootDirs: string[] = await fsClient.promises.readdir(GIT_CLONE_DIR);
       return rootDirs.includes(GIT_INSOMNIA_DIR_NAME);
     };
 
-    const containsInsomniaWorkspaceDir = async (
-      fsClient: Record<string, any>
-    ): Promise<boolean> => {
+    const containsInsomniaWorkspaceDir = async (fsClient: Record<string, any>): Promise<boolean> => {
       if (!(await containsInsomniaDir(fsClient))) {
         return false;
       }
 
-      const rootDirs: string[] = await fsClient.promises.readdir(
-        GIT_INSOMNIA_DIR
-      );
+      const rootDirs: string[] = await fsClient.promises.readdir(GIT_INSOMNIA_DIR);
       return rootDirs.includes(models.workspace.type);
     };
 
@@ -743,13 +742,10 @@ export const cloneGitRepoAction = async ({
       });
       await models.apiSpec.getOrCreateForParentId(workspace._id);
 
-      trackSegmentEvent(
-        SegmentEvent.vcsSyncComplete,
-        {
-          ...vcsSegmentEventProperties('git', 'clone', 'no directory found'),
-          providerName,
-        },
-      );
+      trackSegmentEvent(SegmentEvent.vcsSyncComplete, {
+        ...vcsSegmentEventProperties('git', 'clone', 'no directory found'),
+        providerName,
+      });
 
       workspaceId = workspace._id;
 
@@ -764,12 +760,10 @@ export const cloneGitRepoAction = async ({
       const workspaces = await inMemoryFsClient.promises.readdir(workspaceBase);
 
       if (workspaces.length === 0) {
-        trackSegmentEvent(
-          SegmentEvent.vcsSyncComplete, {
+        trackSegmentEvent(SegmentEvent.vcsSyncComplete, {
           ...vcsSegmentEventProperties('git', 'clone', 'no workspaces found'),
           providerName,
-        },
-        );
+        });
 
         return {
           errors: ['No workspaces found in repository'],
@@ -777,17 +771,10 @@ export const cloneGitRepoAction = async ({
       }
 
       if (workspaces.length > 1) {
-        trackSegmentEvent(
-          SegmentEvent.vcsSyncComplete,
-          {
-            ...vcsSegmentEventProperties(
-              'git',
-              'clone',
-              'multiple workspaces found'
-            ),
-            providerName,
-          },
-        );
+        trackSegmentEvent(SegmentEvent.vcsSyncComplete, {
+          ...vcsSegmentEventProperties('git', 'clone', 'multiple workspaces found'),
+          providerName,
+        });
 
         return {
           errors: ['Multiple workspaces found in repository. Expected one.'],
@@ -799,7 +786,8 @@ export const cloneGitRepoAction = async ({
       const workspaceJson = await inMemoryFsClient.promises.readFile(workspacePath);
       const workspace = YAML.parse(workspaceJson.toString());
       workspaceId = workspace._id;
-      scope = (workspace.scope === WorkspaceScopeKeys.collection) ? WorkspaceScopeKeys.collection : WorkspaceScopeKeys.design;
+      scope =
+        workspace.scope === WorkspaceScopeKeys.collection ? WorkspaceScopeKeys.collection : WorkspaceScopeKeys.design;
       // Check if the workspace already exists
       const existingWorkspace = await models.workspace.getById(workspace._id);
 
@@ -807,7 +795,9 @@ export const cloneGitRepoAction = async ({
         const project = await models.project.getById(existingWorkspace.parentId);
         if (!project) {
           return {
-            errors: ['It seems that the repository being cloned is connected to an orphaned workspace. Please move that workspace to a project and try again.'],
+            errors: [
+              'It seems that the repository being cloned is connected to an orphaned workspace. Please move that workspace to a project and try again.',
+            ],
           };
         }
 
@@ -905,7 +895,6 @@ export const updateGitRepoAction = async ({
   token: string;
 }) => {
   try {
-
     let gitRepositoryId: string | null | undefined = null;
 
     if (workspaceId) {
@@ -933,10 +922,7 @@ export const updateGitRepoAction = async ({
 
     // Git Credentials
     if (oauth2format) {
-      invariant(
-        oauth2format === 'gitlab' || oauth2format === 'github',
-        'OAuth2 format is required'
-      );
+      invariant(oauth2format === 'gitlab' || oauth2format === 'github', 'OAuth2 format is required');
 
       repoSettingsPatch.credentials = {
         username,
@@ -1008,10 +994,7 @@ export const updateGitRepoAction = async ({
   }
 };
 
-export const resetGitRepoAction = async ({ projectId, workspaceId }: {
-  projectId: string;
-  workspaceId?: string;
-}) => {
+export const resetGitRepoAction = async ({ projectId, workspaceId }: { projectId: string; workspaceId?: string }) => {
   const repo = await getGitRepository({ projectId, workspaceId });
 
   invariant(repo, 'Git Repository not found');
@@ -1068,8 +1051,7 @@ export const commitToGitRepoAction = async ({
       hasUnpushedChanges,
     });
   } catch (e) {
-    const message =
-      e instanceof Error ? e.message : 'Error while committing changes';
+    const message = e instanceof Error ? e.message : 'Error while committing changes';
     return { errors: [message] };
   }
 
@@ -1093,14 +1075,12 @@ export const commitAndPushToGitRepoAction = async ({
 
     const providerName = getOauth2FormatName(repo?.credentials);
 
-    trackSegmentEvent(
-      SegmentEvent.vcsAction, {
+    trackSegmentEvent(SegmentEvent.vcsAction, {
       ...vcsSegmentEventProperties('git', 'commit'),
       providerName,
     });
   } catch (e) {
-    const message =
-      e instanceof Error ? e.message : 'Error while committing changes';
+    const message = e instanceof Error ? e.message : 'Error while committing changes';
     return { errors: [message] };
   }
 
@@ -1142,13 +1122,17 @@ export const commitAndPushToGitRepoAction = async ({
   } catch (err: unknown) {
     if (err instanceof Errors.PushRejectedError && err.data.reason === 'not-fast-forward') {
       return {
-        errors: ['Push Rejected. It seems that the remote repository has changes that you do not have locally. Please pull the changes and try again.'],
+        errors: [
+          'Push Rejected. It seems that the remote repository has changes that you do not have locally. Please pull the changes and try again.',
+        ],
       };
     }
 
     if (err instanceof Errors.PushRejectedError && err.data.reason === 'tag-exists') {
       return {
-        errors: ['Push Rejected. It seems that the tag you are trying to push already exists in the remote repository.'],
+        errors: [
+          'Push Rejected. It seems that the tag you are trying to push already exists in the remote repository.',
+        ],
       };
     }
 
@@ -1213,10 +1197,7 @@ export const createNewGitBranchAction = async ({
         errors: [`${err.message}, ${err.data.response}`],
       };
     }
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Something went wrong while creating a new branch';
+    const errorMessage = err instanceof Error ? err.message : 'Something went wrong while creating a new branch';
     return {
       errors: [errorMessage],
     };
@@ -1320,10 +1301,7 @@ export const mergeGitBranch = async ({
       errorMessage = `${err.message}, ${err.data.response}`;
     }
 
-    trackSegmentEvent(
-      SegmentEvent.vcsAction,
-      vcsSegmentEventProperties('git', 'merge_branch', errorMessage),
-    );
+    trackSegmentEvent(SegmentEvent.vcsAction, vcsSegmentEventProperties('git', 'merge_branch', errorMessage));
 
     return {
       errors: [errorMessage],
@@ -1416,14 +1394,18 @@ export const pushToGitRemoteAction = async ({
   } catch (err: unknown) {
     if (err instanceof Errors.PushRejectedError && err.data.reason === 'not-fast-forward') {
       return {
-        errors: ['Push Rejected. It seems that the remote repository has changes that you do not have locally. Please pull the changes and try again.'],
+        errors: [
+          'Push Rejected. It seems that the remote repository has changes that you do not have locally. Please pull the changes and try again.',
+        ],
         gitRepository,
       };
     }
 
     if (err instanceof Errors.PushRejectedError && err.data.reason === 'tag-exists') {
       return {
-        errors: ['Push Rejected. It seems that the tag you are trying to push already exists in the remote repository.'],
+        errors: [
+          'Push Rejected. It seems that the tag you are trying to push already exists in the remote repository.',
+        ],
       };
     }
 
@@ -1449,13 +1431,7 @@ export const pushToGitRemoteAction = async ({
   return {};
 };
 
-export async function pullFromGitRemote({
-  projectId,
-  workspaceId,
-}: {
-  projectId: string;
-  workspaceId?: string;
-}) {
+export async function pullFromGitRemote({ projectId, workspaceId }: { projectId: string; workspaceId?: string }) {
   try {
     const gitRepository = await getGitRepository({ projectId, workspaceId });
     const providerName = getOauth2FormatName(gitRepository.credentials);
@@ -1478,10 +1454,7 @@ export async function pullFromGitRemote({
     if (err instanceof Errors.HttpError) {
       errorMessage = `${err.message}, ${err.data.response}`;
     }
-    trackSegmentEvent(
-      SegmentEvent.vcsAction,
-      vcsSegmentEventProperties('git', 'pull', errorMessage),
-    );
+    trackSegmentEvent(SegmentEvent.vcsAction, vcsSegmentEventProperties('git', 'pull', errorMessage));
 
     return {
       errors: [errorMessage],
@@ -1489,21 +1462,19 @@ export async function pullFromGitRemote({
   }
 }
 
-export const continueMerge = async (
-  {
-    projectId,
-    workspaceId,
-    handledMergeConflicts,
-    commitMessage,
-    commitParent,
-  }: {
-    projectId: string;
-    workspaceId?: string;
-    handledMergeConflicts: MergeConflict[];
-    commitMessage: string;
-    commitParent: string[];
-  }
-) => {
+export const continueMerge = async ({
+  projectId,
+  workspaceId,
+  handledMergeConflicts,
+  commitMessage,
+  commitParent,
+}: {
+  projectId: string;
+  workspaceId?: string;
+  handledMergeConflicts: MergeConflict[];
+  commitMessage: string;
+  commitParent: string[];
+}) => {
   try {
     await getGitRepository({ workspaceId, projectId });
     const bufferId = await database.bufferChanges();
@@ -1557,14 +1528,12 @@ export const discardChangesAction = async ({
     await getGitRepository({ workspaceId, projectId });
     const { changes } = await getGitChanges(GitVCS);
 
-    const files = changes.unstaged
-      .filter(change => paths.includes(change.path));
+    const files = changes.unstaged.filter(change => paths.includes(change.path));
 
     await GitVCS.discardChanges(files);
     return {};
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Error while rolling back changes';
+    const errorMessage = e instanceof Error ? e.message : 'Error while rolling back changes';
     return {
       errors: [errorMessage],
     };
@@ -1623,14 +1592,12 @@ export const stageChangesAction = async ({
     await getGitRepository({ workspaceId, projectId });
     const { changes } = await getGitChanges(GitVCS);
 
-    const files = changes.unstaged
-      .filter(change => paths.includes(change.path));
+    const files = changes.unstaged.filter(change => paths.includes(change.path));
 
     await GitVCS.stageChanges(files);
     return {};
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Error while staging changes';
+    const errorMessage = e instanceof Error ? e.message : 'Error while staging changes';
     return {
       errors: [errorMessage],
     };
@@ -1652,32 +1619,26 @@ export const unstageChangesAction = async ({
     await getGitRepository({ workspaceId, projectId });
     const { changes } = await getGitChanges(GitVCS);
 
-    const files = changes.staged
-      .filter(change => paths.includes(change.path));
+    const files = changes.staged.filter(change => paths.includes(change.path));
 
     await GitVCS.unstageChanges(files);
     return {};
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Error while unstaging changes';
+    const errorMessage = e instanceof Error ? e.message : 'Error while unstaging changes';
     return {
       errors: [errorMessage],
     };
   }
-
 };
 
-function getPreviewItemName(previewDiffItem: {
-  before: string;
-  after: string;
-}) {
+function getPreviewItemName(previewDiffItem: { before: string; after: string }) {
   let prevName = '';
   let nextName = '';
 
   try {
     const prev = parse(previewDiffItem.before);
 
-    if (prev && 'fileName' in prev || 'name' in prev) {
+    if ((prev && 'fileName' in prev) || 'name' in prev) {
       prevName = prev.fileName || prev.name;
     }
   } catch (e) {
@@ -1686,7 +1647,7 @@ function getPreviewItemName(previewDiffItem: {
 
   try {
     const next = parse(previewDiffItem.after);
-    if (next && 'fileName' in next || 'name' in next) {
+    if ((next && 'fileName' in next) || 'name' in next) {
       nextName = next.fileName || next.name;
     }
   } catch (e) {
@@ -1696,15 +1657,17 @@ function getPreviewItemName(previewDiffItem: {
   return nextName || prevName;
 }
 
-export type GitDiffResult = {
-  name: string;
-  diff?: {
-    before: string;
-    after: string;
-  };
-} | {
-  errors: string[];
-};
+export type GitDiffResult =
+  | {
+      name: string;
+      diff?: {
+        before: string;
+        after: string;
+      };
+    }
+  | {
+      errors: string[];
+    };
 
 export const diffFileLoader = async ({
   projectId,
@@ -1721,21 +1684,22 @@ export const diffFileLoader = async ({
     await getGitRepository({ workspaceId, projectId });
     const fileStatus = await GitVCS.fileStatus(filepath);
 
-    const diff = staged ? {
-      before: fileStatus.head,
-      after: fileStatus.stage,
-    } : {
-      before: fileStatus.stage || fileStatus.head,
-      after: fileStatus.workdir,
-    };
+    const diff = staged
+      ? {
+          before: fileStatus.head,
+          after: fileStatus.stage,
+        }
+      : {
+          before: fileStatus.stage || fileStatus.head,
+          after: fileStatus.workdir,
+        };
 
     return {
       name: getPreviewItemName(diff) || filepath,
       diff,
     };
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Error while unstaging changes';
+    const errorMessage = e instanceof Error ? e.message : 'Error while unstaging changes';
     return {
       errors: [errorMessage],
     };
@@ -1755,14 +1719,21 @@ interface GitRepoDirectory {
   children: (GitRepoDirectory | GitRepoFile)[];
 }
 
-type FileTree = {
-  id: string;
-  name: string;
-  type: 'root';
-  children: (GitRepoDirectory | GitRepoFile)[];
-} | GitRepoDirectory | GitRepoFile;
+type FileTree =
+  | {
+      id: string;
+      name: string;
+      type: 'root';
+      children: (GitRepoDirectory | GitRepoFile)[];
+    }
+  | GitRepoDirectory
+  | GitRepoFile;
 
-const getRepositoryDirectoryTree = async ({ projectId }: { projectId: string }): Promise<{
+const getRepositoryDirectoryTree = async ({
+  projectId,
+}: {
+  projectId: string;
+}): Promise<{
   repositoryTree: FileTree;
   folderList: Record<string, string[]>;
 }> => {
@@ -1843,17 +1814,9 @@ interface GitHubUserApiResponse {
   url: string;
 }
 
-async function completeSignInToGitHub({
-  code,
-  state,
-}: {
-  code: string;
-  state: string;
-}) {
+async function completeSignInToGitHub({ code, state }: { code: string; state: string }) {
   if (!PLAYWRIGHT && !statesCache.has(state)) {
-    throw new Error(
-      'Invalid state parameter. It looks like the authorization flow was not initiated by the app.'
-    );
+    throw new Error('Invalid state parameter. It looks like the authorization flow was not initiated by the app.');
   }
 
   const response = await net.fetch(getApiBaseURL() + '/v1/oauth/github-app', {
@@ -1866,7 +1829,7 @@ async function completeSignInToGitHub({
     },
   });
 
-  const data = await response.json() as { access_token: string };
+  const data = (await response.json()) as { access_token: string };
   statesCache.delete(state);
   const existingGitHubCredentials = await models.gitCredentials.getByProvider('github');
 
@@ -1886,10 +1849,7 @@ async function completeSignInToGitHub({
     },
   }).then(response => response.json() as Promise<GitHubUserApiResponse>);
 
-  const [emails, user] = await Promise.all([
-    emailsPromise,
-    userPromise,
-  ]);
+  const [emails, user] = await Promise.all([emailsPromise, userPromise]);
 
   const userProfileEmail = user.email ?? '';
   const email = emails.find(e => e.primary)?.email ?? userProfileEmail ?? '';
@@ -1939,10 +1899,13 @@ type GitHubRepositoriesApiResponse = GitHubRepositoryApiResponse[];
 
 const GITHUB_USER_REPOS_URL = `${getGitHubRestApiUrl()}/user/repos`;
 
-async function getGitHubRepositories(
-  { url = `${GITHUB_USER_REPOS_URL}?per_page=100`, repos = [] }:
-    { url?: string; repos?: GitHubRepositoriesApiResponse }
-) {
+async function getGitHubRepositories({
+  url = `${GITHUB_USER_REPOS_URL}?per_page=100`,
+  repos = [],
+}: {
+  url?: string;
+  repos?: GitHubRepositoriesApiResponse;
+}) {
   const credentials = await models.gitCredentials.getByProvider('github');
   const opts = {
     headers: {
@@ -1954,7 +1917,6 @@ async function getGitHubRepositories(
   if (!response.ok) {
     const raw = await response.text();
     if (response.status === 401) {
-
       return {
         errors: [`User token not authorized to fetch repositories, please sign out and back in.\nResponse: ${raw}`],
         repos: [],
@@ -1979,7 +1941,11 @@ async function getGitHubRepositories(
       const lastPage = lastUrl.searchParams.get('page');
       if (lastPage) {
         const pages = Number(lastPage);
-        const pageList = await Promise.all(Array.from({ length: pages - 1 }, (_, i) => fetch(`${GITHUB_USER_REPOS_URL}?per_page=100&page=${i + 2}`, opts)));
+        const pageList = await Promise.all(
+          Array.from({ length: pages - 1 }, (_, i) =>
+            fetch(`${GITHUB_USER_REPOS_URL}?per_page=100&page=${i + 2}`, opts),
+          ),
+        );
         for (const page of pageList) {
           const pageData = await page.json();
           pullableRepos = pageData.filter((repo: GitHubRepositoryApiResponse) => repo.permissions.pull);
@@ -2017,7 +1983,7 @@ async function getGitHubRepository({ uri }: { uri: string }) {
     };
   }
 
-  return { repo: await response.json() as GitHubRepositoryApiResponse, errors: [], notFound: false };
+  return { repo: (await response.json()) as GitHubRepositoryApiResponse, errors: [], notFound: false };
 }
 
 /**
@@ -2047,7 +2013,10 @@ const getGitLabConfig = async () => {
     method: 'GET',
   });
 
-  const { applicationId: clientId, redirectUri } = await configResponse.json() as { applicationId: string; redirectUri: string };
+  const { applicationId: clientId, redirectUri } = (await configResponse.json()) as {
+    applicationId: string;
+    redirectUri: string;
+  };
 
   return {
     clientId,
@@ -2056,11 +2025,7 @@ const getGitLabConfig = async () => {
 };
 
 function base64URLEncode(buffer: Buffer) {
-  return buffer
-    .toString('base64')
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=/g, '');
+  return buffer.toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
 }
 
 export const getGitLabOauthApiURL = () => INSOMNIA_GITLAB_API_URL || 'https://gitlab.com';
@@ -2101,22 +2066,14 @@ async function initSignInToGitLab() {
   await shell.openExternal(gitlabURL.toString());
 }
 
-async function completeSignInToGitLab({
-  code,
-  state,
-}: {
-  code: string;
-  state: string;
-}) {
+async function completeSignInToGitLab({ code, state }: { code: string; state: string }) {
   let verifier = gitLabStatesCache.get(state);
 
   if (PLAYWRIGHT) {
     verifier = 'test-verifier';
   }
   if (!verifier) {
-    throw new Error(
-      'Invalid state parameter. It looks like the authorization flow was not initiated by the app.'
-    );
+    throw new Error('Invalid state parameter. It looks like the authorization flow was not initiated by the app.');
   }
   const { clientId, redirectUri } = await getGitLabConfig();
   const url = new URL(`${getGitLabOauthApiURL()}/oauth/token`);
@@ -2133,10 +2090,10 @@ async function completeSignInToGitLab({
     method: 'POST',
   });
 
-  const {
-    access_token,
-    refresh_token,
-  } = await gitLabResponse.json() as { access_token: string; refresh_token: string };
+  const { access_token, refresh_token } = (await gitLabResponse.json()) as {
+    access_token: string;
+    refresh_token: string;
+  };
 
   gitLabStatesCache.delete(state);
   const existingGitLabCredentials = await models.gitCredentials.getByProvider('gitlab');
@@ -2147,7 +2104,7 @@ async function completeSignInToGitLab({
     },
   });
 
-  const user = await gitLabUserResponse.json() as {
+  const user = (await gitLabUserResponse.json()) as {
     id: number;
     username: string;
     name: string;
@@ -2230,39 +2187,81 @@ export interface GitServiceAPI {
 }
 
 export const registerGitServiceAPI = () => {
-  ipcMainHandle('git.loadGitRepository', (_, options: Parameters<typeof loadGitRepository>[0]) => loadGitRepository(options));
+  ipcMainHandle('git.loadGitRepository', (_, options: Parameters<typeof loadGitRepository>[0]) =>
+    loadGitRepository(options),
+  );
   ipcMainHandle('git.getGitBranches', (_, options: Parameters<typeof getGitBranches>[0]) => getGitBranches(options));
   ipcMainHandle('git.gitFetchAction', (_, options: Parameters<typeof gitFetchAction>[0]) => gitFetchAction(options));
   ipcMainHandle('git.gitLogLoader', (_, options: Parameters<typeof gitLogLoader>[0]) => gitLogLoader(options));
-  ipcMainHandle('git.gitChangesLoader', (_, options: Parameters<typeof gitChangesLoader>[0]) => gitChangesLoader(options));
+  ipcMainHandle('git.gitChangesLoader', (_, options: Parameters<typeof gitChangesLoader>[0]) =>
+    gitChangesLoader(options),
+  );
   ipcMainHandle('git.canPushLoader', (_, options: Parameters<typeof canPushLoader>[0]) => canPushLoader(options));
-  ipcMainHandle('git.cloneGitRepo', (_, options: Parameters<typeof cloneGitRepoAction>[0]) => cloneGitRepoAction(options));
-  ipcMainHandle('git.initGitRepoClone', (_, options: Parameters<typeof initGitRepoCloneAction>[0]) => initGitRepoCloneAction(options));
-  ipcMainHandle('git.updateGitRepo', (_, options: Parameters<typeof updateGitRepoAction>[0]) => updateGitRepoAction(options));
-  ipcMainHandle('git.resetGitRepo', (_, options: Parameters<typeof resetGitRepoAction>[0]) => resetGitRepoAction(options));
-  ipcMainHandle('git.commitToGitRepo', (_, options: Parameters<typeof commitToGitRepoAction>[0]) => commitToGitRepoAction(options));
-  ipcMainHandle('git.commitAndPushToGitRepo', (_, options: Parameters<typeof commitAndPushToGitRepoAction>[0]) => commitAndPushToGitRepoAction(options));
-  ipcMainHandle('git.createNewGitBranch', (_, options: Parameters<typeof createNewGitBranchAction>[0]) => createNewGitBranchAction(options));
-  ipcMainHandle('git.checkoutGitBranch', (_, options: Parameters<typeof checkoutGitBranchAction>[0]) => checkoutGitBranchAction(options));
+  ipcMainHandle('git.cloneGitRepo', (_, options: Parameters<typeof cloneGitRepoAction>[0]) =>
+    cloneGitRepoAction(options),
+  );
+  ipcMainHandle('git.initGitRepoClone', (_, options: Parameters<typeof initGitRepoCloneAction>[0]) =>
+    initGitRepoCloneAction(options),
+  );
+  ipcMainHandle('git.updateGitRepo', (_, options: Parameters<typeof updateGitRepoAction>[0]) =>
+    updateGitRepoAction(options),
+  );
+  ipcMainHandle('git.resetGitRepo', (_, options: Parameters<typeof resetGitRepoAction>[0]) =>
+    resetGitRepoAction(options),
+  );
+  ipcMainHandle('git.commitToGitRepo', (_, options: Parameters<typeof commitToGitRepoAction>[0]) =>
+    commitToGitRepoAction(options),
+  );
+  ipcMainHandle('git.commitAndPushToGitRepo', (_, options: Parameters<typeof commitAndPushToGitRepoAction>[0]) =>
+    commitAndPushToGitRepoAction(options),
+  );
+  ipcMainHandle('git.createNewGitBranch', (_, options: Parameters<typeof createNewGitBranchAction>[0]) =>
+    createNewGitBranchAction(options),
+  );
+  ipcMainHandle('git.checkoutGitBranch', (_, options: Parameters<typeof checkoutGitBranchAction>[0]) =>
+    checkoutGitBranchAction(options),
+  );
   ipcMainHandle('git.mergeGitBranch', (_, options: Parameters<typeof mergeGitBranch>[0]) => mergeGitBranch(options));
-  ipcMainHandle('git.deleteGitBranch', (_, options: Parameters<typeof deleteGitBranchAction>[0]) => deleteGitBranchAction(options));
-  ipcMainHandle('git.pushToGitRemote', (_, options: Parameters<typeof pushToGitRemoteAction>[0]) => pushToGitRemoteAction(options));
-  ipcMainHandle('git.pullFromGitRemote', (_, options: Parameters<typeof pullFromGitRemote>[0]) => pullFromGitRemote(options));
+  ipcMainHandle('git.deleteGitBranch', (_, options: Parameters<typeof deleteGitBranchAction>[0]) =>
+    deleteGitBranchAction(options),
+  );
+  ipcMainHandle('git.pushToGitRemote', (_, options: Parameters<typeof pushToGitRemoteAction>[0]) =>
+    pushToGitRemoteAction(options),
+  );
+  ipcMainHandle('git.pullFromGitRemote', (_, options: Parameters<typeof pullFromGitRemote>[0]) =>
+    pullFromGitRemote(options),
+  );
   ipcMainHandle('git.continueMerge', (_, options: Parameters<typeof continueMerge>[0]) => continueMerge(options));
-  ipcMainHandle('git.discardChanges', (_, options: Parameters<typeof discardChangesAction>[0]) => discardChangesAction(options));
+  ipcMainHandle('git.discardChanges', (_, options: Parameters<typeof discardChangesAction>[0]) =>
+    discardChangesAction(options),
+  );
   ipcMainHandle('git.gitStatus', (_, options: Parameters<typeof gitStatusAction>[0]) => gitStatusAction(options));
-  ipcMainHandle('git.stageChanges', (_, options: Parameters<typeof stageChangesAction>[0]) => stageChangesAction(options));
-  ipcMainHandle('git.unstageChanges', (_, options: Parameters<typeof unstageChangesAction>[0]) => unstageChangesAction(options));
+  ipcMainHandle('git.stageChanges', (_, options: Parameters<typeof stageChangesAction>[0]) =>
+    stageChangesAction(options),
+  );
+  ipcMainHandle('git.unstageChanges', (_, options: Parameters<typeof unstageChangesAction>[0]) =>
+    unstageChangesAction(options),
+  );
   ipcMainHandle('git.diffFileLoader', (_, options: Parameters<typeof diffFileLoader>[0]) => diffFileLoader(options));
-  ipcMainHandle('git.getRepositoryDirectoryTree', (_, options: Parameters<typeof getRepositoryDirectoryTree>[0]) => getRepositoryDirectoryTree(options));
+  ipcMainHandle('git.getRepositoryDirectoryTree', (_, options: Parameters<typeof getRepositoryDirectoryTree>[0]) =>
+    getRepositoryDirectoryTree(options),
+  );
 
   ipcMainHandle('git.initSignInToGitHub', () => initSignInToGitHub());
-  ipcMainHandle('git.completeSignInToGitHub', (_, options: Parameters<typeof completeSignInToGitHub>[0]) => completeSignInToGitHub(options));
+  ipcMainHandle('git.completeSignInToGitHub', (_, options: Parameters<typeof completeSignInToGitHub>[0]) =>
+    completeSignInToGitHub(options),
+  );
   ipcMainHandle('git.signOutOfGitHub', () => signOutOfGitHub());
-  ipcMainHandle('git.getGitHubRepositories', (_, options: Parameters<typeof getGitHubRepositories>[0]) => getGitHubRepositories(options));
-  ipcMainHandle('git.getGitHubRepository', (_, options: Parameters<typeof getGitHubRepository>[0]) => getGitHubRepository(options));
+  ipcMainHandle('git.getGitHubRepositories', (_, options: Parameters<typeof getGitHubRepositories>[0]) =>
+    getGitHubRepositories(options),
+  );
+  ipcMainHandle('git.getGitHubRepository', (_, options: Parameters<typeof getGitHubRepository>[0]) =>
+    getGitHubRepository(options),
+  );
 
   ipcMainHandle('git.initSignInToGitLab', () => initSignInToGitLab());
-  ipcMainHandle('git.completeSignInToGitLab', (_, options: Parameters<typeof completeSignInToGitLab>[0]) => completeSignInToGitLab(options));
+  ipcMainHandle('git.completeSignInToGitLab', (_, options: Parameters<typeof completeSignInToGitLab>[0]) =>
+    completeSignInToGitLab(options),
+  );
   ipcMainHandle('git.signOutOfGitLab', () => signOutOfGitLab());
 };
diff --git a/packages/insomnia/src/main/install-plugin.ts b/packages/insomnia/src/main/install-plugin.ts
index 7369eb0c33..d2f7b43ea5 100644
--- a/packages/insomnia/src/main/install-plugin.ts
+++ b/packages/insomnia/src/main/install-plugin.ts
@@ -50,7 +50,11 @@ export default async function (lookupName: string) {
       info = await _isInsomniaPlugin(lookupName);
       // Get actual module name without version suffixes and things
       const moduleName = info.name;
-      const pluginDir = path.join(process.env['INSOMNIA_DATA_PATH'] || electron.app.getPath('userData'), 'plugins', moduleName);
+      const pluginDir = path.join(
+        process.env['INSOMNIA_DATA_PATH'] || electron.app.getPath('userData'),
+        'plugins',
+        moduleName,
+      );
 
       // Make plugin directory
       await mkdir(pluginDir, { recursive: true });
@@ -275,7 +279,6 @@ function _getYarnPath() {
     return path.resolve(app.getAppPath(), './bin/yarn-standalone.js');
   }
   return path.resolve(app.getAppPath(), '../bin/yarn-standalone.js');
-
 }
 
 function escape(p: string) {
@@ -285,5 +288,4 @@ function escape(p: string) {
   }
   // Escape whitespace and parenthesis with backslashes for Unix paths
   return p.replace(/([\s()])/g, '\\$1');
-
 }
diff --git a/packages/insomnia/src/main/ipc/__tests__/grpc.test.ts b/packages/insomnia/src/main/ipc/__tests__/grpc.test.ts
index 8f070d80cf..1646068ab5 100644
--- a/packages/insomnia/src/main/ipc/__tests__/grpc.test.ts
+++ b/packages/insomnia/src/main/ipc/__tests__/grpc.test.ts
@@ -1,9 +1,4 @@
-import type {
-  AnyMessage,
-  MethodInfo,
-  PartialMessage,
-  ServiceType,
-} from '@bufbuild/protobuf';
+import type { AnyMessage, MethodInfo, PartialMessage, ServiceType } from '@bufbuild/protobuf';
 import type { UnaryResponse } from '@connectrpc/connect';
 import { createConnectTransport } from '@connectrpc/connect-node';
 import * as grpcReflection from 'grpc-reflection-js';
@@ -16,7 +11,6 @@ vi.mock('grpc-reflection-js');
 vi.mock('@connectrpc/connect-node');
 
 describe('loadMethodsFromReflection', () => {
-
   describe('one service reflection', () => {
     beforeEach(() => {
       // we want to test that the values that are passed to axios are returned in the config key
@@ -48,13 +42,15 @@ describe('loadMethodsFromReflection', () => {
         metadata: [],
         reflectionApi: { enabled: false, apiKey: '', url: '', module: '' },
       });
-      expect(methods).toStrictEqual([{
-        type: 'unary',
-        fullPath: '/FooService/Foo',
-        example: {
-          foo: 'Hello',
+      expect(methods).toStrictEqual([
+        {
+          type: 'unary',
+          fullPath: '/FooService/Foo',
+          example: {
+            foo: 'Hello',
+          },
         },
-      }]);
+      ]);
     });
   });
 
@@ -89,13 +85,15 @@ describe('loadMethodsFromReflection', () => {
         metadata: [],
         reflectionApi: { enabled: false, apiKey: '', url: '', module: '' },
       });
-      expect(methods).toStrictEqual([{
-        type: 'unary',
-        fullPath: '/FooService/format',
-        example: {
-          foo: 'Hello',
+      expect(methods).toStrictEqual([
+        {
+          type: 'unary',
+          fullPath: '/FooService/format',
+          example: {
+            foo: 'Hello',
+          },
         },
-      }]);
+      ]);
     });
   });
 
@@ -142,53 +140,54 @@ describe('loadMethodsFromReflection', () => {
         metadata: [],
         reflectionApi: { enabled: false, apiKey: '', url: '', module: '' },
       });
-      expect(methods).toStrictEqual([{
-        type: 'unary',
-        fullPath: '/FooService/Foo',
-        example: {
-          foo: 'Hello',
+      expect(methods).toStrictEqual([
+        {
+          type: 'unary',
+          fullPath: '/FooService/Foo',
+          example: {
+            foo: 'Hello',
+          },
         },
-      }, {
-        type: 'unary',
-        fullPath: '/BarService/Bar',
-        example: {
-          bar: 'Hello',
+        {
+          type: 'unary',
+          fullPath: '/BarService/Bar',
+          example: {
+            bar: 'Hello',
+          },
         },
-      }]);
+      ]);
     });
   });
 
   describe('buf reflection api', () => {
     it('loads module', async () => {
-      (createConnectTransport as unknown as vi.Mock).mockImplementation(
-        options => {
-          expect(options.baseUrl).toStrictEqual('https://buf.build');
-          return {
-            async unary(
-              service: ServiceType,
-              method: MethodInfo,
-              _: AbortSignal | undefined,
-              __: number | undefined,
-              header: HeadersInit | undefined,
-              input: PartialMessage<AnyMessage>
-            ): Promise<UnaryResponse> {
-              expect(new Headers(header).get('Authorization')).toStrictEqual('Bearer TEST_KEY');
-              expect(input).toStrictEqual({ module: 'buf.build/connectrpc/eliza' });
-              return {
-                service: service,
-                method: method,
-                header: new Headers(),
-                trailer: new Headers(),
-                stream: false,
-                // Output of running `buf curl https://buf.build/buf.reflect.v1beta1.FileDescriptorSetService/GetFileDescriptorSet --data '{"module": "buf.build/connectrpc/eliza"}' --schema buf.build/bufbuild/reflect -H 'Authorization: Bearer buf-token'`
-                message: method.O.fromJsonString(
-                  '{"fileDescriptorSet":{"file":[{"name":"connectrpc/eliza/v1/eliza.proto","package":"connectrpc.eliza.v1","messageType":[{"name":"SayRequest","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"SayResponse","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"ConverseRequest","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"ConverseResponse","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"IntroduceRequest","field":[{"name":"name","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"name"}]},{"name":"IntroduceResponse","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]}],"service":[{"name":"ElizaService","method":[{"name":"Say","inputType":".connectrpc.eliza.v1.SayRequest","outputType":".connectrpc.eliza.v1.SayResponse","options":{"idempotencyLevel":"NO_SIDE_EFFECTS"}},{"name":"Converse","inputType":".connectrpc.eliza.v1.ConverseRequest","outputType":".connectrpc.eliza.v1.ConverseResponse","options":{},"clientStreaming":true,"serverStreaming":true},{"name":"Introduce","inputType":".connectrpc.eliza.v1.IntroduceRequest","outputType":".connectrpc.eliza.v1.IntroduceResponse","options":{},"serverStreaming":true}]}],"syntax":"proto3"}]},"version":"233fca715f49425581ec0a1b660be886"}'
-                ),
-              };
-            },
-          };
-        }
-      );
+      (createConnectTransport as unknown as vi.Mock).mockImplementation(options => {
+        expect(options.baseUrl).toStrictEqual('https://buf.build');
+        return {
+          async unary(
+            service: ServiceType,
+            method: MethodInfo,
+            _: AbortSignal | undefined,
+            __: number | undefined,
+            header: HeadersInit | undefined,
+            input: PartialMessage<AnyMessage>,
+          ): Promise<UnaryResponse> {
+            expect(new Headers(header).get('Authorization')).toStrictEqual('Bearer TEST_KEY');
+            expect(input).toStrictEqual({ module: 'buf.build/connectrpc/eliza' });
+            return {
+              service: service,
+              method: method,
+              header: new Headers(),
+              trailer: new Headers(),
+              stream: false,
+              // Output of running `buf curl https://buf.build/buf.reflect.v1beta1.FileDescriptorSetService/GetFileDescriptorSet --data '{"module": "buf.build/connectrpc/eliza"}' --schema buf.build/bufbuild/reflect -H 'Authorization: Bearer buf-token'`
+              message: method.O.fromJsonString(
+                '{"fileDescriptorSet":{"file":[{"name":"connectrpc/eliza/v1/eliza.proto","package":"connectrpc.eliza.v1","messageType":[{"name":"SayRequest","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"SayResponse","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"ConverseRequest","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"ConverseResponse","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]},{"name":"IntroduceRequest","field":[{"name":"name","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"name"}]},{"name":"IntroduceResponse","field":[{"name":"sentence","number":1,"label":"LABEL_OPTIONAL","type":"TYPE_STRING","jsonName":"sentence"}]}],"service":[{"name":"ElizaService","method":[{"name":"Say","inputType":".connectrpc.eliza.v1.SayRequest","outputType":".connectrpc.eliza.v1.SayResponse","options":{"idempotencyLevel":"NO_SIDE_EFFECTS"}},{"name":"Converse","inputType":".connectrpc.eliza.v1.ConverseRequest","outputType":".connectrpc.eliza.v1.ConverseResponse","options":{},"clientStreaming":true,"serverStreaming":true},{"name":"Introduce","inputType":".connectrpc.eliza.v1.IntroduceRequest","outputType":".connectrpc.eliza.v1.IntroduceResponse","options":{},"serverStreaming":true}]}],"syntax":"proto3"}]},"version":"233fca715f49425581ec0a1b660be886"}',
+              ),
+            };
+          },
+        };
+      });
       const methods = await loadMethodsFromReflection({
         url: 'foo.com',
         metadata: [],
@@ -199,25 +198,23 @@ describe('loadMethodsFromReflection', () => {
           module: 'buf.build/connectrpc/eliza',
         },
       });
-      expect(methods).toStrictEqual(
-        [
-           {
-            example: undefined,
-            fullPath: '/connectrpc.eliza.v1.ElizaService/Say',
-            type: 'unary',
-          },
-           {
-            example: undefined,
-            fullPath: '/connectrpc.eliza.v1.ElizaService/Converse',
-            type: 'bidi',
-          },
-           {
-            example: undefined,
-            fullPath: '/connectrpc.eliza.v1.ElizaService/Introduce',
-            type: 'server',
-          },
-        ]
-      );
+      expect(methods).toStrictEqual([
+        {
+          example: undefined,
+          fullPath: '/connectrpc.eliza.v1.ElizaService/Say',
+          type: 'unary',
+        },
+        {
+          example: undefined,
+          fullPath: '/connectrpc.eliza.v1.ElizaService/Converse',
+          type: 'bidi',
+        },
+        {
+          example: undefined,
+          fullPath: '/connectrpc.eliza.v1.ElizaService/Introduce',
+          type: 'server',
+        },
+      ]);
     });
   });
 });
diff --git a/packages/insomnia/src/main/ipc/automock.ts b/packages/insomnia/src/main/ipc/automock.ts
index 31140d4234..fc17726f16 100644
--- a/packages/insomnia/src/main/ipc/automock.ts
+++ b/packages/insomnia/src/main/ipc/automock.ts
@@ -1,6 +1,6 @@
 // From https://github.com/bloomrpc/bloomrpc-mock/blob/master/src/automock.ts
 // TODO simplify this and rename to generate example payload
-import type { Field, Message, OneOf, Service} from 'protobufjs';
+import type { Field, Message, OneOf, Service } from 'protobufjs';
 import { Enum, MapField, Type } from 'protobufjs';
 import { v4 } from 'uuid';
 
@@ -13,51 +13,31 @@ export type ServiceMethodsPayload = Record<string, () => MethodPayload>;
 
 const enum MethodType {
   request,
-  response
+  response,
 }
 
 /**
  * Mock method response
  */
-export function mockResponseMethods(
-  service: Service,
-  mocks?: void | {},
-) {
-  return mockMethodReturnType(
-    service,
-    MethodType.response,
-    mocks
-  );
+export function mockResponseMethods(service: Service, mocks?: void | {}) {
+  return mockMethodReturnType(service, MethodType.response, mocks);
 }
 
 /**
  * Mock methods request
  */
-export function mockRequestMethods(
-  service: Service,
-  mocks?: void | {},
-) {
-  return mockMethodReturnType(
-    service,
-    MethodType.request,
-    mocks
-  );
+export function mockRequestMethods(service: Service, mocks?: void | {}) {
+  return mockMethodReturnType(service, MethodType.request, mocks);
 }
 
-function mockMethodReturnType(
-  service: Service,
-  type: MethodType,
-  mocks?: void | {},
-): ServiceMethodsPayload {
+function mockMethodReturnType(service: Service, type: MethodType, mocks?: void | {}): ServiceMethodsPayload {
   const root = service.root;
   const serviceMethods = service.methods;
 
   return Object.keys(serviceMethods).reduce((methods: ServiceMethodsPayload, method: string) => {
     const serviceMethod = serviceMethods[method];
 
-    const methodMessageType = type === MethodType.request
-      ? serviceMethod.requestType
-      : serviceMethod.responseType;
+    const methodMessageType = type === MethodType.request ? serviceMethod.requestType : serviceMethod.responseType;
 
     const messageType = root.lookupType(methodMessageType);
 
@@ -136,8 +116,7 @@ function mockField(field: Field, stackDepth: StackDepth): any {
 
     return mockField(resolvedField, stackDepth);
   }
-    return mockPropertyValue;
-
+  return mockPropertyValue;
 }
 
 function mockMapField(field: MapField, stackDepth: StackDepth): any {
@@ -160,7 +139,6 @@ function mockMapField(field: MapField, stackDepth: StackDepth): any {
     } else if (resolvedType === null) {
       mockPropertyValue = {};
     }
-
   }
 
   return {
@@ -173,9 +151,7 @@ function isProtoType(resolvedType: Enum | Type | null): resolvedType is Type {
     return false;
   }
   const fieldsArray: keyof Type = 'fieldsArray';
-  return resolvedType instanceof Type || (
-    fieldsArray in resolvedType && Array.isArray(resolvedType[fieldsArray])
-  );
+  return resolvedType instanceof Type || (fieldsArray in resolvedType && Array.isArray(resolvedType[fieldsArray]));
 }
 
 function pickOneOf(oneofs: OneOf[], stackDepth: StackDepth) {
diff --git a/packages/insomnia/src/main/ipc/electron.ts b/packages/insomnia/src/main/ipc/electron.ts
index dd5f00c7db..5958207952 100644
--- a/packages/insomnia/src/main/ipc/electron.ts
+++ b/packages/insomnia/src/main/ipc/electron.ts
@@ -1,4 +1,10 @@
-import type { IpcMainEvent, IpcMainInvokeEvent, MenuItemConstructorOptions, OpenDialogOptions, SaveDialogOptions } from 'electron';
+import type {
+  IpcMainEvent,
+  IpcMainInvokeEvent,
+  MenuItemConstructorOptions,
+  OpenDialogOptions,
+  SaveDialogOptions,
+} from 'electron';
 import { app, BrowserWindow, clipboard, dialog, ipcMain, Menu, shell } from 'electron';
 
 import { fnOrString } from '../../common/misc';
@@ -8,7 +14,7 @@ import { localTemplateTags } from '../../ui/components/templating/local-template
 import { invariant } from '../../utils/invariant';
 
 export type HandleChannels =
-  'authorizeUserInWindow'
+  | 'authorizeUserInWindow'
   | 'backup'
   | 'curl.event.findMany'
   | 'curl.open'
@@ -72,13 +78,10 @@ export type HandleChannels =
 
 export const ipcMainHandle = (
   channel: HandleChannels,
-  listener: (
-    event: IpcMainInvokeEvent,
-    ...args: any[]
-  ) => Promise<void> | any
+  listener: (event: IpcMainInvokeEvent, ...args: any[]) => Promise<void> | any,
 ) => ipcMain.handle(channel, listener);
 export type MainOnChannels =
-  'cancelCurlRequest'
+  | 'cancelCurlRequest'
   | 'clear'
   | 'curl.close'
   | 'curl.closeAll'
@@ -113,7 +116,7 @@ export type MainOnChannels =
   | 'startExecution';
 
 export type RendererOnChannels =
-  'clear-all-models'
+  | 'clear-all-models'
   | 'clear-model'
   | 'nunjucks-context-menu-command'
   | 'contextMenuCommand'
@@ -134,18 +137,12 @@ export type RendererOnChannels =
 
 export const ipcMainOn = (
   channel: MainOnChannels,
-  listener: (
-    event: IpcMainEvent,
-    ...args: any[]
-  ) => Promise<void> | any
+  listener: (event: IpcMainEvent, ...args: any[]) => Promise<void> | any,
 ) => ipcMain.on(channel, listener);
 export type OnceChannels = 'halfSecondAfterAppStart' | 'landingPageRendered';
 export const ipcMainOnce = (
   channel: OnceChannels,
-  listener: (
-    event: IpcMainEvent,
-    ...args: any[]
-  ) => Promise<void> | any
+  listener: (event: IpcMainEvent, ...args: any[]) => Promise<void> | any,
 ) => ipcMain.once(channel, listener);
 
 const getTemplateValue = (arg: NunjucksParsedTagArg) => {
@@ -158,97 +155,111 @@ const getTemplateValue = (arg: NunjucksParsedTagArg) => {
   return arg.defaultValue;
 };
 export function registerElectronHandlers() {
-  ipcMainOn('show-nunjucks-context-menu', (event, options: { key: string; nunjucksTag: ReturnType<typeof extractNunjucksTagFromCoords> }) => {
-    const { key, nunjucksTag } = options;
-    const sendNunjuckTagContextMsg = (type: NunjucksTagContextMenuAction) => {
-      event.sender.send('nunjucks-context-menu-command', { key, nunjucksTag: { ...nunjucksTag, type } });
-    };
-    try {
-      const baseTemplate: MenuItemConstructorOptions[] = nunjucksTag ?
-        [
-          {
-            label: 'Edit',
-            click: () => sendNunjuckTagContextMsg('edit'),
-          },
-          {
-            label: 'Copy',
-            click: () => {
-              clipboard.writeText(nunjucksTag.template);
-            },
-          },
-          {
-            label: 'Cut',
-            click: () => {
-              clipboard.writeText(nunjucksTag.template);
-              sendNunjuckTagContextMsg('delete');
-            },
-          },
-          {
-            label: 'Delete',
-            click: () => sendNunjuckTagContextMsg('delete'),
-          },
-          { type: 'separator' },
-        ] :
-        [
-          {
-            role: 'cut',
-          },
-          {
-            role: 'copy',
-          },
-          {
-            role: 'paste',
-          },
-          { type: 'separator' },
-        ];
-      const localTemplate: MenuItemConstructorOptions[] = localTemplateTags
-        // sort alphabetically
-        .sort((a, b) => fnOrString(a.templateTag.displayName).localeCompare(fnOrString(b.templateTag.displayName)))
-        .map(l => {
-          const actions = l.templateTag.args?.[0];
-          const needsEnterprisePlan = l.templateTag.needsEnterprisePlan || false;
-          const additionalArgs = l.templateTag.args?.slice(1);
-          const hasSubmenu = actions?.options?.length;
-          return {
-            label: fnOrString(l.templateTag.displayName),
-            ...(!hasSubmenu ?
+  ipcMainOn(
+    'show-nunjucks-context-menu',
+    (event, options: { key: string; nunjucksTag: ReturnType<typeof extractNunjucksTagFromCoords> }) => {
+      const { key, nunjucksTag } = options;
+      const sendNunjuckTagContextMsg = (type: NunjucksTagContextMenuAction) => {
+        event.sender.send('nunjucks-context-menu-command', { key, nunjucksTag: { ...nunjucksTag, type } });
+      };
+      try {
+        const baseTemplate: MenuItemConstructorOptions[] = nunjucksTag
+          ? [
               {
+                label: 'Edit',
+                click: () => sendNunjuckTagContextMsg('edit'),
+              },
+              {
+                label: 'Copy',
                 click: () => {
-                  const tag = `{% ${l.templateTag.name} ${l.templateTag.args?.map(getTemplateValue).join(', ')} %}`;
-                  const displayName = l.templateTag.displayName;
-                  event.sender.send('nunjucks-context-menu-command', { key, tag, needsEnterprisePlan, displayName });
+                  clipboard.writeText(nunjucksTag.template);
                 },
-              } :
+              },
               {
-                submenu: actions?.options?.map(action => ({
-                  label: fnOrString(action.displayName),
-                  click: () => {
-                    const additionalTagFields = additionalArgs.length ? ', ' + additionalArgs.map(getTemplateValue).join(', ') : '';
-                    const displayName = action.displayName;
-                    const tag = `{% ${l.templateTag.name} '${action.value}'${additionalTagFields} %}`;
-                    event.sender.send('nunjucks-context-menu-command', { key, tag, needsEnterprisePlan, displayName });
-                  },
-                })),
-              }),
-          };
-        });
-      const menu = Menu.buildFromTemplate([...baseTemplate, ...localTemplate]);
-      const win = BrowserWindow.fromWebContents(event.sender);
-      invariant(win, 'expected window');
-      menu.popup({ window: win });
-    } catch (e) {
-      console.error(e);
-    }
-  });
+                label: 'Cut',
+                click: () => {
+                  clipboard.writeText(nunjucksTag.template);
+                  sendNunjuckTagContextMsg('delete');
+                },
+              },
+              {
+                label: 'Delete',
+                click: () => sendNunjuckTagContextMsg('delete'),
+              },
+              { type: 'separator' },
+            ]
+          : [
+              {
+                role: 'cut',
+              },
+              {
+                role: 'copy',
+              },
+              {
+                role: 'paste',
+              },
+              { type: 'separator' },
+            ];
+        const localTemplate: MenuItemConstructorOptions[] = localTemplateTags
+          // sort alphabetically
+          .sort((a, b) => fnOrString(a.templateTag.displayName).localeCompare(fnOrString(b.templateTag.displayName)))
+          .map(l => {
+            const actions = l.templateTag.args?.[0];
+            const needsEnterprisePlan = l.templateTag.needsEnterprisePlan || false;
+            const additionalArgs = l.templateTag.args?.slice(1);
+            const hasSubmenu = actions?.options?.length;
+            return {
+              label: fnOrString(l.templateTag.displayName),
+              ...(!hasSubmenu
+                ? {
+                    click: () => {
+                      const tag = `{% ${l.templateTag.name} ${l.templateTag.args?.map(getTemplateValue).join(', ')} %}`;
+                      const displayName = l.templateTag.displayName;
+                      event.sender.send('nunjucks-context-menu-command', {
+                        key,
+                        tag,
+                        needsEnterprisePlan,
+                        displayName,
+                      });
+                    },
+                  }
+                : {
+                    submenu: actions?.options?.map(action => ({
+                      label: fnOrString(action.displayName),
+                      click: () => {
+                        const additionalTagFields = additionalArgs.length
+                          ? ', ' + additionalArgs.map(getTemplateValue).join(', ')
+                          : '';
+                        const displayName = action.displayName;
+                        const tag = `{% ${l.templateTag.name} '${action.value}'${additionalTagFields} %}`;
+                        event.sender.send('nunjucks-context-menu-command', {
+                          key,
+                          tag,
+                          needsEnterprisePlan,
+                          displayName,
+                        });
+                      },
+                    })),
+                  }),
+            };
+          });
+        const menu = Menu.buildFromTemplate([...baseTemplate, ...localTemplate]);
+        const win = BrowserWindow.fromWebContents(event.sender);
+        invariant(win, 'expected window');
+        menu.popup({ window: win });
+      } catch (e) {
+        console.error(e);
+      }
+    },
+  );
   ipcMainOn('setMenuBarVisibility', (_, visible: boolean) => {
-    BrowserWindow.getAllWindows()
-      .forEach(window => {
-        // the `setMenuBarVisibility` signature uses `visible` semantics
-        window.setMenuBarVisibility(visible);
-        // the `setAutoHideMenu` signature uses `hide` semantics
-        const hide = !visible;
-        window.setAutoHideMenuBar(hide);
-      });
+    BrowserWindow.getAllWindows().forEach(window => {
+      // the `setMenuBarVisibility` signature uses `visible` semantics
+      window.setMenuBarVisibility(visible);
+      // the `setAutoHideMenu` signature uses `hide` semantics
+      const hide = !visible;
+      window.setAutoHideMenuBar(hide);
+    });
   });
   ipcMainHandle('showOpenDialog', async (_, options: OpenDialogOptions) => {
     const { filePaths, canceled } = await dialog.showOpenDialog(options);
@@ -276,7 +287,7 @@ export function registerElectronHandlers() {
     clipboard.clear();
   });
 
-  ipcMainOn('getPath', (event, name: Parameters<typeof Electron.app['getPath']>[0]) => {
+  ipcMainOn('getPath', (event, name: Parameters<(typeof Electron.app)['getPath']>[0]) => {
     event.returnValue = app.getPath(name);
   });
 
@@ -284,16 +295,19 @@ export function registerElectronHandlers() {
     event.returnValue = app.getAppPath();
   });
 
-  ipcMainOn('showContextMenu', (event, options: { key: string; menuItems: MenuItemConstructorOptions[]; extra?: Record<string, any> }) => {
-    const menuItems = options.menuItems.map(item => {
-      return {
-        ...item,
-        click: () => {
-          event.sender.send('contextMenuCommand', { key: options.key, label: item.label, extra: options.extra });
-        },
-      };
-    });
-    const menu = Menu.buildFromTemplate(menuItems);
-    menu.popup();
-  });
+  ipcMainOn(
+    'showContextMenu',
+    (event, options: { key: string; menuItems: MenuItemConstructorOptions[]; extra?: Record<string, any> }) => {
+      const menuItems = options.menuItems.map(item => {
+        return {
+          ...item,
+          click: () => {
+            event.sender.send('contextMenuCommand', { key: options.key, label: item.label, extra: options.extra });
+          },
+        };
+      });
+      const menu = Menu.buildFromTemplate(menuItems);
+      menu.popup();
+    },
+  );
 }
diff --git a/packages/insomnia/src/main/ipc/extractPostmanDataDump.ts b/packages/insomnia/src/main/ipc/extractPostmanDataDump.ts
index d32eb3df7d..891da0cbf6 100644
--- a/packages/insomnia/src/main/ipc/extractPostmanDataDump.ts
+++ b/packages/insomnia/src/main/ipc/extractPostmanDataDump.ts
@@ -43,25 +43,27 @@ export default async function extractPostmanDataDumpHandler(_event: unknown, dat
 
   // get collections and environments listed in archive.json
   try {
-    files.filter(file => file !== archiveJsonFile).forEach(file => {
-      const id = path.basename(file.path, '.json');
-      const oriFileName = path.basename(file.path);
-      if (id in archiveJsonData.collection) {
-        collectionList.push({
-          contentStr: file.data.toString(),
-          oriFileName,
-        });
-      } else if (id in archiveJsonData.environment) {
-        const fileContentStr = file.data.toString();
-        const fileJson = JSON.parse(fileContentStr);
-        // Set the scope to environment, because it's not set in the file
-        fileJson._postman_variable_scope = 'environment';
-        envList.push({
-          contentStr: JSON.stringify(fileJson),
-          oriFileName,
-        });
-      }
-    });
+    files
+      .filter(file => file !== archiveJsonFile)
+      .forEach(file => {
+        const id = path.basename(file.path, '.json');
+        const oriFileName = path.basename(file.path);
+        if (id in archiveJsonData.collection) {
+          collectionList.push({
+            contentStr: file.data.toString(),
+            oriFileName,
+          });
+        } else if (id in archiveJsonData.environment) {
+          const fileContentStr = file.data.toString();
+          const fileJson = JSON.parse(fileContentStr);
+          // Set the scope to environment, because it's not set in the file
+          fileJson._postman_variable_scope = 'environment';
+          envList.push({
+            contentStr: JSON.stringify(fileJson),
+            oriFileName,
+          });
+        }
+      });
   } catch (err) {
     return {
       err: 'Failed to parse collection or environment files',
diff --git a/packages/insomnia/src/main/ipc/grpc.ts b/packages/insomnia/src/main/ipc/grpc.ts
index 1e730d7875..650cd6a2ef 100644
--- a/packages/insomnia/src/main/ipc/grpc.ts
+++ b/packages/insomnia/src/main/ipc/grpc.ts
@@ -106,24 +106,19 @@ interface MethodDefs {
   example?: Record<string, any>;
 }
 
-const getMethodsFromReflectionServer = async (
-  reflectionApi: GrpcRequest['reflectionApi']
-): Promise<MethodDefs[]> => {
+const getMethodsFromReflectionServer = async (reflectionApi: GrpcRequest['reflectionApi']): Promise<MethodDefs[]> => {
   const { url, module, apiKey } = reflectionApi;
-  const GetFileDescriptorSetRequest = proto3.makeMessageType(
-    'buf.reflect.v1beta1.GetFileDescriptorSetRequest',
-    () => [
-      { no: 1, name: 'module', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
-      { no: 2, name: 'version', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
-      {
-        no: 3,
-        name: 'symbols',
-        kind: 'scalar',
-        T: 9 /* ScalarType.STRING */,
-        repeated: true,
-      },
-    ]
-  );
+  const GetFileDescriptorSetRequest = proto3.makeMessageType('buf.reflect.v1beta1.GetFileDescriptorSetRequest', () => [
+    { no: 1, name: 'module', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
+    { no: 2, name: 'version', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
+    {
+      no: 3,
+      name: 'symbols',
+      kind: 'scalar',
+      T: 9 /* ScalarType.STRING */,
+      repeated: true,
+    },
+  ]);
   const GetFileDescriptorSetResponse = proto3.makeMessageType(
     'buf.reflect.v1beta1.GetFileDescriptorSetResponse',
     () => [
@@ -134,7 +129,7 @@ const getMethodsFromReflectionServer = async (
         T: ProtobufEsFileDescriptorSet,
       },
       { no: 2, name: 'version', kind: 'scalar', T: 9 /* ScalarType.STRING */ },
-    ]
+    ],
   );
   const FileDescriptorSetService = {
     typeName: 'buf.reflect.v1beta1.FileDescriptorSetService',
@@ -164,15 +159,13 @@ const getMethodsFromReflectionServer = async (
       },
       {
         headers,
-      }
+      },
     );
     const methodDefs: MethodDefs[] = [];
     if (res.fileDescriptorSet === undefined) {
       return [];
     }
-    const packageDefinition = protoLoader.loadFileDescriptorSetFromBuffer(
-      new Buffer(res.fileDescriptorSet.toBinary())
-    );
+    const packageDefinition = protoLoader.loadFileDescriptorSetFromBuffer(new Buffer(res.fileDescriptorSet.toBinary()));
     for (const definition of Object.values(packageDefinition)) {
       const serviceDefinition = asServiceDefinition(definition);
       if (serviceDefinition === null) {
@@ -189,7 +182,7 @@ const getMethodsFromReflectionServer = async (
         throw new Error('Invalid reflection server api key');
       case Code.NotFound:
         throw new Error(
-          "The reflection server api key doesn't have access to the module or the module does not exists"
+          "The reflection server api key doesn't have access to the module or the module does not exists",
         );
       default:
         throw error;
@@ -214,7 +207,7 @@ const getMethodsFromReflection = async (
     getChannelCredentials({ url: host, caCertificate, clientCert, clientKey, rejectUnauthorized }),
     grpcOptions,
     filterDisabledOrInvalidMetaData(metadata),
-    path
+    path,
   );
   const services = await client.listServices();
   const methodsPromises = services.map(async service => {
@@ -222,25 +215,15 @@ const getMethodsFromReflection = async (
     const fullService = fileContainingSymbol.lookupService(service);
     const mockedRequestMethods = mockRequestMethods(fullService);
     const descriptorMessage = fileContainingSymbol.toDescriptor('proto3');
-    const packageDefinition = protoLoader.loadFileDescriptorSetFromObject(
-      descriptorMessage,
-      {}
-    );
+    const packageDefinition = protoLoader.loadFileDescriptorSetFromObject(descriptorMessage, {});
     const tryToGetMethods = () => {
       try {
         console.log('[grpc] loading service from reflection:', service);
-        const serviceDefinition = asServiceDefinition(
-          packageDefinition[service]
-        );
-        invariant(
-          serviceDefinition,
-          `'${service}' was not a valid ServiceDefinition`
-        );
+        const serviceDefinition = asServiceDefinition(packageDefinition[service]);
+        invariant(serviceDefinition, `'${service}' was not a valid ServiceDefinition`);
         const serviceMethods = Object.values(serviceDefinition);
         return serviceMethods.map(m => {
-          const methodName = Object.keys(mockedRequestMethods).find(name =>
-            m.path.endsWith(`/${name}`)
-          );
+          const methodName = Object.keys(mockedRequestMethods).find(name => m.path.endsWith(`/${name}`));
           if (!methodName) {
             return m;
           }
@@ -291,10 +274,7 @@ export interface GrpcMethodInfo {
   example?: Record<string, any>;
 }
 
-export const getMethodType = ({
-  requestStream,
-  responseStream,
-}: any): GrpcMethodType => {
+export const getMethodType = ({ requestStream, responseStream }: any): GrpcMethodType => {
   if (requestStream && responseStream) {
     return 'bidi';
   }
@@ -313,10 +293,7 @@ export const getSelectedMethod = async (
 ): Promise<MethodDefs | undefined> => {
   if (request.protoFileId) {
     const protoFile = await models.protoFile.getById(request.protoFileId);
-    invariant(
-      protoFile?.protoText,
-      `No proto file found for gRPC request ${request._id}`
-    );
+    invariant(protoFile?.protoText, `No proto file found for gRPC request ${request._id}`);
     const { filePath, dirs } = await writeProtoFile(protoFile);
     const methods = await loadMethodsFromFilePath(filePath, dirs);
     invariant(methods, 'No methods found');
@@ -336,9 +313,7 @@ export const getSelectedMethod = async (
   return methods.find(c => c.path === request.protoMethodName);
 };
 export const getMethodsFromPackageDefinition = (packageDefinition: PackageDefinition): MethodDefs[] => {
-  return Object.values(packageDefinition)
-    .filter(isServiceDefinition)
-    .flatMap(Object.values);
+  return Object.values(packageDefinition).filter(isServiceDefinition).flatMap(Object.values);
 };
 
 const isServiceDefinition = (definition: AnyDefinition): definition is ServiceDefinition => {
@@ -357,13 +332,32 @@ const isEnumDefinition = (definition: AnyDefinition): definition is EnumTypeDefi
   return (definition as EnumTypeDefinition).format === 'Protocol Buffer 3 EnumDescriptorProto';
 };
 
-const getChannelCredentials = ({ url, rejectUnauthorized, clientCert, clientKey, caCertificate }: { url: string; rejectUnauthorized: boolean; clientCert?: string; clientKey?: string; caCertificate?: string }): ChannelCredentials => {
+const getChannelCredentials = ({
+  url,
+  rejectUnauthorized,
+  clientCert,
+  clientKey,
+  caCertificate,
+}: {
+  url: string;
+  rejectUnauthorized: boolean;
+  clientCert?: string;
+  clientKey?: string;
+  caCertificate?: string;
+}): ChannelCredentials => {
   if (url.toLowerCase().startsWith('grpcs:')) {
     if (caCertificate && clientKey && clientCert) {
-      return ChannelCredentials.createSsl(Buffer.from(caCertificate, 'utf8'), Buffer.from(clientKey, 'utf8'), Buffer.from(clientCert, 'utf8'), { rejectUnauthorized });
+      return ChannelCredentials.createSsl(
+        Buffer.from(caCertificate, 'utf8'),
+        Buffer.from(clientKey, 'utf8'),
+        Buffer.from(clientCert, 'utf8'),
+        { rejectUnauthorized },
+      );
     }
     if (clientKey && clientCert) {
-      return ChannelCredentials.createSsl(null, Buffer.from(clientKey, 'utf8'), Buffer.from(clientCert, 'utf8'), { rejectUnauthorized });
+      return ChannelCredentials.createSsl(null, Buffer.from(clientKey, 'utf8'), Buffer.from(clientCert, 'utf8'), {
+        rejectUnauthorized,
+      });
     }
     if (caCertificate) {
       return ChannelCredentials.createSsl(Buffer.from(caCertificate, 'utf8'), null, null, { rejectUnauthorized });
@@ -373,95 +367,102 @@ const getChannelCredentials = ({ url, rejectUnauthorized, clientCert, clientKey,
   return ChannelCredentials.createInsecure();
 };
 
-export const start = (
-  event: IpcMainEvent,
-  ipcParams: GrpcIpcRequestParams,
-) => {
+export const start = (event: IpcMainEvent, ipcParams: GrpcIpcRequestParams) => {
   const { request, rejectUnauthorized, clientCert, clientKey, caCertificate } = ipcParams;
-  getSelectedMethod(request, ipcParams)?.then(method => {
-    if (!method) {
-      event.reply('grpc.error', request._id, new Error(`The gRPC method ${request.protoMethodName} could not be found`));
-      return;
-    }
-    const methodType = getMethodType(method);
-    // Create client
-    const { url, path } = parseGrpcUrl(request.url);
-
-    if (!url) {
-      event.reply('grpc.error', request._id, new Error('URL not specified'));
-      return undefined;
-    }
-    // @ts-expect-error -- TSCONVERSION second argument should be provided, send an empty string? Needs testing
-    const Client = makeGenericClientConstructor({});
-    const creds = getChannelCredentials({ url: request.url, rejectUnauthorized, clientCert, clientKey, caCertificate });
-    const client = new Client(url, creds);
-    if (!client) {
-      return;
-    }
-
-    try {
-      const messageBody = JSON.parse(request.body.text || '');
-      const requestPath = path + method.path;
-      if (methodType === 'unary') {
-        const unaryCall = client.makeUnaryRequest(
-          requestPath,
-          method.requestSerialize,
-          method.responseDeserialize,
-          messageBody,
-          filterDisabledOrInvalidMetaData(request.metadata),
-          onUnaryResponse(event, request._id),
+  getSelectedMethod(request, ipcParams)
+    ?.then(method => {
+      if (!method) {
+        event.reply(
+          'grpc.error',
+          request._id,
+          new Error(`The gRPC method ${request.protoMethodName} could not be found`),
         );
-        unaryCall.on('status', (status: StatusObject) => event.reply('grpc.status', request._id, status));
-        grpcCalls.set(request._id, unaryCall);
-      } else if (methodType === 'client') {
-        const clientCall = client.makeClientStreamRequest(
-          requestPath,
-          method.requestSerialize,
-          method.responseDeserialize,
-          filterDisabledOrInvalidMetaData(request.metadata),
-          onUnaryResponse(event, request._id));
-        clientCall.on('status', (status: StatusObject) => event.reply('grpc.status', request._id, status));
-        grpcCalls.set(request._id, clientCall);
-      } else if (methodType === 'server') {
-        const serverCall = client.makeServerStreamRequest(
-          requestPath,
-          method.requestSerialize,
-          method.responseDeserialize,
-          messageBody,
-          filterDisabledOrInvalidMetaData(request.metadata),
-        );
-        onStreamingResponse(event, serverCall, request._id);
-        grpcCalls.set(request._id, serverCall);
-      } else if (methodType === 'bidi') {
-        const bidiCall = client.makeBidiStreamRequest(
-          requestPath,
-          method.requestSerialize,
-          method.responseDeserialize,
-          filterDisabledOrInvalidMetaData(request.metadata));
-        onStreamingResponse(event, bidiCall, request._id);
-        grpcCalls.set(request._id, bidiCall);
-      } else {
-        throw new Error(`Unsupported method type: ${methodType}`);
+        return;
       }
-      // Update request stats
-      models.stats.incrementExecutedRequests();
-      event.reply('grpc.start', request._id);
+      const methodType = getMethodType(method);
+      // Create client
+      const { url, path } = parseGrpcUrl(request.url);
 
-    } catch (error) {
-      // TODO: How do we want to handle this case, where the message cannot be parsed?
-      //  Currently an error will be shown, but the stream will not be cancelled.
+      if (!url) {
+        event.reply('grpc.error', request._id, new Error('URL not specified'));
+        return undefined;
+      }
+      // @ts-expect-error -- TSCONVERSION second argument should be provided, send an empty string? Needs testing
+      const Client = makeGenericClientConstructor({});
+      const creds = getChannelCredentials({
+        url: request.url,
+        rejectUnauthorized,
+        clientCert,
+        clientKey,
+        caCertificate,
+      });
+      const client = new Client(url, creds);
+      if (!client) {
+        return;
+      }
+
+      try {
+        const messageBody = JSON.parse(request.body.text || '');
+        const requestPath = path + method.path;
+        if (methodType === 'unary') {
+          const unaryCall = client.makeUnaryRequest(
+            requestPath,
+            method.requestSerialize,
+            method.responseDeserialize,
+            messageBody,
+            filterDisabledOrInvalidMetaData(request.metadata),
+            onUnaryResponse(event, request._id),
+          );
+          unaryCall.on('status', (status: StatusObject) => event.reply('grpc.status', request._id, status));
+          grpcCalls.set(request._id, unaryCall);
+        } else if (methodType === 'client') {
+          const clientCall = client.makeClientStreamRequest(
+            requestPath,
+            method.requestSerialize,
+            method.responseDeserialize,
+            filterDisabledOrInvalidMetaData(request.metadata),
+            onUnaryResponse(event, request._id),
+          );
+          clientCall.on('status', (status: StatusObject) => event.reply('grpc.status', request._id, status));
+          grpcCalls.set(request._id, clientCall);
+        } else if (methodType === 'server') {
+          const serverCall = client.makeServerStreamRequest(
+            requestPath,
+            method.requestSerialize,
+            method.responseDeserialize,
+            messageBody,
+            filterDisabledOrInvalidMetaData(request.metadata),
+          );
+          onStreamingResponse(event, serverCall, request._id);
+          grpcCalls.set(request._id, serverCall);
+        } else if (methodType === 'bidi') {
+          const bidiCall = client.makeBidiStreamRequest(
+            requestPath,
+            method.requestSerialize,
+            method.responseDeserialize,
+            filterDisabledOrInvalidMetaData(request.metadata),
+          );
+          onStreamingResponse(event, bidiCall, request._id);
+          grpcCalls.set(request._id, bidiCall);
+        } else {
+          throw new Error(`Unsupported method type: ${methodType}`);
+        }
+        // Update request stats
+        models.stats.incrementExecutedRequests();
+        event.reply('grpc.start', request._id);
+      } catch (error) {
+        // TODO: How do we want to handle this case, where the message cannot be parsed?
+        //  Currently an error will be shown, but the stream will not be cancelled.
+        event.reply('grpc.error', request._id, error);
+      }
+      return;
+    })
+    .catch(error => {
       event.reply('grpc.error', request._id, error);
-    }
-    return;
-  }).catch(error => {
-    event.reply('grpc.error', request._id, error);
-  });
+    });
 };
 
-export const sendMessage = (
-  event: IpcMainEvent,
-  { body, requestId }: GrpcIpcMessageParams,
-) => {
+export const sendMessage = (event: IpcMainEvent, { body, requestId }: GrpcIpcMessageParams) => {
   try {
     const messageBody = JSON.parse(body.text || '');
     // HACK BUT DO NOT REMOVE
@@ -484,7 +485,11 @@ export const sendMessage = (
 export const commit = (requestId: string): void => grpcCalls.get(requestId)?.end();
 export const cancel = (requestId: string): void => grpcCalls.get(requestId)?.cancel();
 
-const onStreamingResponse = (event: IpcMainEvent, call: ClientReadableStream<any> | ClientDuplexStream<any, any>, requestId: string) => {
+const onStreamingResponse = (
+  event: IpcMainEvent,
+  call: ClientReadableStream<any> | ClientDuplexStream<any, any>,
+  requestId: string,
+) => {
   call.on('status', (status: StatusObject) => event.reply('grpc.status', requestId, status));
   call.on('data', data => event.reply('grpc.data', requestId, data));
   call.on('error', (error: ServiceError) => {
@@ -510,23 +515,24 @@ const onStreamingResponse = (event: IpcMainEvent, call: ClientReadableStream<any
   });
 };
 
-const onUnaryResponse = (event: IpcMainEvent, requestId: string) => (err: ServiceError | null, value?: Record<string, any>) => {
-  if (!err) {
-    event.reply('grpc.data', requestId, value);
-  }
-  if (err && err.code !== status.CANCELLED) {
-    event.reply('grpc.error', requestId, err);
-  }
-  event.reply('grpc.end', requestId);
-  // @ts-expect-error -- TSCONVERSION channel not found in call
-  const channel = grpcCalls.get(requestId)?.call?.call.channel;
-  if (channel) {
-    channel.close();
-  } else {
-    console.log(`[gRPC] failed to close channel for req=${requestId} because it was not found`);
-  }
-  grpcCalls.delete(requestId);
-};
+const onUnaryResponse =
+  (event: IpcMainEvent, requestId: string) => (err: ServiceError | null, value?: Record<string, any>) => {
+    if (!err) {
+      event.reply('grpc.data', requestId, value);
+    }
+    if (err && err.code !== status.CANCELLED) {
+      event.reply('grpc.error', requestId, err);
+    }
+    event.reply('grpc.end', requestId);
+    // @ts-expect-error -- TSCONVERSION channel not found in call
+    const channel = grpcCalls.get(requestId)?.call?.call.channel;
+    if (channel) {
+      channel.close();
+    } else {
+      console.log(`[gRPC] failed to close channel for req=${requestId} because it was not found`);
+    }
+    grpcCalls.delete(requestId);
+  };
 
 const filterDisabledOrInvalidMetaData = (metadata: GrpcRequestHeader[]): Metadata => {
   const grpcMetadata = new Metadata();
diff --git a/packages/insomnia/src/main/ipc/main.ts b/packages/insomnia/src/main/ipc/main.ts
index f6b6244bec..a4deb2c012 100644
--- a/packages/insomnia/src/main/ipc/main.ts
+++ b/packages/insomnia/src/main/ipc/main.ts
@@ -5,11 +5,11 @@ import { app, BrowserWindow, type IpcRendererEvent, type MenuItemConstructorOpti
 import fs from 'fs';
 import iconv from 'iconv-lite';
 
-import type { LandingPage} from '../../common/sentry';
+import type { LandingPage } from '../../common/sentry';
 import { APP_START_TIME, SentryMetrics } from '../../common/sentry';
 import type { HiddenBrowserWindowBridgeAPI } from '../../hidden-window';
 import * as models from '../../models';
-import type { SegmentEvent} from '../analytics';
+import type { SegmentEvent } from '../analytics';
 import { trackPageView, trackSegmentEvent } from '../analytics';
 import { authorizeUserInWindow } from '../authorizeUserInWindow';
 import { backup, restoreBackup } from '../backup';
@@ -17,7 +17,14 @@ import type { GitServiceAPI } from '../git-service';
 import installPlugin from '../install-plugin';
 import type { CurlBridgeAPI } from '../network/curl';
 import { cancelCurlRequest, curlRequest } from '../network/libcurl-promise';
-import { addExecutionStep, completeExecutionStep, getExecution, startExecution, type TimingStep, updateLatestStepName } from '../network/request-timing';
+import {
+  addExecutionStep,
+  completeExecutionStep,
+  getExecution,
+  startExecution,
+  type TimingStep,
+  updateLatestStepName,
+} from '../network/request-timing';
 import type { WebSocketBridgeAPI } from '../network/websocket';
 import { ipcMainHandle, ipcMainOn, ipcMainOnce, type RendererOnChannels } from './electron';
 import extractPostmanDataDumpHandler from './extractPostmanDataDump';
@@ -48,7 +55,11 @@ export interface RendererToMainBridgeAPI {
   trackSegmentEvent: (options: { event: string; properties?: Record<string, unknown> }) => void;
   trackPageView: (options: { name: string }) => void;
   showNunjucksContextMenu: (options: { key: string; nunjucksTag?: { template: string; range: MarkerRange } }) => void;
-  showContextMenu: (options: { key: string; menuItems: MenuItemConstructorOptions[]; extra?: Record<string, any> }) => void;
+  showContextMenu: (options: {
+    key: string;
+    menuItems: MenuItemConstructorOptions[];
+    extra?: Record<string, any>;
+  }) => void;
 
   database: {
     caCertificate: {
@@ -166,16 +177,19 @@ export function registerMainHandlers() {
     }
   });
 
-  ipcMainOnce('landingPageRendered', (_, { landingPage, tags = {} }: { landingPage: LandingPage; tags?: Record<string, string> }) => {
-    const duration = performance.now() - APP_START_TIME;
-    Sentry.metrics.distribution(SentryMetrics.APP_START_DURATION, duration, {
-      tags: {
-        landingPage,
-        ...tags,
-      },
-      unit: 'millisecond',
-    });
-  });
+  ipcMainOnce(
+    'landingPageRendered',
+    (_, { landingPage, tags = {} }: { landingPage: LandingPage; tags?: Record<string, string> }) => {
+      const duration = performance.now() - APP_START_TIME;
+      Sentry.metrics.distribution(SentryMetrics.APP_START_DURATION, duration, {
+        tags: {
+          landingPage,
+          ...tags,
+        },
+        unit: 'millisecond',
+      });
+    },
+  );
 
   ipcMainHandle('extractJsonFileFromPostmanDataDumpArchive', extractPostmanDataDumpHandler);
 }
diff --git a/packages/insomnia/src/main/network/curl.ts b/packages/insomnia/src/main/network/curl.ts
index 9ca7e1b23e..a2f90d526d 100644
--- a/packages/insomnia/src/main/network/curl.ts
+++ b/packages/insomnia/src/main/network/curl.ts
@@ -61,11 +61,7 @@ export interface CurlCloseEvent {
   code: number;
 }
 
-export type CurlEvent =
-  | CurlOpenEvent
-  | CurlMessageEvent
-  | CurlErrorEvent
-  | CurlCloseEvent;
+export type CurlEvent = CurlOpenEvent | CurlMessageEvent | CurlErrorEvent | CurlCloseEvent;
 
 const CurlConnections = new Map<string, Curl>();
 const eventLogFileStreams = new Map<string, fs.WriteStream>();
@@ -77,9 +73,7 @@ const parseHeadersAndBuildTimeline = (url: string, headersWithStatus: HeaderInfo
   const statusCode = result?.code || 0;
   const httpVersion = result?.version;
   const responseHeaders = Object.entries(headers).map(([name, value]) => ({ name, value: value?.toString() || '' }));
-  const timeline = [
-    { value: `Preparing request to ${url}`, name: 'Text', timestamp: Date.now() },
-  ];
+  const timeline = [{ value: `Preparing request to ${url}`, name: 'Text', timestamp: Date.now() }];
   return { timeline, responseHeaders, statusCode, statusMessage, httpVersion };
 };
 interface OpenCurlRequestOptions {
@@ -95,7 +89,7 @@ interface OpenCurlRequestOptions {
 }
 const openCurlConnection = async (
   _event: Electron.IpcMainInvokeEvent,
-  options: OpenCurlRequestOptions
+  options: OpenCurlRequestOptions,
 ): Promise<void> => {
   const existingConnection = CurlConnections.get(options.requestId);
 
@@ -124,7 +118,7 @@ const openCurlConnection = async (
 
   const caCert = await models.caCertificate.findByParentId(options.workspaceId);
   const caCertficatePath = caCert?.path || null;
-  const caCertificate = (caCertficatePath && (await fs.promises.readFile(caCertficatePath)).toString());
+  const caCertificate = caCertficatePath && (await fs.promises.readFile(caCertficatePath)).toString();
 
   try {
     if (!options.url) {
@@ -171,7 +165,13 @@ const openCurlConnection = async (
       if (errorCode) {
         const res = await models.response.getById(responseId);
         if (!res) {
-          createErrorResponse(responseId, request._id, responseEnvironmentId, timelinePath, error.message || 'Something went wrong');
+          createErrorResponse(
+            responseId,
+            request._id,
+            responseEnvironmentId,
+            timelinePath,
+            error.message || 'Something went wrong',
+          );
         }
       }
     });
@@ -204,88 +204,112 @@ const openCurlConnection = async (
       return 0;
     });
 
-    CurlConnections.get(options.requestId)?.on('stream', async (stream: Readable, _code: number, [headersWithStatus]: HeaderInfo[]) => {
-      for (const window of BrowserWindow.getAllWindows()) {
-        window.webContents.send(readyStateChannel, true);
-      }
-      const { timeline, responseHeaders, statusCode, statusMessage, httpVersion } = parseHeadersAndBuildTimeline(options.url, headersWithStatus);
+    CurlConnections.get(options.requestId)?.on(
+      'stream',
+      async (stream: Readable, _code: number, [headersWithStatus]: HeaderInfo[]) => {
+        for (const window of BrowserWindow.getAllWindows()) {
+          window.webContents.send(readyStateChannel, true);
+        }
+        const { timeline, responseHeaders, statusCode, statusMessage, httpVersion } = parseHeadersAndBuildTimeline(
+          options.url,
+          headersWithStatus,
+        );
 
-      const responsePatch: Partial<Response> = {
-        _id: responseId,
-        parentId: request._id,
-        environmentId: responseEnvironmentId,
-        headers: responseHeaders,
-        url: options.url,
-        statusCode,
-        statusMessage,
-        httpVersion,
-        elapsedTime: performance.now() - start,
-        timelinePath,
-        bodyPath: responseBodyPath,
-        settingSendCookies: request.settingSendCookies,
-        settingStoreCookies: request.settingStoreCookies,
-        bodyCompression: null,
-      };
-      const settings = await models.settings.get();
-      const res = await models.response.create(responsePatch, settings.maxHistoryResponses);
-      models.requestMeta.updateOrCreateByParentId(request._id, { activeResponseId: res._id });
+        const responsePatch: Partial<Response> = {
+          _id: responseId,
+          parentId: request._id,
+          environmentId: responseEnvironmentId,
+          headers: responseHeaders,
+          url: options.url,
+          statusCode,
+          statusMessage,
+          httpVersion,
+          elapsedTime: performance.now() - start,
+          timelinePath,
+          bodyPath: responseBodyPath,
+          settingSendCookies: request.settingSendCookies,
+          settingStoreCookies: request.settingStoreCookies,
+          bodyCompression: null,
+        };
+        const settings = await models.settings.get();
+        const res = await models.response.create(responsePatch, settings.maxHistoryResponses);
+        models.requestMeta.updateOrCreateByParentId(request._id, { activeResponseId: res._id });
 
-      if (request.settingStoreCookies) {
-        const setCookieStrings: string[] = getSetCookieHeaders(responseHeaders).map(h => h.value);
-        const totalSetCookies = setCookieStrings.length;
-        if (totalSetCookies) {
-          const currentUrl = request.url;
-          const { cookies, rejectedCookies } = await addSetCookiesToToughCookieJar({ setCookieStrings, currentUrl, cookieJar: options.cookieJar });
-          rejectedCookies.forEach(errorMessage => timeline.push({ value: `Rejected cookie: ${errorMessage}`, name: 'Text', timestamp: Date.now() }));
-          const hasCookiesToPersist = totalSetCookies > rejectedCookies.length;
-          if (hasCookiesToPersist) {
-            await models.cookieJar.update(options.cookieJar, { cookies });
-            timeline.push({ value: `Saved ${totalSetCookies} cookies`, name: 'Text', timestamp: Date.now() });
+        if (request.settingStoreCookies) {
+          const setCookieStrings: string[] = getSetCookieHeaders(responseHeaders).map(h => h.value);
+          const totalSetCookies = setCookieStrings.length;
+          if (totalSetCookies) {
+            const currentUrl = request.url;
+            const { cookies, rejectedCookies } = await addSetCookiesToToughCookieJar({
+              setCookieStrings,
+              currentUrl,
+              cookieJar: options.cookieJar,
+            });
+            rejectedCookies.forEach(errorMessage =>
+              timeline.push({ value: `Rejected cookie: ${errorMessage}`, name: 'Text', timestamp: Date.now() }),
+            );
+            const hasCookiesToPersist = totalSetCookies > rejectedCookies.length;
+            if (hasCookiesToPersist) {
+              await models.cookieJar.update(options.cookieJar, { cookies });
+              timeline.push({ value: `Saved ${totalSetCookies} cookies`, name: 'Text', timestamp: Date.now() });
+            }
           }
         }
-      }
-      timeline.map(t => timelineFileStreams.get(options.requestId)?.write(JSON.stringify(t) + '\n'));
+        timeline.map(t => timelineFileStreams.get(options.requestId)?.write(JSON.stringify(t) + '\n'));
 
-      invariant(eventLogFileStreams.get(request._id), 'writableStream should be defined');
-      for await (const chunk of stream) {
-        const messageEvent: CurlMessageEvent = {
+        invariant(eventLogFileStreams.get(request._id), 'writableStream should be defined');
+        for await (const chunk of stream) {
+          const messageEvent: CurlMessageEvent = {
+            _id: uuidV4(),
+            requestId: options.requestId,
+            data: new TextDecoder('utf-8').decode(chunk),
+            type: 'message',
+            timestamp: Date.now(),
+            direction: 'INCOMING',
+          };
+          eventLogFileStreams.get(options.requestId)?.write(JSON.stringify(messageEvent) + '\n');
+        }
+
+        // NOTE: when stream is closed by remote server
+        const closeEvent: CurlCloseEvent = {
           _id: uuidV4(),
           requestId: options.requestId,
-          data: new TextDecoder('utf-8').decode(chunk),
-          type: 'message',
+          type: 'close',
           timestamp: Date.now(),
-          direction: 'INCOMING',
+          statusCode,
+          reason: '',
+          code: 0,
+          wasClean: true,
         };
-        eventLogFileStreams.get(options.requestId)?.write(JSON.stringify(messageEvent) + '\n');
-      }
-
-      // NOTE: when stream is closed by remote server
-      const closeEvent: CurlCloseEvent = {
-        _id: uuidV4(),
-        requestId: options.requestId,
-        type: 'close',
-        timestamp: Date.now(),
-        statusCode,
-        reason: '',
-        code: 0,
-        wasClean: true,
-      };
-      CurlConnections.get(options.requestId)?.close();
-      deleteRequestMaps(options.requestId, 'Closing connection', closeEvent);
-      for (const window of BrowserWindow.getAllWindows()) {
-        window.webContents.send(readyStateChannel, false);
-      }
-    });
+        CurlConnections.get(options.requestId)?.close();
+        deleteRequestMaps(options.requestId, 'Closing connection', closeEvent);
+        for (const window of BrowserWindow.getAllWindows()) {
+          window.webContents.send(readyStateChannel, false);
+        }
+      },
+    );
     curl.perform();
   } catch (e) {
     console.error('unhandled error:', e);
 
     deleteRequestMaps(request._id, e.message || 'Something went wrong');
-    createErrorResponse(responseId, request._id, responseEnvironmentId, timelinePath, e.message || 'Something went wrong');
+    createErrorResponse(
+      responseId,
+      request._id,
+      responseEnvironmentId,
+      timelinePath,
+      e.message || 'Something went wrong',
+    );
   }
 };
 
-const createErrorResponse = async (responseId: string, requestId: string, environmentId: string | null, timelinePath: string, message: string) => {
+const createErrorResponse = async (
+  responseId: string,
+  requestId: string,
+  environmentId: string | null,
+  timelinePath: string,
+  message: string,
+) => {
   const settings = await models.settings.get();
   const responsePatch = {
     _id: responseId,
@@ -305,22 +329,19 @@ const deleteRequestMaps = async (requestId: string, message: string, event?: Cur
   }
   eventLogFileStreams.get(requestId)?.end();
   eventLogFileStreams.delete(requestId);
-  timelineFileStreams.get(requestId)?.write(JSON.stringify({ value: message, name: 'Text', timestamp: Date.now() }) + '\n');
+  timelineFileStreams
+    .get(requestId)
+    ?.write(JSON.stringify({ value: message, name: 'Text', timestamp: Date.now() }) + '\n');
   timelineFileStreams.get(requestId)?.end();
   timelineFileStreams.delete(requestId);
   CurlConnections.delete(requestId);
 };
 
-const getCurlReadyState = async (
-  options: { requestId: string }
-): Promise<CurlConnection['isOpen']> => {
+const getCurlReadyState = async (options: { requestId: string }): Promise<CurlConnection['isOpen']> => {
   return CurlConnections.get(options.requestId)?.isOpen ?? false;
 };
 
-const closeCurlConnection = (
-  _event: Electron.IpcMainInvokeEvent,
-  options: { requestId: string }
-): void => {
+const closeCurlConnection = (_event: Electron.IpcMainInvokeEvent, options: { requestId: string }): void => {
   if (!CurlConnections.get(options.requestId)) {
     return;
   }
@@ -345,19 +366,22 @@ const closeCurlConnection = (
 
 const closeAllCurlConnections = (): void => CurlConnections.forEach(curl => curl.isOpen && curl.close());
 
-const findMany = async (
-  options: { responseId: string }
-): Promise<CurlEvent[]> => {
+const findMany = async (options: { responseId: string }): Promise<CurlEvent[]> => {
   const response = await models.response.getById(options.responseId);
   if (!response || !response.bodyPath) {
     return [];
   }
   const body = await fs.promises.readFile(response.bodyPath);
-  return body.toString().split('\n').filter(e => e?.trim())
-    // Parse the message
-    .map(e => JSON.parse(e))
-    // Reverse the list of messages so that we get the latest message first
-    .reverse() || [];
+  return (
+    body
+      .toString()
+      .split('\n')
+      .filter(e => e?.trim())
+      // Parse the message
+      .map(e => JSON.parse(e))
+      // Reverse the list of messages so that we get the latest message first
+      .reverse() || []
+  );
 };
 
 export interface CurlBridgeAPI {
diff --git a/packages/insomnia/src/main/network/libcurl-promise.ts b/packages/insomnia/src/main/network/libcurl-promise.ts
index c8bb2ef16f..0c075876d4 100644
--- a/packages/insomnia/src/main/network/libcurl-promise.ts
+++ b/packages/insomnia/src/main/network/libcurl-promise.ts
@@ -3,7 +3,16 @@
 import { invariant } from '../../utils/invariant';
 invariant(process.type !== 'renderer', 'Native abstractions for Nodejs module unavailable in renderer');
 
-import { Curl, CurlAuth, CurlCode, CurlFeature, CurlHttpVersion, CurlInfoDebug, CurlNetrc, CurlSslOpt } from '@getinsomnia/node-libcurl';
+import {
+  Curl,
+  CurlAuth,
+  CurlCode,
+  CurlFeature,
+  CurlHttpVersion,
+  CurlInfoDebug,
+  CurlNetrc,
+  CurlSslOpt,
+} from '@getinsomnia/node-libcurl';
 import { isValid } from 'date-fns';
 import electron from 'electron';
 import fs from 'fs';
@@ -13,7 +22,14 @@ import { parse as urlParse } from 'url';
 import { v4 as uuidv4 } from 'uuid';
 
 import { version } from '../../../package.json';
-import { AUTH_AWS_IAM, AUTH_DIGEST, AUTH_NETRC, AUTH_NTLM, CONTENT_TYPE_FORM_DATA, CONTENT_TYPE_FORM_URLENCODED } from '../../common/constants';
+import {
+  AUTH_AWS_IAM,
+  AUTH_DIGEST,
+  AUTH_NETRC,
+  AUTH_NTLM,
+  CONTENT_TYPE_FORM_DATA,
+  CONTENT_TYPE_FORM_URLENCODED,
+} from '../../common/constants';
 import { describeByteSize, hasAuthHeader } from '../../common/misc';
 import type { ClientCertificate } from '../../models/client-certificate';
 import type { RequestHeader } from '../../models/request';
@@ -97,170 +113,183 @@ const getDataDirectory = () => process.env.INSOMNIA_DATA_PATH || electron.app.ge
 // NOTE: this is a dictionary of functions to close open listeners
 const cancelCurlRequestHandlers: Record<string, () => void> = {};
 export const cancelCurlRequest = (id: string) => cancelCurlRequestHandlers[id]();
-export const curlRequest = (options: CurlRequestOptions) => new Promise<CurlRequestOutput>(async resolve => {
-  try {
-    const responsesDir = path.join(getDataDirectory(), 'responses');
-    // TODO: remove this check, its only used for network.test.ts
-    await fs.promises.mkdir(responsesDir, { recursive: true });
-    const responseBodyPath = path.join(responsesDir, uuidv4() + '.response');
+export const curlRequest = (options: CurlRequestOptions) =>
+  new Promise<CurlRequestOutput>(async resolve => {
+    try {
+      const responsesDir = path.join(getDataDirectory(), 'responses');
+      // TODO: remove this check, its only used for network.test.ts
+      await fs.promises.mkdir(responsesDir, { recursive: true });
+      const responseBodyPath = path.join(responsesDir, uuidv4() + '.response');
 
-    const { requestId, req, finalUrl, settings, certificates, caCertficatePath, socketPath, authHeader, noDecompress = false } = options;
-    const caCert = (caCertficatePath && (await fs.promises.readFile(caCertficatePath)).toString());
+      const {
+        requestId,
+        req,
+        finalUrl,
+        settings,
+        certificates,
+        caCertficatePath,
+        socketPath,
+        authHeader,
+        noDecompress = false,
+      } = options;
+      const caCert = caCertficatePath && (await fs.promises.readFile(caCertficatePath)).toString();
 
-    const { curl, debugTimeline } = createConfiguredCurlInstance({
-      req,
-      finalUrl,
-      settings,
-      caCert,
-      certificates,
-      socketPath,
-      noDecompress,
-    });
-    const { method, body } = req;
-    // Only set CURLOPT_CUSTOMREQUEST if not HEAD or GET.
-    // See https://curl.haxx.se/libcurl/c/CURLOPT_CUSTOMREQUEST.html
-    // This is how you tell Curl to send a HEAD request
-    if (method.toUpperCase() === 'HEAD') {
-      curl.setOpt(Curl.option.NOBODY, 1);
-    } else if (method.toUpperCase() === 'POST') { // This is how you tell Curl to send a POST request
-      curl.setOpt(Curl.option.POST, 1);
-    } else { // IMPORTANT: Only use CUSTOMREQUEST for all but HEAD and POST
-      curl.setOpt(Curl.option.CUSTOMREQUEST, method);
-    }
-
-    const requestBodyPath = await parseRequestBodyPath(body);
-    const requestBody = parseRequestBody({ body, method });
-    const isMultipart = body.mimeType === CONTENT_TYPE_FORM_DATA && requestBodyPath;
-    let requestFileDescriptor: number | undefined;
-    const { authentication } = req;
-    if (requestBodyPath) {
-      // AWS IAM file upload not supported
-      invariant(authentication.type !== AUTH_AWS_IAM, 'AWS authentication not supported for provided body type');
-      const { size: contentLength } = fs.statSync(requestBodyPath);
-      curl.setOpt(Curl.option.INFILESIZE_LARGE, contentLength);
-      curl.setOpt(Curl.option.UPLOAD, 1);
-      // We need this, otherwise curl will send it as a POST
-      curl.setOpt(Curl.option.CUSTOMREQUEST, method);
-      // read file into request and close file descriptor
-      requestFileDescriptor = fs.openSync(requestBodyPath, 'r');
-      curl.setOpt(Curl.option.READDATA, requestFileDescriptor);
-      curl.on('end', () => closeReadFunction(isMultipart, requestFileDescriptor, requestBodyPath));
-      curl.on('error', () => closeReadFunction(isMultipart, requestFileDescriptor, requestBodyPath));
-    } else if (requestBody !== undefined) {
-      curl.setOpt(Curl.option.POSTFIELDS, requestBody);
-    }
-
-    // NOTE: temporary workaround for testing mockbin api
-    if (process.env.PLAYWRIGHT) {
-      req.headers = [...req.headers, { name: 'X-Mockbin-Test', value: 'true' }];
-    }
-
-    const headerStrings = parseHeaderStrings({ req, requestBody, requestBodyPath, finalUrl, authHeader });
-    curl.setOpt(Curl.option.HTTPHEADER, headerStrings);
-
-    // Create instance and handlers, poke value options in, set up write and debug callbacks, listen for events
-    const responseBodyWriteStream = fs.createWriteStream(responseBodyPath);
-    // cancel request by id map
-    cancelCurlRequestHandlers[requestId] = () => {
-      if (requestFileDescriptor && responseBodyPath) {
-        closeReadFunction(isMultipart, requestFileDescriptor, requestBodyPath);
+      const { curl, debugTimeline } = createConfiguredCurlInstance({
+        req,
+        finalUrl,
+        settings,
+        caCert,
+        certificates,
+        socketPath,
+        noDecompress,
+      });
+      const { method, body } = req;
+      // Only set CURLOPT_CUSTOMREQUEST if not HEAD or GET.
+      // See https://curl.haxx.se/libcurl/c/CURLOPT_CUSTOMREQUEST.html
+      // This is how you tell Curl to send a HEAD request
+      if (method.toUpperCase() === 'HEAD') {
+        curl.setOpt(Curl.option.NOBODY, 1);
+      } else if (method.toUpperCase() === 'POST') {
+        // This is how you tell Curl to send a POST request
+        curl.setOpt(Curl.option.POST, 1);
+      } else {
+        // IMPORTANT: Only use CUSTOMREQUEST for all but HEAD and POST
+        curl.setOpt(Curl.option.CUSTOMREQUEST, method);
       }
-      curl.isOpen && curl.close();
-    };
 
-    // set up response writer
-    let responseBodyBytes = 0;
-    curl.setOpt(Curl.option.WRITEFUNCTION, buffer => {
-      responseBodyBytes += buffer.length;
-      responseBodyWriteStream.write(buffer);
-      return buffer.length;
-    });
+      const requestBodyPath = await parseRequestBodyPath(body);
+      const requestBody = parseRequestBody({ body, method });
+      const isMultipart = body.mimeType === CONTENT_TYPE_FORM_DATA && requestBodyPath;
+      let requestFileDescriptor: number | undefined;
+      const { authentication } = req;
+      if (requestBodyPath) {
+        // AWS IAM file upload not supported
+        invariant(authentication.type !== AUTH_AWS_IAM, 'AWS authentication not supported for provided body type');
+        const { size: contentLength } = fs.statSync(requestBodyPath);
+        curl.setOpt(Curl.option.INFILESIZE_LARGE, contentLength);
+        curl.setOpt(Curl.option.UPLOAD, 1);
+        // We need this, otherwise curl will send it as a POST
+        curl.setOpt(Curl.option.CUSTOMREQUEST, method);
+        // read file into request and close file descriptor
+        requestFileDescriptor = fs.openSync(requestBodyPath, 'r');
+        curl.setOpt(Curl.option.READDATA, requestFileDescriptor);
+        curl.on('end', () => closeReadFunction(isMultipart, requestFileDescriptor, requestBodyPath));
+        curl.on('error', () => closeReadFunction(isMultipart, requestFileDescriptor, requestBodyPath));
+      } else if (requestBody !== undefined) {
+        curl.setOpt(Curl.option.POSTFIELDS, requestBody);
+      }
 
-    curl.setOpt(Curl.option.DEBUGFUNCTION, (infoType, buffer) => {
-      const isSSLData = infoType === CurlInfoDebug.SslDataIn || infoType === CurlInfoDebug.SslDataOut;
-      const isEmpty = buffer.length === 0;
-      // Don't show cookie setting because this will display every domain in the jar
-      const isAddCookie = infoType === CurlInfoDebug.Text && buffer.toString('utf8').indexOf('Added cookie') === 0;
-      if (isSSLData || isEmpty || isAddCookie) {
+      // NOTE: temporary workaround for testing mockbin api
+      if (process.env.PLAYWRIGHT) {
+        req.headers = [...req.headers, { name: 'X-Mockbin-Test', value: 'true' }];
+      }
+
+      const headerStrings = parseHeaderStrings({ req, requestBody, requestBodyPath, finalUrl, authHeader });
+      curl.setOpt(Curl.option.HTTPHEADER, headerStrings);
+
+      // Create instance and handlers, poke value options in, set up write and debug callbacks, listen for events
+      const responseBodyWriteStream = fs.createWriteStream(responseBodyPath);
+      // cancel request by id map
+      cancelCurlRequestHandlers[requestId] = () => {
+        if (requestFileDescriptor && responseBodyPath) {
+          closeReadFunction(isMultipart, requestFileDescriptor, requestBodyPath);
+        }
+        curl.isOpen && curl.close();
+      };
+
+      // set up response writer
+      let responseBodyBytes = 0;
+      curl.setOpt(Curl.option.WRITEFUNCTION, buffer => {
+        responseBodyBytes += buffer.length;
+        responseBodyWriteStream.write(buffer);
+        return buffer.length;
+      });
+
+      curl.setOpt(Curl.option.DEBUGFUNCTION, (infoType, buffer) => {
+        const isSSLData = infoType === CurlInfoDebug.SslDataIn || infoType === CurlInfoDebug.SslDataOut;
+        const isEmpty = buffer.length === 0;
+        // Don't show cookie setting because this will display every domain in the jar
+        const isAddCookie = infoType === CurlInfoDebug.Text && buffer.toString('utf8').indexOf('Added cookie') === 0;
+        if (isSSLData || isEmpty || isAddCookie) {
+          return 0;
+        }
+
+        // NOTE: resolves "Text" from CurlInfoDebug[CurlInfoDebug.Text]
+        let name = CurlInfoDebug[infoType] as keyof typeof CurlInfoDebug;
+        let timelineMessage;
+        const isRequestData = infoType === CurlInfoDebug.DataOut;
+        if (isRequestData) {
+          // Ignore large post data messages
+          const isLessThan10KB = buffer.length / 1024 < (settings.maxTimelineDataSizeKB || 1);
+          timelineMessage = isLessThan10KB ? buffer.toString('utf8') : `(${describeByteSize(buffer.length)} hidden)`;
+        }
+        const isResponseData = infoType === CurlInfoDebug.DataIn;
+        if (isResponseData) {
+          timelineMessage = `Received ${describeByteSize(buffer.length)} chunk`;
+          name = 'Text';
+        }
+        const value = timelineMessage || buffer.toString('utf8');
+        debugTimeline.push({ name, value, timestamp: Date.now() });
         return 0;
-      }
+      });
+      // returns "rawHeaders" string in a buffer, rather than HeaderInfo[] type which is an object with deduped keys
+      // this provides support for multiple set-cookies and duplicated headers
+      curl.enable(CurlFeature.Raw);
+      // NOTE: legacy write end callback
+      curl.on('end', () => responseBodyWriteStream.end());
+      curl.on('end', async (_1: any, _2: any, rawHeaders: Buffer) => {
+        const patch = {
+          bytesContent: responseBodyBytes,
+          bytesRead: curl.getInfo(Curl.info.SIZE_DOWNLOAD) as number,
+          elapsedTime: (curl.getInfo(Curl.info.TOTAL_TIME) as number) * 1000,
+          url: curl.getInfo(Curl.info.EFFECTIVE_URL) as string,
+        };
+        curl.isOpen && curl.close();
+        await waitForStreamToFinish(responseBodyWriteStream);
 
-      // NOTE: resolves "Text" from CurlInfoDebug[CurlInfoDebug.Text]
-      let name = CurlInfoDebug[infoType] as keyof typeof CurlInfoDebug;
-      let timelineMessage;
-      const isRequestData = infoType === CurlInfoDebug.DataOut;
-      if (isRequestData) {
-        // Ignore large post data messages
-        const isLessThan10KB = buffer.length / 1024 < (settings.maxTimelineDataSizeKB || 1);
-        timelineMessage = isLessThan10KB ? buffer.toString('utf8') : `(${describeByteSize(buffer.length)} hidden)`;
-      }
-      const isResponseData = infoType === CurlInfoDebug.DataIn;
-      if (isResponseData) {
-        timelineMessage = `Received ${describeByteSize(buffer.length)} chunk`;
-        name = 'Text';
-      }
-      const value = timelineMessage || buffer.toString('utf8');
-      debugTimeline.push({ name, value, timestamp: Date.now() });
-      return 0;
-    });
-    // returns "rawHeaders" string in a buffer, rather than HeaderInfo[] type which is an object with deduped keys
-    // this provides support for multiple set-cookies and duplicated headers
-    curl.enable(CurlFeature.Raw);
-    // NOTE: legacy write end callback
-    curl.on('end', () => responseBodyWriteStream.end());
-    curl.on('end', async (_1: any, _2: any, rawHeaders: Buffer) => {
+        const headerResults = _parseHeaders(rawHeaders);
+        resolve({ patch, debugTimeline, headerResults, responseBodyPath });
+      });
+      // NOTE: legacy write end callback
+      curl.on('error', () => responseBodyWriteStream.end());
+      curl.on('error', async (err, code) => {
+        const elapsedTime = (curl.getInfo(Curl.info.TOTAL_TIME) as number) * 1000;
+        curl.isOpen && curl.close();
+        await waitForStreamToFinish(responseBodyWriteStream);
+
+        // If libcurl can't decompress the response, retry without decompression
+        if (code === CurlCode.CURLE_BAD_CONTENT_ENCODING && !noDecompress) {
+          resolve(curlRequest({ ...options, noDecompress: true }));
+          return;
+        }
+
+        let error = err + '';
+        let statusMessage = 'Error';
+
+        if (code === CurlCode.CURLE_ABORTED_BY_CALLBACK) {
+          error = 'Request aborted';
+          statusMessage = 'Abort';
+        }
+        const patch = {
+          statusMessage,
+          error: error || 'Something went wrong',
+          elapsedTime,
+        };
+
+        // NOTE: legacy, default headerResults
+        resolve({ patch, debugTimeline, headerResults: [{ version: '', code: 0, reason: '', headers: [] }] });
+      });
+      curl.perform();
+    } catch (error) {
+      console.error(error);
       const patch = {
-        bytesContent: responseBodyBytes,
-        bytesRead: curl.getInfo(Curl.info.SIZE_DOWNLOAD) as number,
-        elapsedTime: curl.getInfo(Curl.info.TOTAL_TIME) as number * 1000,
-        url: curl.getInfo(Curl.info.EFFECTIVE_URL) as string,
+        statusMessage: 'Error',
+        error: error.message || 'Something went wrong',
+        elapsedTime: 0,
       };
-      curl.isOpen && curl.close();
-      await waitForStreamToFinish(responseBodyWriteStream);
-
-      const headerResults = _parseHeaders(rawHeaders);
-      resolve({ patch, debugTimeline, headerResults, responseBodyPath });
-    });
-    // NOTE: legacy write end callback
-    curl.on('error', () => responseBodyWriteStream.end());
-    curl.on('error', async (err, code) => {
-      const elapsedTime = curl.getInfo(Curl.info.TOTAL_TIME) as number * 1000;
-      curl.isOpen && curl.close();
-      await waitForStreamToFinish(responseBodyWriteStream);
-
-      // If libcurl can't decompress the response, retry without decompression
-      if (code === CurlCode.CURLE_BAD_CONTENT_ENCODING && !noDecompress) {
-        resolve(curlRequest({ ...options, noDecompress: true }));
-        return;
-      }
-
-      let error = err + '';
-      let statusMessage = 'Error';
-
-      if (code === CurlCode.CURLE_ABORTED_BY_CALLBACK) {
-        error = 'Request aborted';
-        statusMessage = 'Abort';
-      }
-      const patch = {
-        statusMessage,
-        error: error || 'Something went wrong',
-        elapsedTime,
-      };
-
-      // NOTE: legacy, default headerResults
-      resolve({ patch, debugTimeline, headerResults: [{ version: '', code: 0, reason: '', headers: [] }] });
-    });
-    curl.perform();
-  } catch (error) {
-    console.error(error);
-    const patch = {
-      statusMessage: 'Error',
-      error: error.message || 'Something went wrong',
-      elapsedTime: 0,
-    };
-    resolve({ patch, debugTimeline: [], headerResults: [{ version: '', code: 0, reason: '', headers: [] }] });
-  }
-});
+      resolve({ patch, debugTimeline: [], headerResults: [{ version: '', code: 0, reason: '', headers: [] }] });
+    }
+  });
 
 export const createConfiguredCurlInstance = ({
   req,
@@ -358,13 +387,18 @@ export const createConfiguredCurlInstance = ({
     curl.setOpt(Curl.option.SSL_VERIFYHOST, 0);
     curl.setOpt(Curl.option.SSL_VERIFYPEER, 0);
   }
-  debugTimeline.push({ value: `${validateSSL ? 'Enable' : 'Disable'} SSL validation`, name: 'Text', timestamp: Date.now() });
+  debugTimeline.push({
+    value: `${validateSSL ? 'Enable' : 'Disable'} SSL validation`,
+    name: 'Text',
+    timestamp: Date.now(),
+  });
 
-  const followRedirects = {
-    'off': false,
-    'on': true,
-    'global': settings.followRedirects,
-  }[req.settingFollowRedirects] ?? true;
+  const followRedirects =
+    {
+      off: false,
+      on: true,
+      global: settings.followRedirects,
+    }[req.settingFollowRedirects] ?? true;
 
   curl.setOpt(Curl.option.FOLLOWLOCATION, followRedirects);
 
@@ -382,14 +416,20 @@ export const createConfiguredCurlInstance = ({
     }
     // set-cookies from previous redirects
     if (cookieJar.cookies.length) {
-      debugTimeline.push({ value: `Enable cookie sending with jar of ${cookieJar.cookies.length} cookie${cookieJar.cookies.length !== 1 ? 's' : ''}`, name: 'Text', timestamp: Date.now() });
+      debugTimeline.push({
+        value: `Enable cookie sending with jar of ${cookieJar.cookies.length} cookie${cookieJar.cookies.length !== 1 ? 's' : ''}`,
+        name: 'Text',
+        timestamp: Date.now(),
+      });
       for (const cookie of cookieJar.cookies) {
         const setCookie = [
           cookie.httpOnly ? `#HttpOnly_${cookie.domain}` : cookie.domain,
           cookie.hostOnly ? 'FALSE' : 'TRUE',
           cookie.path,
           cookie.secure ? 'TRUE' : 'FALSE',
-          cookie.expires && isValid(new Date(cookie.expires)) ? Math.round(new Date(cookie.expires).getTime() / 1000) : 0,
+          cookie.expires && isValid(new Date(cookie.expires))
+            ? Math.round(new Date(cookie.expires).getTime() / 1000)
+            : 0,
           cookie.key,
           cookie.value,
         ].join('\t');
@@ -430,7 +470,7 @@ const closeReadFunction = (isMultipart: boolean, fd?: number, path?: string) =>
   // NOTE: multipart files are combined before sending, so this file is deleted after
   // alt implementation to send one part at a time https://github.com/JCMais/node-libcurl/blob/develop/examples/04-multi.js
   if (isMultipart && path) {
-    fs.unlink(path, () => { });
+    fs.unlink(path, () => {});
   }
 };
 
@@ -443,21 +483,24 @@ export interface HeaderResult {
 export function _parseHeaders(buffer: Buffer): HeaderResult[] {
   // split on two new lines
   const redirects = buffer.toString('utf8').split(/\r?\n\r?\n|\r\r/g);
-  return redirects.filter(r => !!r.trim()).map(redirect => {
-    // split on one new line
-    const [first, ...rest] = redirect.split(/\r?\n|\r/g);
-    const headers = rest.map(l => l.split(/:\s(.+)/))
-      .filter(([n]) => !!n)
-      .map(([name, value = '']) => ({ name, value }));
+  return redirects
+    .filter(r => !!r.trim())
+    .map(redirect => {
+      // split on one new line
+      const [first, ...rest] = redirect.split(/\r?\n|\r/g);
+      const headers = rest
+        .map(l => l.split(/:\s(.+)/))
+        .filter(([n]) => !!n)
+        .map(([name, value = '']) => ({ name, value }));
 
-    const [version, code, ...other] = first.split(/ +/g);
-    return {
-      version,
-      code: parseInt(code, 10),
-      reason: other.join(' '),
-      headers,
-    };
-  });
+      const [version, code, ...other] = first.split(/ +/g);
+      return {
+        version,
+        code: parseInt(code, 10),
+        reason: other.join(' '),
+        headers,
+      };
+    });
 }
 
 // NOTE: legacy, suspicious, could be simplified
@@ -502,7 +545,7 @@ const parseRequestBodyPath = async (body: any) => {
   if (!isMultipartForm) {
     return body.fileName;
   }
-  const { filePath } = await buildMultipart(body.params || [],);
+  const { filePath } = await buildMultipart(body.params || []);
   return filePath;
 };
 
diff --git a/packages/insomnia/src/main/network/multipart.ts b/packages/insomnia/src/main/network/multipart.ts
index 11b03eabf7..75bc830d29 100644
--- a/packages/insomnia/src/main/network/multipart.ts
+++ b/packages/insomnia/src/main/network/multipart.ts
@@ -45,7 +45,7 @@ export async function buildMultipart(params: RequestBodyParameter[]) {
           end: false,
         });
         // TODO: remove non-null assertion
-         
+
         totalSize += size!;
       });
     }
diff --git a/packages/insomnia/src/main/network/parse-header-strings.ts b/packages/insomnia/src/main/network/parse-header-strings.ts
index 06beda6de6..690a7af096 100644
--- a/packages/insomnia/src/main/network/parse-header-strings.ts
+++ b/packages/insomnia/src/main/network/parse-header-strings.ts
@@ -2,12 +2,7 @@ import aws4 from 'aws4';
 import clone from 'clone';
 import { parse as urlParse } from 'url';
 
-import {
-  AUTH_AWS_IAM,
-  AUTH_DIGEST,
-  AUTH_NTLM,
-  CONTENT_TYPE_FORM_DATA,
-} from '../../common/constants';
+import { AUTH_AWS_IAM, AUTH_DIGEST, AUTH_NTLM, CONTENT_TYPE_FORM_DATA } from '../../common/constants';
 import {
   getContentTypeHeader,
   getHostHeader,
@@ -46,7 +41,8 @@ export const parseHeaderStrings = ({ req, finalUrl, requestBody, requestBodyPath
   const isDigest = authentication.type === AUTH_DIGEST;
   const isNTLM = authentication.type === AUTH_NTLM;
   const isAWSIAM = authentication.type === AUTH_AWS_IAM;
-  const hasNoAuthorisationAndNotDisabledAWSBasicOrDigest = !hasAuthHeader(headers) && !authentication.disabled && !isAWSIAM && !isDigest && !isNTLM;
+  const hasNoAuthorisationAndNotDisabledAWSBasicOrDigest =
+    !hasAuthHeader(headers) && !authentication.disabled && !isAWSIAM && !isDigest && !isNTLM;
   if (hasNoAuthorisationAndNotDisabledAWSBasicOrDigest && authHeader) {
     headers.push(authHeader);
   }
@@ -86,11 +82,15 @@ export const parseHeaderStrings = ({ req, finalUrl, requestBody, requestBodyPath
     headers.push({ name: 'content-type', value: DISABLE_HEADER_VALUE });
   }
 
-  return headers.filter((h: any) => h.name)
+  return headers
+    .filter((h: any) => h.name)
     .map(({ name, value }: any) =>
-      value === '' ? `${name};` // Curl needs a semicolon suffix to send empty header values
-        : value === DISABLE_HEADER_VALUE ? `${name}:` // Tell Curl NOT to send the header if value is null
-          : `${name}: ${value}`);
+      value === ''
+        ? `${name};` // Curl needs a semicolon suffix to send empty header values
+        : value === DISABLE_HEADER_VALUE
+          ? `${name}:` // Tell Curl NOT to send the header if value is null
+          : `${name}: ${value}`,
+    );
 };
 
 interface AWSOptions {
@@ -107,20 +107,30 @@ interface AWSOptions {
   contentTypeHeader?: string;
   body?: string;
 }
-export function _getAwsAuthHeaders({ authentication, url, method, hostHeader, contentTypeHeader, body }: AWSOptions): { name: string; value: any }[] {
+export function _getAwsAuthHeaders({
+  authentication,
+  url,
+  method,
+  hostHeader,
+  contentTypeHeader,
+  body,
+}: AWSOptions): { name: string; value: any }[] {
   const { path, host } = urlParse(url);
   const onlyContentTypeHeader = contentTypeHeader ? { 'content-type': contentTypeHeader } : {};
   const { service, region, accessKeyId, secretAccessKey, sessionToken } = authentication;
-  const signature = aws4.sign({
-    service,
-    region,
-    body,
-    method,
-    headers: onlyContentTypeHeader,
-    path: path || undefined,
-    // AWS uses host header for signing so prioritize that if the user set it manually
-    host: hostHeader || host || undefined,
-  }, { accessKeyId, secretAccessKey, sessionToken });
+  const signature = aws4.sign(
+    {
+      service,
+      region,
+      body,
+      method,
+      headers: onlyContentTypeHeader,
+      path: path || undefined,
+      // AWS uses host header for signing so prioritize that if the user set it manually
+      host: hostHeader || host || undefined,
+    },
+    { accessKeyId, secretAccessKey, sessionToken },
+  );
   if (!signature.headers) {
     return [];
   }
diff --git a/packages/insomnia/src/main/network/request-timing.ts b/packages/insomnia/src/main/network/request-timing.ts
index cde9f3864c..1cf16df486 100644
--- a/packages/insomnia/src/main/network/request-timing.ts
+++ b/packages/insomnia/src/main/network/request-timing.ts
@@ -1,54 +1,48 @@
 import { BrowserWindow } from 'electron';
 
 export interface TimingStep {
-    stepName: string;
-    startedAt: number;
-    duration?: number;
+  stepName: string;
+  startedAt: number;
+  duration?: number;
 }
 export const executions = new Map<string, TimingStep[]>();
 
-export const getExecution = (requestId?: string) => requestId ? executions.get(requestId) : [];
+export const getExecution = (requestId?: string) => (requestId ? executions.get(requestId) : []);
 
 export const startExecution = (requestId: string) => executions.set(requestId, []);
 
-export function addExecutionStep(
-    requestId: string,
-    stepName: string,
-) {
-    // append to new step to execution
-    const record: TimingStep = {
-        stepName,
-        startedAt: Date.now(),
-    };
-    const execution = [...(executions.get(requestId) || []), record];
-    executions.set(requestId, execution);
-    for (const window of BrowserWindow.getAllWindows()) {
-        window.webContents.send(`syncTimers.${requestId}`, { executions: executions.get(requestId) });
-    }
+export function addExecutionStep(requestId: string, stepName: string) {
+  // append to new step to execution
+  const record: TimingStep = {
+    stepName,
+    startedAt: Date.now(),
+  };
+  const execution = [...(executions.get(requestId) || []), record];
+  executions.set(requestId, execution);
+  for (const window of BrowserWindow.getAllWindows()) {
+    window.webContents.send(`syncTimers.${requestId}`, { executions: executions.get(requestId) });
+  }
 }
 
 export function completeExecutionStep(requestId: string) {
-    const latest = executions.get(requestId)?.at(-1);
-    if (latest) {
-        latest.duration = (Date.now() - latest.startedAt);
-    }
-    for (const window of BrowserWindow.getAllWindows()) {
-        window.webContents.send(`syncTimers.${requestId}`, { executions: executions.get(requestId) });
-    }
+  const latest = executions.get(requestId)?.at(-1);
+  if (latest) {
+    latest.duration = Date.now() - latest.startedAt;
+  }
+  for (const window of BrowserWindow.getAllWindows()) {
+    window.webContents.send(`syncTimers.${requestId}`, { executions: executions.get(requestId) });
+  }
 }
 
-export function updateLatestStepName(
-    executionId: string,
-    stepName: string,
-) {
-    const steps = executions.get(executionId) || [];
-    if (steps.length > 0) {
-        const latestStep = steps[steps.length - 1];
-        latestStep.stepName = stepName;
-        executions.set(executionId, steps);
-    }
+export function updateLatestStepName(executionId: string, stepName: string) {
+  const steps = executions.get(executionId) || [];
+  if (steps.length > 0) {
+    const latestStep = steps[steps.length - 1];
+    latestStep.stepName = stepName;
+    executions.set(executionId, steps);
+  }
 
-    for (const window of BrowserWindow.getAllWindows()) {
-        window.webContents.send(`syncTimers.${executionId}`, { executions: executions.get(executionId) });
-    }
+  for (const window of BrowserWindow.getAllWindows()) {
+    window.webContents.send(`syncTimers.${executionId}`, { executions: executions.get(executionId) });
+  }
 }
diff --git a/packages/insomnia/src/main/network/websocket.ts b/packages/insomnia/src/main/network/websocket.ts
index 96f41ad074..c7ab70e3bd 100644
--- a/packages/insomnia/src/main/network/websocket.ts
+++ b/packages/insomnia/src/main/network/websocket.ts
@@ -5,13 +5,7 @@ import type { IncomingMessage } from 'http';
 import path from 'path';
 import tls, { type KeyObject, type PxfObject } from 'tls';
 import { v4 as uuidV4 } from 'uuid';
-import {
-  type CloseEvent,
-  type ErrorEvent,
-  type Event,
-  type MessageEvent,
-  WebSocket,
-} from 'ws';
+import { type CloseEvent, type ErrorEvent, type Event, type MessageEvent, WebSocket } from 'ws';
 
 import { AUTH_API_KEY, AUTH_BASIC, AUTH_BEARER } from '../../common/constants';
 import { jarFromCookies } from '../../common/cookies';
@@ -68,11 +62,7 @@ export type WebSocketCloseEvent = Omit<CloseEvent, 'target'> & {
   timestamp: number;
 };
 
-export type WebSocketEvent =
-  | WebSocketOpenEvent
-  | WebSocketMessageEvent
-  | WebSocketErrorEvent
-  | WebSocketCloseEvent;
+export type WebSocketEvent = WebSocketOpenEvent | WebSocketMessageEvent | WebSocketErrorEvent | WebSocketCloseEvent;
 
 export type WebSocketEventLog = WebSocketEvent[];
 
@@ -84,7 +74,10 @@ const parseResponseAndBuildTimeline = (url: string, incomingMessage: IncomingMes
   const statusMessage = incomingMessage.statusMessage || '';
   const statusCode = incomingMessage.statusCode || 0;
   const httpVersion = incomingMessage.httpVersion;
-  const responseHeaders = Object.entries(incomingMessage.headers).map(([name, value]) => ({ name, value: value?.toString() || '' }));
+  const responseHeaders = Object.entries(incomingMessage.headers).map(([name, value]) => ({
+    name,
+    value: value?.toString() || '',
+  }));
   const headersIn = responseHeaders.map(({ name, value }) => `${name}: ${value}`).join('\n');
   const timeline = [
     { value: `Preparing request to ${url}`, name: 'Text', timestamp: Date.now() },
@@ -108,7 +101,7 @@ interface OpenWebSocketRequestOptions {
 }
 const openWebSocketConnection = async (
   _event: Electron.IpcMainInvokeEvent,
-  options: OpenWebSocketRequestOptions
+  options: OpenWebSocketRequestOptions,
 ): Promise<void> => {
   const existingConnection = WebSocketConnections.get(options.requestId);
 
@@ -117,7 +110,9 @@ const openWebSocketConnection = async (
     return;
   }
 
-  const request = options.isGraphqlSubscriptionRequest ? await models.request.getById(options.requestId) : await webSocketRequest.getById(options.requestId);
+  const request = options.isGraphqlSubscriptionRequest
+    ? await models.request.getById(options.requestId)
+    : await webSocketRequest.getById(options.requestId);
   const responseId = generateId('res');
   if (!request) {
     return;
@@ -133,15 +128,16 @@ const openWebSocketConnection = async (
   const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(options.workspaceId);
   // fallback to base environment
   const activeEnvironmentId = workspaceMeta.activeEnvironmentId;
-  const activeEnvironment = activeEnvironmentId && await models.environment.getById(activeEnvironmentId);
-  const environment = activeEnvironment || await models.environment.getOrCreateForParentId(options.workspaceId);
+  const activeEnvironment = activeEnvironmentId && (await models.environment.getById(activeEnvironmentId));
+  const environment = activeEnvironment || (await models.environment.getOrCreateForParentId(options.workspaceId));
   invariant(environment, 'failed to find environment ' + activeEnvironmentId);
   const responseEnvironmentId = environment ? environment._id : null;
 
   const caCert = await models.caCertificate.findByParentId(options.workspaceId);
   const caCertficatePath = caCert?.path;
   // attempt to read CA Certificate PEM from disk, fallback to root certificates
-  const caCertificate = (caCertficatePath && (await fs.promises.readFile(caCertficatePath)).toString()) || tls.rootCertificates.join('\n');
+  const caCertificate =
+    (caCertficatePath && (await fs.promises.readFile(caCertficatePath)).toString()) || tls.rootCertificates.join('\n');
 
   try {
     if (!options.url) {
@@ -149,8 +145,10 @@ const openWebSocketConnection = async (
     }
     const readyStateChannel = `webSocket.${request._id}.readyState`;
 
-    const reduceArrayToLowerCaseKeyedDictionary = (acc: Record<string, string>, { name, value }: BaseWebSocketRequest['headers'][0]) =>
-      ({ ...acc, [name.toLowerCase() || '']: value || '' });
+    const reduceArrayToLowerCaseKeyedDictionary = (
+      acc: Record<string, string>,
+      { name, value }: BaseWebSocketRequest['headers'][0],
+    ) => ({ ...acc, [name.toLowerCase() || '']: value || '' });
     const headers = options.headers;
     let url = options.url;
     let authCookie = null;
@@ -161,7 +159,7 @@ const openWebSocketConnection = async (
         headers.push(getBasicAuthHeader(username, password, encoding));
       }
       if (options.authentication.type === AUTH_API_KEY) {
-        const { key = '', value = '', addTo } = options.authentication;  // Ensure key is not undefined
+        const { key = '', value = '', addTo } = options.authentication; // Ensure key is not undefined
         if (addTo === HEADER) {
           headers.push({ name: key, value: value });
         } else if (addTo === COOKIE) {
@@ -197,17 +195,30 @@ const openWebSocketConnection = async (
       const { passphrase, cert, key, pfx } = clientCertificate;
 
       if (cert) {
-        timelineFileStreams.get(options.requestId)?.write(JSON.stringify({ value: `Adding SSL PEM certificate: ${cert}`, name: 'Text', timestamp: Date.now() }) + '\n');
+        timelineFileStreams
+          .get(options.requestId)
+          ?.write(
+            JSON.stringify({ value: `Adding SSL PEM certificate: ${cert}`, name: 'Text', timestamp: Date.now() }) +
+              '\n',
+          );
         pemCertificates.push(fs.readFileSync(cert, 'utf-8'));
       }
 
       if (key) {
-        timelineFileStreams.get(options.requestId)?.write(JSON.stringify({ value: `Adding SSL KEY certificate: ${key}`, name: 'Text', timestamp: Date.now() }) + '\n');
+        timelineFileStreams
+          .get(options.requestId)
+          ?.write(
+            JSON.stringify({ value: `Adding SSL KEY certificate: ${key}`, name: 'Text', timestamp: Date.now() }) + '\n',
+          );
         pemCertificateKeys.push({ pem: fs.readFileSync(key, 'utf-8'), passphrase: passphrase ?? undefined });
       }
 
       if (pfx) {
-        timelineFileStreams.get(options.requestId)?.write(JSON.stringify({ value: `Adding SSL P12 certificate: ${pfx}`, name: 'Text', timestamp: Date.now() }) + '\n');
+        timelineFileStreams
+          .get(options.requestId)
+          ?.write(
+            JSON.stringify({ value: `Adding SSL P12 certificate: ${pfx}`, name: 'Text', timestamp: Date.now() }) + '\n',
+          );
         pfxCertificates.push({ buf: fs.readFileSync(pfx, 'utf-8'), passphrase: passphrase ?? undefined });
       }
     });
@@ -221,11 +232,12 @@ const openWebSocketConnection = async (
       }
     }
 
-    const followRedirects = {
-      'off': false,
-      'on': true,
-      'global': settings.followRedirects,
-    }[request.settingFollowRedirects] ?? true;
+    const followRedirects =
+      {
+        off: false,
+        on: true,
+        global: settings.followRedirects,
+      }[request.settingFollowRedirects] ?? true;
     const protocols = lowerCasedEnabledHeaders['sec-websocket-protocol']?.split(',').map(p => p.trim());
     const ws = new WebSocket(url, protocols, {
       headers: lowerCasedEnabledHeaders,
@@ -242,7 +254,11 @@ const openWebSocketConnection = async (
     ws.on('upgrade', async incomingMessage => {
       // @ts-expect-error -- private property
       const internalRequestHeader = ws._req._header;
-      const { timeline, responseHeaders, statusCode, statusMessage, httpVersion } = parseResponseAndBuildTimeline(url, incomingMessage, internalRequestHeader);
+      const { timeline, responseHeaders, statusCode, statusMessage, httpVersion } = parseResponseAndBuildTimeline(
+        url,
+        incomingMessage,
+        internalRequestHeader,
+      );
       const responsePatch: Partial<WebSocketResponse> = {
         _id: responseId,
         parentId: request._id,
@@ -268,8 +284,14 @@ const openWebSocketConnection = async (
         const totalSetCookies = setCookieStrings.length;
         if (totalSetCookies) {
           const currentUrl = request.url;
-          const { cookies, rejectedCookies } = await addSetCookiesToToughCookieJar({ setCookieStrings, currentUrl, cookieJar: options.cookieJar });
-          rejectedCookies.forEach(errorMessage => timeline.push({ value: `Rejected cookie: ${errorMessage}`, name: 'Text', timestamp: Date.now() }));
+          const { cookies, rejectedCookies } = await addSetCookiesToToughCookieJar({
+            setCookieStrings,
+            currentUrl,
+            cookieJar: options.cookieJar,
+          });
+          rejectedCookies.forEach(errorMessage =>
+            timeline.push({ value: `Rejected cookie: ${errorMessage}`, name: 'Text', timestamp: Date.now() }),
+          );
           const hasCookiesToPersist = totalSetCookies > rejectedCookies.length;
           if (hasCookiesToPersist) {
             await models.cookieJar.update(options.cookieJar, { cookies });
@@ -282,11 +304,17 @@ const openWebSocketConnection = async (
     });
     ws.on('unexpected-response', async (clientRequest, incomingMessage) => {
       incomingMessage.on('data', chunk => {
-        timelineFileStreams.get(options.requestId)?.write(JSON.stringify({ value: chunk.toString(), name: 'DataOut', timestamp: Date.now() }) + '\n');
+        timelineFileStreams
+          .get(options.requestId)
+          ?.write(JSON.stringify({ value: chunk.toString(), name: 'DataOut', timestamp: Date.now() }) + '\n');
       });
       // @ts-expect-error -- private property
       const internalRequestHeader = clientRequest._header;
-      const { timeline, responseHeaders, statusCode, statusMessage, httpVersion } = parseResponseAndBuildTimeline(url, incomingMessage, internalRequestHeader);
+      const { timeline, responseHeaders, statusCode, statusMessage, httpVersion } = parseResponseAndBuildTimeline(
+        url,
+        incomingMessage,
+        internalRequestHeader,
+      );
       timeline.map(t => timelineFileStreams.get(options.requestId)?.write(JSON.stringify(t) + '\n'));
       const responsePatch: Partial<WebSocketResponse> = {
         _id: responseId,
@@ -318,7 +346,11 @@ const openWebSocketConnection = async (
       };
 
       eventLogFileStreams.get(options.requestId)?.write(JSON.stringify(openEvent) + '\n');
-      timelineFileStreams.get(options.requestId)?.write(JSON.stringify({ value: 'WebSocket connection established', name: 'Text', timestamp: Date.now() }) + '\n');
+      timelineFileStreams
+        .get(options.requestId)
+        ?.write(
+          JSON.stringify({ value: 'WebSocket connection established', name: 'Text', timestamp: Date.now() }) + '\n',
+        );
       for (const window of BrowserWindow.getAllWindows()) {
         window.webContents.send(readyStateChannel, ws.readyState === WebSocket.OPEN);
       }
@@ -381,14 +413,26 @@ const openWebSocketConnection = async (
         window.webContents.send(readyStateChannel, ws.readyState === WebSocket.OPEN);
       }
       if (error.code) {
-        createErrorResponse(responseId, request._id, responseEnvironmentId, timelinePath, message || 'Something went wrong');
+        createErrorResponse(
+          responseId,
+          request._id,
+          responseEnvironmentId,
+          timelinePath,
+          message || 'Something went wrong',
+        );
       }
     });
   } catch (e) {
     console.error('unhandled error:', e);
 
     deleteRequestMaps(request._id, e.message || 'Something went wrong');
-    createErrorResponse(responseId, request._id, responseEnvironmentId, timelinePath, e.message || 'Something went wrong');
+    createErrorResponse(
+      responseId,
+      request._id,
+      responseEnvironmentId,
+      timelinePath,
+      e.message || 'Something went wrong',
+    );
   }
 };
 
@@ -419,7 +463,13 @@ const handleGraphQLWsMessage = (data: MessageEvent['data'], request: Request) =>
   }
 };
 
-const createErrorResponse = async (responseId: string, requestId: string, environmentId: string | null, timelinePath: string, message: string) => {
+const createErrorResponse = async (
+  responseId: string,
+  requestId: string,
+  environmentId: string | null,
+  timelinePath: string,
+  message: string,
+) => {
   const settings = await models.settings.get();
   const responsePatch = {
     _id: responseId,
@@ -433,21 +483,25 @@ const createErrorResponse = async (responseId: string, requestId: string, enviro
   models.requestMeta.updateOrCreateByParentId(requestId, { activeResponseId: res._id });
 };
 
-const deleteRequestMaps = async (requestId: string, message: string, event?: WebSocketCloseEvent | WebSocketErrorEvent) => {
+const deleteRequestMaps = async (
+  requestId: string,
+  message: string,
+  event?: WebSocketCloseEvent | WebSocketErrorEvent,
+) => {
   if (event) {
     eventLogFileStreams.get(requestId)?.write(JSON.stringify(event) + '\n');
   }
   eventLogFileStreams.get(requestId)?.end();
   eventLogFileStreams.delete(requestId);
-  timelineFileStreams.get(requestId)?.write(JSON.stringify({ value: message, name: 'Text', timestamp: Date.now() }) + '\n');
+  timelineFileStreams
+    .get(requestId)
+    ?.write(JSON.stringify({ value: message, name: 'Text', timestamp: Date.now() }) + '\n');
   timelineFileStreams.get(requestId)?.end();
   timelineFileStreams.delete(requestId);
   WebSocketConnections.delete(requestId);
 };
 
-const getWebSocketReadyState = async (
-  options: { requestId: string }
-): Promise<boolean> => {
+const getWebSocketReadyState = async (options: { requestId: string }): Promise<boolean> => {
   return WebSocketConnections.get(options.requestId)?.readyState === WebSocket.OPEN;
 };
 
@@ -479,9 +533,7 @@ const sendPayload = async (ws: WebSocket, options: { payload: string; requestId:
   }
 };
 
-const sendWebSocketEvent = async (
-  options: { payload: string; requestId: string }
-): Promise<void> => {
+const sendWebSocketEvent = async (options: { payload: string; requestId: string }): Promise<void> => {
   const ws = WebSocketConnections.get(options.requestId);
 
   if (!ws) {
@@ -492,9 +544,7 @@ const sendWebSocketEvent = async (
   sendPayload(ws, options);
 };
 
-const closeWebSocketConnection = (
-  options: { requestId: string }
-): void => {
+const closeWebSocketConnection = (options: { requestId: string }): void => {
   const ws = WebSocketConnections.get(options.requestId);
   if (!ws) {
     return;
@@ -504,19 +554,22 @@ const closeWebSocketConnection = (
 
 const closeAllWebSocketConnections = (): void => WebSocketConnections.forEach(ws => ws.close());
 
-const findMany = async (
-  options: { responseId: string }
-): Promise<WebSocketEvent[]> => {
+const findMany = async (options: { responseId: string }): Promise<WebSocketEvent[]> => {
   const response = await models.webSocketResponse.getById(options.responseId);
   if (!response || !response.eventLogPath) {
     return [];
   }
   const body = await fs.promises.readFile(response.eventLogPath);
-  return body.toString().split('\n').filter(e => e?.trim())
-    // Parse the message
-    .map(e => JSON.parse(e))
-    // Reverse the list of messages so that we get the latest message first
-    .reverse() || [];
+  return (
+    body
+      .toString()
+      .split('\n')
+      .filter(e => e?.trim())
+      // Parse the message
+      .map(e => JSON.parse(e))
+      // Reverse the list of messages so that we get the latest message first
+      .reverse() || []
+  );
 };
 
 export interface WebSocketBridgeAPI {
@@ -533,10 +586,16 @@ export interface WebSocketBridgeAPI {
 }
 export const registerWebSocketHandlers = () => {
   ipcMainHandle('webSocket.open', openWebSocketConnection);
-  ipcMainHandle('webSocket.event.send', (_, options: Parameters<typeof sendWebSocketEvent>[0]) => sendWebSocketEvent(options));
-  ipcMainOn('webSocket.close', (_, options: Parameters<typeof closeWebSocketConnection>[0]) => closeWebSocketConnection(options));
+  ipcMainHandle('webSocket.event.send', (_, options: Parameters<typeof sendWebSocketEvent>[0]) =>
+    sendWebSocketEvent(options),
+  );
+  ipcMainOn('webSocket.close', (_, options: Parameters<typeof closeWebSocketConnection>[0]) =>
+    closeWebSocketConnection(options),
+  );
   ipcMainOn('webSocket.closeAll', closeAllWebSocketConnections);
-  ipcMainHandle('webSocket.readyState', (_, options: Parameters<typeof getWebSocketReadyState>[0]) => getWebSocketReadyState(options));
+  ipcMainHandle('webSocket.readyState', (_, options: Parameters<typeof getWebSocketReadyState>[0]) =>
+    getWebSocketReadyState(options),
+  );
   ipcMainHandle('webSocket.event.findMany', (_, options: Parameters<typeof findMany>[0]) => findMany(options));
 };
 
diff --git a/packages/insomnia/src/main/proxy.ts b/packages/insomnia/src/main/proxy.ts
index 1a5a6cc41d..ab0efc53f8 100644
--- a/packages/insomnia/src/main/proxy.ts
+++ b/packages/insomnia/src/main/proxy.ts
@@ -49,7 +49,11 @@ export async function watchProxySettings() {
       const [event, doc] = change;
       const isSettingsUpdate = isSettings(doc) && event === 'update';
       if (isSettingsUpdate) {
-        const hasProxyChanged = old.proxyEnabled !== doc.proxyEnabled || old.httpProxy !== doc.httpProxy || old.httpsProxy !== doc.httpsProxy || old.noProxy !== doc.noProxy;
+        const hasProxyChanged =
+          old.proxyEnabled !== doc.proxyEnabled ||
+          old.httpProxy !== doc.httpProxy ||
+          old.httpsProxy !== doc.httpsProxy ||
+          old.noProxy !== doc.noProxy;
         if (hasProxyChanged) {
           updateProxy();
           old = doc;
diff --git a/packages/insomnia/src/main/sentry.ts b/packages/insomnia/src/main/sentry.ts
index 2c09ab4466..289f229ac9 100644
--- a/packages/insomnia/src/main/sentry.ts
+++ b/packages/insomnia/src/main/sentry.ts
@@ -13,14 +13,14 @@ let enabled = false;
  */
 export function sentryWatchAnalyticsEnabled() {
   models.settings.get().then(async settings => {
-    enabled = settings.enableAnalytics || await session.isLoggedIn();
+    enabled = settings.enableAnalytics || (await session.isLoggedIn());
   });
 
   db.onChange(async (changes: ChangeBufferEvent[]) => {
     for (const change of changes) {
       const [event, doc] = change;
       if (isSettings(doc) && event === 'update') {
-        enabled = doc.enableAnalytics || await session.isLoggedIn();
+        enabled = doc.enableAnalytics || (await session.isLoggedIn());
       }
 
       if (event === 'insert' || event === 'update') {
diff --git a/packages/insomnia/src/main/templating-worker-database.ts b/packages/insomnia/src/main/templating-worker-database.ts
index dd367cb3e9..58376a1529 100644
--- a/packages/insomnia/src/main/templating-worker-database.ts
+++ b/packages/insomnia/src/main/templating-worker-database.ts
@@ -6,75 +6,74 @@ import type { Workspace } from '../models/workspace';
 import { fetchRequestData, sendCurlAndWriteTimeline, tryToInterpolateRequest } from '../network/network';
 
 export const resolveDbByKey = async (request: Request) => {
-    const url = new URL(request.url);
-    let result;
-    const body = await request.json();
-    if (url.host === 'request.getById'.toLowerCase()) {
-        result = await models.request.getById(body.id);
-    }
-    if (url.host === 'request.getAncestors'.toLowerCase()) {
-        result = await db.withAncestors<DBRequest | RequestGroup | Workspace>(body.request, body.types);
-    }
-    if (url.host === 'workspace.getById'.toLowerCase()) {
-        result = await models.workspace.getById(body.id);
-    }
-    if (url.host === 'oAuth2Token.getByRequestId'.toLowerCase()) {
-        result = await models.oAuth2Token.getByParentId(body.parentId);
-    }
-    if (url.host === 'cookieJar.getOrCreateForWorkspace'.toLowerCase()) {
-        result = await models.cookieJar.getOrCreateForParentId(body.id);
-    }
-    if (url.host === 'response.getLatestForRequestId'.toLowerCase()) {
-        result = await models.response.getLatestForRequest(body.requestId, body.environmentId);
-    }
-    if (url.host === 'response.getBodyBuffer'.toLowerCase()) {
-        result = await models.response.getBodyBuffer(body.response, body.readFailureValue);
-    }
-    if (url.host === 'pluginData.hasItem'.toLowerCase()) {
-        const doc = await models.pluginData.getByKey(body.pluginName, body.key);
-        result = doc !== null;
-    }
-    if (url.host === 'pluginData.setItem'.toLowerCase()) {
-        result = models.pluginData.upsertByKey(body.pluginName, body.key, String(body.value));
-    }
-    if (url.host === 'pluginData.getItem'.toLowerCase()) {
-        const doc = await models.pluginData.getByKey(body.pluginName, body.key);
-        result = doc ? doc.value : null;
-    }
-    if (url.host === 'pluginData.removeItem'.toLowerCase()) {
-        result = models.pluginData.removeByKey(body.pluginName, body.key);
-    }
-    if (url.host === 'pluginData.clear'.toLowerCase()) {
-        result = models.pluginData.removeAll(body.pluginName);
-    }
-    if (url.host === 'pluginData.all'.toLowerCase()) {
-        const docs = await models.pluginData.all(body.pluginName) || [];
-        result = docs.map(d => ({
-            value: d.value,
-            key: d.key,
-        }));
-    }
-    if (url.host === 'network.sendRequest'.toLowerCase()) {
-        const { request,
-            environment,
-            settings,
-            clientCertificates,
-            caCert,
-            timelinePath,
-            responseId,
-        } = await fetchRequestData(body.request._id);
+  const url = new URL(request.url);
+  let result;
+  const body = await request.json();
+  if (url.host === 'request.getById'.toLowerCase()) {
+    result = await models.request.getById(body.id);
+  }
+  if (url.host === 'request.getAncestors'.toLowerCase()) {
+    result = await db.withAncestors<DBRequest | RequestGroup | Workspace>(body.request, body.types);
+  }
+  if (url.host === 'workspace.getById'.toLowerCase()) {
+    result = await models.workspace.getById(body.id);
+  }
+  if (url.host === 'oAuth2Token.getByRequestId'.toLowerCase()) {
+    result = await models.oAuth2Token.getByParentId(body.parentId);
+  }
+  if (url.host === 'cookieJar.getOrCreateForWorkspace'.toLowerCase()) {
+    result = await models.cookieJar.getOrCreateForParentId(body.id);
+  }
+  if (url.host === 'response.getLatestForRequestId'.toLowerCase()) {
+    result = await models.response.getLatestForRequest(body.requestId, body.environmentId);
+  }
+  if (url.host === 'response.getBodyBuffer'.toLowerCase()) {
+    result = await models.response.getBodyBuffer(body.response, body.readFailureValue);
+  }
+  if (url.host === 'pluginData.hasItem'.toLowerCase()) {
+    const doc = await models.pluginData.getByKey(body.pluginName, body.key);
+    result = doc !== null;
+  }
+  if (url.host === 'pluginData.setItem'.toLowerCase()) {
+    result = models.pluginData.upsertByKey(body.pluginName, body.key, String(body.value));
+  }
+  if (url.host === 'pluginData.getItem'.toLowerCase()) {
+    const doc = await models.pluginData.getByKey(body.pluginName, body.key);
+    result = doc ? doc.value : null;
+  }
+  if (url.host === 'pluginData.removeItem'.toLowerCase()) {
+    result = models.pluginData.removeByKey(body.pluginName, body.key);
+  }
+  if (url.host === 'pluginData.clear'.toLowerCase()) {
+    result = models.pluginData.removeAll(body.pluginName);
+  }
+  if (url.host === 'pluginData.all'.toLowerCase()) {
+    const docs = (await models.pluginData.all(body.pluginName)) || [];
+    result = docs.map(d => ({
+      value: d.value,
+      key: d.key,
+    }));
+  }
+  if (url.host === 'network.sendRequest'.toLowerCase()) {
+    const { request, environment, settings, clientCertificates, caCert, timelinePath, responseId } =
+      await fetchRequestData(body.request._id);
 
-        const renderResult = await tryToInterpolateRequest({ request, environment: environment._id, purpose: 'send', extraInfo: body.extraInfo });
-        const response = await sendCurlAndWriteTimeline(
-            renderResult.request,
-            clientCertificates,
-            caCert,
-            settings,
-            timelinePath,
-            responseId
-        );
-        result = await models.response.create({ ...response, bodyCompression: null }, settings.maxHistoryResponses);
-    }
+    const renderResult = await tryToInterpolateRequest({
+      request,
+      environment: environment._id,
+      purpose: 'send',
+      extraInfo: body.extraInfo,
+    });
+    const response = await sendCurlAndWriteTimeline(
+      renderResult.request,
+      clientCertificates,
+      caCert,
+      settings,
+      timelinePath,
+      responseId,
+    );
+    result = await models.response.create({ ...response, bodyCompression: null }, settings.maxHistoryResponses);
+  }
 
-    return new Response(JSON.stringify(result));
+  return new Response(JSON.stringify(result));
 };
diff --git a/packages/insomnia/src/main/updates.ts b/packages/insomnia/src/main/updates.ts
index 3c12d273fe..2eba4e8f46 100644
--- a/packages/insomnia/src/main/updates.ts
+++ b/packages/insomnia/src/main/updates.ts
@@ -1,26 +1,20 @@
 import { autoUpdater, BrowserWindow, dialog } from 'electron';
 
-import {
-  CHECK_FOR_UPDATES_INTERVAL,
-  getAppId,
-  getAppVersion,
-  isDevelopment,
-  UpdateURL,
-} from '../common/constants';
+import { CHECK_FOR_UPDATES_INTERVAL, getAppId, getAppVersion, isDevelopment, UpdateURL } from '../common/constants';
 import { delay } from '../common/misc';
 import * as models from '../models/index';
 import { invariant } from '../utils/invariant';
 import { ipcMainOn } from './ipc/electron';
 
-export type UpdateStatus = |
-  'Update Error' |
-  'Up to Date' |
-  'Downloading...' |
-  'Performing backup...' |
-  'Updated (Restart Required)' |
-  'Checking' |
-  'Updates Not Supported' |
-  'Check Now';
+export type UpdateStatus =
+  | 'Update Error'
+  | 'Up to Date'
+  | 'Downloading...'
+  | 'Performing backup...'
+  | 'Updated (Restart Required)'
+  | 'Checking'
+  | 'Updates Not Supported'
+  | 'Check Now';
 
 const isUpdateSupported = () => {
   if (process.platform === 'linux') {
@@ -75,17 +69,19 @@ export const init = async () => {
     _sendUpdateStatus('Performing backup...');
     _sendUpdateStatus('Updated (Restart Required)');
 
-    dialog.showMessageBox({
-      type: 'info',
-      buttons: ['Restart', 'Later'],
-      title: 'Application Update',
-      message: process.platform === 'win32' ? releaseNotes : releaseName,
-      detail: 'A new version of Insomnia has been downloaded. Restart the application to apply the updates.',
-    }).then(returnValue => {
-      if (returnValue.response === 0) {
-        autoUpdater.quitAndInstall();
-      }
-    });
+    dialog
+      .showMessageBox({
+        type: 'info',
+        buttons: ['Restart', 'Later'],
+        title: 'Application Update',
+        message: process.platform === 'win32' ? releaseNotes : releaseName,
+        detail: 'A new version of Insomnia has been downloaded. Restart the application to apply the updates.',
+      })
+      .then(returnValue => {
+        if (returnValue.response === 0) {
+          autoUpdater.quitAndInstall();
+        }
+      });
   });
 
   const settings = await models.settings.get();
diff --git a/packages/insomnia/src/main/window-utils.ts b/packages/insomnia/src/main/window-utils.ts
index 5ba3adafc2..31f5ea7953 100644
--- a/packages/insomnia/src/main/window-utils.ts
+++ b/packages/insomnia/src/main/window-utils.ts
@@ -451,12 +451,13 @@ export function createWindow({ firstLaunch }: { firstLaunch?: boolean } = {}): E
         role: 'minimize',
       },
       // @ts-expect-error -- TSCONVERSION missing in official electron types
-      ...(isMac() ? [
-        {
-          label: `${MNEMONIC_SYM}Close`,
-          role: 'close',
-        },
-      ]
+      ...(isMac()
+        ? [
+            {
+              label: `${MNEMONIC_SYM}Close`,
+              role: 'close',
+            },
+          ]
         : []),
     ],
   };
@@ -581,7 +582,7 @@ export function createWindow({ firstLaunch }: { firstLaunch?: boolean } = {}): E
       {
         label: `${MNEMONIC_SYM}About`,
         click: aboutMenuClickHandler,
-      }
+      },
     );
   }
 
diff --git a/packages/insomnia/src/models/__schemas__/model-schemas.ts b/packages/insomnia/src/models/__schemas__/model-schemas.ts
index 94a581b602..9ff0e16c10 100644
--- a/packages/insomnia/src/models/__schemas__/model-schemas.ts
+++ b/packages/insomnia/src/models/__schemas__/model-schemas.ts
@@ -13,7 +13,7 @@ const toSchema = <T>(obj: T): Schema<T> => {
   const cloned = clone(obj);
   const output: Partial<Schema<T>> = {};
 
-    // @ts-expect-error -- mapping unsoundness
+  // @ts-expect-error -- mapping unsoundness
   Object.keys(cloned).forEach(key => {
     // @ts-expect-error -- mapping unsoundness
     output[key] = () => cloned[key];
diff --git a/packages/insomnia/src/models/__tests__/request-meta.test.ts b/packages/insomnia/src/models/__tests__/request-meta.test.ts
index 2941bd0d7c..07abc99fee 100644
--- a/packages/insomnia/src/models/__tests__/request-meta.test.ts
+++ b/packages/insomnia/src/models/__tests__/request-meta.test.ts
@@ -3,7 +3,6 @@ import { describe, expect, it } from 'vitest';
 import * as models from '../index';
 
 describe('create()', () => {
-
   it('fails when missing parentId', async () => {
     expect(() =>
       models.requestMeta.create({
diff --git a/packages/insomnia/src/models/__tests__/request.test.ts b/packages/insomnia/src/models/__tests__/request.test.ts
index 9479be84e4..73e991dda2 100644
--- a/packages/insomnia/src/models/__tests__/request.test.ts
+++ b/packages/insomnia/src/models/__tests__/request.test.ts
@@ -5,7 +5,6 @@ import { newBodyGraphQL, updateMimeType } from '../../ui/components/dropdowns/co
 import * as models from '../index';
 
 describe('init()', () => {
-
   it('contains all required fields', async () => {
     Date.now = vi.fn().mockReturnValue(1478795580200);
     expect(models.request.init()).toEqual({
@@ -33,7 +32,6 @@ describe('init()', () => {
 });
 
 describe('create()', () => {
-
   it('creates a valid request', async () => {
     Date.now = vi.fn().mockReturnValue(1478795580200);
     const request = await models.request.create({
@@ -82,7 +80,6 @@ describe('create()', () => {
 });
 
 describe('updateMimeType()', () => {
-
   it('adds header when does not exist', async () => {
     const request = await models.request.create({
       name: 'My Request',
@@ -175,7 +172,6 @@ describe('updateMimeType()', () => {
 });
 
 describe('migrate()', () => {
-
   it('migrates basic case', () => {
     const original = {
       headers: [],
@@ -297,7 +293,7 @@ describe('migrate()', () => {
     const contentToMimeMap = {
       'application/json; charset=utf-8': 'application/json',
       'text/plain': 'text/plain',
-      malformed: 'malformed',
+      'malformed': 'malformed',
     };
 
     for (const contentType of Object.keys(contentToMimeMap)) {
@@ -411,8 +407,7 @@ describe('migrate()', () => {
 
 describe('newBodyGraphQL()', () => {
   it('strips \\\\n characters', () => {
-    const input =
-      '{"query": "query getCustomer() {\\\\n id\\\\n name\\\\n email\\\\n __typename\\\\n }\\\\n"}';
+    const input = '{"query": "query getCustomer() {\\\\n id\\\\n name\\\\n email\\\\n __typename\\\\n }\\\\n"}';
     const expectedTextOutput = '{"query": "query getCustomer() { id name email __typename }"}';
     const actualOutput = newBodyGraphQL(input);
     expect(actualOutput).toEqual({
diff --git a/packages/insomnia/src/models/__tests__/response.test.ts b/packages/insomnia/src/models/__tests__/response.test.ts
index 4f036219dc..73ac29ec69 100644
--- a/packages/insomnia/src/models/__tests__/response.test.ts
+++ b/packages/insomnia/src/models/__tests__/response.test.ts
@@ -7,7 +7,6 @@ import zlib from 'zlib';
 import * as models from '../../models';
 
 describe('migrate()', () => {
-
   it('does it', async () => {
     const bodyPath = path.join(tmpdir(), 'foo.zip');
     fs.writeFileSync(bodyPath, zlib.gzipSync('Hello World!'));
diff --git a/packages/insomnia/src/models/__tests__/workspace.test.ts b/packages/insomnia/src/models/__tests__/workspace.test.ts
index f400c938c0..6216fa85c0 100644
--- a/packages/insomnia/src/models/__tests__/workspace.test.ts
+++ b/packages/insomnia/src/models/__tests__/workspace.test.ts
@@ -3,7 +3,6 @@ import { describe, expect, it } from 'vitest';
 import * as models from '../index';
 import { WorkspaceScopeKeys } from '../workspace';
 describe('migrate()', () => {
-
   it('migrates client certificates properly', async () => {
     const workspace = await models.workspace.create({
       name: 'My Workspace',
diff --git a/packages/insomnia/src/models/api-spec.ts b/packages/insomnia/src/models/api-spec.ts
index 4fddf0d43f..7b51c95e12 100644
--- a/packages/insomnia/src/models/api-spec.ts
+++ b/packages/insomnia/src/models/api-spec.ts
@@ -20,9 +20,7 @@ export interface BaseApiSpec {
 
 export type ApiSpec = BaseModel & BaseApiSpec;
 
-export const isApiSpec = (model: Pick<BaseModel, 'type'>): model is ApiSpec => (
-  model.type === type
-);
+export const isApiSpec = (model: Pick<BaseModel, 'type'>): model is ApiSpec => model.type === type;
 
 export function init(): BaseApiSpec {
   return {
@@ -40,10 +38,7 @@ export function getByParentId(workspaceId: string) {
   return db.getWhere<ApiSpec>(type, { parentId: workspaceId });
 }
 
-export async function getOrCreateForParentId(
-  workspaceId: string,
-  patch: Partial<ApiSpec> = {},
-) {
+export async function getOrCreateForParentId(workspaceId: string, patch: Partial<ApiSpec> = {}) {
   const spec = await db.getWhere<ApiSpec>(type, {
     parentId: workspaceId,
   });
@@ -55,10 +50,7 @@ export async function getOrCreateForParentId(
   return spec;
 }
 
-export async function updateOrCreateForParentId(
-  workspaceId: string,
-  patch: Partial<ApiSpec> = {},
-) {
+export async function updateOrCreateForParentId(workspaceId: string, patch: Partial<ApiSpec> = {}) {
   const spec = await getOrCreateForParentId(workspaceId);
   return db.docUpdate(spec, patch);
 }
diff --git a/packages/insomnia/src/models/ca-certificate.ts b/packages/insomnia/src/models/ca-certificate.ts
index 9a65cc42f4..d2fe44c331 100644
--- a/packages/insomnia/src/models/ca-certificate.ts
+++ b/packages/insomnia/src/models/ca-certificate.ts
@@ -30,9 +30,7 @@ export function init(): BaseCaCertificate {
   };
 }
 
-export const isCaCertificate = (model: Pick<BaseModel, 'type'>): model is CaCertificate => (
-  model.type === type
-);
+export const isCaCertificate = (model: Pick<BaseModel, 'type'>): model is CaCertificate => model.type === type;
 
 export function migrate(doc: CaCertificate) {
   return doc;
@@ -46,10 +44,7 @@ export function create(patch: Partial<CaCertificate> = {}) {
   return db.docCreate<CaCertificate>(type, patch);
 }
 
-export function update(
-  cert: CaCertificate,
-  patch: Partial<CaCertificate> = {},
-) {
+export function update(cert: CaCertificate, patch: Partial<CaCertificate> = {}) {
   return db.docUpdate<CaCertificate>(cert, patch);
 }
 
diff --git a/packages/insomnia/src/models/client-certificate.ts b/packages/insomnia/src/models/client-certificate.ts
index dc585d6c10..53e78206e7 100644
--- a/packages/insomnia/src/models/client-certificate.ts
+++ b/packages/insomnia/src/models/client-certificate.ts
@@ -38,9 +38,7 @@ export function init(): BaseClientCertificate {
   };
 }
 
-export const isClientCertificate = (model: Pick<BaseModel, 'type'>): model is ClientCertificate => (
-  model.type === type
-);
+export const isClientCertificate = (model: Pick<BaseModel, 'type'>): model is ClientCertificate => model.type === type;
 
 export function migrate(doc: ClientCertificate) {
   return doc;
@@ -54,10 +52,7 @@ export function create(patch: Partial<ClientCertificate> = {}) {
   return db.docCreate<ClientCertificate>(type, patch);
 }
 
-export function update(
-  cert: ClientCertificate,
-  patch: Partial<ClientCertificate> = {},
-) {
+export function update(cert: ClientCertificate, patch: Partial<ClientCertificate> = {}) {
   return db.docUpdate<ClientCertificate>(cert, patch);
 }
 
diff --git a/packages/insomnia/src/models/cookie-jar.ts b/packages/insomnia/src/models/cookie-jar.ts
index c11ec6e243..6e2777d4c6 100644
--- a/packages/insomnia/src/models/cookie-jar.ts
+++ b/packages/insomnia/src/models/cookie-jar.ts
@@ -37,9 +37,7 @@ export interface BaseCookieJar {
 
 export type CookieJar = BaseModel & BaseCookieJar;
 
-export const isCookieJar = (model: Pick<BaseModel, 'type'>): model is CookieJar => (
-  model.type === type
-);
+export const isCookieJar = (model: Pick<BaseModel, 'type'>): model is CookieJar => model.type === type;
 
 export function init() {
   return {
@@ -77,8 +75,7 @@ export async function getOrCreateForParentId(parentId: string) {
       _id: `${prefix}_${crypto.createHash('sha1').update(parentId).digest('hex')}`,
     });
   }
-    return cookieJars[0];
-
+  return cookieJars[0];
 }
 
 export async function all() {
diff --git a/packages/insomnia/src/models/environment.ts b/packages/insomnia/src/models/environment.ts
index 7ca8fa40da..10ee15b08a 100644
--- a/packages/insomnia/src/models/environment.ts
+++ b/packages/insomnia/src/models/environment.ts
@@ -21,10 +21,7 @@ export const vaultEnvironmentMaskValue = '••••••';
 export const canDuplicate = true;
 export const canSync = true;
 // for those keys do not need to add in model init method
-export const optionalKeys = [
-  'kvPairData',
-  'environmentType',
-];
+export const optionalKeys = ['kvPairData', 'environmentType'];
 
 export interface BaseEnvironment {
   name: string;
@@ -40,7 +37,7 @@ export interface BaseEnvironment {
 
 export enum EnvironmentType {
   JSON = 'json',
-  KVPAIR = 'kv'
+  KVPAIR = 'kv',
 }
 export enum EnvironmentKvPairDataType {
   JSON = 'json',
@@ -186,9 +183,7 @@ export const removeAllSecrets = async (orgnizationIds: string[]) => {
   });
 };
 
-export const isEnvironment = (model: Pick<BaseModel, 'type'>): model is Environment => (
-  model.type === type
-);
+export const isEnvironment = (model: Pick<BaseModel, 'type'>): model is Environment => model.type === type;
 
 export function init() {
   return {
diff --git a/packages/insomnia/src/models/git-repository.ts b/packages/insomnia/src/models/git-repository.ts
index e4a72c0cf4..c1d3a7e5ec 100644
--- a/packages/insomnia/src/models/git-repository.ts
+++ b/packages/insomnia/src/models/git-repository.ts
@@ -50,9 +50,7 @@ export interface BaseGitRepository {
   uriNeedsMigration: boolean;
 }
 
-export const isGitRepository = (model: Pick<BaseModel, 'type'>): model is GitRepository => (
-  model.type === type
-);
+export const isGitRepository = (model: Pick<BaseModel, 'type'>): model is GitRepository => model.type === type;
 
 export function migrate(doc: GitRepository) {
   return doc;
diff --git a/packages/insomnia/src/models/grpc-request-meta.ts b/packages/insomnia/src/models/grpc-request-meta.ts
index 085adcd0a2..29aef3310a 100644
--- a/packages/insomnia/src/models/grpc-request-meta.ts
+++ b/packages/insomnia/src/models/grpc-request-meta.ts
@@ -19,9 +19,7 @@ interface BaseGrpcRequestMeta {
 
 export type GrpcRequestMeta = BaseModel & BaseGrpcRequestMeta;
 
-export const isGrpcRequestMeta = (model: Pick<BaseModel, 'type'>): model is GrpcRequestMeta => (
-  model.type === type
-);
+export const isGrpcRequestMeta = (model: Pick<BaseModel, 'type'>): model is GrpcRequestMeta => model.type === type;
 
 export function init() {
   return {
@@ -69,14 +67,13 @@ export async function updateOrCreateByParentId(parentId: string, patch: Partial<
   if (requestMeta) {
     return update(requestMeta, patch);
   }
-    const newPatch = Object.assign(
-      {
-        parentId,
-      },
-      patch,
-    );
-    return create(newPatch);
-
+  const newPatch = Object.assign(
+    {
+      parentId,
+    },
+    patch,
+  );
+  return create(newPatch);
 }
 
 export function all() {
diff --git a/packages/insomnia/src/models/grpc-request.ts b/packages/insomnia/src/models/grpc-request.ts
index a0eed52758..df3f645153 100644
--- a/packages/insomnia/src/models/grpc-request.ts
+++ b/packages/insomnia/src/models/grpc-request.ts
@@ -38,13 +38,9 @@ interface BaseGrpcRequest {
 
 export type GrpcRequest = BaseModel & BaseGrpcRequest;
 
-export const isGrpcRequest = (model: Pick<BaseModel, 'type'>): model is GrpcRequest => (
-  model.type === type
-);
+export const isGrpcRequest = (model: Pick<BaseModel, 'type'>): model is GrpcRequest => model.type === type;
 
-export const isGrpcRequestId = (id?: string | null) => (
-  id?.startsWith(`${prefix}_`)
-);
+export const isGrpcRequestId = (id?: string | null) => id?.startsWith(`${prefix}_`);
 
 export function init(): BaseGrpcRequest {
   return {
diff --git a/packages/insomnia/src/models/helpers/__tests__/project.test.ts b/packages/insomnia/src/models/helpers/__tests__/project.test.ts
index 14c446b0c4..943b710668 100644
--- a/packages/insomnia/src/models/helpers/__tests__/project.test.ts
+++ b/packages/insomnia/src/models/helpers/__tests__/project.test.ts
@@ -10,20 +10,10 @@ const remote0 = { name: '0', remoteId: 'notNull', _id: 'remote0' };
 
 describe('sortProjects', () => {
   it('sorts projects by default > local > remote > name', () => {
-    const unSortedProjects = [
-      remoteA,
-      defaultOrgProject,
-      remoteB,
-      remote0,
-    ];
+    const unSortedProjects = [remoteA, defaultOrgProject, remoteB, remote0];
     const result = sortProjects(unSortedProjects);
 
-    const sortedProjects = [
-      defaultOrgProject,
-      remote0,
-      remoteA,
-      remoteB,
-    ];
+    const sortedProjects = [defaultOrgProject, remote0, remoteA, remoteB];
     expect(result).toEqual(sortedProjects);
   });
 });
diff --git a/packages/insomnia/src/models/helpers/project.ts b/packages/insomnia/src/models/helpers/project.ts
index 69e8313587..53031b9f71 100644
--- a/packages/insomnia/src/models/helpers/project.ts
+++ b/packages/insomnia/src/models/helpers/project.ts
@@ -1,5 +1,8 @@
 import { database } from '../../common/database';
-import { initializeLocalBackendProjectAndMarkForSync, pushSnapshotOnInitialize } from '../../sync/vcs/initialize-backend-project';
+import {
+  initializeLocalBackendProjectAndMarkForSync,
+  pushSnapshotOnInitialize,
+} from '../../sync/vcs/initialize-backend-project';
 import type { VCS } from '../../sync/vcs/vcs';
 import { insomniaFetch } from '../../ui/insomniaFetch';
 import { invariant } from '../../utils/invariant';
@@ -7,10 +10,8 @@ import { isDefaultOrganizationProject, type Project, update as updateProject } f
 import type { Workspace } from '../workspace';
 import { getOrCreateByParentId as getOrCreateWorkspaceMeta } from '../workspace-meta';
 export const sortProjects = (projects: Project[]) => [
-  ...projects.filter(p => isDefaultOrganizationProject(p))
-    .sort((a, b) => a.name.localeCompare(b.name)),
-  ...projects.filter(p => !isDefaultOrganizationProject(p))
-    .sort((a, b) => a.name.localeCompare(b.name)),
+  ...projects.filter(p => isDefaultOrganizationProject(p)).sort((a, b) => a.name.localeCompare(b.name)),
+  ...projects.filter(p => !isDefaultOrganizationProject(p)).sort((a, b) => a.name.localeCompare(b.name)),
 ];
 
 export async function updateLocalProjectToRemote({
@@ -24,13 +25,16 @@ export async function updateLocalProjectToRemote({
   sessionId: string;
   organizationId: string;
 }) {
-  const newCloudProject = await insomniaFetch<{
-    id: string;
-    name: string;
-  } | {
-    error: string;
-    message?: string;
-  }>({
+  const newCloudProject = await insomniaFetch<
+    | {
+        id: string;
+        name: string;
+      }
+    | {
+        error: string;
+        message?: string;
+      }
+  >({
     path: `/v1/organizations/${organizationId}/team-projects`,
     method: 'POST',
     data: {
@@ -53,9 +57,9 @@ export async function updateLocalProjectToRemote({
   const updatedProject = await updateProject(project, { name: newCloudProject.name, remoteId: newCloudProject.id });
 
   // For each workspace in the local project
-  const projectWorkspaces = (await database.find<Workspace>('Workspace', {
+  const projectWorkspaces = await database.find<Workspace>('Workspace', {
     parentId: updatedProject._id,
-  }));
+  });
 
   for (const workspace of projectWorkspaces) {
     const workspaceMeta = await getOrCreateWorkspaceMeta(workspace._id);
@@ -69,7 +73,10 @@ export async function updateLocalProjectToRemote({
         await pushSnapshotOnInitialize({ vcs, workspace, project: updatedProject });
       }
     } catch (e) {
-      console.warn('Failed to initialize sync on workspace. This will be retried when the workspace is opened on the app.', e);
+      console.warn(
+        'Failed to initialize sync on workspace. This will be retried when the workspace is opened on the app.',
+        e,
+      );
       // TODO: here we should show the try again dialog
     }
   }
diff --git a/packages/insomnia/src/models/helpers/query-all-workspace-urls.ts b/packages/insomnia/src/models/helpers/query-all-workspace-urls.ts
index 642a6fa505..c9b03c5aaa 100644
--- a/packages/insomnia/src/models/helpers/query-all-workspace-urls.ts
+++ b/packages/insomnia/src/models/helpers/query-all-workspace-urls.ts
@@ -11,7 +11,7 @@ export const queryAllWorkspaceUrls = async (
 ): Promise<string[]> => {
   const workspace = await models.workspace.getById(workspaceId);
   invariant(workspace, `Workspace ${workspaceId} not found`);
-  const docs = await db.withDescendants(workspace, reqType) as (Request | GrpcRequest)[];
+  const docs = (await db.withDescendants(workspace, reqType)) as (Request | GrpcRequest)[];
   const urls = docs
     .filter(
       d =>
diff --git a/packages/insomnia/src/models/mock-route.ts b/packages/insomnia/src/models/mock-route.ts
index fef96f8a1c..1cd8491ef6 100644
--- a/packages/insomnia/src/models/mock-route.ts
+++ b/packages/insomnia/src/models/mock-route.ts
@@ -19,7 +19,7 @@ interface BaseMockRoute {
   statusCode: number;
   statusText: string;
   name: string;
-  mimeType: string;// response body type
+  mimeType: string; // response body type
   method: string; // used only for sending the testing request
 }
 
@@ -38,9 +38,7 @@ export function init(): BaseMockRoute {
   };
 }
 
-export const isMockRoute = (model: Pick<BaseModel, 'type'>): model is MockRoute => (
-  model.type === type
-);
+export const isMockRoute = (model: Pick<BaseModel, 'type'>): model is MockRoute => model.type === type;
 
 export function migrate(doc: MockRoute) {
   return doc;
@@ -54,10 +52,7 @@ export function create(patch: Partial<MockRoute> = {}) {
   return db.docCreate<MockRoute>(type, patch);
 }
 
-export function update(
-  mockRoute: MockRoute,
-  patch: Partial<MockRoute> = {},
-) {
+export function update(mockRoute: MockRoute, patch: Partial<MockRoute> = {}) {
   return db.docUpdate<MockRoute>(mockRoute, patch);
 }
 
diff --git a/packages/insomnia/src/models/mock-server.ts b/packages/insomnia/src/models/mock-server.ts
index cbdcbf9afd..9ba7f0f40a 100644
--- a/packages/insomnia/src/models/mock-server.ts
+++ b/packages/insomnia/src/models/mock-server.ts
@@ -29,9 +29,7 @@ export function init(): BaseMockServer {
   };
 }
 
-export const isMockServer = (model: Pick<BaseModel, 'type'>): model is MockServer => (
-  model.type === type
-);
+export const isMockServer = (model: Pick<BaseModel, 'type'>): model is MockServer => model.type === type;
 
 export function migrate(doc: MockServer) {
   return doc;
@@ -44,10 +42,7 @@ export function create(patch: Partial<MockServer> = {}) {
 
   return db.docCreate<MockServer>(type, patch);
 }
-export async function getOrCreateForParentId(
-  workspaceId: string,
-  patch: Partial<MockServer> = {},
-) {
+export async function getOrCreateForParentId(workspaceId: string, patch: Partial<MockServer> = {}) {
   const mockServer = await db.getWhere<MockServer>(type, {
     parentId: workspaceId,
   });
@@ -58,10 +53,7 @@ export async function getOrCreateForParentId(
 
   return mockServer;
 }
-export function update(
-  mockServer: MockServer,
-  patch: Partial<MockServer> = {},
-) {
+export function update(mockServer: MockServer, patch: Partial<MockServer> = {}) {
   return db.docUpdate<MockServer>(mockServer, patch);
 }
 
diff --git a/packages/insomnia/src/models/o-auth-2-token.ts b/packages/insomnia/src/models/o-auth-2-token.ts
index ca5a2e8678..a43a230a34 100644
--- a/packages/insomnia/src/models/o-auth-2-token.ts
+++ b/packages/insomnia/src/models/o-auth-2-token.ts
@@ -28,9 +28,7 @@ export interface BaseOAuth2Token {
   errorUri: string;
 }
 
-export const isOAuth2Token = (model: Pick<BaseModel, 'type'>): model is OAuth2Token => (
-  model.type === type
-);
+export const isOAuth2Token = (model: Pick<BaseModel, 'type'>): model is OAuth2Token => model.type === type;
 
 export function init(): BaseOAuth2Token {
   return {
diff --git a/packages/insomnia/src/models/organization.ts b/packages/insomnia/src/models/organization.ts
index 991521fc18..e3cf456340 100644
--- a/packages/insomnia/src/models/organization.ts
+++ b/packages/insomnia/src/models/organization.ts
@@ -15,25 +15,18 @@ export interface Organization {
   metadata: Metadata;
 }
 export const SCRATCHPAD_ORGANIZATION_ID = 'org_scratchpad';
-export const isScratchpadOrganizationId = (organizationId: string) =>
-  organizationId === SCRATCHPAD_ORGANIZATION_ID;
+export const isScratchpadOrganizationId = (organizationId: string) => organizationId === SCRATCHPAD_ORGANIZATION_ID;
 export const isPersonalOrganization = (organization: Organization) =>
   organization.metadata.organizationType === 'personal';
 
-export const isOwnerOfOrganization = ({
-  organization,
-  accountId,
-}: {
-  organization: Organization;
-  accountId: string;
-}) =>
+export const isOwnerOfOrganization = ({ organization, accountId }: { organization: Organization; accountId: string }) =>
   organization.metadata.ownerAccountId === accountId;
 
 export const findPersonalOrganization = (organizations: Organization[], accountId: string) => {
-  return organizations.filter(isPersonalOrganization)
-    .find(organization =>
-      isOwnerOfOrganization({
-        organization,
-        accountId,
-      }));
+  return organizations.filter(isPersonalOrganization).find(organization =>
+    isOwnerOfOrganization({
+      organization,
+      accountId,
+    }),
+  );
 };
diff --git a/packages/insomnia/src/models/plugin-data.ts b/packages/insomnia/src/models/plugin-data.ts
index 4c7bdb368d..a4c4097346 100644
--- a/packages/insomnia/src/models/plugin-data.ts
+++ b/packages/insomnia/src/models/plugin-data.ts
@@ -19,9 +19,7 @@ interface BasePluginData {
 
 export type PluginData = BaseModel & BasePluginData;
 
-export const isPluginData = (model: Pick<BaseModel, 'type'>): model is PluginData => (
-  model.type === type
-);
+export const isPluginData = (model: Pick<BaseModel, 'type'>): model is PluginData => model.type === type;
 
 export function init(): BasePluginData {
   return {
@@ -47,13 +45,13 @@ export async function upsertByKey(plugin: string, key: string, value: string) {
   const doc = await getByKey(plugin, key);
   return doc
     ? update(doc, {
-      value,
-    })
+        value,
+      })
     : create({
-      plugin,
-      key,
-      value,
-    });
+        plugin,
+        key,
+        value,
+      });
 }
 
 export async function removeByKey(plugin: string, key: string) {
diff --git a/packages/insomnia/src/models/project.ts b/packages/insomnia/src/models/project.ts
index f13f579c6b..386f4df40f 100644
--- a/packages/insomnia/src/models/project.ts
+++ b/packages/insomnia/src/models/project.ts
@@ -12,9 +12,12 @@ export const canSync = false;
 export const SCRATCHPAD_PROJECT_ID = `${prefix}_scratchpad`;
 
 export const isScratchpadProject = (project: Pick<Project, '_id'>) => project._id === SCRATCHPAD_PROJECT_ID;
-export const isLocalProject = (project: Pick<Project, 'remoteId'>): project is LocalProject => project.remoteId === null;
-export const isRemoteProject = (project: Pick<Project, 'remoteId'>): project is RemoteProject => !isLocalProject(project);
-export const isGitProject = (project: Project): project is GitProject => 'gitRepositoryId' in project && project.gitRepositoryId !== null;
+export const isLocalProject = (project: Pick<Project, 'remoteId'>): project is LocalProject =>
+  project.remoteId === null;
+export const isRemoteProject = (project: Pick<Project, 'remoteId'>): project is RemoteProject =>
+  !isLocalProject(project);
+export const isGitProject = (project: Project): project is GitProject =>
+  'gitRepositoryId' in project && project.gitRepositoryId !== null;
 export const projectHasSettings = (project: Pick<Project, '_id'>) => !isScratchpadProject(project);
 
 interface CommonProject {
@@ -38,13 +41,9 @@ export interface GitProject extends BaseModel, CommonProject {
 
 export type Project = LocalProject | RemoteProject | GitProject;
 
-export const isProject = (model: Pick<BaseModel, 'type'>): model is Project => (
-  model.type === type
-);
+export const isProject = (model: Pick<BaseModel, 'type'>): model is Project => model.type === type;
 
-export const isProjectId = (id: string | null) => (
-  id?.startsWith(`${prefix}_`)
-);
+export const isProjectId = (id: string | null) => id?.startsWith(`${prefix}_`);
 
 export function init(): Partial<Project> {
   return {
@@ -93,7 +92,10 @@ export function isDefaultOrganizationProject(project: Project) {
   return project.remoteId?.startsWith('proj_team') || project.remoteId?.startsWith('proj_org');
 }
 
-export function getDefaultProjectStorageType(storageRules: StorageRules, project?: Project): 'local' | 'remote' | 'git' {
+export function getDefaultProjectStorageType(
+  storageRules: StorageRules,
+  project?: Project,
+): 'local' | 'remote' | 'git' {
   // When the project exist. That means the user open the settings modal
   if (project) {
     if (isGitProject(project)) {
diff --git a/packages/insomnia/src/models/proto-directory.ts b/packages/insomnia/src/models/proto-directory.ts
index 27fd10b68f..d1e2ef65a0 100644
--- a/packages/insomnia/src/models/proto-directory.ts
+++ b/packages/insomnia/src/models/proto-directory.ts
@@ -18,9 +18,7 @@ interface BaseProtoDirectory {
 
 export type ProtoDirectory = BaseModel & BaseProtoDirectory;
 
-export const isProtoDirectory = (model: Pick<BaseModel, 'type'>): model is ProtoDirectory => (
-  model.type === type
-);
+export const isProtoDirectory = (model: Pick<BaseModel, 'type'>): model is ProtoDirectory => model.type === type;
 
 export function init(): BaseProtoDirectory {
   return {
diff --git a/packages/insomnia/src/models/proto-file.ts b/packages/insomnia/src/models/proto-file.ts
index 76fa464bae..f510095439 100644
--- a/packages/insomnia/src/models/proto-file.ts
+++ b/packages/insomnia/src/models/proto-file.ts
@@ -18,9 +18,7 @@ interface BaseProtoFile {
 
 export type ProtoFile = BaseModel & BaseProtoFile;
 
-export const isProtoFile = (model: Pick<BaseModel, 'type'>): model is ProtoFile => (
-  model.type === type
-);
+export const isProtoFile = (model: Pick<BaseModel, 'type'>): model is ProtoFile => model.type === type;
 
 export function init(): BaseProtoFile {
   return {
diff --git a/packages/insomnia/src/models/request-group-meta.ts b/packages/insomnia/src/models/request-group-meta.ts
index 47c3e1c0db..17a943a2b7 100644
--- a/packages/insomnia/src/models/request-group-meta.ts
+++ b/packages/insomnia/src/models/request-group-meta.ts
@@ -17,9 +17,7 @@ interface BaseRequestGroupMeta {
 
 export type RequestGroupMeta = BaseModel & BaseRequestGroupMeta;
 
-export const isRequestGroupMeta = (model: Pick<BaseModel, 'type'>): model is RequestGroupMeta => (
-  model.type === type
-);
+export const isRequestGroupMeta = (model: Pick<BaseModel, 'type'>): model is RequestGroupMeta => model.type === type;
 
 export function init() {
   return {
diff --git a/packages/insomnia/src/models/request-group.ts b/packages/insomnia/src/models/request-group.ts
index 5c8e361852..40a80ad9b2 100644
--- a/packages/insomnia/src/models/request-group.ts
+++ b/packages/insomnia/src/models/request-group.ts
@@ -13,10 +13,7 @@ export const canDuplicate = true;
 
 export const canSync = true;
 // for those keys do not need to add in model init method
-export const optionalKeys = [
-  'kvPairData',
-  'environmentType',
-];
+export const optionalKeys = ['kvPairData', 'environmentType'];
 interface BaseRequestGroup {
   name: string;
   description: string;
@@ -33,9 +30,7 @@ interface BaseRequestGroup {
 
 export type RequestGroup = BaseModel & BaseRequestGroup;
 
-export const isRequestGroup = (model: Pick<BaseModel, 'type'>): model is RequestGroup => (
-  model.type === type
-);
+export const isRequestGroup = (model: Pick<BaseModel, 'type'>): model is RequestGroup => model.type === type;
 
 export function init(): BaseRequestGroup {
   return {
@@ -99,9 +94,7 @@ export async function duplicate(requestGroup: RequestGroup, patch: Partial<Reque
     metaSortKey: 1,
   });
 
-  const nextSortKey = nextRequestGroup
-    ? nextRequestGroup.metaSortKey
-    : requestGroup.metaSortKey + 100;
+  const nextSortKey = nextRequestGroup ? nextRequestGroup.metaSortKey : requestGroup.metaSortKey + 100;
 
   // Calculate new sort key
   const sortKeyIncrement = (nextSortKey - requestGroup.metaSortKey) / 2;
diff --git a/packages/insomnia/src/models/request-meta.ts b/packages/insomnia/src/models/request-meta.ts
index b4ec683c36..e342b8538c 100644
--- a/packages/insomnia/src/models/request-meta.ts
+++ b/packages/insomnia/src/models/request-meta.ts
@@ -25,9 +25,7 @@ export interface BaseRequestMeta {
 
 export type RequestMeta = BaseModel & BaseRequestMeta;
 
-export const isRequestMeta = (model: Pick<BaseModel, 'type'>): model is RequestMeta => (
-  model.type === type
-);
+export const isRequestMeta = (model: Pick<BaseModel, 'type'>): model is RequestMeta => model.type === type;
 
 export function init() {
   return {
@@ -83,14 +81,13 @@ export async function updateOrCreateByParentId(parentId: string, patch: Partial<
   if (requestMeta) {
     return update(requestMeta, patch);
   }
-    const newPatch = Object.assign(
-      {
-        parentId,
-      },
-      patch,
-    );
-    return create(newPatch);
-
+  const newPatch = Object.assign(
+    {
+      parentId,
+    },
+    patch,
+  );
+  return create(newPatch);
 }
 
 export function all() {
diff --git a/packages/insomnia/src/models/request-version.ts b/packages/insomnia/src/models/request-version.ts
index d7702ce3d8..bdbfab8904 100644
--- a/packages/insomnia/src/models/request-version.ts
+++ b/packages/insomnia/src/models/request-version.ts
@@ -35,9 +35,7 @@ const FIELDS_TO_IGNORE = [
   'name',
 ] as const;
 
-export const isRequestVersion = (model: Pick<BaseModel, 'type'>): model is RequestVersion => (
-  model.type === type
-);
+export const isRequestVersion = (model: Pick<BaseModel, 'type'>): model is RequestVersion => model.type === type;
 
 export function init() {
   return {
@@ -78,9 +76,8 @@ export async function create(request: Request | WebSocketRequest | GrpcRequest)
       compressedRequest,
     });
   }
-    // Re-use the latest version if not modified since
-    return latestRequestVersion;
-
+  // Re-use the latest version if not modified since
+  return latestRequestVersion;
 }
 
 export function getLatestByParentId(parentId: string) {
diff --git a/packages/insomnia/src/models/request.ts b/packages/insomnia/src/models/request.ts
index 38ae260a9f..f3e1c17fd3 100644
--- a/packages/insomnia/src/models/request.ts
+++ b/packages/insomnia/src/models/request.ts
@@ -12,13 +12,9 @@ import type {
   AUTH_NTLM,
   AUTH_OAUTH_1,
   HAWK_ALGORITHM_SHA1,
-  HAWK_ALGORITHM_SHA256} from '../common/constants';
-import {
-  AUTH_BASIC,
-  CONTENT_TYPE_FORM_URLENCODED,
-  getContentTypeFromHeaders,
-  METHOD_GET,
+  HAWK_ALGORITHM_SHA256,
 } from '../common/constants';
+import { AUTH_BASIC, CONTENT_TYPE_FORM_URLENCODED, getContentTypeFromHeaders, METHOD_GET } from '../common/constants';
 import { database as db } from '../common/database';
 import type { OAuth1SignatureMethod } from '../network/o-auth-1/constants';
 import { getOperationType } from '../utils/graph-ql';
@@ -34,7 +30,8 @@ export const prefix = 'req';
 export const canDuplicate = true;
 
 export const canSync = true;
-export type AuthTypes = 'none'
+export type AuthTypes =
+  | 'none'
   | 'apikey'
   | 'oauth2'
   | 'oauth1'
@@ -157,7 +154,8 @@ export interface AuthTypeNone {
   type: typeof AUTH_NONE;
   disabled?: boolean;
 }
-export type RequestAuthentication = AuthTypeOAuth2
+export type RequestAuthentication =
+  | AuthTypeOAuth2
   | AuthTypeBasic
   | AuthTypeBearer
   | AuthTypeDigest
@@ -207,13 +205,20 @@ export const PATH_PARAMETER_REGEX = /\/:[^/?#:]+/g;
 
 export const getPathParametersFromUrl = (url: string): string[] => {
   // Find all path parameters in the URL. Path parameters are defined as segments of the URL that start with a colon.
-  const urlPathParameters = url.match(PATH_PARAMETER_REGEX)?.map(String).map(match => match.replace('/:', '')) || [];
+  const urlPathParameters =
+    url
+      .match(PATH_PARAMETER_REGEX)
+      ?.map(String)
+      .map(match => match.replace('/:', '')) || [];
   const uniqueUrlPathParameters = [...new Set(urlPathParameters)];
 
   return uniqueUrlPathParameters;
 };
 
-export const getCombinedPathParametersFromUrl = (url: string, pathParameters: RequestPathParameter[]): RequestPathParameter[] => {
+export const getCombinedPathParametersFromUrl = (
+  url: string,
+  pathParameters: RequestPathParameter[],
+): RequestPathParameter[] => {
   // Extract path parameters from the URL
   const urlPathParameters = getPathParametersFromUrl(url);
 
@@ -233,8 +238,9 @@ export const getCombinedPathParametersFromUrl = (url: string, pathParameters: Re
   if (urlPathParameters) {
     // Filter out the unsaved URL path parameters
     unsavedUrlPathParameters = new Set(
-      urlPathParameters.filter(p => !savedPathParameters.map(p => p.name).includes(p))
-        .map(p => ({ name: p, value: '' }))
+      urlPathParameters
+        .filter(p => !savedPathParameters.map(p => p.name).includes(p))
+        .map(p => ({ name: p, value: '' })),
     );
   }
 
@@ -274,20 +280,14 @@ export interface BaseRequest {
 
 export type Request = BaseModel & BaseRequest;
 
-export const isRequest = (model: Pick<BaseModel, 'type'>): model is Request => (
-  model.type === type
-);
+export const isRequest = (model: Pick<BaseModel, 'type'>): model is Request => model.type === type;
 
-export const isRequestId = (id?: string | null) => (
-  id?.startsWith(`${prefix}_`)
-);
+export const isRequestId = (id?: string | null) => id?.startsWith(`${prefix}_`);
 
-export const isEventStreamRequest = (model: Pick<BaseModel, 'type'>) => (
-  isRequest(model) && model.headers?.find(h => h.name === 'Accept')?.value === 'text/event-stream'
-);
-export const isGraphqlSubscriptionRequest = (model: Pick<BaseModel, 'type'>) => (
-  isRequest(model) && getOperationType(model) === OperationTypeNode.SUBSCRIPTION
-);
+export const isEventStreamRequest = (model: Pick<BaseModel, 'type'>) =>
+  isRequest(model) && model.headers?.find(h => h.name === 'Accept')?.value === 'text/event-stream';
+export const isGraphqlSubscriptionRequest = (model: Pick<BaseModel, 'type'>) =>
+  isRequest(model) && getOperationType(model) === OperationTypeNode.SUBSCRIPTION;
 
 export function init(): BaseRequest {
   return {
@@ -416,12 +416,15 @@ function migrateBody(request: Request) {
     request.body = {};
   } else {
     const rawBody: string = typeof request.body === 'string' ? request.body : '';
-    request.body = typeof contentType !== 'string' ? {
-      text: rawBody,
-    } : {
-      mimeType: contentType.split(';')[0],
-      text: rawBody,
-    };
+    request.body =
+      typeof contentType !== 'string'
+        ? {
+            text: rawBody,
+          }
+        : {
+            mimeType: contentType.split(';')[0],
+            text: rawBody,
+          };
   }
 
   return request;
diff --git a/packages/insomnia/src/models/response.ts b/packages/insomnia/src/models/response.ts
index 784aafa77a..8c4218d271 100644
--- a/packages/insomnia/src/models/response.ts
+++ b/packages/insomnia/src/models/response.ts
@@ -56,9 +56,7 @@ export interface BaseResponse {
 
 export type Response = BaseModel & BaseResponse;
 
-export const isResponse = (model: Pick<BaseModel, 'type'>): model is Response => (
-  model.type === type
-);
+export const isResponse = (model: Pick<BaseModel, 'type'>): model is Response => model.type === type;
 
 export function init(): BaseResponse {
   return {
@@ -147,11 +145,7 @@ export function remove(response: Response) {
   return db.remove(response);
 }
 
-async function _findRecentForRequest(
-  requestId: string,
-  environmentId: string | null,
-  limit: number,
-) {
+async function _findRecentForRequest(requestId: string, environmentId: string | null, limit: number) {
   const query: Query<Response> = {
     parentId: requestId,
   };
@@ -165,10 +159,7 @@ async function _findRecentForRequest(
   return db.findMostRecentlyModified<Response>(type, query, limit);
 }
 
-export async function getLatestForRequest(
-  requestId: string,
-  environmentId: string | null,
-) {
+export async function getLatestForRequest(requestId: string, environmentId: string | null) {
   const responses = await _findRecentForRequest(requestId, environmentId, 1);
   const response = responses[0] as Response | null | undefined;
   return response || null;
@@ -230,7 +221,6 @@ export const getBodyStream = (
     return fs.createReadStream(response?.bodyPath).pipe(zlib.createGunzip());
   }
   return fs.createReadStream(response?.bodyPath);
-
 };
 export const readCurlResponse = async (options: { bodyPath?: string; bodyCompression?: Compression }) => {
   const readFailureMsg = '[main/curlBridgeAPI] failed to read response body message';
@@ -259,7 +249,9 @@ export const getBodyBuffer = async (
   try {
     const rawBuffer = await fs.promises.readFile(response?.bodyPath);
     if (response?.bodyCompression === 'zip') {
-      return new Promise((resolve, reject) => zlib.gunzip(rawBuffer, (err, buffer) => err ? reject(err) : resolve(buffer)));
+      return new Promise((resolve, reject) =>
+        zlib.gunzip(rawBuffer, (err, buffer) => (err ? reject(err) : resolve(buffer))),
+      );
     }
 
     return rawBuffer;
@@ -281,16 +273,18 @@ export function getTimeline(response: Response, showBody?: boolean) {
     const timelineString = rawBuffer.toString();
     const isLegacyTimelineFormat = timelineString.startsWith('[');
     const timeline = isLegacyTimelineFormat
-      ? JSON.parse(timelineString) as ResponseTimelineEntry[]
+      ? (JSON.parse(timelineString) as ResponseTimelineEntry[])
       : deserializeNDJSON(timelineString);
 
-    const body: ResponseTimelineEntry[] = showBody ? [
-      {
-        name: 'DataOut',
-        timestamp: Date.now(),
-        value: fs.readFileSync(bodyPath).toString(),
-      },
-    ] : [];
+    const body: ResponseTimelineEntry[] = showBody
+      ? [
+          {
+            name: 'DataOut',
+            timestamp: Date.now(),
+            value: fs.readFileSync(bodyPath).toString(),
+          },
+        ]
+      : [];
     const output = [...timeline, ...body];
     return output;
   } catch (err) {
diff --git a/packages/insomnia/src/models/runner-test-result.ts b/packages/insomnia/src/models/runner-test-result.ts
index 41e28d8e85..4d3247a11b 100644
--- a/packages/insomnia/src/models/runner-test-result.ts
+++ b/packages/insomnia/src/models/runner-test-result.ts
@@ -40,9 +40,7 @@ export interface BaseRunnerTestResult {
 
 export type RunnerTestResult = BaseModel & BaseRunnerTestResult;
 
-export const isRunnerTestResult = (model: Pick<BaseModel, 'type'>): model is RunnerTestResult => (
-  model.type === type
-);
+export const isRunnerTestResult = (model: Pick<BaseModel, 'type'>): model is RunnerTestResult => model.type === type;
 
 export function init() {
   return {
diff --git a/packages/insomnia/src/models/settings.ts b/packages/insomnia/src/models/settings.ts
index daf61f7d0f..580af90001 100644
--- a/packages/insomnia/src/models/settings.ts
+++ b/packages/insomnia/src/models/settings.ts
@@ -1,8 +1,4 @@
-import {
-  getAppDefaultDarkTheme,
-  getAppDefaultLightTheme,
-  getAppDefaultTheme,
-} from '../common/constants';
+import { getAppDefaultDarkTheme, getAppDefaultLightTheme, getAppDefaultTheme } from '../common/constants';
 import { database as db } from '../common/database';
 import * as hotkeys from '../common/hotkeys';
 import { HttpVersions, type KeyboardShortcut, type Settings as BaseSettings, UpdateChannel } from '../common/settings';
@@ -17,9 +13,7 @@ export const canSync = false;
 
 export type ThemeSettings = Pick<Settings, 'autoDetectColorScheme' | 'lightTheme' | 'darkTheme' | 'theme'>;
 
-export const isSettings = (model: Pick<BaseModel, 'type'>): model is Settings => (
-  model.type === type
-);
+export const isSettings = (model: Pick<BaseModel, 'type'>): model is Settings => model.type === type;
 
 export function init(): BaseSettings {
   return {
@@ -116,7 +110,7 @@ export async function patch(patch: Partial<Settings>) {
 }
 
 export async function getOrCreate() {
-  const results = await db.all<Settings>(type) || [];
+  const results = (await db.all<Settings>(type)) || [];
 
   if (results.length === 0) {
     return await create();
@@ -125,7 +119,7 @@ export async function getOrCreate() {
 }
 
 export async function get() {
-  const results = await db.all<Settings>(type) || [];
+  const results = (await db.all<Settings>(type)) || [];
 
   return results[0];
 }
@@ -137,13 +131,16 @@ function migrateEnsureHotKeys(settings: Settings): Settings {
   const defaultHotKeyRegistry = hotkeys.newDefaultRegistry();
 
   // Remove any hotkeys that are no longer in the default registry
-  const hotKeyRegistry = (Object.keys(settings.hotKeyRegistry) as KeyboardShortcut[]).reduce((newHotKeyRegistry, key) => {
-    if (key in defaultHotKeyRegistry) {
-      newHotKeyRegistry[key] = settings.hotKeyRegistry[key];
-    }
+  const hotKeyRegistry = (Object.keys(settings.hotKeyRegistry) as KeyboardShortcut[]).reduce(
+    (newHotKeyRegistry, key) => {
+      if (key in defaultHotKeyRegistry) {
+        newHotKeyRegistry[key] = settings.hotKeyRegistry[key];
+      }
 
-    return newHotKeyRegistry;
-  }, {} as Settings['hotKeyRegistry']);
+      return newHotKeyRegistry;
+    },
+    {} as Settings['hotKeyRegistry'],
+  );
 
   settings.hotKeyRegistry = { ...defaultHotKeyRegistry, ...hotKeyRegistry };
   return settings;
diff --git a/packages/insomnia/src/models/stats.ts b/packages/insomnia/src/models/stats.ts
index 4d68c2f415..5cb34c0561 100644
--- a/packages/insomnia/src/models/stats.ts
+++ b/packages/insomnia/src/models/stats.ts
@@ -30,9 +30,7 @@ export interface BaseStats {
 
 export type Stats = BaseModel & BaseStats;
 
-export const isStats = (model: Pick<BaseModel, 'type'>): model is Stats => (
-  model.type === type
-);
+export const isStats = (model: Pick<BaseModel, 'type'>): model is Stats => model.type === type;
 
 export function init(): BaseStats {
   return {
@@ -61,24 +59,19 @@ export async function update(patch: Partial<Stats>) {
 }
 
 export async function get() {
-  const results = await db.all<Stats>(type) || [];
+  const results = (await db.all<Stats>(type)) || [];
 
   if (results.length === 0) {
     return create();
   }
-    return results[0];
-
+  return results[0];
 }
 
 export function all() {
   return db.all<Stats>(type) || [];
 }
 
-export async function incrementRequestStats({
-  createdRequests,
-  deletedRequests,
-  executedRequests,
-}: Partial<Stats>) {
+export async function incrementRequestStats({ createdRequests, deletedRequests, executedRequests }: Partial<Stats>) {
   const stats = await get();
   await update({
     ...(createdRequests && {
diff --git a/packages/insomnia/src/models/unit-test-result.ts b/packages/insomnia/src/models/unit-test-result.ts
index 1fdf32b75f..cc380bb286 100644
--- a/packages/insomnia/src/models/unit-test-result.ts
+++ b/packages/insomnia/src/models/unit-test-result.ts
@@ -19,9 +19,7 @@ export interface BaseUnitTestResult {
 
 export type UnitTestResult = BaseModel & BaseUnitTestResult;
 
-export const isUnitTestResult = (model: Pick<BaseModel, 'type'>): model is UnitTestResult => (
-  model.type === type
-);
+export const isUnitTestResult = (model: Pick<BaseModel, 'type'>): model is UnitTestResult => model.type === type;
 
 export function init() {
   return {
diff --git a/packages/insomnia/src/models/unit-test-suite.ts b/packages/insomnia/src/models/unit-test-suite.ts
index 7473c8c793..1eb868f49e 100644
--- a/packages/insomnia/src/models/unit-test-suite.ts
+++ b/packages/insomnia/src/models/unit-test-suite.ts
@@ -17,9 +17,7 @@ export interface BaseUnitTestSuite {
 
 export type UnitTestSuite = BaseModel & BaseUnitTestSuite;
 
-export const isUnitTestSuite = (model: Pick<BaseModel, 'type'>): model is UnitTestSuite => (
-  model.type === type
-);
+export const isUnitTestSuite = (model: Pick<BaseModel, 'type'>): model is UnitTestSuite => model.type === type;
 
 export function init() {
   return {
diff --git a/packages/insomnia/src/models/unit-test.ts b/packages/insomnia/src/models/unit-test.ts
index ae74d615cb..9a3b08b394 100644
--- a/packages/insomnia/src/models/unit-test.ts
+++ b/packages/insomnia/src/models/unit-test.ts
@@ -19,9 +19,7 @@ interface BaseUnitTest {
 
 export type UnitTest = BaseModel & BaseUnitTest;
 
-export const isUnitTest = (model: Pick<BaseModel, 'type'>): model is UnitTest => (
-  model.type === type
-);
+export const isUnitTest = (model: Pick<BaseModel, 'type'>): model is UnitTest => model.type === type;
 
 export function init() {
   return {
diff --git a/packages/insomnia/src/models/user-session.ts b/packages/insomnia/src/models/user-session.ts
index 2a919adb57..81c3aafab8 100644
--- a/packages/insomnia/src/models/user-session.ts
+++ b/packages/insomnia/src/models/user-session.ts
@@ -72,7 +72,7 @@ export async function patch(patch: Partial<UserSession>) {
 }
 
 export async function getOrCreate() {
-  const results = await db.all<UserSession>(type) || [];
+  const results = (await db.all<UserSession>(type)) || [];
 
   if (results.length === 0) {
     return await create();
@@ -81,7 +81,7 @@ export async function getOrCreate() {
 }
 
 export async function get() {
-  const results = await db.all<UserSession>(type) || [];
+  const results = (await db.all<UserSession>(type)) || [];
 
   return results[0];
 }
diff --git a/packages/insomnia/src/models/websocket-payload.ts b/packages/insomnia/src/models/websocket-payload.ts
index bd062c4d05..da67ad6b39 100644
--- a/packages/insomnia/src/models/websocket-payload.ts
+++ b/packages/insomnia/src/models/websocket-payload.ts
@@ -19,13 +19,9 @@ export interface BaseWebSocketPayload {
 
 export type WebSocketPayload = BaseModel & BaseWebSocketPayload & { type: typeof type };
 
-export const isWebSocketPayload = (model: Pick<BaseModel, 'type'>): model is WebSocketPayload => (
-  model.type === type
-);
+export const isWebSocketPayload = (model: Pick<BaseModel, 'type'>): model is WebSocketPayload => model.type === type;
 
-export const isWebSocketPayloadId = (id: string | null) => (
-  id?.startsWith(`${prefix}_`)
-);
+export const isWebSocketPayloadId = (id: string | null) => id?.startsWith(`${prefix}_`);
 
 export const init = (): BaseWebSocketPayload => ({
   name: 'New Payload',
@@ -45,10 +41,7 @@ export const create = (patch: Partial<WebSocketPayload> = {}) => {
 
 export const remove = (obj: WebSocketPayload) => database.remove(obj);
 
-export const update = (
-  obj: WebSocketPayload,
-  patch: Partial<WebSocketPayload> = {}
-) => database.docUpdate(obj, patch);
+export const update = (obj: WebSocketPayload, patch: Partial<WebSocketPayload> = {}) => database.docUpdate(obj, patch);
 
 export async function duplicate(request: WebSocketPayload, patch: Partial<WebSocketPayload> = {}) {
   // Only set name and "(Copy)" if the patch does
diff --git a/packages/insomnia/src/models/websocket-request.ts b/packages/insomnia/src/models/websocket-request.ts
index e1fd685adf..17630681b3 100644
--- a/packages/insomnia/src/models/websocket-request.ts
+++ b/packages/insomnia/src/models/websocket-request.ts
@@ -29,13 +29,9 @@ export interface BaseWebSocketRequest {
 
 export type WebSocketRequest = BaseModel & BaseWebSocketRequest & { type: typeof type };
 
-export const isWebSocketRequest = (model: Pick<BaseModel, 'type'>): model is WebSocketRequest => (
-  model.type === type
-);
+export const isWebSocketRequest = (model: Pick<BaseModel, 'type'>): model is WebSocketRequest => model.type === type;
 
-export const isWebSocketRequestId = (id?: string | null) => (
-  id?.startsWith(`${prefix}_`)
-);
+export const isWebSocketRequestId = (id?: string | null) => id?.startsWith(`${prefix}_`);
 
 export const init = (): BaseWebSocketRequest => ({
   name: 'New WebSocket Request',
@@ -64,10 +60,7 @@ export const create = (patch: Partial<WebSocketRequest> = {}) => {
 
 export const remove = (obj: WebSocketRequest) => database.remove(obj);
 
-export const update = (
-  obj: WebSocketRequest,
-  patch: Partial<WebSocketRequest> = {}
-) => database.docUpdate(obj, patch);
+export const update = (obj: WebSocketRequest, patch: Partial<WebSocketRequest> = {}) => database.docUpdate(obj, patch);
 
 // This is duplicated (lol) from models/request.js
 export async function duplicate(request: WebSocketRequest, patch: Partial<WebSocketRequest> = {}) {
diff --git a/packages/insomnia/src/models/websocket-response.ts b/packages/insomnia/src/models/websocket-response.ts
index 1c430e3bb1..8dcb5c9e2b 100644
--- a/packages/insomnia/src/models/websocket-response.ts
+++ b/packages/insomnia/src/models/websocket-response.ts
@@ -37,9 +37,7 @@ export interface BaseWebSocketResponse {
 
 export type WebSocketResponse = BaseModel & BaseWebSocketResponse;
 
-export const isWebSocketResponse = (model: Pick<BaseModel, 'type'>): model is WebSocketResponse => (
-  model.type === type
-);
+export const isWebSocketResponse = (model: Pick<BaseModel, 'type'>): model is WebSocketResponse => model.type === type;
 
 export function init(): BaseWebSocketResponse {
   return {
@@ -145,11 +143,7 @@ export async function create(patch: Partial<WebSocketResponse> = {}, maxResponse
   return db.docCreate(type, patch);
 }
 
-async function _findRecentForRequest(
-  requestId: string,
-  environmentId: string | null,
-  limit: number,
-) {
+async function _findRecentForRequest(requestId: string, environmentId: string | null, limit: number) {
   const query: Query<WebSocketResponse> = {
     parentId: requestId,
   };
@@ -162,10 +156,7 @@ async function _findRecentForRequest(
   return db.findMostRecentlyModified<WebSocketResponse>(type, query, limit);
 }
 
-export async function getLatestForRequest(
-  requestId: string,
-  environmentId: string | null,
-) {
+export async function getLatestForRequest(requestId: string, environmentId: string | null) {
   const responses = await _findRecentForRequest(requestId, environmentId, 1);
   const response = responses[0] as WebSocketResponse | null | undefined;
   return response || null;
diff --git a/packages/insomnia/src/models/workspace-meta.ts b/packages/insomnia/src/models/workspace-meta.ts
index 74f9747ed8..415c5062ba 100644
--- a/packages/insomnia/src/models/workspace-meta.ts
+++ b/packages/insomnia/src/models/workspace-meta.ts
@@ -23,9 +23,7 @@ export interface BaseWorkspaceMeta {
 
 export type WorkspaceMeta = BaseWorkspaceMeta & BaseModel;
 
-export const isWorkspaceMeta = (model: Pick<BaseModel, 'type'>): model is WorkspaceMeta => (
-  model.type === type
-);
+export const isWorkspaceMeta = (model: Pick<BaseModel, 'type'>): model is WorkspaceMeta => model.type === type;
 
 export function init(): BaseWorkspaceMeta {
   return {
diff --git a/packages/insomnia/src/models/workspace.ts b/packages/insomnia/src/models/workspace.ts
index d60c13bd41..7fcda4b6ee 100644
--- a/packages/insomnia/src/models/workspace.ts
+++ b/packages/insomnia/src/models/workspace.ts
@@ -31,25 +31,16 @@ export const WorkspaceScopeKeys = {
 
 export type Workspace = BaseModel & BaseWorkspace;
 
-export const isWorkspace = (model: Pick<BaseModel, 'type'>): model is Workspace => (
-  model.type === type
-);
+export const isWorkspace = (model: Pick<BaseModel, 'type'>): model is Workspace => model.type === type;
 
-export const isDesign = (workspace: Pick<Workspace, 'scope'>) => (
-  workspace.scope === WorkspaceScopeKeys.design
-);
+export const isDesign = (workspace: Pick<Workspace, 'scope'>) => workspace.scope === WorkspaceScopeKeys.design;
 
-export const isCollection = (workspace: Pick<Workspace, 'scope'>) => (
-  workspace.scope === WorkspaceScopeKeys.collection
-);
+export const isCollection = (workspace: Pick<Workspace, 'scope'>) => workspace.scope === WorkspaceScopeKeys.collection;
 
-export const isMockServer = (workspace: Pick<Workspace, 'scope'>) => (
-  workspace.scope === WorkspaceScopeKeys.mockServer
-);
+export const isMockServer = (workspace: Pick<Workspace, 'scope'>) => workspace.scope === WorkspaceScopeKeys.mockServer;
 
-export const isEnvironment = (workspace: Pick<Workspace, 'scope'>) => (
-  workspace.scope === WorkspaceScopeKeys.environment
-);
+export const isEnvironment = (workspace: Pick<Workspace, 'scope'>) =>
+  workspace.scope === WorkspaceScopeKeys.environment;
 
 export const init = (): BaseWorkspace => ({
   name: `New ${strings.collection.singular}`,
@@ -146,10 +137,12 @@ type MigrationWorkspace = Merge<Workspace, { scope: OldScopeTypes | Workspace['s
  * Ensure workspace scope is set to a valid entry
  */
 function _migrateScope(workspace: MigrationWorkspace) {
-  if (workspace.scope === WorkspaceScopeKeys.design
-    || workspace.scope === WorkspaceScopeKeys.collection
-    || workspace.scope === WorkspaceScopeKeys.mockServer
-    || workspace.scope === WorkspaceScopeKeys.environment) {
+  if (
+    workspace.scope === WorkspaceScopeKeys.design ||
+    workspace.scope === WorkspaceScopeKeys.collection ||
+    workspace.scope === WorkspaceScopeKeys.mockServer ||
+    workspace.scope === WorkspaceScopeKeys.environment
+  ) {
     return workspace as Workspace;
   }
   // designer and spec => design, unset => collection
diff --git a/packages/insomnia/src/network/__tests__/authentication.test.ts b/packages/insomnia/src/network/__tests__/authentication.test.ts
index 6d52a8e9c0..ebbb87749d 100644
--- a/packages/insomnia/src/network/__tests__/authentication.test.ts
+++ b/packages/insomnia/src/network/__tests__/authentication.test.ts
@@ -1,12 +1,7 @@
 import { describe, expect, it } from 'vitest';
 
 import { AUTH_API_KEY, AUTH_OAUTH_1 } from '../../common/constants';
-import {
-  _buildBearerHeader,
-  getAuthHeader,
-  getAuthObjectOrNull,
-  getAuthQueryParams,
-} from '../authentication';
+import { _buildBearerHeader, getAuthHeader, getAuthObjectOrNull, getAuthQueryParams } from '../authentication';
 
 describe('OAuth 1.0', () => {
   it('Does OAuth 1.0', async () => {
@@ -165,8 +160,8 @@ describe('API Key', () => {
       };
       const header = await getAuthHeader(request, 'https://insomnia.rest/');
       expect(header).toEqual({
-        'name': 'x-api-key',
-        'value': 'test',
+        name: 'x-api-key',
+        value: 'test',
       });
     });
 
@@ -184,8 +179,8 @@ describe('API Key', () => {
       };
       const header = await getAuthHeader(request, 'https://insomnia.rest/');
       expect(header).toEqual({
-        'name': 'Cookie',
-        'value': 'x-api-key=test',
+        name: 'Cookie',
+        value: 'x-api-key=test',
       });
     });
   });
@@ -201,8 +196,8 @@ describe('API Key', () => {
 
       const header = getAuthQueryParams(authentication, 'https://insomnia.rest/');
       expect(header).toEqual({
-        'name': 'x-api-key',
-        'value': 'test',
+        name: 'x-api-key',
+        value: 'test',
       });
     });
   });
diff --git a/packages/insomnia/src/network/__tests__/certificate.test.ts b/packages/insomnia/src/network/__tests__/certificate.test.ts
index ec867bedc1..beec2e7113 100644
--- a/packages/insomnia/src/network/__tests__/certificate.test.ts
+++ b/packages/insomnia/src/network/__tests__/certificate.test.ts
@@ -4,7 +4,6 @@ import type { ClientCertificate } from '../../models/client-certificate';
 import { filterClientCertificates } from '../certificate';
 
 describe('filterClientCertificates', () => {
-
   const requestUrl = 'https://www.example.com:1234';
   const clientCertificatesWithMatchPort: ClientCertificate[] = [
     {
diff --git a/packages/insomnia/src/network/__tests__/is-url-matched-in-no-proxy-rule.test.ts b/packages/insomnia/src/network/__tests__/is-url-matched-in-no-proxy-rule.test.ts
index a0dada4150..5770cc97d6 100644
--- a/packages/insomnia/src/network/__tests__/is-url-matched-in-no-proxy-rule.test.ts
+++ b/packages/insomnia/src/network/__tests__/is-url-matched-in-no-proxy-rule.test.ts
@@ -122,5 +122,4 @@ describe('isUrlMatchedInNoProxyRule - noProxyRule hostname and wildcard matches'
     const url = 'https://localhost/username/repo-name';
     expect(isUrlMatchedInNoProxyRule(url, noProxyRule)).toBe(false);
   });
-
 });
diff --git a/packages/insomnia/src/network/__tests__/multipart.test.ts b/packages/insomnia/src/network/__tests__/multipart.test.ts
index a570729367..ccb5059324 100644
--- a/packages/insomnia/src/network/__tests__/multipart.test.ts
+++ b/packages/insomnia/src/network/__tests__/multipart.test.ts
@@ -5,7 +5,6 @@ import { describe, expect, it } from 'vitest';
 import { buildMultipart, DEFAULT_BOUNDARY } from '../../main/network/multipart';
 
 describe('buildMultipart()', () => {
-
   it('builds a simple request', async () => {
     const { filePath, boundary, contentLength } = await buildMultipart([
       {
diff --git a/packages/insomnia/src/network/__tests__/network.test.ts b/packages/insomnia/src/network/__tests__/network.test.ts
index 1fc0041ff0..a6b2a7537d 100644
--- a/packages/insomnia/src/network/__tests__/network.test.ts
+++ b/packages/insomnia/src/network/__tests__/network.test.ts
@@ -21,7 +21,8 @@ import * as models from '../../models';
 import * as networkUtils from '../network';
 import { getSetCookiesFromResponseHeaders } from '../network';
 
-const getRenderedRequest = async (args: Parameters<typeof getRenderedRequestAndContext>[0]) => (await getRenderedRequestAndContext(args)).request;
+const getRenderedRequest = async (args: Parameters<typeof getRenderedRequestAndContext>[0]) =>
+  (await getRenderedRequestAndContext(args)).request;
 
 describe('sendCurlAndWriteTimeline()', () => {
   beforeEach(async () => {
@@ -101,7 +102,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -180,7 +181,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -284,7 +285,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -348,7 +349,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -432,7 +433,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -497,7 +498,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -541,7 +542,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -584,7 +585,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -628,7 +629,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       settings,
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -733,7 +734,7 @@ describe('sendCurlAndWriteTimeline()', () => {
       null,
       { ...settings, validateSSL: false },
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     const bodyBuffer = await models.response.getBodyBuffer(response);
     const body = JSON.parse(String(bodyBuffer));
@@ -783,12 +784,16 @@ describe('sendCurlAndWriteTimeline()', () => {
       parentId: workspace._id,
     });
     const renderedRequest = await getRenderedRequest({ request });
-    const responseV1 = await networkUtils.sendCurlAndWriteTimeline(renderedRequest, [], null, {
-      ...settings,
-      preferredHttpVersion: HttpVersions.V1_0,
-    },
+    const responseV1 = await networkUtils.sendCurlAndWriteTimeline(
+      renderedRequest,
+      [],
+      null,
+      {
+        ...settings,
+        preferredHttpVersion: HttpVersions.V1_0,
+      },
       '/tmp/res_id',
-      'res_id'
+      'res_id',
     );
     expect(JSON.parse(String(await models.response.getBodyBuffer(responseV1))).options.HTTP_VERSION).toBe('V1_0');
     expect(getHttpVersion(HttpVersions.V1_0).curlHttpVersion).toBe(CurlHttpVersion.V1_0);
@@ -1030,7 +1035,10 @@ describe('getSetCookiesFromResponseHeaders', () => {
     expect(getSetCookiesFromResponseHeaders(headers)).toEqual(['monster']);
   });
   it('gets two case-insenstive set-cookies', () => {
-    const headers = [{ name: 'Set-Cookie', value: 'monster' }, { name: 'set-cookie', value: 'mash' }];
+    const headers = [
+      { name: 'Set-Cookie', value: 'monster' },
+      { name: 'set-cookie', value: 'mash' },
+    ];
     expect(getSetCookiesFromResponseHeaders(headers)).toEqual(['monster', 'mash']);
   });
 });
@@ -1046,7 +1054,10 @@ describe('getCurrentUrl for tough-cookie', () => {
     expect(networkUtils.getCurrentUrl({ headerResults, finalUrl })).toEqual(finalUrl + '/cookies');
   });
   it('appends only last location to finalUrl', () => {
-    const headerResults = [{ headers: [{ name: 'Location', value: '/cookies' }] }, { headers: [{ name: 'location', value: '/biscuit' }] }];
+    const headerResults = [
+      { headers: [{ name: 'Location', value: '/cookies' }] },
+      { headers: [{ name: 'location', value: '/biscuit' }] },
+    ];
     const finalUrl = 'http://mergemyshit.dev';
     expect(networkUtils.getCurrentUrl({ headerResults, finalUrl })).toEqual(finalUrl + '/biscuit');
   });
@@ -1055,23 +1066,59 @@ describe('getCurrentUrl for tough-cookie', () => {
 describe('getOrInheritHeaders', () => {
   it('should combine headers', () => {
     const requestGroups = [{ headers: [{ name: 'foo', value: 'bar' }] }, { headers: [{ name: 'baz', value: 'qux' }] }];
-    const request = { headers: [{ name: 'foo', value: 'bar' }, { name: 'baz', value: 'qux' }] };
-    expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([{ name: 'baz', value: 'qux, qux' }, { name: 'foo', value: 'bar, bar' }]);
+    const request = {
+      headers: [
+        { name: 'foo', value: 'bar' },
+        { name: 'baz', value: 'qux' },
+      ],
+    };
+    expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([
+      { name: 'baz', value: 'qux, qux' },
+      { name: 'foo', value: 'bar, bar' },
+    ]);
   });
   it('should use last header casing', () => {
     const requestGroups = [{ headers: [{ name: 'x-foo', value: 'bar' }] }];
     const request = { headers: [{ name: 'X-Foo', value: 'baz' }] };
-    expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([{ name: 'X-Foo', value: 'bar, baz' }]);
+    expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([
+      { name: 'X-Foo', value: 'bar, baz' },
+    ]);
   });
   it('should not combine special headers', () => {
-    const requestGroups = [{ headers: [{ name: 'content-type', value: 'application/json' }, { name: 'Connection', value: 'close' }] }];
-    const request = { headers: [{ name: 'Content-Type', value: 'text/plain' }, { name: 'connection', value: 'keep-alive' }] };
-    expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([{ name: 'connection', value: 'keep-alive' }, { name: 'Content-Type', value: 'text/plain' }]);
+    const requestGroups = [
+      {
+        headers: [
+          { name: 'content-type', value: 'application/json' },
+          { name: 'Connection', value: 'close' },
+        ],
+      },
+    ];
+    const request = {
+      headers: [
+        { name: 'Content-Type', value: 'text/plain' },
+        { name: 'connection', value: 'keep-alive' },
+      ],
+    };
+    expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([
+      { name: 'connection', value: 'keep-alive' },
+      { name: 'Content-Type', value: 'text/plain' },
+    ]);
   });
   it('should not allow an empty header name', () => {
-    const requestGroups = [{ headers: [{ name: '', value: 'bar' }, { name: ' ', value: 'foo' }] }];
-    const request = { headers: [{ name: '', value: 'baz' }, { name: '     ', value: 'qux' }] };
+    const requestGroups = [
+      {
+        headers: [
+          { name: '', value: 'bar' },
+          { name: ' ', value: 'foo' },
+        ],
+      },
+    ];
+    const request = {
+      headers: [
+        { name: '', value: 'baz' },
+        { name: '     ', value: 'qux' },
+      ],
+    };
     expect(networkUtils.getOrInheritHeaders({ request, requestGroups })).toEqual([]);
   });
-
 });
diff --git a/packages/insomnia/src/network/__tests__/parse-header-strings.test.ts b/packages/insomnia/src/network/__tests__/parse-header-strings.test.ts
index 7277af85b9..be834e65e9 100644
--- a/packages/insomnia/src/network/__tests__/parse-header-strings.test.ts
+++ b/packages/insomnia/src/network/__tests__/parse-header-strings.test.ts
@@ -11,19 +11,35 @@ describe('parseHeaderStrings', () => {
 
   it('should disable expect and transfer-encoding with body', () => {
     const req = { authentication: {}, body: {}, headers: [] };
-    expect(parseHeaderStrings({ req, requestBody: 'test' })).toEqual(['Expect:', 'Transfer-Encoding:', 'Accept: */*', 'Accept-Encoding:', 'content-type:']);
+    expect(parseHeaderStrings({ req, requestBody: 'test' })).toEqual([
+      'Expect:',
+      'Transfer-Encoding:',
+      'Accept: */*',
+      'Accept-Encoding:',
+      'content-type:',
+    ]);
   });
 
   it('should add boundary with multipart body path', () => {
     const req = { authentication: {}, body: { mimeType: CONTENT_TYPE_FORM_DATA }, headers: [] };
-    expect(parseHeaderStrings({ req, requestBodyPath: '/tmp/x.z' })).toEqual(['Expect:', 'Transfer-Encoding:', 'Content-Type: multipart/form-data; boundary=X-INSOMNIA-BOUNDARY', 'Accept: */*', 'Accept-Encoding:']);
+    expect(parseHeaderStrings({ req, requestBodyPath: '/tmp/x.z' })).toEqual([
+      'Expect:',
+      'Transfer-Encoding:',
+      'Content-Type: multipart/form-data; boundary=X-INSOMNIA-BOUNDARY',
+      'Accept: */*',
+      'Accept-Encoding:',
+    ]);
   });
 
   it('should sign with aws iam', () => {
-    const req = { authentication: {
-      sessionToken: 'someTokenSomethingSomething',
-      type: AUTH_AWS_IAM,
-    }, body: {}, headers: [] };
+    const req = {
+      authentication: {
+        sessionToken: 'someTokenSomethingSomething',
+        type: AUTH_AWS_IAM,
+      },
+      body: {},
+      headers: [],
+    };
     const [host, token, date, authorization] = parseHeaderStrings({ req, finalUrl: 'http://x.y' });
     expect(host).toBe('Host: x.y');
     expect(token).toContain('X-Amz-Security-Token: someTokenSomethingSomething');
diff --git a/packages/insomnia/src/network/__tests__/url-matches-cert-host.test.ts b/packages/insomnia/src/network/__tests__/url-matches-cert-host.test.ts
index e9c413e5b5..8273ec7c55 100644
--- a/packages/insomnia/src/network/__tests__/url-matches-cert-host.test.ts
+++ b/packages/insomnia/src/network/__tests__/url-matches-cert-host.test.ts
@@ -4,7 +4,6 @@ import { urlMatchesCertHost } from '../url-matches-cert-host';
 
 describe('urlMatchesCertHost', () => {
   describe('when the certificate host has no wildcard', () => {
-
     it('should return false if the requested host does not match the certificate host', () => {
       const requestUrl = 'https://www.example.org';
       const certificateHost = 'https://www.example.com';
diff --git a/packages/insomnia/src/network/authentication.ts b/packages/insomnia/src/network/authentication.ts
index 73d7fa5484..fc05fade3f 100644
--- a/packages/insomnia/src/network/authentication.ts
+++ b/packages/insomnia/src/network/authentication.ts
@@ -89,8 +89,7 @@ export async function getAuthHeader(renderedRequest: RenderedRequest, url: strin
         value: oAuth1Token.Authorization,
       };
     }
-      return;
-
+    return;
   }
 
   if (authentication.type === AUTH_HAWK) {
@@ -131,9 +130,7 @@ export async function getAuthHeader(renderedRequest: RenderedRequest, url: strin
 
     if (parsedAdditionalClaims) {
       if (typeof parsedAdditionalClaims !== 'object') {
-        throw new Error(
-          `additional-claims must be an object received: '${typeof parsedAdditionalClaims}' instead`,
-        );
+        throw new Error(`additional-claims must be an object received: '${typeof parsedAdditionalClaims}' instead`);
       }
     }
     const generator = (await import('httplease-asap')).createAuthHeaderGenerator({
@@ -189,6 +186,7 @@ export const _buildBearerHeader = (accessToken: string, prefix?: string) => {
 
   return header;
 };
-export const isAuthEnabled = (auth?: RequestAuthentication | {}) => (auth && 'disabled' in auth) ? auth.disabled !== true : true;
+export const isAuthEnabled = (auth?: RequestAuthentication | {}) =>
+  auth && 'disabled' in auth ? auth.disabled !== true : true;
 export const getAuthObjectOrNull = (auth?: RequestAuthentication | {} | null): RequestAuthentication | null =>
-  (!auth || Object.keys(auth).length === 0 || !('type' in auth)) ? null : auth;
+  !auth || Object.keys(auth).length === 0 || !('type' in auth) ? null : auth;
diff --git a/packages/insomnia/src/network/basic-auth/get-header.ts b/packages/insomnia/src/network/basic-auth/get-header.ts
index 4439aa96f9..e618e19fbc 100644
--- a/packages/insomnia/src/network/basic-auth/get-header.ts
+++ b/packages/insomnia/src/network/basic-auth/get-header.ts
@@ -1,10 +1,6 @@
 import type { RequestHeader } from '../../models/request';
 
-export function getBasicAuthHeader(
-  username?: string | null,
-  password?: string | null,
-  encoding = 'utf8',
-) {
+export function getBasicAuthHeader(username?: string | null, password?: string | null, encoding = 'utf8') {
   const name = 'Authorization';
   const header = `${username || ''}:${password || ''}`;
   // @ts-expect-error -- TSCONVERSION appears to be a genuine error
diff --git a/packages/insomnia/src/network/bearer-auth/__tests__/get-header.test.ts b/packages/insomnia/src/network/bearer-auth/__tests__/get-header.test.ts
index 4fd64edf66..968a4807aa 100644
--- a/packages/insomnia/src/network/bearer-auth/__tests__/get-header.test.ts
+++ b/packages/insomnia/src/network/bearer-auth/__tests__/get-header.test.ts
@@ -3,7 +3,6 @@ import { describe, expect, it } from 'vitest';
 import { getBearerAuthHeader } from '../get-header';
 
 describe('getBearerAuthHeader()', () => {
-
   it('succeed with token and prefix', () => {
     const header = getBearerAuthHeader('token', 'prefix');
     expect(header).toEqual({
diff --git a/packages/insomnia/src/network/certificate.ts b/packages/insomnia/src/network/certificate.ts
index 02904dacf8..a9d1c3bdb0 100644
--- a/packages/insomnia/src/network/certificate.ts
+++ b/packages/insomnia/src/network/certificate.ts
@@ -2,11 +2,19 @@ import type { ClientCertificate } from '../models/client-certificate';
 import { setDefaultProtocol } from '../utils/url/protocol';
 import { urlMatchesCertHost } from './url-matches-cert-host';
 
-export function filterClientCertificates(clientCertificates: ClientCertificate[], requestUrl: string, protocol?: string) {
-  const res = clientCertificates.filter(c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, protocol), requestUrl, true));
+export function filterClientCertificates(
+  clientCertificates: ClientCertificate[],
+  requestUrl: string,
+  protocol?: string,
+) {
+  const res = clientCertificates.filter(
+    c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, protocol), requestUrl, true),
+  );
   // If didn't get a matching certificate at the first time, ignore the port check and try again
   if (!res.length) {
-    return clientCertificates.filter(c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, protocol), requestUrl, false));
+    return clientCertificates.filter(
+      c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, protocol), requestUrl, false),
+    );
   }
   return res;
 }
diff --git a/packages/insomnia/src/network/concurrency.ts b/packages/insomnia/src/network/concurrency.ts
index 5354b6c0b0..d9ed06bd50 100644
--- a/packages/insomnia/src/network/concurrency.ts
+++ b/packages/insomnia/src/network/concurrency.ts
@@ -10,53 +10,61 @@ import type { Settings } from '../models/settings';
 import { cancellableExecution } from './cancellation';
 
 export interface ExecuteScriptContext {
-    request: Request;
-    environment: {
-        id: string;
-        name: string;
-        data: object;
-    };
-    baseEnvironment: {
-        id: string;
-        name: string;
-        data: object;
-    };
-    clientCertificates: ClientCertificate[];
-    settings: Settings;
-    globals?: object;
-    cookieJar: CookieJar;
-    requestTestResults?: RequestTestResult[];
+  request: Request;
+  environment: {
+    id: string;
+    name: string;
+    data: object;
+  };
+  baseEnvironment: {
+    id: string;
+    name: string;
+    data: object;
+  };
+  clientCertificates: ClientCertificate[];
+  settings: Settings;
+  globals?: object;
+  cookieJar: CookieJar;
+  requestTestResults?: RequestTestResult[];
 }
 
 export interface TransformedExecuteScriptContext {
-    error?: string;
-    request: Request;
-    environment: Environment;
-    baseEnvironment: Environment;
-    clientCertificates: ClientCertificate[];
-    settings: Settings;
-    globals?: Environment;
-    cookieJar: CookieJar;
-    requestTestResults?: RequestTestResult[];
-    userUploadEnvironment?: UserUploadEnvironment;
-    parentFolders: { id: string; name: string; environment: Record<string, any> }[];
+  error?: string;
+  request: Request;
+  environment: Environment;
+  baseEnvironment: Environment;
+  clientCertificates: ClientCertificate[];
+  settings: Settings;
+  globals?: Environment;
+  cookieJar: CookieJar;
+  requestTestResults?: RequestTestResult[];
+  userUploadEnvironment?: UserUploadEnvironment;
+  parentFolders: { id: string; name: string; environment: Record<string, any> }[];
 }
 
 interface Task {
-    script: string;
-    context: RequestContext;
+  script: string;
+  context: RequestContext;
 }
 
 const q: queueAsPromised<Task> = fastq.promise(asyncWorker, 1);
 
 async function asyncWorker(arg: Task): Promise<any> {
-    const timeoutValue = arg.context.settings.timeout || 30000;
-    const timeoutPromise = new Promise<{ error: string }>(resolve => setTimeout(resolve, timeoutValue, { error: `Executing script timeout: ${timeoutValue}` }));
-    const executionPromise = Promise.race([window.main.hiddenBrowserWindow.runScript({ script: arg.script, context: arg.context }), timeoutPromise]);
-    const result = await cancellableExecution({ id: arg.context.request._id, fn: executionPromise });
-    return result;
+  const timeoutValue = arg.context.settings.timeout || 30000;
+  const timeoutPromise = new Promise<{ error: string }>(resolve =>
+    setTimeout(resolve, timeoutValue, { error: `Executing script timeout: ${timeoutValue}` }),
+  );
+  const executionPromise = Promise.race([
+    window.main.hiddenBrowserWindow.runScript({ script: arg.script, context: arg.context }),
+    timeoutPromise,
+  ]);
+  const result = await cancellableExecution({ id: arg.context.request._id, fn: executionPromise });
+  return result;
 }
 
-export const runScriptConcurrently = async (options: { script: string; context: RequestContext }): Promise<RequestContext | { error: string }> => {
-    return await q.push(options);
+export const runScriptConcurrently = async (options: {
+  script: string;
+  context: RequestContext;
+}): Promise<RequestContext | { error: string }> => {
+  return await q.push(options);
 };
diff --git a/packages/insomnia/src/network/grpc/__tests__/write-proto-file.test.ts b/packages/insomnia/src/network/grpc/__tests__/write-proto-file.test.ts
index 582af09870..278230f652 100644
--- a/packages/insomnia/src/network/grpc/__tests__/write-proto-file.test.ts
+++ b/packages/insomnia/src/network/grpc/__tests__/write-proto-file.test.ts
@@ -107,12 +107,7 @@ describe('writeProtoFile', () => {
       // Act
       const result = await writeProtoFile(pf);
       // Assert
-      const expectedRootDir = path.join(
-        tmpDirPath,
-        'insomnia-grpc',
-        `${pd._id}.${pd.modified}`,
-        pd.name,
-      );
+      const expectedRootDir = path.join(tmpDirPath, 'insomnia-grpc', `${pd._id}.${pd.modified}`, pd.name);
       const expectedFilePath = pf.name;
       const expectedFullPath = path.join(expectedRootDir, expectedFilePath);
       expect(result.filePath).toEqual(expectedFilePath);
@@ -149,12 +144,7 @@ describe('writeProtoFile', () => {
       // Act
       const result = await writeProtoFile(pfNested);
       // Assert
-      const expectedRootDir = path.join(
-        tmpDirPath,
-        'insomnia-grpc',
-        `${pdRoot._id}.${pdRoot.modified}`,
-        pdRoot.name,
-      );
+      const expectedRootDir = path.join(tmpDirPath, 'insomnia-grpc', `${pdRoot._id}.${pdRoot.modified}`, pdRoot.name);
       const expectedNestedDir = path.join(expectedRootDir, pdNested.name);
       const expectedFilePath = {
         root: pfRoot.name,
@@ -202,12 +192,7 @@ describe('writeProtoFile', () => {
       // Act
       const result = await writeProtoFile(pfNested);
       // Assert
-      const expectedRootDir = path.join(
-        tmpDirPath,
-        'insomnia-grpc',
-        `${pdRoot._id}.${pdRoot.modified}`,
-        pdRoot.name,
-      );
+      const expectedRootDir = path.join(tmpDirPath, 'insomnia-grpc', `${pdRoot._id}.${pdRoot.modified}`, pdRoot.name);
       const expectedNestedDir = path.join(expectedRootDir, pdNested.name);
       const expectedFilePath = {
         root: pfRoot.name,
diff --git a/packages/insomnia/src/network/grpc/write-proto-file.ts b/packages/insomnia/src/network/grpc/write-proto-file.ts
index 8e2f91ecf9..db47e1b1ba 100644
--- a/packages/insomnia/src/network/grpc/write-proto-file.ts
+++ b/packages/insomnia/src/network/grpc/write-proto-file.ts
@@ -24,16 +24,20 @@ const recursiveWriteProtoDirectory = async (
   fs.mkdirSync(dirPath, { recursive: true });
   // Get and write proto files
   const files = descendants.filter(isProtoFile).filter(f => f.parentId === dir._id);
-  await Promise.all(files.map(protoFile => {
-    const fullPath = path.join(dirPath, protoFile.name);
-    if (fs.existsSync(fullPath)) {
-      return;
-    }
-    fs.promises.writeFile(fullPath, protoFile.protoText);
-  }));
+  await Promise.all(
+    files.map(protoFile => {
+      const fullPath = path.join(dirPath, protoFile.name);
+      if (fs.existsSync(fullPath)) {
+        return;
+      }
+      fs.promises.writeFile(fullPath, protoFile.protoText);
+    }),
+  );
   // Get and write subdirectories
   const createdDirs = await Promise.all(
-    descendants.filter(f => isProtoDirectory(f) && f.parentId === dir._id).map(f => recursiveWriteProtoDirectory(f, descendants, dirPath)),
+    descendants
+      .filter(f => isProtoDirectory(f) && f.parentId === dir._id)
+      .map(f => recursiveWriteProtoDirectory(f, descendants, dirPath)),
   );
   return [dirPath, ...createdDirs.flat()];
 };
@@ -57,10 +61,13 @@ export const writeProtoFile = async (protoFile: ProtoFile): Promise<WriteResult>
     if (!ancestors.find(isWorkspace) || !rootAncestorProtoDirectory) {
       // should never happen
       return {
-        filePath: path.join(...ancestorDirectories
-          .map(f => f.name)
-          .reverse()
-          .slice(1), protoFile.name),
+        filePath: path.join(
+          ...ancestorDirectories
+            .map(f => f.name)
+            .reverse()
+            .slice(1),
+          protoFile.name,
+        ),
         dirs: [],
       };
     }
@@ -76,30 +83,32 @@ export const writeProtoFile = async (protoFile: ProtoFile): Promise<WriteResult>
       ),
     );
     return {
-      filePath: path.join(...ancestorDirectories
-        .map(f => f.name)
-        .reverse()
-        .slice(1), protoFile.name),
+      filePath: path.join(
+        ...ancestorDirectories
+          .map(f => f.name)
+          .reverse()
+          .slice(1),
+        protoFile.name,
+      ),
       dirs: treeRootDirs,
     };
   }
-    // Write single file
-    // Create temp folder
-    const rootDir = path.join(os.tmpdir(), 'insomnia-grpc');
-    fs.mkdirSync(rootDir, { recursive: true });
+  // Write single file
+  // Create temp folder
+  const rootDir = path.join(os.tmpdir(), 'insomnia-grpc');
+  fs.mkdirSync(rootDir, { recursive: true });
 
-    const filePath = `${protoFile._id}.${protoFile.modified}.proto`;
-    const result = {
-      filePath,
-      dirs: [rootDir],
-    };
-    // Check if file already exists
-    const fullPath = path.join(rootDir, filePath);
-    if (fs.existsSync(fullPath)) {
-      return result;
-    }
-    // Write file
-    await fs.promises.writeFile(fullPath, protoFile.protoText);
+  const filePath = `${protoFile._id}.${protoFile.modified}.proto`;
+  const result = {
+    filePath,
+    dirs: [rootDir],
+  };
+  // Check if file already exists
+  const fullPath = path.join(rootDir, filePath);
+  if (fs.existsSync(fullPath)) {
     return result;
-
+  }
+  // Write file
+  await fs.promises.writeFile(fullPath, protoFile.protoText);
+  return result;
 };
diff --git a/packages/insomnia/src/network/is-url-matched-in-no-proxy-rule.ts b/packages/insomnia/src/network/is-url-matched-in-no-proxy-rule.ts
index c4aa02c282..59abb3f717 100644
--- a/packages/insomnia/src/network/is-url-matched-in-no-proxy-rule.ts
+++ b/packages/insomnia/src/network/is-url-matched-in-no-proxy-rule.ts
@@ -19,7 +19,7 @@ function parseNoProxyZone(zone: string) {
 function matchesHostname(hostname: string, noProxyZoneHostname: string) {
   const wildcardNeedle = noProxyZoneHostname.startsWith('.*.') ? noProxyZoneHostname.slice(2) : noProxyZoneHostname;
   const isMatchedAt = hostname.indexOf(wildcardNeedle);
-  return (isMatchedAt > -1 && (isMatchedAt === hostname.length - wildcardNeedle.length));
+  return isMatchedAt > -1 && isMatchedAt === hostname.length - wildcardNeedle.length;
 }
 
 export function isUrlMatchedInNoProxyRule(url: string | undefined, noProxyRule: any) {
@@ -32,7 +32,7 @@ export function isUrlMatchedInNoProxyRule(url: string | undefined, noProxyRule:
   }
   const port = uri.port || (uri.protocol === 'https:' ? '443' : '80');
   // TODO: remove non-null assertion
-   
+
   const hostname = formatHostname(uri.hostname!);
   const noProxyList = noProxyRule.split(',');
 
@@ -43,7 +43,7 @@ export function isUrlMatchedInNoProxyRule(url: string | undefined, noProxyRule:
     }
     const hostnameMatched = matchesHostname(hostname, noProxyZone.hostname);
     if (noProxyZone.hasPort) {
-      return (port === noProxyZone.port) && hostnameMatched;
+      return port === noProxyZone.port && hostnameMatched;
     }
     return hostnameMatched;
   });
diff --git a/packages/insomnia/src/network/network.ts b/packages/insomnia/src/network/network.ts
index 88d71848f8..8d38645308 100644
--- a/packages/insomnia/src/network/network.ts
+++ b/packages/insomnia/src/network/network.ts
@@ -3,30 +3,40 @@ import fs from 'fs';
 import orderedJSON from 'json-order';
 import { join as pathJoin } from 'path';
 
-import type { ExecutionOption, RequestContext, RequestTestResult } from '../../../insomnia-scripting-environment/src/objects';
+import type {
+  ExecutionOption,
+  RequestContext,
+  RequestTestResult,
+} from '../../../insomnia-scripting-environment/src/objects';
 import { SINGLE_VALUE_HEADERS } from '../common/common-headers';
 import { JSON_ORDER_PREFIX, JSON_ORDER_SEPARATOR } from '../common/constants';
 import { database as db } from '../common/database';
-import {
-  generateId,
-  getContentTypeHeader,
-  getLocationHeader,
-  getSetCookieHeaders,
-} from '../common/misc';
-import {
-  getRenderedRequestAndContext,
-} from '../common/render';
+import { generateId, getContentTypeHeader, getLocationHeader, getSetCookieHeaders } from '../common/misc';
+import { getRenderedRequestAndContext } from '../common/render';
 import { ascendingFirstIndexStringSort } from '../common/sorting';
 import type { HeaderResult, ResponsePatch, ResponseTimelineEntry } from '../main/network/libcurl-promise';
 import * as models from '../models';
 import type { CaCertificate } from '../models/ca-certificate';
 import type { ClientCertificate } from '../models/client-certificate';
 import type { Cookie, CookieJar } from '../models/cookie-jar';
-import { type Environment, EnvironmentType, getKVPairFromData, type UserUploadEnvironment, vaultEnvironmentPath } from '../models/environment';
+import {
+  type Environment,
+  EnvironmentType,
+  getKVPairFromData,
+  type UserUploadEnvironment,
+  vaultEnvironmentPath,
+} from '../models/environment';
 import type { MockRoute } from '../models/mock-route';
 import type { MockServer } from '../models/mock-server';
 import { isProject, type Project } from '../models/project';
-import { type BaseRequest, isRequest, type Request, type RequestAuthentication, type RequestHeader, type RequestParameter } from '../models/request';
+import {
+  type BaseRequest,
+  isRequest,
+  type Request,
+  type RequestAuthentication,
+  type RequestHeader,
+  type RequestParameter,
+} from '../models/request';
 import { isRequestGroup, type RequestGroup } from '../models/request-group';
 import type { Settings } from '../models/settings';
 import type { WebSocketRequest } from '../models/websocket-request';
@@ -39,24 +49,28 @@ import { maskOrDecryptVaultDataIfNecessary } from '../templating/utils';
 import { defaultSendActionRuntime, type SendActionRuntime } from '../ui/routes/request';
 import { invariant } from '../utils/invariant';
 import { serializeNDJSON } from '../utils/ndjson';
-import {
-  buildQueryStringFromParams,
-  joinUrlAndQueryString,
-  smartEncodeUrl,
-} from '../utils/url/querystring';
+import { buildQueryStringFromParams, joinUrlAndQueryString, smartEncodeUrl } from '../utils/url/querystring';
 import { getAuthHeader, getAuthObjectOrNull, getAuthQueryParams, isAuthEnabled } from './authentication';
 import { cancellableCurlRequest, cancellableRunScript } from './cancellation';
 import { filterClientCertificates } from './certificate';
 import { runScriptConcurrently, type TransformedExecuteScriptContext } from './concurrency';
 import { addSetCookiesToToughCookieJar } from './set-cookie-util';
 
-export const getOrInheritAuthentication = ({ request, requestGroups }: { request: Request | WebSocketRequest; requestGroups: RequestGroup[] }): RequestAuthentication | {} => {
+export const getOrInheritAuthentication = ({
+  request,
+  requestGroups,
+}: {
+  request: Request | WebSocketRequest;
+  requestGroups: RequestGroup[];
+}): RequestAuthentication | {} => {
   const hasValidAuth = getAuthObjectOrNull(request.authentication) && isAuthEnabled(request.authentication);
   if (hasValidAuth) {
     return request.authentication;
   }
   const hasParentFolders = requestGroups.length > 0;
-  const closestParentFolderWithAuth = requestGroups.find(({ authentication }) => getAuthObjectOrNull(authentication) && isAuthEnabled(authentication));
+  const closestParentFolderWithAuth = requestGroups.find(
+    ({ authentication }) => getAuthObjectOrNull(authentication) && isAuthEnabled(authentication),
+  );
   const closestAuth = getAuthObjectOrNull(closestParentFolderWithAuth?.authentication);
   const shouldCheckFolderAuth = hasParentFolders && closestAuth;
   if (shouldCheckFolderAuth) {
@@ -66,7 +80,13 @@ export const getOrInheritAuthentication = ({ request, requestGroups }: { request
   // if no auth is specified on request or folders, default to none
   return { type: 'none' };
 };
-export function getOrInheritHeaders({ request, requestGroups }: { request: Pick<BaseRequest, 'headers'>; requestGroups: Pick<RequestGroup, 'headers'>[] }): RequestHeader[] {
+export function getOrInheritHeaders({
+  request,
+  requestGroups,
+}: {
+  request: Pick<BaseRequest, 'headers'>;
+  requestGroups: Pick<RequestGroup, 'headers'>[];
+}): RequestHeader[] {
   const httpHeaders = new Map<string, string>();
   const originalCaseMap = new Map<string, string>();
   // parent folders, then child folders, then request
@@ -91,7 +111,9 @@ export function getOrInheritHeaders({ request, requestGroups }: { request: Pick<
     }
     httpHeaders.set(normalizedCase, value);
   });
-  return Array.from(httpHeaders.entries()).sort(ascendingFirstIndexStringSort).map(([name, value]) => ({ name: originalCaseMap.get(name)!, value }));
+  return Array.from(httpHeaders.entries())
+    .sort(ascendingFirstIndexStringSort)
+    .map(([name, value]) => ({ name: originalCaseMap.get(name)!, value }));
 }
 // (only used for getOAuth2 token) Intended to gather all required database objects and initialize ids
 export const fetchRequestGroupData = async (requestGroupId: string) => {
@@ -113,8 +135,8 @@ export const fetchRequestGroupData = async (requestGroupId: string) => {
   // NOTE: parent folders wont be checked in here since we only use it for oauth2 requests right now, so they are discarded in that code path
   // fallback to base environment
   const activeEnvironmentId = workspaceMeta.activeEnvironmentId;
-  const activeEnvironment = activeEnvironmentId && await models.environment.getById(activeEnvironmentId);
-  const environment = activeEnvironment || await models.environment.getOrCreateForParentId(workspace._id);
+  const activeEnvironment = activeEnvironmentId && (await models.environment.getById(activeEnvironmentId));
+  const environment = activeEnvironment || (await models.environment.getOrCreateForParentId(workspace._id));
   invariant(environment, 'failed to find environment ' + activeEnvironmentId);
 
   const settings = await models.settings.get();
@@ -122,7 +144,10 @@ export const fetchRequestGroupData = async (requestGroupId: string) => {
   const clientCertificates = await models.clientCertificate.findByParentId(workspaceId);
   const caCert = await models.caCertificate.findByParentId(workspaceId);
   const responseId = generateId('res');
-  const responsesDir = pathJoin((process.type === 'renderer' ? window : require('electron')).app.getPath('userData'), 'responses');
+  const responsesDir = pathJoin(
+    (process.type === 'renderer' ? window : require('electron')).app.getPath('userData'),
+    'responses',
+  );
   const timelinePath = pathJoin(responsesDir, responseId + '.timeline');
   return { environment, settings, clientCertificates, caCert, activeEnvironmentId, timelinePath, responseId };
 };
@@ -130,14 +155,17 @@ export const fetchRequestGroupData = async (requestGroupId: string) => {
 export const fetchRequestData = async (requestId: string) => {
   const request = await models.request.getById(requestId);
   invariant(request, 'failed to find request ' + requestId);
-  const ancestors = await db.withAncestors<Request | RequestGroup | Workspace | Project | MockRoute | MockServer>(request, [
-    models.request.type,
-    models.requestGroup.type,
-    models.workspace.type,
-    models.project.type,
-    models.mockRoute.type,
-    models.mockServer.type,
-  ]);
+  const ancestors = await db.withAncestors<Request | RequestGroup | Workspace | Project | MockRoute | MockServer>(
+    request,
+    [
+      models.request.type,
+      models.requestGroup.type,
+      models.workspace.type,
+      models.project.type,
+      models.mockRoute.type,
+      models.mockServer.type,
+    ],
+  );
   const workspaceDoc = ancestors.find(isWorkspace);
   invariant(workspaceDoc?._id, 'failed to find workspace');
   const workspaceId = workspaceDoc._id;
@@ -147,9 +175,9 @@ export const fetchRequestData = async (requestId: string) => {
   const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspace._id);
   // fallback to base environment
   const activeEnvironmentId = workspaceMeta.activeEnvironmentId;
-  const activeEnvironment = activeEnvironmentId && await models.environment.getById(activeEnvironmentId);
+  const activeEnvironment = activeEnvironmentId && (await models.environment.getById(activeEnvironmentId));
   // no active environment in workspaceMeta, fallback to workspace root environment as active environment
-  const environment = activeEnvironment || await models.environment.getOrCreateForParentId(workspace._id);
+  const environment = activeEnvironment || (await models.environment.getOrCreateForParentId(workspace._id));
   invariant(environment, 'failed to find environment ' + activeEnvironmentId);
 
   const baseEnvironment = await models.environment.getOrCreateForParentId(workspaceId);
@@ -157,7 +185,7 @@ export const fetchRequestData = async (requestId: string) => {
 
   let activeGlobalEnvironment: Environment | undefined = undefined;
   if (workspaceMeta?.activeGlobalEnvironmentId) {
-    activeGlobalEnvironment = await models.environment.getById(workspaceMeta.activeGlobalEnvironmentId) || undefined;
+    activeGlobalEnvironment = (await models.environment.getById(workspaceMeta.activeGlobalEnvironmentId)) || undefined;
   }
 
   const settings = await models.settings.get();
@@ -165,7 +193,10 @@ export const fetchRequestData = async (requestId: string) => {
   const clientCertificates = await models.clientCertificate.findByParentId(workspaceId);
   const caCert = await models.caCertificate.findByParentId(workspaceId);
   const responseId = generateId('res');
-  const responsesDir = pathJoin((process.type === 'renderer' ? window : require('electron')).app.getPath('userData'), 'responses');
+  const responsesDir = pathJoin(
+    (process.type === 'renderer' ? window : require('electron')).app.getPath('userData'),
+    'responses',
+  );
   const timelinePath = pathJoin(responsesDir, responseId + '.timeline');
 
   return {
@@ -204,17 +235,22 @@ export const tryToExecutePreRequestScript = async (
   runtime?: SendActionRuntime,
 ) => {
   const requestGroups = ancestors.filter(doc => isRequest(doc) || isRequestGroup(doc)) as RequestGroup[];
-  const folderScripts = requestGroups.reverse()
+  const folderScripts = requestGroups
+    .reverse()
     .filter(group => group?.preRequestScript)
-    .map((group, i) => `const fn${i} = async ()=>{
+    .map(
+      (group, i) => `const fn${i} = async ()=>{
         ${group.preRequestScript}
       }
       await fn${i}();
-  `);
-  const originalRequestGroups = requestGroups
-    .filter(group => isRequestGroup(group));
-  const parentFolders = originalRequestGroups
-    .map(group => ({ id: group._id, name: group.name, environment: group.environment }));
+  `,
+    );
+  const originalRequestGroups = requestGroups.filter(group => isRequestGroup(group));
+  const parentFolders = originalRequestGroups.map(group => ({
+    id: group._id,
+    name: group.name,
+    environment: group.environment,
+  }));
 
   if (folderScripts.length === 0) {
     return {
@@ -268,7 +304,13 @@ export const tryToExecutePreRequestScript = async (
       parentFolders,
     };
   }
-  await savePatchesMadeByScript(mutatedContext, environment, baseEnvironment, activeGlobalEnvironment, originalRequestGroups);
+  await savePatchesMadeByScript(
+    mutatedContext,
+    environment,
+    baseEnvironment,
+    activeGlobalEnvironment,
+    originalRequestGroups,
+  );
 
   return {
     request: mutatedContext.request,
@@ -305,10 +347,9 @@ export async function savePatchesMadeByScript(
   // persist updated cookieJar if needed
   if (mutatedContext.cookieJar) {
     // merge cookies from response to the cookiejar, or cookies from response will not be persisted
-    await models.cookieJar.update(
-      mutatedContext.cookieJar,
-      { cookies: [...(responseCookies || []), ...mutatedContext.cookieJar.cookies] },
-    );
+    await models.cookieJar.update(mutatedContext.cookieJar, {
+      cookies: [...(responseCookies || []), ...mutatedContext.cookieJar.cookies],
+    });
   }
   // when base environment is activated, `mutatedContext.environment` points to it
   const isActiveEnvironmentBase = mutatedContext.environment?._id === baseEnvironment._id;
@@ -316,16 +357,14 @@ export async function savePatchesMadeByScript(
   const updateEnvironment = async (originEnvironment: Environment, mutatedContextEnvironment: Environment) => {
     const { environmentType } = originEnvironment;
     const { data, dataPropertyOrder } = mutatedContextEnvironment;
-    await models.environment.update(
-      originEnvironment,
-      {
-        data, dataPropertyOrder,
-        // also update kvPairData when environment type is table view(kv pair)
-        ...(environmentType === EnvironmentType.KVPAIR && {
-          kvPairData: getKVPairFromData(data, dataPropertyOrder),
-        }),
-      },
-    );
+    await models.environment.update(originEnvironment, {
+      data,
+      dataPropertyOrder,
+      // also update kvPairData when environment type is table view(kv pair)
+      ...(environmentType === EnvironmentType.KVPAIR && {
+        kvPairData: getKVPairFromData(data, dataPropertyOrder),
+      }),
+    });
   };
 
   if (hasEnvironmentAndIsNotBase) {
@@ -387,7 +426,10 @@ export const tryToExecuteScript = async (context: RequestAndContextAndOptionalRe
   let vault = undefined;
   if (globals && vaultEnvironmentPath in globals.data && settings.enableVaultInScripts) {
     // decrypt and set vault in insomnia sdk if necessary
-    globals.data[vaultEnvironmentPath] = await maskOrDecryptVaultDataIfNecessary(globals.data[vaultEnvironmentPath], 'script');
+    globals.data[vaultEnvironmentPath] = await maskOrDecryptVaultDataIfNecessary(
+      globals.data[vaultEnvironmentPath],
+      'script',
+    );
     vault = globals.data[vaultEnvironmentPath];
   }
 
@@ -422,10 +464,12 @@ export const tryToExecuteScript = async (context: RequestAndContextAndOptionalRe
         response,
         vault,
         globals: globals?.data || undefined,
-        iterationData: userUploadEnvironment ? {
-          name: userUploadEnvironment.name,
-          data: userUploadEnvironment.data || {},
-        } : undefined,
+        iterationData: userUploadEnvironment
+          ? {
+              name: userUploadEnvironment.name,
+              data: userUploadEnvironment.data || {},
+            }
+          : undefined,
         execution: {
           ...execution, // keep some existing properties in the after-response script from the pre-request script
           location: requestLocation,
@@ -507,7 +551,7 @@ export const tryToExecuteScript = async (context: RequestAndContextAndOptionalRe
   } catch (err) {
     await fs.promises.appendFile(
       timelinePath,
-      serializeNDJSON([{ value: err.message, name: 'Text', timestamp: Date.now() }])
+      serializeNDJSON([{ value: err.message, name: 'Text', timestamp: Date.now() }]),
     );
 
     const requestId = request._id;
@@ -563,15 +607,17 @@ type RequestAndContextAndOptionalResponse = RequestContextForScript & {
 
 export async function tryToExecuteAfterResponseScript(context: RequestAndContextAndResponse) {
   const requestGroups = context.ancestors.filter(doc => isRequest(doc) || isRequestGroup(doc)) as RequestGroup[];
-  const folderScripts = requestGroups.reverse()
+  const folderScripts = requestGroups
+    .reverse()
     .filter(group => group?.afterResponseScript)
-    .map((group, i) => `const fn${i} = async ()=>{
+    .map(
+      (group, i) => `const fn${i} = async ()=>{
         ${group.afterResponseScript}
       }
       await fn${i}();
-  `);
-  const originalRequestGroups = requestGroups
-    .filter(group => isRequestGroup(group));
+  `,
+    );
+  const originalRequestGroups = requestGroups.filter(group => isRequestGroup(group));
 
   if (folderScripts.length === 0) {
     return {
@@ -592,9 +638,22 @@ export async function tryToExecuteAfterResponseScript(context: RequestAndContext
   const respondedWithoutError = context.response && !('error' in context.response);
   if (respondedWithoutError) {
     const resp = context.response as sendCurlAndWriteTimelineResponse;
-    await savePatchesMadeByScript(postMutatedContext, context.environment, context.baseEnvironment, context.globals, originalRequestGroups, resp.cookies);
+    await savePatchesMadeByScript(
+      postMutatedContext,
+      context.environment,
+      context.baseEnvironment,
+      context.globals,
+      originalRequestGroups,
+      resp.cookies,
+    );
   } else {
-    await savePatchesMadeByScript(postMutatedContext, context.environment, context.baseEnvironment, context.globals, originalRequestGroups);
+    await savePatchesMadeByScript(
+      postMutatedContext,
+      context.environment,
+      context.baseEnvironment,
+      context.globals,
+      originalRequestGroups,
+    );
   }
 
   return postMutatedContext;
@@ -618,8 +677,7 @@ export const tryToInterpolateRequest = async ({
   userUploadEnvironment?: UserUploadEnvironment;
   transientVariables?: Environment;
   ignoreUndefinedEnvVariable?: boolean;
-}
-) => {
+}) => {
   try {
     return await getRenderedRequestAndContext({
       request: request,
@@ -686,10 +744,19 @@ export async function sendCurlAndWriteTimeline(
   const timeline: ResponseTimelineEntry[] = [];
   const authentication = renderedRequest.authentication as RequestAuthentication;
 
-  const { finalUrl, socketPath } = transformUrl(renderedRequest.url, renderedRequest.parameters, authentication, renderedRequest.settingEncodeUrl);
+  const { finalUrl, socketPath } = transformUrl(
+    renderedRequest.url,
+    renderedRequest.parameters,
+    authentication,
+    renderedRequest.settingEncodeUrl,
+  );
   timeline.push({ value: `Preparing request to ${finalUrl}`, name: 'Text', timestamp: Date.now() });
   timeline.push({ value: `Current time is ${new Date().toISOString()}`, name: 'Text', timestamp: Date.now() });
-  timeline.push({ value: `${renderedRequest.settingEncodeUrl ? 'Enable' : 'Disable'} automatic URL encoding`, name: 'Text', timestamp: Date.now() });
+  timeline.push({
+    value: `${renderedRequest.settingEncodeUrl ? 'Enable' : 'Disable'} automatic URL encoding`,
+    name: 'Text',
+    timestamp: Date.now(),
+  });
 
   if (!renderedRequest.settingSendCookies) {
     timeline.push({ value: 'Disable cookie sending due to user setting', name: 'Text', timestamp: Date.now() });
@@ -707,9 +774,10 @@ export async function sendCurlAndWriteTimeline(
   };
 
   // NOTE: conditionally use ipc bridge, renderer cannot import native modules directly
-  const nodejsCurlRequest = process.type === 'renderer'
-    ? cancellableCurlRequest
-    : (await import('../main/network/libcurl-promise')).curlRequest;
+  const nodejsCurlRequest =
+    process.type === 'renderer'
+      ? cancellableCurlRequest
+      : (await import('../main/network/libcurl-promise')).curlRequest;
   const output = await nodejsCurlRequest(requestOptions);
 
   if ('error' in output) {
@@ -733,8 +801,15 @@ export async function sendCurlAndWriteTimeline(
   // todo: move to main process
   debugTimeline.forEach(entry => timeline.push(entry));
   // transform output
-  const { cookies, rejectedCookies, totalSetCookies } = await extractCookies(headerResults, renderedRequest.cookieJar, finalUrl, renderedRequest.settingStoreCookies);
-  rejectedCookies.forEach(errorMessage => timeline.push({ value: `Rejected cookie: ${errorMessage}`, name: 'Text', timestamp: Date.now() }));
+  const { cookies, rejectedCookies, totalSetCookies } = await extractCookies(
+    headerResults,
+    renderedRequest.cookieJar,
+    finalUrl,
+    renderedRequest.settingStoreCookies,
+  );
+  rejectedCookies.forEach(errorMessage =>
+    timeline.push({ value: `Rejected cookie: ${errorMessage}`, name: 'Text', timestamp: Date.now() }),
+  );
   if (totalSetCookies) {
     await models.cookieJar.update(renderedRequest.cookieJar, { cookies });
     timeline.push({ value: `Saved ${totalSetCookies} cookies`, name: 'Text', timestamp: Date.now() });
@@ -761,7 +836,12 @@ export async function sendCurlAndWriteTimeline(
   };
 }
 
-export const responseTransform = async (patch: ResponsePatch, environmentId: string | null, renderedRequest: RenderedRequest, context: Record<string, any>) => {
+export const responseTransform = async (
+  patch: ResponsePatch,
+  environmentId: string | null,
+  renderedRequest: RenderedRequest,
+  context: Record<string, any>,
+) => {
   const response: ResponsePatch = {
     ...patch,
     // important for filter by responses
@@ -776,29 +856,42 @@ export const responseTransform = async (patch: ResponsePatch, environmentId: str
     console.log(`[network] Response failed req=${patch.parentId} err=${response.error || 'n/a'}`);
     return response;
   }
-  console.log(`[network] Response succeeded req=${patch.parentId} status=${response.statusCode || '?'}`,);
-  return await _applyResponsePluginHooks(
-    response,
-    renderedRequest,
-    context,
-  );
+  console.log(`[network] Response succeeded req=${patch.parentId} status=${response.statusCode || '?'}`);
+  return await _applyResponsePluginHooks(response, renderedRequest, context);
 };
-export const transformUrl = (url: string, params: RequestParameter[], authentication: RequestAuthentication, shouldEncode: boolean) => {
+export const transformUrl = (
+  url: string,
+  params: RequestParameter[],
+  authentication: RequestAuthentication,
+  shouldEncode: boolean,
+) => {
   const authQueryParam = getAuthQueryParams(authentication);
-  const customUrl = joinUrlAndQueryString(url, buildQueryStringFromParams(authQueryParam ? params.concat([authQueryParam]) : params, true, { strictNullHandling: true }));
+  const customUrl = joinUrlAndQueryString(
+    url,
+    buildQueryStringFromParams(authQueryParam ? params.concat([authQueryParam]) : params, true, {
+      strictNullHandling: true,
+    }),
+  );
   const isUnixSocket = customUrl.match(/https?:\/\/unix:\//);
   if (!isUnixSocket) {
     return { finalUrl: smartEncodeUrl(customUrl, shouldEncode, { strictNullHandling: true }) };
   }
   // URL prep will convert "unix:/path" hostname to "unix/path"
-  const match = smartEncodeUrl(customUrl, shouldEncode, { strictNullHandling: true }).match(/(https?:)\/\/unix:?(\/[^:]+):\/(.+)/);
+  const match = smartEncodeUrl(customUrl, shouldEncode, { strictNullHandling: true }).match(
+    /(https?:)\/\/unix:?(\/[^:]+):\/(.+)/,
+  );
   const protocol = (match && match[1]) || '';
   const socketPath = (match && match[2]) || '';
   const socketUrl = (match && match[3]) || '';
   return { finalUrl: `${protocol}//${socketUrl}`, socketPath };
 };
 
-const extractCookies = async (headerResults: HeaderResult[], cookieJar: any, finalUrl: string, settingStoreCookies: boolean) => {
+const extractCookies = async (
+  headerResults: HeaderResult[],
+  cookieJar: any,
+  finalUrl: string,
+  settingStoreCookies: boolean,
+) => {
   // add set-cookie headers to file(cookiejar) and database
   if (settingStoreCookies) {
     // supports many set-cookies over many redirects
@@ -807,7 +900,11 @@ const extractCookies = async (headerResults: HeaderResult[], cookieJar: any, fin
     const totalSetCookies = setCookieStrings.length;
     if (totalSetCookies) {
       const currentUrl = getCurrentUrl({ headerResults, finalUrl });
-      const { cookies, rejectedCookies } = await addSetCookiesToToughCookieJar({ setCookieStrings, currentUrl, cookieJar });
+      const { cookies, rejectedCookies } = await addSetCookiesToToughCookieJar({
+        setCookieStrings,
+        currentUrl,
+        cookieJar,
+      });
       const hasCookiesToPersist = totalSetCookies > rejectedCookies.length;
       if (hasCookiesToPersist) {
         return { cookies, rejectedCookies, totalSetCookies };
@@ -835,10 +932,7 @@ export const getCurrentUrl = ({ headerResults, finalUrl }: { headerResults: any;
   }
 };
 
-async function _applyRequestPluginHooks(
-  renderedRequest: RenderedRequest,
-  renderedContext: Record<string, any>,
-) {
+async function _applyRequestPluginHooks(renderedRequest: RenderedRequest, renderedContext: Record<string, any>) {
   const newRenderedRequest = clone(renderedRequest);
 
   for (const { plugin, hook } of await plugins.getRequestHooks()) {
@@ -899,5 +993,4 @@ async function _applyResponsePluginHooks(
       settingStoreCookies: renderedRequest.settingStoreCookies,
     };
   }
-
 }
diff --git a/packages/insomnia/src/network/o-auth-1/get-token.ts b/packages/insomnia/src/network/o-auth-1/get-token.ts
index eea2b92c8c..d40549d981 100644
--- a/packages/insomnia/src/network/o-auth-1/get-token.ts
+++ b/packages/insomnia/src/network/o-auth-1/get-token.ts
@@ -5,7 +5,7 @@
 import crypto from 'crypto';
 import OAuth1 from 'oauth-1.0a';
 
-import type { AUTH_OAUTH_1} from '../../common/constants';
+import type { AUTH_OAUTH_1 } from '../../common/constants';
 import { CONTENT_TYPE_FORM_URLENCODED } from '../../common/constants';
 import type { RequestAuthentication, RequestBody } from '../../models/request';
 import type { OAuth1SignatureMethod } from './constants';
diff --git a/packages/insomnia/src/network/o-auth-2/constants.ts b/packages/insomnia/src/network/o-auth-2/constants.ts
index e7a91fda63..0ac4a02616 100644
--- a/packages/insomnia/src/network/o-auth-2/constants.ts
+++ b/packages/insomnia/src/network/o-auth-2/constants.ts
@@ -4,31 +4,31 @@ export const GRANT_TYPE_PASSWORD = 'password';
 export const GRANT_TYPE_CLIENT_CREDENTIALS = 'client_credentials';
 export const GRANT_TYPE_REFRESH = 'refresh_token';
 export type AuthKeys =
-    'access_token' |
-    'id_token' |
-    'client_id' |
-    'client_secret' |
-    'audience' |
-    'resource' |
-    'code_challenge' |
-    'code_challenge_method' |
-    'code_verifier' |
-    'code' |
-    'nonce' |
-    'error' |
-    'error_description' |
-    'error_uri' |
-    'expires_in' |
-    'grant_type' |
-    'password' |
-    'redirect_uri' |
-    'refresh_token' |
-    'response_type' |
-    'scope' |
-    'state' |
-    'token_type' |
-    'username' |
-    'xError' |
-    'xResponseId';
+  | 'access_token'
+  | 'id_token'
+  | 'client_id'
+  | 'client_secret'
+  | 'audience'
+  | 'resource'
+  | 'code_challenge'
+  | 'code_challenge_method'
+  | 'code_verifier'
+  | 'code'
+  | 'nonce'
+  | 'error'
+  | 'error_description'
+  | 'error_uri'
+  | 'expires_in'
+  | 'grant_type'
+  | 'password'
+  | 'redirect_uri'
+  | 'refresh_token'
+  | 'response_type'
+  | 'scope'
+  | 'state'
+  | 'token_type'
+  | 'username'
+  | 'xError'
+  | 'xResponseId';
 export const PKCE_CHALLENGE_S256 = 'S256';
 export const PKCE_CHALLENGE_PLAIN = 'plain';
diff --git a/packages/insomnia/src/network/o-auth-2/get-token.ts b/packages/insomnia/src/network/o-auth-2/get-token.ts
index c2f56b542f..dede1dfa95 100644
--- a/packages/insomnia/src/network/o-auth-2/get-token.ts
+++ b/packages/insomnia/src/network/o-auth-2/get-token.ts
@@ -13,12 +13,15 @@ import type { Response } from '../../models/response';
 import { invariant } from '../../utils/invariant';
 import { setDefaultProtocol } from '../../utils/url/protocol';
 import { getBasicAuthHeader } from '../basic-auth/get-header';
-import { fetchRequestData, fetchRequestGroupData, responseTransform, sendCurlAndWriteTimeline, tryToInterpolateRequest, tryToTransformRequestWithPlugins } from '../network';
 import {
-  type AuthKeys,
-  GRANT_TYPE_AUTHORIZATION_CODE,
-  PKCE_CHALLENGE_S256,
-} from './constants';
+  fetchRequestData,
+  fetchRequestGroupData,
+  responseTransform,
+  sendCurlAndWriteTimeline,
+  tryToInterpolateRequest,
+  tryToTransformRequestWithPlugins,
+} from '../network';
+import { type AuthKeys, GRANT_TYPE_AUTHORIZATION_CODE, PKCE_CHALLENGE_S256 } from './constants';
 
 const LOCALSTORAGE_KEY_SESSION_ID = 'insomnia::current-oauth-session-id';
 
@@ -48,7 +51,9 @@ export const getOAuth2Token = async (
   if (oAuth2Token) {
     return oAuth2Token;
   }
-  const validGrantType = ['implicit', 'authorization_code', 'password', 'client_credentials'].includes(authentication.grantType);
+  const validGrantType = ['implicit', 'authorization_code', 'password', 'client_credentials'].includes(
+    authentication.grantType,
+  );
   invariant(validGrantType, `Invalid grant type ${authentication.grantType}`);
   if (authentication.grantType === 'implicit') {
     invariant(authentication.authorizationUrl, 'Missing authorization URL');
@@ -62,9 +67,14 @@ export const getOAuth2Token = async (
       ...insertAuthKeyIf('scope', authentication.scope),
       ...insertAuthKeyIf('state', authentication.state),
       ...insertAuthKeyIf('audience', authentication.audience),
-      ...(hasNonce ? [{
-        name: 'nonce', value: Math.floor(Math.random() * 9999999999999) + 1 + '',
-      }] : []),
+      ...(hasNonce
+        ? [
+            {
+              name: 'nonce',
+              value: Math.floor(Math.random() * 9999999999999) + 1 + '',
+            },
+          ]
+        : []),
     ].forEach(p => p.value && implicitUrl.searchParams.append(p.name, p.value));
     const redirectedTo = await window.main.authorizeUserInWindow({
       url: implicitUrl.toString(),
@@ -84,10 +94,13 @@ export const getOAuth2Token = async (
     invariant(hash, 'No hash found in response URL from OAuth2 provider');
     const data = Object.fromEntries(new URLSearchParams(hash));
     const old = await models.oAuth2Token.getOrCreateByParentId(requestId);
-    return models.oAuth2Token.update(old, transformNewAccessTokenToOauthModel({
-      ...data,
-      access_token: data.access_token || data.id_token,
-    }));
+    return models.oAuth2Token.update(
+      old,
+      transformNewAccessTokenToOauthModel({
+        ...data,
+        access_token: data.access_token || data.id_token,
+      }),
+    );
   }
   invariant(authentication.accessTokenUrl, 'Missing access token URL');
   let params: RequestHeader[] = [];
@@ -96,7 +109,9 @@ export const getOAuth2Token = async (
 
     const codeVerifier = authentication.usePkce ? encodePKCE(crypto.randomBytes(32)) : '';
     const usePkceAnd256 = authentication.usePkce && authentication.pkceMethod === PKCE_CHALLENGE_S256;
-    const codeChallenge = usePkceAnd256 ? encodePKCE(crypto.createHash('sha256').update(codeVerifier).digest()) : codeVerifier;
+    const codeChallenge = usePkceAnd256
+      ? encodePKCE(crypto.createHash('sha256').update(codeVerifier).digest())
+      : codeVerifier;
     const authCodeUrl = new URL(authentication.authorizationUrl);
     const responseType: OAuth2ResponseType = 'code';
     [
@@ -107,17 +122,21 @@ export const getOAuth2Token = async (
       ...insertAuthKeyIf('state', authentication.state),
       ...insertAuthKeyIf('audience', authentication.audience),
       ...insertAuthKeyIf('resource', authentication.resource),
-      ...(codeChallenge ? [
-        { name: 'code_challenge', value: codeChallenge },
-        { name: 'code_challenge_method', value: authentication.pkceMethod },
-      ] : []),
+      ...(codeChallenge
+        ? [
+            { name: 'code_challenge', value: codeChallenge },
+            { name: 'code_challenge_method', value: authentication.pkceMethod },
+          ]
+        : []),
     ].forEach(p => p.value && authCodeUrl.searchParams.append(p.name, p.value));
     const redirectedTo = await window.main.authorizeUserInWindow({
       url: authCodeUrl.toString(),
-      urlSuccessRegex: authentication.redirectUrl ?
-        new RegExp(`${escapeRegex(authentication.redirectUrl)}.*([?&]code=)`, 'i') : /([?&]code=)/i,
-      urlFailureRegex: authentication.redirectUrl ?
-        new RegExp(`${escapeRegex(authentication.redirectUrl)}.*([?&]error=)`, 'i') : /([?&]error=)/i,
+      urlSuccessRegex: authentication.redirectUrl
+        ? new RegExp(`${escapeRegex(authentication.redirectUrl)}.*([?&]code=)`, 'i')
+        : /([?&]code=)/i,
+      urlFailureRegex: authentication.redirectUrl
+        ? new RegExp(`${escapeRegex(authentication.redirectUrl)}.*([?&]error=)`, 'i')
+        : /([?&]error=)/i,
       sessionId: getOAuthSession(),
     });
     console.log('[oauth2] Detected redirect ' + redirectedTo);
@@ -166,9 +185,10 @@ export const getOAuth2Token = async (
 
   const response = await sendAccessTokenRequest(requestId, authentication, params, headers);
   const old = await models.oAuth2Token.getOrCreateByParentId(requestId);
-  return models.oAuth2Token.update(old, transformNewAccessTokenToOauthModel(
-    await oauthResponseToAccessToken(authentication.accessTokenUrl, response)
-  ));
+  return models.oAuth2Token.update(
+    old,
+    transformNewAccessTokenToOauthModel(await oauthResponseToAccessToken(authentication.accessTokenUrl, response)),
+  );
 };
 // 1. get token from db and return if valid
 // 2. if expired, and no refresh token return null
@@ -244,10 +264,13 @@ async function getExistingAccessTokenAndRefreshIfExpired(
     return null;
   }
   const old = await models.oAuth2Token.getOrCreateByParentId(requestId);
-  return models.oAuth2Token.update(old, transformNewAccessTokenToOauthModel({
-    ...data,
-    refresh_token: data.refresh_token || token.refreshToken,
-  }));
+  return models.oAuth2Token.update(
+    old,
+    transformNewAccessTokenToOauthModel({
+      ...data,
+      refresh_token: data.refresh_token || token.refreshToken,
+    }),
+  );
 }
 
 export const oauthResponseToAccessToken = async (accessTokenUrl: string, response: Response) => {
@@ -272,7 +295,9 @@ export const oauthResponseToAccessToken = async (accessTokenUrl: string, respons
   };
 };
 
-const transformNewAccessTokenToOauthModel = (accessToken: Partial<Record<AuthKeys, string | null>>): Partial<OAuth2Token> => {
+const transformNewAccessTokenToOauthModel = (
+  accessToken: Partial<Record<AuthKeys, string | null>>,
+): Partial<OAuth2Token> => {
   const expiry = accessToken.expires_in ? +accessToken.expires_in : 0;
   return {
     // Calculate expiry date
@@ -291,21 +316,21 @@ const transformNewAccessTokenToOauthModel = (accessToken: Partial<Record<AuthKey
 };
 
 // This can be sent from a folder
-const sendAccessTokenRequest = async (requestOrGroupId: string, authentication: AuthTypeOAuth2, params: RequestParameter[], headers: RequestHeader[]) => {
+const sendAccessTokenRequest = async (
+  requestOrGroupId: string,
+  authentication: AuthTypeOAuth2,
+  params: RequestParameter[],
+  headers: RequestHeader[],
+) => {
   invariant(authentication.accessTokenUrl, 'Missing access token URL');
   console.log(`[network] Sending with settings req=${requestOrGroupId}`);
   // @TODO unpack oauth into regular timeline and remove oauth timeine dialog
-  const initializedData = isRequestGroupId(requestOrGroupId) ? await fetchRequestGroupData(requestOrGroupId) : await fetchRequestData(requestOrGroupId);
+  const initializedData = isRequestGroupId(requestOrGroupId)
+    ? await fetchRequestGroupData(requestOrGroupId)
+    : await fetchRequestData(requestOrGroupId);
 
-  const {
-    environment,
-    settings,
-    clientCertificates,
-    caCert,
-    activeEnvironmentId,
-    timelinePath,
-    responseId,
-  } = initializedData;
+  const { environment, settings, clientCertificates, caCert, activeEnvironmentId, timelinePath, responseId } =
+    initializedData;
 
   const defaultUserAgentHeader: RequestHeader = { name: 'User-Agent', value: `insomnia/${version}` };
   const defaultHeaders: RequestHeader[] = [
@@ -316,21 +341,22 @@ const sendAccessTokenRequest = async (requestOrGroupId: string, authentication:
   if (!settings.disableAppVersionUserAgent) {
     defaultHeaders.push(defaultUserAgentHeader);
   }
-  const newRequest: Request = await models.initModel(models.request.type, {
-    headers: [
-      ...defaultHeaders,
-      ...headers,
-    ],
-    url: setDefaultProtocol(authentication.accessTokenUrl),
-    method: 'POST',
-    body: {
-      mimeType: 'application/x-www-form-urlencoded',
-      params,
+  const newRequest: Request = await models.initModel(
+    models.request.type,
+    {
+      headers: [...defaultHeaders, ...headers],
+      url: setDefaultProtocol(authentication.accessTokenUrl),
+      method: 'POST',
+      body: {
+        mimeType: 'application/x-www-form-urlencoded',
+        params,
+      },
     },
-  }, {
-    _id: requestOrGroupId + '.other',
-    parentId: requestOrGroupId,
-  });
+    {
+      _id: requestOrGroupId + '.other',
+      parentId: requestOrGroupId,
+    },
+  );
 
   const renderResult = await tryToInterpolateRequest({ request: newRequest, environment: environment._id });
   const renderedRequest = await tryToTransformRequestWithPlugins(renderResult);
@@ -348,25 +374,28 @@ const sendAccessTokenRequest = async (requestOrGroupId: string, authentication:
   return await models.response.create(responsePatch);
 };
 export const encodePKCE = (buffer: Buffer) => {
-  return buffer.toString('base64')
-    // The characters + / = are reserved for PKCE as per the RFC,
-    // so we replace them with unreserved characters
-    // Docs: https://tools.ietf.org/html/rfc7636#section-4.2
-    .replace(/\+/g, '-')
-    .replace(/\//g, '_')
-    .replace(/=/g, '');
+  return (
+    buffer
+      .toString('base64')
+      // The characters + / = are reserved for PKCE as per the RFC,
+      // so we replace them with unreserved characters
+      // Docs: https://tools.ietf.org/html/rfc7636#section-4.2
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=/g, '')
+  );
 };
 const tryToParse = (body: string): Record<string, any> | null => {
   try {
     return JSON.parse(body);
-  } catch (err) { }
+  } catch (err) {}
 
   try {
     // NOTE: parse does not return a JS Object, so
     //   we cannot use hasOwnProperty on it
     return querystring.parse(body);
-  } catch (err) { }
+  } catch (err) {}
   return null;
 };
 
-const insertAuthKeyIf = (name: AuthKeys, value?: string) => value ? [{ name, value }] : [];
+const insertAuthKeyIf = (name: AuthKeys, value?: string) => (value ? [{ name, value }] : []);
diff --git a/packages/insomnia/src/network/unit-test-feature.ts b/packages/insomnia/src/network/unit-test-feature.ts
index 238d811d76..c081f8cba9 100644
--- a/packages/insomnia/src/network/unit-test-feature.ts
+++ b/packages/insomnia/src/network/unit-test-feature.ts
@@ -1,13 +1,20 @@
 import { stats } from '../models';
 import { getBodyBuffer } from '../models/response';
 import { parseGraphQLReqeustBody } from '../utils/graph-ql';
-import { fetchRequestData, responseTransform, sendCurlAndWriteTimeline, tryToInterpolateRequest, tryToTransformRequestWithPlugins } from './network';
+import {
+  fetchRequestData,
+  responseTransform,
+  sendCurlAndWriteTimeline,
+  tryToInterpolateRequest,
+  tryToTransformRequestWithPlugins,
+} from './network';
 
 export function getSendRequestCallback() {
   return async function sendRequest(requestId: string) {
     stats.incrementExecutedRequests();
     // NOTE: unit tests will use the UI selected environment
-    const { request,
+    const {
+      request,
       environment,
       settings,
       clientCertificates,
@@ -28,14 +35,16 @@ export function getSendRequestCallback() {
       caCert,
       settings,
       timelinePath,
-      responseId
+      responseId,
     );
     const res = await responseTransform(response, activeEnvironmentId, renderedRequest, renderResult.context);
     const { statusCode: status, statusMessage, headers: headerArray, elapsedTime: responseTime } = res;
-    const headers = headerArray?.reduce((acc, { name, value }) => ({ ...acc, [name.toLowerCase() || '']: value || '' }), []);
-    const bodyBuffer = await getBodyBuffer(res) as Buffer;
+    const headers = headerArray?.reduce(
+      (acc, { name, value }) => ({ ...acc, [name.toLowerCase() || '']: value || '' }),
+      [],
+    );
+    const bodyBuffer = (await getBodyBuffer(res)) as Buffer;
     const data = bodyBuffer ? bodyBuffer.toString('utf8') : undefined;
     return { status, statusMessage, data, headers, responseTime };
-
   };
 }
diff --git a/packages/insomnia/src/plugins/context/__tests__/app.test.ts b/packages/insomnia/src/plugins/context/__tests__/app.test.ts
index 77fe1fb2f4..a5dd583152 100644
--- a/packages/insomnia/src/plugins/context/__tests__/app.test.ts
+++ b/packages/insomnia/src/plugins/context/__tests__/app.test.ts
@@ -4,35 +4,22 @@ import appPackageJson from '../../../../package.json';
 import * as plugin from '../app';
 
 describe('init()', () => {
-
   it('initializes correctly', async () => {
     const result = plugin.init();
     expect(Object.keys(result)).toEqual(['app', '__private']);
-    expect(Object.keys(result.app).sort()).toEqual([
-      'alert',
-      'clipboard',
-      'dialog',
-      'getPath',
-      'getInfo',
-      'prompt',
-      'showSaveDialog',
-    ].sort());
-    expect(Object.keys(result.app.clipboard).sort()).toEqual([
-      'clear',
-      'readText',
-      'writeText',
-    ].sort());
+    expect(Object.keys(result.app).sort()).toEqual(
+      ['alert', 'clipboard', 'dialog', 'getPath', 'getInfo', 'prompt', 'showSaveDialog'].sort(),
+    );
+    expect(Object.keys(result.app.clipboard).sort()).toEqual(['clear', 'readText', 'writeText'].sort());
   });
 });
 
 describe('app.getInfo()', () => {
-
   it('provides app info', async () => {
     const result = plugin.init();
     expect(result.app.getInfo()).toEqual({
-      'version': appPackageJson.version,
-      'platform': process.platform,
+      version: appPackageJson.version,
+      platform: process.platform,
     });
   });
-
 });
diff --git a/packages/insomnia/src/plugins/context/__tests__/request.test.ts b/packages/insomnia/src/plugins/context/__tests__/request.test.ts
index a07f2b4810..4251d26f4c 100644
--- a/packages/insomnia/src/plugins/context/__tests__/request.test.ts
+++ b/packages/insomnia/src/plugins/context/__tests__/request.test.ts
@@ -17,7 +17,7 @@ const CONTEXT = {
 
 describe('init()', () => {
   beforeEach(async () => {
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
 
     await models.workspace.create({
       _id: 'wrk_1',
@@ -98,7 +98,7 @@ describe('init()', () => {
 
 describe('request.*', () => {
   beforeEach(async () => {
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
 
     await models.workspace.create({
       _id: 'wrk_1',
@@ -138,16 +138,14 @@ describe('request.*', () => {
   });
 
   it('works for basic getters', async () => {
-    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => { });
+    const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
     const result = plugin.init(await models.request.getById('req_1'), CONTEXT);
     expect(result.request.getId()).toBe('req_1');
     expect(result.request.getName()).toBe('My Request');
     expect(result.request.getUrl()).toBe('');
     expect(result.request.getMethod()).toBe('GET');
     expect(result.request.getBodyText()).toBe('body');
-    expect(consoleWarnSpy).toHaveBeenCalledWith(
-      'request.getBodyText() is deprecated. Use request.getBody() instead.',
-    );
+    expect(consoleWarnSpy).toHaveBeenCalledWith('request.getBodyText() is deprecated. Use request.getBody() instead.');
     expect(result.request.getAuthentication()).toEqual({
       type: 'oauth2',
     });
diff --git a/packages/insomnia/src/plugins/context/__tests__/store.test.ts b/packages/insomnia/src/plugins/context/__tests__/store.test.ts
index 802442d885..cd87282509 100644
--- a/packages/insomnia/src/plugins/context/__tests__/store.test.ts
+++ b/packages/insomnia/src/plugins/context/__tests__/store.test.ts
@@ -9,24 +9,15 @@ const PLUGIN = {
 };
 
 describe('init()', () => {
-
   it('initializes correctly', async () => {
     const result = plugin.init({
       name: PLUGIN,
     });
-    expect(Object.keys(result.store).sort()).toEqual([
-      'all',
-      'clear',
-      'getItem',
-      'hasItem',
-      'removeItem',
-      'setItem',
-    ]);
+    expect(Object.keys(result.store).sort()).toEqual(['all', 'clear', 'getItem', 'hasItem', 'removeItem', 'setItem']);
   });
 });
 
 describe('store.*', () => {
-
   it('all methods work', async () => {
     const p = plugin.init(PLUGIN);
     // Null item for no result
diff --git a/packages/insomnia/src/plugins/context/app.tsx b/packages/insomnia/src/plugins/context/app.tsx
index 882af4bbbf..cf275ff744 100644
--- a/packages/insomnia/src/plugins/context/app.tsx
+++ b/packages/insomnia/src/plugins/context/app.tsx
@@ -11,10 +11,13 @@ import { WrapperModal } from '../../ui/components/modals/wrapper-modal';
 import { invariant } from '../../utils/invariant';
 
 export interface PrivateProperties {
-  loadRendererModules: () => Promise<{
-    ReactDOM: typeof ReactDOM;
-    React: typeof React;
-  } | {}>;
+  loadRendererModules: () => Promise<
+    | {
+        ReactDOM: typeof ReactDOM;
+        React: typeof React;
+      }
+    | {}
+  >;
 }
 
 export const init = (renderPurpose: RenderPurpose = 'general'): { app: AppContext; __private: PrivateProperties } => ({
@@ -50,7 +53,7 @@ export const init = (renderPurpose: RenderPurpose = 'general'): { app: AppContex
             selected = value;
           },
           // don't resolve the overall promise until the modal has hidden after clicking submit
-          onHide: () => selected !== null ? resolve(selected) : reject(new Error(`Prompt ${title} cancelled`)),
+          onHide: () => (selected !== null ? resolve(selected) : reject(new Error(`Prompt ${title} cancelled`))),
         });
       });
     },
diff --git a/packages/insomnia/src/plugins/context/data.ts b/packages/insomnia/src/plugins/context/data.ts
index 80a53a39f2..9b833c02d8 100644
--- a/packages/insomnia/src/plugins/context/data.ts
+++ b/packages/insomnia/src/plugins/context/data.ts
@@ -15,11 +15,10 @@ const getWorkspaces = (activeProjectId?: string) => {
   if (activeProjectId) {
     return models.workspace.findByParentId(activeProjectId);
   }
-    // This code path was kept in case there was ever a time when the app wouldn't have an active project.
-    // In over 5 months of monitoring in production, we never saw this happen.
-    // Keeping it for defensive purposes, but it's not clear if it's necessary.
-    return models.workspace.all();
-
+  // This code path was kept in case there was ever a time when the app wouldn't have an active project.
+  // In over 5 months of monitoring in production, we never saw this happen.
+  // Keeping it for defensive purposes, but it's not clear if it's necessary.
+  return models.workspace.all();
 };
 
 // Only in the case of running unit tests from Inso can activeProjectId be undefined. This is because the concept of a project doesn't exist in git/insomnia sync or an export file
@@ -53,11 +52,12 @@ export const init = (activeProjectId?: string) => ({
       },
     },
     export: {
-      insomnia: async ({
-        workspace,
-      }: { workspace: Workspace }) => {
+      insomnia: async ({ workspace }: { workspace: Workspace }) => {
         if (workspace) {
-          const insomniaExport = await getInsomniaV5DataExport({ workspaceId: workspace._id, includePrivateEnvironments: false });
+          const insomniaExport = await getInsomniaV5DataExport({
+            workspaceId: workspace._id,
+            includePrivateEnvironments: false,
+          });
 
           return [insomniaExport];
         }
@@ -67,20 +67,18 @@ export const init = (activeProjectId?: string) => ({
         const allInsomniaExports = [];
 
         for (const workspace of workspaces) {
-          const insomniaExport = await getInsomniaV5DataExport({ workspaceId: workspace._id, includePrivateEnvironments: false });
+          const insomniaExport = await getInsomniaV5DataExport({
+            workspaceId: workspace._id,
+            includePrivateEnvironments: false,
+          });
           allInsomniaExports.push(insomniaExport);
         }
 
         return allInsomniaExports;
       },
 
-      har: async ({
-        workspace,
-        includePrivate,
-      }: HarExport = {}) => exportWorkspacesHAR(
-        workspace ? [workspace] : await getWorkspaces(activeProjectId),
-        Boolean(includePrivate),
-      ),
+      har: async ({ workspace, includePrivate }: HarExport = {}) =>
+        exportWorkspacesHAR(workspace ? [workspace] : await getWorkspaces(activeProjectId), Boolean(includePrivate)),
     },
   },
 });
diff --git a/packages/insomnia/src/plugins/context/network.ts b/packages/insomnia/src/plugins/context/network.ts
index 3127d2a271..e171898621 100644
--- a/packages/insomnia/src/plugins/context/network.ts
+++ b/packages/insomnia/src/plugins/context/network.ts
@@ -1,12 +1,19 @@
 import * as models from '../../models';
 import type { Request } from '../../models/request';
-import { fetchRequestData, responseTransform, sendCurlAndWriteTimeline, tryToInterpolateRequest, tryToTransformRequestWithPlugins } from '../../network/network';
+import {
+  fetchRequestData,
+  responseTransform,
+  sendCurlAndWriteTimeline,
+  tryToInterpolateRequest,
+  tryToTransformRequestWithPlugins,
+} from '../../network/network';
 
 export function init() {
   return {
     network: {
       async sendRequest(req: Request, extraInfo?: { requestChain: string[] }) {
-        const { request,
+        const {
+          request,
           environment,
           settings,
           clientCertificates,
@@ -16,7 +23,12 @@ export function init() {
           responseId,
         } = await fetchRequestData(req._id);
 
-        const renderResult = await tryToInterpolateRequest({ request, environment: environment._id, purpose: 'send', extraInfo });
+        const renderResult = await tryToInterpolateRequest({
+          request,
+          environment: environment._id,
+          purpose: 'send',
+          extraInfo,
+        });
         const renderedRequest = await tryToTransformRequestWithPlugins(renderResult);
         const response = await sendCurlAndWriteTimeline(
           renderedRequest,
@@ -24,9 +36,14 @@ export function init() {
           caCert,
           settings,
           timelinePath,
-          responseId
+          responseId,
+        );
+        const responsePatch = await responseTransform(
+          response,
+          activeEnvironmentId,
+          renderedRequest,
+          renderResult.context,
         );
-        const responsePatch = await responseTransform(response, activeEnvironmentId, renderedRequest, renderResult.context);
         return models.response.create(responsePatch, settings.maxHistoryResponses);
       },
     },
diff --git a/packages/insomnia/src/plugins/context/request.ts b/packages/insomnia/src/plugins/context/request.ts
index 07e21651a9..ad1ec33da4 100644
--- a/packages/insomnia/src/plugins/context/request.ts
+++ b/packages/insomnia/src/plugins/context/request.ts
@@ -1,21 +1,14 @@
 import * as misc from '../../common/misc';
 import type { RequestBody } from '../../models/request';
 import type { RenderedRequest } from '../../templating/types';
-export function filterParameters<T extends { name: string; value: string }>(
-  parameters: T[],
-  name: string,
-): T[] {
+export function filterParameters<T extends { name: string; value: string }>(parameters: T[], name: string): T[] {
   if (!Array.isArray(parameters) || !name) {
     return [];
   }
 
   return parameters.filter(h => (!h || !h.name ? false : h.name === name));
 }
-export function init(
-  renderedRequest: RenderedRequest | null,
-  renderedContext: Record<string, any>,
-  readOnly = false,
-) {
+export function init(renderedRequest: RenderedRequest | null, renderedContext: Record<string, any>, readOnly = false) {
   if (!renderedRequest) {
     throw new Error('contexts.request initialized without request');
   }
@@ -58,9 +51,7 @@ export function init(
       }
     },
 
-    getEnvironmentVariable(
-      name: string,
-    ): string | number | boolean | Record<string, any> | any[] | null {
+    getEnvironmentVariable(name: string): string | number | boolean | Record<string, any> | any[] | null {
       return renderedContext[name];
     },
 
@@ -96,8 +87,7 @@ export function init(
         const header = headers[headers.length - 1];
         return header.value || '';
       }
-        return null;
-
+      return null;
     },
 
     getHeaders() {
@@ -145,8 +135,7 @@ export function init(
         const parameter = parameters[parameters.length - 1];
         return parameter.value || '';
       }
-        return null;
-
+      return null;
     },
 
     getParameters() {
diff --git a/packages/insomnia/src/plugins/context/response.ts b/packages/insomnia/src/plugins/context/response.ts
index e3863226df..e9e85837ba 100644
--- a/packages/insomnia/src/plugins/context/response.ts
+++ b/packages/insomnia/src/plugins/context/response.ts
@@ -74,8 +74,7 @@ export function init(response?: MaybeResponse) {
         } else if (matchedHeaders.length === 1) {
           return matchedHeaders[0].value;
         }
-          return null;
-
+        return null;
       },
 
       getHeaders() {
diff --git a/packages/insomnia/src/plugins/context/store.ts b/packages/insomnia/src/plugins/context/store.ts
index c2f1f568b4..d22e1a4ea9 100644
--- a/packages/insomnia/src/plugins/context/store.ts
+++ b/packages/insomnia/src/plugins/context/store.ts
@@ -15,7 +15,7 @@ export interface PluginStore {
   >;
 }
 
-export function init(plugin: Plugin):{store: PluginStore} {
+export function init(plugin: Plugin): { store: PluginStore } {
   return {
     store: {
       async hasItem(key: string) {
@@ -45,8 +45,8 @@ export function init(plugin: Plugin):{store: PluginStore} {
           key: string;
           value: string;
         }[]
-        > {
-        const docs = await models.pluginData.all(plugin.name) || [];
+      > {
+        const docs = (await models.pluginData.all(plugin.name)) || [];
         return docs.map(d => ({
           value: d.value,
           key: d.key,
diff --git a/packages/insomnia/src/plugins/create.ts b/packages/insomnia/src/plugins/create.ts
index fea61d754b..00055991e4 100644
--- a/packages/insomnia/src/plugins/create.ts
+++ b/packages/insomnia/src/plugins/create.ts
@@ -2,12 +2,12 @@ import electron from 'electron';
 import fs from 'fs';
 import path from 'path';
 
-export async function createPlugin(
-  moduleName: string,
-  version: string,
-  mainJs: string,
-) {
-  const pluginDir = path.join(process.env['INSOMNIA_DATA_PATH'] || (process.type === 'renderer' ? window : electron).app.getPath('userData'), 'plugins', moduleName);
+export async function createPlugin(moduleName: string, version: string, mainJs: string) {
+  const pluginDir = path.join(
+    process.env['INSOMNIA_DATA_PATH'] || (process.type === 'renderer' ? window : electron).app.getPath('userData'),
+    'plugins',
+    moduleName,
+  );
 
   if (fs.existsSync(pluginDir)) {
     throw new Error(`Plugin already exists at "${pluginDir}"`);
diff --git a/packages/insomnia/src/plugins/index.ts b/packages/insomnia/src/plugins/index.ts
index 2ccd39c858..d47ce7962b 100644
--- a/packages/insomnia/src/plugins/index.ts
+++ b/packages/insomnia/src/plugins/index.ts
@@ -104,11 +104,7 @@ export async function init() {
   await reloadPlugins();
 }
 
-async function _traversePluginPath(
-  pluginMap: Record<string, Plugin>,
-  allPaths: string[],
-  allConfigs: PluginConfigMap,
-) {
+async function _traversePluginPath(pluginMap: Record<string, Plugin>, allPaths: string[], allConfigs: PluginConfigMap) {
   for (const p of allPaths) {
     if (!fs.existsSync(p)) {
       continue;
@@ -157,15 +153,16 @@ async function _traversePluginPath(
           description: pluginJson.description || pluginJson.insomnia.description || '',
           version: pluginJson.version || 'unknown',
           directory: modulePath || '',
-          config: (pluginJson.name in allConfigs)
-            ? allConfigs[pluginJson.name]
-            : { disabled: false },
+          config: pluginJson.name in allConfigs ? allConfigs[pluginJson.name] : { disabled: false },
           module: module,
         };
       } catch (err) {
         showError({
           title: 'Plugin Error',
-          message: 'Failed to load plugin ' + filename + '. Please contact the plugin author sharing the below stack trace to help them to ensure compatibility with the latest Insomnia.',
+          message:
+            'Failed to load plugin ' +
+            filename +
+            '. Please contact the plugin author sharing the below stack trace to help them to ensure compatibility with the latest Insomnia.',
           error: err,
         });
       }
@@ -189,10 +186,12 @@ export async function getPlugins(force = false): Promise<Plugin[]> {
           return path.join(process.env['HOME'] || '/', p.slice(1));
         }
         return p;
-
       });
     // Make sure the default directories exist
-    const pluginPath = path.join(process.env['INSOMNIA_DATA_PATH'] || (process.type === 'renderer' ? window : electron).app.getPath('userData'), 'plugins');
+    const pluginPath = path.join(
+      process.env['INSOMNIA_DATA_PATH'] || (process.type === 'renderer' ? window : electron).app.getPath('userData'),
+      'plugins',
+    );
     fs.mkdirSync(pluginPath, { recursive: true });
     // Also look in node_modules folder in each directory
     const basePaths = [pluginPath, ...extraPaths];
@@ -306,38 +305,40 @@ export async function getTemplateTags(): Promise<TemplateTag[]> {
 }
 
 export async function getRequestHooks(): Promise<RequestHook[]> {
-  let functions: RequestHook[] = [{
-    plugin: {
-      name: 'default-headers',
-      description: 'Set default headers for all requests',
-      version: '0.0.0',
-      directory: '',
-      config: {
-        disabled: false,
+  let functions: RequestHook[] = [
+    {
+      plugin: {
+        name: 'default-headers',
+        description: 'Set default headers for all requests',
+        version: '0.0.0',
+        directory: '',
+        config: {
+          disabled: false,
+        },
+        module: {},
       },
-      module: {},
-    },
-    hook: context => {
-      const headers = context.request.getEnvironmentVariable('DEFAULT_HEADERS');
-      if (!headers) {
-        return;
-      }
-      for (const name of Object.keys(headers)) {
-        const value = headers[name];
-        if (context.request.hasHeader(name)) {
-          console.log(`[header] Skip setting default header ${name}. Already set to ${value}`);
-          continue;
+      hook: context => {
+        const headers = context.request.getEnvironmentVariable('DEFAULT_HEADERS');
+        if (!headers) {
+          return;
         }
-        if (value === 'null') {
-          context.request.removeHeader(name);
-          console.log(`[header] Remove default header ${name}`);
-        } else {
-          context.request.setHeader(name, value);
-          console.log(`[header] Set default header ${name}: ${value}`);
+        for (const name of Object.keys(headers)) {
+          const value = headers[name];
+          if (context.request.hasHeader(name)) {
+            console.log(`[header] Skip setting default header ${name}. Already set to ${value}`);
+            continue;
+          }
+          if (value === 'null') {
+            context.request.removeHeader(name);
+            console.log(`[header] Remove default header ${name}`);
+          } else {
+            context.request.setHeader(name, value);
+            console.log(`[header] Set default header ${name}: ${value}`);
+          }
         }
-      }
+      },
     },
-  }];
+  ];
 
   for (const plugin of await getActivePlugins()) {
     const moreFunctions = plugin.module.requestHooks || [];
diff --git a/packages/insomnia/src/plugins/misc.test.ts b/packages/insomnia/src/plugins/misc.test.ts
index 3a456f6e06..da239b2fbb 100644
--- a/packages/insomnia/src/plugins/misc.test.ts
+++ b/packages/insomnia/src/plugins/misc.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 
-import type { PluginTheme} from './misc';
+import type { PluginTheme } from './misc';
 import { containsNunjucks, validateTheme, validateThemeName } from './misc';
 
 describe('containsNunjucks', () => {
@@ -21,9 +21,10 @@ describe('validateTheme', () => {
   const nunjucksValue = '{{ nunjucks.4.lyfe }}';
   const name = 'mock-plugin';
   const displayName = 'Mock Plugin';
-  const mockMessage = (path: string[]) => `[plugin] Nunjucks values in plugin themes are no longer valid. The plugin ${displayName} (${name}) has an invalid value, "${nunjucksValue}" at the path $.theme.${path.join('.')}`;
+  const mockMessage = (path: string[]) =>
+    `[plugin] Nunjucks values in plugin themes are no longer valid. The plugin ${displayName} (${name}) has an invalid value, "${nunjucksValue}" at the path $.theme.${path.join('.')}`;
 
-  vi.spyOn(console, 'error').mockImplementation(() => { });
+  vi.spyOn(console, 'error').mockImplementation(() => {});
 
   it('will validate rawCSS in the plugin theme', () => {
     const pluginTheme: PluginTheme = {
diff --git a/packages/insomnia/src/plugins/misc.ts b/packages/insomnia/src/plugins/misc.ts
index b7cd0be6be..96f4f0405b 100644
--- a/packages/insomnia/src/plugins/misc.ts
+++ b/packages/insomnia/src/plugins/misc.ts
@@ -92,9 +92,7 @@ export const validateThemeName = (name: string) => {
   return validName;
 };
 
-export const containsNunjucks = (data: string) => (
-  data.includes('{{') && data.includes('}}')
-);
+export const containsNunjucks = (data: string) => data.includes('{{') && data.includes('}}');
 const getChildValue = (theme: any, path: string[]) => {
   return path.reduce((acc, v: string) => {
     try {
@@ -116,7 +114,9 @@ export const validateTheme = (pluginTheme: PluginTheme) => {
     }
 
     if (typeof data === 'string' && containsNunjucks(data)) {
-      console.error(`[plugin] Nunjucks values in plugin themes are no longer valid. The plugin ${pluginTheme.displayName} (${pluginTheme.name}) has an invalid value, "${data}" at the path $.theme.${keyPath.join('.')}`);
+      console.error(
+        `[plugin] Nunjucks values in plugin themes are no longer valid. The plugin ${pluginTheme.displayName} (${pluginTheme.name}) has an invalid value, "${data}" at the path $.theme.${keyPath.join('.')}`,
+      );
     }
 
     if (typeof data === 'object') {
@@ -130,18 +130,13 @@ export const validateTheme = (pluginTheme: PluginTheme) => {
 
   check(['rawCss']);
 
-  [
-    'background',
-    'foreground',
-    'highlight',
-  ].forEach(rootPath => {
+  ['background', 'foreground', 'highlight'].forEach(rootPath => {
     check([rootPath]);
 
     Object.keys(pluginTheme.theme.styles ?? {}).forEach(style => {
       check(['styles', style, rootPath]);
     });
   });
-
 };
 
 export const generateThemeCSS = (pluginTheme: PluginTheme) => {
@@ -165,19 +160,11 @@ export const generateThemeCSS = (pluginTheme: PluginTheme) => {
   if (theme.styles) {
     const styles = theme.styles;
     // Dropdown Menus
-    css += wrapStyles(
-      name,
-      '.theme--dropdown__menu',
-      getThemeBlockCSS(styles.dropdown || styles.dialog),
-    );
+    css += wrapStyles(name, '.theme--dropdown__menu', getThemeBlockCSS(styles.dropdown || styles.dialog));
     // Tooltips
     css += wrapStyles(name, '.theme--tooltip', getThemeBlockCSS(styles.tooltip || styles.dialog));
     // Overlay
-    css += wrapStyles(
-      name,
-      '.theme--transparent-overlay',
-      getThemeBlockCSS(styles.transparentOverlay),
-    );
+    css += wrapStyles(name, '.theme--transparent-overlay', getThemeBlockCSS(styles.transparentOverlay));
     // Dialogs
     css += wrapStyles(name, '.theme--dialog', getThemeBlockCSS(styles.dialog));
     css += wrapStyles(name, '.theme--dialog__header', getThemeBlockCSS(styles.dialogHeader));
diff --git a/packages/insomnia/src/plugins/themes.ts b/packages/insomnia/src/plugins/themes.ts
index 0d52e39770..516fdb3326 100644
--- a/packages/insomnia/src/plugins/themes.ts
+++ b/packages/insomnia/src/plugins/themes.ts
@@ -1,4 +1,3 @@
-
 import r from './themes/colorblind-dark';
 import a from './themes/default';
 import k from './themes/gruvbox';
diff --git a/packages/insomnia/src/plugins/themes/colorblind-dark.ts b/packages/insomnia/src/plugins/themes/colorblind-dark.ts
index 38676213d7..2de36ddf5a 100644
--- a/packages/insomnia/src/plugins/themes/colorblind-dark.ts
+++ b/packages/insomnia/src/plugins/themes/colorblind-dark.ts
@@ -3,51 +3,51 @@ export default {
   displayName: 'Dark Colorblind',
   theme: {
     background: {
-      default:    '#21262D', 	// primary background color
-      success:    '#0080FF', 	// POST request, 200 OK, parameter names
-      notice:     '#E8F086', 	// SEND button, GET request
-      warning:    '#A691AE', 	// PUT request
-      danger:     '#CC5500', 	// DELETE request
-      surprise:   '#FFC20A', 	// accent (Dashboard link, branch button, add plugin button)
-      info:       '#58A6FF', 	// OPTIONS AND HEAD request
+      default: '#21262D', // primary background color
+      success: '#0080FF', // POST request, 200 OK, parameter names
+      notice: '#E8F086', // SEND button, GET request
+      warning: '#A691AE', // PUT request
+      danger: '#CC5500', // DELETE request
+      surprise: '#FFC20A', // accent (Dashboard link, branch button, add plugin button)
+      info: '#58A6FF', // OPTIONS AND HEAD request
     },
     foreground: {
-      default:     '#fff',    // primary font color
-      success:     '#000', 	// secondary font color for success background
-      notice:      '#000', 	// secondary font color for notice background
-      warning:     '#fff', 	// secondary font color for warning background
-      danger:      '#fff', 	// secondary font color for danger background
-      surprise:    '#000', 	// secondary font color for surprise background
-      info:        '#000', 	// secondary font color for info background
+      default: '#fff', // primary font color
+      success: '#000', // secondary font color for success background
+      notice: '#000', // secondary font color for notice background
+      warning: '#fff', // secondary font color for warning background
+      danger: '#fff', // secondary font color for danger background
+      surprise: '#000', // secondary font color for surprise background
+      info: '#000', // secondary font color for info background
     },
     highlight: {
-      default: '#D3D3D3',      // sidebar highlight color
+      default: '#D3D3D3', // sidebar highlight color
     },
     styles: {
       appHeader: {
         foreground: {
-          surprise:   '#000',      // branch button font color
+          surprise: '#000', // branch button font color
         },
       },
       paneHeader: {
         foreground: {
-          surprise:   '#000', 	// accent font color
-          info:       '#000', 		// response font color
+          surprise: '#000', // accent font color
+          info: '#000', // response font color
         },
       },
       editor: {
         foreground: {
-          default:    '#000', 	// primary editor font color
-          surprise:   '#000', 	// accent font color
-          info:       '#000', 		// response font color
+          default: '#000', // primary editor font color
+          surprise: '#000', // accent font color
+          info: '#000', // response font color
         },
       },
       dialog: {
         background: {
-          default:    '#2E4052', 	// modal primary background color
+          default: '#2E4052', // modal primary background color
         },
         foreground: {
-          default:    '#fff', 	    // primary font color for modals
+          default: '#fff', // primary font color for modals
         },
       },
     },
diff --git a/packages/insomnia/src/preload.ts b/packages/insomnia/src/preload.ts
index 3b0d6ade4d..ec10632f3f 100644
--- a/packages/insomnia/src/preload.ts
+++ b/packages/insomnia/src/preload.ts
@@ -129,29 +129,32 @@ const main: Window['main'] = {
     },
   },
   hiddenBrowserWindow: {
-    runScript: options => new Promise(async (resolve, reject) => {
-      const isPortAlive = ports.get('hiddenWindowPort') !== undefined;
-      await ipcRenderer.invoke('open-channel-to-hidden-browser-window', isPortAlive);
+    runScript: options =>
+      new Promise(async (resolve, reject) => {
+        const isPortAlive = ports.get('hiddenWindowPort') !== undefined;
+        await ipcRenderer.invoke('open-channel-to-hidden-browser-window', isPortAlive);
 
-      const port = ports.get('hiddenWindowPort');
-      invariant(port, 'hiddenWindowPort is undefined');
+        const port = ports.get('hiddenWindowPort');
+        invariant(port, 'hiddenWindowPort is undefined');
 
-      port.onmessage = event => {
-        console.log('[preload] received result:', event.data);
-        if (event.data.error) {
-          reject(new Error(event.data.error));
-        }
-        resolve(event.data);
-      };
+        port.onmessage = event => {
+          console.log('[preload] received result:', event.data);
+          if (event.data.error) {
+            reject(new Error(event.data.error));
+          }
+          resolve(event.data);
+        };
 
-      port.postMessage({ ...options, type: 'runPreRequestScript' });
-    }),
+        port.postMessage({ ...options, type: 'runPreRequestScript' });
+      }),
   },
-  landingPageRendered: (landingPage, tags) => ipcRenderer.send('landingPageRendered', {
-    landingPage,
-    tags,
-  }),
-  extractJsonFileFromPostmanDataDumpArchive: archivePath => ipcRenderer.invoke('extractJsonFileFromPostmanDataDumpArchive', archivePath),
+  landingPageRendered: (landingPage, tags) =>
+    ipcRenderer.send('landingPageRendered', {
+      landingPage,
+      tags,
+    }),
+  extractJsonFileFromPostmanDataDumpArchive: archivePath =>
+    ipcRenderer.invoke('extractJsonFileFromPostmanDataDumpArchive', archivePath),
 };
 
 ipcRenderer.on('hidden-browser-window-response-listener', event => {
diff --git a/packages/insomnia/src/requireInterceptor.ts b/packages/insomnia/src/requireInterceptor.ts
index 13a0e83632..cef3d30552 100644
--- a/packages/insomnia/src/requireInterceptor.ts
+++ b/packages/insomnia/src/requireInterceptor.ts
@@ -44,12 +44,7 @@ export const requireInterceptor = (moduleName: string): any => {
     ].includes(moduleName)
   ) {
     return require(moduleName);
-  } else if (
-    [
-      'atob',
-      'btoa',
-    ].includes(moduleName)
-  ) {
+  } else if (['atob', 'btoa'].includes(moduleName)) {
     return moduleName === 'atob' ? atob : btoa;
   } else if (
     [
diff --git a/packages/insomnia/src/scriptExecutor.ts b/packages/insomnia/src/scriptExecutor.ts
index 1be2c55576..ba0ba0daea 100644
--- a/packages/insomnia/src/scriptExecutor.ts
+++ b/packages/insomnia/src/scriptExecutor.ts
@@ -3,13 +3,24 @@ import { appendFile } from 'node:fs/promises';
 import * as _ from 'lodash';
 
 import { initInsomniaObject, InsomniaObject } from '../../insomnia-scripting-environment/src/objects';
-import { getNewConsole, mergeClientCertificates, mergeCookieJar, mergeRequests, mergeSettings, type RequestContext } from '../../insomnia-scripting-environment/src/objects';
+import {
+  getNewConsole,
+  mergeClientCertificates,
+  mergeCookieJar,
+  mergeRequests,
+  mergeSettings,
+  type RequestContext,
+} from '../../insomnia-scripting-environment/src/objects';
 import { invariant } from '../src/utils/invariant';
 import { requireInterceptor } from './requireInterceptor';
 
-export const runScript = async (
-  { script, context }: { script: string; context: RequestContext },
-): Promise<RequestContext> => {
+export const runScript = async ({
+  script,
+  context,
+}: {
+  script: string;
+  context: RequestContext;
+}): Promise<RequestContext> => {
   // console.log(script);
   const scriptConsole = getNewConsole();
 
@@ -21,7 +32,7 @@ export const runScript = async (
     return result;
   };
 
-  const AsyncFunction = (async () => { }).constructor;
+  const AsyncFunction = (async () => {}).constructor;
   const executeScript = AsyncFunction(
     'insomnia',
     'require',
@@ -36,7 +47,7 @@ export const runScript = async (
     `
       const $ = insomnia;
       ${script};
-      return insomnia;`
+      return insomnia;`,
   );
 
   const mutatedInsomniaObject = await executeScript(
@@ -91,21 +102,15 @@ export const runScript = async (
 };
 
 // proxiedSetTimeout has to be here as callback could be an async task
-function proxiedSetTimeout(
-  callback: () => void,
-  ms?: number | undefined,
-) {
+function proxiedSetTimeout(callback: () => void, ms?: number | undefined) {
   let resolveHdl: (value: unknown) => void;
 
   new Promise(resolve => {
     resolveHdl = resolve;
   });
 
-  return setTimeout(
-    () => {
-      callback();
-      resolveHdl(null);
-    },
-    ms,
-  );
+  return setTimeout(() => {
+    callback();
+    resolveHdl(null);
+  }, ms);
 }
diff --git a/packages/insomnia/src/sync/delta/__tests__/diff.test.ts b/packages/insomnia/src/sync/delta/__tests__/diff.test.ts
index 9c431823a9..75710f2ee5 100644
--- a/packages/insomnia/src/sync/delta/__tests__/diff.test.ts
+++ b/packages/insomnia/src/sync/delta/__tests__/diff.test.ts
@@ -7,7 +7,7 @@ describe('diff()', () => {
     const result = __internal.getBlockMap('Hello World!!', 3);
 
     expect(result).toEqual({
-      dbc2d1fed0dc37a70aea0f376958c802eddc0559: [
+      'dbc2d1fed0dc37a70aea0f376958c802eddc0559': [
         {
           start: 0,
           len: 3,
@@ -28,7 +28,7 @@ describe('diff()', () => {
           hash: '3603dd999f7dd952041d3bdb27f74e511cfd6b2a',
         },
       ],
-      c20d168802bbae1c84f90b9b0495e0d918da3aea: [
+      'c20d168802bbae1c84f90b9b0495e0d918da3aea': [
         {
           start: 9,
           len: 3,
diff --git a/packages/insomnia/src/sync/delta/__tests__/patch.test.ts b/packages/insomnia/src/sync/delta/__tests__/patch.test.ts
index 695116121d..77e68c1e7b 100644
--- a/packages/insomnia/src/sync/delta/__tests__/patch.test.ts
+++ b/packages/insomnia/src/sync/delta/__tests__/patch.test.ts
@@ -6,10 +6,7 @@ import { patch } from '../patch';
 describe('patch()', () => {
   it('works on many examples', () => {
     const things = [
-      [
-        'Hello, this is a pretty long sentence about not much at all.',
-        'Hello, this is a pretty short sentence.',
-      ],
+      ['Hello, this is a pretty long sentence about not much at all.', 'Hello, this is a pretty short sentence.'],
       ['xxxxxxxxxxyyyyyyyyyyyyyyyyzzzzzzzzzzzzzzzz', 'abc'],
       ['xyz', 'xyz'],
     ];
diff --git a/packages/insomnia/src/sync/delta/diff.ts b/packages/insomnia/src/sync/delta/diff.ts
index e6bc250838..e2c883d3b3 100644
--- a/packages/insomnia/src/sync/delta/diff.ts
+++ b/packages/insomnia/src/sync/delta/diff.ts
@@ -25,7 +25,7 @@ export function diff(source: string, target: string, blockSize: number): Operati
   // Iterate over source blocks in order and match them to target
   let lastTargetMatch = 0;
 
-  for (let targetPosition = 0; targetPosition < target.length;) {
+  for (let targetPosition = 0; targetPosition < target.length; ) {
     const targetBlock = getBlock(target, targetPosition, blockSize);
     const sourceBlocks = sourceBlockMap[targetBlock.hash] || [];
 
@@ -103,7 +103,7 @@ function getBlock(value: string, start: number, blockSize: number): Block {
 function getBlockMap(value: string, blockSize: number): Record<string, Block[]> {
   const map: Record<string, Block[]> = {};
 
-  for (let i = 0; i < value.length;) {
+  for (let i = 0; i < value.length; ) {
     const block = getBlock(value, i, blockSize);
 
     if (map[block.hash]) {
diff --git a/packages/insomnia/src/sync/git/__tests__/git-vcs.test.ts b/packages/insomnia/src/sync/git/__tests__/git-vcs.test.ts
index d49b4c795e..c79bab9351 100644
--- a/packages/insomnia/src/sync/git/__tests__/git-vcs.test.ts
+++ b/packages/insomnia/src/sync/git/__tests__/git-vcs.test.ts
@@ -37,66 +37,71 @@ describe('Git-VCS', () => {
       // foo.txt and bar.txt should be in the unstaged list
       const status = await GitVCS.status();
       expect(status.staged).toEqual([]);
-      expect(status.unstaged).toEqual([{
-        'name': '',
-        'path': '.insomnia/bar.txt',
-        'status': [0, 2, 0],
-      },
-      {
-        'name': '',
-        'path': '.insomnia/foo.txt',
-        'status': [0, 2, 0],
+      expect(status.unstaged).toEqual([
+        {
+          name: '',
+          path: '.insomnia/bar.txt',
+          status: [0, 2, 0],
+        },
+        {
+          name: '',
+          path: '.insomnia/foo.txt',
+          status: [0, 2, 0],
         },
       ]);
 
       const fooStatus = status.unstaged.find(f => f.path.includes(fooTxt));
 
-      fooStatus && await GitVCS.stageChanges([fooStatus]);
+      fooStatus && (await GitVCS.stageChanges([fooStatus]));
       const status2 = await GitVCS.status();
-      expect(status2.staged).toEqual([{
-        'name': '',
-        'path': '.insomnia/foo.txt',
-        'status': [0, 2, 2],
-      }]);
+      expect(status2.staged).toEqual([
+        {
+          name: '',
+          path: '.insomnia/foo.txt',
+          status: [0, 2, 2],
+        },
+      ]);
       expect(status2.unstaged).toEqual([
         {
-          'name': '',
-          'path': '.insomnia/bar.txt',
-          'status': [0, 2, 0],
+          name: '',
+          path: '.insomnia/bar.txt',
+          status: [0, 2, 0],
         },
       ]);
 
       const barStatus = status2.unstaged.find(f => f.path.includes(barTxt));
 
-      barStatus && await GitVCS.stageChanges([barStatus]);
+      barStatus && (await GitVCS.stageChanges([barStatus]));
       const status3 = await GitVCS.status();
       expect(status3.staged).toEqual([
         {
-          'name': '',
-          'path': '.insomnia/bar.txt',
-          'status': [0, 2, 2],
+          name: '',
+          path: '.insomnia/bar.txt',
+          status: [0, 2, 2],
         },
         {
-          'name': '',
-          'path': '.insomnia/foo.txt',
-          'status': [0, 2, 2],
+          name: '',
+          path: '.insomnia/foo.txt',
+          status: [0, 2, 2],
         },
       ]);
 
       const fooStatus3 = status3.staged.find(f => f.path.includes(fooTxt));
-      fooStatus3 && await GitVCS.unstageChanges([fooStatus3]);
+      fooStatus3 && (await GitVCS.unstageChanges([fooStatus3]));
       const status4 = await GitVCS.status();
       expect(status4).toEqual({
-        staged: [{
-          'name': '',
-          'path': '.insomnia/bar.txt',
-          'status': [0, 2, 2],
-        }],
+        staged: [
+          {
+            name: '',
+            path: '.insomnia/bar.txt',
+            status: [0, 2, 2],
+          },
+        ],
         unstaged: [
           {
-          'name': '',
-          'path': '.insomnia/foo.txt',
-          'status': [0, 2, 0],
+            name: '',
+            path: '.insomnia/foo.txt',
+            status: [0, 2, 0],
           },
         ],
       });
@@ -135,24 +140,22 @@ describe('Git-VCS', () => {
 
       const status = await GitVCS.status();
       const fooStatus = status.unstaged.find(f => f.path.includes(fooTxt));
-      fooStatus && await GitVCS.stageChanges([fooStatus]);
+      fooStatus && (await GitVCS.stageChanges([fooStatus]));
 
       const status2 = await GitVCS.status();
 
-      expect(status2.staged).toEqual([{
-        'name': '',
-        'path': '.insomnia/foo.txt',
-        'status': [0, 2, 2],
-      }]);
+      expect(status2.staged).toEqual([
+        {
+          name: '',
+          path: '.insomnia/foo.txt',
+          status: [0, 2, 2],
+        },
+      ]);
       expect(status2.unstaged).toEqual([
         {
-        'name': '',
-        'path': '.insomnia/bar.txt',
-          'status': [
-            0,
-            2,
-            0,
-          ],
+          name: '',
+          path: '.insomnia/bar.txt',
+          status: [0, 2, 0],
         },
       ]);
 
@@ -163,13 +166,9 @@ describe('Git-VCS', () => {
       expect(status3.staged).toEqual([]);
       expect(status3.unstaged).toEqual([
         {
-        'name': '',
-        'path': '.insomnia/bar.txt',
-          'status': [
-            0,
-            2,
-            0,
-          ],
+          name: '',
+          path: '.insomnia/bar.txt',
+          status: [0, 2, 0],
         },
       ]);
 
@@ -220,14 +219,14 @@ First commit!
       await GitVCS.setAuthor({ name: 'Karen Brown', email: 'karen@example.com' });
       const status = await GitVCS.status();
       const fooStatus = status.unstaged.find(f => f.path.includes(fooTxt));
-      fooStatus && await GitVCS.stageChanges([fooStatus]);
+      fooStatus && (await GitVCS.stageChanges([fooStatus]));
       await GitVCS.commit('First commit!');
       expect((await GitVCS.log()).length).toBe(1);
       await GitVCS.checkout('new-branch');
       expect((await GitVCS.log()).length).toBe(1);
       const status2 = await GitVCS.status();
       const barStatus = status2.unstaged.find(f => f.path.includes(barTxt));
-      barStatus && await GitVCS.stageChanges([barStatus]);
+      barStatus && (await GitVCS.stageChanges([barStatus]));
       await GitVCS.commit('Second commit!');
       expect((await GitVCS.log()).length).toBe(2);
       await GitVCS.checkout('main');
@@ -285,12 +284,12 @@ First commit!
       const status2 = await GitVCS.status();
 
       expect(status2).toEqual({
-        'staged': [],
-        'unstaged': [
+        staged: [],
+        unstaged: [
           {
-            'name': '',
-            'path': '.insomnia/folder/bar.txt',
-            'status': [1, 2, 1],
+            name: '',
+            path: '.insomnia/folder/bar.txt',
+            status: [1, 2, 1],
           },
         ],
       });
@@ -341,12 +340,12 @@ First commit!
       await GitVCS.discardChanges(changesToUndo);
       const status3 = await GitVCS.status();
       expect(status3).toEqual({
-        'staged': [],
-        'unstaged': [
+        staged: [],
+        unstaged: [
           {
-            'name': '',
-            'path': '.insomnia/foo3.txt',
-            'status': [1, 2, 1],
+            name: '',
+            path: '.insomnia/foo3.txt',
+            status: [1, 2, 1],
           },
         ],
       });
diff --git a/packages/insomnia/src/sync/git/__tests__/ne-db-client.test.ts b/packages/insomnia/src/sync/git/__tests__/ne-db-client.test.ts
index f0464659a2..e3d534e048 100644
--- a/packages/insomnia/src/sync/git/__tests__/ne-db-client.test.ts
+++ b/packages/insomnia/src/sync/git/__tests__/ne-db-client.test.ts
@@ -19,7 +19,7 @@ describe('NeDBClient', () => {
   beforeEach(async () => {
     workspaceBuilder.reset();
     setupDateMocks();
-    await db.init(models.types(), { inMemoryOnly: true }, true, () => { },);
+    await db.init(models.types(), { inMemoryOnly: true }, true, () => {});
     // Create some sample models
     await models.project.create({
       _id: 'proj_1',
@@ -194,9 +194,7 @@ describe('NeDBClient', () => {
       // Act
       const promiseResult = neDbClient.writeFile(filePath, YAML.stringify(env));
       // Assert
-      await expect(promiseResult).rejects.toThrowError(
-        'Doc _id does not match file path [env_1 != env_2]',
-      );
+      await expect(promiseResult).rejects.toThrowError('Doc _id does not match file path [env_1 != env_2]');
     });
 
     it('should throw error if type does not match', async () => {
@@ -212,9 +210,7 @@ describe('NeDBClient', () => {
       // Act
       const promiseResult = neDbClient.writeFile(filePath, YAML.stringify(env));
       // Assert
-      await expect(promiseResult).rejects.toThrowError(
-        'Doc type does not match file path [Environment != Request]',
-      );
+      await expect(promiseResult).rejects.toThrowError('Doc type does not match file path [Environment != Request]');
     });
   });
 
diff --git a/packages/insomnia/src/sync/git/__tests__/util.ts b/packages/insomnia/src/sync/git/__tests__/util.ts
index 4934006302..65aee637de 100644
--- a/packages/insomnia/src/sync/git/__tests__/util.ts
+++ b/packages/insomnia/src/sync/git/__tests__/util.ts
@@ -8,8 +8,7 @@ export function setupDateMocks() {
       if (!arg) {
         return new Date(ts++);
       }
-        super(arg);
-
+      super(arg);
     }
 
     getTimezoneOffset() {
diff --git a/packages/insomnia/src/sync/git/fs-client.ts b/packages/insomnia/src/sync/git/fs-client.ts
index 5bfdc4a2fd..94402a5a16 100644
--- a/packages/insomnia/src/sync/git/fs-client.ts
+++ b/packages/insomnia/src/sync/git/fs-client.ts
@@ -18,19 +18,23 @@ export const fsClient = (basePath: string) => {
   console.log(`[fsClient] Created in ${basePath}`);
   fs.mkdirSync(basePath, { recursive: true });
 
-  const wrap = (fn: FSWraps) => async (filePath: string, ...args: any[]) => {
-    const modifiedPath = path.join(basePath, path.normalize(filePath));
+  const wrap =
+    (fn: FSWraps) =>
+    async (filePath: string, ...args: any[]) => {
+      const modifiedPath = path.join(basePath, path.normalize(filePath));
 
-    // @ts-expect-error -- TSCONVERSION
-    return fn(modifiedPath, ...args);
-  };
+      // @ts-expect-error -- TSCONVERSION
+      return fn(modifiedPath, ...args);
+    };
 
-  const wrapSymlink = (fn: typeof fs.promises.symlink) => async (filePath: string, target: string, ...args: any[]) => {
-    const modifiedPath = path.join(basePath, path.normalize(filePath));
-    const modifiedTarget = path.join(basePath, path.normalize(target));
+  const wrapSymlink =
+    (fn: typeof fs.promises.symlink) =>
+    async (filePath: string, target: string, ...args: any[]) => {
+      const modifiedPath = path.join(basePath, path.normalize(filePath));
+      const modifiedTarget = path.join(basePath, path.normalize(target));
 
-    return fn(modifiedPath, modifiedTarget, ...args);
-  };
+      return fn(modifiedPath, modifiedTarget, ...args);
+    };
 
   return {
     promises: {
diff --git a/packages/insomnia/src/sync/git/git-vcs.ts b/packages/insomnia/src/sync/git/git-vcs.ts
index 08dac04a99..054423d19f 100644
--- a/packages/insomnia/src/sync/git/git-vcs.ts
+++ b/packages/insomnia/src/sync/git/git-vcs.ts
@@ -35,9 +35,7 @@ interface GitCredentialsOAuth {
 
 export type GitCredentials = GitCredentialsBase | GitCredentialsOAuth;
 
-export const isGitCredentialsOAuth = (
-  credentials: GitCredentials
-): credentials is GitCredentialsOAuth => {
+export const isGitCredentialsOAuth = (credentials: GitCredentials): credentials is GitCredentialsOAuth => {
   return 'oauth2format' in credentials;
 };
 
@@ -181,14 +179,7 @@ export class GitVCS {
     }
   }
 
-  async initFromClone({
-    repoId,
-    url,
-    gitCredentials,
-    directory,
-    fs,
-    gitDirectory,
-  }: InitFromCloneOptions) {
+  async initFromClone({ repoId, url, gitCredentials, directory, fs, gitDirectory }: InitFromCloneOptions) {
     this._baseOpts = {
       ...this._baseOpts,
       ...gitCallbacks(gitCredentials),
@@ -241,9 +232,7 @@ export class GitVCS {
       branches.push(branch);
     }
 
-    console.log(
-      `[git] Local branches: ${branches.join(', ')} (current: ${branch})`
-    );
+    console.log(`[git] Local branches: ${branches.join(', ')} (current: ${branch})`);
 
     return GitVCS.sortBranches(branches);
   }
@@ -267,11 +256,7 @@ export class GitVCS {
       });
       console.log({ branches });
       // Don't care about returning remote HEAD
-      return GitVCS.sortBranches(
-        branches
-          .filter(b => b.ref !== 'HEAD')
-          .map(b => b.ref.replace('refs/heads/', ''))
-      );
+      return GitVCS.sortBranches(branches.filter(b => b.ref !== 'HEAD').map(b => b.ref.replace('refs/heads/', '')));
     } catch (e) {
       console.log(`[git] Failed to list remote branches for ${uri}`, e);
       return [];
@@ -321,11 +306,7 @@ export class GitVCS {
         const headOid = headType === 'blob' ? await head?.oid() : undefined;
         const stageOid = stageType === 'blob' ? await stage?.oid() : undefined;
         let workdirOid;
-        if (
-          headType !== 'blob' &&
-          workdirType === 'blob' &&
-          stageType !== 'blob'
-        ) {
+        if (headType !== 'blob' && workdirType === 'blob' && stageType !== 'blob') {
           workdirOid = '42';
         } else if (workdirType === 'blob') {
           workdirOid = await workdir?.oid();
@@ -423,7 +404,8 @@ export class GitVCS {
       ],
       map: async function map(filepath, [head, workdir, stage]) {
         if (baseOpts.legacyDiff) {
-          const isInsomniaFile = filepath.startsWith(GIT_INSOMNIA_DIR_NAME) || filepath.startsWith('insomnia.') || filepath === '.';
+          const isInsomniaFile =
+            filepath.startsWith(GIT_INSOMNIA_DIR_NAME) || filepath.startsWith('insomnia.') || filepath === '.';
           if (!isInsomniaFile) {
             return null;
           }
@@ -434,10 +416,12 @@ export class GitVCS {
           }
         }
 
-        if (await git.isIgnored({
-          ...baseOpts,
-          filepath,
-        })) {
+        if (
+          await git.isIgnored({
+            ...baseOpts,
+            filepath,
+          })
+        ) {
           return null;
         }
         const [headType, workdirType, stageType] = await Promise.all([
@@ -471,11 +455,7 @@ export class GitVCS {
         const headOid = headType === 'blob' ? await head?.oid() : undefined;
         const stageOid = stageType === 'blob' ? await stage?.oid() : undefined;
         let workdirOid;
-        if (
-          headType !== 'blob' &&
-          workdirType === 'blob' &&
-          stageType !== 'blob'
-        ) {
+        if (headType !== 'blob' && workdirType === 'blob' && stageType !== 'blob') {
           // We don't actually NEED the sha. Any sha will do
           // TODO: update this logic to handle N trees instead of just 3.
           workdirOid = '42';
@@ -667,7 +647,7 @@ export class GitVCS {
     if (response.error) {
       console.log('[git] Push rejected', response);
       throw new Error(
-        `Push rejected with errors: ${response.error}.\n\nGo to View > Toggle DevTools > Console for more information.`
+        `Push rejected with errors: ${response.error}.\n\nGo to View > Toggle DevTools > Console for more information.`,
       );
     }
 
@@ -675,7 +655,7 @@ export class GitVCS {
       console.log('[git] Push failed with errors', response.errors);
       const errorsString = JSON.stringify(response.errors);
       throw new Error(
-        `Push rejected with errors: ${errorsString}.\n\nGo to View > Toggle DevTools > Console for more information.`
+        `Push rejected with errors: ${errorsString}.\n\nGo to View > Toggle DevTools > Console for more information.`,
       );
     }
 
@@ -699,27 +679,22 @@ export class GitVCS {
       throw new Error('Cannot pull with uncommitted changes, please commit local changes first.');
     }
     console.log('[git] Pull remote=origin', await this.getCurrentBranch());
-    return git.pull({
-      ...this._baseOpts,
-      ...gitCallbacks(gitCredentials),
-      remote: 'origin',
-      singleBranch: true,
-    }).catch(
-      async err => {
+    return git
+      .pull({
+        ...this._baseOpts,
+        ...gitCallbacks(gitCredentials),
+        remote: 'origin',
+        singleBranch: true,
+      })
+      .catch(async err => {
         if (err instanceof git.Errors.MergeConflictError) {
           const oursBranch = await this.getCurrentBranch();
           const theirsBranch = `origin/${oursBranch}`;
 
-          return await this._collectMergeConflicts(
-            err,
-            oursBranch,
-            theirsBranch,
-          );
+          return await this._collectMergeConflicts(err, oursBranch, theirsBranch);
         }
-          throw err;
-
-      },
-    );
+        throw err;
+      });
   }
 
   // Collect merge conflict details from isomorphic-git git.Errors.MergeConflictError and throw a MergeConflictError which will be used to display the conflicts in the SyncMergeModal
@@ -728,9 +703,7 @@ export class GitVCS {
     oursBranch: string,
     theirsBranch: string,
   ) {
-    const {
-      filepaths, bothModified, deleteByUs, deleteByTheirs,
-    } = mergeConflictError.data;
+    const { filepaths, bothModified, deleteByUs, deleteByTheirs } = mergeConflictError.data;
     if (filepaths.length) {
       const mergeConflicts: MergeConflict[] = [];
       const conflictPathsObj = {
@@ -738,11 +711,7 @@ export class GitVCS {
         deleteByUs,
         deleteByTheirs,
       };
-      const conflictTypeList: (keyof typeof conflictPathsObj)[] = [
-        'bothModified',
-        'deleteByUs',
-        'deleteByTheirs',
-      ];
+      const conflictTypeList: (keyof typeof conflictPathsObj)[] = ['bothModified', 'deleteByUs', 'deleteByTheirs'];
 
       const oursHeadCommitOid = await git.resolveRef({
         ...this._baseOpts,
@@ -757,16 +726,16 @@ export class GitVCS {
       const _baseOpts = this._baseOpts;
 
       function readBlob(filepath: string, oid: string) {
-        return git.readBlob({
-          ..._baseOpts,
-          oid,
-          filepath,
-        }).then(
-          ({ blob, oid: blobId }) => ({
+        return git
+          .readBlob({
+            ..._baseOpts,
+            oid,
+            filepath,
+          })
+          .then(({ blob, oid: blobId }) => ({
             blobContent: parse(Buffer.from(blob).toString('utf8')),
             blobId,
-          })
-        );
+          }));
       }
 
       function readOursBlob(filepath: string) {
@@ -780,9 +749,9 @@ export class GitVCS {
       for (const conflictType of conflictTypeList) {
         const conflictPaths = conflictPathsObj[conflictType];
         const message = {
-          'bothModified': 'both modified',
-          'deleteByUs': 'you deleted and they modified',
-          'deleteByTheirs': 'they deleted and you modified',
+          bothModified: 'both modified',
+          deleteByUs: 'you deleted and they modified',
+          deleteByTheirs: 'they deleted and you modified',
         }[conflictType];
         for (const conflictPath of conflictPaths) {
           let mineBlobContent = null;
@@ -792,19 +761,13 @@ export class GitVCS {
           let theirsBlobId = null;
 
           if (conflictType !== 'deleteByUs') {
-            const {
-              blobContent,
-              blobId,
-            } = await readOursBlob(conflictPath);
+            const { blobContent, blobId } = await readOursBlob(conflictPath);
             mineBlobContent = blobContent;
             mineBlobId = blobId;
           }
 
           if (conflictType !== 'deleteByTheirs') {
-            const {
-              blobContent,
-              blobId,
-            } = await readTheirsBlob(conflictPath);
+            const { blobContent, blobId } = await readTheirsBlob(conflictPath);
             theirsBlobContent = blobContent;
             theirsBlobId = blobId;
           }
@@ -832,7 +795,6 @@ export class GitVCS {
         commitMessage: `Merge branch '${theirsBranch}' into ${oursBranch}`,
         commitParent: [oursHeadCommitOid, theirsHeadCommitOid],
       });
-
     } else {
       throw new Error('Merge conflict filepaths is of length 0');
     }
@@ -858,15 +820,10 @@ export class GitVCS {
     for (const conflict of handledMergeConflicts) {
       assertIsPromiseFsClient(this._baseOpts.fs);
       if (conflict.theirsBlobContent) {
-        await this._baseOpts.fs.promises.writeFile(
-          conflict.key,
-          stringify(conflict.theirsBlobContent),
-        );
+        await this._baseOpts.fs.promises.writeFile(conflict.key, stringify(conflict.theirsBlobContent));
         await git.add({ ...this._baseOpts, filepath: conflict.key });
       } else {
-        await this._baseOpts.fs.promises.unlink(
-          conflict.key,
-        );
+        await this._baseOpts.fs.promises.unlink(conflict.key);
         await git.remove({ ...this._baseOpts, filepath: conflict.key });
       }
     }
@@ -896,19 +853,16 @@ export class GitVCS {
     }
     const oursBranch = await this.getCurrentBranch();
     console.log(`[git] Merge ${oursBranch} <-- ${theirsBranch}`);
-    return git.merge({
-      ...this._baseOpts,
-      ours: oursBranch,
-      theirs: theirsBranch,
-      abortOnConflict: false,
-    }).catch(
-      async err => {
+    return git
+      .merge({
+        ...this._baseOpts,
+        ours: oursBranch,
+        theirs: theirsBranch,
+        abortOnConflict: false,
+      })
+      .catch(async err => {
         if (err instanceof git.Errors.MergeConflictError) {
-          return await this._collectMergeConflicts(
-            err,
-            oursBranch,
-            theirsBranch,
-          );
+          return await this._collectMergeConflicts(err, oursBranch, theirsBranch);
         }
 
         if (err instanceof git.Errors.MergeNotSupportedError) {
@@ -918,8 +872,7 @@ export class GitVCS {
         }
 
         throw err;
-      },
-    );
+      });
   }
 
   async fetch({
@@ -943,7 +896,6 @@ export class GitVCS {
       depth,
       prune: true,
       pruneTags: true,
-
     });
   }
 
@@ -1072,7 +1024,6 @@ export class GitVCS {
           filepaths: [convertToPosixSep(change.path)],
         });
       }
-
     }
   }
 
@@ -1084,22 +1035,24 @@ export class GitVCS {
       } else if (b === 'master') {
         return 1;
       }
-        return b > a ? -1 : 1;
-
+      return b > a ? -1 : 1;
     });
     return newBranches;
   }
 }
 export class MergeConflictError extends Error {
-  constructor(msg: string, data: {
-    conflicts: MergeConflict[];
-    labels: {
-      ours: string;
-      theirs: string;
-    };
-    commitMessage: string;
-    commitParent: string[];
-  }) {
+  constructor(
+    msg: string,
+    data: {
+      conflicts: MergeConflict[];
+      labels: {
+        ours: string;
+        theirs: string;
+      };
+      commitMessage: string;
+      commitParent: string[];
+    },
+  ) {
     super(msg);
     this.data = data;
   }
diff --git a/packages/insomnia/src/sync/git/mem-client.ts b/packages/insomnia/src/sync/git/mem-client.ts
index c8c9c89196..b94e346541 100644
--- a/packages/insomnia/src/sync/git/mem-client.ts
+++ b/packages/insomnia/src/sync/git/mem-client.ts
@@ -88,10 +88,7 @@ export class MemClient {
     console.log(await next(baseDir, ''));
   }
 
-  async readFile(
-    filePath: string,
-    options: BufferEncoding | { encoding?: BufferEncoding } = {},
-  ) {
+  async readFile(filePath: string, options: BufferEncoding | { encoding?: BufferEncoding } = {}) {
     filePath = path.normalize(filePath);
 
     if (typeof options === 'string') {
@@ -109,8 +106,7 @@ export class MemClient {
     if (encoding) {
       return raw.toString(encoding);
     }
-      return raw;
-
+    return raw;
   }
 
   async writeFile(
diff --git a/packages/insomnia/src/sync/git/ne-db-client.ts b/packages/insomnia/src/sync/git/ne-db-client.ts
index 638c4f69e9..8e0ee7c1e7 100644
--- a/packages/insomnia/src/sync/git/ne-db-client.ts
+++ b/packages/insomnia/src/sync/git/ne-db-client.ts
@@ -28,7 +28,6 @@ export class NeDBClient {
 
     this._workspaceId = workspaceId;
     this._projectId = projectId;
-
   }
 
   static createClient(workspaceId: string, projectId: string): PromiseFsClient {
@@ -37,10 +36,7 @@ export class NeDBClient {
     };
   }
 
-  async readFile(
-    filePath: string,
-    options?: BufferEncoding | { encoding?: BufferEncoding },
-  ) {
+  async readFile(filePath: string, options?: BufferEncoding | { encoding?: BufferEncoding }) {
     filePath = path.normalize(filePath);
     options = options || {};
 
@@ -80,8 +76,7 @@ export class NeDBClient {
     if (options.encoding) {
       return raw.toString(options.encoding);
     }
-      return raw;
-
+    return raw;
   }
 
   async writeFile(filePath: string, data: Buffer | string) {
@@ -111,7 +106,10 @@ export class NeDBClient {
     }
 
     if (isWorkspace(doc)) {
-      console.log('[git] setting workspace parent to be that of the active project', { original: doc.parentId, new: this._projectId });
+      console.log('[git] setting workspace parent to be that of the active project', {
+        original: doc.parentId,
+        new: this._projectId,
+      });
       // Whenever we write a workspace into nedb we should set the parentId to be that of the current project
       // This is because the parentId (or a project) is not synced into git, so it will be cleared whenever git writes the workspace into the db, thereby removing it from the project on the client
       // In order to reproduce this bug, comment out the following line, then clone a repository into a local project, then open the workspace, you'll notice it will have moved into the default project
@@ -240,14 +238,13 @@ export class NeDBClient {
         mtimeMs: doc.modified,
       });
     }
-      return new Stat({
-        type: 'dir',
-        mode: 0o777,
-        size: 0,
-        ino: 0,
-        mtimeMs: 0,
-      });
-
+    return new Stat({
+      type: 'dir',
+      mode: 0o777,
+      size: 0,
+      ino: 0,
+      mtimeMs: 0,
+    });
   }
 
   async readlink(filePath: string, ...x: any[]) {
diff --git a/packages/insomnia/src/sync/git/project-ne-db-client.ts b/packages/insomnia/src/sync/git/project-ne-db-client.ts
index af6861a210..5b4e855a37 100644
--- a/packages/insomnia/src/sync/git/project-ne-db-client.ts
+++ b/packages/insomnia/src/sync/git/project-ne-db-client.ts
@@ -29,10 +29,7 @@ export class GitProjectNeDBClient {
     };
   }
 
-  async readFile(
-    filePath: string,
-    options?: BufferEncoding | { encoding?: BufferEncoding },
-  ) {
+  async readFile(filePath: string, options?: BufferEncoding | { encoding?: BufferEncoding }) {
     if (!filePath.endsWith('.yaml')) {
       throw this._errMissing(filePath);
     }
@@ -59,8 +56,7 @@ export class GitProjectNeDBClient {
       if (options.encoding) {
         return raw.toString(options.encoding);
       }
-        return raw;
-
+      return raw;
     } catch (err) {
       throw this._errMissing(filePath);
     }
@@ -91,13 +87,16 @@ export class GitProjectNeDBClient {
 
     const workspace = dataToImport.find(isWorkspace) as Workspace | undefined;
 
-    const isExistingWorkspace = workspace && await models.workspace.getById(workspace._id);
+    const isExistingWorkspace = workspace && (await models.workspace.getById(workspace._id));
     // Remove the workspace if it already exists to clean up any descendants that might have been removed.
-    isExistingWorkspace && await models.workspace.remove(workspace);
+    isExistingWorkspace && (await models.workspace.remove(workspace));
 
     for (const doc of dataToImport) {
       if (isWorkspace(doc)) {
-        console.log('[git] setting workspace parent to be that of the active project', { original: doc.parentId, new: this._projectId });
+        console.log('[git] setting workspace parent to be that of the active project', {
+          original: doc.parentId,
+          new: this._projectId,
+        });
         // Whenever we write a workspace into nedb we should set the parentId to be that of the current project
         // This is because the parentId (or a project) is not synced into git, so it will be cleared whenever git writes the workspace into the db, thereby removing it from the project on the client
         // In order to reproduce this bug, comment out the following line, then clone a repository into a local project, then open the workspace, you'll notice it will have moved into the default project
@@ -139,7 +138,9 @@ export class GitProjectNeDBClient {
       },
     });
 
-    const hasDirectoryInsomniaFiles = workspaceMetas.some(({ gitFilePath }) => gitFilePath && path.dirname(gitFilePath) === filePath);
+    const hasDirectoryInsomniaFiles = workspaceMetas.some(
+      ({ gitFilePath }) => gitFilePath && path.dirname(gitFilePath) === filePath,
+    );
 
     if (hasDirectoryInsomniaFiles) {
       const workspacePaths = workspaceMetas
@@ -190,14 +191,13 @@ export class GitProjectNeDBClient {
         mtimeMs: doc?.meta?.modified || 0,
       });
     }
-      return new Stat({
-        type: 'dir',
-        mode: 0o777,
-        size: 0,
-        ino: 0,
-        mtimeMs: 0,
-      });
-
+    return new Stat({
+      type: 'dir',
+      mode: 0o777,
+      size: 0,
+      ino: 0,
+      mtimeMs: 0,
+    });
   }
 
   async readlink(filePath: string, ...x: any[]) {
diff --git a/packages/insomnia/src/sync/git/project-routable-fs-client.ts b/packages/insomnia/src/sync/git/project-routable-fs-client.ts
index fdbdeb6083..5322a6796e 100644
--- a/packages/insomnia/src/sync/git/project-routable-fs-client.ts
+++ b/packages/insomnia/src/sync/git/project-routable-fs-client.ts
@@ -1,7 +1,17 @@
 import type * as git from 'isomorphic-git';
 import path from 'path';
 
-type Methods = 'readFile' | 'writeFile' | 'unlink' | 'readdir' | 'mkdir' | 'rmdir' | 'stat' | 'lstat' | 'readlink' | 'symlink';
+type Methods =
+  | 'readFile'
+  | 'writeFile'
+  | 'unlink'
+  | 'readdir'
+  | 'mkdir'
+  | 'rmdir'
+  | 'stat'
+  | 'lstat'
+  | 'readlink'
+  | 'symlink';
 
 /**
  * An isometric-git FS client that can route to various client depending on what the filePath is.
@@ -21,7 +31,7 @@ export function projectRoutableFSClient(
     for (const prefix of Object.keys(otherFS)) {
       if (filePath.indexOf(path.normalize(prefix)) === 0) {
         // TODO: remove non-null assertion
-         
+
         return otherFS[prefix].promises[method]!(filePath, ...args);
       }
     }
@@ -30,7 +40,6 @@ export function projectRoutableFSClient(
     // console.log('[routablefs] Executing', method, filePath, { args });
     // Fallback to default if no prefix matched
     // TODO: remove non-null assertion
-     
 
     // We store insomnia files in the database and all other files in a folder named 'other' on disk
     // When we read a directory, we need to merge the two lists to provide the full list of files
diff --git a/packages/insomnia/src/sync/git/routable-fs-client.ts b/packages/insomnia/src/sync/git/routable-fs-client.ts
index 17e748d82e..5c4eec99ae 100644
--- a/packages/insomnia/src/sync/git/routable-fs-client.ts
+++ b/packages/insomnia/src/sync/git/routable-fs-client.ts
@@ -1,7 +1,17 @@
 import type * as git from 'isomorphic-git';
 import path from 'path';
 
-type Methods = 'readFile' | 'writeFile' | 'unlink' | 'readdir' | 'mkdir' | 'rmdir' | 'stat' | 'lstat' | 'readlink' | 'symlink';
+type Methods =
+  | 'readFile'
+  | 'writeFile'
+  | 'unlink'
+  | 'readdir'
+  | 'mkdir'
+  | 'rmdir'
+  | 'stat'
+  | 'lstat'
+  | 'readlink'
+  | 'symlink';
 
 /**
  * An isometric-git FS client that can route to various client depending on what the filePath is.
@@ -10,17 +20,14 @@ type Methods = 'readFile' | 'writeFile' | 'unlink' | 'readdir' | 'mkdir' | 'rmdi
  * @param otherFS – map of path prefixes to clients
  * @returns {{promises: *}}
  */
-export function routableFSClient(
-  defaultFS: git.PromiseFsClient,
-  otherFS: Record<string, git.PromiseFsClient>,
-) {
+export function routableFSClient(defaultFS: git.PromiseFsClient, otherFS: Record<string, git.PromiseFsClient>) {
   const execMethod = async (method: Methods, filePath: string, ...args: any[]) => {
     filePath = path.normalize(filePath);
 
     for (const prefix of Object.keys(otherFS)) {
       if (filePath.indexOf(path.normalize(prefix)) === 0) {
         // TODO: remove non-null assertion
-         
+
         return otherFS[prefix].promises[method]!(filePath, ...args);
       }
     }
@@ -29,7 +36,7 @@ export function routableFSClient(
     // console.log('[routablefs] Executing', method, filePath, { args });
     // Fallback to default if no prefix matched
     // TODO: remove non-null assertion
-     
+
     const result = await defaultFS.promises[method]!(filePath, ...args);
     // If the method is returning a list of files for the root directory
     // we need to return the actual result plus inject the .insomnia directory
diff --git a/packages/insomnia/src/sync/git/system-error.ts b/packages/insomnia/src/sync/git/system-error.ts
index 0237563c22..72b85dd127 100644
--- a/packages/insomnia/src/sync/git/system-error.ts
+++ b/packages/insomnia/src/sync/git/system-error.ts
@@ -24,13 +24,7 @@ export class SystemError extends Error {
   path: SystemErrorConstructor['path'];
   syscall: SystemErrorConstructor['syscall'];
 
-  constructor({
-    code,
-    errno,
-    message,
-    path,
-    syscall,
-  }: SystemErrorConstructor) {
+  constructor({ code, errno, message, path, syscall }: SystemErrorConstructor) {
     super(message);
 
     const error = new Error(message);
diff --git a/packages/insomnia/src/sync/git/utils.ts b/packages/insomnia/src/sync/git/utils.ts
index 8ea061f4a0..9e19bc6181 100644
--- a/packages/insomnia/src/sync/git/utils.ts
+++ b/packages/insomnia/src/sync/git/utils.ts
@@ -12,96 +12,94 @@ const onMessage: MessageCallback = message => {
 
 const onAuthFailure =
   (credentials?: GitCredentials): AuthFailureCallback =>
-    async (message, auth) => {
-      console.log(`[git-event] Auth Failure: ${message}`);
+  async (message, auth) => {
+    console.log(`[git-event] Auth Failure: ${message}`);
 
-      // Try to refresh the token if auth failed.
-      // Whenever we return a new GitAuth object from this function
-      // isomorphic-git will retry the request with the new credentials.
-      // https://isomorphic-git.org/docs/en/onAuthFailure#docsNav
-      if (
-        credentials &&
-      'oauth2format' in credentials &&
-      credentials.oauth2format === 'gitlab'
-      ) {
-        console.log('[git-event] Attempting to refresh token');
-        try {
-          const providerCredentials = await gitCredentials.getByProvider(credentials.oauth2format);
-          if (providerCredentials?.refreshToken) {
-            console.log('[git-event] Token refreshed');
-            return {
-              ...auth,
-              password: providerCredentials.refreshToken,
-              headers: {
-                ...auth.headers,
-                Authorization: `Bearer ${providerCredentials.refreshToken}`,
-              },
-            };
-          }
-        } catch (error) {
-          console.warn('[git-event] Failed to refresh token', error);
-          return;
+    // Try to refresh the token if auth failed.
+    // Whenever we return a new GitAuth object from this function
+    // isomorphic-git will retry the request with the new credentials.
+    // https://isomorphic-git.org/docs/en/onAuthFailure#docsNav
+    if (credentials && 'oauth2format' in credentials && credentials.oauth2format === 'gitlab') {
+      console.log('[git-event] Attempting to refresh token');
+      try {
+        const providerCredentials = await gitCredentials.getByProvider(credentials.oauth2format);
+        if (providerCredentials?.refreshToken) {
+          console.log('[git-event] Token refreshed');
+          return {
+            ...auth,
+            password: providerCredentials.refreshToken,
+            headers: {
+              ...auth.headers,
+              Authorization: `Bearer ${providerCredentials.refreshToken}`,
+            },
+          };
         }
+      } catch (error) {
+        console.warn('[git-event] Failed to refresh token', error);
+        return;
       }
+    }
 
-      return;
-    };
+    return;
+  };
 
 const onAuthSuccess: AuthSuccessCallback = message => {
   console.log(`[git-event] Auth Success: ${message}`);
 };
 
-const onAuth = (credentials?: GitCredentials): AuthCallback => async (): Promise<GitAuth> => {
-  if (!credentials) {
-    console.log('[git-event] No credentials');
-    return {
-      username: '',
-      password: '',
-    };
-  }
-
-  if ('oauth2format' in credentials && credentials.oauth2format) {
-    console.log('[git-event] Using OAuth2 credentials');
-    const providerCredentials = await gitCredentials.getByProvider(credentials.oauth2format);
-
-    if (!providerCredentials) {
-      console.warn('[git-event] No OAuth2 credentials found');
+const onAuth =
+  (credentials?: GitCredentials): AuthCallback =>
+  async (): Promise<GitAuth> => {
+    if (!credentials) {
+      console.log('[git-event] No credentials');
       return {
         username: '',
         password: '',
       };
     }
 
-    // Transform the credentials to the format expected by isomorphic-git https://isomorphic-git.org/docs/en/onAuth#oauth2-tokens
-    if (providerCredentials.provider === 'gitlab') {
-      return {
-        username: 'oauth2',
-        password: providerCredentials.token,
-      };
+    if ('oauth2format' in credentials && credentials.oauth2format) {
+      console.log('[git-event] Using OAuth2 credentials');
+      const providerCredentials = await gitCredentials.getByProvider(credentials.oauth2format);
+
+      if (!providerCredentials) {
+        console.warn('[git-event] No OAuth2 credentials found');
+        return {
+          username: '',
+          password: '',
+        };
+      }
+
+      // Transform the credentials to the format expected by isomorphic-git https://isomorphic-git.org/docs/en/onAuth#oauth2-tokens
+      if (providerCredentials.provider === 'gitlab') {
+        return {
+          username: 'oauth2',
+          password: providerCredentials.token,
+        };
+      }
+
+      if (providerCredentials.provider === 'github') {
+        return {
+          username: providerCredentials.token,
+          password: 'x-oauth-basic',
+        };
+      }
+
+      if (providerCredentials.provider === 'githubapp') {
+        return {
+          username: 'x-access-token',
+          password: providerCredentials.token,
+        };
+      }
     }
 
-    if (providerCredentials.provider === 'github') {
-      return {
-        username: providerCredentials.token,
-        password: 'x-oauth-basic',
-      };
-    }
-
-    if (providerCredentials.provider === 'githubapp') {
-      return {
-        username: 'x-access-token',
-        password: providerCredentials.token,
-      };
-    }
-  }
-
-  console.log('[git-event] Using basic auth credentials');
-  return {
-    username: credentials.username,
-    // @ts-expect-error -- TSCONVERSION this needs to be handled better if credentials is undefined or which union type
-    password: credentials.password || credentials.token,
+    console.log('[git-event] Using basic auth credentials');
+    return {
+      username: credentials.username,
+      // @ts-expect-error -- TSCONVERSION this needs to be handled better if credentials is undefined or which union type
+      password: credentials.password || credentials.token,
+    };
   };
-};
 
 export const getAuthorFromGitRepository = async (gitRepositoryId: string): Promise<GitAuthor> => {
   const gitRepo = await gitRepository.getById(gitRepositoryId);
diff --git a/packages/insomnia/src/sync/ignore-keys.ts b/packages/insomnia/src/sync/ignore-keys.ts
index 747d767cb9..e85c87740f 100644
--- a/packages/insomnia/src/sync/ignore-keys.ts
+++ b/packages/insomnia/src/sync/ignore-keys.ts
@@ -35,10 +35,9 @@ export const deleteKeys = <T extends BaseModel>(doc: T) => {
 
 export const resetKeys = <T extends BaseModel>(doc: T) => {
   if (isWorkspace(doc)) {
-    (Object.keys(RESET_WORKSPACE_KEYS) as (keyof typeof RESET_WORKSPACE_KEYS)[])
-      .forEach(key => {
-        // @ts-expect-error -- mapping unsoundness
-        doc[key] = RESET_WORKSPACE_KEYS[key];
-      });
+    (Object.keys(RESET_WORKSPACE_KEYS) as (keyof typeof RESET_WORKSPACE_KEYS)[]).forEach(key => {
+      // @ts-expect-error -- mapping unsoundness
+      doc[key] = RESET_WORKSPACE_KEYS[key];
+    });
   }
 };
diff --git a/packages/insomnia/src/sync/store/drivers/file-system-driver.ts b/packages/insomnia/src/sync/store/drivers/file-system-driver.ts
index 7b0df5363e..e571916704 100644
--- a/packages/insomnia/src/sync/store/drivers/file-system-driver.ts
+++ b/packages/insomnia/src/sync/store/drivers/file-system-driver.ts
@@ -35,13 +35,13 @@ export default class FileSystemDriver implements BaseDriver {
   async setItem(key: string, value: Buffer) {
     console.log(`[FileSystemDriver] Writing to ${key}`);
     const finalPath = await this._getKeyPath(key);
-      // Temp path contains randomness to avoid race-condition collisions. This
-      // doesn't actually avoid race conditions but at least it won't fail.
+    // Temp path contains randomness to avoid race-condition collisions. This
+    // doesn't actually avoid race conditions but at least it won't fail.
 
     const tmpPath = `${finalPath}.${crypto.randomUUID()}.tmp`;
     console.log(`[FileSystemDriver] Writing to ${tmpPath} then renaming to ${finalPath}`);
-      // This method implements atomic writes by first writing to a temporary
-      // file (non-atomic) then renaming the file to the final value (atomic)
+    // This method implements atomic writes by first writing to a temporary
+    // file (non-atomic) then renaming the file to the final value (atomic)
     try {
       await fs.writeFile(tmpPath, value, 'utf8');
       await gracefulRename(tmpPath, finalPath);
diff --git a/packages/insomnia/src/sync/store/drivers/graceful-rename.ts b/packages/insomnia/src/sync/store/drivers/graceful-rename.ts
index 58abd16f6f..f550c8b31b 100644
--- a/packages/insomnia/src/sync/store/drivers/graceful-rename.ts
+++ b/packages/insomnia/src/sync/store/drivers/graceful-rename.ts
@@ -13,7 +13,13 @@ function wait(ms: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
-async function renameWithRetry(source: string, target: string, startTime: number, retryTimeout: number, attempt = 0): Promise<void> {
+async function renameWithRetry(
+  source: string,
+  target: string,
+  startTime: number,
+  retryTimeout: number,
+  attempt = 0,
+): Promise<void> {
   try {
     return await fs.rename(source, target);
   } catch (error) {
@@ -52,10 +58,7 @@ async function renameWithRetry(source: string, target: string, startTime: number
   }
 }
 
-export async function gracefulRename(
-  from: string,
-  to: string,
-) {
+export async function gracefulRename(from: string, to: string) {
   if (isWindows()) {
     return renameWithRetry(from, to, Date.now(), WINDOWS_RENAME_TIMEOUT);
   }
diff --git a/packages/insomnia/src/sync/vcs/__tests__/initialize-backend-project.test.ts b/packages/insomnia/src/sync/vcs/__tests__/initialize-backend-project.test.ts
index c5767e33a6..62a6ecbdaa 100644
--- a/packages/insomnia/src/sync/vcs/__tests__/initialize-backend-project.test.ts
+++ b/packages/insomnia/src/sync/vcs/__tests__/initialize-backend-project.test.ts
@@ -6,7 +6,6 @@ import { pushSnapshotOnInitialize } from '../initialize-backend-project';
 import { VCS } from '../vcs';
 
 describe('initialize-backend-project', () => {
-
   describe('pushSnapshotOnInitialize()', () => {
     const vcs = new VCS(new MemoryDriver());
 
diff --git a/packages/insomnia/src/sync/vcs/__tests__/util.test.ts b/packages/insomnia/src/sync/vcs/__tests__/util.test.ts
index ae20eb6a2d..4ec71e84ca 100644
--- a/packages/insomnia/src/sync/vcs/__tests__/util.test.ts
+++ b/packages/insomnia/src/sync/vcs/__tests__/util.test.ts
@@ -35,23 +35,28 @@ describe('util', () => {
     workspaceModelBuilder.reset();
   });
 
-  const DA1 = statusCandidateBuilder.reset()
+  const DA1 = statusCandidateBuilder
+    .reset()
     .key('a')
     .document(baseModelBuilder.reset()._id('a').name('1').build())
     .build();
-  const DA2 = statusCandidateBuilder.reset()
+  const DA2 = statusCandidateBuilder
+    .reset()
     .key('a')
     .document(baseModelBuilder.reset()._id('a').name('2').build())
     .build();
-  const DB1 = statusCandidateBuilder.reset()
+  const DB1 = statusCandidateBuilder
+    .reset()
     .key('b')
     .document(baseModelBuilder.reset()._id('b').name('1').build())
     .build();
-  const DB2 = statusCandidateBuilder.reset()
+  const DB2 = statusCandidateBuilder
+    .reset()
     .key('b')
     .document(baseModelBuilder.reset()._id('b').name('2').build())
     .build();
-  const DC1 = statusCandidateBuilder.reset()
+  const DC1 = statusCandidateBuilder
+    .reset()
     .key('c')
     .document(baseModelBuilder.reset()._id('c').name('1').build())
     .build();
@@ -90,10 +95,7 @@ describe('util', () => {
 
   describe('generateSnapshotStateMap()', () => {
     it('generates from simple states', async () => {
-      const snapshot = newSnapshot(1, [
-        newStateEntry('doc_1', 'blob_1'),
-        newStateEntry('doc_2', 'blob_2'),
-      ]);
+      const snapshot = newSnapshot(1, [newStateEntry('doc_1', 'blob_1'), newStateEntry('doc_2', 'blob_2')]);
       const map = generateSnapshotStateMap(snapshot);
       expect(Object.keys(map).sort()).toEqual(['doc_1', 'doc_2']);
     });
@@ -117,11 +119,7 @@ describe('util', () => {
 
   describe('generateCandidateMap()', () => {
     it('generates from simple candidates', async () => {
-      const candidates = [
-        newCandidate('doc_2', 2),
-        newCandidate('doc_1', 1),
-        newCandidate('doc_2', 2),
-      ];
+      const candidates = [newCandidate('doc_2', 2), newCandidate('doc_1', 1), newCandidate('doc_2', 2)];
       const map = generateCandidateMap(candidates);
       expect(Object.keys(map).sort()).toEqual(['doc_1', 'doc_2']);
     });
@@ -576,34 +574,24 @@ describe('util', () => {
     it('does it', () => {
       const state = [A1, B1, E1, F1];
       const conflicts = [
-        mergeConflictBuilder.reset()
+        mergeConflictBuilder
+          .reset()
           .key(A1.key)
           .name(A1.name)
           .mineBlob(A1.blob)
           .theirsBlob(A2.blob)
           .choose(A1.blob)
           .build(),
-        mergeConflictBuilder.reset()
-          .key(B1.key)
-          .name(B1.name)
-          .mineBlob(B1.blob)
-          .theirsBlob(null)
-          .choose(null)
-          .build(),
-        mergeConflictBuilder.reset()
+        mergeConflictBuilder.reset().key(B1.key).name(B1.name).mineBlob(B1.blob).theirsBlob(null).choose(null).build(),
+        mergeConflictBuilder
+          .reset()
           .key(C1.key)
           .name(C1.name)
           .mineBlob(null)
           .theirsBlob(C1.blob)
           .choose(C1.blob)
           .build(),
-        mergeConflictBuilder.reset()
-          .key(D1.key)
-          .name(D1.name)
-          .mineBlob(D1.blob)
-          .theirsBlob(null)
-          .choose(null)
-          .build(),
+        mergeConflictBuilder.reset().key(D1.key).name(D1.name).mineBlob(D1.blob).theirsBlob(null).choose(null).build(),
       ];
       expect(updateStateWithConflictResolutions(state, conflicts)).toEqual([A1, E1, F1, C1]);
     });
@@ -872,12 +860,8 @@ describe('util', () => {
       expect(result1.hash).toBe(result2.hash);
       expect(result1.hash).toBe('7eaaa8a03bada54b403aeada681aad6892a28ab3');
       expect(result2.hash).toBe('7eaaa8a03bada54b403aeada681aad6892a28ab3');
-      expect(result1.content).toBe(
-        '{"arr":[{"a":"a","b":"b"}],"obj":{"obj2":{"a":"a","b":"b"}}}',
-      );
-      expect(result2.content).toBe(
-        '{"arr":[{"a":"a","b":"b"}],"obj":{"obj2":{"a":"a","b":"b"}}}',
-      );
+      expect(result1.content).toBe('{"arr":[{"a":"a","b":"b"}],"obj":{"obj2":{"a":"a","b":"b"}}}');
+      expect(result2.content).toBe('{"arr":[{"a":"a","b":"b"}],"obj":{"obj2":{"a":"a","b":"b"}}}');
     });
 
     it('array order matters', () => {
@@ -930,15 +914,9 @@ describe('util', () => {
     });
 
     it('ignores global object keys that do not matter', () => {
-      const result1 = hashDocument(
-        baseModelBuilder.modified(123).parentId('abc').build(),
-      );
-      const result2 = hashDocument(
-        baseModelBuilder.modified(456).build(),
-      );
-      const result3 = hashDocument(
-        baseModelBuilder.name('abc').modified(456).build(),
-      );
+      const result1 = hashDocument(baseModelBuilder.modified(123).parentId('abc').build());
+      const result2 = hashDocument(baseModelBuilder.modified(456).build());
+      const result3 = hashDocument(baseModelBuilder.name('abc').modified(456).build());
       expect(result1.hash).toBe(result2.hash);
       expect(result1.hash).not.toBe(result3.hash);
     });
@@ -956,12 +934,8 @@ describe('util', () => {
       const original = hash(originalSyncedWorkspace);
 
       // Act
-      const withParent = hashDocument(
-        workspaceModelBuilder.parentId('abc').build(),
-      );
-      const unique = hashDocument(
-        workspaceModelBuilder.name('unique').parentId('abc').build(),
-      );
+      const withParent = hashDocument(workspaceModelBuilder.parentId('abc').build());
+      const unique = hashDocument(workspaceModelBuilder.name('unique').parentId('abc').build());
 
       // Assert
       expect(original.hash).toBe(withParent.hash);
@@ -990,12 +964,13 @@ function newStateEntry(key, blob) {
   };
 }
 
-const newCandidate = (key: string, n: number) => statusCandidateBuilder
-  .reset()
-  .key(key)
-  .name(`Candidate ${n}`)
-  .document(baseModelBuilder.reset().name(`Content for candidate ${key}.${n}`).build())
-  .build();
+const newCandidate = (key: string, n: number) =>
+  statusCandidateBuilder
+    .reset()
+    .key(key)
+    .name(`Candidate ${n}`)
+    .document(baseModelBuilder.reset().name(`Content for candidate ${key}.${n}`).build())
+    .build();
 
 const newBranch = (snapshots: string[]) => branchBuilder.snapshots(snapshots).build();
 
@@ -1004,34 +979,39 @@ describe('interceptAccessError', () => {
     // Arrange
 
     // Act
-    const action = async () => await interceptAccessError({
-      action: 'action',
-      callback: () => {
-        throw new Error('DANGER! invalid access to the fifth dimensional nebulo 9.');
-      },
-      resourceName: 'resourceName',
-      resourceType: 'resourceType',
-    }) as Error;
+    const action = async () =>
+      (await interceptAccessError({
+        action: 'action',
+        callback: () => {
+          throw new Error('DANGER! invalid access to the fifth dimensional nebulo 9.');
+        },
+        resourceName: 'resourceName',
+        resourceType: 'resourceType',
+      })) as Error;
 
     // Assert
     const result = expect(action).rejects;
     result.toBeInstanceOf(Error);
-    result.toThrowError('You no longer have permission to action the "resourceName" resourceType.  Contact your team administrator if you think this is an error.');
+    result.toThrowError(
+      'You no longer have permission to action the "resourceName" resourceType.  Contact your team administrator if you think this is an error.',
+    );
   });
 
-  it('does not intercept errors it doesn\'t care about', async () => {
+  it("does not intercept errors it doesn't care about", async () => {
     // Arrange
-    const message = 'Having been rejected by the planet smasher, Ziltoid seeks the council of the omnidimensional creator.';
+    const message =
+      'Having been rejected by the planet smasher, Ziltoid seeks the council of the omnidimensional creator.';
 
     // Act
-    const action = async () => await interceptAccessError({
-      action: 'action',
-      callback: () => {
-        throw new Error(message);
-      },
-      resourceName: 'resourceName',
-      resourceType: 'resourceType',
-    }) as Error;
+    const action = async () =>
+      (await interceptAccessError({
+        action: 'action',
+        callback: () => {
+          throw new Error(message);
+        },
+        resourceName: 'resourceName',
+        resourceType: 'resourceType',
+      })) as Error;
 
     // Assert
     const result = expect(action).rejects;
diff --git a/packages/insomnia/src/sync/vcs/__tests__/vcs.test.ts b/packages/insomnia/src/sync/vcs/__tests__/vcs.test.ts
index 02e4554436..7f668b5e41 100644
--- a/packages/insomnia/src/sync/vcs/__tests__/vcs.test.ts
+++ b/packages/insomnia/src/sync/vcs/__tests__/vcs.test.ts
@@ -32,20 +32,18 @@ describe('VCS', () => {
   describe('status()', () => {
     it('returns status with no commits', async () => {
       const v = await vcs('master');
-      const status = await v.status(
-        [
-          {
-            key: 'foo',
-            name: 'Foo',
-            document: newDoc('bar'),
-          },
-          {
-            key: 'baz',
-            name: 'Baz',
-            document: newDoc('qux'),
-          },
-        ],
-      );
+      const status = await v.status([
+        {
+          key: 'foo',
+          name: 'Foo',
+          document: newDoc('bar'),
+        },
+        {
+          key: 'baz',
+          name: 'Baz',
+          document: newDoc('qux'),
+        },
+      ]);
       expect(status).toEqual({
         key: '6dbc95d09d310cf9d8561bc46da440d8197c3bf1',
         stage: {},
@@ -159,7 +157,8 @@ describe('VCS', () => {
             blobId: '4a1582f059cf4cc4c4dcd56e893b9ae88f32125d',
             key: 'a',
             name: 'A',
-            previousBlobContent: '{\"_id\":\"aaa\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
+            previousBlobContent:
+              '{\"_id\":\"aaa\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
           },
           notA: {
             added: true,
@@ -174,8 +173,10 @@ describe('VCS', () => {
             key: 'c',
             name: 'C',
             blobId: '87a13a793c6bc2137732ba4f8dc8d877fc143bad',
-            blobContent: '{"_id":"modified","created":1234,"isPrivate":false,"name":"name","parentId":"","type":"base"}',
-            previousBlobContent: '{\"_id\":\"ccc\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
+            blobContent:
+              '{"_id":"modified","created":1234,"isPrivate":false,"name":"name","parentId":"","type":"base"}',
+            previousBlobContent:
+              '{\"_id\":\"ccc\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
           },
           d: {
             added: true,
@@ -187,36 +188,29 @@ describe('VCS', () => {
           },
         },
       });
-      await v.stage([
-        status.unstaged.a,
-        status.unstaged.notA,
-        status.unstaged.c,
-        status.unstaged.d,
+      await v.stage([status.unstaged.a, status.unstaged.notA, status.unstaged.c, status.unstaged.d]);
+      const status2 = await v.status([
+        {
+          key: 'notA',
+          name: 'Not A',
+          document: newDoc('aaa'),
+        },
+        {
+          key: 'b',
+          name: 'B',
+          document: newDoc('bbb'),
+        },
+        {
+          key: 'c',
+          name: 'C',
+          document: newDoc('modified'),
+        },
+        {
+          key: 'd',
+          name: 'D',
+          document: newDoc('ddd'),
+        },
       ]);
-      const status2 = await v.status(
-        [
-          {
-            key: 'notA',
-            name: 'Not A',
-            document: newDoc('aaa'),
-          },
-          {
-            key: 'b',
-            name: 'B',
-            document: newDoc('bbb'),
-          },
-          {
-            key: 'c',
-            name: 'C',
-            document: newDoc('modified'),
-          },
-          {
-            key: 'd',
-            name: 'D',
-            document: newDoc('ddd'),
-          },
-        ]
-      );
       expect(status2).toEqual({
         key: '872dd92bb678f7e26b8610e4d37c0438f2f04beb',
         stage: {
@@ -225,7 +219,8 @@ describe('VCS', () => {
             blobId: '4a1582f059cf4cc4c4dcd56e893b9ae88f32125d',
             key: 'a',
             name: 'A',
-            previousBlobContent: '{\"_id\":\"aaa\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
+            previousBlobContent:
+              '{\"_id\":\"aaa\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
           },
           notA: {
             added: true,
@@ -240,8 +235,10 @@ describe('VCS', () => {
             blobId: '87a13a793c6bc2137732ba4f8dc8d877fc143bad',
             key: 'c',
             name: 'C',
-            blobContent: '{"_id":"modified","created":1234,"isPrivate":false,"name":"name","parentId":"","type":"base"}',
-            previousBlobContent: '{\"_id\":\"ccc\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
+            blobContent:
+              '{"_id":"modified","created":1234,"isPrivate":false,"name":"name","parentId":"","type":"base"}',
+            previousBlobContent:
+              '{\"_id\":\"ccc\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
           },
           d: {
             added: true,
@@ -274,20 +271,18 @@ describe('VCS', () => {
         {},
       );
       await v.stage([status.unstaged.a]);
-      const status2 = await v.status(
-        [
-          {
-            key: 'a',
-            name: 'A',
-            document: newDoc('modified'),
-          },
-          {
-            key: 'b',
-            name: 'B',
-            document: newDoc('bbb'),
-          },
-        ],
-      );
+      const status2 = await v.status([
+        {
+          key: 'a',
+          name: 'A',
+          document: newDoc('modified'),
+        },
+        {
+          key: 'b',
+          name: 'B',
+          document: newDoc('bbb'),
+        },
+      ]);
       expect(status2).toEqual({
         key: '7e7b488b9010839218f8e8c7d1d48b0e0e6b5f8c',
         stage: {
@@ -306,8 +301,10 @@ describe('VCS', () => {
             blobId: '87a13a793c6bc2137732ba4f8dc8d877fc143bad',
             key: 'a',
             name: 'A',
-            blobContent: '{"_id":"modified","created":1234,"isPrivate":false,"name":"name","parentId":"","type":"base"}',
-            previousBlobContent: '{\"_id\":\"aaa\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
+            blobContent:
+              '{"_id":"modified","created":1234,"isPrivate":false,"name":"name","parentId":"","type":"base"}',
+            previousBlobContent:
+              '{\"_id\":\"aaa\",\"created\":1234,\"isPrivate\":false,\"name\":\"name\",\"parentId\":\"\",\"type\":\"base\"}',
           },
           b: {
             added: true,
@@ -382,20 +379,18 @@ describe('VCS', () => {
           previousBlobContent: 'null',
         },
       });
-      const status2 = await v.status(
-        [
-          {
-            key: 'foo',
-            name: 'Foo',
-            document: newDoc('bar'),
-          },
-          {
-            key: 'baz',
-            name: 'Baz',
-            document: newDoc('qux'),
-          },
-        ],
-      );
+      const status2 = await v.status([
+        {
+          key: 'foo',
+          name: 'Foo',
+          document: newDoc('bar'),
+        },
+        {
+          key: 'baz',
+          name: 'Baz',
+          document: newDoc('qux'),
+        },
+      ]);
       expect(status2).toEqual({
         key: 'cfd47b8a7d50f39dfa1ca956ac2ab60427d6351b',
         stage: {
@@ -459,15 +454,13 @@ describe('VCS', () => {
 
     it('commits deleted entity', async () => {
       const v = await vcs('master');
-      const status = await v.status(
-        [
-          {
-            key: 'foo',
-            name: 'Foo',
-            document: newDoc('bar'),
-          },
-        ],
-      );
+      const status = await v.status([
+        {
+          key: 'foo',
+          name: 'Foo',
+          document: newDoc('bar'),
+        },
+      ]);
       await v.stage([status.unstaged.foo]);
       await v.takeSnapshot('Add foo');
       const history = await v.getHistory();
@@ -562,15 +555,13 @@ describe('VCS', () => {
     it('remove branch', async () => {
       const v = await vcs('master');
       // Add something to master
-      const status1 = await v.status(
-        [
-          {
-            key: 'foo',
-            name: 'Foo',
-            document: newDoc('bar'),
-          },
-        ],
-      );
+      const status1 = await v.status([
+        {
+          key: 'foo',
+          name: 'Foo',
+          document: newDoc('bar'),
+        },
+      ]);
       await v.stage([status1.unstaged.foo]);
       await v.takeSnapshot('Add foo');
       // Checkout branch
@@ -654,25 +645,23 @@ describe('VCS', () => {
       ]);
       await v.fork('feature-a');
       await v.checkout([], 'feature-a');
-      const status2 = await v.status(
-        [
-          {
-            key: 'a',
-            name: 'A',
-            document: newDoc('aaa'),
-          },
-          {
-            key: 'b',
-            name: 'B',
-            document: newDoc('bbbbbbb'),
-          },
-          {
-            key: 'c',
-            name: 'C',
-            document: newDoc('ccc'),
-          },
-        ]
-      );
+      const status2 = await v.status([
+        {
+          key: 'a',
+          name: 'A',
+          document: newDoc('aaa'),
+        },
+        {
+          key: 'b',
+          name: 'B',
+          document: newDoc('bbbbbbb'),
+        },
+        {
+          key: 'c',
+          name: 'C',
+          document: newDoc('ccc'),
+        },
+      ]);
       await v.stage([status2.unstaged.b, status2.unstaged.c]);
       await v.takeSnapshot('Add C, modify B');
       expect((await v.getHistory())[1].state).toEqual(
diff --git a/packages/insomnia/src/sync/vcs/initialize-backend-project.ts b/packages/insomnia/src/sync/vcs/initialize-backend-project.ts
index 1477bcfca2..16709496cf 100644
--- a/packages/insomnia/src/sync/vcs/initialize-backend-project.ts
+++ b/packages/insomnia/src/sync/vcs/initialize-backend-project.ts
@@ -6,16 +6,24 @@ import type { Workspace } from '../../models/workspace';
 import type { StatusCandidate } from '../types';
 import type { VCS } from './vcs';
 
-export const initializeLocalBackendProjectAndMarkForSync = async ({ vcs, workspace }: { vcs: VCS; workspace: Workspace }) => {
+export const initializeLocalBackendProjectAndMarkForSync = async ({
+  vcs,
+  workspace,
+}: {
+  vcs: VCS;
+  workspace: Workspace;
+}) => {
   // Create local project
   await vcs.switchAndCreateBackendProjectIfNotExist(workspace._id, workspace.name);
 
   // Everything unstaged
-  const candidates = (await database.withDescendants(workspace)).filter(canSync).map((doc: BaseModel): StatusCandidate => ({
-    key: doc._id,
-    name: doc.name || '',
-    document: doc,
-  }));
+  const candidates = (await database.withDescendants(workspace)).filter(canSync).map(
+    (doc: BaseModel): StatusCandidate => ({
+      key: doc._id,
+      name: doc.name || '',
+      document: doc,
+    }),
+  );
   const status = await vcs.status(candidates);
 
   // Stage everything
diff --git a/packages/insomnia/src/sync/vcs/insomnia-sync.ts b/packages/insomnia/src/sync/vcs/insomnia-sync.ts
index 9854b9ad72..75fc53b6f6 100644
--- a/packages/insomnia/src/sync/vcs/insomnia-sync.ts
+++ b/packages/insomnia/src/sync/vcs/insomnia-sync.ts
@@ -17,9 +17,7 @@ export const VCSInstance = () => {
   if (vcs) {
     return vcs;
   }
-  const driver = FileSystemDriver.create(
-    process.env['INSOMNIA_DATA_PATH'] || window.app.getPath('userData'),
-  );
+  const driver = FileSystemDriver.create(process.env['INSOMNIA_DATA_PATH'] || window.app.getPath('userData'));
   vcs = new VCS(driver, async (conflicts, labels) => {
     return new Promise((resolve, reject) => {
       showModal(SyncMergeModal, {
diff --git a/packages/insomnia/src/sync/vcs/migrate-projects-into-organization.ts b/packages/insomnia/src/sync/vcs/migrate-projects-into-organization.ts
index a85bd737b4..6490e09568 100644
--- a/packages/insomnia/src/sync/vcs/migrate-projects-into-organization.ts
+++ b/packages/insomnia/src/sync/vcs/migrate-projects-into-organization.ts
@@ -33,8 +33,8 @@ export const shouldMigrateProjectUnderOrganization = async () => {
 export const migrateProjectsIntoOrganization = async ({
   personalOrganizationId,
 }: {
-    personalOrganizationId: string;
-  }) => {
+  personalOrganizationId: string;
+}) => {
   // Legacy remote projects without organizations
   // Local projects without organizations except scratchpad
   const [legacyRemoteProjects, localProjects] = await Promise.all([
@@ -56,7 +56,7 @@ export const migrateProjectsIntoOrganization = async ({
       models.project.update(remoteProject, {
         parentId: remoteProject.remoteId,
         remoteId: remoteProject._id,
-      })
+      }),
     );
   }
 
@@ -65,7 +65,7 @@ export const migrateProjectsIntoOrganization = async ({
     updatePromises.push(
       models.project.update(localProject, {
         parentId: personalOrganizationId,
-      })
+      }),
     );
   }
 
diff --git a/packages/insomnia/src/sync/vcs/pull-backend-project.ts b/packages/insomnia/src/sync/vcs/pull-backend-project.ts
index 49f40095ee..95c9a01f8f 100644
--- a/packages/insomnia/src/sync/vcs/pull-backend-project.ts
+++ b/packages/insomnia/src/sync/vcs/pull-backend-project.ts
@@ -28,22 +28,24 @@ export const pullBackendProject = async ({ vcs, backendProject, remoteProject }:
   // @TODO Revisit the UX for this. What should happen if there are other branches?
   // The default branch does not exist, so we create it and the workspace locally
   if (defaultBranchMissing) {
-    const workspace = await models.initModel<Workspace>(
-      models.workspace.type,
-      {
-        _id: backendProject.rootDocumentId,
-        name: backendProject.name,
-        parentId: remoteProject._id,
-        scope: 'collection',
-      },
-    );
+    const workspace = await models.initModel<Workspace>(models.workspace.type, {
+      _id: backendProject.rootDocumentId,
+      name: backendProject.name,
+      parentId: remoteProject._id,
+      scope: 'collection',
+    });
 
     await database.upsert(workspace);
 
     return { project: remoteProject, workspaceId: workspace._id };
   }
 
-  await vcs.pull({ candidates: [], teamId: remoteProject.parentId, teamProjectId: remoteProject._id, projectId: remoteProject._id }); // There won't be any existing docs since it's a new pull
+  await vcs.pull({
+    candidates: [],
+    teamId: remoteProject.parentId,
+    teamProjectId: remoteProject._id,
+    projectId: remoteProject._id,
+  }); // There won't be any existing docs since it's a new pull
 
   const flushId = await database.bufferChanges();
   let workspaceId;
@@ -60,5 +62,4 @@ export const pullBackendProject = async ({ vcs, backendProject, remoteProject }:
 
   await database.flushChanges(flushId);
   return { project: remoteProject, workspaceId };
-
 };
diff --git a/packages/insomnia/src/sync/vcs/util.ts b/packages/insomnia/src/sync/vcs/util.ts
index dd5eb2015d..506591b676 100644
--- a/packages/insomnia/src/sync/vcs/util.ts
+++ b/packages/insomnia/src/sync/vcs/util.ts
@@ -51,9 +51,7 @@ export function generateCandidateMap(candidates: StatusCandidate[]): StatusCandi
   return map;
 }
 
-export function combinedMapKeys<T extends SnapshotStateMap | StatusCandidateMap>(
-  ...maps: T[]
-): DocumentKey[] {
+export function combinedMapKeys<T extends SnapshotStateMap | StatusCandidateMap>(...maps: T[]): DocumentKey[] {
   const keyMap: Record<string, unknown> = {};
 
   for (const map of maps) {
@@ -239,10 +237,7 @@ export function threeWayMerge(
   };
 }
 
-export function compareBranches(
-  a: Branch | null,
-  b: Branch | null,
-): Compare {
+export function compareBranches(a: Branch | null, b: Branch | null): Compare {
   const snapshotsA = a ? a.snapshots : [];
   const snapshotsB = b ? b.snapshots : [];
   const latestA = snapshotsA[snapshotsA.length - 1] || null;
@@ -285,10 +280,7 @@ export interface StateDelta {
   remove: SnapshotStateEntry[];
 }
 
-export function stateDelta(
-  base: SnapshotState,
-  desired: SnapshotState,
-) {
+export function stateDelta(base: SnapshotState, desired: SnapshotState) {
   const result: StateDelta = {
     add: [],
     update: [],
@@ -391,11 +383,7 @@ export function getRootSnapshot(a: Branch | null, b: Branch | null): string | nu
   return rootSnapshotId || null;
 }
 
-export function preMergeCheck(
-  trunkState: SnapshotState,
-  otherState: SnapshotState,
-  candidates: StatusCandidate[],
-) {
+export function preMergeCheck(trunkState: SnapshotState, otherState: SnapshotState, candidates: StatusCandidate[]) {
   const conflicts: StatusCandidate[] = [];
   const dirty: StatusCandidate[] = [];
   const trunkMap = generateStateMap(trunkState);
@@ -430,13 +418,7 @@ export function preMergeCheck(
     }
 
     // Candidate is different but trunk and other are the same (preserve safe change)
-    if (
-      other &&
-      trunk &&
-      other.blob === trunk.blob &&
-      blobId !== other.blob &&
-      blobId !== trunk.blob
-    ) {
+    if (other && trunk && other.blob === trunk.blob && blobId !== other.blob && blobId !== trunk.blob) {
       dirty.push(candidate);
       continue;
     }
@@ -553,24 +535,24 @@ export function describeChanges<T extends BaseModel>(a: T, b: T): string[] {
   return changes;
 }
 
-export const interceptAccessError = async <T>(
-  {
-    callback,
-    action,
-    resourceName,
-    resourceType = strings.collection.singular.toLowerCase(),
-  }: {
-    callback: () => T | Promise<T>;
-    action: string;
-    resourceName: string;
-    resourceType?: string;
-  }
-) => {
+export const interceptAccessError = async <T>({
+  callback,
+  action,
+  resourceName,
+  resourceType = strings.collection.singular.toLowerCase(),
+}: {
+  callback: () => T | Promise<T>;
+  action: string;
+  resourceName: string;
+  resourceType?: string;
+}) => {
   try {
     return await callback();
   } catch (error: unknown) {
     if (error instanceof Error && error.message.includes('invalid access')) {
-      throw new Error(`You no longer have permission to ${action} the "${resourceName}" ${resourceType}.  Contact your team administrator if you think this is an error.`);
+      throw new Error(
+        `You no longer have permission to ${action} the "${resourceName}" ${resourceType}.  Contact your team administrator if you think this is an error.`,
+      );
     }
     throw error;
   }
diff --git a/packages/insomnia/src/sync/vcs/vcs.ts b/packages/insomnia/src/sync/vcs/vcs.ts
index eee152bce2..2641d665e8 100644
--- a/packages/insomnia/src/sync/vcs/vcs.ts
+++ b/packages/insomnia/src/sync/vcs/vcs.ts
@@ -42,7 +42,10 @@ import {
 
 const EMPTY_HASH = crypto.createHash('sha1').digest('hex').replace(/./g, '0');
 
-type ConflictHandler = (conflicts: MergeConflict[], labels: { ours: string; theirs: string }) => Promise<MergeConflict[]>;
+type ConflictHandler = (
+  conflicts: MergeConflict[],
+  labels: { ours: string; theirs: string },
+) => Promise<MergeConflict[]>;
 
 // breaks one array into multiple arrays of size chunkSize
 export function chunkArray<T>(arr: T[], chunkSize: number) {
@@ -210,7 +213,6 @@ export class VCS {
           let previousBlobContent: BaseModel | null = null;
           try {
             previousBlobContent = await this.blobFromLastSnapshot(key);
-
           } catch (e) {
             // No previous blob found
           } finally {
@@ -295,10 +297,7 @@ export class VCS {
 
   static validateBranchName(branchName: string) {
     if (!branchName.match(/^[a-zA-Z0-9][a-zA-Z0-9-_.]{2,}$/)) {
-      return (
-        'Branch names must be at least 3 characters long and can only contain ' +
-        'letters, numbers, - and _'
-      );
+      return 'Branch names must be at least 3 characters long and can only contain ' + 'letters, numbers, - and _';
     }
 
     return '';
@@ -359,9 +358,7 @@ export class VCS {
 
   async checkout(candidates: StatusCandidate[], branchName: string) {
     const branchCurrent = await this._getCurrentBranch();
-    const latestSnapshotCurrent: Snapshot | null = await this._getLatestSnapshot(
-      branchCurrent.name,
-    );
+    const latestSnapshotCurrent: Snapshot | null = await this._getLatestSnapshot(branchCurrent.name);
     const latestStateCurrent = latestSnapshotCurrent ? latestSnapshotCurrent.state : [];
     const branchNext = await this._getOrCreateBranch(branchName);
     const latestSnapshotNext: Snapshot | null = await this._getLatestSnapshot(branchNext.name);
@@ -517,11 +514,7 @@ export class VCS {
     return branches.map(b => b.name);
   }
 
-  async merge(
-    candidates: StatusCandidate[],
-    otherBranchName: string,
-    snapshotMessage?: string,
-  ) {
+  async merge(candidates: StatusCandidate[], otherBranchName: string, snapshotMessage?: string) {
     const branch = await this._getCurrentBranch();
     console.log(`[sync] Merged branch ${otherBranchName} into ${branch.name}`);
     return this._merge(candidates, branch.name, otherBranchName, snapshotMessage);
@@ -581,19 +574,29 @@ export class VCS {
     console.log(`[sync] Created commit ${snapshot.id} (${name})`);
   }
 
-  async pull({ candidates, teamId, teamProjectId, projectId }: { candidates: StatusCandidate[]; teamId: string; teamProjectId: string; projectId: string }) {
+  async pull({
+    candidates,
+    teamId,
+    teamProjectId,
+    projectId,
+  }: {
+    candidates: StatusCandidate[];
+    teamId: string;
+    teamProjectId: string;
+    projectId: string;
+  }) {
     await this._getOrCreateRemoteBackendProject({ teamId, teamProjectId });
     const localBranch = await this._getCurrentBranch();
     const tmpBranchForRemote = await this.customFetch(localBranch.name + '.hidden', localBranch.name);
     // Merge branch and ensure that we use the remote's history when merging
     const message = `Synced latest changes from ${localBranch.name}`;
-    const delta = await this._merge(
+    const delta = (await this._merge(
       candidates,
       localBranch.name,
       tmpBranchForRemote.name,
       message,
       true,
-    ) as unknown as Operation;
+    )) as unknown as Operation;
     // Remove tmp branch
     await this._removeBranch(tmpBranchForRemote);
     console.log(`[sync] Pulled branch ${localBranch.name}`);
@@ -620,7 +623,12 @@ export class VCS {
     return remoteProject;
   }
 
-  async _createRemoteProject({ rootDocumentId, name, teamId, teamProjectId }: BackendProject & { teamId: string; teamProjectId: string }) {
+  async _createRemoteProject({
+    rootDocumentId,
+    name,
+    teamId,
+    teamProjectId,
+  }: BackendProject & { teamId: string; teamProjectId: string }) {
     if (!teamId) {
       throw new Error('teamId should be defined');
     }
@@ -734,11 +742,7 @@ export class VCS {
     const latestStateTrunk = latestSnapshotTrunk ? latestSnapshotTrunk.state : [];
     const latestStateOther = latestSnapshotOther ? latestSnapshotOther.state : [];
     // Perform pre-merge checks
-    const { conflicts: preConflicts, dirty } = preMergeCheck(
-      latestStateTrunk,
-      latestStateOther,
-      candidates,
-    );
+    const { conflicts: preConflicts, dirty } = preMergeCheck(latestStateTrunk, latestStateOther, candidates);
 
     if (preConflicts.length) {
       console.log('[sync] Merge failed', preConflicts);
@@ -747,8 +751,7 @@ export class VCS {
 
     const shouldDoNothing1 = latestSnapshotOther && latestSnapshotOther.id === rootSnapshotId;
     const shouldDoNothing2 = branchOther.snapshots.length === 0;
-    const shouldFastForward1 =
-      rootSnapshot && (!latestSnapshotTrunk || rootSnapshot.id === latestSnapshotTrunk.id);
+    const shouldFastForward1 = rootSnapshot && (!latestSnapshotTrunk || rootSnapshot.id === latestSnapshotTrunk.id);
     const shouldFastForward2 = branchTrunk.snapshots.length === 0;
 
     if (shouldDoNothing1 || shouldDoNothing2) {
@@ -766,23 +769,31 @@ export class VCS {
         latestStateOther,
       );
       // Update state with conflict resolutions applied
-      const conflictsWithContent = await Promise.all(mergeConflicts.map(async conflict => {
-        let mineBlobContent: BaseModel | null = null;
-        let theirsBlobContent: BaseModel | null = null;
-        try {
-          mineBlobContent = conflict.mineBlob ? await this._getBlob(conflict.mineBlob) : null;
-          theirsBlobContent = conflict.theirsBlob ? await this._getBlob(conflict.theirsBlob) : null;
-        } catch (e) {
-          // No previous blob found
-        }
-        return {
-          ...conflict,
-          mineBlobContent,
-          theirsBlobContent,
-        };
-      }));
+      const conflictsWithContent = await Promise.all(
+        mergeConflicts.map(async conflict => {
+          let mineBlobContent: BaseModel | null = null;
+          let theirsBlobContent: BaseModel | null = null;
+          try {
+            mineBlobContent = conflict.mineBlob ? await this._getBlob(conflict.mineBlob) : null;
+            theirsBlobContent = conflict.theirsBlob ? await this._getBlob(conflict.theirsBlob) : null;
+          } catch (e) {
+            // No previous blob found
+          }
+          return {
+            ...conflict,
+            mineBlobContent,
+            theirsBlobContent,
+          };
+        }),
+      );
 
-      const conflictResolutions = await this.handleAnyConflicts(conflictsWithContent, otherBranchName.includes('.hidden') ? { ours: `${trunkBranchName} local`, theirs: `${otherBranchName.replace('.hidden', '')} remote` } : { ours: trunkBranchName, theirs: otherBranchName }, '');
+      const conflictResolutions = await this.handleAnyConflicts(
+        conflictsWithContent,
+        otherBranchName.includes('.hidden')
+          ? { ours: `${trunkBranchName} local`, theirs: `${otherBranchName.replace('.hidden', '')} remote` }
+          : { ours: trunkBranchName, theirs: otherBranchName },
+        '',
+      );
 
       const state = updateStateWithConflictResolutions(stateBeforeConflicts, conflictResolutions);
 
@@ -807,14 +818,8 @@ export class VCS {
     };
   }
 
-  async _createSnapshotFromState(
-    branch: Branch,
-    state: SnapshotState,
-    name: string,
-  ) {
-    const parentId = branch.snapshots.length
-      ? branch.snapshots[branch.snapshots.length - 1]
-      : EMPTY_HASH;
+  async _createSnapshotFromState(branch: Branch, state: SnapshotState, name: string) {
+    const parentId = branch.snapshots.length ? branch.snapshots[branch.snapshots.length - 1] : EMPTY_HASH;
 
     // Create the snapshot
     const id = _generateSnapshotID(parentId, this._backendProjectId(), state);
@@ -838,11 +843,7 @@ export class VCS {
     return snapshot;
   }
 
-  async _runGraphQL<T>(
-    query: string,
-    variables: Record<string, any>,
-    name: string,
-  ): Promise<T> {
+  async _runGraphQL<T>(query: string, variables: Record<string, any>, name: string): Promise<T> {
     const { sessionId } = await this._assertSession();
 
     const { data, errors } = await insomniaFetch<{ data: T; errors: [{ message: string }] }>({
@@ -1140,9 +1141,7 @@ export class VCS {
     return project;
   }
 
-  async _queryTeamMemberKeys(
-    teamId: string,
-  ): Promise<{
+  async _queryTeamMemberKeys(teamId: string): Promise<{
     memberKeys: {
       accountId: string;
       publicKey: string;
@@ -1501,7 +1500,10 @@ export class VCS {
     }
 
     branch.modified = new Date();
-    return this._store.setItem(`/projects/${this._backendProjectId()}/branches/${branch.name.toLowerCase()}.json`, branch);
+    return this._store.setItem(
+      `/projects/${this._backendProjectId()}/branches/${branch.name.toLowerCase()}.json`,
+      branch,
+    );
   }
 
   async _removeBranch(branch: Branch) {
@@ -1518,7 +1520,9 @@ export class VCS {
   }
 
   _getBlob(blobId: string) {
-    return this._store.getItem(`/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`) as Promise<BaseModel | null>;
+    return this._store.getItem(
+      `/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`,
+    ) as Promise<BaseModel | null>;
   }
 
   async _getBlobs(ids: string[]) {
@@ -1532,7 +1536,10 @@ export class VCS {
   }
 
   async _storeBlob(blobId: string, content: Record<string, any> | null) {
-    return this._store.setItem(`/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`, content);
+    return this._store.setItem(
+      `/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`,
+      content,
+    );
   }
 
   async _storeBlobs(blobsToStore: Record<string, string>) {
@@ -1540,7 +1547,12 @@ export class VCS {
 
     for (const blobId of Object.keys(blobsToStore)) {
       const buff = Buffer.from(blobsToStore[blobId], 'utf8');
-      promises.push(this._store.setItem(`/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`, buff));
+      promises.push(
+        this._store.setItem(
+          `/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`,
+          buff,
+        ),
+      );
     }
 
     await Promise.all(promises);
@@ -1550,14 +1562,21 @@ export class VCS {
     const promises: Promise<any>[] = [];
 
     for (const blobId of Object.keys(decryptedBlobs)) {
-      promises.push(this._store.setItemRaw(`/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`, decryptedBlobs[blobId]));
+      promises.push(
+        this._store.setItemRaw(
+          `/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`,
+          decryptedBlobs[blobId],
+        ),
+      );
     }
 
     await Promise.all(promises);
   }
 
   async _getBlobRaw(blobId: string) {
-    return this._store.getItemRaw(`/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`);
+    return this._store.getItemRaw(
+      `/projects/${this._backendProjectId()}/blobs/${blobId.slice(0, 2)}/${blobId.slice(2)}`,
+    );
   }
 
   async _hasBlob(blobId: string) {
diff --git a/packages/insomnia/src/templating/__tests__/utils.test.ts b/packages/insomnia/src/templating/__tests__/utils.test.ts
index d505513d43..60efcd3698 100644
--- a/packages/insomnia/src/templating/__tests__/utils.test.ts
+++ b/packages/insomnia/src/templating/__tests__/utils.test.ts
@@ -27,7 +27,6 @@ describe('normalizeToDotAndBracketNotation()', () => {
   });
 });
 describe('getKeys()', () => {
-
   it('flattens complex object', () => {
     const obj = {
       foo: 'bar',
@@ -111,7 +110,6 @@ describe('getKeys()', () => {
 });
 
 describe('tokenizeTag()', () => {
-
   it('tokenizes complex tag', () => {
     const actual = utils.tokenizeTag('{% name bar, "baz \\"qux\\""   , 1 + 5 | default("foo") %}');
     const expected = {
@@ -245,7 +243,6 @@ describe('tokenizeTag()', () => {
 });
 
 describe('unTokenizeTag()', () => {
-
   it('handles the default case', () => {
     const tagStr = '{% name bar, "baz \\"qux\\""   , 1 + 5, \'hi\' %}';
     const tagData = utils.tokenizeTag(tagStr);
@@ -292,9 +289,7 @@ describe('unTokenizeTag()', () => {
       ],
     };
     const result = utils.unTokenizeTag(tagData);
-    expect(result).toEqual(
-      "{% name true, 'foo', foo.length, 'foo/bar/baz', 'id_123', 10, 'foo', var %}",
-    );
+    expect(result).toEqual("{% name true, 'foo', foo.length, 'foo/bar/baz', 'id_123', 10, 'foo', var %}");
   });
 
   it('fixes missing quotedBy attribute', () => {
@@ -317,7 +312,6 @@ describe('unTokenizeTag()', () => {
 });
 
 describe('encodeEncoding()', () => {
-
   it('encodes things', () => {
     expect(utils.encodeEncoding('hello', 'base64')).toBe('b64::aGVsbG8=::46b');
     expect(utils.encodeEncoding(null, 'base64')).toBe(null);
@@ -327,7 +321,6 @@ describe('encodeEncoding()', () => {
 });
 
 describe('decodeEncoding()', () => {
-
   it('encodes things', () => {
     expect(utils.decodeEncoding('b64::aGVsbG8=::46b')).toBe('hello');
     expect(utils.decodeEncoding('aGVsbG8=')).toBe('aGVsbG8=');
@@ -338,7 +331,6 @@ describe('decodeEncoding()', () => {
 });
 
 describe('extractUndefinedVariableKey()', () => {
-
   it('extract nunjucks variable key', () => {
     expect(extractUndefinedVariableKey('{{name}}', {})).toEqual(['name']);
     expect(extractUndefinedVariableKey('{{name}}', { name: '' })).toEqual([]);
diff --git a/packages/insomnia/src/templating/base-extension-worker.ts b/packages/insomnia/src/templating/base-extension-worker.ts
index 0fa4abacf1..beaa98f28d 100644
--- a/packages/insomnia/src/templating/base-extension-worker.ts
+++ b/packages/insomnia/src/templating/base-extension-worker.ts
@@ -29,9 +29,7 @@ export default class BaseExtension {
     this._ext = ext;
     this._plugin = plugin;
     const tag = this.getTag();
-    this.tags = [
-      ...(tag === null ? [] : [tag]),
-    ];
+    this.tags = [...(tag === null ? [] : [tag])];
   }
 
   getTag() {
@@ -51,10 +49,7 @@ export default class BaseExtension {
   }
 
   getLiveDisplayName() {
-    return (
-      this._ext?.liveDisplayName ||
-      (() => '')
-    );
+    return this._ext?.liveDisplayName || (() => '');
   }
 
   getDisablePreview() {
@@ -264,8 +259,10 @@ export default class BaseExtension {
               const latest = await resp.json();
               return latest;
             },
-            getBodyBuffer: async (response?: { bodyPath?: string; bodyCompression?: 'zip' | null | '__NEEDS_MIGRATION__' | undefined },
-              readFailureValue?: string) => {
+            getBodyBuffer: async (
+              response?: { bodyPath?: string; bodyCompression?: 'zip' | null | '__NEEDS_MIGRATION__' | undefined },
+              readFailureValue?: string,
+            ) => {
               const resp = await fetch('insomnia-templating-worker-database://response.getBodyBuffer', {
                 method: 'post',
                 body: JSON.stringify({ response, readFailureValue }),
diff --git a/packages/insomnia/src/templating/base-extension.ts b/packages/insomnia/src/templating/base-extension.ts
index c7123e9544..15c285f98f 100644
--- a/packages/insomnia/src/templating/base-extension.ts
+++ b/packages/insomnia/src/templating/base-extension.ts
@@ -20,9 +20,7 @@ export default class BaseExtension {
     this._ext = ext;
     this._plugin = plugin;
     const tag = this.getTag();
-    this.tags = [
-      ...(tag === null ? [] : [tag]),
-    ];
+    this.tags = [...(tag === null ? [] : [tag])];
   }
 
   getTag() {
@@ -42,9 +40,7 @@ export default class BaseExtension {
   }
 
   getLiveDisplayName() {
-    return (
-      this._ext?.liveDisplayName || (() => '')
-    );
+    return this._ext?.liveDisplayName || (() => '');
   }
 
   getDisablePreview() {
diff --git a/packages/insomnia/src/templating/index.ts b/packages/insomnia/src/templating/index.ts
index 8cb4a0da85..0691b695c0 100644
--- a/packages/insomnia/src/templating/index.ts
+++ b/packages/insomnia/src/templating/index.ts
@@ -68,9 +68,7 @@ export function render(
       const location = err.message.match(/\[Line (\d+), Column (\d+)*]/);
       const line = location ? parseInt(location[1]) : 1;
       const column = location ? parseInt(location[2]) : 1;
-      const reason = err.message.includes('attempted to output null or undefined value')
-        ? 'undefined'
-        : 'error';
+      const reason = err.message.includes('attempted to output null or undefined value') ? 'undefined' : 'error';
       const newError = new RenderError(sanitizedMsg);
       newError.path = path || '';
       newError.message = sanitizedMsg;
diff --git a/packages/insomnia/src/templating/third_party/objectPath.ts b/packages/insomnia/src/templating/third_party/objectPath.ts
index 11e930d27d..b65171d823 100644
--- a/packages/insomnia/src/templating/third_party/objectPath.ts
+++ b/packages/insomnia/src/templating/third_party/objectPath.ts
@@ -6,115 +6,125 @@ https://github.com/Kong/insomnia/issues/7286
 objectPath.parse could enter endless loop if last char in key name is backslash.
 */
 
-type Quote = '\'' | '\"';
+type Quote = "'" | '\"';
 
 const regex = {
-    "'": /\\\'/g,
-    '"': /\\\"/g,
+  "'": /\\\'/g,
+  '"': /\\\"/g,
 };
 
 const ObjectPath = {
-    parse: function (str: string) {
-        if (typeof str !== 'string') {
-            throw new TypeError('ObjectPath.parse must be passed a string');
+  parse: function (str: string) {
+    if (typeof str !== 'string') {
+      throw new TypeError('ObjectPath.parse must be passed a string');
+    }
+
+    let i = 0;
+    const parts = [];
+    let dot, bracket, quote, closing;
+    while (i < str.length) {
+      dot = str.indexOf('.', i);
+      bracket = str.indexOf('[', i);
+
+      if (dot === -1 && bracket === -1) {
+        // we've reached the end
+        parts.push(str.slice(i, str.length));
+        i = str.length;
+      } else if (bracket === -1 || (dot !== -1 && dot < bracket)) {
+        // dots
+        parts.push(str.slice(i, dot));
+        i = dot + 1;
+      } else {
+        // brackets
+        if (bracket > i) {
+          parts.push(str.slice(i, bracket));
+          i = bracket;
         }
+        quote = str.slice(bracket + 1, bracket + 2);
 
-        let i = 0;
-        const parts = [];
-        let dot, bracket, quote, closing;
-        while (i < str.length) {
-            dot = str.indexOf('.', i);
-            bracket = str.indexOf('[', i);
+        if (quote !== '"' && quote !== "'") {
+          closing = str.indexOf(']', bracket);
+          if (closing === -1) {
+            closing = str.length;
+          }
+          parts.push(str.slice(i + 1, closing));
+          i = str.slice(closing + 1, closing + 2) === '.' ? closing + 2 : closing + 1;
+        } else {
+          closing = str.indexOf(quote + ']', bracket);
+          if (closing === -1) {
+            closing = str.length;
+          }
 
-            if (dot === -1 && bracket === -1) {
-                // we've reached the end
-                parts.push(str.slice(i, str.length));
-                i = str.length;
-            } else if (bracket === -1 || (dot !== -1 && dot < bracket)) {
-                // dots
-                parts.push(str.slice(i, dot));
-                i = dot + 1;
-            } else {
-                // brackets
-                if (bracket > i) {
-                    parts.push(str.slice(i, bracket));
-                    i = bracket;
-                }
-                quote = str.slice(bracket + 1, bracket + 2);
-
-                if (quote !== '"' && quote !== "'") {
-                    closing = str.indexOf(']', bracket);
-                    if (closing === -1) {
-                        closing = str.length;
-                    }
-                    parts.push(str.slice(i + 1, closing));
-                    i = (str.slice(closing + 1, closing + 2) === '.') ? closing + 2 : closing + 1;
-                } else {
-                    closing = str.indexOf(quote + ']', bracket);
-                    if (closing === -1) {
-                        closing = str.length;
-                    }
-
-                    /*
+          /*
                     When there is an even number of backslashes before a single quote,
                     the single quote is not actually escaped.
                     The original implementation of the library did not account for this situation,
                     causing the program to enter an infinite loop when the key ends with a backslash.
                     */
-                    while (
-                        closing !== -1 &&
-                        (function countBackslashesBeforeClosing() {
-                            let backslash = 0;
-                            while (str.slice(closing - 1 - backslash, closing - backslash) === '\\') {
-                                backslash++;
-                            }
-                            return backslash;
-                        })() % 2 === 1 &&
-                        bracket < str.length
-                    ) {
-                        bracket++;
-                        closing = str.indexOf(quote + ']', bracket);
-                    }
-                    if (closing === -1) {
-                        closing = str.length;
-                    }
+          while (
+            closing !== -1 &&
+            (function countBackslashesBeforeClosing() {
+              let backslash = 0;
+              while (str.slice(closing - 1 - backslash, closing - backslash) === '\\') {
+                backslash++;
+              }
+              return backslash;
+            })() %
+              2 ===
+              1 &&
+            bracket < str.length
+          ) {
+            bracket++;
+            closing = str.indexOf(quote + ']', bracket);
+          }
+          if (closing === -1) {
+            closing = str.length;
+          }
 
-                    parts.push(str.slice(i + 2, closing).replace(regex[quote], quote).replace(/\\+/g, function (backslash) {
-                        return new Array(Math.ceil(backslash.length / 2) + 1).join('\\');
-                    }));
-                    i = (str.slice(closing + 2, closing + 3) === '.') ? closing + 3 : closing + 2;
-                }
-            }
+          parts.push(
+            str
+              .slice(i + 2, closing)
+              .replace(regex[quote], quote)
+              .replace(/\\+/g, function (backslash) {
+                return new Array(Math.ceil(backslash.length / 2) + 1).join('\\');
+              }),
+          );
+          i = str.slice(closing + 2, closing + 3) === '.' ? closing + 3 : closing + 2;
         }
-        return parts;
-    },
+      }
+    }
+    return parts;
+  },
 
-    // root === true : auto calculate root; must be dot-notation friendly
-    // root String : the string to use as root
-    stringify: function (arr: (string | number)[], quote?: Quote, forceQuote?: boolean) {
-        if (!Array.isArray(arr)) {
-            arr = [arr];
+  // root === true : auto calculate root; must be dot-notation friendly
+  // root String : the string to use as root
+  stringify: function (arr: (string | number)[], quote?: Quote, forceQuote?: boolean) {
+    if (!Array.isArray(arr)) {
+      arr = [arr];
+    }
+
+    quote = quote === '"' ? '"' : "'";
+    const regexp = new RegExp('(\\\\|' + quote + ')', 'g'); // regex => /(\\|')/g
+
+    return arr
+      .map(function (value: string | number, key: number) {
+        let property = value.toString();
+        if (!forceQuote && /^[A-z_]\w*$/.exec(property)) {
+          // str with only A-z0-9_ chars will display `foo.bar`
+          return key !== 0 ? '.' + property : property;
+        } else if (!forceQuote && /^\d+$/.exec(property)) {
+          // str with only numbers will display `foo[0]`
+          return '[' + property + ']';
         }
+        property = property.replace(regexp, '\\$1');
+        return '[' + quote + property + quote + ']';
+      })
+      .join('');
+  },
 
-        quote = (quote === '"') ? '"' : "'";
-        const regexp = new RegExp('(\\\\|' + quote + ')', 'g'); // regex => /(\\|')/g
-
-        return arr.map(function (value: string | number, key: number) {
-            let property = value.toString();
-            if (!forceQuote && /^[A-z_]\w*$/.exec(property)) { // str with only A-z0-9_ chars will display `foo.bar`
-                return (key !== 0) ? '.' + property : property;
-            } else if (!forceQuote && /^\d+$/.exec(property)) { // str with only numbers will display `foo[0]`
-                return '[' + property + ']';
-            }
-                property = property.replace(regexp, '\\$1');
-                return '[' + quote + property + quote + ']';
-
-        }).join('');
-    },
-
-    normalize: function (data: string, quote?: Quote, forceQuote?: boolean) {
-        return ObjectPath.stringify(Array.isArray(data) ? data : ObjectPath.parse(data), quote, forceQuote);
-    },
+  normalize: function (data: string, quote?: Quote, forceQuote?: boolean) {
+    return ObjectPath.stringify(Array.isArray(data) ? data : ObjectPath.parse(data), quote, forceQuote);
+  },
 };
 
 export default ObjectPath;
diff --git a/packages/insomnia/src/templating/types.ts b/packages/insomnia/src/templating/types.ts
index ea6e0f2649..9e6e2dd7cb 100644
--- a/packages/insomnia/src/templating/types.ts
+++ b/packages/insomnia/src/templating/types.ts
@@ -48,9 +48,10 @@ export interface BaseRenderContextOptions {
 }
 export type RenderContextAncestor = Request | GrpcRequest | WebSocketRequest | RequestGroup | Workspace | Project;
 
-export type RenderContextOptions = BaseRenderContextOptions
-  & Partial<BaseRenderContextOptions & { request: Request | GrpcRequest | WebSocketRequest }>
-  & { ancestors?: RenderContextAncestor[] };
+export type RenderContextOptions = BaseRenderContextOptions &
+  Partial<BaseRenderContextOptions & { request: Request | GrpcRequest | WebSocketRequest }> & {
+    ancestors?: RenderContextAncestor[];
+  };
 
 export type NunjucksTagContextMenuAction = 'edit' | 'delete';
 
@@ -164,8 +165,15 @@ export interface BaseRenderContext {
 }
 export interface AppContext {
   alert: (title: string, message?: string) => void;
-  dialog: (title: string, body: HTMLElement, options?: { onHide?: () => void; tall?: boolean; skinny?: boolean; wide?: boolean }) => void;
-  prompt: (title: string, options?: Pick<PromptModalOptions, 'label' | 'defaultValue' | 'submitName' | 'inputType'>) => Promise<string>;
+  dialog: (
+    title: string,
+    body: HTMLElement,
+    options?: { onHide?: () => void; tall?: boolean; skinny?: boolean; wide?: boolean },
+  ) => void;
+  prompt: (
+    title: string,
+    options?: Pick<PromptModalOptions, 'label' | 'defaultValue' | 'submitName' | 'inputType'>,
+  ) => Promise<string>;
   getPath: (name: string) => string;
   getInfo: () => { version: string; platform: NodeJS.Platform };
   showSaveDialog: (options?: { defaultPath?: string }) => Promise<string | null>;
diff --git a/packages/insomnia/src/templating/utils.ts b/packages/insomnia/src/templating/utils.ts
index 829d12264a..0a38afaea1 100644
--- a/packages/insomnia/src/templating/utils.ts
+++ b/packages/insomnia/src/templating/utils.ts
@@ -12,10 +12,7 @@ import objectPath from './third_party/objectPath';
  * @param {String} [prefix] - base path to prefix to all paths
  * @returns {Array} - list of paths
  */
-export function getKeys(
-  obj: any,
-  prefix = '',
-): { name: string; value: any }[] {
+export function getKeys(obj: any, prefix = ''): { name: string; value: any }[] {
   let allKeys: { name: string; value: any }[] = [];
   const typeOfObj = Object.prototype.toString.call(obj);
 
@@ -237,18 +234,18 @@ export function decodeEncoding<T>(value: T) {
 
 export async function maskOrDecryptVaultDataIfNecessary(vaultEnvironmentData: any, renderPurpose?: RenderPurpose) {
   /**
-    * Decrypt secrets when renderPurpose is one of the following:
-    * - preview: render the template in variable editor to do the live preview
-    * - send: render the template when sending requests
-    * - script: render the template in pre-request or after-response script
-  */
+   * Decrypt secrets when renderPurpose is one of the following:
+   * - preview: render the template in variable editor to do the live preview
+   * - send: render the template when sending requests
+   * - script: render the template in pre-request or after-response script
+   */
   const shouldDecrypt = renderPurpose === 'preview' || renderPurpose === 'send' || renderPurpose === 'script';
   if (typeof vaultEnvironmentData === 'object') {
     if (shouldDecrypt) {
       const { vaultKey, vaultSalt } = await userSession.getOrCreate();
       const isVaultEnabled = !!vaultSalt;
       if (isVaultEnabled && vaultKey) {
-        const symmetricKey = await decryptVaultKeyFromSession(vaultKey, true) as JsonWebKey;
+        const symmetricKey = (await decryptVaultKeyFromSession(vaultKey, true)) as JsonWebKey;
         // decrypt all secert values under vaultEnvironmentPath property in context
         Object.keys(vaultEnvironmentData).forEach(vaultContextKey => {
           const encryptedValue = vaultEnvironmentData[vaultContextKey];
@@ -270,7 +267,7 @@ export async function maskOrDecryptVaultDataIfNecessary(vaultEnvironmentData: an
 
 export function extractNunjucksTagFromCoords(
   coordinates: { left: number; top: number },
-  cm: React.MutableRefObject<EditorFromTextArea | null>
+  cm: React.MutableRefObject<EditorFromTextArea | null>,
 ): { range: MarkerRange; template: string } | void {
   if (cm && cm.current) {
     const { left, top } = coordinates;
diff --git a/packages/insomnia/src/templating/worker.ts b/packages/insomnia/src/templating/worker.ts
index 093e37b817..24364c3957 100644
--- a/packages/insomnia/src/templating/worker.ts
+++ b/packages/insomnia/src/templating/worker.ts
@@ -1,4 +1,3 @@
-
 import type { Environment } from 'nunjucks';
 import nunjucks from 'nunjucks/browser/nunjucks';
 
@@ -69,9 +68,7 @@ export function render(
       const location = err.message.match(/\[Line (\d+), Column (\d+)*]/);
       const line = location ? parseInt(location[1]) : 1;
       const column = location ? parseInt(location[2]) : 1;
-      const reason = err.message.includes('attempted to output null or undefined value')
-        ? 'undefined'
-        : 'error';
+      const reason = err.message.includes('attempted to output null or undefined value') ? 'undefined' : 'error';
       const newError = new RenderError(sanitizedMsg);
       newError.path = path || '';
       newError.message = sanitizedMsg;
@@ -174,9 +171,7 @@ async function getNunjucks(renderMode: string, ignoreUndefinedEnvVariable?: bool
   // ~~~~~~~~~~~~~~~~~~~~~~~~~~ //
   const nunjucksEnvironment = nunjucks.configure(config) as NunjucksEnvironment;
 
-  const allExtensions = [
-    ...localTemplateTags,
-  ];
+  const allExtensions = [...localTemplateTags];
 
   for (const extension of allExtensions) {
     const { templateTag, plugin } = extension;
diff --git a/packages/insomnia/src/ui/analytics.ts b/packages/insomnia/src/ui/analytics.ts
index f5688a6b5b..95b0a8b905 100644
--- a/packages/insomnia/src/ui/analytics.ts
+++ b/packages/insomnia/src/ui/analytics.ts
@@ -36,14 +36,23 @@ export enum SegmentEvent {
 }
 
 type PushPull = 'push' | 'pull';
-type VCSAction = PushPull | `force_${PushPull}` |
-  'create_branch' | 'merge_branch' | 'delete_branch' | 'checkout_branch' |
-  'commit' | 'stage_all' | 'stage' | 'unstage_all' | 'unstage' | 'rollback' | 'rollback_all' |
-  'update' | 'setup' | 'clone';
-export function vcsSegmentEventProperties(
-  type: 'git',
-  action: VCSAction,
-  error?: string
-) {
+type VCSAction =
+  | PushPull
+  | `force_${PushPull}`
+  | 'create_branch'
+  | 'merge_branch'
+  | 'delete_branch'
+  | 'checkout_branch'
+  | 'commit'
+  | 'stage_all'
+  | 'stage'
+  | 'unstage_all'
+  | 'unstage'
+  | 'rollback'
+  | 'rollback_all'
+  | 'update'
+  | 'setup'
+  | 'clone';
+export function vcsSegmentEventProperties(type: 'git', action: VCSAction, error?: string) {
   return { type, action, error };
 }
diff --git a/packages/insomnia/src/ui/auth-session-provider.ts b/packages/insomnia/src/ui/auth-session-provider.ts
index 2312d7cc6f..de6941c7c9 100644
--- a/packages/insomnia/src/ui/auth-session-provider.ts
+++ b/packages/insomnia/src/ui/auth-session-provider.ts
@@ -36,7 +36,6 @@ export async function decodeBase64(base64: string): Promise<Uint8Array> {
     const res = await fetch(uri);
     const buffer = await res.arrayBuffer();
     return new Uint8Array(buffer);
-
   } catch (error) {
     console.error(error);
     throw new Error('Failed to decode base64');
diff --git a/packages/insomnia/src/ui/components/app-loading-indicator.tsx b/packages/insomnia/src/ui/components/app-loading-indicator.tsx
index f1f9a5c224..01f4e20e96 100644
--- a/packages/insomnia/src/ui/components/app-loading-indicator.tsx
+++ b/packages/insomnia/src/ui/components/app-loading-indicator.tsx
@@ -16,13 +16,7 @@ export const AppLoadingIndicator = () => (
         position: 'relative',
       }}
     >
-      <svg
-        viewBox="0 0 378 378"
-        xmlns="http://www.w3.org/2000/svg"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        width={100}
-      >
+      <svg viewBox="0 0 378 378" xmlns="http://www.w3.org/2000/svg" fillRule="evenodd" clipRule="evenodd" width={100}>
         <circle
           cx={36}
           cy={36}
@@ -45,7 +39,7 @@ export const AppLoadingIndicator = () => (
           transform="translate(-323 -111) translate(359.016 147.016) scale(4.24956)"
         >
           <animateTransform
-            additive='sum'
+            additive="sum"
             attributeName="transform"
             type="rotate"
             from="0 36 36"
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnArrowRight.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnArrowRight.tsx
index 42d6c30899..6c00b28d1b 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnArrowRight.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnArrowRight.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnArrowRight = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <circle cx={6} cy={6} r={6} />
     <path fill="currentColor" d="M3 5v2h3v2l4-3-4-3v2z" />
   </svg>
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnBrackets.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnBrackets.tsx
index 29801043b0..d01ae12d1a 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnBrackets.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnBrackets.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnBrackets = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnCheckmark.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnCheckmark.tsx
index 4c5d8dc069..f0a352f5a3 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnCheckmark.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnCheckmark.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnCheckmark = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="m11.753 2 1.244 1.23-8.375 8.473L1 8.081l1.237-1.238L4.614 9.22 11.753 2Z" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnChevronDown.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnChevronDown.tsx
index e87c61c20a..e60d888fb3 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnChevronDown.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnChevronDown.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnChevronDown = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 10 10"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M1 2 0 3l5 5 5-5-1-1-4 4-4-4Z" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnChevronUp.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnChevronUp.tsx
index d3897348bb..e1b8dd7c81 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnChevronUp.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnChevronUp.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnChevronUp = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 10 10"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M1 8 0 7l5-5 5 5-1 1-4-4-4 4Z" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnElevator.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnElevator.tsx
index e3f347442f..dd8ab9bbed 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnElevator.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnElevator.tsx
@@ -10,11 +10,6 @@ export const SvgIcnElevator = memo<SVGProps<SVGSVGElement>>(props => (
     {...props}
   >
     <path fill="none" d="M0 0h14v14H0z" />
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="m2 6 5-5 5 5H2ZM12 8l-5 5-5-5h10Z"
-      fill=""
-    />
+    <path fillRule="evenodd" clipRule="evenodd" d="m2 6 5-5 5 5H2ZM12 8l-5 5-5-5h10Z" fill="" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnEllipsis.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnEllipsis.tsx
index 68826f8e96..9d97ebb05c 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnEllipsis.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnEllipsis.tsx
@@ -1,14 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnEllipsis = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 3"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnEmpty.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnEmpty.tsx
index 1d90a9e8f1..e5b07aaf1c 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnEmpty.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnEmpty.tsx
@@ -1,11 +1,4 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnEmpty = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  />
+  <svg width="1em" height="1em" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" role="img" {...props} />
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnErrors.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnErrors.tsx
index c1e2de5093..1e8c3dcf76 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnErrors.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnErrors.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnErrors = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <circle opacity={0.9} cx={6} cy={6} r={6} />
     <path
       d="M8.099 3 9 3.901 6.901 6 9 8.099 8.099 9 6 6.901 3.901 9 3 8.099 5.098 6 3 3.901 3.901 3 6 5.098 8.099 3Z"
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnGear.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnGear.tsx
index 3128225121..19c3511f33 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnGear.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnGear.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnGear = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M2.056 7.75c.123.82.446 1.576.918 2.215l-1.1 1.1 1.06 1.062 1.1-1.1c.64.47 1.395.794 2.216.917V13.5h1.5v-1.556a4.973 4.973 0 0 0 2.215-.918l1.1 1.1 1.062-1.06-1.1-1.1c.47-.64.794-1.395.917-2.216H13.5v-1.5h-1.556a4.973 4.973 0 0 0-.918-2.215l1.1-1.1-1.06-1.062-1.1 1.1a4.974 4.974 0 0 0-2.216-.917V.5h-1.5v1.556a4.974 4.974 0 0 0-2.215.918l-1.1-1.1-1.062 1.06 1.1 1.1a4.974 4.974 0 0 0-.917 2.216H.5v1.5h1.556ZM4 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnGitBranch.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnGitBranch.tsx
index 3347f20feb..41b93a5276 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnGitBranch.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnGitBranch.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnGitBranch = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 15 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 15 20" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M11.429 2.857A2.859 2.859 0 0 0 8.57 5.714c0 1.054.578 1.966 1.429 2.462v.395s0 2.858-2.857 2.858c-1.185 0-2.113.253-2.857.643V5.319a2.846 2.846 0 0 0 1.428-2.462 2.858 2.858 0 0 0-5.714 0C0 3.911.577 4.823 1.429 5.32v9.363A2.843 2.843 0 0 0 0 17.142 2.859 2.859 0 0 0 2.857 20a2.859 2.859 0 0 0 2.857-2.857c0-.748-.294-1.423-.764-1.934.416-.51 1.091-.923 2.193-.923 5.67 0 5.714-5.715 5.714-5.715v-.395a2.847 2.847 0 0 0 1.429-2.462 2.859 2.859 0 0 0-2.857-2.857ZM2.857 1.43c.79 0 1.429.638 1.429 1.428 0 .79-.639 1.429-1.429 1.429S1.43 3.647 1.43 2.857 2.067 1.43 2.857 1.43Zm0 17.142a1.428 1.428 0 1 1 0-2.858 1.428 1.428 0 0 1 0 2.858ZM11.43 7.143c-.79 0-1.429-.638-1.429-1.429 0-.79.639-1.428 1.429-1.428s1.428.638 1.428 1.428c0 .79-.639 1.429-1.428 1.429Z" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnGithubLogo.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnGithubLogo.tsx
index cd4e4fa273..a3225b941d 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnGithubLogo.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnGithubLogo.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnGithubLogo = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M5.999 0a6 6 0 0 0-1.896 11.693c.3.055.41-.13.41-.289 0-.142-.005-.52-.008-1.02-1.669.362-2.021-.805-2.021-.805-.273-.693-.667-.877-.667-.877-.544-.372.042-.365.042-.365.602.042.919.618.919.618.535.917 1.404.652 1.746.499.054-.388.209-.652.381-.802-1.333-.152-2.733-.666-2.733-2.966 0-.655.234-1.19.617-1.61-.061-.151-.267-.762.059-1.588 0 0 .504-.161 1.65.616A5.74 5.74 0 0 1 6 2.901a5.74 5.74 0 0 1 1.502.203c1.146-.777 1.649-.616 1.649-.616.327.826.121 1.437.06 1.588.384.42.616.955.616 1.61 0 2.305-1.403 2.813-2.739 2.961.215.185.407.551.407 1.111 0 .802-.007 1.449-.007 1.646 0 .161.108.347.412.289A6 6 0 0 0 5.999 0" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnInfo.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnInfo.tsx
index 041b6b66d6..9bce89acf9 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnInfo.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnInfo.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnInfo = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path
       d="M7 0a7 7 0 1 1 0 14A7 7 0 0 1 7 0Zm0 1.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM7.75 9v1.5h-1.5V9h1.5Zm0-5.5V8h-1.5V3.5h1.5Z"
       fill=""
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnKey.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnKey.tsx
index f5c483ba62..e18ff32712 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnKey.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnKey.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnKey = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnPlus.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnPlus.tsx
index 9784eda164..77f5f25f92 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnPlus.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnPlus.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnPlus = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 14 14"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M7.5 1a.25.25 0 0 1 .25.25v5h5a.25.25 0 0 1 .25.25v1a.25.25 0 0 1-.25.25h-5v5a.25.25 0 0 1-.25.25h-1a.25.25 0 0 1-.25-.25v-5h-5A.25.25 0 0 1 1 7.5v-1a.25.25 0 0 1 .25-.25h5v-5A.25.25 0 0 1 6.5 1h1Z" />
   </svg>
 ));
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnSuccess.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnSuccess.tsx
index 1a8b79f39f..9b38d84adb 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnSuccess.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnSuccess.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnSuccess = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    width="1em"
-    height="1em"
-    role="img"
-    {...props}
-  >
+  <svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" role="img" {...props}>
     <circle cx={6} cy={6} r={6} opacity={0.9} />
     <path
       fill="#fff"
diff --git a/packages/insomnia/src/ui/components/assets/svgr/IcnWarning.tsx b/packages/insomnia/src/ui/components/assets/svgr/IcnWarning.tsx
index a67d482afa..1176a44783 100644
--- a/packages/insomnia/src/ui/components/assets/svgr/IcnWarning.tsx
+++ b/packages/insomnia/src/ui/components/assets/svgr/IcnWarning.tsx
@@ -1,13 +1,6 @@
 import React, { memo, type SVGProps } from 'react';
 export const SvgIcnWarning = memo<SVGProps<SVGSVGElement>>(props => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 12 12"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    {...props}
-  >
+  <svg width="1em" height="1em" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" role="img" {...props}>
     <path d="M.096 10.546c-.212.482-.061 1.08.337 1.338.119.076.251.116.385.116h10.364c.452 0 .818-.443.818-.989 0-.162-.033-.322-.096-.465L7.27.916C6.829 0 5.903-.274 5.2.302c-.19.157-.351.367-.47.616L.095 10.546Z" />
     <path
       className="icn-warning_svg__fill-notice-fg"
diff --git a/packages/insomnia/src/ui/components/avatar.tsx b/packages/insomnia/src/ui/components/avatar.tsx
index 1e5b3039dc..5eadf539ce 100644
--- a/packages/insomnia/src/ui/components/avatar.tsx
+++ b/packages/insomnia/src/ui/components/avatar.tsx
@@ -31,7 +31,9 @@ const AvatarImage = ({ src, alt, size }: { src: string; alt: string; size: 'smal
       src={imageUrl}
       width={size === 'small' ? 20 : 24}
       height={size === 'small' ? 20 : 24}
-      className={'border-2 bounce-in border-solid border-[--color-bg] box-border outline-none rounded-full object-cover object-center bg-[--hl]'}
+      className={
+        'bounce-in box-border rounded-full border-2 border-solid border-[--color-bg] bg-[--hl] object-cover object-center outline-none'
+      }
     />
   );
 };
@@ -39,7 +41,7 @@ const AvatarImage = ({ src, alt, size }: { src: string; alt: string; size: 'smal
 const AvatarPlaceholder = ({ size, children }: { size: 'small' | 'medium'; children: ReactNode }) => {
   return (
     <div
-      className={`border-2 border-solid border-[--color-bg] box-border outline-none rounded-full object-cover object-center bg-cover bg-center m-0 bg-[--color-surprise] text-[--color-font-surprise] ${size === 'small' ? 'w-[20px] h-[20px]' : 'w-[24px] h-[24px]'} flex items-center justify-center font-bold text-xs`}
+      className={`m-0 box-border rounded-full border-2 border-solid border-[--color-bg] bg-[--color-surprise] bg-cover bg-center object-cover object-center text-[--color-font-surprise] outline-none ${size === 'small' ? 'h-[20px] w-[20px]' : 'h-[24px] w-[24px]'} flex items-center justify-center text-xs font-bold`}
     >
       {children}
     </div>
@@ -49,27 +51,29 @@ const AvatarPlaceholder = ({ size, children }: { size: 'small' | 'medium'; child
 export const Avatar = ({ src, alt, size = 'medium' }: { src: string; alt: string; size?: 'small' | 'medium' }) => {
   return src ? (
     <Suspense fallback={<AvatarPlaceholder size={size}>{getNameInitials(alt)}</AvatarPlaceholder>}>
-      <AvatarImage
-        src={src}
-        alt={alt}
-        size={size}
-      />
+      <AvatarImage src={src} alt={alt} size={size} />
     </Suspense>
   ) : (
-    <AvatarPlaceholder size={size}>
-      {getNameInitials(alt)}
-    </AvatarPlaceholder>
+    <AvatarPlaceholder size={size}>{getNameInitials(alt)}</AvatarPlaceholder>
   );
 };
 
-export const AvatarGroup = ({ items, maxAvatars = 3, size = 'medium' }: { items: { key: string; src: string; alt: string }[]; maxAvatars?: number; size: 'small' | 'medium' }) => {
+export const AvatarGroup = ({
+  items,
+  maxAvatars = 3,
+  size = 'medium',
+}: {
+  items: { key: string; src: string; alt: string }[];
+  maxAvatars?: number;
+  size: 'small' | 'medium';
+}) => {
   const avatars = items.slice(0, maxAvatars);
   const overflow = items.length - maxAvatars;
 
   return (
     <Suspense fallback={<div />}>
       <div
-        className='flex items-center flex-shrink-0 -space-x-2'
+        className="flex flex-shrink-0 items-center -space-x-2"
         style={{
           paddingLeft: size === 'small' ? '5px' : '6px',
         }}
@@ -77,15 +81,11 @@ export const AvatarGroup = ({ items, maxAvatars = 3, size = 'medium' }: { items:
         {avatars.map(avatar => (
           <TooltipTrigger key={avatar.key}>
             <Button className="cursor-default">
-              <Avatar
-                size={size}
-                src={avatar.src}
-                alt={avatar.alt}
-              />
+              <Avatar size={size} src={avatar.src} alt={avatar.alt} />
             </Button>
             <Tooltip
               offset={8}
-              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
             >
               {avatar.alt}
             </Tooltip>
@@ -98,7 +98,7 @@ export const AvatarGroup = ({ items, maxAvatars = 3, size = 'medium' }: { items:
             </Button>
             <Tooltip
               offset={8}
-              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
             >
               {items.slice(maxAvatars).map(avatar => (
                 <div key={avatar.key}>{avatar.alt}</div>
diff --git a/packages/insomnia/src/ui/components/base/copy-button.tsx b/packages/insomnia/src/ui/components/base/copy-button.tsx
index 4717f03fc0..6112d1efbd 100644
--- a/packages/insomnia/src/ui/components/base/copy-button.tsx
+++ b/packages/insomnia/src/ui/components/base/copy-button.tsx
@@ -19,15 +19,18 @@ export const CopyButton: FC<Props> = ({
   ...buttonProps
 }) => {
   const [showConfirmation, setShowConfirmation] = useState(false);
-  const onClick = useCallback(async (event: React.MouseEvent) => {
-    event.preventDefault();
-    event.stopPropagation();
+  const onClick = useCallback(
+    async (event: React.MouseEvent) => {
+      event.preventDefault();
+      event.stopPropagation();
 
-    if (content) {
-      window.clipboard.writeText(content);
-    }
-    setShowConfirmation(true);
-  }, [content]);
+      if (content) {
+        window.clipboard.writeText(content);
+      }
+      setShowConfirmation(true);
+    },
+    [content],
+  );
 
   useInterval(() => {
     setShowConfirmation(false);
@@ -35,12 +38,8 @@ export const CopyButton: FC<Props> = ({
 
   const confirm = typeof confirmMessage === 'string' ? confirmMessage : 'Copied';
   return (
-    <Button
-      {...buttonProps}
-      title={title}
-      onClick={onClick}
-    >
-      {(showConfirmation || showConfirmationProp) ? (
+    <Button {...buttonProps} title={title} onClick={onClick}>
+      {showConfirmation || showConfirmationProp ? (
         <span>
           {confirm} <i className="fa fa-check-circle-o" />
         </span>
diff --git a/packages/insomnia/src/ui/components/base/dropdown/dropdown-hint.tsx b/packages/insomnia/src/ui/components/base/dropdown/dropdown-hint.tsx
index a75cf128fd..d131e7ebb5 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/dropdown-hint.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/dropdown-hint.tsx
@@ -8,8 +8,5 @@ interface Props {
 }
 
 export const DropdownHint = (props: Props) => {
-  return <Hotkey
-    className='ml-auto text-[--hl-xl] pl-[--padding-lg]'
-    keyBindings={props.keyBindings}
-  />;
+  return <Hotkey className="ml-auto pl-[--padding-lg] text-[--hl-xl]" keyBindings={props.keyBindings} />;
 };
diff --git a/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx b/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx
index aa8bcfa98d..ad1519db92 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/dropdown.tsx
@@ -43,7 +43,7 @@ export const Dropdown = forwardRef<DropdownHandle, DropdownProps>((props: Dropdo
 
   const state: MenuTriggerState = useMenuTriggerState({
     ...props,
-    onOpenChange: isOpen => isOpen ? onOpen?.() : onClose?.(),
+    onOpenChange: isOpen => (isOpen ? onOpen?.() : onClose?.()),
   });
 
   useImperativeHandle(ref, () => ({
@@ -56,17 +56,20 @@ export const Dropdown = forwardRef<DropdownHandle, DropdownProps>((props: Dropdo
 
   const { menuTriggerProps, menuProps } = useMenuTrigger({ isDisabled }, state, triggerRef);
   return (
-    <div className={`relative inline-block dropdown ${className || ''}`} style={style} data-testid={dataTestId}>
+    <div className={`dropdown relative inline-block ${className || ''}`} style={style} data-testid={dataTestId}>
       <PressResponder {...menuTriggerProps} isPressed={state.isOpen} ref={triggerRef}>
-        {triggerButton || <Button>{label} <span aria-hidden="true" style={{ paddingLeft: 5 }}>?</span></Button>}
+        {triggerButton || (
+          <Button>
+            {label}{' '}
+            <span aria-hidden="true" style={{ paddingLeft: 5 }}>
+              ?
+            </span>
+          </Button>
+        )}
       </PressResponder>
 
       {state.isOpen && (
-        <Popover
-          state={state}
-          triggerRef={triggerRef}
-          placement={placement || 'bottom end'}
-        >
+        <Popover state={state} triggerRef={triggerRef} placement={placement || 'bottom end'}>
           <Menu
             {...mergeProps(props, menuProps)}
             selectionMode={selectionMode}
diff --git a/packages/insomnia/src/ui/components/base/dropdown/item-content.tsx b/packages/insomnia/src/ui/components/base/dropdown/item-content.tsx
index 0984b2e041..665ae455b0 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/item-content.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/item-content.tsx
@@ -24,11 +24,12 @@ export const ItemContent: FC<ItemContentProps> = (props: ItemContentProps) => {
 
   const content = (
     <>
-      <div className='flex items-center w-full'>
-        {icon && typeof icon === 'string' ? <i
-          className={`fa fa-${icon} flex items-center px-[--padding-xs]`}
-          style={iconStyle}
-        /> : icon}
+      <div className="flex w-full items-center">
+        {icon && typeof icon === 'string' ? (
+          <i className={`fa fa-${icon} flex items-center px-[--padding-xs]`} style={iconStyle} />
+        ) : (
+          icon
+        )}
         {children || label}
       </div>
       {hint && <DropdownHint keyBindings={hint} />}
@@ -40,7 +41,7 @@ export const ItemContent: FC<ItemContentProps> = (props: ItemContentProps) => {
     return (
       <PromptButton
         fullWidth
-        className={`w-full h-full flex items-center justify-between pl-1 pr-2 ${className || ''}`}
+        className={`flex h-full w-full items-center justify-between pl-1 pr-2 ${className || ''}`}
         onClick={onClick}
       >
         {content}
@@ -50,8 +51,8 @@ export const ItemContent: FC<ItemContentProps> = (props: ItemContentProps) => {
 
   return (
     <div
-      role='button'
-      className={`w-full h-full flex items-center justify-between pl-[--padding-sm] pr-[--padding-md] ${className || ''} ${isSelected ? 'bg-[--hl-xs] font-bold' : ''}`}
+      role="button"
+      className={`flex h-full w-full items-center justify-between pl-[--padding-sm] pr-[--padding-md] ${className || ''} ${isSelected ? 'bg-[--hl-xs] font-bold' : ''}`}
       style={style}
     >
       {content}
diff --git a/packages/insomnia/src/ui/components/base/dropdown/menu-item.tsx b/packages/insomnia/src/ui/components/base/dropdown/menu-item.tsx
index 7036d7496c..56137ce9c3 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/menu-item.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/menu-item.tsx
@@ -10,11 +10,7 @@ interface Props<T> {
   closeOnSelect?: boolean;
 }
 
-export const MenuItem = <T extends object>({
-  item,
-  state,
-  closeOnSelect,
-}: Props<T>) => {
+export const MenuItem = <T extends object>({ item, state, closeOnSelect }: Props<T>) => {
   const ref = useRef<HTMLLIElement>(null);
 
   /**
@@ -36,19 +32,20 @@ export const MenuItem = <T extends object>({
   // of if the dropdown is not set to close on select.
   const shouldRemainOpen = withPrompt || stayOpenAfterClick;
 
-  const {
-    menuItemProps,
-    isFocused,
-  } = useMenuItem({
-    key: item.key,
-    'aria-label': item['aria-label'],
-    closeOnSelect: closeOnSelect || !shouldRemainOpen,
-    onAction: !withPrompt && !isDisabled && onClick,
-  }, state, ref);
+  const { menuItemProps, isFocused } = useMenuItem(
+    {
+      'key': item.key,
+      'aria-label': item['aria-label'],
+      'closeOnSelect': closeOnSelect || !shouldRemainOpen,
+      'onAction': !withPrompt && !isDisabled && onClick,
+    },
+    state,
+    ref,
+  );
 
   return (
     <li
-      className={`flex items-center leading-10 text-left text-[--color-font] m-0 min-w-[15rem] whitespace-nowrap ${isFocused ? 'bg-[--hl-sm]' : 'bg-transparent'} ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'} hover:bg-[--hl-xs] focus:outline-0`}
+      className={`m-0 flex min-w-[15rem] items-center whitespace-nowrap text-left leading-10 text-[--color-font] ${isFocused ? 'bg-[--hl-sm]' : 'bg-transparent'} ${isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'} hover:bg-[--hl-xs] focus:outline-0`}
       {...menuItemProps}
       ref={ref}
     >
diff --git a/packages/insomnia/src/ui/components/base/dropdown/menu-section.tsx b/packages/insomnia/src/ui/components/base/dropdown/menu-section.tsx
index 1c85ee1420..64d3ce9a03 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/menu-section.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/menu-section.tsx
@@ -11,13 +11,9 @@ interface Props<T> {
   closeOnSelect?: boolean;
 }
 
-export const MenuSection = <T extends object>({
-  section,
-  state,
-  closeOnSelect = true,
-}: Props<T>) => {
+export const MenuSection = <T extends object>({ section, state, closeOnSelect = true }: Props<T>) => {
   const { itemProps, headingProps, groupProps } = useMenuSection({
-    heading: section.rendered,
+    'heading': section.rendered,
     'aria-label': section['aria-label'],
   });
 
@@ -27,28 +23,19 @@ export const MenuSection = <T extends object>({
 
   return (
     <li {...itemProps}>
-      <div className="flex items-center mx-10">
+      <div className="mx-10 flex items-center">
         {section.rendered && (
-          <span
-            className="whitespace-nowrap pr-4 text-[--hl] bg-[--color-bg] text-xs uppercase my-2"
-            {...headingProps}
-          >
+          <span className="my-2 whitespace-nowrap bg-[--color-bg] pr-4 text-xs uppercase text-[--hl]" {...headingProps}>
             {section.rendered}
           </span>
         )}
         {shouldDisplayDivider && <hr className="my-1" {...separatorProps} />}
       </div>
-      <ul {...groupProps} className="p-0 list-none">
-        {[...section.childNodes].map((node: Node<T>) => (
-          node.rendered && (
-            <MenuItem
-              key={node.key}
-              item={node}
-              state={state}
-              closeOnSelect={closeOnSelect}
-            />
-          )
-        ))}
+      <ul {...groupProps} className="list-none p-0">
+        {[...section.childNodes].map(
+          (node: Node<T>) =>
+            node.rendered && <MenuItem key={node.key} item={node} state={state} closeOnSelect={closeOnSelect} />,
+        )}
       </ul>
     </li>
   );
diff --git a/packages/insomnia/src/ui/components/base/dropdown/menu.tsx b/packages/insomnia/src/ui/components/base/dropdown/menu.tsx
index e95a9570a0..e7468bacda 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/menu.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/menu.tsx
@@ -42,26 +42,12 @@ export const Menu = <T extends object>(props: Props<T>) => {
         // If the item is a section and the section has items, render a MenuSection
         // @ts-expect-error -- early deprecation
         if (item.type === 'section' && getItemCount(item.childNodes) !== 0) {
-          return (
-            <MenuSection
-              key={item.key}
-              section={item}
-              state={state}
-              closeOnSelect={props.closeOnSelect}
-            />
-          );
+          return <MenuSection key={item.key} section={item} state={state} closeOnSelect={props.closeOnSelect} />;
         }
 
         // If the item is a dropdown item and has content, render a MenuItem
         if (item.type === 'item' && item.rendered) {
-          return (
-            <MenuItem
-              key={item.key}
-              item={item}
-              state={state}
-              closeOnSelect={props.closeOnSelect}
-            />
-          );
+          return <MenuItem key={item.key} item={item} state={state} closeOnSelect={props.closeOnSelect} />;
         }
 
         return null;
diff --git a/packages/insomnia/src/ui/components/base/dropdown/popover.tsx b/packages/insomnia/src/ui/components/base/dropdown/popover.tsx
index f22043188b..18cd23d372 100644
--- a/packages/insomnia/src/ui/components/base/dropdown/popover.tsx
+++ b/packages/insomnia/src/ui/components/base/dropdown/popover.tsx
@@ -11,11 +11,7 @@ export const Popover: FC<Props> = (props: Props) => {
   const popoverRef = useRef<HTMLDivElement>(null);
   const { state, children, isNonModal } = props;
 
-  const { overlayProps } = useOverlayTrigger(
-    { type: 'dialog' },
-    state,
-    props.triggerRef
-  );
+  const { overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, props.triggerRef);
 
   // Handle events that should cause the popup to close,
   // e.g. blur, clicking outside, or pressing the escape key.
diff --git a/packages/insomnia/src/ui/components/base/file-input-button.tsx b/packages/insomnia/src/ui/components/base/file-input-button.tsx
index 2c60bd19a4..de77abc7b4 100644
--- a/packages/insomnia/src/ui/components/base/file-input-button.tsx
+++ b/packages/insomnia/src/ui/components/base/file-input-button.tsx
@@ -18,7 +18,7 @@ export const FileInputButton = (props: Props) => {
   const { showFileName, showFileIcon, path, name, onChange, itemtypes, extensions, disabled, ...extraProps } = props;
   // NOTE: Basename fails if path is not a string, so let's make sure it is
   const fileName = typeof path === 'string' ? pathBasename(path) : null;
-  const _handleChooseFile =  useCallback(async () => {
+  const _handleChooseFile = useCallback(async () => {
     const { canceled, filePath } = await selectFileOrFolder({
       itemTypes: itemtypes,
       extensions,
@@ -32,13 +32,7 @@ export const FileInputButton = (props: Props) => {
     onChange(filePath);
   }, [extensions, itemtypes, onChange]);
   return (
-    <button
-      type="button"
-      onClick={_handleChooseFile}
-      title={path}
-      disabled={disabled}
-      {...extraProps}
-    >
+    <button type="button" onClick={_handleChooseFile} title={path} disabled={disabled} {...extraProps}>
       {showFileIcon && <i className="fa fa-file-o space-right" />}
       {showFileName && fileName ? `${fileName}` : `Choose ${name || 'File'}`}
     </button>
diff --git a/packages/insomnia/src/ui/components/base/highlight.tsx b/packages/insomnia/src/ui/components/base/highlight.tsx
index edf38fbb06..a7fafd73ab 100644
--- a/packages/insomnia/src/ui/components/base/highlight.tsx
+++ b/packages/insomnia/src/ui/components/base/highlight.tsx
@@ -9,12 +9,7 @@ export interface HighlightProps {
   blankValue?: string;
 }
 
-export const Highlight: FC<HighlightProps> = ({
-  search,
-  text,
-  blankValue,
-  ...otherProps
-}) => {
+export const Highlight: FC<HighlightProps> = ({ search, text, blankValue, ...otherProps }) => {
   // Match loose here to make sure our highlighting always works
   const result = fuzzyMatch(search, text, {
     splitSpace: true,
@@ -29,12 +24,12 @@ export const Highlight: FC<HighlightProps> = ({
     <span
       {...otherProps}
       dangerouslySetInnerHTML={{
-      // @ts-expect-error -- TSCONVERSION
-        __html: fuzzySort.highlight(
         // @ts-expect-error -- TSCONVERSION
+        __html: fuzzySort.highlight(
+          // @ts-expect-error -- TSCONVERSION
           result,
           '<strong style="font-style: italic; text-decoration: underline;">',
-          '</strong>'
+          '</strong>',
         ),
       }}
     />
diff --git a/packages/insomnia/src/ui/components/base/indeterminate-checkbox.tsx b/packages/insomnia/src/ui/components/base/indeterminate-checkbox.tsx
index 4affeebf3c..57937649a1 100644
--- a/packages/insomnia/src/ui/components/base/indeterminate-checkbox.tsx
+++ b/packages/insomnia/src/ui/components/base/indeterminate-checkbox.tsx
@@ -15,11 +15,5 @@ export const IndeterminateCheckbox: FC<Props> = ({ checked, indeterminate, ...ot
     }
   }, [checked, indeterminate]);
 
-  return (
-    <input
-      type="checkbox"
-      ref={checkRef}
-      {...otherProps}
-    />
-  );
+  return <input type="checkbox" ref={checkRef} {...otherProps} />;
 };
diff --git a/packages/insomnia/src/ui/components/base/link.tsx b/packages/insomnia/src/ui/components/base/link.tsx
index 71ad8db22c..79965a6847 100644
--- a/packages/insomnia/src/ui/components/base/link.tsx
+++ b/packages/insomnia/src/ui/components/base/link.tsx
@@ -11,20 +11,15 @@ interface Props {
   noTheme?: boolean;
 }
 
-export const Link: FC<Props> = ({
-  onClick,
-  button,
-  href,
-  children,
-  className,
-  noTheme,
-  ...other
-}) => {
-  const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
-    event?.preventDefault();
-    onClick?.(event); // Also call onClick that was passed to us if there was one
-    window.main.openInBrowser(href);
-  }, [onClick, href]);
+export const Link: FC<Props> = ({ onClick, button, href, children, className, noTheme, ...other }) => {
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+      event?.preventDefault();
+      onClick?.(event); // Also call onClick that was passed to us if there was one
+      window.main.openInBrowser(href);
+    },
+    [onClick, href],
+  );
 
   if (button) {
     return (
diff --git a/packages/insomnia/src/ui/components/base/modal-footer.tsx b/packages/insomnia/src/ui/components/base/modal-footer.tsx
index f4c0a40f3a..36f5c0db36 100644
--- a/packages/insomnia/src/ui/components/base/modal-footer.tsx
+++ b/packages/insomnia/src/ui/components/base/modal-footer.tsx
@@ -7,9 +7,7 @@ interface Props {
 }
 
 export const ModalFooter: FC<Props> = memo(({ children, className }) => (
-  <div className={classnames('modal__footer theme--dialog__footer', className)}>
-    {children}
-  </div>
+  <div className={classnames('modal__footer theme--dialog__footer', className)}>{children}</div>
 ));
 
 ModalFooter.displayName = 'ModalFooter';
diff --git a/packages/insomnia/src/ui/components/base/modal.tsx b/packages/insomnia/src/ui/components/base/modal.tsx
index bb13d864e4..46a0d2f998 100644
--- a/packages/insomnia/src/ui/components/base/modal.tsx
+++ b/packages/insomnia/src/ui/components/base/modal.tsx
@@ -1,5 +1,13 @@
 import classnames from 'classnames';
-import React, { forwardRef, type ReactNode, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import { FocusScope } from 'react-aria';
 
 import { createKeybindingsHandler } from '../keydown-binder';
@@ -24,95 +32,92 @@ export interface ModalHandle {
   toggle: () => void;
   isOpen: () => boolean;
 }
-export const Modal = forwardRef<ModalHandle, ModalProps>(({
-  centered,
-  children,
-  className,
-  onHide: onHideProp,
-  onShow,
-  skinny,
-  tall,
-  wide,
-}, ref) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [open, setOpen] = useState(false);
-  const [zIndex, setZIndex] = useState(globalZIndex);
-  const [onHideArgument, setOnHideArgument] = useState<() => void>();
+export const Modal = forwardRef<ModalHandle, ModalProps>(
+  ({ centered, children, className, onHide: onHideProp, onShow, skinny, tall, wide }, ref) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [open, setOpen] = useState(false);
+    const [zIndex, setZIndex] = useState(globalZIndex);
+    const [onHideArgument, setOnHideArgument] = useState<() => void>();
 
-  const show: ModalHandle['show'] = useCallback(options => {
-    options?.onHide && setOnHideArgument(options.onHide);
-    setOpen(true);
-    setZIndex(globalZIndex++);
-    onShow?.();
-  }, [onShow]);
+    const show: ModalHandle['show'] = useCallback(
+      options => {
+        options?.onHide && setOnHideArgument(options.onHide);
+        setOpen(true);
+        setZIndex(globalZIndex++);
+        onShow?.();
+      },
+      [onShow],
+    );
 
-  const hide = useCallback(() => {
-    setOpen(false);
-    if (typeof onHideProp === 'function') {
-      onHideProp();
-    }
-    if (typeof onHideArgument === 'function') {
-      onHideArgument();
-    }
-  }, [onHideProp, onHideArgument]);
+    const hide = useCallback(() => {
+      setOpen(false);
+      if (typeof onHideProp === 'function') {
+        onHideProp();
+      }
+      if (typeof onHideArgument === 'function') {
+        onHideArgument();
+      }
+    }, [onHideProp, onHideArgument]);
 
-  useImperativeHandle(ref, () => ({
-    show,
-    hide,
-    toggle: () => open ? hide() : show(),
-    isOpen: () => open,
-  }), [show, open, hide]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        show,
+        hide,
+        toggle: () => (open ? hide() : show()),
+        isOpen: () => open,
+      }),
+      [show, open, hide],
+    );
 
-  const classes = classnames(
-    'modal',
-    'theme--dialog',
-    className,
-    { 'modal--fixed-height': tall },
-    { 'modal--wide': wide },
-    { 'modal--skinny': skinny },
-  );
+    const classes = classnames(
+      'modal',
+      'theme--dialog',
+      className,
+      { 'modal--fixed-height': tall },
+      { 'modal--wide': wide },
+      { 'modal--skinny': skinny },
+    );
 
-  useEffect(() => {
-    const closeElements = containerRef.current?.querySelectorAll('[data-close-modal]');
+    useEffect(() => {
+      const closeElements = containerRef.current?.querySelectorAll('[data-close-modal]');
 
-    for (const element of closeElements || []) {
-      element.addEventListener('click', hide);
-    }
-  }, [hide, open]);
+      for (const element of closeElements || []) {
+        element.addEventListener('click', hide);
+      }
+    }, [hide, open]);
 
-  const handleKeydown = createKeybindingsHandler({
-    'Escape': () => {
-      hide();
-    },
-  });
-  useEffect(() => {
-    document.body.addEventListener('keydown', handleKeydown);
+    const handleKeydown = createKeybindingsHandler({
+      Escape: () => {
+        hide();
+      },
+    });
+    useEffect(() => {
+      document.body.addEventListener('keydown', handleKeydown);
 
-    return () => {
-      document.body.removeEventListener('keydown', handleKeydown);
-    };
-  }, [handleKeydown]);
+      return () => {
+        document.body.removeEventListener('keydown', handleKeydown);
+      };
+    }, [handleKeydown]);
 
-  return (open ?
-    <FocusScope autoFocus>
-      <div
-        ref={containerRef}
-        onKeyDown={handleKeydown}
-        tabIndex={-1}
-        className={classes}
-        style={{ zIndex }}
-        aria-hidden={false}
-        role="dialog"
-      >
-        <div className="modal__backdrop overlay theme--transparent-overlay" data-close-modal />
-        <div className={classnames('modal__content__wrapper', { 'modal--centered': centered })}>
-          <div className="modal__content">
-            {children}
+    return open ? (
+      <FocusScope autoFocus>
+        <div
+          ref={containerRef}
+          onKeyDown={handleKeydown}
+          tabIndex={-1}
+          className={classes}
+          style={{ zIndex }}
+          aria-hidden={false}
+          role="dialog"
+        >
+          <div className="modal__backdrop overlay theme--transparent-overlay" data-close-modal />
+          <div className={classnames('modal__content__wrapper', { 'modal--centered': centered })}>
+            <div className="modal__content">{children}</div>
           </div>
         </div>
-      </div>
-    </FocusScope>
-    : null
-  );
-});
+      </FocusScope>
+    ) : null;
+  },
+);
 Modal.displayName = 'Modal';
diff --git a/packages/insomnia/src/ui/components/base/prompt-button.tsx b/packages/insomnia/src/ui/components/base/prompt-button.tsx
index e88553f6a8..b4cccec7d6 100644
--- a/packages/insomnia/src/ui/components/base/prompt-button.tsx
+++ b/packages/insomnia/src/ui/components/base/prompt-button.tsx
@@ -24,7 +24,7 @@ interface Props<T> {
   referToOnClickReturnValue?: boolean;
 }
 
-export const PromptButton = <T, >({
+export const PromptButton = <T,>({
   onClick,
   disabled,
   confirmMessage = 'Click to confirm',
@@ -86,13 +86,15 @@ export const PromptButton = <T, >({
       } else {
         if (retVal instanceof Promise) {
           setState('loading');
-          retVal.then(() => {
-            setState('done');
-          }).finally(() => {
-            triggerTimeout.current = global.setTimeout(() => {
-              setState('default');
-            }, 1000);
-          });
+          retVal
+            .then(() => {
+              setState('done');
+            })
+            .finally(() => {
+              triggerTimeout.current = global.setTimeout(() => {
+                setState('default');
+              }, 1000);
+            });
         } else {
           throw new Error('onClick must return a Promise when referToOnClickReturnValue is true');
         }
@@ -131,30 +133,33 @@ interface PromptMessageProps {
   loadingMessage: string;
   children: ReactNode;
 }
-const PromptMessage: FunctionComponent<PromptMessageProps> = ({ promptState, confirmMessage, doneMessage, loadingMessage, children }) => {
-
+const PromptMessage: FunctionComponent<PromptMessageProps> = ({
+  promptState,
+  confirmMessage,
+  doneMessage,
+  loadingMessage,
+  children,
+}) => {
   if (promptState === 'ask') {
     return (
-      <span className='warning' title='Click again to confirm'>
-        <i className='fa fa-exclamation-circle' />
-        {confirmMessage && (
-          <span className='space-left'>{confirmMessage}</span>
-        )}
+      <span className="warning" title="Click again to confirm">
+        <i className="fa fa-exclamation-circle" />
+        {confirmMessage && <span className="space-left">{confirmMessage}</span>}
       </span>
     );
   }
 
   if (promptState === 'loading') {
     return (
-      <span className='warning' title='loading'>
-        <i className='fa fa-spinner animate-spin' />
-        <span className='space-left'>{loadingMessage}</span>
+      <span className="warning" title="loading">
+        <i className="fa fa-spinner animate-spin" />
+        <span className="space-left">{loadingMessage}</span>
       </span>
     );
   }
 
   if (promptState === 'done' && doneMessage) {
-    return <span className='space-left'>{doneMessage}</span>;
+    return <span className="space-left">{doneMessage}</span>;
   }
 
   return <>{children}</>;
diff --git a/packages/insomnia/src/ui/components/buttons/grpc-send-button.tsx b/packages/insomnia/src/ui/components/buttons/grpc-send-button.tsx
index a4501116f3..5eeb5aa37c 100644
--- a/packages/insomnia/src/ui/components/buttons/grpc-send-button.tsx
+++ b/packages/insomnia/src/ui/components/buttons/grpc-send-button.tsx
@@ -13,10 +13,7 @@ interface Props {
 export const GrpcSendButton: FunctionComponent<Props> = ({ running, methodType, handleStart, handleCancel }) => {
   if (!methodType) {
     return (
-      <Button
-        className='px-5 rounded-l-sm'
-        isDisabled
-      >
+      <Button className="rounded-l-sm px-5" isDisabled>
         Send
       </Button>
     );
@@ -24,7 +21,7 @@ export const GrpcSendButton: FunctionComponent<Props> = ({ running, methodType,
 
   return (
     <Button
-      className='px-5 ml-1 text-[--color-font-surprise] bg-[--color-surprise] hover:brightness-75 focus:brightness-75 rounded-l-sm'
+      className="ml-1 rounded-l-sm bg-[--color-surprise] px-5 text-[--color-font-surprise] hover:brightness-75 focus:brightness-75"
       onPress={running ? handleCancel : handleStart}
     >
       {running ? 'Cancel' : methodType === 'unary' ? 'Send' : 'Start'}
diff --git a/packages/insomnia/src/ui/components/check-for-updates-button.tsx b/packages/insomnia/src/ui/components/check-for-updates-button.tsx
index a8c2263d6a..524fd30d17 100644
--- a/packages/insomnia/src/ui/components/check-for-updates-button.tsx
+++ b/packages/insomnia/src/ui/components/check-for-updates-button.tsx
@@ -10,9 +10,8 @@ export const CheckForUpdatesButton = () => {
   const [status, setStatus] = useState<UpdateStatus>('Check Now');
 
   useEffect(() => {
-    const unsubscribe = window.main.on('updaterStatus',
-      (_e: Electron.IpcRendererEvent, status: UpdateStatus) => {
-        setStatus(status);
+    const unsubscribe = window.main.on('updaterStatus', (_e: Electron.IpcRendererEvent, status: UpdateStatus) => {
+      setStatus(status);
     });
     return () => {
       unsubscribe();
@@ -29,7 +28,7 @@ export const CheckForUpdatesButton = () => {
 
   return (
     <button
-      className="flex items-center gap-2 btn btn--outlined btn--super-compact"
+      className="btn btn--outlined btn--super-compact flex items-center gap-2"
       disabled={disabled}
       onClick={() => {
         window.main.manualUpdateCheck();
diff --git a/packages/insomnia/src/ui/components/codemirror/code-editor.tsx b/packages/insomnia/src/ui/components/codemirror/code-editor.tsx
index 64799eacfb..fec6b8af9f 100644
--- a/packages/insomnia/src/ui/components/codemirror/code-editor.tsx
+++ b/packages/insomnia/src/ui/components/codemirror/code-editor.tsx
@@ -2,7 +2,11 @@ import './base-imports';
 
 import classnames from 'classnames';
 import clone from 'clone';
-import CodeMirror, { type CodeMirrorLinkClickCallback, type EditorConfiguration, type ShowHintOptions } from 'codemirror';
+import CodeMirror, {
+  type CodeMirrorLinkClickCallback,
+  type EditorConfiguration,
+  type ShowHintOptions,
+} from 'codemirror';
 import type { GraphQLInfoOptions } from 'codemirror-graphql/info';
 import type { ModifiedGraphQLJumpOptions } from 'codemirror-graphql/jump';
 import deepEqual from 'deep-equal';
@@ -133,7 +137,6 @@ const normalizeMimeType = (mode?: string) => {
     return 'yaml';
   }
   return mimeType;
-
 };
 export interface CodeEditorHandle {
   setValue: (value: string) => void;
@@ -149,643 +152,718 @@ export interface CodeEditorHandle {
   indexFromPos: (pos?: CodeMirror.Position) => number;
   getDoc: () => CodeMirror.Doc | undefined;
 }
-export const CodeEditor = memo(forwardRef<CodeEditorHandle, CodeEditorProps>(({
-  autoPrettify,
-  className,
-  defaultValue,
-  dynamicHeight,
-  enableNunjucks,
-  filter,
-  filterHistory,
-  getAutocompleteConstants,
-  getAutocompleteSnippets,
-  hideGutters,
-  hideLineNumbers,
-  hintOptions,
-  id,
-  infoOptions,
-  jumpOptions,
-  lintOptions,
-  showPrettifyButton,
-  mode,
-  noLint,
-  noMatchBrackets,
-  noStyleActiveLine,
-  onFocus,
-  onBlur,
-  onChange,
-  onCursorActivity,
-  onPaste,
-  onClickLink,
-  pinToBottom,
-  placeholder,
-  readOnly,
-  style,
-  uniquenessKey,
-  updateFilter,
-}, ref) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const codeMirror = useRef<CodeMirror.EditorFromTextArea | null>(null);
-  const [originalCode, setOriginalCode] = useState('');
-  const {
-    settings,
-  } = useRootLoaderData();
-  const { isOwner, isEnterprisePlan } = usePlanData();
-  const indentSize = settings.editorIndentSize;
-  const indentWithTabs = shouldIndentWithTabs({ mode, indentWithTabs: settings.editorIndentWithTabs });
-  const indentChars = indentWithTabs ? '\t' : new Array((indentSize || TAB_SIZE) + 1).join(' ');
-  const extraKeys = useMemo(() => ({
-    'Ctrl-Q': (cm: CodeMirror.Editor) => cm.foldCode(cm.getCursor()),
-    [isMac() ? 'Cmd-/' : 'Ctrl-/']: 'toggleComment',
-    // Autocomplete
-    'Ctrl-Space': 'autocomplete',
-    // Change default find command from "find" to "findPersistent" so the
-    // search box stays open after pressing Enter
-    [isMac() ? 'Cmd-F' : 'Ctrl-F']: 'findPersistent',
-    [isMac() ? 'Shift-Cmd--' : 'Shift-Ctrl--']: 'foldAll',
-    [isMac() ? 'Shift-Cmd-=' : 'Shift-Ctrl-=']: 'unfoldAll',
-    'Shift-Tab': 'indentLess',
-    // Indent with tabs or spaces
-    // From https://github.com/codemirror/CodeMirror/issues/988#issuecomment-14921785
-    Tab: (cm: CodeMirror.Editor) => cm.somethingSelected() ? cm.indentSelection('add') : cm.replaceSelection(indentChars, 'end'),
-  }), [indentChars]);
-  const { handleRender, handleGetRenderContext } = useGatedNunjucks({ disabled: !enableNunjucks });
-
-  const maybePrettifyAndSetValue = useCallback((code?: string, forcePrettify?: boolean, filter?: string) => {
-    const prettifyXML = (code: string, filter?: string) => {
-      if (updateFilter && filter) {
-        try {
-          const results = queryXPath(code, filter);
-          code = `<result>${results.map(r => r.outer).join('\n')}</result>`;
-        } catch (err) {
-          // Failed to parse filter (that's ok)
-          code = `<error>${err.message}</error>`;
-        }
-      }
-      try {
-        return vkBeautify.xml(code, indentChars);
-      } catch (error) {
-        // Failed to parse so just return original
-        return code;
-      }
-    };
-    const prettifyJSON = (code: string, filter?: string) => {
-      try {
-        let jsonString = code;
-        if (updateFilter && filter) {
-          try {
-            const codeObj = JSON.parse(code);
-            const results = JSONPath({ json: codeObj, path: filter.trim() });
-            jsonString = JSON.stringify(results);
-          } catch (err) {
-            console.log('[jsonpath] Error: ', err);
-            jsonString = '[]';
-          }
-        }
-        return jsonPrettify(jsonString, indentChars, autoPrettify);
-      } catch (error) {
-        // That's Ok, just leave it
-        return code;
-      }
-    };
-    const prettifyEDN = (code: string) => {
-      try {
-        return ednPrettify(code);
-      } catch (error) {
-        return code;
-      }
-    };
-    if (typeof code !== 'string') {
-      console.warn('Code editor was passed non-string value', code);
-      return;
-    }
-    const shouldPrettify = forcePrettify || autoPrettify;
-    if (shouldPrettify) {
-      setOriginalCode(code);
-      if (mode?.includes('xml')) {
-        code = prettifyXML(code, filter);
-      } else if (mode?.includes('json')) {
-        code = prettifyJSON(code, filter);
-      } else if (mode?.includes('edn')) {
-        code = prettifyEDN(code);
-      }
-    }
-    // this prevents codeMirror from needlessly setting the same thing repeatedly (which has the effect of moving the user's cursor and resetting the viewport scroll: a bad user experience)
-    const currentCode = codeMirror.current?.getValue();
-    if (currentCode === code) {
-      return;
-    }
-    codeMirror.current?.setValue(code || '');
-  }, [autoPrettify, mode, indentChars, updateFilter]);
-
-  useDocBodyKeyboardShortcuts({
-    beautifyRequestBody: () => {
-      if (mode?.includes('json') || mode?.includes('xml')) {
-        maybePrettifyAndSetValue(codeMirror.current?.getValue());
-      }
-    },
-  });
-
-  // NOTE: maybe we don't need this anymore? Maybe not.
-  const persistState = useCallback(() => {
-    if (uniquenessKey && codeMirror.current) {
-      editorStates[uniquenessKey] = {
-        scroll: codeMirror.current.getScrollInfo(),
-        selections: codeMirror.current.listSelections(),
-        cursor: codeMirror.current.getCursor(),
-        history: codeMirror.current.getHistory(),
-        marks: codeMirror.current.getAllMarks()
-          .filter(mark => mark.__isFold)
-          .map((mark): Partial<CodeMirror.MarkerRange> => {
-            const markerRange = mark.find();
-            return markerRange && 'from' in markerRange ? markerRange : {
-              from: undefined,
-              to: undefined,
-            };
-          }),
-      };
-    }
-  }, [uniquenessKey, codeMirror]);
-
-  const initEditor = useCallback(() => {
-    if (!textAreaRef.current) {
-      return;
-    }
-
-    const showGuttersAndLineNumbers = !hideGutters && !hideLineNumbers;
-
-    const transformEnums = (tagDef: NunjucksParsedTag): NunjucksParsedTag[] => {
-      if (tagDef.args[0]?.type === 'enum') {
-        return tagDef.args[0].options?.map(option => {
-          const optionName = misc.fnOrString(option.displayName, tagDef.args);
-          const newDef = clone(tagDef);
-          newDef.displayName = `${tagDef.displayName} ⇒ ${optionName}`;
-          newDef.args[0].defaultValue = option.value;
-
-          return newDef;
-        }) || [];
-      }
-      return [tagDef];
-    };
-
-    const initialOptions: EditorConfiguration = {
-      lineNumbers: showGuttersAndLineNumbers,
-      placeholder: placeholder || '',
-      foldGutter: showGuttersAndLineNumbers,
-      autoRefresh: { delay: 2000 },
-      lineWrapping: settings.editorLineWrapping ?? true,
-      scrollbarStyle: 'native',
-      lint: !noLint && !readOnly,
-      matchBrackets: !noMatchBrackets,
-      autoCloseBrackets: true,
-      tabSize: indentSize || TAB_SIZE,
-      indentUnit: indentSize || TAB_SIZE,
-      hintOptions,
-      info: infoOptions,
-      viewportMargin: dynamicHeight ? Infinity : 30,
-      readOnly: !!readOnly,
-      selectionPointer: 'default',
-      jump: jumpOptions,
-      styleActiveLine: !noStyleActiveLine,
-      indentWithTabs,
-      showCursorWhenSelecting: false,
-      cursorScrollMargin: 12,
-      // Only set keyMap if we're not read-only. This is so things like ctrl-a work on read-only mode.
-      keyMap: !readOnly && settings.editorKeyMap ? settings.editorKeyMap : 'default',
-      extraKeys: CodeMirror.normalizeKeyMap(extraKeys),
-      gutters: showGuttersAndLineNumbers ? ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'] : [],
-      foldOptions: { widget: (from: CodeMirror.Position, to: CodeMirror.Position) => widget(codeMirror.current, from, to) },
-      mode: !handleRender ? normalizeMimeType(mode) : { name: 'nunjucks', baseMode: normalizeMimeType(mode) },
-      environmentAutocomplete: {
-        getVariables: async () => !handleGetRenderContext ? [] : (await handleGetRenderContext())?.keys || [],
-        getTags: async () => !handleGetRenderContext ? [] : (await getTagDefinitions()).map(transformEnums).flat(),
-        getConstants: getAutocompleteConstants,
-        getSnippets: getAutocompleteSnippets,
-        hotKeyRegistry: settings.hotKeyRegistry,
-        autocompleteDelay: settings.autocompleteDelay,
+export const CodeEditor = memo(
+  forwardRef<CodeEditorHandle, CodeEditorProps>(
+    (
+      {
+        autoPrettify,
+        className,
+        defaultValue,
+        dynamicHeight,
+        enableNunjucks,
+        filter,
+        filterHistory,
+        getAutocompleteConstants,
+        getAutocompleteSnippets,
+        hideGutters,
+        hideLineNumbers,
+        hintOptions,
+        id,
+        infoOptions,
+        jumpOptions,
+        lintOptions,
+        showPrettifyButton,
+        mode,
+        noLint,
+        noMatchBrackets,
+        noStyleActiveLine,
+        onFocus,
+        onBlur,
+        onChange,
+        onCursorActivity,
+        onPaste,
+        onClickLink,
+        pinToBottom,
+        placeholder,
+        readOnly,
+        style,
+        uniquenessKey,
+        updateFilter,
       },
-    };
-    codeMirror.current = CodeMirror.fromTextArea(textAreaRef.current, initialOptions);
-    codeMirror.current.on('beforeChange', (doc: CodeMirror.Editor, change: CodeMirror.EditorChangeCancellable) => {
-      const isGraphqlWithChange = doc.getOption('mode') === 'graphql' && change.text.length > 0;
-      if (isGraphqlWithChange) {
-        // Don't allow non-breaking spaces because they break the GraphQL syntax
-        change.update?.(change.from, change.to, change.text.map(normalizeIrregularWhitespace));
-      }
-      if (pinToBottom) {
-        const scrollInfo = doc.getScrollInfo();
-        const scrollPosition = scrollInfo.height - scrollInfo.clientHeight;
-        doc.scrollTo(0, scrollPosition);
-      }
+      ref,
+    ) => {
+      const inputRef = useRef<HTMLInputElement>(null);
+      const textAreaRef = useRef<HTMLTextAreaElement>(null);
+      const codeMirror = useRef<CodeMirror.EditorFromTextArea | null>(null);
+      const [originalCode, setOriginalCode] = useState('');
+      const { settings } = useRootLoaderData();
+      const { isOwner, isEnterprisePlan } = usePlanData();
+      const indentSize = settings.editorIndentSize;
+      const indentWithTabs = shouldIndentWithTabs({ mode, indentWithTabs: settings.editorIndentWithTabs });
+      const indentChars = indentWithTabs ? '\t' : new Array((indentSize || TAB_SIZE) + 1).join(' ');
+      const extraKeys = useMemo(
+        () => ({
+          'Ctrl-Q': (cm: CodeMirror.Editor) => cm.foldCode(cm.getCursor()),
+          [isMac() ? 'Cmd-/' : 'Ctrl-/']: 'toggleComment',
+          // Autocomplete
+          'Ctrl-Space': 'autocomplete',
+          // Change default find command from "find" to "findPersistent" so the
+          // search box stays open after pressing Enter
+          [isMac() ? 'Cmd-F' : 'Ctrl-F']: 'findPersistent',
+          [isMac() ? 'Shift-Cmd--' : 'Shift-Ctrl--']: 'foldAll',
+          [isMac() ? 'Shift-Cmd-=' : 'Shift-Ctrl-=']: 'unfoldAll',
+          'Shift-Tab': 'indentLess',
+          // Indent with tabs or spaces
+          // From https://github.com/codemirror/CodeMirror/issues/988#issuecomment-14921785
+          'Tab': (cm: CodeMirror.Editor) =>
+            cm.somethingSelected() ? cm.indentSelection('add') : cm.replaceSelection(indentChars, 'end'),
+        }),
+        [indentChars],
+      );
+      const { handleRender, handleGetRenderContext } = useGatedNunjucks({ disabled: !enableNunjucks });
 
-      if (onPaste) {
-        if (change.origin === 'paste' && change.update) {
-          const translatedText = onPaste(
-            change.text.join('\n')
-          ).split('\n');
+      const maybePrettifyAndSetValue = useCallback(
+        (code?: string, forcePrettify?: boolean, filter?: string) => {
+          const prettifyXML = (code: string, filter?: string) => {
+            if (updateFilter && filter) {
+              try {
+                const results = queryXPath(code, filter);
+                code = `<result>${results.map(r => r.outer).join('\n')}</result>`;
+              } catch (err) {
+                // Failed to parse filter (that's ok)
+                code = `<error>${err.message}</error>`;
+              }
+            }
+            try {
+              return vkBeautify.xml(code, indentChars);
+            } catch (error) {
+              // Failed to parse so just return original
+              return code;
+            }
+          };
+          const prettifyJSON = (code: string, filter?: string) => {
+            try {
+              let jsonString = code;
+              if (updateFilter && filter) {
+                try {
+                  const codeObj = JSON.parse(code);
+                  const results = JSONPath({ json: codeObj, path: filter.trim() });
+                  jsonString = JSON.stringify(results);
+                } catch (err) {
+                  console.log('[jsonpath] Error: ', err);
+                  jsonString = '[]';
+                }
+              }
+              return jsonPrettify(jsonString, indentChars, autoPrettify);
+            } catch (error) {
+              // That's Ok, just leave it
+              return code;
+            }
+          };
+          const prettifyEDN = (code: string) => {
+            try {
+              return ednPrettify(code);
+            } catch (error) {
+              return code;
+            }
+          };
+          if (typeof code !== 'string') {
+            console.warn('Code editor was passed non-string value', code);
+            return;
+          }
+          const shouldPrettify = forcePrettify || autoPrettify;
+          if (shouldPrettify) {
+            setOriginalCode(code);
+            if (mode?.includes('xml')) {
+              code = prettifyXML(code, filter);
+            } else if (mode?.includes('json')) {
+              code = prettifyJSON(code, filter);
+            } else if (mode?.includes('edn')) {
+              code = prettifyEDN(code);
+            }
+          }
+          // this prevents codeMirror from needlessly setting the same thing repeatedly (which has the effect of moving the user's cursor and resetting the viewport scroll: a bad user experience)
+          const currentCode = codeMirror.current?.getValue();
+          if (currentCode === code) {
+            return;
+          }
+          codeMirror.current?.setValue(code || '');
+        },
+        [autoPrettify, mode, indentChars, updateFilter],
+      );
 
-          change.update(
-            change.from,
-            change.to,
-            translatedText,
+      useDocBodyKeyboardShortcuts({
+        beautifyRequestBody: () => {
+          if (mode?.includes('json') || mode?.includes('xml')) {
+            maybePrettifyAndSetValue(codeMirror.current?.getValue());
+          }
+        },
+      });
+
+      // NOTE: maybe we don't need this anymore? Maybe not.
+      const persistState = useCallback(() => {
+        if (uniquenessKey && codeMirror.current) {
+          editorStates[uniquenessKey] = {
+            scroll: codeMirror.current.getScrollInfo(),
+            selections: codeMirror.current.listSelections(),
+            cursor: codeMirror.current.getCursor(),
+            history: codeMirror.current.getHistory(),
+            marks: codeMirror.current
+              .getAllMarks()
+              .filter(mark => mark.__isFold)
+              .map((mark): Partial<CodeMirror.MarkerRange> => {
+                const markerRange = mark.find();
+                return markerRange && 'from' in markerRange
+                  ? markerRange
+                  : {
+                      from: undefined,
+                      to: undefined,
+                    };
+              }),
+          };
+        }
+      }, [uniquenessKey, codeMirror]);
+
+      const initEditor = useCallback(() => {
+        if (!textAreaRef.current) {
+          return;
+        }
+
+        const showGuttersAndLineNumbers = !hideGutters && !hideLineNumbers;
+
+        const transformEnums = (tagDef: NunjucksParsedTag): NunjucksParsedTag[] => {
+          if (tagDef.args[0]?.type === 'enum') {
+            return (
+              tagDef.args[0].options?.map(option => {
+                const optionName = misc.fnOrString(option.displayName, tagDef.args);
+                const newDef = clone(tagDef);
+                newDef.displayName = `${tagDef.displayName} ⇒ ${optionName}`;
+                newDef.args[0].defaultValue = option.value;
+
+                return newDef;
+              }) || []
+            );
+          }
+          return [tagDef];
+        };
+
+        const initialOptions: EditorConfiguration = {
+          lineNumbers: showGuttersAndLineNumbers,
+          placeholder: placeholder || '',
+          foldGutter: showGuttersAndLineNumbers,
+          autoRefresh: { delay: 2000 },
+          lineWrapping: settings.editorLineWrapping ?? true,
+          scrollbarStyle: 'native',
+          lint: !noLint && !readOnly,
+          matchBrackets: !noMatchBrackets,
+          autoCloseBrackets: true,
+          tabSize: indentSize || TAB_SIZE,
+          indentUnit: indentSize || TAB_SIZE,
+          hintOptions,
+          info: infoOptions,
+          viewportMargin: dynamicHeight ? Infinity : 30,
+          readOnly: !!readOnly,
+          selectionPointer: 'default',
+          jump: jumpOptions,
+          styleActiveLine: !noStyleActiveLine,
+          indentWithTabs,
+          showCursorWhenSelecting: false,
+          cursorScrollMargin: 12,
+          // Only set keyMap if we're not read-only. This is so things like ctrl-a work on read-only mode.
+          keyMap: !readOnly && settings.editorKeyMap ? settings.editorKeyMap : 'default',
+          extraKeys: CodeMirror.normalizeKeyMap(extraKeys),
+          gutters: showGuttersAndLineNumbers
+            ? ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter']
+            : [],
+          foldOptions: {
+            widget: (from: CodeMirror.Position, to: CodeMirror.Position) => widget(codeMirror.current, from, to),
+          },
+          mode: !handleRender ? normalizeMimeType(mode) : { name: 'nunjucks', baseMode: normalizeMimeType(mode) },
+          environmentAutocomplete: {
+            getVariables: async () => (!handleGetRenderContext ? [] : (await handleGetRenderContext())?.keys || []),
+            getTags: async () =>
+              !handleGetRenderContext ? [] : (await getTagDefinitions()).map(transformEnums).flat(),
+            getConstants: getAutocompleteConstants,
+            getSnippets: getAutocompleteSnippets,
+            hotKeyRegistry: settings.hotKeyRegistry,
+            autocompleteDelay: settings.autocompleteDelay,
+          },
+        };
+        codeMirror.current = CodeMirror.fromTextArea(textAreaRef.current, initialOptions);
+        codeMirror.current.on('beforeChange', (doc: CodeMirror.Editor, change: CodeMirror.EditorChangeCancellable) => {
+          const isGraphqlWithChange = doc.getOption('mode') === 'graphql' && change.text.length > 0;
+          if (isGraphqlWithChange) {
+            // Don't allow non-breaking spaces because they break the GraphQL syntax
+            change.update?.(change.from, change.to, change.text.map(normalizeIrregularWhitespace));
+          }
+          if (pinToBottom) {
+            const scrollInfo = doc.getScrollInfo();
+            const scrollPosition = scrollInfo.height - scrollInfo.clientHeight;
+            doc.scrollTo(0, scrollPosition);
+          }
+
+          if (onPaste) {
+            if (change.origin === 'paste' && change.update) {
+              const translatedText = onPaste(change.text.join('\n')).split('\n');
+
+              change.update(change.from, change.to, translatedText);
+            }
+          }
+        });
+
+        codeMirror.current.on('change', (doc: CodeMirror.Editor) => {
+          if (pinToBottom) {
+            const scrollInfo = doc.getScrollInfo();
+            const scrollPosition = scrollInfo.height - scrollInfo.clientHeight;
+            doc.scrollTo(0, scrollPosition);
+          }
+        });
+
+        codeMirror.current.on('keydown', (doc: CodeMirror.Editor, event: KeyboardEvent) => {
+          const pressedKeyComb: KeyCombination = {
+            ctrl: event.ctrlKey,
+            alt: event.altKey,
+            shift: event.shiftKey,
+            meta: event.metaKey,
+            keyCode: event.keyCode,
+          };
+
+          const isUserDefinedKeyboardShortcut = isKeyCombinationInRegistry(pressedKeyComb, settings.hotKeyRegistry);
+          const isAutoCompleteBinding = isKeyCombinationInRegistry(pressedKeyComb, {
+            showAutocomplete: settings.hotKeyRegistry.showAutocomplete,
+          });
+          // Stop the editor from handling global keyboard shortcuts except for the autocomplete binding
+          const isShortcutButNotAutocomplete = isUserDefinedKeyboardShortcut && !isAutoCompleteBinding;
+
+          // Should not capture escape in order to exit modals
+          const isEscapeKey = event.code === 'Escape';
+
+          if (isShortcutButNotAutocomplete) {
+            // @ts-expect-error -- unsound property assignment
+            event.codemirrorIgnore = settings.editorKeyMap !== 'vim';
+            // Stop the editor from handling the escape key
+          } else if (isEscapeKey) {
+            // @ts-expect-error -- unsound property assignment
+            event.codemirrorIgnore = settings.editorKeyMap !== 'vim';
+          } else {
+            event.stopPropagation();
+
+            // Enable graphql completion if we're in that mode
+            if (doc.getOption('mode') === 'graphql') {
+              // Only operate on one-letter keys. This will filter out
+              // any special keys (Backspace, Enter, etc)
+              const isModifier = event.metaKey || event.ctrlKey || event.altKey || event.key.length > 1;
+              // You don't want to re-trigger the hint dropdown if it's already open
+              // for other reasons, like forcing its display with Ctrl+Space
+              const isDropdownActive = codeMirror.current?.isHintDropdownActive();
+              if ((isAutoCompleteBinding || !isModifier) && !isDropdownActive) {
+                doc.execCommand('autocomplete');
+              }
+            }
+          }
+        });
+
+        codeMirror.current.on('scroll', persistState);
+        codeMirror.current.on('fold', persistState);
+        codeMirror.current.on('unfold', persistState);
+        codeMirror.current.on('keyHandled', (_: CodeMirror.Editor, _keyName: string, event: Event) =>
+          event.stopPropagation(),
+        );
+        codeMirror.current.setCursor({ line: -1, ch: -1 });
+
+        // Actually set the value
+        maybePrettifyAndSetValue(defaultValue || '', false, filter);
+        // Clear history so we can't undo the initial set
+        codeMirror.current?.clearHistory();
+        // Setup nunjucks listeners
+        if (!readOnly && handleRender && !settings.nunjucksPowerUserMode) {
+          codeMirror.current?.enableNunjucksTags(
+            handleRender,
+            handleGetRenderContext,
+            settings.showVariableSourceAndValue,
+            id,
           );
         }
-      }
-    });
-
-    codeMirror.current.on('change', (doc: CodeMirror.Editor) => {
-      if (pinToBottom) {
-        const scrollInfo = doc.getScrollInfo();
-        const scrollPosition = scrollInfo.height - scrollInfo.clientHeight;
-        doc.scrollTo(0, scrollPosition);
-      }
-    });
-
-    codeMirror.current.on('keydown', (doc: CodeMirror.Editor, event: KeyboardEvent) => {
-      const pressedKeyComb: KeyCombination = {
-        ctrl: event.ctrlKey,
-        alt: event.altKey,
-        shift: event.shiftKey,
-        meta: event.metaKey,
-        keyCode: event.keyCode,
-      };
-
-      const isUserDefinedKeyboardShortcut = isKeyCombinationInRegistry(pressedKeyComb, settings.hotKeyRegistry);
-      const isAutoCompleteBinding = isKeyCombinationInRegistry(pressedKeyComb, {
-        'showAutocomplete': settings.hotKeyRegistry.showAutocomplete,
-      });
-      // Stop the editor from handling global keyboard shortcuts except for the autocomplete binding
-      const isShortcutButNotAutocomplete = isUserDefinedKeyboardShortcut && !isAutoCompleteBinding;
-
-      // Should not capture escape in order to exit modals
-      const isEscapeKey = event.code === 'Escape';
-
-      if (isShortcutButNotAutocomplete) {
-        // @ts-expect-error -- unsound property assignment
-        event.codemirrorIgnore = settings.editorKeyMap !== 'vim';
-        // Stop the editor from handling the escape key
-      } else if (isEscapeKey) {
-        // @ts-expect-error -- unsound property assignment
-        event.codemirrorIgnore = settings.editorKeyMap !== 'vim';
-      } else {
-        event.stopPropagation();
-
-        // Enable graphql completion if we're in that mode
-        if (doc.getOption('mode') === 'graphql') {
-          // Only operate on one-letter keys. This will filter out
-          // any special keys (Backspace, Enter, etc)
-          const isModifier = event.metaKey || event.ctrlKey || event.altKey || event.key.length > 1;
-          // You don't want to re-trigger the hint dropdown if it's already open
-          // for other reasons, like forcing its display with Ctrl+Space
-          const isDropdownActive = codeMirror.current?.isHintDropdownActive();
-          if ((isAutoCompleteBinding || !isModifier) && !isDropdownActive) {
-            doc.execCommand('autocomplete');
+        // Make URLs clickable
+        if (onClickLink) {
+          codeMirror.current.makeLinksClickable(onClickLink);
+        }
+        // Restore the state
+        if (uniquenessKey && editorStates[uniquenessKey]) {
+          const { scroll, selections, cursor, history, marks } = editorStates[uniquenessKey];
+          codeMirror.current.scrollTo(scroll.left, scroll.top);
+          codeMirror.current.setHistory(history);
+          // NOTE: These won't be visible unless the editor is focused
+          codeMirror.current.setCursor(cursor.line, cursor.ch, { scroll: false });
+          codeMirror.current.setSelections(selections, undefined, { scroll: false });
+          // Restore marks one-by-one
+          for (const { from, to } of marks || []) {
+            // @ts-expect-error -- type unsoundness
+            codeMirror.current.foldCode(from, to);
           }
         }
-      }
-    });
-
-    codeMirror.current.on('scroll', persistState);
-    codeMirror.current.on('fold', persistState);
-    codeMirror.current.on('unfold', persistState);
-    codeMirror.current.on('keyHandled', (_: CodeMirror.Editor, _keyName: string, event: Event) => event.stopPropagation());
-    codeMirror.current.setCursor({ line: -1, ch: -1 });
-
-    // Actually set the value
-    maybePrettifyAndSetValue(defaultValue || '', false, filter);
-    // Clear history so we can't undo the initial set
-    codeMirror.current?.clearHistory();
-    // Setup nunjucks listeners
-    if (!readOnly && handleRender && !settings.nunjucksPowerUserMode) {
-      codeMirror.current?.enableNunjucksTags(
-        handleRender,
-        handleGetRenderContext,
+        // settings.pluginsAllowElevatedAccess is not used here but we want to trigger this effect when it changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+      }, [
+        hideGutters,
+        hideLineNumbers,
+        placeholder,
+        settings.editorLineWrapping,
+        settings.editorKeyMap,
+        settings.hotKeyRegistry,
+        settings.autocompleteDelay,
+        settings.nunjucksPowerUserMode,
+        settings.pluginsAllowElevatedAccess,
         settings.showVariableSourceAndValue,
+        noLint,
+        readOnly,
+        noMatchBrackets,
+        indentSize,
+        hintOptions,
+        infoOptions,
+        dynamicHeight,
+        jumpOptions,
+        noStyleActiveLine,
+        indentWithTabs,
+        extraKeys,
+        handleRender,
+        mode,
+        getAutocompleteConstants,
+        getAutocompleteSnippets,
+        persistState,
+        maybePrettifyAndSetValue,
+        defaultValue,
+        filter,
+        onClickLink,
+        uniquenessKey,
+        handleGetRenderContext,
+        pinToBottom,
+        onPaste,
         id,
-      );
-    }
-    // Make URLs clickable
-    if (onClickLink) {
-      codeMirror.current.makeLinksClickable(onClickLink);
-    }
-    // Restore the state
-    if (uniquenessKey && editorStates[uniquenessKey]) {
-      const { scroll, selections, cursor, history, marks } = editorStates[uniquenessKey];
-      codeMirror.current.scrollTo(scroll.left, scroll.top);
-      codeMirror.current.setHistory(history);
-      // NOTE: These won't be visible unless the editor is focused
-      codeMirror.current.setCursor(cursor.line, cursor.ch, { scroll: false });
-      codeMirror.current.setSelections(selections, undefined, { scroll: false });
-      // Restore marks one-by-one
-      for (const { from, to } of marks || []) {
-        // @ts-expect-error -- type unsoundness
-        codeMirror.current.foldCode(from, to);
-      }
-    }
-    // settings.pluginsAllowElevatedAccess is not used here but we want to trigger this effect when it changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hideGutters, hideLineNumbers, placeholder, settings.editorLineWrapping, settings.editorKeyMap, settings.hotKeyRegistry, settings.autocompleteDelay, settings.nunjucksPowerUserMode, settings.pluginsAllowElevatedAccess, settings.showVariableSourceAndValue, noLint, readOnly, noMatchBrackets, indentSize, hintOptions, infoOptions, dynamicHeight, jumpOptions, noStyleActiveLine, indentWithTabs, extraKeys, handleRender, mode, getAutocompleteConstants, getAutocompleteSnippets, persistState, maybePrettifyAndSetValue, defaultValue, filter, onClickLink, uniquenessKey, handleGetRenderContext, pinToBottom, onPaste, id]);
+      ]);
 
-  const cleanUpEditor = useCallback(() => {
-    codeMirror.current?.toTextArea();
-    codeMirror.current?.closeHintDropdown();
-    codeMirror.current = null;
-  }, []);
+      const cleanUpEditor = useCallback(() => {
+        codeMirror.current?.toTextArea();
+        codeMirror.current?.closeHintDropdown();
+        codeMirror.current = null;
+      }, []);
 
-  useMount(() => {
-    initEditor();
-  });
-  useUnmount(() => {
-    persistState();
-    cleanUpEditor();
-  });
+      useMount(() => {
+        initEditor();
+      });
+      useUnmount(() => {
+        persistState();
+        cleanUpEditor();
+      });
 
-  const reinitialize = useCallback(() => {
-    cleanUpEditor();
-    initEditor();
-  }, [cleanUpEditor, initEditor]);
+      const reinitialize = useCallback(() => {
+        cleanUpEditor();
+        initEditor();
+      }, [cleanUpEditor, initEditor]);
 
-  useEditorRefresh(reinitialize);
+      useEditorRefresh(reinitialize);
 
-  useEffect(() => {
-    const fn = misc.debounce((doc: CodeMirror.Editor) => {
-      if (onChange) {
-        const value = doc.getValue()?.trim() || '';
-        // Disable linting if the document reaches a maximum size or is empty
-        const withinLintingThresholds = value.length > 0 && value.length < MAX_SIZE_FOR_LINTING;
-        const isLintPropOn = !noLint;
-        const shouldLint = withinLintingThresholds && isLintPropOn;
-        const lintOption = lintOptions || true;
+      useEffect(() => {
+        const fn = misc.debounce((doc: CodeMirror.Editor) => {
+          if (onChange) {
+            const value = doc.getValue()?.trim() || '';
+            // Disable linting if the document reaches a maximum size or is empty
+            const withinLintingThresholds = value.length > 0 && value.length < MAX_SIZE_FOR_LINTING;
+            const isLintPropOn = !noLint;
+            const shouldLint = withinLintingThresholds && isLintPropOn;
+            const lintOption = lintOptions || true;
+            try {
+              const newValue = shouldLint ? lintOption : false;
+              if (!deepEqual(codeMirror.current?.getOption('lint'), newValue)) {
+                tryToSetOption('lint', newValue);
+              }
+            } catch (err) {
+              console.log('[codemirror] Failed to set CodeMirror option', err.message);
+            }
+            onChange(doc.getValue() || '');
+            setOriginalCode(doc.getValue() || '');
+          }
+        }, DEBOUNCE_MILLIS);
+
+        codeMirror.current?.on('changes', fn);
+        return () => codeMirror.current?.off('changes', fn);
+      }, [lintOptions, noLint, onChange]);
+
+      useEffect(() => {
+        const handleOnBlur = (_: CodeMirror.Editor, e: FocusEvent) => onBlur?.(e);
+        codeMirror.current?.on('blur', handleOnBlur);
+        return () => codeMirror.current?.off('blur', handleOnBlur);
+      }, [onBlur]);
+
+      useEffect(() => {
+        const handleOnFocus = (_: CodeMirror.Editor, e: FocusEvent) => onFocus?.(e, _);
+        codeMirror.current?.on('focus', handleOnFocus);
+        return () => codeMirror.current?.off('focus', handleOnFocus);
+      }, [onFocus]);
+
+      const tryToSetOption = (key: keyof EditorConfiguration, value: any) => {
         try {
-          const newValue = shouldLint ? lintOption : false;
-          if (!deepEqual(codeMirror.current?.getOption('lint'), newValue)) {
-            tryToSetOption('lint', newValue);
-          }
+          codeMirror.current?.setOption(key, value);
         } catch (err) {
-          console.log('[codemirror] Failed to set CodeMirror option', err.message);
+          console.log('[codemirror] Failed to set CodeMirror option', err.message, { key, value });
         }
-        onChange(doc.getValue() || '');
-        setOriginalCode(doc.getValue() || '');
-      }
-    }, DEBOUNCE_MILLIS);
+      };
+      useEffect(() => {
+        const unsubscribe = window.main.on(
+          'nunjucks-context-menu-command',
+          (_, { key, tag, nunjucksTag, needsEnterprisePlan, displayName }) => {
+            if (id === key) {
+              if (needsEnterprisePlan && !isEnterprisePlan) {
+                // show modal if current user is not an enteprise user and the command is an enterprise feature
+                showModal(UpgradeModal, {
+                  newPlan: 'enterprise',
+                  featureName: displayName,
+                  isOwner,
+                });
+                return;
+              }
+              if (nunjucksTag) {
+                const { type, template, range } = nunjucksTag as nunjucksTagContextMenuOptions;
+                if (type === 'edit') {
+                  showModal(NunjucksModal, {
+                    template: template,
+                    onDone: (template: string | null) => {
+                      const { from, to } = range;
+                      codeMirror.current?.replaceRange(template!, from, to);
+                    },
+                  });
+                } else if (type === 'delete') {
+                  const { from, to } = range;
+                  codeMirror.current?.replaceRange('', from, to);
+                } else {
+                  return;
+                }
+              } else {
+                codeMirror.current?.replaceSelection(tag);
+              }
+            }
+          },
+        );
+        return () => {
+          unsubscribe();
+        };
+      }, [id, isEnterprisePlan, isOwner]);
+      useEffect(() => tryToSetOption('hintOptions', hintOptions), [hintOptions]);
+      useEffect(() => tryToSetOption('info', infoOptions), [infoOptions]);
+      useEffect(() => tryToSetOption('jump', jumpOptions), [jumpOptions]);
+      // This line will trigger codeMirror lint
+      useEffect(() => tryToSetOption('lint', lintOptions), [lintOptions]);
+      useEffect(
+        () =>
+          tryToSetOption(
+            'mode',
+            !handleRender ? normalizeMimeType(mode) : { name: 'nunjucks', baseMode: normalizeMimeType(mode) },
+          ),
+        [handleRender, mode],
+      );
 
-    codeMirror.current?.on('changes', fn);
-    return () => codeMirror.current?.off('changes', fn);
-  }, [lintOptions, noLint, onChange]);
+      useImperativeHandle(
+        ref,
+        () => ({
+          setValue: value => codeMirror.current?.setValue(value),
+          getValue: () => codeMirror.current?.getValue() || '',
+          selectAll: () =>
+            codeMirror.current?.setSelection({ line: 0, ch: 0 }, { line: codeMirror.current.lineCount(), ch: 0 }),
+          focus: () => codeMirror.current?.focus(),
+          scrollToSelection: (chStart: number, chEnd: number, lineStart: number, lineEnd: number) => {
+            codeMirror.current?.setSelection({ line: lineStart, ch: chStart }, { line: lineEnd, ch: chEnd });
+            // If sizing permits, position selection just above center
+            codeMirror.current?.scrollIntoView({ line: lineStart, ch: chStart }, window.innerHeight / 2 - 100);
+          },
+          focusEnd: () => {
+            if (codeMirror.current && !codeMirror.current.hasFocus()) {
+              codeMirror.current.focus();
+            }
+            codeMirror.current?.getDoc()?.setCursor(codeMirror.current.getDoc().lineCount(), 0);
+          },
+          getCursor: () => {
+            return codeMirror.current?.getCursor();
+          },
+          setCursorLine: (lineNumber: number) => {
+            codeMirror.current?.setCursor(lineNumber);
+          },
+          tryToSetOption,
+          hasFocus: () => codeMirror.current?.hasFocus() as boolean,
+          indexFromPos: (pos?: CodeMirror.Position) => (pos ? codeMirror.current?.indexFromPos(pos) || 0 : 0),
+          getDoc: () => codeMirror.current?.getDoc(),
+        }),
+        [],
+      );
 
-  useEffect(() => {
-    const handleOnBlur = (_: CodeMirror.Editor, e: FocusEvent) => onBlur?.(e);
-    codeMirror.current?.on('blur', handleOnBlur);
-    return () => codeMirror.current?.off('blur', handleOnBlur);
-  }, [onBlur]);
+      useEffect(() => {
+        const handleCursorActivity = (doc: CodeMirror.Editor) => {
+          onCursorActivity?.(doc);
+        };
 
-  useEffect(() => {
-    const handleOnFocus = (_: CodeMirror.Editor, e: FocusEvent) => onFocus?.(e, _);
-    codeMirror.current?.on('focus', handleOnFocus);
-    return () => codeMirror.current?.off('focus', handleOnFocus);
-  }, [onFocus]);
+        const handleFocus = (_: CodeMirror.Editor, event: Event) => {
+          onFocus?.(event);
+        };
+        codeMirror.current?.on('cursorActivity', handleCursorActivity);
 
-  const tryToSetOption = (key: keyof EditorConfiguration, value: any) => {
-    try {
-      codeMirror.current?.setOption(key, value);
-    } catch (err) {
-      console.log('[codemirror] Failed to set CodeMirror option', err.message, { key, value });
-    }
-  };
-  useEffect(() => {
-    const unsubscribe = window.main.on('nunjucks-context-menu-command', (_, { key, tag, nunjucksTag, needsEnterprisePlan, displayName }) => {
-      if (id === key) {
-        if (needsEnterprisePlan && !isEnterprisePlan) {
-          // show modal if current user is not an enteprise user and the command is an enterprise feature
-          showModal(UpgradeModal, {
-            newPlan: 'enterprise',
-            featureName: displayName,
-            isOwner,
-          });
-          return;
-        }
-        if (nunjucksTag) {
-          const { type, template, range } = nunjucksTag as nunjucksTagContextMenuOptions;
-          if (type === 'edit') {
-            showModal(NunjucksModal, {
-              template: template,
-              onDone: (template: string | null) => {
-                const { from, to } = range;
-                codeMirror.current?.replaceRange(template!, from, to);
-              },
-            });
-          } else if (type === 'delete') {
-            const { from, to } = range;
-            codeMirror.current?.replaceRange('', from, to);
-          } else {
-            return
-          }
-        } else {
-          codeMirror.current?.replaceSelection(tag);
-        }
-      }
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [id, isEnterprisePlan, isOwner]);
-  useEffect(() => tryToSetOption('hintOptions', hintOptions), [hintOptions]);
-  useEffect(() => tryToSetOption('info', infoOptions), [infoOptions]);
-  useEffect(() => tryToSetOption('jump', jumpOptions), [jumpOptions]);
-  // This line will trigger codeMirror lint
-  useEffect(() => tryToSetOption('lint', lintOptions), [lintOptions]);
-  useEffect(() => tryToSetOption('mode', !handleRender ? normalizeMimeType(mode) : { name: 'nunjucks', baseMode: normalizeMimeType(mode) }), [handleRender, mode]);
+        codeMirror.current?.on('focus', handleFocus);
 
-  useImperativeHandle(ref, () => ({
-    setValue: value => codeMirror.current?.setValue(value),
-    getValue: () => codeMirror.current?.getValue() || '',
-    selectAll: () => codeMirror.current?.setSelection({ line: 0, ch: 0 }, { line: codeMirror.current.lineCount(), ch: 0 }),
-    focus: () => codeMirror.current?.focus(),
-    scrollToSelection: (chStart: number, chEnd: number, lineStart: number, lineEnd: number) => {
-      codeMirror.current?.setSelection({ line: lineStart, ch: chStart }, { line: lineEnd, ch: chEnd });
-      // If sizing permits, position selection just above center
-      codeMirror.current?.scrollIntoView({ line: lineStart, ch: chStart }, window.innerHeight / 2 - 100);
-    },
-    focusEnd: () => {
-      if (codeMirror.current && !codeMirror.current.hasFocus()) {
-        codeMirror.current.focus();
-      }
-      codeMirror.current?.getDoc()?.setCursor(codeMirror.current.getDoc().lineCount(), 0);
-    },
-    getCursor: () => {
-      return codeMirror.current?.getCursor();
-    },
-    setCursorLine: (lineNumber: number) => {
-      codeMirror.current?.setCursor(lineNumber);
-    },
-    tryToSetOption,
-    hasFocus: () => codeMirror.current?.hasFocus() as boolean,
-    indexFromPos: (pos?: CodeMirror.Position) => pos ? codeMirror.current?.indexFromPos(pos) || 0 : 0,
-    getDoc: () => codeMirror.current?.getDoc(),
-  }), []);
+        return () => {
+          codeMirror.current?.off('cursorActivity', handleCursorActivity);
+          codeMirror.current?.off('focus', handleFocus);
+        };
+      }, [onCursorActivity, onFocus]);
 
-  useEffect(() => {
-    const handleCursorActivity = (doc: CodeMirror.Editor) => {
-      onCursorActivity?.(doc);
-    };
-
-    const handleFocus = (_: CodeMirror.Editor, event: Event) => {
-      onFocus?.(event);
-    };
-    codeMirror.current?.on('cursorActivity', handleCursorActivity);
-
-    codeMirror.current?.on('focus', handleFocus);
-
-    return () => {
-      codeMirror.current?.off('cursorActivity', handleCursorActivity);
-      codeMirror.current?.off('focus', handleFocus);
-    };
-  }, [onCursorActivity, onFocus]);
-
-  const showFilter = readOnly && (mode?.includes('json') || mode?.includes('xml'));
-  const showPrettify = showPrettifyButton && mode?.includes('json') || mode?.includes('xml');
-
-  return (
-    <div
-      className={classnames(className, {
-        editor: true,
-        'editor--dynamic-height': dynamicHeight,
-        'editor--readonly': readOnly,
-      })}
-      style={style}
-      data-editor-type="text"
-      data-testid="CodeEditor"
-      onContextMenu={event => {
-        if (readOnly || !enableNunjucks) {
-          return;
-        }
-        event.preventDefault();
-        const target = event.target as HTMLElement;
-        // right click on nunjucks tag
-        if (target?.classList?.contains('nunjucks-tag')) {
-          const { clientX, clientY } = event;
-          const nunjucksTag = extractNunjucksTagFromCoords({ left: clientX, top: clientY }, codeMirror);
-          if (nunjucksTag) {
-            // show context menu for nunjucks tag
-            window.main.showNunjucksContextMenu({ key: id, nunjucksTag });
-          }
-        } else {
-          window.main.showNunjucksContextMenu({ key: id });
-        }
-      }}
-    >
-      <div
-        className={classnames('editor__container', 'input', className)}
-        style={{ fontSize: `${settings.editorFontSize}px` }}
-      >
-        <textarea
-          id={id}
-          ref={textAreaRef}
-          style={{ display: 'none' }}
-          readOnly={readOnly}
-          autoComplete="off"
-          defaultValue=""
-        />
-      </div>
-      {
-        showFilter || showPrettify ? (
-          <div key={uniquenessKey} className="flex w-full items-center border-solid border-t border-[--hl-md] h-[--line-height-sm] text-[--font-size-sm]">
-            {showFilter ?
-              (<input
-                ref={inputRef}
-                key="filter"
-                type="text"
-                className='flex-1 pl-3'
-                title="Filter response body"
-                defaultValue={filter || ''}
-                placeholder={mode?.includes('json') ? '$.store.books[*].author' : '/store/books/author'}
-                onKeyDown={createKeybindingsHandler({
-                  'Enter': () => {
-                    const filter = inputRef.current?.value;
-                    if (updateFilter) {
-                      updateFilter(filter || '');
-                    }
-                    maybePrettifyAndSetValue(originalCode, false, filter);
-                  },
-                })}
-                onChange={e => {
-                  if (e.target.value === '') {
-                    if (updateFilter) {
-                      updateFilter('');
-                    }
-                    maybePrettifyAndSetValue(originalCode, false);
-                  }
-                }}
-              />) : null}
-            <Toolbar className="flex items-center h-full">
-              {showFilter && filterHistory && filterHistory.length > 0 && (
-                <MenuTrigger>
-                  <Button
-                    aria-label="Filter History"
-                    className="flex items-center justify-center h-full aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                  >
-                    <Icon icon="clock" />
-                  </Button>
-                  <Popover className="min-w-max overflow-y-hidden flex flex-col">
-                    <Menu
-                      aria-label="Filter history menu"
-                      selectionMode="single"
-                      onAction={key => {
-                        const index = Number(key);
-                        const filter = filterHistory[index];
-                        if (inputRef.current) {
-                          inputRef.current.value = filter;
-                        }
-                        if (updateFilter) {
-                          updateFilter(filter);
-                        }
-                        maybePrettifyAndSetValue(originalCode, false, filter);
-                      }}
-                      items={filterHistory.map((filter, index) => ({
-                        id: filter,
-                        name: filter,
-                        key: index,
-                      }))}
-                      className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
-                    >
-                      {item => (
-                        <MenuItem
-                          className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                          aria-label={item.name}
-                        >
-                          <span>{item.name}</span>
-                        </MenuItem>
-                      )}
-                    </Menu>
-                  </Popover>
-                </MenuTrigger>
-              )}
+      const showFilter = readOnly && (mode?.includes('json') || mode?.includes('xml'));
+      const showPrettify = (showPrettifyButton && mode?.includes('json')) || mode?.includes('xml');
 
+      return (
+        <div
+          className={classnames(className, {
+            'editor': true,
+            'editor--dynamic-height': dynamicHeight,
+            'editor--readonly': readOnly,
+          })}
+          style={style}
+          data-editor-type="text"
+          data-testid="CodeEditor"
+          onContextMenu={event => {
+            if (readOnly || !enableNunjucks) {
+              return;
+            }
+            event.preventDefault();
+            const target = event.target as HTMLElement;
+            // right click on nunjucks tag
+            if (target?.classList?.contains('nunjucks-tag')) {
+              const { clientX, clientY } = event;
+              const nunjucksTag = extractNunjucksTagFromCoords({ left: clientX, top: clientY }, codeMirror);
+              if (nunjucksTag) {
+                // show context menu for nunjucks tag
+                window.main.showNunjucksContextMenu({ key: id, nunjucksTag });
+              }
+            } else {
+              window.main.showNunjucksContextMenu({ key: id });
+            }
+          }}
+        >
+          <div
+            className={classnames('editor__container', 'input', className)}
+            style={{ fontSize: `${settings.editorFontSize}px` }}
+          >
+            <textarea
+              id={id}
+              ref={textAreaRef}
+              style={{ display: 'none' }}
+              readOnly={readOnly}
+              autoComplete="off"
+              defaultValue=""
+            />
+          </div>
+          {showFilter || showPrettify ? (
+            <div
+              key={uniquenessKey}
+              className="flex h-[--line-height-sm] w-full items-center border-t border-solid border-[--hl-md] text-[--font-size-sm]"
+            >
               {showFilter ? (
-                <Button key="help" className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all" onPress={() => showModal(FilterHelpModal, { isJSON: Boolean(mode?.includes('json')) })}>
-                  <i className="fa fa-question-circle" />
-                </Button>
-              ) : null}
-              {showPrettify ? (
-                <Button
-                  key="prettify"
-                  className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
-                  aria-label="Auto-format request body whitespace"
-                  onPress={() => {
-                    if (mode?.includes('json') || mode?.includes('xml')) {
-                      maybePrettifyAndSetValue(codeMirror.current?.getValue(), true);
+                <input
+                  ref={inputRef}
+                  key="filter"
+                  type="text"
+                  className="flex-1 pl-3"
+                  title="Filter response body"
+                  defaultValue={filter || ''}
+                  placeholder={mode?.includes('json') ? '$.store.books[*].author' : '/store/books/author'}
+                  onKeyDown={createKeybindingsHandler({
+                    Enter: () => {
+                      const filter = inputRef.current?.value;
+                      if (updateFilter) {
+                        updateFilter(filter || '');
+                      }
+                      maybePrettifyAndSetValue(originalCode, false, filter);
+                    },
+                  })}
+                  onChange={e => {
+                    if (e.target.value === '') {
+                      if (updateFilter) {
+                        updateFilter('');
+                      }
+                      maybePrettifyAndSetValue(originalCode, false);
                     }
                   }}
-                >
-                  Beautify {mode?.includes('json') ? 'JSON' : mode?.includes('xml') ? 'XML' : ''}
-                </Button>
+                />
               ) : null}
-            </Toolbar>
-          </div>
-        ) : null
-      }
-    </div >
-  );
-}));
+              <Toolbar className="flex h-full items-center">
+                {showFilter && filterHistory && filterHistory.length > 0 && (
+                  <MenuTrigger>
+                    <Button
+                      aria-label="Filter History"
+                      className="flex aspect-square h-full items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                    >
+                      <Icon icon="clock" />
+                    </Button>
+                    <Popover className="flex min-w-max flex-col overflow-y-hidden">
+                      <Menu
+                        aria-label="Filter history menu"
+                        selectionMode="single"
+                        onAction={key => {
+                          const index = Number(key);
+                          const filter = filterHistory[index];
+                          if (inputRef.current) {
+                            inputRef.current.value = filter;
+                          }
+                          if (updateFilter) {
+                            updateFilter(filter);
+                          }
+                          maybePrettifyAndSetValue(originalCode, false, filter);
+                        }}
+                        items={filterHistory.map((filter, index) => ({
+                          id: filter,
+                          name: filter,
+                          key: index,
+                        }))}
+                        className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
+                      >
+                        {item => (
+                          <MenuItem
+                            className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                            aria-label={item.name}
+                          >
+                            <span>{item.name}</span>
+                          </MenuItem>
+                        )}
+                      </Menu>
+                    </Popover>
+                  </MenuTrigger>
+                )}
+
+                {showFilter ? (
+                  <Button
+                    key="help"
+                    className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                    onPress={() => showModal(FilterHelpModal, { isJSON: Boolean(mode?.includes('json')) })}
+                  >
+                    <i className="fa fa-question-circle" />
+                  </Button>
+                ) : null}
+                {showPrettify ? (
+                  <Button
+                    key="prettify"
+                    className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                    aria-label="Auto-format request body whitespace"
+                    onPress={() => {
+                      if (mode?.includes('json') || mode?.includes('xml')) {
+                        maybePrettifyAndSetValue(codeMirror.current?.getValue(), true);
+                      }
+                    }}
+                  >
+                    Beautify {mode?.includes('json') ? 'JSON' : mode?.includes('xml') ? 'XML' : ''}
+                  </Button>
+                ) : null}
+              </Toolbar>
+            </div>
+          ) : null}
+        </div>
+      );
+    },
+  ),
+);
 CodeEditor.displayName = 'CodeEditor';
diff --git a/packages/insomnia/src/ui/components/codemirror/extensions/autocomplete.ts b/packages/insomnia/src/ui/components/codemirror/extensions/autocomplete.ts
index f6f7a4a824..41e25de9f8 100644
--- a/packages/insomnia/src/ui/components/codemirror/extensions/autocomplete.ts
+++ b/packages/insomnia/src/ui/components/codemirror/extensions/autocomplete.ts
@@ -56,173 +56,173 @@ CodeMirror.defineExtension('closeHintDropdown', function (this: CodeMirror.Edito
   this.state.completionActive?.close();
 });
 
-CodeMirror.defineOption('environmentAutocomplete', null, (cm: CodeMirror.Editor, options: EnvironmentAutocompleteOptions) => {
-  if (!options) {
-    return;
-  }
-
-  async function completeAfter(cm: CodeMirror.Editor, callback?: () => boolean, showAllOnNoMatch = false) {
-    // Bail early if didn't match the callback test
-    if (callback && !callback()) {
+CodeMirror.defineOption(
+  'environmentAutocomplete',
+  null,
+  (cm: CodeMirror.Editor, options: EnvironmentAutocompleteOptions) => {
+    if (!options) {
       return;
     }
 
-    if (!cm.hasFocus()) {
-      return;
-    }
+    async function completeAfter(cm: CodeMirror.Editor, callback?: () => boolean, showAllOnNoMatch = false) {
+      // Bail early if didn't match the callback test
+      if (callback && !callback()) {
+        return;
+      }
 
-    // Bail early if completions are showing already
-    if (cm.isHintDropdownActive()) {
-      return;
-    }
+      if (!cm.hasFocus()) {
+        return;
+      }
 
-    const hintsContainer = document.querySelector<HTMLElement>('#hints-container');
+      // Bail early if completions are showing already
+      if (cm.isHintDropdownActive()) {
+        return;
+      }
 
-    if (!hintsContainer) {
-      console.warn('Hints container not found');
-      throw new Error('Hints container not found');
-    }
+      const hintsContainer = document.querySelector<HTMLElement>('#hints-container');
 
-    const constants = options.getConstants ? await options.getConstants() : null;
-    const variables = options.getVariables ? await options.getVariables() : null;
-    const snippets = options.getSnippets ? await options.getSnippets() : null;
-    const tags = options.getTags ? await options.getTags() : null;
-    // Actually show the hint
-    cm.showHint({
-      // Insomnia-specific options
-      constants: constants || [],
-      variables: variables || [],
-      snippets: snippets || [],
-      tags: tags || [],
-      showAllOnNoMatch,
-      // Codemirror native options
-      hint,
-      container: hintsContainer,
-      closeCharacters: COMPLETION_CLOSE_KEYS,
-      completeSingle: false,
-      extraKeys: {
-        Tab: (_cm, widget) => {
-          // Override default behavior and don't select hint on Tab
-          widget.close();
-          return CodeMirror.Pass;
+      if (!hintsContainer) {
+        console.warn('Hints container not found');
+        throw new Error('Hints container not found');
+      }
+
+      const constants = options.getConstants ? await options.getConstants() : null;
+      const variables = options.getVariables ? await options.getVariables() : null;
+      const snippets = options.getSnippets ? await options.getSnippets() : null;
+      const tags = options.getTags ? await options.getTags() : null;
+      // Actually show the hint
+      cm.showHint({
+        // Insomnia-specific options
+        constants: constants || [],
+        variables: variables || [],
+        snippets: snippets || [],
+        tags: tags || [],
+        showAllOnNoMatch,
+        // Codemirror native options
+        hint,
+        container: hintsContainer,
+        closeCharacters: COMPLETION_CLOSE_KEYS,
+        completeSingle: false,
+        extraKeys: {
+          Tab: (_cm, widget) => {
+            // Override default behavior and don't select hint on Tab
+            widget.close();
+            return CodeMirror.Pass;
+          },
         },
-      },
-      // Good for debugging
-      // closeOnUnfocus: false,
-    });
-  }
+        // Good for debugging
+        // closeOnUnfocus: false,
+      });
+    }
 
-  function completeIfInVariableName(cm: CodeMirror.Editor) {
-    completeAfter(cm, () => {
-      const cur = cm.getCursor();
-      const pos = CodeMirror.Pos(cur.line, cur.ch - MAX_HINT_LOOK_BACK);
-      const range = cm.getRange(pos, cur);
-
-      return COMPLETE_AFTER_WORD.test(range);
-    });
-    return CodeMirror.Pass;
-  }
-
-  function completeIfAfterTagOrVarOpen(cm: CodeMirror.Editor) {
-    completeAfter(
-      cm,
-      () => {
+    function completeIfInVariableName(cm: CodeMirror.Editor) {
+      completeAfter(cm, () => {
         const cur = cm.getCursor();
         const pos = CodeMirror.Pos(cur.line, cur.ch - MAX_HINT_LOOK_BACK);
         const range = cm.getRange(pos, cur);
 
-        return COMPLETE_AFTER_CURLIES.test(range);
+        return COMPLETE_AFTER_WORD.test(range);
+      });
+      return CodeMirror.Pass;
+    }
+
+    function completeIfAfterTagOrVarOpen(cm: CodeMirror.Editor) {
+      completeAfter(
+        cm,
+        () => {
+          const cur = cm.getCursor();
+          const pos = CodeMirror.Pos(cur.line, cur.ch - MAX_HINT_LOOK_BACK);
+          const range = cm.getRange(pos, cur);
+
+          return COMPLETE_AFTER_CURLIES.test(range);
+        },
+        true,
+      );
+      return CodeMirror.Pass;
+    }
+
+    function completeForce(cm: CodeMirror.Editor) {
+      completeAfter(cm, undefined, true);
+      return CodeMirror.Pass;
+    }
+
+    function setupKeyMap(
+      cm: CodeMirror.Editor,
+      {
+        completeIfAfterTagOrVarOpen,
+        completeForce,
+      }: {
+        completeIfAfterTagOrVarOpen: (cm: CodeMirror.Editor) => void | typeof CodeMirror.Pass;
+        completeForce: (cm: CodeMirror.Editor) => void | typeof CodeMirror.Pass;
       },
-      true,
-    );
-    return CodeMirror.Pass;
-  }
+    ) {
+      // Remove keymap if we're already added it
+      cm.removeKeyMap('autocomplete-keymap');
 
-  function completeForce(cm: CodeMirror.Editor) {
-    completeAfter(cm, undefined, true);
-    return CodeMirror.Pass;
-  }
+      const keyBindings = options.hotKeyRegistry.showAutocomplete;
+      const keyCombs = getPlatformKeyCombinations(keyBindings);
 
-  function setupKeyMap(
-    cm: CodeMirror.Editor,
-    {
-      completeIfAfterTagOrVarOpen,
-      completeForce,
-    }: {
-      completeIfAfterTagOrVarOpen: (
-        cm: CodeMirror.Editor
-      ) => void | typeof CodeMirror.Pass;
-      completeForce: (
-        cm: CodeMirror.Editor
-      ) => void | typeof CodeMirror.Pass;
-    }
-  ) {
-    // Remove keymap if we're already added it
-    cm.removeKeyMap('autocomplete-keymap');
+      const keymap: CodeMirror.KeyMap = {
+        'name': 'autocomplete-keymap',
+        "' '": completeIfAfterTagOrVarOpen,
+      };
 
-    const keyBindings = options.hotKeyRegistry.showAutocomplete;
-    const keyCombs = getPlatformKeyCombinations(keyBindings);
+      // Construct valid codemirror key names from KeyCombination items. The order (Shift-Cmd-Ctrl-Alt) of the modifier is important https://codemirror.net/doc/manual.html#keymaps
+      for (const keyComb of keyCombs) {
+        const alt = keyComb.alt ? 'Alt-' : '';
+        const ctrl = keyComb.ctrl ? 'Ctrl-' : '';
+        // Cmd- is used to register the meta key of all platforms by CodeMirror
+        const meta = keyComb.meta ? 'Cmd-' : '';
+        const shift = keyComb.shift ? 'Shift-' : '';
+        const keyname = CodeMirror.keyNames[keyComb.keyCode];
 
-    const keymap: CodeMirror.KeyMap = {
-      name: 'autocomplete-keymap',
-      "' '": completeIfAfterTagOrVarOpen,
-    };
+        const key = `${shift}${meta}${ctrl}${alt}${keyname}`;
+        keymap[key] = completeForce;
+      }
 
-    // Construct valid codemirror key names from KeyCombination items. The order (Shift-Cmd-Ctrl-Alt) of the modifier is important https://codemirror.net/doc/manual.html#keymaps
-    for (const keyComb of keyCombs) {
-      const alt = keyComb.alt ? 'Alt-' : '';
-      const ctrl = keyComb.ctrl ? 'Ctrl-' : '';
-      // Cmd- is used to register the meta key of all platforms by CodeMirror
-      const meta = keyComb.meta ? 'Cmd-' : '';
-      const shift = keyComb.shift ? 'Shift-' : '';
-      const keyname = CodeMirror.keyNames[keyComb.keyCode];
-
-      const key = `${shift}${meta}${ctrl}${alt}${keyname}`;
-      keymap[key] = completeForce;
+      cm.addKeyMap(keymap);
     }
 
-    cm.addKeyMap(keymap);
-  }
+    let keydownTimeoutHandle: NodeJS.Timeout | null = null;
+    cm.on('keydown', (cm: CodeMirror.Editor, event) => {
+      // Close autocomplete on Escape if it's open
+      if (cm.isHintDropdownActive() && event.key === 'Escape') {
+        if (!cm.state.completionActive) {
+          return;
+        }
 
-  let keydownTimeoutHandle: NodeJS.Timeout | null = null;
-  cm.on('keydown', (cm: CodeMirror.Editor, event) => {
-    // Close autocomplete on Escape if it's open
-    if (cm.isHintDropdownActive() && event.key === 'Escape') {
-      if (!cm.state.completionActive) {
+        event.preventDefault();
+        event.stopPropagation();
+        cm.state.completionActive.close();
+      }
+
+      // Only operate on one-letter keys. This will filter out
+      // any special keys (Backspace, Enter, etc)
+      if (event.metaKey || event.ctrlKey || event.altKey || event.key.length > 1) {
         return;
       }
 
-      event.preventDefault();
-      event.stopPropagation();
-      cm.state.completionActive.close();
-    }
+      if (keydownTimeoutHandle !== null) {
+        clearTimeout(keydownTimeoutHandle);
+      }
 
-    // Only operate on one-letter keys. This will filter out
-    // any special keys (Backspace, Enter, etc)
-    if (event.metaKey || event.ctrlKey || event.altKey || event.key.length > 1) {
-      return;
-    }
+      if (options.autocompleteDelay > 0) {
+        keydownTimeoutHandle = setTimeout(() => {
+          completeIfInVariableName(cm);
+        }, options.autocompleteDelay);
+      }
+    });
 
-    if (keydownTimeoutHandle !== null) {
-      clearTimeout(keydownTimeoutHandle);
-    }
+    // Clear timeout if we already closed the completion
+    cm.on('endCompletion', () => {
+      if (keydownTimeoutHandle !== null) {
+        clearTimeout(keydownTimeoutHandle);
+      }
+    });
 
-    if (options.autocompleteDelay > 0) {
-      keydownTimeoutHandle = setTimeout(() => {
-        completeIfInVariableName(cm);
-      }, options.autocompleteDelay);
-    }
-  });
-
-  // Clear timeout if we already closed the completion
-  cm.on('endCompletion', () => {
-    if (keydownTimeoutHandle !== null) {
-      clearTimeout(keydownTimeoutHandle);
-    }
-  });
-
-  setupKeyMap(cm, { completeForce, completeIfAfterTagOrVarOpen });
-});
+    setupKeyMap(cm, { completeForce, completeIfAfterTagOrVarOpen });
+  },
+);
 
 /**
  * Function to retrieve the list items
@@ -232,7 +232,10 @@ CodeMirror.defineOption('environmentAutocomplete', null, (cm: CodeMirror.Editor,
  */
 function hint(cm: CodeMirror.Editor, options: ShowHintOptions) {
   // Add type to all things (except constants, which need to convert to an object)
-  const variablesToMatch: VariableCompletionItem[] = (options.variables || []).map(v => ({ ...v, type: TYPE_VARIABLE }));
+  const variablesToMatch: VariableCompletionItem[] = (options.variables || []).map(v => ({
+    ...v,
+    type: TYPE_VARIABLE,
+  }));
   const snippetsToMatch: SnippetCompletionItem[] = (options.snippets || []).map(v => ({ ...v, type: TYPE_SNIPPET }));
   const tagsToMatch: TagCompletionItem[] = (options.tags || []).map(v => ({ ...v, type: TYPE_TAG }));
   const constantsToMatch: ConstantCompletionItem[] = (options.constants || []).map(s => ({
@@ -280,7 +283,12 @@ function hint(cm: CodeMirror.Editor, options: ShowHintOptions) {
     const sortVariableCompletionHints = getCompletionHints(variablesToMatch, nameSegment, TYPE_VARIABLE, MAX_VARIABLES);
     lowPriorityMatches = [...lowPriorityMatches, ...sortVariableCompletionHints];
 
-    const longVariableCompletionHints = getCompletionHints(variablesToMatch, nameSegmentLong, TYPE_VARIABLE, MAX_VARIABLES);
+    const longVariableCompletionHints = getCompletionHints(
+      variablesToMatch,
+      nameSegmentLong,
+      TYPE_VARIABLE,
+      MAX_VARIABLES,
+    );
 
     highPriorityMatches = [...highPriorityMatches, ...longVariableCompletionHints];
   }
@@ -301,14 +309,15 @@ function hint(cm: CodeMirror.Editor, options: ShowHintOptions) {
         // We're inside a JSON key
         const constantCompletionHints = getCompletionHints(constantsToMatch, segment, TYPE_CONSTANT, MAX_CONSTANTS);
         highPriorityMatches = [...highPriorityMatches, ...constantCompletionHints];
-
       } else if (
         token.type === 'invalidchar' ||
         token.type === 'ws' ||
         (token.type === 'punctuation' && token.string === '{')
       ) {
         // We're outside of a JSON key
-        const constantCompletionHints = getCompletionHints(constantsToMatch, segment, TYPE_CONSTANT, MAX_CONSTANTS).map(hint => ({ ...hint, text: '"' + hint.text + '": ' }));
+        const constantCompletionHints = getCompletionHints(constantsToMatch, segment, TYPE_CONSTANT, MAX_CONSTANTS).map(
+          hint => ({ ...hint, text: '"' + hint.text + '": ' }),
+        );
 
         highPriorityMatches = [...highPriorityMatches, ...constantCompletionHints];
       }
@@ -444,12 +453,17 @@ function isTagCompletionItem(item: CompletionItem): item is TagCompletionItem {
   return item.type === TYPE_TAG;
 }
 
-function getCompletionHints(completionItems: CompletionItem[], segment: string, type: CompletionItem['type'], limit = -1) {
+function getCompletionHints(
+  completionItems: CompletionItem[],
+  segment: string,
+  type: CompletionItem['type'],
+  limit = -1,
+) {
   const matches: Hint[] = [];
 
   for (const item of completionItems) {
     const name = typeof item === 'string' ? item : item.name;
-    const value = typeof item === 'string' ? '' : item.value ?? '';
+    const value = typeof item === 'string' ? '' : (item.value ?? '');
     const displayName = item.displayName || name;
     let defaultFill = '';
 
@@ -491,8 +505,7 @@ function getCompletionHints(completionItems: CompletionItem[], segment: string,
   if (limit >= 0) {
     return matches.slice(0, limit);
   }
-    return matches;
-
+  return matches;
 }
 
 /**
diff --git a/packages/insomnia/src/ui/components/codemirror/extensions/clickable.ts b/packages/insomnia/src/ui/components/codemirror/extensions/clickable.ts
index 7a2296269f..1160b2ed86 100644
--- a/packages/insomnia/src/ui/components/codemirror/extensions/clickable.ts
+++ b/packages/insomnia/src/ui/components/codemirror/extensions/clickable.ts
@@ -5,44 +5,46 @@ import { decode } from 'html-entities';
 
 import { FLEXIBLE_URL_REGEX } from '../../../../common/constants';
 
-CodeMirror.defineExtension('makeLinksClickable', function (this: CodeMirror.Editor, handleClick: CodeMirrorLinkClickCallback) {
-  // Only add the click mode if we have links to click
-  this.addOverlay({
-    token: function (stream: any) {
-      if (stream.match(FLEXIBLE_URL_REGEX, true)) {
-        return 'clickable';
+CodeMirror.defineExtension(
+  'makeLinksClickable',
+  function (this: CodeMirror.Editor, handleClick: CodeMirrorLinkClickCallback) {
+    // Only add the click mode if we have links to click
+    this.addOverlay({
+      token: function (stream: any) {
+        if (stream.match(FLEXIBLE_URL_REGEX, true)) {
+          return 'clickable';
+        }
+
+        while (stream.next() != null) {
+          if (stream.match(FLEXIBLE_URL_REGEX, false)) {
+            break;
+          }
+        }
+
+        return null;
+      },
+    });
+
+    const el: HTMLElement = this.getWrapperElement();
+    let movedDuringClick = false;
+    el.addEventListener('mousemove', () => {
+      movedDuringClick = true;
+    });
+    el.addEventListener('mousedown', () => {
+      movedDuringClick = false;
+    });
+    el.addEventListener('mouseup', event => {
+      if (movedDuringClick || !event.target) {
+        return;
       }
 
-      while (stream.next() != null) {
-        if (stream.match(FLEXIBLE_URL_REGEX, false)) {
-          break;
+      if (event.target instanceof HTMLElement) {
+        const cls = event.target.className;
+
+        if (cls.indexOf('cm-clickable') >= 0) {
+          handleClick(decode(event.target.innerHTML));
         }
       }
-
-      return null;
-    },
-  });
-
-  const el: HTMLElement = this.getWrapperElement();
-  let movedDuringClick = false;
-  el.addEventListener('mousemove', () => {
-    movedDuringClick = true;
-  });
-  el.addEventListener('mousedown', () => {
-    movedDuringClick = false;
-  });
-  el.addEventListener('mouseup', event => {
-    if (movedDuringClick || !event.target) {
-      return;
-    }
-
-    if (event.target instanceof HTMLElement) {
-      const cls = event.target.className;
-
-      if (cls.indexOf('cm-clickable') >= 0) {
-        handleClick(decode(event.target.innerHTML));
-      }
-    }
-
-  });
-});
+    });
+  },
+);
diff --git a/packages/insomnia/src/ui/components/codemirror/extensions/nunjucks-tags.ts b/packages/insomnia/src/ui/components/codemirror/extensions/nunjucks-tags.ts
index f471697bef..bc49b0a1a7 100644
--- a/packages/insomnia/src/ui/components/codemirror/extensions/nunjucks-tags.ts
+++ b/packages/insomnia/src/ui/components/codemirror/extensions/nunjucks-tags.ts
@@ -7,47 +7,55 @@ import { tokenizeTag } from '../../../../templating/utils';
 import { showModal } from '../../modals/index';
 import { NunjucksModal } from '../../modals/nunjucks-modal';
 
-CodeMirror.defineExtension('enableNunjucksTags', function (
-  this: CodeMirror.Editor,
-  handleRender: HandleRender,
-  handleGetRenderContext: (contextCacheKey?: string) => Promise<RenderContextAndKeys>,
-  showVariableSourceAndValue = false,
-  editorId = '',
-) {
-  if (!handleRender) {
-    console.warn("enableNunjucksTags wasn't passed a render function");
-    return;
-  }
-
-  const refreshFn = _highlightNunjucksTags.bind(
-    this,
-    handleRender,
-    handleGetRenderContext,
-    showVariableSourceAndValue,
-    editorId,
-  );
-
-  const debouncedRefreshFn = misc.debounce(refreshFn);
-  this.on('change', (_cm: any, change: any) => {
-    const origin = change.origin || 'unknown';
-
-    if (!origin.match(/^[+*]/)) {
-      // Refresh immediately on non-joinable events
-      // (cut, paste, autocomplete; as opposed to +input, +delete)
-      refreshFn();
-    } else {
-      // Debounce all joinable events
-      debouncedRefreshFn();
+CodeMirror.defineExtension(
+  'enableNunjucksTags',
+  function (
+    this: CodeMirror.Editor,
+    handleRender: HandleRender,
+    handleGetRenderContext: (contextCacheKey?: string) => Promise<RenderContextAndKeys>,
+    showVariableSourceAndValue = false,
+    editorId = '',
+  ) {
+    if (!handleRender) {
+      console.warn("enableNunjucksTags wasn't passed a render function");
+      return;
     }
-  });
-  this.on('cursorActivity', debouncedRefreshFn);
-  this.on('viewportChange', debouncedRefreshFn);
-  // Trigger once right away to snappy perf
-  refreshFn();
-},
+
+    const refreshFn = _highlightNunjucksTags.bind(
+      this,
+      handleRender,
+      handleGetRenderContext,
+      showVariableSourceAndValue,
+      editorId,
+    );
+
+    const debouncedRefreshFn = misc.debounce(refreshFn);
+    this.on('change', (_cm: any, change: any) => {
+      const origin = change.origin || 'unknown';
+
+      if (!origin.match(/^[+*]/)) {
+        // Refresh immediately on non-joinable events
+        // (cut, paste, autocomplete; as opposed to +input, +delete)
+        refreshFn();
+      } else {
+        // Debounce all joinable events
+        debouncedRefreshFn();
+      }
+    });
+    this.on('cursorActivity', debouncedRefreshFn);
+    this.on('viewportChange', debouncedRefreshFn);
+    // Trigger once right away to snappy perf
+    refreshFn();
+  },
 );
 
-async function _highlightNunjucksTags(this: CodeMirror.Editor, render: HandleRender, renderContext: (contextCacheKey?: string) => Promise<RenderContextAndKeys>, showVariableSourceAndValue: boolean, editorId: string) {
+async function _highlightNunjucksTags(
+  this: CodeMirror.Editor,
+  render: HandleRender,
+  renderContext: (contextCacheKey?: string) => Promise<RenderContextAndKeys>,
+  showVariableSourceAndValue: boolean,
+  editorId: string,
+) {
   const renderCacheKey = Math.random() + '';
 
   const renderString = (text: any) => render(text, renderCacheKey);
@@ -139,24 +147,12 @@ async function _highlightNunjucksTags(this: CodeMirror.Editor, render: HandleRen
       });
 
       (async function () {
-        await _updateElementText(
-          renderString,
-          mark,
-          tok.string,
-          renderContextWithCacheKey,
-          showVariableSourceAndValue,
-        );
+        await _updateElementText(renderString, mark, tok.string, renderContextWithCacheKey, showVariableSourceAndValue);
       })();
 
       // Update it every mouseenter because it may generate a new value every time
       el.addEventListener('mouseenter', async () => {
-        await _updateElementText(
-          renderString,
-          mark,
-          tok.string,
-          renderContextWithCacheKey,
-          showVariableSourceAndValue,
-        );
+        await _updateElementText(renderString, mark, tok.string, renderContextWithCacheKey, showVariableSourceAndValue);
       });
       activeMarks.push(mark);
       el.addEventListener('click', async () => {
@@ -270,7 +266,7 @@ async function _updateElementText(
   mark: CodeMirror.TextMarker<CodeMirror.MarkerRange>,
   text: string,
   renderContext: (contextCacheKey?: string) => Promise<RenderContextAndKeys>,
-  showVariableSourceAndValue: boolean
+  showVariableSourceAndValue: boolean,
 ) {
   const el = mark.replacedWith!;
   let innerHTML = text;
@@ -279,12 +275,7 @@ async function _updateElementText(
   let dataError = '';
   const str = text.replace(/\\/g, '');
   const tagMatch = str.match(/{% *([^ ]+) *.*%}/);
-  const cleanedStr = str
-    .replace(/^{%/, '')
-    .replace(/%}$/, '')
-    .replace(/^{{/, '')
-    .replace(/}}$/, '')
-    .trim();
+  const cleanedStr = str.replace(/^{%/, '').replace(/%}$/, '').replace(/^{{/, '').replace(/}}$/, '').trim();
 
   try {
     if (tagMatch) {
diff --git a/packages/insomnia/src/ui/components/codemirror/lint/javascript-async-lint.ts b/packages/insomnia/src/ui/components/codemirror/lint/javascript-async-lint.ts
index 4b1bd1cf38..742efa6ab7 100644
--- a/packages/insomnia/src/ui/components/codemirror/lint/javascript-async-lint.ts
+++ b/packages/insomnia/src/ui/components/codemirror/lint/javascript-async-lint.ts
@@ -40,10 +40,7 @@ function parseErrors(errors: LintError[], output: ValidationError[]) {
     if (error) {
       if (error.line <= 0) {
         if (window.console) {
-          window.console.warn(
-            'Cannot display JSHint error (invalid line ' + error.line + ')',
-            error,
-          );
+          window.console.warn('Cannot display JSHint error (invalid line ' + error.line + ')', error);
         }
 
         continue;
diff --git a/packages/insomnia/src/ui/components/codemirror/lint/json-lint.ts b/packages/insomnia/src/ui/components/codemirror/lint/json-lint.ts
index c9f082e5dd..37ae7f2fc3 100644
--- a/packages/insomnia/src/ui/components/codemirror/lint/json-lint.ts
+++ b/packages/insomnia/src/ui/components/codemirror/lint/json-lint.ts
@@ -22,7 +22,7 @@ async function validator(text: string): Promise<ValidationError[]> {
 
   // Override jsonlint's parseError function so we pull the errors into our collection of ValidationErrors
   jsonlint.parser.parseError = (str: string, hash: jsonlint.ParseErrorHash) => {
-    if (hash.line && !(hash.loc)) {
+    if (hash.line && !hash.loc) {
       found.push({
         from: CodeMirror.Pos(hash.line),
         to: CodeMirror.Pos(hash.line),
diff --git a/packages/insomnia/src/ui/components/codemirror/modes/curl.ts b/packages/insomnia/src/ui/components/codemirror/modes/curl.ts
index b5cdad4cff..99631b4b25 100644
--- a/packages/insomnia/src/ui/components/codemirror/modes/curl.ts
+++ b/packages/insomnia/src/ui/components/codemirror/modes/curl.ts
@@ -43,12 +43,7 @@ const informationalText = [
 ];
 
 CodeMirror.defineSimpleMode('curl', {
-  start: [
-    ...keyValueHeaders,
-    ...headerFields,
-    ...data,
-    ...informationalText,
-  ],
+  start: [...keyValueHeaders, ...headerFields, ...data, ...informationalText],
   comment: [],
   meta: {},
 });
diff --git a/packages/insomnia/src/ui/components/codemirror/modes/nunjucks.ts b/packages/insomnia/src/ui/components/codemirror/modes/nunjucks.ts
index ed2f72d029..349ea00bb0 100644
--- a/packages/insomnia/src/ui/components/codemirror/modes/nunjucks.ts
+++ b/packages/insomnia/src/ui/components/codemirror/modes/nunjucks.ts
@@ -1,7 +1,7 @@
 import CodeMirror from 'codemirror';
 
 export function isNunjucksMode(
-  mode: CodeMirror.ModeSpec<unknown>
+  mode: CodeMirror.ModeSpec<unknown>,
 ): mode is CodeMirror.ModeSpec<{ baseMode: 'string' }> {
   return 'baseMode' in mode;
 }
diff --git a/packages/insomnia/src/ui/components/codemirror/modes/openapi.ts b/packages/insomnia/src/ui/components/codemirror/modes/openapi.ts
index 8113f32a8a..695dd2121d 100644
--- a/packages/insomnia/src/ui/components/codemirror/modes/openapi.ts
+++ b/packages/insomnia/src/ui/components/codemirror/modes/openapi.ts
@@ -105,10 +105,7 @@ CodeMirror.defineMode('openapi', function () {
       }
 
       /* pairs (associative arrays) -> key */
-      if (
-        !state.pair &&
-        stream.match(/^\s*(?:[,[\]{}&*!|>'"%@`][^\s'":]|[^,[\]{}#&*!|>'"%@`])[^#]*?(?=\s*:($|\s))/)
-      ) {
+      if (!state.pair && stream.match(/^\s*(?:[,[\]{}&*!|>'"%@`][^\s'":]|[^,[\]{}#&*!|>'"%@`])[^#]*?(?=\s*:($|\s))/)) {
         state.pair = true;
         state.keyCol = stream.indentation();
         return 'atom';
diff --git a/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx b/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx
index a731158f34..d80aa79dec 100644
--- a/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx
+++ b/packages/insomnia/src/ui/components/codemirror/one-line-editor.tsx
@@ -42,319 +42,359 @@ export interface OneLineEditorHandle {
   selectAll: () => void;
   focusEnd: () => void;
 }
-export const OneLineEditor = forwardRef<OneLineEditorHandle, OneLineEditorProps>(({
-  defaultValue,
-  getAutocompleteConstants,
-  id,
-  onChange,
-  onKeyDown,
-  placeholder,
-  readOnly,
-  type,
-  onPaste,
-  onBlur,
-  eventListeners,
-}, ref) => {
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const codeMirror = useRef<CodeMirror.EditorFromTextArea | null>(null);
-  const {
-    settings,
-  } = useRootLoaderData();
-  const { isOwner, isEnterprisePlan } = usePlanData();
-  const { handleRender, handleGetRenderContext } = useNunjucks();
-
-  const getKeyMap = useCallback(() => {
-    if (!readOnly && settings.enableKeyMapForInlineTextEditors && settings.editorKeyMap) {
-      return settings.editorKeyMap;
-    }
-    return 'default';
-  }, [settings.enableKeyMapForInlineTextEditors, settings.editorKeyMap, readOnly]);
-
-  const initEditor = useCallback(() => {
-    if (!textAreaRef.current) {
-      return;
-    }
-
-    const transformEnums = (tagDef: NunjucksParsedTag): NunjucksParsedTag[] => {
-      if (tagDef.args[0]?.type === 'enum') {
-        return tagDef.args[0].options?.map(option => {
-          const optionName = misc.fnOrString(option.displayName, tagDef.args);
-          const newDef = clone(tagDef);
-          newDef.displayName = `${tagDef.displayName} ⇒ ${optionName}`;
-          newDef.args[0].defaultValue = option.value;
-
-          return newDef;
-        }) || [];
-      }
-      return [tagDef];
-    };
-    const canAutocomplete = !!(handleGetRenderContext || getAutocompleteConstants);
-    const initialOptions: EditorConfiguration = {
-      lineNumbers: false,
-      placeholder: placeholder || '',
-      foldGutter: false,
-      autoRefresh: { delay: 2000 },
-      lineWrapping: false,
-      scrollbarStyle: 'null',
-      lint: false,
-      matchBrackets: false,
-      autoCloseBrackets: false,
-      viewportMargin: 30,
-      readOnly: !!readOnly,
-      tabindex: 0,
-      selectionPointer: 'default',
-      styleActiveLine: false,
-      indentWithTabs: false,
-      showCursorWhenSelecting: false,
-      cursorScrollMargin: 12,
-      // Only set keyMap if we're not read-only. This is so things like ctrl-a work on read-only mode.
-      keyMap: getKeyMap(),
-      extraKeys: CodeMirror.normalizeKeyMap({
-        'Ctrl-Space': 'autocomplete',
-        [isMac() ? 'Cmd-F' : 'Ctrl-F']: () => { },
-      }),
-      gutters: [],
-      mode: !handleRender ? 'text/plain' : {
-        name: 'nunjucks',
-        baseMode: 'text/plain',
-      },
-      environmentAutocomplete: canAutocomplete && {
-        getVariables: async () => !handleGetRenderContext ? [] : (await handleGetRenderContext())?.keys || [],
-        getTags: async () => !handleGetRenderContext ? [] : (await getTagDefinitions()).map(transformEnums).flat(),
-        getConstants: getAutocompleteConstants,
-        hotKeyRegistry: settings.hotKeyRegistry,
-        autocompleteDelay: settings.autocompleteDelay,
-      },
-    };
-    codeMirror.current = CodeMirror.fromTextArea(textAreaRef.current, initialOptions);
-    codeMirror.current.on('beforeChange', (_: CodeMirror.Editor, change: CodeMirror.EditorChangeCancellable) => {
-      const isPaste = change.text && change.text.length > 1;
-      if (isPaste) {
-        const startsWithCurl = change.text[0].startsWith('curl');
-        const isWhitespace = change.text.join('').trim();
-        if (startsWithCurl || !isWhitespace) {
-          change.cancel();
-          return;
-        }
-        // If we're in single-line mode, merge all changed lines into one
-        change.update?.(change.from, change.to, [change.text.join('').replace(/\n/g, ' ')]);
-      }
-    });
-    codeMirror.current.on('paste', (_, e: ClipboardEvent) => {
-      const text = e.clipboardData?.getData('text/plain');
-      // TODO: watch out for pasting urls that are curl<something>, e.g. curl.se would be picked up here without the space
-      if (onPaste && text && text.startsWith('curl ')) {
-        onPaste(text);
-      }
-    });
-
-    codeMirror.current.on('blur', (_, e) => {
-      if (onBlur) {
-        onBlur(e);
-      }
-    });
-
-    codeMirror.current.on('keydown', (doc: CodeMirror.Editor, event: KeyboardEvent) => {
-      // Use default tab behaviour if we're told
-      if (event.code === 'Tab') {
-        // @ts-expect-error -- unsound property assignment
-        event.codemirrorIgnore = true;
-      }
-      const pressedKeyComb: KeyCombination = {
-        ctrl: event.ctrlKey,
-        alt: event.altKey,
-        shift: event.shiftKey,
-        meta: event.metaKey,
-        keyCode: event.keyCode,
-      };
-      const isUserDefinedKeyboardShortcut = isKeyCombinationInRegistry(pressedKeyComb, settings.hotKeyRegistry);
-      const isAutoCompleteBinding = isKeyCombinationInRegistry(pressedKeyComb, {
-        'showAutocomplete': settings.hotKeyRegistry.showAutocomplete,
-      });
-      // Stop the editor from handling global keyboard shortcuts except for the autocomplete binding
-      const isShortcutButNotAutocomplete = isUserDefinedKeyboardShortcut && !isAutoCompleteBinding;
-      // Should not capture escape in order to exit modals
-      const isEscapeKey = event.code === 'Escape';
-      if (isShortcutButNotAutocomplete) {
-        // @ts-expect-error -- unsound property assignment
-        event.codemirrorIgnore = true;
-        // Stop the editor from handling the escape key
-      } else if (isEscapeKey) {
-        // @ts-expect-error -- unsound property assignment
-        event.codemirrorIgnore = true;
-      } else {
-        event.stopPropagation();
-      }
-      if (onKeyDown && !doc.isHintDropdownActive()) {
-        onKeyDown(event, doc.getValue());
-      }
-    });
-    // extra event listeners for editor
-    if (Array.isArray(eventListeners) && eventListeners.length > 0) {
-      eventListeners.forEach(({ eventName, handler }) => {
-        codeMirror.current?.on(eventName, handler);
-      });
-    }
-    codeMirror.current.on('blur', () => codeMirror.current?.getTextArea().parentElement?.removeAttribute('data-focused'));
-    codeMirror.current.on('focus', () => codeMirror.current?.getTextArea().parentElement?.setAttribute('data-focused', 'on'));
-    codeMirror.current.on('keyHandled', (_: CodeMirror.Editor, _keyName: string, event: Event) => event.stopPropagation());
-
-    // Actually set the value
-    codeMirror.current?.setValue(defaultValue || '');
-    // Clear history so we can't undo the initial set
-    codeMirror.current?.clearHistory();
-    // Setup nunjucks listeners
-    if (handleRender && !settings.nunjucksPowerUserMode) {
-      codeMirror.current?.enableNunjucksTags(
-        handleRender,
-        handleGetRenderContext,
-        settings.showVariableSourceAndValue,
-        id,
-      );
-    }
-    // settings.pluginsAllowElevatedAccess is not used here but we want to trigger this effect when it changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue, getAutocompleteConstants, handleGetRenderContext, handleRender, onBlur, onKeyDown, onPaste, placeholder, readOnly, settings.autocompleteDelay, getKeyMap, settings.hotKeyRegistry, settings.nunjucksPowerUserMode, settings.pluginsAllowElevatedAccess, settings.showVariableSourceAndValue, eventListeners, id]);
-
-  const cleanUpEditor = useCallback(() => {
-    codeMirror.current?.toTextArea();
-    codeMirror.current?.closeHintDropdown();
-    codeMirror.current = null;
-  }, []);
-  useMount(() => {
-    initEditor();
-  });
-  useUnmount(() => {
-    cleanUpEditor();
-  });
-
-  const reinitialize = useCallback(() => {
-    cleanUpEditor();
-    initEditor();
-  }, [cleanUpEditor, initEditor]);
-
-  useEditorRefresh(reinitialize);
-
-  useEffect(() => {
-    if (codeMirror.current) {
-      // https://github.com/Kong/insomnia/issues/8265
-      // we have a unique key for request panel, when connect to websocket, unique will change and component will mount again automatically
-      // but when disconnect, the unique key will not change, so we need to update some configurations manually
-      codeMirror.current.setOption('readOnly', readOnly);
-      codeMirror.current.setOption('keyMap', getKeyMap());
-    }
-  }, [readOnly, getKeyMap]);
-
-  useEffect(() => {
-    // Prevent these things if we're type === "password"
-    const preventDefault = (_: CodeMirror.Editor, event: Event) => type?.toLowerCase() === 'password' && event.preventDefault();
-    codeMirror.current?.on('copy', preventDefault);
-    codeMirror.current?.on('cut', preventDefault);
-    codeMirror.current?.on('dragstart', preventDefault);
-
-    return () => {
-      codeMirror.current?.off('copy', preventDefault);
-      codeMirror.current?.off('cut', preventDefault);
-      codeMirror.current?.off('dragstart', preventDefault);
-    };
-  }, [type]);
-
-  useEffect(() => {
-    const fn = misc.debounce((doc: CodeMirror.Editor) => {
-      if (onChange) {
-        onChange(doc.getValue() || '');
-      }
-    }, DEBOUNCE_MILLIS);
-    codeMirror.current?.on('changes', fn);
-    return () => codeMirror.current?.off('changes', fn);
-  }, [onChange]);
-
-  useEffect(() => {
-    const unsubscribe = window.main.on('nunjucks-context-menu-command', (_, { key, tag, nunjucksTag, needsEnterprisePlan, displayName }) => {
-      if (id === key) {
-        if (needsEnterprisePlan && !isEnterprisePlan) {
-          // show modal if current user is not an enteprise user and the command is an enterprise feature
-          showModal(UpgradeModal, {
-            newPlan: 'enterprise',
-            featureName: displayName,
-            isOwner,
-          });
-          return;
-        }
-        if (nunjucksTag) {
-          const { type, template, range } = nunjucksTag as nunjucksTagContextMenuOptions;
-          if (type === 'edit') {
-            showModal(NunjucksModal, {
-              template: template,
-              onDone: (template: string | null) => {
-                const { from, to } = range;
-                codeMirror.current?.replaceRange(template!, from, to);
-              },
-            });
-          } else if (type === 'delete') {
-            const { from, to } = range;
-            codeMirror.current?.replaceRange('', from, to);
-          } else {
-            return
-          }
-        } else {
-          codeMirror.current?.replaceSelection(tag);
-        }
-      }
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, [id, isEnterprisePlan, isOwner]);
-
-  useImperativeHandle(ref, () => ({
-    selectAll: () => codeMirror.current?.setSelection({ line: 0, ch: 0 }, { line: codeMirror.current.lineCount(), ch: 0 }),
-    focusEnd: () => {
-      if (codeMirror.current && !codeMirror.current.hasFocus()) {
-        codeMirror.current.focus();
-      }
-      codeMirror.current?.getDoc()?.setCursor(codeMirror.current.getDoc().lineCount(), 0);
+export const OneLineEditor = forwardRef<OneLineEditorHandle, OneLineEditorProps>(
+  (
+    {
+      defaultValue,
+      getAutocompleteConstants,
+      id,
+      onChange,
+      onKeyDown,
+      placeholder,
+      readOnly,
+      type,
+      onPaste,
+      onBlur,
+      eventListeners,
     },
-  }), []);
+    ref,
+  ) => {
+    const textAreaRef = useRef<HTMLTextAreaElement>(null);
+    const codeMirror = useRef<CodeMirror.EditorFromTextArea | null>(null);
+    const { settings } = useRootLoaderData();
+    const { isOwner, isEnterprisePlan } = usePlanData();
+    const { handleRender, handleGetRenderContext } = useNunjucks();
 
-  return (
-    <div
-      className={classnames('editor--single-line', {
-        editor: true,
-        'editor--readonly': readOnly,
-      })}
-      data-editor-type={type || 'text'}
-      data-testid="OneLineEditor"
-      onContextMenu={event => {
-        if (readOnly) {
-          return;
+    const getKeyMap = useCallback(() => {
+      if (!readOnly && settings.enableKeyMapForInlineTextEditors && settings.editorKeyMap) {
+        return settings.editorKeyMap;
+      }
+      return 'default';
+    }, [settings.enableKeyMapForInlineTextEditors, settings.editorKeyMap, readOnly]);
+
+    const initEditor = useCallback(() => {
+      if (!textAreaRef.current) {
+        return;
+      }
+
+      const transformEnums = (tagDef: NunjucksParsedTag): NunjucksParsedTag[] => {
+        if (tagDef.args[0]?.type === 'enum') {
+          return (
+            tagDef.args[0].options?.map(option => {
+              const optionName = misc.fnOrString(option.displayName, tagDef.args);
+              const newDef = clone(tagDef);
+              newDef.displayName = `${tagDef.displayName} ⇒ ${optionName}`;
+              newDef.args[0].defaultValue = option.value;
+
+              return newDef;
+            }) || []
+          );
         }
-        event.preventDefault();
-        const target = event.target as HTMLElement;
-        // right click on nunjucks tag
-        if (target?.classList?.contains('nunjucks-tag')) {
-          const { clientX, clientY } = event;
-          const nunjucksTag = extractNunjucksTagFromCoords({ left: clientX, top: clientY }, codeMirror);
-          if (nunjucksTag) {
-            // show context menu for nunjucks tag
-            window.main.showNunjucksContextMenu({ key: id, nunjucksTag });
+        return [tagDef];
+      };
+      const canAutocomplete = !!(handleGetRenderContext || getAutocompleteConstants);
+      const initialOptions: EditorConfiguration = {
+        lineNumbers: false,
+        placeholder: placeholder || '',
+        foldGutter: false,
+        autoRefresh: { delay: 2000 },
+        lineWrapping: false,
+        scrollbarStyle: 'null',
+        lint: false,
+        matchBrackets: false,
+        autoCloseBrackets: false,
+        viewportMargin: 30,
+        readOnly: !!readOnly,
+        tabindex: 0,
+        selectionPointer: 'default',
+        styleActiveLine: false,
+        indentWithTabs: false,
+        showCursorWhenSelecting: false,
+        cursorScrollMargin: 12,
+        // Only set keyMap if we're not read-only. This is so things like ctrl-a work on read-only mode.
+        keyMap: getKeyMap(),
+        extraKeys: CodeMirror.normalizeKeyMap({
+          'Ctrl-Space': 'autocomplete',
+          [isMac() ? 'Cmd-F' : 'Ctrl-F']: () => {},
+        }),
+        gutters: [],
+        mode: !handleRender
+          ? 'text/plain'
+          : {
+              name: 'nunjucks',
+              baseMode: 'text/plain',
+            },
+        environmentAutocomplete: canAutocomplete && {
+          getVariables: async () => (!handleGetRenderContext ? [] : (await handleGetRenderContext())?.keys || []),
+          getTags: async () => (!handleGetRenderContext ? [] : (await getTagDefinitions()).map(transformEnums).flat()),
+          getConstants: getAutocompleteConstants,
+          hotKeyRegistry: settings.hotKeyRegistry,
+          autocompleteDelay: settings.autocompleteDelay,
+        },
+      };
+      codeMirror.current = CodeMirror.fromTextArea(textAreaRef.current, initialOptions);
+      codeMirror.current.on('beforeChange', (_: CodeMirror.Editor, change: CodeMirror.EditorChangeCancellable) => {
+        const isPaste = change.text && change.text.length > 1;
+        if (isPaste) {
+          const startsWithCurl = change.text[0].startsWith('curl');
+          const isWhitespace = change.text.join('').trim();
+          if (startsWithCurl || !isWhitespace) {
+            change.cancel();
+            return;
           }
-        } else {
-          window.main.showNunjucksContextMenu({ key: id });
+          // If we're in single-line mode, merge all changed lines into one
+          change.update?.(change.from, change.to, [change.text.join('').replace(/\n/g, ' ')]);
         }
-      }}
-    >
-      <div className="editor__container input editor--single-line">
-        <textarea
-          id={id}
-          ref={textAreaRef}
-          style={{ display: 'none' }}
-          readOnly={readOnly}
-          autoComplete="off"
-          defaultValue=""
-        />
+      });
+      codeMirror.current.on('paste', (_, e: ClipboardEvent) => {
+        const text = e.clipboardData?.getData('text/plain');
+        // TODO: watch out for pasting urls that are curl<something>, e.g. curl.se would be picked up here without the space
+        if (onPaste && text && text.startsWith('curl ')) {
+          onPaste(text);
+        }
+      });
+
+      codeMirror.current.on('blur', (_, e) => {
+        if (onBlur) {
+          onBlur(e);
+        }
+      });
+
+      codeMirror.current.on('keydown', (doc: CodeMirror.Editor, event: KeyboardEvent) => {
+        // Use default tab behaviour if we're told
+        if (event.code === 'Tab') {
+          // @ts-expect-error -- unsound property assignment
+          event.codemirrorIgnore = true;
+        }
+        const pressedKeyComb: KeyCombination = {
+          ctrl: event.ctrlKey,
+          alt: event.altKey,
+          shift: event.shiftKey,
+          meta: event.metaKey,
+          keyCode: event.keyCode,
+        };
+        const isUserDefinedKeyboardShortcut = isKeyCombinationInRegistry(pressedKeyComb, settings.hotKeyRegistry);
+        const isAutoCompleteBinding = isKeyCombinationInRegistry(pressedKeyComb, {
+          showAutocomplete: settings.hotKeyRegistry.showAutocomplete,
+        });
+        // Stop the editor from handling global keyboard shortcuts except for the autocomplete binding
+        const isShortcutButNotAutocomplete = isUserDefinedKeyboardShortcut && !isAutoCompleteBinding;
+        // Should not capture escape in order to exit modals
+        const isEscapeKey = event.code === 'Escape';
+        if (isShortcutButNotAutocomplete) {
+          // @ts-expect-error -- unsound property assignment
+          event.codemirrorIgnore = true;
+          // Stop the editor from handling the escape key
+        } else if (isEscapeKey) {
+          // @ts-expect-error -- unsound property assignment
+          event.codemirrorIgnore = true;
+        } else {
+          event.stopPropagation();
+        }
+        if (onKeyDown && !doc.isHintDropdownActive()) {
+          onKeyDown(event, doc.getValue());
+        }
+      });
+      // extra event listeners for editor
+      if (Array.isArray(eventListeners) && eventListeners.length > 0) {
+        eventListeners.forEach(({ eventName, handler }) => {
+          codeMirror.current?.on(eventName, handler);
+        });
+      }
+      codeMirror.current.on('blur', () =>
+        codeMirror.current?.getTextArea().parentElement?.removeAttribute('data-focused'),
+      );
+      codeMirror.current.on('focus', () =>
+        codeMirror.current?.getTextArea().parentElement?.setAttribute('data-focused', 'on'),
+      );
+      codeMirror.current.on('keyHandled', (_: CodeMirror.Editor, _keyName: string, event: Event) =>
+        event.stopPropagation(),
+      );
+
+      // Actually set the value
+      codeMirror.current?.setValue(defaultValue || '');
+      // Clear history so we can't undo the initial set
+      codeMirror.current?.clearHistory();
+      // Setup nunjucks listeners
+      if (handleRender && !settings.nunjucksPowerUserMode) {
+        codeMirror.current?.enableNunjucksTags(
+          handleRender,
+          handleGetRenderContext,
+          settings.showVariableSourceAndValue,
+          id,
+        );
+      }
+      // settings.pluginsAllowElevatedAccess is not used here but we want to trigger this effect when it changes
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+      defaultValue,
+      getAutocompleteConstants,
+      handleGetRenderContext,
+      handleRender,
+      onBlur,
+      onKeyDown,
+      onPaste,
+      placeholder,
+      readOnly,
+      settings.autocompleteDelay,
+      getKeyMap,
+      settings.hotKeyRegistry,
+      settings.nunjucksPowerUserMode,
+      settings.pluginsAllowElevatedAccess,
+      settings.showVariableSourceAndValue,
+      eventListeners,
+      id,
+    ]);
+
+    const cleanUpEditor = useCallback(() => {
+      codeMirror.current?.toTextArea();
+      codeMirror.current?.closeHintDropdown();
+      codeMirror.current = null;
+    }, []);
+    useMount(() => {
+      initEditor();
+    });
+    useUnmount(() => {
+      cleanUpEditor();
+    });
+
+    const reinitialize = useCallback(() => {
+      cleanUpEditor();
+      initEditor();
+    }, [cleanUpEditor, initEditor]);
+
+    useEditorRefresh(reinitialize);
+
+    useEffect(() => {
+      if (codeMirror.current) {
+        // https://github.com/Kong/insomnia/issues/8265
+        // we have a unique key for request panel, when connect to websocket, unique will change and component will mount again automatically
+        // but when disconnect, the unique key will not change, so we need to update some configurations manually
+        codeMirror.current.setOption('readOnly', readOnly);
+        codeMirror.current.setOption('keyMap', getKeyMap());
+      }
+    }, [readOnly, getKeyMap]);
+
+    useEffect(() => {
+      // Prevent these things if we're type === "password"
+      const preventDefault = (_: CodeMirror.Editor, event: Event) =>
+        type?.toLowerCase() === 'password' && event.preventDefault();
+      codeMirror.current?.on('copy', preventDefault);
+      codeMirror.current?.on('cut', preventDefault);
+      codeMirror.current?.on('dragstart', preventDefault);
+
+      return () => {
+        codeMirror.current?.off('copy', preventDefault);
+        codeMirror.current?.off('cut', preventDefault);
+        codeMirror.current?.off('dragstart', preventDefault);
+      };
+    }, [type]);
+
+    useEffect(() => {
+      const fn = misc.debounce((doc: CodeMirror.Editor) => {
+        if (onChange) {
+          onChange(doc.getValue() || '');
+        }
+      }, DEBOUNCE_MILLIS);
+      codeMirror.current?.on('changes', fn);
+      return () => codeMirror.current?.off('changes', fn);
+    }, [onChange]);
+
+    useEffect(() => {
+      const unsubscribe = window.main.on(
+        'nunjucks-context-menu-command',
+        (_, { key, tag, nunjucksTag, needsEnterprisePlan, displayName }) => {
+          if (id === key) {
+            if (needsEnterprisePlan && !isEnterprisePlan) {
+              // show modal if current user is not an enteprise user and the command is an enterprise feature
+              showModal(UpgradeModal, {
+                newPlan: 'enterprise',
+                featureName: displayName,
+                isOwner,
+              });
+              return;
+            }
+            if (nunjucksTag) {
+              const { type, template, range } = nunjucksTag as nunjucksTagContextMenuOptions;
+              if (type === 'edit') {
+                showModal(NunjucksModal, {
+                  template: template,
+                  onDone: (template: string | null) => {
+                    const { from, to } = range;
+                    codeMirror.current?.replaceRange(template!, from, to);
+                  },
+                });
+              } else if (type === 'delete') {
+                const { from, to } = range;
+                codeMirror.current?.replaceRange('', from, to);
+              } else {
+                return;
+              }
+            } else {
+              codeMirror.current?.replaceSelection(tag);
+            }
+          }
+        },
+      );
+      return () => {
+        unsubscribe();
+      };
+    }, [id, isEnterprisePlan, isOwner]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        selectAll: () =>
+          codeMirror.current?.setSelection({ line: 0, ch: 0 }, { line: codeMirror.current.lineCount(), ch: 0 }),
+        focusEnd: () => {
+          if (codeMirror.current && !codeMirror.current.hasFocus()) {
+            codeMirror.current.focus();
+          }
+          codeMirror.current?.getDoc()?.setCursor(codeMirror.current.getDoc().lineCount(), 0);
+        },
+      }),
+      [],
+    );
+
+    return (
+      <div
+        className={classnames('editor--single-line', {
+          'editor': true,
+          'editor--readonly': readOnly,
+        })}
+        data-editor-type={type || 'text'}
+        data-testid="OneLineEditor"
+        onContextMenu={event => {
+          if (readOnly) {
+            return;
+          }
+          event.preventDefault();
+          const target = event.target as HTMLElement;
+          // right click on nunjucks tag
+          if (target?.classList?.contains('nunjucks-tag')) {
+            const { clientX, clientY } = event;
+            const nunjucksTag = extractNunjucksTagFromCoords({ left: clientX, top: clientY }, codeMirror);
+            if (nunjucksTag) {
+              // show context menu for nunjucks tag
+              window.main.showNunjucksContextMenu({ key: id, nunjucksTag });
+            }
+          } else {
+            window.main.showNunjucksContextMenu({ key: id });
+          }
+        }}
+      >
+        <div className="editor__container input editor--single-line">
+          <textarea
+            id={id}
+            ref={textAreaRef}
+            style={{ display: 'none' }}
+            readOnly={readOnly}
+            autoComplete="off"
+            defaultValue=""
+          />
+        </div>
       </div>
-    </div >
-  );
-});
+    );
+  },
+);
 OneLineEditor.displayName = 'OneLineEditor';
diff --git a/packages/insomnia/src/ui/components/command-palette.tsx b/packages/insomnia/src/ui/components/command-palette.tsx
index eaa1137b09..bbf52cd746 100644
--- a/packages/insomnia/src/ui/components/command-palette.tsx
+++ b/packages/insomnia/src/ui/components/command-palette.tsx
@@ -1,6 +1,23 @@
 import React, { memo, useEffect, useRef } from 'react';
 import { useState } from 'react';
-import { Button, Collection, ComboBox, Dialog, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxItem, Modal, ModalOverlay, Popover, Section, Text } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  ComboBox,
+  Dialog,
+  DialogTrigger,
+  Header,
+  Input,
+  Keyboard,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Modal,
+  ModalOverlay,
+  Popover,
+  Section,
+  Text,
+} from 'react-aria-components';
 import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { constructKeyCombinationDisplay, getPlatformKeyCombinations } from '../../common/hotkeys';
@@ -32,25 +49,29 @@ export const CommandPalette = memo(function CommandPalette({ style = {} }: { sty
   const requestSwitchKeyCombination = getPlatformKeyCombinations(settings.hotKeyRegistry.request_quickSwitch)[0];
 
   return (
-    <DialogTrigger
-      onOpenChange={setIsOpen}
-      isOpen={isOpen}
-    >
-      <Button style={{ ...style }} data-testid='quick-search' className="px-4 py-1 h-[30.5px] flex-shrink-0 flex items-center justify-between gap-2 bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] ring-inset ring-transparent ring-1 focus:ring-[--hl-md] transition-all text-sm">
+    <DialogTrigger onOpenChange={setIsOpen} isOpen={isOpen}>
+      <Button
+        style={{ ...style }}
+        data-testid="quick-search"
+        className="flex h-[30.5px] flex-shrink-0 items-center justify-between gap-2 rounded-md bg-[--hl-xs] px-4 py-1 text-sm text-[--color-font] ring-1 ring-inset ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm]"
+      >
         <div>
-          <Icon icon="search" className='mr-2' />
+          <Icon icon="search" className="mr-2" />
           Search..
         </div>
-        {requestSwitchKeyCombination && <Keyboard className='space-x-0.5 items-center font-sans font-normal text-center text-sm shadow-sm bg-[--hl-xs] text-[--hl] rounded-md py-0.5 px-2 inline-block'>
-          {constructKeyCombinationDisplay(requestSwitchKeyCombination, false)}
-        </Keyboard>}
+        {requestSwitchKeyCombination && (
+          <Keyboard className="inline-block items-center space-x-0.5 rounded-md bg-[--hl-xs] px-2 py-0.5 text-center font-sans text-sm font-normal text-[--hl] shadow-sm">
+            {constructKeyCombinationDisplay(requestSwitchKeyCombination, false)}
+          </Keyboard>
+        )}
       </Button>
-      <ModalOverlay isDismissable className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex pt-20 justify-center bg-black/30">
-        <Modal className="max-w-3xl w-full">
-          <Dialog aria-label='Command palette dialog' className="outline-none">
-            {({ close }) => (
-              <CommandPaletteCombobox close={close} />
-            )}
+      <ModalOverlay
+        isDismissable
+        className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full justify-center bg-black/30 pt-20"
+      >
+        <Modal className="w-full max-w-3xl">
+          <Dialog aria-label="Command palette dialog" className="outline-none">
+            {({ close }) => <CommandPaletteCombobox close={close} />}
           </Dialog>
         </Modal>
       </ModalOverlay>
@@ -59,17 +80,12 @@ export const CommandPalette = memo(function CommandPalette({ style = {} }: { sty
 });
 
 const CommandPaletteCombobox = ({ close }: { close: () => void }) => {
-  const {
-    organizationId,
-    projectId,
-    workspaceId,
-    requestId,
-  } = useParams() as {
+  const { organizationId, projectId, workspaceId, requestId } = useParams() as {
     organizationId: string;
     projectId: string;
     workspaceId: string;
     requestId: string;
-    };
+  };
 
   const { userSession } = useRouteLoaderData('root') as RootLoaderData;
   const { presence } = useInsomniaEventStreamContext();
@@ -117,220 +133,275 @@ const CommandPaletteCombobox = ({ close }: { close: () => void }) => {
     }[];
   }[] = [];
 
-  const currentRequests = commandsLoader.data?.current.requests.map(request => ({
-    ...request,
-    action: () => {
-      navigate(request.url);
-    },
-  })) || [];
+  const currentRequests =
+    commandsLoader.data?.current.requests.map(request => ({
+      ...request,
+      action: () => {
+        navigate(request.url);
+      },
+    })) || [];
 
   const remoteFiles = remoteFilesLoader.data?.files || [];
 
   const currentFilesData = commandsLoader.data?.current.files || [];
-  const currentRemoteFilesData = remoteFiles.filter(file => file.item.teamProjectLocalId === projectId).filter(file => !currentFilesData.some(f => f.id === file.item.id));
+  const currentRemoteFilesData = remoteFiles
+    .filter(file => file.item.teamProjectLocalId === projectId)
+    .filter(file => !currentFilesData.some(f => f.id === file.item.id));
 
-  const currentFiles = [...currentFilesData, ...currentRemoteFilesData]?.map(file => ({
-    ...file,
-    action: () => {
-      if ('pullUrl' in file && file.pullUrl) {
-        pullFileFetcher.submit({ backendProjectId: file.item.projectId, remoteId: file.item.teamProjectId }, {
-          method: 'POST',
-          action: file.pullUrl,
-        });
+  const currentFiles =
+    [...currentFilesData, ...currentRemoteFilesData]?.map(file => ({
+      ...file,
+      action: () => {
+        if ('pullUrl' in file && file.pullUrl) {
+          pullFileFetcher.submit(
+            { backendProjectId: file.item.projectId, remoteId: file.item.teamProjectId },
+            {
+              method: 'POST',
+              action: file.pullUrl,
+            },
+          );
 
-        return true;
-      }
+          return true;
+        }
         navigate(file.url);
         return null;
+      },
+    })) || [];
 
-    },
-  })) || [];
+  const currentEnvironments =
+    commandsLoader.data?.current.environments.map(environment => ({
+      ...environment,
+      id: environment._id,
+      action: () => {
+        setActiveEnvironmentFetcher.submit(
+          {
+            environmentId: environment._id,
+          },
+          {
+            method: 'POST',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`,
+          },
+        );
 
-  const currentEnvironments = commandsLoader.data?.current.environments.map(environment => ({
-    ...environment,
-    id: environment._id,
-    action: () => {
-      setActiveEnvironmentFetcher.submit(
-        {
-          environmentId: environment._id,
-        },
-        {
-          method: 'POST',
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`,
-        }
-      );
+        return true;
+      },
+    })) || [];
 
-      return true;
-    },
-  })) || [];
-
-  const otherRequests = commandsLoader.data?.other.requests.map(request => ({
-    ...request,
-    action: () => {
-      navigate(request.url);
-    },
-  })) || [];
+  const otherRequests =
+    commandsLoader.data?.other.requests.map(request => ({
+      ...request,
+      action: () => {
+        navigate(request.url);
+      },
+    })) || [];
 
   const otherFilesData = commandsLoader.data?.other.files || [];
-  const otherRemoteFilesData = remoteFiles.filter(file => file.item.teamProjectLocalId !== projectId).filter(file => !otherFilesData.some(f => f.id === file.item.id));
+  const otherRemoteFilesData = remoteFiles
+    .filter(file => file.item.teamProjectLocalId !== projectId)
+    .filter(file => !otherFilesData.some(f => f.id === file.item.id));
 
-  const otherFiles = [...otherFilesData, ...otherRemoteFilesData].map(file => ({
-    ...file,
-    action: () => {
-      if ('pullUrl' in file && file.pullUrl) {
-        pullFileFetcher.submit({ backendProjectId: file.item.projectId, remoteId: file.item.teamProjectId }, {
-          method: 'POST',
-          action: file.pullUrl,
-        });
+  const otherFiles =
+    [...otherFilesData, ...otherRemoteFilesData].map(file => ({
+      ...file,
+      action: () => {
+        if ('pullUrl' in file && file.pullUrl) {
+          pullFileFetcher.submit(
+            { backendProjectId: file.item.projectId, remoteId: file.item.teamProjectId },
+            {
+              method: 'POST',
+              action: file.pullUrl,
+            },
+          );
 
-        return true;
-      }
+          return true;
+        }
         navigate(file.url);
         return null;
+      },
+    })) || [];
 
-    },
-  })) || [];
+  currentRequests.length > 0 &&
+    comboboxSections.push({
+      id: 'current-requests',
+      name: 'Requests',
+      children: currentRequests.map(request => ({
+        id: request.item._id,
+        icon: isRequest(request.item) ? (
+          <span
+            className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+              {
+                GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+              }[request.item.method] || 'bg-[--hl-md] text-[--color-font]'
+            }`}
+          >
+            {getMethodShortHand(request.item)}
+          </span>
+        ) : isWebSocketRequest(request.item) ? (
+          <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]">
+            WS
+          </span>
+        ) : (
+          isGrpcRequest(request.item) && (
+            <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]">
+              gRPC
+            </span>
+          )
+        ),
+        name: request.name,
+        presence: [],
+        description: request.item.url,
+        textValue: `${isRequest(request.item) ? request.item.method : isWebSocketRequest(request.item) ? 'WebSocket' : 'gRPC'} ${request.name} ${request.url}`,
+      })),
+    });
 
-  currentRequests.length > 0 && comboboxSections.push({
-    id: 'current-requests',
-    name: 'Requests',
-    children: currentRequests.map(request => ({
-      id: request.item._id,
-      icon: isRequest(request.item) ? (
-        <span
-          className={
-            `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-              ${{
-              'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-              'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-              'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-              'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-              'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-              'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-              'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-            }[request.item.method] || 'text-[--color-font] bg-[--hl-md]'}`
-          }
-        >
-          {getMethodShortHand(request.item)}
-        </span>
-      ) : isWebSocketRequest(request.item) ? (
-          <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
-          WS
-        </span>
-        ) : isGrpcRequest(request.item) && (
-            <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
-          gRPC
-        </span>
-      ),
-      name: request.name,
-      presence: [],
-      description: request.item.url,
-      textValue: `${isRequest(request.item) ? request.item.method : isWebSocketRequest(request.item) ? 'WebSocket' : 'gRPC'} ${request.name} ${request.url}`,
-    })),
-  });
+  currentFiles.length > 0 &&
+    comboboxSections.push({
+      id: 'collections-and-documents',
+      name: 'Collections and documents',
+      children: currentFiles.map(file => ({
+        id: file.id,
+        icon: (
+          <span
+            className={`${scopeToBgColorMap[file.item.scope]} ${scopeToTextColorMap[file.item.scope]} flex aspect-square h-6 items-center justify-center rounded`}
+          >
+            <Icon icon={scopeToIconMap[file.item.scope]} className="w-4" />
+          </span>
+        ),
+        name: file.name,
+        description: (
+          <span className="flex items-center gap-1">
+            <span className="px-2 text-[--hl]">{scopeToLabelMap[file.item.scope]}</span>
+          </span>
+        ),
+        textValue: file.name + ' ' + scopeToLabelMap[file.item.scope],
+        presence: presence
+          .filter(p => p.project === file.item.teamProjectId && p.file === file.id)
+          .filter(p => p.acct !== accountId)
+          .map(user => {
+            return {
+              key: user.acct,
+              alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
+              src: user.avatar,
+            };
+          }),
+      })),
+    });
 
-  currentFiles.length > 0 && comboboxSections.push({
-    id: 'collections-and-documents',
-    name: 'Collections and documents',
-    children: currentFiles.map(file => ({
-      id: file.id,
-      icon: <span className={`${scopeToBgColorMap[file.item.scope]} ${scopeToTextColorMap[file.item.scope]} rounded aspect-square h-6 flex items-center justify-center`}><Icon icon={scopeToIconMap[file.item.scope]} className="w-4" /></span>,
-      name: file.name,
-      description: <span className='flex items-center gap-1'><span className='px-2 text-[--hl]'>{scopeToLabelMap[file.item.scope]}</span></span>,
-      textValue: file.name + ' ' + scopeToLabelMap[file.item.scope],
-      presence: presence
-        .filter(p => p.project === file.item.teamProjectId && p.file === file.id)
-        .filter(p => p.acct !== accountId)
-        .map(user => {
-          return {
-            key: user.acct,
-            alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
-            src: user.avatar,
-          };
-        }),
-    })),
-  });
+  currentEnvironments.length > 0 &&
+    comboboxSections.push({
+      id: 'environments',
+      name: 'Environments',
+      children: currentEnvironments.map(environment => ({
+        id: environment._id,
+        icon: (
+          <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[--hl-md] py-1 text-[0.65rem] text-[--color-font]">
+            <Icon
+              icon={environment.isPrivate ? 'laptop-code' : 'globe-americas'}
+              className="w-5 text-xs"
+              style={{
+                color: environment.color ?? 'var(--color-font)',
+              }}
+            />
+          </span>
+        ),
+        name: environment.name,
+        presence: [],
+        description: `${environment.isPrivate ? 'Private' : 'Shared'} environment`,
+        textValue: environment.name,
+      })),
+    });
 
-  currentEnvironments.length > 0 && comboboxSections.push({
-    id: 'environments',
-    name: 'Environments',
-    children: currentEnvironments.map(environment => ({
-      id: environment._id,
-      icon: <span className='w-10 py-1 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font] bg-[--hl-md]'>
-        <Icon
-          icon={environment.isPrivate ? 'laptop-code' : 'globe-americas'}
-          className='text-xs w-5'
-          style={{
-            color: environment.color ?? 'var(--color-font)',
-          }}
-        />
-      </span>,
-      name: environment.name,
-      presence: [],
-      description: `${environment.isPrivate ? 'Private' : 'Shared'} environment`,
-      textValue: environment.name,
-    })),
-  });
+  otherRequests.length > 0 &&
+    comboboxSections.push({
+      id: 'other-requests',
+      name: 'Other Requests',
+      children: otherRequests.map(request => ({
+        id: request.item._id,
+        icon: isRequest(request.item) ? (
+          <span
+            className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+              {
+                GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+              }[request.item.method] || 'bg-[--hl-md] text-[--color-font]'
+            }`}
+          >
+            {getMethodShortHand(request.item)}
+          </span>
+        ) : isWebSocketRequest(request.item) ? (
+          <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]">
+            WS
+          </span>
+        ) : (
+          isGrpcRequest(request.item) && (
+            <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]">
+              gRPC
+            </span>
+          )
+        ),
+        name: request.name,
+        presence: [],
+        description: (
+          <span className="flex items-center gap-1">
+            {request.organizationName}
+            <span>/</span>
+            {request.projectName}
+            <span>/</span>
+            {request.workspaceName}
+          </span>
+        ),
+        textValue: !isRequestGroup(request.item)
+          ? `${isRequest(request.item) ? request.item.method : isWebSocketRequest(request.item) ? 'WebSocket' : 'gRPC'} ${request.name} ${request.url}`
+          : '',
+      })),
+    });
 
-  otherRequests.length > 0 && comboboxSections.push({
-    id: 'other-requests',
-    name: 'Other Requests',
-    children: otherRequests.map(request => ({
-      id: request.item._id,
-      icon: isRequest(request.item) ? (
-        <span
-          className={
-            `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-              ${{
-              'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-              'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-              'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-              'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-              'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-              'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-              'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-            }[request.item.method] || 'text-[--color-font] bg-[--hl-md]'}`
-          }
-        >
-          {getMethodShortHand(request.item)}
-        </span>
-      ) : isWebSocketRequest(request.item) ? (
-          <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
-          WS
-        </span>
-      ) : isGrpcRequest(request.item) && (
-            <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
-          gRPC
-        </span>
-      ),
-      name: request.name,
-      presence: [],
-      description: <span className='flex items-center gap-1'>{request.organizationName}<span>/</span>{request.projectName}<span>/</span>{request.workspaceName}</span>,
-      textValue: !isRequestGroup(request.item) ? `${isRequest(request.item) ? request.item.method : isWebSocketRequest(request.item) ? 'WebSocket' : 'gRPC'} ${request.name} ${request.url}` : '',
-    })),
-  });
-
-  otherFiles.length > 0 && comboboxSections.push({
-    id: 'other-collections-and-documents',
-    name: 'Other collections and documents',
-    children: otherFiles.map(file => ({
-      id: file.id,
-      icon: <span className={`${scopeToBgColorMap[file.item.scope]} ${scopeToTextColorMap[file.item.scope]} rounded aspect-square h-6 flex items-center justify-center`}><Icon icon={scopeToIconMap[file.item.scope]} className="w-4" /></span>,
-      name: file.name,
-      description: <span className='flex items-center gap-1'><span className='px-2 text-[--hl]'>{scopeToLabelMap[file.item.scope]}</span>{file.organizationName}<span>/</span>{file.projectName}</span>,
-      textValue: file.name + ' ' + scopeToLabelMap[file.item.scope],
-      presence: presence
-        .filter(p => p.project === file.item.teamProjectId && p.file === file.id)
-        .filter(p => p.acct !== accountId)
-        .map(user => {
-          return {
-            key: user.acct,
-            alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
-            src: user.avatar,
-          };
-        }),
-    })),
-  });
+  otherFiles.length > 0 &&
+    comboboxSections.push({
+      id: 'other-collections-and-documents',
+      name: 'Other collections and documents',
+      children: otherFiles.map(file => ({
+        id: file.id,
+        icon: (
+          <span
+            className={`${scopeToBgColorMap[file.item.scope]} ${scopeToTextColorMap[file.item.scope]} flex aspect-square h-6 items-center justify-center rounded`}
+          >
+            <Icon icon={scopeToIconMap[file.item.scope]} className="w-4" />
+          </span>
+        ),
+        name: file.name,
+        description: (
+          <span className="flex items-center gap-1">
+            <span className="px-2 text-[--hl]">{scopeToLabelMap[file.item.scope]}</span>
+            {file.organizationName}
+            <span>/</span>
+            {file.projectName}
+          </span>
+        ),
+        textValue: file.name + ' ' + scopeToLabelMap[file.item.scope],
+        presence: presence
+          .filter(p => p.project === file.item.teamProjectId && p.file === file.id)
+          .filter(p => p.acct !== accountId)
+          .map(user => {
+            return {
+              key: user.acct,
+              alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
+              src: user.avatar,
+            };
+          }),
+      })),
+    });
 
   const prevPullFetcherState = useRef(pullFileFetcher.state);
   useEffect(() => {
@@ -366,12 +437,12 @@ const CommandPaletteCombobox = ({ close }: { close: () => void }) => {
 
   return (
     <ComboBox
-      aria-label='Quick switcher'
-      className='group overflow-hidden'
+      aria-label="Quick switcher"
+      className="group overflow-hidden"
       isDisabled={isPullingFile}
       autoFocus
       allowsCustomValue={false}
-      menuTrigger='focus'
+      menuTrigger="focus"
       shouldFocusWrap
       onInputChange={filter => {
         const searchParams = new URLSearchParams();
@@ -384,11 +455,7 @@ const CommandPaletteCombobox = ({ close }: { close: () => void }) => {
         commandsLoader.load(`/commands?${searchParams.toString()}`);
       }}
       defaultFilter={(textValue, filter) => {
-        return Boolean(fuzzyMatch(
-          filter,
-          textValue,
-          { splitSpace: false, loose: true }
-        )?.indexes);
+        return Boolean(fuzzyMatch(filter, textValue, { splitSpace: false, loose: true })?.indexes);
       }}
       onSelectionChange={itemId => {
         if (!itemId) {
@@ -413,70 +480,69 @@ const CommandPaletteCombobox = ({ close }: { close: () => void }) => {
       {({ isOpen }) => {
         return (
           <>
-            <Label
-              aria-label="Filter"
-              className="group relative flex items-center flex-1 pt-0"
-            >
+            <Label aria-label="Filter" className="group relative flex flex-1 items-center pt-0">
               {isPullingFile ? (
                 <>
-                  <Icon icon="spinner" className="text-[--color-font] absolute left-4 animate-spin" />
+                  <Icon icon="spinner" className="absolute left-4 animate-spin text-[--color-font]" />
                   <div
-                    slot='input'
-                    className="py-3 pl-10 pr-7 w-full bg-[--color-bg] transition-none text-[--color-font] rounded-md group-data-[open]:rounded-b-none border border-solid border-[--hl-sm]"
+                    slot="input"
+                    className="w-full rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-3 pl-10 pr-7 text-[--color-font] transition-none group-data-[open]:rounded-b-none"
                   >
                     Pulling: {pullingFile?.name}
                   </div>
                 </>
               ) : (
                 <>
-                    <Icon icon="search" className="text-[--color-font] absolute left-4" />
-                    <Input
-                      slot='input'
-                      placeholder="Search and switch between requests, collections and documents"
-                      className="py-3 pl-10 pr-7 w-full bg-[--color-bg] transition-none text-[--color-font] rounded-md group-data-[open]:rounded-b-none border border-solid border-[--hl-sm]"
-                    />
+                  <Icon icon="search" className="absolute left-4 text-[--color-font]" />
+                  <Input
+                    slot="input"
+                    placeholder="Search and switch between requests, collections and documents"
+                    className="w-full rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-3 pl-10 pr-7 text-[--color-font] transition-none group-data-[open]:rounded-b-none"
+                  />
                 </>
               )}
             </Label>
-            <Popover offset={0} className={`outline-none rounded-b-md w-[--trigger-width] bg-[--color-bg] text-[--color-font] relative overflow-y-auto flex-1 border ${isOpen ? 'border-solid' : ''} border-[--hl-sm]`}>
-                <ListBox
-                  aria-label='Commands'
-                  className="outline-none relative overflow-y-auto flex-1"
-                  items={comboboxSections}
-                >
-                  {section => (
-                    <Section className='flex-1 flex flex-col'>
-                      <Header className='p-2 text-xs uppercase text-[--hl] select-none'>{section.name}</Header>
-                      <Collection items={section.children}>
-                        {item => (
-                          <ListBoxItem textValue={item.textValue} className="group outline-none select-none">
-                            <div
-                              className={`flex select-none outline-none ${item.id === workspaceId || item.id === requestId ? 'text-[--color-font] font-bold' : 'text-[--hl]'} group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-data-[focused]:bg-[--hl-sm] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden`}
-                            >
-                              {item.icon}
-                              <Text className="flex-shrink-0 px-1 truncate" slot="label">{item.name}</Text>
-                              {item.presence.length > 0 && (
-                                <span className='w-[70px]'>
-                                  <AvatarGroup
-                                    size="small"
-                                    maxAvatars={3}
-                                    items={item.presence}
-                                  />
-                                </span>
-                              )}
-                              <Text className="flex-1 px-1 truncate text-sm text-[--hl-md]" slot="description">{item.description}</Text>
-                            </div>
-                          </ListBoxItem>
-                        )}
-                      </Collection>
-                    </Section>
-                  )}
+            <Popover
+              offset={0}
+              className={`relative w-[--trigger-width] flex-1 overflow-y-auto rounded-b-md border bg-[--color-bg] text-[--color-font] outline-none ${isOpen ? 'border-solid' : ''} border-[--hl-sm]`}
+            >
+              <ListBox
+                aria-label="Commands"
+                className="relative flex-1 overflow-y-auto outline-none"
+                items={comboboxSections}
+              >
+                {section => (
+                  <Section className="flex flex-1 flex-col">
+                    <Header className="select-none p-2 text-xs uppercase text-[--hl]">{section.name}</Header>
+                    <Collection items={section.children}>
+                      {item => (
+                        <ListBoxItem textValue={item.textValue} className="group select-none outline-none">
+                          <div
+                            className={`flex select-none outline-none ${item.id === workspaceId || item.id === requestId ? 'font-bold text-[--color-font]' : 'text-[--hl]'} relative h-[--line-height-xs] w-full items-center gap-2 overflow-hidden px-4 transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font] group-data-[focused]:bg-[--hl-sm]`}
+                          >
+                            {item.icon}
+                            <Text className="flex-shrink-0 truncate px-1" slot="label">
+                              {item.name}
+                            </Text>
+                            {item.presence.length > 0 && (
+                              <span className="w-[70px]">
+                                <AvatarGroup size="small" maxAvatars={3} items={item.presence} />
+                              </span>
+                            )}
+                            <Text className="flex-1 truncate px-1 text-sm text-[--hl-md]" slot="description">
+                              {item.description}
+                            </Text>
+                          </div>
+                        </ListBoxItem>
+                      )}
+                    </Collection>
+                  </Section>
+                )}
               </ListBox>
             </Popover>
           </>
         );
       }}
-
     </ComboBox>
   );
 };
diff --git a/packages/insomnia/src/ui/components/design-empty-state.tsx b/packages/insomnia/src/ui/components/design-empty-state.tsx
index 4f93f29430..bd9f1928e1 100644
--- a/packages/insomnia/src/ui/components/design-empty-state.tsx
+++ b/packages/insomnia/src/ui/components/design-empty-state.tsx
@@ -61,19 +61,19 @@ export const DesignEmptyState: FC<Props> = ({ onImport }) => {
   }[];
 
   return (
-    <div className='flex items-center select-none absolute top-0 left-0 w-full h-full pointer-events-none'>
-      <div className="h-full w-full flex-1 overflow-y-auto divide-solid divide-y divide-[--hl-md] p-[--padding-md] flex flex-col items-center gap-2 overflow-hidden text-[--hl-lg]">
-        <Heading className="text-lg p-[--padding-sm] font-bold flex-1 flex items-center flex-col gap-2">
-          <Icon icon="drafting-compass" className="flex-1 w-28" />
+    <div className="pointer-events-none absolute left-0 top-0 flex h-full w-full select-none items-center">
+      <div className="flex h-full w-full flex-1 flex-col items-center gap-2 divide-y divide-solid divide-[--hl-md] overflow-hidden overflow-y-auto p-[--padding-md] text-[--hl-lg]">
+        <Heading className="flex flex-1 flex-col items-center gap-2 p-[--padding-sm] text-lg font-bold">
+          <Icon icon="drafting-compass" className="w-28 flex-1" />
           <span>Enter an OpenAPI specification here</span>
         </Heading>
-        <div className="flex-1 w-full flex flex-col justify-evenly items-center gap-2 p-[--padding-sm]">
+        <div className="flex w-full flex-1 flex-col items-center justify-evenly gap-2 p-[--padding-sm]">
           <p className="flex items-center gap-2">
             <Icon icon="lightbulb" />
-            <span className="truncate flex items-center gap-2">
+            <span className="flex items-center gap-2 truncate">
               Or import an existing OpenAPI spec or
               <Button
-                className="underline pointer-events-auto font-bold text-[--hl-lg] hover:text-[--hl] focus:text-[--hl] transition-colors"
+                className="pointer-events-auto font-bold text-[--hl-lg] underline transition-colors hover:text-[--hl] focus:text-[--hl]"
                 onPress={async () => {
                   const spec = await import('./example-openapi-spec');
 
@@ -87,26 +87,26 @@ export const DesignEmptyState: FC<Props> = ({ onImport }) => {
           <MenuTrigger>
             <Button
               aria-label="Project Actions"
-              className="pointer-events-auto items-center bg-[--hl-xs] gap-2 p-4 hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="pointer-events-auto flex aspect-square h-6 items-center justify-center gap-2 rounded-sm bg-[--hl-xs] p-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
             >
               <span>Import OpenAPI</span>
               <Icon icon="caret-down" />
             </Button>
-            <Popover className="min-w-max overflow-y-hidden flex flex-col">
+            <Popover className="flex min-w-max flex-col overflow-y-hidden">
               <Menu
-                aria-label='Import OpenAPI Dropdown'
+                aria-label="Import OpenAPI Dropdown"
                 selectionMode="single"
                 onAction={key => {
                   importActionsList.find(({ id }) => key === id)?.action();
                 }}
                 items={importActionsList}
-                className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
               >
                 {item => (
                   <MenuItem
                     key={item.id}
                     id={item.id}
-                    className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                    className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                     aria-label={item.name}
                   >
                     <Icon icon={item.icon} />
@@ -119,7 +119,7 @@ export const DesignEmptyState: FC<Props> = ({ onImport }) => {
           <ul className="flex flex-col gap-2">
             <li>
               <a
-                className="pointer-events-auto font-bold flex items-center gap-2 text-sm hover:text-[--hl] focus:text-[--hl] transition-colors"
+                className="pointer-events-auto flex items-center gap-2 text-sm font-bold transition-colors hover:text-[--hl] focus:text-[--hl]"
                 href={documentationLinks.workingWithDesignDocs.url}
               >
                 <span className="truncate">{documentationLinks.workingWithDesignDocs.title}</span>
diff --git a/packages/insomnia/src/ui/components/diff-view-editor.tsx b/packages/insomnia/src/ui/components/diff-view-editor.tsx
index 58b243d23c..8256a27353 100644
--- a/packages/insomnia/src/ui/components/diff-view-editor.tsx
+++ b/packages/insomnia/src/ui/components/diff-view-editor.tsx
@@ -5,19 +5,11 @@ import { parseColor } from 'react-aria-components';
 
 import { useRootLoaderData } from '../routes/root';
 
-export const DiffEditor = ({
-  original,
-  modified,
-}: {
-  original: string;
-  modified: string;
-}) => {
+export const DiffEditor = ({ original, modified }: { original: string; modified: string }) => {
   const monacoEl = useRef(null);
   const monacoEditorRef = useRef<monaco.editor.IStandaloneDiffEditor | null>(null);
 
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
 
   useEffect(() => {
     const computedStyles = window.getComputedStyle(document.body);
@@ -94,8 +86,8 @@ export const DiffEditor = ({
       return () => diffEditor?.dispose();
     }
 
-    return () => { };
+    return () => {};
   }, [modified, original]);
 
-  return <div className='w-full h-full' ref={monacoEl} />;
+  return <div className="h-full w-full" ref={monacoEl} />;
 };
diff --git a/packages/insomnia/src/ui/components/document-tab.tsx b/packages/insomnia/src/ui/components/document-tab.tsx
index d77e1be7a9..b65cf7016b 100644
--- a/packages/insomnia/src/ui/components/document-tab.tsx
+++ b/packages/insomnia/src/ui/components/document-tab.tsx
@@ -11,7 +11,7 @@ interface Props {
 
 export const DocumentTab = ({ organizationId, projectId, workspaceId, className }: Props) => {
   return (
-    <nav className={`flex w-full h-[40px] items-center ${className} px-1 justify-around`}>
+    <nav className={`flex h-[40px] w-full items-center ${className} justify-around px-1`}>
       {[
         { id: 'spec', name: 'Spec' },
         { id: 'debug', name: 'Collection' },
@@ -20,10 +20,12 @@ export const DocumentTab = ({ organizationId, projectId, workspaceId, className
         <NavLink
           key={item.id}
           to={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/${item.id}`}
-          className={({ isActive, isPending }) => classnames('text-center rounded-full px-2', {
-            'text-[--color-font-surprise] bg-[--color-surprise]': isActive,
-            'animate-pulse': isPending,
-          })}
+          className={({ isActive, isPending }) =>
+            classnames('rounded-full px-2 text-center', {
+              'bg-[--color-surprise] text-[--color-font-surprise]': isActive,
+              'animate-pulse': isPending,
+            })
+          }
           data-testid={`workspace-${item.id}`}
         >
           {item.name}
diff --git a/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx
index 60f5374fc5..9920be44e0 100644
--- a/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/auth-dropdown.tsx
@@ -1,12 +1,27 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC, useCallback } from 'react';
-import { Button, Collection, Header, ListBox, ListBoxItem, Popover, Section, Select, SelectValue } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Header,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Section,
+  Select,
+  SelectValue,
+} from 'react-aria-components';
 import { useParams } from 'react-router-dom';
 
-import {
-  HAWK_ALGORITHM_SHA256,
-} from '../../../common/constants';
-import type { AuthTypeAPIKey, AuthTypeAwsIam, AuthTypeBasic, AuthTypeNTLM, AuthTypes, RequestAuthentication } from '../../../models/request';
+import { HAWK_ALGORITHM_SHA256 } from '../../../common/constants';
+import type {
+  AuthTypeAPIKey,
+  AuthTypeAwsIam,
+  AuthTypeBasic,
+  AuthTypeNTLM,
+  AuthTypes,
+  RequestAuthentication,
+} from '../../../models/request';
 import { getAuthObjectOrNull } from '../../../network/authentication';
 import { SIGNATURE_METHOD_HMAC_SHA1 } from '../../../network/o-auth-1/constants';
 import { GRANT_TYPE_AUTHORIZATION_CODE } from '../../../network/o-auth-2/constants';
@@ -133,19 +148,28 @@ interface Props {
 }
 
 export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTypes, disabled = false }) => {
-  const { requestId, requestGroupId } = useParams() as { organizationId: string; projectId: string; workspaceId: string; requestId?: string; requestGroupId?: string };
+  const { requestId, requestGroupId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+    requestId?: string;
+    requestGroupId?: string;
+  };
   const patchRequest = useRequestPatcher();
   const patchRequestGroup = useRequestGroupPatcher();
-  const onClick = useCallback(async (type: AuthTypes | 'inherit') => {
-    const clickedSameSetting = type === getAuthObjectOrNull(authentication)?.type || '';
-    if (clickedSameSetting) {
-      return;
-    }
-    const selectedInherit = type === 'inherit';
-    const newAuthentication = selectedInherit ? {} : castOneAuthTypeToAnother(type, authentication || {});
-    requestId && patchRequest(requestId, { authentication: newAuthentication });
-    requestGroupId && patchRequestGroup(requestGroupId, { authentication: newAuthentication });
-  }, [authentication, patchRequest, patchRequestGroup, requestGroupId, requestId]);
+  const onClick = useCallback(
+    async (type: AuthTypes | 'inherit') => {
+      const clickedSameSetting = type === getAuthObjectOrNull(authentication)?.type || '';
+      if (clickedSameSetting) {
+        return;
+      }
+      const selectedInherit = type === 'inherit';
+      const newAuthentication = selectedInherit ? {} : castOneAuthTypeToAnother(type, authentication || {});
+      requestId && patchRequest(requestId, { authentication: newAuthentication });
+      requestGroupId && patchRequestGroup(requestGroupId, { authentication: newAuthentication });
+    },
+    [authentication, patchRequest, patchRequestGroup, requestGroupId, requestId],
+  );
 
   const selectedAuthType = getAuthObjectOrNull(authentication)?.type || 'inherit';
 
@@ -153,51 +177,51 @@ export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTyp
     id: AuthTypes;
     name: string;
   }[] = [
-      {
-        id: 'apikey',
-        name: 'API Key',
-      },
-      {
-        id: 'basic',
-        name: 'Basic',
-      },
-      {
-        id: 'digest',
-        name: 'Digest',
-      },
-      {
-        id: 'ntlm',
-        name: 'NTLM',
-      },
-      {
-        id: 'oauth1',
-        name: 'OAuth 1.0',
-      },
-      {
-        id: 'oauth2',
-        name: 'OAuth 2.0',
-      },
-      {
-        id: 'iam',
-        name: 'AWS IAM',
-      },
-      {
-        id: 'bearer',
-        name: 'Bearer Token',
-      },
-      {
-        id: 'hawk',
-        name: 'Hawk',
-      },
-      {
-        id: 'asap',
-        name: 'Atlassian ASAP',
-      },
-      {
-        id: 'netrc',
-        name: 'Netrc',
-      },
-    ];
+    {
+      id: 'apikey',
+      name: 'API Key',
+    },
+    {
+      id: 'basic',
+      name: 'Basic',
+    },
+    {
+      id: 'digest',
+      name: 'Digest',
+    },
+    {
+      id: 'ntlm',
+      name: 'NTLM',
+    },
+    {
+      id: 'oauth1',
+      name: 'OAuth 1.0',
+    },
+    {
+      id: 'oauth2',
+      name: 'OAuth 2.0',
+    },
+    {
+      id: 'iam',
+      name: 'AWS IAM',
+    },
+    {
+      id: 'bearer',
+      name: 'Bearer Token',
+    },
+    {
+      id: 'hawk',
+      name: 'Hawk',
+    },
+    {
+      id: 'asap',
+      name: 'Atlassian ASAP',
+    },
+    {
+      id: 'netrc',
+      name: 'Netrc',
+    },
+  ];
 
   const authTypeSections: {
     id: string;
@@ -208,28 +232,28 @@ export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTyp
       name: string;
     }[];
   }[] = [
-      {
-        id: 'Other',
-        name: 'Other',
-        icon: 'ellipsis-h',
-        items: [
-          {
-            id: 'inherit',
-            name: 'Inherit from parent',
-          },
-          {
-            id: 'none',
-            name: 'None',
-          },
-        ],
-      },
-      {
-        id: 'Auth Types',
-        name: 'Auth Types',
-        icon: 'lock',
-        items: authTypesItems.filter(item => authTypes.includes(item.id)),
-      },
-    ];
+    {
+      id: 'Other',
+      name: 'Other',
+      icon: 'ellipsis-h',
+      items: [
+        {
+          id: 'inherit',
+          name: 'Inherit from parent',
+        },
+        {
+          id: 'none',
+          name: 'None',
+        },
+      ],
+    },
+    {
+      id: 'Auth Types',
+      name: 'Auth Types',
+      icon: 'lock',
+      items: authTypesItems.filter(item => authTypes.includes(item.id)),
+    },
+  ];
 
   return (
     <Select
@@ -241,42 +265,35 @@ export const AuthDropdown: FC<Props> = ({ authentication, authTypes = defaultTyp
       }}
       selectedKey={selectedAuthType}
     >
-      <Button className="px-4 min-w-[17ch] py-1 font-bold flex flex-1 items-center justify-between gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-        <SelectValue className="flex truncate items-center justify-center gap-2">
+      <Button className="flex min-w-[17ch] flex-1 items-center justify-between gap-2 rounded-sm px-4 py-1 text-sm font-bold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+        <SelectValue className="flex items-center justify-center gap-2 truncate">
           {({ selectedText }) => (
-            <div className='flex items-center gap-2 text-[--hl]'>
-              {selectedText || 'Auth Type'}
-            </div>
+            <div className="flex items-center gap-2 text-[--hl]">{selectedText || 'Auth Type'}</div>
           )}
         </SelectValue>
         <Icon icon="caret-down" />
       </Button>
-      <Popover className="min-w-max overflow-y-hidden flex flex-col">
+      <Popover className="flex min-w-max flex-col overflow-y-hidden">
         <ListBox
           items={authTypeSections}
-          className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
         >
           {section => (
             <Section>
-              <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+              <Header className="flex items-center gap-2 py-1 pl-2 text-xs uppercase text-[--hl]">
                 <Icon icon={section.icon} /> <span>{section.name}</span>
               </Header>
               <Collection items={section.items}>
                 {item => (
                   <ListBoxItem
-                    className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                    className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                     aria-label={item.name}
                     textValue={item.name}
                   >
                     {({ isSelected }) => (
                       <>
                         <span>{item.name}</span>
-                        {isSelected && (
-                          <Icon
-                            icon="check"
-                            className="text-[--color-success] justify-self-end"
-                          />
-                        )}
+                        {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                       </>
                     )}
                   </ListBoxItem>
diff --git a/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx
index 7c2fa57342..ee4d6e16a3 100644
--- a/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/content-type-dropdown.tsx
@@ -1,6 +1,16 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC } from 'react';
-import { Button, Collection, Header, ListBox, ListBoxItem, Popover, Section, Select, SelectValue } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Header,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Section,
+  Select,
+  SelectValue,
+} from 'react-aria-components';
 import { useParams, useRouteLoaderData } from 'react-router-dom';
 
 import {
@@ -36,72 +46,72 @@ const contentTypeSections: {
     name: string;
   }[];
 }[] = [
-    {
-      id: 'structured',
-      name: 'Structured',
-      icon: 'bars',
-      items: [
-        {
-          id: CONTENT_TYPE_FORM_DATA,
-          name: 'Form Data',
-        },
-        {
-          id: CONTENT_TYPE_FORM_URLENCODED,
-          name: 'Form URL Encoded',
-        },
-        {
-          id: CONTENT_TYPE_GRAPHQL,
-          name: 'GraphQL',
-        },
-      ],
-    },
-    {
-      id: 'text',
-      icon: 'code',
-      name: 'Text',
-      items: [
-        {
-          id: CONTENT_TYPE_JSON,
-          name: 'JSON',
-        },
-        {
-          id: CONTENT_TYPE_XML,
-          name: 'XML',
-        },
-        {
-          id: CONTENT_TYPE_YAML,
-          name: 'YAML',
-        },
-        {
-          id: CONTENT_TYPE_EDN,
-          name: 'EDN',
-        },
-        {
-          id: CONTENT_TYPE_PLAINTEXT,
-          name: 'Plain Text',
-        },
-        {
-          id: CONTENT_TYPE_OTHER,
-          name: 'Other',
-        },
-      ],
-    },
-    {
-      id: 'other',
-      icon: 'ellipsis-h',
-      name: 'Other',
-      items: [
-        {
-          id: CONTENT_TYPE_FILE,
-          name: 'File',
-        },
-        {
-          id: 'no-body',
-          name: 'No Body',
-        },
-      ],
-    },
-  ];
+  {
+    id: 'structured',
+    name: 'Structured',
+    icon: 'bars',
+    items: [
+      {
+        id: CONTENT_TYPE_FORM_DATA,
+        name: 'Form Data',
+      },
+      {
+        id: CONTENT_TYPE_FORM_URLENCODED,
+        name: 'Form URL Encoded',
+      },
+      {
+        id: CONTENT_TYPE_GRAPHQL,
+        name: 'GraphQL',
+      },
+    ],
+  },
+  {
+    id: 'text',
+    icon: 'code',
+    name: 'Text',
+    items: [
+      {
+        id: CONTENT_TYPE_JSON,
+        name: 'JSON',
+      },
+      {
+        id: CONTENT_TYPE_XML,
+        name: 'XML',
+      },
+      {
+        id: CONTENT_TYPE_YAML,
+        name: 'YAML',
+      },
+      {
+        id: CONTENT_TYPE_EDN,
+        name: 'EDN',
+      },
+      {
+        id: CONTENT_TYPE_PLAINTEXT,
+        name: 'Plain Text',
+      },
+      {
+        id: CONTENT_TYPE_OTHER,
+        name: 'Other',
+      },
+    ],
+  },
+  {
+    id: 'other',
+    icon: 'ellipsis-h',
+    name: 'Other',
+    items: [
+      {
+        id: CONTENT_TYPE_FILE,
+        name: 'File',
+      },
+      {
+        id: 'no-body',
+        name: 'No Body',
+      },
+    ],
+  },
+];
 
 export const ContentTypeDropdown: FC = () => {
   const { activeRequest } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
@@ -164,45 +174,40 @@ export const ContentTypeDropdown: FC = () => {
       }}
       selectedKey={body.mimeType ?? 'no-body'}
     >
-      <Button className="px-4 min-w-[12ch] py-1 font-bold flex flex-1 items-center justify-between gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-        <SelectValue className="flex truncate items-center justify-center gap-2">
-          <div className='flex items-center gap-2 text-[--hl]'>
+      <Button className="flex min-w-[12ch] flex-1 items-center justify-between gap-2 rounded-sm px-4 py-1 text-sm font-bold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+        <SelectValue className="flex items-center justify-center gap-2 truncate">
+          <div className="flex items-center gap-2 text-[--hl]">
             {hasMimeType ? getContentTypeName(body.mimeType) : 'No Body'}
-            {numBodyParams ?
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
+            {numBodyParams ? (
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
                 {numBodyParams}
               </span>
-              : null}
+            ) : null}
           </div>
         </SelectValue>
         <Icon icon="caret-down" />
       </Button>
-      <Popover className="min-w-max overflow-y-hidden flex flex-col">
+      <Popover className="flex min-w-max flex-col overflow-y-hidden">
         <ListBox
           items={contentTypeSections}
-          className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
         >
           {section => (
             <Section>
-              <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+              <Header className="flex items-center gap-2 py-1 pl-2 text-xs uppercase text-[--hl]">
                 <Icon icon={section.icon} /> <span>{section.name}</span>
               </Header>
               <Collection items={section.items}>
                 {item => (
                   <ListBoxItem
-                    className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                    className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                     aria-label={item.name}
                     textValue={item.name}
                   >
                     {({ isSelected }) => (
                       <>
                         <span>{item.name}</span>
-                        {isSelected && (
-                          <Icon
-                            icon="check"
-                            className="text-[--color-success] justify-self-end"
-                          />
-                        )}
+                        {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                       </>
                     )}
                   </ListBoxItem>
@@ -231,8 +236,7 @@ export function newBodyGraphQL(rawBody: string): RequestBody {
         text: rawBody,
       };
     }
-      throw error;
-
+    throw error;
   }
 }
 
diff --git a/packages/insomnia/src/ui/components/dropdowns/dashboard-sort-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/dashboard-sort-dropdown.tsx
index cbd8cf55ab..bc7d0863af 100644
--- a/packages/insomnia/src/ui/components/dropdowns/dashboard-sort-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/dashboard-sort-dropdown.tsx
@@ -12,7 +12,7 @@ interface DashboardSortDropdownProps {
 export const DashboardSortDropdown: FC<DashboardSortDropdownProps> = ({ onSelect, value }) => {
   return (
     <Dropdown
-      aria-label='Dashboard Sort Dropdown'
+      aria-label="Dashboard Sort Dropdown"
       className="margin-left"
       triggerButton={
         <Button>
@@ -21,10 +21,7 @@ export const DashboardSortDropdown: FC<DashboardSortDropdownProps> = ({ onSelect
       }
     >
       {DASHBOARD_SORT_ORDERS.map(order => (
-        <DropdownItem
-          key={order}
-          aria-label={dashboardSortOrderName[order]}
-        >
+        <DropdownItem key={order} aria-label={dashboardSortOrderName[order]}>
           <ItemContent
             label={dashboardSortOrderName[order]}
             isSelected={order === value}
diff --git a/packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx
index 74072e3824..df5bc43832 100644
--- a/packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/git-project-sync-dropdown.tsx
@@ -1,6 +1,16 @@
 import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC, useEffect, useState } from 'react';
-import { Button, Collection, Menu, MenuItem, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  Section,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRevalidator } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
@@ -36,8 +46,7 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
     projectId: string;
   };
 
-  const [isGitRepoSettingsModalOpen, setIsGitRepoSettingsModalOpen] =
-    useState(false);
+  const [isGitRepoSettingsModalOpen, setIsGitRepoSettingsModalOpen] = useState(false);
   const [isGitBranchesModalOpen, setIsGitBranchesModalOpen] = useState(false);
   const [isGitLogModalOpen, setIsGitLogModalOpen] = useState(false);
   const [isGitStagingModalOpen, setIsGitStagingModalOpen] = useState(false);
@@ -55,33 +64,31 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
   const [isPulling, setIsPulling] = useState(false);
 
   useEffect(() => {
-    if (
-      gitRepository?.uri &&
-      gitRepository?._id &&
-      gitRepoDataFetcher.state === 'idle' &&
-      !gitRepoDataFetcher.data
-    ) {
+    if (gitRepository?.uri && gitRepository?._id && gitRepoDataFetcher.state === 'idle' && !gitRepoDataFetcher.data) {
       // file://./../../routes/git-actions.tsx#gitRepoLoader
       gitRepoDataFetcher.load(`/organization/${organizationId}/project/${projectId}/git/repo`);
     }
-  }, [
-    gitRepoDataFetcher,
-    gitRepository?.uri,
-    gitRepository?._id,
-    organizationId,
-    projectId,
-  ]);
+  }, [gitRepoDataFetcher, gitRepository?.uri, gitRepository?._id, organizationId, projectId]);
 
   // Only fetch the repo status if we have a repo uri and we don't have the status already
-  const shouldFetchGitRepoStatus = Boolean(gitRepository?.uri && gitRepository?._id && gitStatusFetcher.state === 'idle' && !gitStatusFetcher.data && gitRepoDataFetcher.data);
+  const shouldFetchGitRepoStatus = Boolean(
+    gitRepository?.uri &&
+      gitRepository?._id &&
+      gitStatusFetcher.state === 'idle' &&
+      !gitStatusFetcher.data &&
+      gitRepoDataFetcher.data,
+  );
 
   useEffect(() => {
     if (shouldFetchGitRepoStatus) {
       // file://./../../routes/git-actions.tsx#gitStatusAction
-      gitStatusFetcher.submit({}, {
-        action: `/organization/${organizationId}/project/${projectId}/git/status`,
-        method: 'post',
-      });
+      gitStatusFetcher.submit(
+        {},
+        {
+          action: `/organization/${organizationId}/project/${projectId}/git/status`,
+          method: 'post',
+        },
+      );
     }
   }, [gitStatusFetcher, organizationId, projectId, shouldFetchGitRepoStatus]);
 
@@ -112,9 +119,7 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
 
   useEffect(() => {
     const gitRepoDataErrors =
-      gitRepoDataFetcher.data && 'errors' in gitRepoDataFetcher.data
-        ? gitRepoDataFetcher.data.errors
-        : [];
+      gitRepoDataFetcher.data && 'errors' in gitRepoDataFetcher.data ? gitRepoDataFetcher.data.errors : [];
     const errors = [...gitRepoDataErrors];
     if (errors.length > 0) {
       showAlert({
@@ -142,7 +147,7 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
       {
         action: `/organization/${organizationId}/project/${projectId}/git/push`,
         method: 'post',
-      }
+      },
     );
   }
 
@@ -177,106 +182,110 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
     icon: IconName;
     isDisabled?: boolean;
     action: () => void;
-  }[] = (isSynced ? [
-    {
-      id: 'commit',
-      icon: 'check',
-      isDisabled: false,
-      label: 'Commit',
-      action: () => setIsGitStagingModalOpen(true),
-    },
-    {
-      id: 'pull',
-      icon: isPulling ? 'refresh' : 'cloud-download',
-      label: 'Pull',
-      isDisabled: false,
-      action: async () => {
-        try {
-          setIsPulling(true);
-          await pullFromGitRemote({ projectId }).then(result => {
-            if ('errors' in result && result.errors) {
+  }[] = isSynced
+    ? [
+        {
+          id: 'commit',
+          icon: 'check',
+          isDisabled: false,
+          label: 'Commit',
+          action: () => setIsGitStagingModalOpen(true),
+        },
+        {
+          id: 'pull',
+          icon: isPulling ? 'refresh' : 'cloud-download',
+          label: 'Pull',
+          isDisabled: false,
+          action: async () => {
+            try {
+              setIsPulling(true);
+              await pullFromGitRemote({ projectId })
+                .then(result => {
+                  if ('errors' in result && result.errors) {
+                    showAlert({
+                      title: 'Pull Failed',
+                      message: (
+                        <>
+                          {result.errors.join('\n')}
+                          <ConfigLink {...{ gitRepository, errors: [result.errors.join('\n')] }} />
+                        </>
+                      ),
+                      bodyClassName: 'whitespace-break-spaces',
+                    });
+                  }
+                  if ('conflicts' in result) {
+                    showModal(SyncMergeModal, {
+                      conflicts: result.conflicts,
+                      labels: result.labels,
+                      handleDone: (conflicts?: MergeConflict[]) => {
+                        if (Array.isArray(conflicts) && conflicts.length > 0) {
+                          setIsPulling(true);
+                          continueMerge({
+                            projectId,
+                            handledMergeConflicts: conflicts,
+                            commitMessage: result.commitMessage,
+                            commitParent: result.commitParent,
+                          }).finally(() => {
+                            setIsPulling(false);
+                            revalidate();
+                          });
+                        } else {
+                          // user aborted merge, do nothing
+                        }
+                      },
+                    });
+                  }
+                })
+                .finally(() => {
+                  setIsPulling(false);
+                  revalidate();
+                });
+            } catch (err) {
+              const message = err instanceof Error ? err.message : 'An error occurred while pulling';
               showAlert({
                 title: 'Pull Failed',
                 message: (
                   <>
-                    {result.errors.join('\n')}
-                    <ConfigLink {...{ gitRepository, errors: [result.errors.join('\n')] }} />
+                    {message}
+                    <ConfigLink {...{ gitRepository, errors: [message] }} />
                   </>
                 ),
                 bodyClassName: 'whitespace-break-spaces',
               });
             }
-            if ('conflicts' in result) {
-              showModal(SyncMergeModal, {
-                conflicts: result.conflicts,
-                labels: result.labels,
-                handleDone: (conflicts?: MergeConflict[]) => {
-                  if (Array.isArray(conflicts) && conflicts.length > 0) {
-                    setIsPulling(true);
-                    continueMerge({
-                      projectId,
-                      handledMergeConflicts: conflicts,
-                      commitMessage: result.commitMessage,
-                      commitParent: result.commitParent,
-                    }).finally(() => {
-                      setIsPulling(false);
-                      revalidate();
-                    });
-                  } else {
-                    // user aborted merge, do nothing
-                  }
-                },
-              });
-            }
-          }).finally(() => {
-            setIsPulling(false);
-            revalidate();
-          });
-        } catch (err) {
-          const message = err instanceof Error ? err.message : 'An error occurred while pulling';
-          showAlert({
-            title: 'Pull Failed',
-            message: (
-              <>
-                {message}
-                <ConfigLink {...{ gitRepository, errors: [message] }} />
-              </>
-            ),
-            bodyClassName: 'whitespace-break-spaces',
-          });
-        }
-      },
-    },
-    {
-      id: 'push',
-      icon: loadingPush ? 'refresh' : 'cloud-upload',
-      label: 'Push',
-      isDisabled: false,
-      action: () => handlePush({ force: false }),
-    },
-    {
-      id: 'history',
-      icon: 'clock',
-      isDisabled: false,
-      label: 'History',
-      action: () => setIsGitLogModalOpen(true),
-    },
-    {
-      id: 'fetch',
-      icon: loadingFetch ? 'refresh' : 'refresh',
-      isDisabled: false,
-      label: 'Fetch',
-      action: () => {
-        gitFetchFetcher.submit(
-          {},
-          {
-            action: `/organization/${organizationId}/project/${projectId}/git/fetch`,
-            method: 'post',
-          }
-        );
-      },
-    },
-  ] : []);
+          },
+        },
+        {
+          id: 'push',
+          icon: loadingPush ? 'refresh' : 'cloud-upload',
+          label: 'Push',
+          isDisabled: false,
+          action: () => handlePush({ force: false }),
+        },
+        {
+          id: 'history',
+          icon: 'clock',
+          isDisabled: false,
+          label: 'History',
+          action: () => setIsGitLogModalOpen(true),
+        },
+        {
+          id: 'fetch',
+          icon: loadingFetch ? 'refresh' : 'refresh',
+          isDisabled: false,
+          label: 'Fetch',
+          action: () => {
+            gitFetchFetcher.submit(
+              {},
+              {
+                action: `/organization/${organizationId}/project/${projectId}/git/fetch`,
+                method: 'post',
+              },
+            );
+          },
+        },
+      ]
+    : [];
 
   const gitSyncActions: {
     id: string;
@@ -284,38 +293,45 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
     icon: IconName;
     isDisabled?: boolean;
     action: () => void;
-  }[] = (isSynced ? [
-    {
-      id: 'repository-settings',
-      label: 'Repository Settings',
-      isDisabled: false,
-      icon: 'wrench',
-      action: () => setIsGitRepoSettingsModalOpen(true),
-    },
-    {
-      id: 'branches',
-      label: 'Branches',
-      isDisabled: false,
-      icon: 'code-branch',
-      action: () => setIsGitBranchesModalOpen(true),
-    },
-  ] : [{
-    id: 'connect',
-    label: 'Connect Repository',
-    icon: 'plug',
-    isDisabled: false,
-    action: () => setIsGitRepoSettingsModalOpen(true),
-  }]);
+  }[] = isSynced
+    ? [
+        {
+          id: 'repository-settings',
+          label: 'Repository Settings',
+          isDisabled: false,
+          icon: 'wrench',
+          action: () => setIsGitRepoSettingsModalOpen(true),
+        },
+        {
+          id: 'branches',
+          label: 'Branches',
+          isDisabled: false,
+          icon: 'code-branch',
+          action: () => setIsGitBranchesModalOpen(true),
+        },
+      ]
+    : [
+        {
+          id: 'connect',
+          label: 'Connect Repository',
+          icon: 'plug',
+          isDisabled: false,
+          action: () => setIsGitRepoSettingsModalOpen(true),
+        },
+      ];
 
-  useInterval(() => {
-    gitFetchFetcher.submit(
-      {},
-      {
-        action: `/organization/${organizationId}/project/${projectId}/git/fetch`,
-        method: 'post',
-      }
-    );
-  }, 1000 * 60 * 5);
+  useInterval(
+    () => {
+      gitFetchFetcher.submit(
+        {},
+        {
+          action: `/organization/${organizationId}/project/${projectId}/git/fetch`,
+          method: 'post',
+        },
+      );
+    },
+    1000 * 60 * 5,
+  );
 
   const status = gitStatusFetcher.data?.status;
 
@@ -328,64 +344,70 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
     isDisabled?: boolean;
     isActive: boolean;
     action: () => void;
-  }[] = isSynced ? branches.map(branch => ({
-    id: branch,
-    label: branch,
-    isActive: branch === currentBranch,
-    icon: 'code-branch',
-    action: async () => {
-      // file://./../../routes/git-actions.tsx#gitCheckoutAction
-      gitCheckoutFetcher.submit(
-        {
-          branch,
+  }[] = isSynced
+    ? branches.map(branch => ({
+        id: branch,
+        label: branch,
+        isActive: branch === currentBranch,
+        icon: 'code-branch',
+        action: async () => {
+          // file://./../../routes/git-actions.tsx#gitCheckoutAction
+          gitCheckoutFetcher.submit(
+            {
+              branch,
+            },
+            {
+              action: `/organization/${organizationId}/project/${projectId}/git/branch/checkout`,
+              method: 'post',
+            },
+          );
         },
-        {
-          action: `/organization/${organizationId}/project/${projectId}/git/branch/checkout`,
-          method: 'post',
-        }
-      );
-    },
-  })) : [];
+      }))
+    : [];
 
   const allSyncMenuActionList = [...gitSyncActions, ...branchesActionList, ...currentBranchActions];
 
   return (
     <>
       <MenuTrigger>
-        <div className="flex items-center h-[--line-height-sm] w-full aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+        <div className="flex h-[--line-height-sm] w-full items-center text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
           <Button
             data-testid="git-dropdown"
             aria-label="Git Sync"
-            className="flex-1 flex h-full items-center gap-2 truncate px-[--padding-md]"
+            className="flex h-full flex-1 items-center gap-2 truncate px-[--padding-md]"
           >
-            <Icon
-              icon={isLoading ? 'refresh' : iconClassName}
-              className={`w-5 ${isLoading ? 'animate-spin' : ''}`}
-            />
-            <span className='truncate'>{isSynced ? currentBranch : 'Not synced'}</span>
+            <Icon icon={isLoading ? 'refresh' : iconClassName} className={`w-5 ${isLoading ? 'animate-spin' : ''}`} />
+            <span className="truncate">{isSynced ? currentBranch : 'Not synced'}</span>
           </Button>
           <TooltipTrigger
             onOpenChange={isOpen => {
               const shouldFetchGitRepoStatus = isOpen && gitStatusFetcher.state === 'idle';
-              shouldFetchGitRepoStatus && gitStatusFetcher.submit({}, {
-                action: `/organization/${organizationId}/project/${projectId}/git/status`,
-                method: 'post',
-              });
+              shouldFetchGitRepoStatus &&
+                gitStatusFetcher.submit(
+                  {},
+                  {
+                    action: `/organization/${organizationId}/project/${projectId}/git/status`,
+                    method: 'post',
+                  },
+                );
             }}
           >
-            <Button className={`px-[--padding-md] h-full ${status?.localChanges ? 'text-[--color-warning]' : ''}`}>
-              <Icon icon={loadingStatus ? 'refresh' : 'cube'} className={`transition-colors ${isLoading ? 'animate-pulse' : loadingStatus ? 'animate-spin' : ''}`} />
+            <Button className={`h-full px-[--padding-md] ${status?.localChanges ? 'text-[--color-warning]' : ''}`}>
+              <Icon
+                icon={loadingStatus ? 'refresh' : 'cube'}
+                className={`transition-colors ${isLoading ? 'animate-pulse' : loadingStatus ? 'animate-spin' : ''}`}
+              />
             </Button>
             <Tooltip
               placement="top end"
               offset={8}
-              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
             >
               {commitToolTipMsg}
             </Tooltip>
           </TooltipTrigger>
         </div>
-        <Popover className="min-w-max max-w-lg overflow-hidden" placement='top end' offset={8}>
+        <Popover className="min-w-max max-w-lg overflow-hidden" placement="top end" offset={8}>
           <Menu
             aria-label="Git Sync Menu"
             selectionMode="single"
@@ -394,13 +416,15 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
               const item = allSyncMenuActionList.find(item => item.id === key);
               item?.action();
             }}
-            className="border max-w-lg select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            className="max-h-[85vh] max-w-lg select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
-            <Section className='border-b border-solid border-[--hl-sm] pb-2 empty:pb-0 empty:border-none'>
+            <Section className="border-b border-solid border-[--hl-sm] pb-2 empty:border-none empty:pb-0">
               <Collection items={gitSyncActions}>
                 {item => (
                   <MenuItem
-                    className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
+                    className={
+                      'text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold'
+                    }
                     aria-label={item.label}
                   >
                     <Icon icon={item.icon} />
@@ -409,15 +433,15 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
                 )}
               </Collection>
             </Section>
-            <Section className='border-b border-solid border-[--hl-sm] pb-2 empty:pb-0 empty:border-none'>
+            <Section className="border-b border-solid border-[--hl-sm] pb-2 empty:border-none empty:pb-0">
               <Collection items={branchesActionList}>
                 {item => (
                   <MenuItem
-                    className={`aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isActive ? 'font-bold' : ''}`}
+                    className={`text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold ${item.isActive ? 'font-bold' : ''}`}
                     aria-label={item.label}
                   >
                     <Icon icon={item.icon} className={item.isActive ? 'text-[--color-success]' : ''} />
-                    <span className='truncate'>{item.label}</span>
+                    <span className="truncate">{item.label}</span>
                   </MenuItem>
                 )}
               </Collection>
@@ -426,7 +450,9 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
               <Collection items={currentBranchActions}>
                 {item => (
                   <MenuItem
-                    className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
+                    className={
+                      'text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold'
+                    }
                     aria-label={item.label}
                   >
                     <Icon icon={item.icon} />
@@ -451,15 +477,9 @@ export const GitProjectSyncDropdown: FC<Props> = ({ gitRepository }) => {
           branches={branches}
         />
       )}
-      {isGitLogModalOpen && gitRepository && (
-        <GitProjectLogModal
-          onClose={() => setIsGitLogModalOpen(false)}
-        />
-      )}
+      {isGitLogModalOpen && gitRepository && <GitProjectLogModal onClose={() => setIsGitLogModalOpen(false)} />}
       {isGitStagingModalOpen && gitRepository && (
-        <GitProjectStagingModal
-          onClose={() => setIsGitStagingModalOpen(false)}
-        />
+        <GitProjectStagingModal onClose={() => setIsGitStagingModalOpen(false)} />
       )}
     </>
   );
diff --git a/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx
index 381da656ec..b97ee43b7d 100644
--- a/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/git-sync-dropdown.tsx
@@ -1,6 +1,16 @@
 import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC, useEffect, useState } from 'react';
-import { Button, Collection, Menu, MenuItem, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  Section,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRevalidator } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
@@ -37,8 +47,7 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
     workspaceId: string;
   };
 
-  const [isGitRepoSettingsModalOpen, setIsGitRepoSettingsModalOpen] =
-    useState(false);
+  const [isGitRepoSettingsModalOpen, setIsGitRepoSettingsModalOpen] = useState(false);
   const [isGitBranchesModalOpen, setIsGitBranchesModalOpen] = useState(false);
   const [isGitLogModalOpen, setIsGitLogModalOpen] = useState(false);
   const [isGitStagingModalOpen, setIsGitStagingModalOpen] = useState(false);
@@ -57,34 +66,31 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
   const [isPulling, setIsPulling] = useState(false);
 
   useEffect(() => {
-    if (
-      gitRepository?.uri &&
-      gitRepository?._id &&
-      gitRepoDataFetcher.state === 'idle' &&
-      !gitRepoDataFetcher.data
-    ) {
+    if (gitRepository?.uri && gitRepository?._id && gitRepoDataFetcher.state === 'idle' && !gitRepoDataFetcher.data) {
       // file://./../../routes/git-actions.tsx#gitRepoLoader
       gitRepoDataFetcher.load(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/repo`);
     }
-  }, [
-    gitRepoDataFetcher,
-    gitRepository?.uri,
-    gitRepository?._id,
-    organizationId,
-    projectId,
-    workspaceId,
-  ]);
+  }, [gitRepoDataFetcher, gitRepository?.uri, gitRepository?._id, organizationId, projectId, workspaceId]);
 
   // Only fetch the repo status if we have a repo uri and we don't have the status already
-  const shouldFetchGitRepoStatus = Boolean(gitRepository?.uri && gitRepository?._id && gitStatusFetcher.state === 'idle' && !gitStatusFetcher.data && gitRepoDataFetcher.data);
+  const shouldFetchGitRepoStatus = Boolean(
+    gitRepository?.uri &&
+      gitRepository?._id &&
+      gitStatusFetcher.state === 'idle' &&
+      !gitStatusFetcher.data &&
+      gitRepoDataFetcher.data,
+  );
 
   useEffect(() => {
     if (shouldFetchGitRepoStatus) {
       // file://./../../routes/git-actions.tsx#gitStatusAction
-      gitStatusFetcher.submit({}, {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/status`,
-        method: 'post',
-      });
+      gitStatusFetcher.submit(
+        {},
+        {
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/status`,
+          method: 'post',
+        },
+      );
     }
   }, [gitStatusFetcher, organizationId, projectId, shouldFetchGitRepoStatus, workspaceId]);
 
@@ -93,22 +99,23 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
     if (errors.length > 0) {
       showAlert({
         title: 'Push Failed',
-        message: <>
-          {errors.join('\n')}
-          <ConfigLink {...gitPushFetcher.data} />
-        </>,
+        message: (
+          <>
+            {errors.join('\n')}
+            <ConfigLink {...gitPushFetcher.data} />
+          </>
+        ),
       });
     }
   }, [gitPushFetcher.data]);
 
   useEffect(() => {
     const gitRepoDataErrors =
-      gitRepoDataFetcher.data && 'errors' in gitRepoDataFetcher.data
-        ? gitRepoDataFetcher.data.errors
-        : [];
+      gitRepoDataFetcher.data && 'errors' in gitRepoDataFetcher.data ? gitRepoDataFetcher.data.errors : [];
     const errors = [...gitRepoDataErrors];
     if (errors.length > 0) {
-      if (isGitRepoSettingsModalOpen) { // user just clicked 'Reset'
+      if (isGitRepoSettingsModalOpen) {
+        // user just clicked 'Reset'
         return;
       }
       showAlert({
@@ -136,7 +143,7 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
       {
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/push`,
         method: 'post',
-      }
+      },
     );
   }
 
@@ -171,107 +178,111 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
     icon: IconName;
     isDisabled?: boolean;
     action: () => void;
-  }[] = (isSynced ? [
-    {
-      id: 'commit',
-      icon: 'check',
-      isDisabled: false,
-      label: 'Commit',
-      action: () => setIsGitStagingModalOpen(true),
-    },
-    {
-      id: 'pull',
-      icon: isPulling ? 'refresh' : 'cloud-download',
-      label: 'Pull',
-      isDisabled: false,
-      action: async () => {
-        try {
-          setIsPulling(true);
-          await pullFromGitRemote({ projectId, workspaceId }).then(result => {
-            if ('errors' in result && result.errors) {
+  }[] = isSynced
+    ? [
+        {
+          id: 'commit',
+          icon: 'check',
+          isDisabled: false,
+          label: 'Commit',
+          action: () => setIsGitStagingModalOpen(true),
+        },
+        {
+          id: 'pull',
+          icon: isPulling ? 'refresh' : 'cloud-download',
+          label: 'Pull',
+          isDisabled: false,
+          action: async () => {
+            try {
+              setIsPulling(true);
+              await pullFromGitRemote({ projectId, workspaceId })
+                .then(result => {
+                  if ('errors' in result && result.errors) {
+                    showAlert({
+                      title: 'Pull Failed',
+                      message: (
+                        <>
+                          {result.errors.join('\n')}
+                          <ConfigLink {...{ gitRepository, errors: [result.errors.join('\n')] }} />
+                        </>
+                      ),
+                      bodyClassName: 'whitespace-break-spaces',
+                    });
+                  }
+                  if ('conflicts' in result) {
+                    showModal(SyncMergeModal, {
+                      conflicts: result.conflicts,
+                      labels: result.labels,
+                      handleDone: (conflicts?: MergeConflict[]) => {
+                        if (Array.isArray(conflicts) && conflicts.length > 0) {
+                          setIsPulling(true);
+                          continueMerge({
+                            projectId,
+                            workspaceId,
+                            handledMergeConflicts: conflicts,
+                            commitMessage: result.commitMessage,
+                            commitParent: result.commitParent,
+                          }).finally(() => {
+                            setIsPulling(false);
+                            revalidate();
+                          });
+                        } else {
+                          // user aborted merge, do nothing
+                        }
+                      },
+                    });
+                  }
+                })
+                .finally(() => {
+                  setIsPulling(false);
+                  revalidate();
+                });
+            } catch (err) {
+              const errorMessage = err instanceof Error ? err.message : 'An error occurred while pulling';
               showAlert({
                 title: 'Pull Failed',
                 message: (
                   <>
-                    {result.errors.join('\n')}
-                    <ConfigLink {...{ gitRepository, errors: [result.errors.join('\n')] }} />
+                    {errorMessage}
+                    <ConfigLink {...{ gitRepository, errors: [errorMessage] }} />
                   </>
                 ),
                 bodyClassName: 'whitespace-break-spaces',
               });
             }
-            if ('conflicts' in result) {
-              showModal(SyncMergeModal, {
-                conflicts: result.conflicts,
-                labels: result.labels,
-                handleDone: (conflicts?: MergeConflict[]) => {
-                  if (Array.isArray(conflicts) && conflicts.length > 0) {
-                    setIsPulling(true);
-                    continueMerge({
-                      projectId,
-                      workspaceId,
-                      handledMergeConflicts: conflicts,
-                      commitMessage: result.commitMessage,
-                      commitParent: result.commitParent,
-                    }).finally(() => {
-                      setIsPulling(false);
-                      revalidate();
-                    });
-                  } else {
-                    // user aborted merge, do nothing
-                  }
-                },
-              });
-            }
-          }).finally(() => {
-            setIsPulling(false);
-            revalidate();
-          });
-        } catch (err) {
-          const errorMessage = err instanceof Error ? err.message : 'An error occurred while pulling';
-          showAlert({
-            title: 'Pull Failed',
-            message: (
-              <>
-                {errorMessage}
-                <ConfigLink {...{ gitRepository, errors: [errorMessage] }} />
-              </>
-            ),
-            bodyClassName: 'whitespace-break-spaces',
-          });
-        }
-      },
-    },
-    {
-      id: 'push',
-      icon: loadingPush ? 'refresh' : 'cloud-upload',
-      label: 'Push',
-      isDisabled: false,
-      action: () => handlePush({ force: false }),
-    },
-    {
-      id: 'history',
-      icon: 'clock',
-      isDisabled: false,
-      label: 'History',
-      action: () => setIsGitLogModalOpen(true),
-    },
-    {
-      id: 'fetch',
-      icon: loadingFetch ? 'refresh' : 'refresh',
-      isDisabled: false,
-      label: 'Fetch',
-      action: () => {
-        gitFetchFetcher.submit(
-          {},
-          {
-            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/fetch`,
-            method: 'post',
-          }
-        );
-      },
-    },
-    ] : []);
+          },
+        },
+        {
+          id: 'push',
+          icon: loadingPush ? 'refresh' : 'cloud-upload',
+          label: 'Push',
+          isDisabled: false,
+          action: () => handlePush({ force: false }),
+        },
+        {
+          id: 'history',
+          icon: 'clock',
+          isDisabled: false,
+          label: 'History',
+          action: () => setIsGitLogModalOpen(true),
+        },
+        {
+          id: 'fetch',
+          icon: loadingFetch ? 'refresh' : 'refresh',
+          isDisabled: false,
+          label: 'Fetch',
+          action: () => {
+            gitFetchFetcher.submit(
+              {},
+              {
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/fetch`,
+                method: 'post',
+              },
+            );
+          },
+        },
+      ]
+    : [];
 
   const gitSyncActions: {
     id: string;
@@ -279,38 +290,45 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
     icon: IconName;
     isDisabled?: boolean;
     action: () => void;
-  }[] = (isSynced ? [
-    {
-      id: 'repository-settings',
-      label: 'Repository Settings',
-      isDisabled: false,
-      icon: 'wrench',
-      action: () => setIsGitRepoSettingsModalOpen(true),
-    },
-    {
-      id: 'branches',
-      label: 'Branches',
-      isDisabled: false,
-      icon: 'code-branch',
-      action: () => setIsGitBranchesModalOpen(true),
-    },
-  ] : [{
-    id: 'connect',
-    label: 'Connect Repository',
-    icon: 'plug',
-    isDisabled: false,
-    action: () => setIsGitRepoSettingsModalOpen(true),
-  }]);
+  }[] = isSynced
+    ? [
+        {
+          id: 'repository-settings',
+          label: 'Repository Settings',
+          isDisabled: false,
+          icon: 'wrench',
+          action: () => setIsGitRepoSettingsModalOpen(true),
+        },
+        {
+          id: 'branches',
+          label: 'Branches',
+          isDisabled: false,
+          icon: 'code-branch',
+          action: () => setIsGitBranchesModalOpen(true),
+        },
+      ]
+    : [
+        {
+          id: 'connect',
+          label: 'Connect Repository',
+          icon: 'plug',
+          isDisabled: false,
+          action: () => setIsGitRepoSettingsModalOpen(true),
+        },
+      ];
 
-  useInterval(() => {
-    gitFetchFetcher.submit(
-      {},
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/fetch`,
-        method: 'post',
-      }
-    );
-  }, 1000 * 60 * 5);
+  useInterval(
+    () => {
+      gitFetchFetcher.submit(
+        {},
+        {
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/fetch`,
+          method: 'post',
+        },
+      );
+    },
+    1000 * 60 * 5,
+  );
 
   const status = gitStatusFetcher.data?.status;
 
@@ -322,19 +340,24 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
     icon: IconProp;
     isDisabled?: boolean;
     action: () => void;
-  }[] = isInsomniaSyncEnabled ? [
-    {
-      id: 'switch-to-git-repo',
-      label: 'Switch to Insomnia Sync',
-      icon: 'cloud',
-      action: async () => {
-        resetGitStatusFetcher.submit({}, {
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/reset`,
-          method: 'post',
-        });
+  }[] = isInsomniaSyncEnabled
+    ? [
+        {
+          id: 'switch-to-git-repo',
+          label: 'Switch to Insomnia Sync',
+          icon: 'cloud',
+          action: async () => {
+            resetGitStatusFetcher.submit(
+              {},
+              {
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/reset`,
+                method: 'post',
+              },
+            );
+          },
         },
-      },
-    ] : [];
+      ]
+    : [];
 
   const branchesActionList: {
     id: string;
@@ -343,64 +366,80 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
     isDisabled?: boolean;
     isActive: boolean;
     action: () => void;
-  }[] = isSynced ? branches.map(branch => ({
-    id: branch,
-    label: branch,
-    isActive: branch === currentBranch,
-    icon: 'code-branch',
-    action: async () => {
-      // file://./../../routes/git-actions.tsx#gitCheckoutAction
-      gitCheckoutFetcher.submit(
-        {
-          branch,
+  }[] = isSynced
+    ? branches.map(branch => ({
+        id: branch,
+        label: branch,
+        isActive: branch === currentBranch,
+        icon: 'code-branch',
+        action: async () => {
+          // file://./../../routes/git-actions.tsx#gitCheckoutAction
+          gitCheckoutFetcher.submit(
+            {
+              branch,
+            },
+            {
+              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/checkout`,
+              method: 'post',
+            },
+          );
         },
-        {
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/checkout`,
-          method: 'post',
-        }
-      );
-    },
-  })) : [];
+      }))
+    : [];
 
-  const allSyncMenuActionList = [...switchToInsomniaSyncList, ...gitSyncActions, ...branchesActionList, ...currentBranchActions];
+  const allSyncMenuActionList = [
+    ...switchToInsomniaSyncList,
+    ...gitSyncActions,
+    ...branchesActionList,
+    ...currentBranchActions,
+  ];
 
   return (
     <>
-      {showDeprecatedWarning && <div className='p-[--padding-sm]'>
-        <div className='flex flex-wrap justify-between items-center gap-2 p-[--padding-xs] border border-solid border-[--hl-md] bg-opacity-50 bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] text-[--color-font-warning] rounded'>
-          <p className='text-sm'>
-            <Icon icon="exclamation-triangle" className='mr-2' />
-            You are using the legacy Git integration in this project, learn more about converting to the new Git Sync capability. <Button className="underline" onPress={() => window.main.openInBrowser('https://docs.insomnia.rest/insomnia/git-sync')}>Migration Guide</Button>
-          </p>
+      {showDeprecatedWarning && (
+        <div className="p-[--padding-sm]">
+          <div className="flex flex-wrap items-center justify-between gap-2 rounded border border-solid border-[--hl-md] bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] bg-opacity-50 p-[--padding-xs] text-[--color-font-warning]">
+            <p className="text-sm">
+              <Icon icon="exclamation-triangle" className="mr-2" />
+              You are using the legacy Git integration in this project, learn more about converting to the new Git Sync
+              capability.{' '}
+              <Button
+                className="underline"
+                onPress={() => window.main.openInBrowser('https://docs.insomnia.rest/insomnia/git-sync')}
+              >
+                Migration Guide
+              </Button>
+            </p>
+          </div>
         </div>
-      </div>}
+      )}
       <MenuTrigger>
-        <div className="flex items-center h-[--line-height-sm] w-full aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+        <div className="flex h-[--line-height-sm] w-full items-center text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
           <Button
             data-testid="git-dropdown"
             aria-label="Git Sync"
-            className="flex-1 flex h-full items-center gap-2 truncate px-[--padding-md]"
+            className="flex h-full flex-1 items-center gap-2 truncate px-[--padding-md]"
           >
-            <Icon
-              icon={isLoading ? 'refresh' : iconClassName}
-              className={`w-5 ${isLoading ? 'animate-spin' : ''}`}
-            />
-            <span className='truncate'>{isSynced ? currentBranch : 'Not synced'}</span>
+            <Icon icon={isLoading ? 'refresh' : iconClassName} className={`w-5 ${isLoading ? 'animate-spin' : ''}`} />
+            <span className="truncate">{isSynced ? currentBranch : 'Not synced'}</span>
           </Button>
           <TooltipTrigger>
-            <Button className={`px-[--padding-md] h-full ${status?.localChanges ? 'text-[--color-warning]' : ''}`}>
-              <Icon icon={loadingStatus ? 'refresh' : 'cube'} className={`transition-colors ${isLoading ? 'animate-pulse' : loadingStatus ? 'animate-spin' : ''}`} />
+            <Button className={`h-full px-[--padding-md] ${status?.localChanges ? 'text-[--color-warning]' : ''}`}>
+              <Icon
+                icon={loadingStatus ? 'refresh' : 'cube'}
+                className={`transition-colors ${isLoading ? 'animate-pulse' : loadingStatus ? 'animate-spin' : ''}`}
+              />
             </Button>
             <Tooltip
               placement="top end"
               offset={8}
-              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
             >
               {commitToolTipMsg}
             </Tooltip>
           </TooltipTrigger>
         </div>
-        <Popover className="min-w-max max-w-lg overflow-hidden" placement='top end' offset={8}>
+        <Popover className="min-w-max max-w-lg overflow-hidden" placement="top end" offset={8}>
           <Menu
             aria-label="Git Sync Menu"
             selectionMode="single"
@@ -409,17 +448,19 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
               const item = allSyncMenuActionList.find(item => item.id === key);
               item?.action();
             }}
-            className="border max-w-lg select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            className="max-h-[85vh] max-w-lg select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
-            <Section className='border-b border-solid border-[--hl-sm] pb-2 empty:pb-0 empty:border-none'>
+            <Section className="border-b border-solid border-[--hl-sm] pb-2 empty:border-none empty:pb-0">
               <Collection items={switchToInsomniaSyncList}>
                 {item => (
                   <MenuItem
                     textValue={item.label}
-                    className={'group aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent disabled:cursor-not-allowed focus:outline-none transition-colors'}
+                    className={
+                      'text-md group flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold'
+                    }
                     aria-label={item.label}
                   >
-                    <div className="px-4 text-[--color-font-surprise] w-full bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-sm hover:bg-opacity-80 group-pressed:opacity-80 group-hover:bg-opacity-80 group-focus:bg-opacity-80 group-focus:ring-inset group-hover:ring-inset focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+                    <div className="group-pressed:opacity-80 flex w-full items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-1 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] group-hover:bg-opacity-80 group-hover:ring-inset group-focus:bg-opacity-80 group-focus:ring-inset aria-pressed:opacity-80">
                       <Icon icon={item.icon} />
                       <div>{item.label}</div>
                     </div>
@@ -427,11 +468,13 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
                 )}
               </Collection>
             </Section>
-            <Section className='border-b border-solid border-[--hl-sm] pb-2 empty:pb-0 empty:border-none'>
+            <Section className="border-b border-solid border-[--hl-sm] pb-2 empty:border-none empty:pb-0">
               <Collection items={gitSyncActions}>
                 {item => (
                   <MenuItem
-                    className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
+                    className={
+                      'text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold'
+                    }
                     aria-label={item.label}
                   >
                     <Icon icon={item.icon} />
@@ -440,15 +483,15 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
                 )}
               </Collection>
             </Section>
-            <Section className='border-b border-solid border-[--hl-sm] pb-2 empty:pb-0 empty:border-none'>
+            <Section className="border-b border-solid border-[--hl-sm] pb-2 empty:border-none empty:pb-0">
               <Collection items={branchesActionList}>
                 {item => (
                   <MenuItem
-                    className={`aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isActive ? 'font-bold' : ''}`}
+                    className={`text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold ${item.isActive ? 'font-bold' : ''}`}
                     aria-label={item.label}
                   >
                     <Icon icon={item.icon} className={item.isActive ? 'text-[--color-success]' : ''} />
-                    <span className='truncate'>{item.label}</span>
+                    <span className="truncate">{item.label}</span>
                   </MenuItem>
                 )}
               </Collection>
@@ -457,7 +500,9 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
               <Collection items={currentBranchActions}>
                 {item => (
                   <MenuItem
-                    className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
+                    className={
+                      'text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold'
+                    }
                     aria-label={item.label}
                   >
                     <Icon icon={item.icon} />
@@ -482,16 +527,8 @@ export const GitSyncDropdown: FC<Props> = ({ gitRepository, isInsomniaSyncEnable
           branches={branches}
         />
       )}
-      {isGitLogModalOpen && gitRepository && (
-        <GitLogModal
-          onClose={() => setIsGitLogModalOpen(false)}
-        />
-      )}
-      {isGitStagingModalOpen && gitRepository && (
-        <GitStagingModal
-          onClose={() => setIsGitStagingModalOpen(false)}
-        />
-      )}
+      {isGitLogModalOpen && gitRepository && <GitLogModal onClose={() => setIsGitLogModalOpen(false)} />}
+      {isGitStagingModalOpen && gitRepository && <GitStagingModal onClose={() => setIsGitStagingModalOpen(false)} />}
     </>
   );
 };
diff --git a/packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx
index 309c4b0cbc..da966df520 100644
--- a/packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/grpc-method-dropdown/grpc-method-dropdown.tsx
@@ -48,12 +48,7 @@ export const getShortGrpcPath = (fullPath: string): string => {
   return packageName && serviceName && methodName ? `/${serviceName}/${methodName}` : fullPath;
 };
 
-export const GrpcMethodDropdown: FunctionComponent<Props> = ({
-  disabled,
-  methods,
-  selectedMethod,
-  handleChange,
-}) => {
+export const GrpcMethodDropdown: FunctionComponent<Props> = ({ disabled, methods, selectedMethod, handleChange }) => {
   const groupedByPkg = groupGrpcMethodsByPackage(methods);
   const sections = Object.entries(groupedByPkg).map(([name, pkg]) => ({
     id: name,
@@ -81,49 +76,44 @@ export const GrpcMethodDropdown: FunctionComponent<Props> = ({
       selectedKey={selectedPath}
       isDisabled={methods.length === 0}
     >
-      <Button className="px-4 py-1 disabled:bg-[--hl-xs] h-full disabled:cursor-not-allowed font-semibold flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+      <Button className="flex h-full items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:cursor-not-allowed disabled:bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-xs]">
         <SelectValue<{
           id: string;
           fullPath: string;
           display_name: string;
           type: GrpcMethodType;
           example: Record<string, any> | undefined;
-        }>
-          className="flex truncate items-center justify-center gap-2"
-        >
+        }> className="flex items-center justify-center gap-2 truncate">
           {({ selectedItem }) => {
             if (!selectedItem) {
               return (
                 <Fragment>
-                  <span>
-                    {selectedPath ? getShortGrpcPath(selectedPath) : 'Select Method'}
-                  </span>
+                  <span>{selectedPath ? getShortGrpcPath(selectedPath) : 'Select Method'}</span>
                 </Fragment>
               );
             }
 
-            return (
-              <Fragment>
-                {selectedItem.display_name}
-              </Fragment>
-            );
+            return <Fragment>{selectedItem.display_name}</Fragment>;
           }}
         </SelectValue>
         <Icon icon="caret-down" />
       </Button>
-      <Popover className="min-w-max max-w-xs overflow-y-hidden flex flex-col">
+      <Popover className="flex min-w-max max-w-xs flex-col overflow-y-hidden">
         <ListBox
           items={sections}
-          className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
         >
           {section => (
             <Section key={section.id}>
-              <Header className='flex px-[--padding-md] items-center gap-2 text-[--hl-md]'><span>{section.display_name}</span><span className='bg-[--hl-md] h-[1px] flex-1' /></Header>
+              <Header className="flex items-center gap-2 px-[--padding-md] text-[--hl-md]">
+                <span>{section.display_name}</span>
+                <span className="h-[1px] flex-1 bg-[--hl-md]" />
+              </Header>
               {section.items.map(grpcMethod => (
                 <ListBoxItem
                   id={grpcMethod.id}
                   key={grpcMethod.id}
-                  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                  className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                   aria-label={grpcMethod.display_name}
                   textValue={grpcMethod.display_name}
                   value={grpcMethod}
@@ -132,12 +122,7 @@ export const GrpcMethodDropdown: FunctionComponent<Props> = ({
                     <Fragment>
                       <em>{GrpcMethodTypeAcronym[grpcMethod.type]}</em>
                       {grpcMethod.display_name}
-                      {isSelected && (
-                        <Icon
-                          icon="check"
-                          className="text-[--color-success] justify-self-end"
-                        />
-                      )}
+                      {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                     </Fragment>
                   )}
                 </ListBoxItem>
@@ -146,6 +131,6 @@ export const GrpcMethodDropdown: FunctionComponent<Props> = ({
           )}
         </ListBox>
       </Popover>
-    </Select >
+    </Select>
   );
 };
diff --git a/packages/insomnia/src/ui/components/dropdowns/method-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/method-dropdown.tsx
index 7ea5be2cb5..6776b10c92 100644
--- a/packages/insomnia/src/ui/components/dropdowns/method-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/method-dropdown.tsx
@@ -12,12 +12,11 @@ interface Props {
   onChange: (method: string) => void;
 }
 
-export const MethodDropdown = forwardRef<DropdownHandle, Props>(({
-  method,
-  onChange,
-}, ref) => {
+export const MethodDropdown = forwardRef<DropdownHandle, Props>(({ method, onChange }, ref) => {
   const localStorageHttpMethods = window.localStorage.getItem(LOCALSTORAGE_KEY);
-  const parsedLocalStorageHttpMethods = localStorageHttpMethods ? JSON.parse(localStorageHttpMethods) as string[] : [];
+  const parsedLocalStorageHttpMethods = localStorageHttpMethods
+    ? (JSON.parse(localStorageHttpMethods) as string[])
+    : [];
   const [recent, setRecent] = useState(parsedLocalStorageHttpMethods);
 
   const handleSetCustomMethod = useCallback(() => {
@@ -35,7 +34,7 @@ export const MethodDropdown = forwardRef<DropdownHandle, Props>(({
         // Note: We need to read and remove the method from localStorage and not rely on react state
         // It solves the case where you try to delete more than one method at a time, because recent is updated only once
         const localStorageHttpMethods = window.localStorage.getItem(LOCALSTORAGE_KEY);
-        const currentRecent = localStorageHttpMethods ? JSON.parse(localStorageHttpMethods) as string[] : [];
+        const currentRecent = localStorageHttpMethods ? (JSON.parse(localStorageHttpMethods) as string[]) : [];
         const newRecent = currentRecent.filter(m => m !== methodToDelete);
         setRecent(newRecent);
         window.localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(newRecent));
@@ -53,7 +52,7 @@ export const MethodDropdown = forwardRef<DropdownHandle, Props>(({
         // Note: We need to read and remove the method from localStorage and not rely on react state
         // It solves the case where you try to add a new method after you deleted some others
         const localStorageHttpMethods = window.localStorage.getItem(LOCALSTORAGE_KEY);
-        const currentRecent = localStorageHttpMethods ? JSON.parse(localStorageHttpMethods) as string[] : [];
+        const currentRecent = localStorageHttpMethods ? (JSON.parse(localStorageHttpMethods) as string[]) : [];
         // Save method as recent
         if (!currentRecent.includes(methodToAdd)) {
           const newRecent = [...currentRecent, methodToAdd];
@@ -69,31 +68,22 @@ export const MethodDropdown = forwardRef<DropdownHandle, Props>(({
     <Dropdown
       ref={ref}
       triggerButton={
-        <Button className='pl-2' aria-label='Request Method'>
-          <span className={`http-method-${method}`}>{method}</span>{' '}
-          <i className="fa fa-caret-down space-left" />
+        <Button className="pl-2" aria-label="Request Method">
+          <span className={`http-method-${method}`}>{method}</span> <i className="fa fa-caret-down space-left" />
         </Button>
       }
     >
       <DropdownSection>
         {HTTP_METHODS.map(method => (
           <DropdownItem key={method}>
-            <ItemContent
-              className={`http-method-${method}`}
-              label={method}
-              onClick={() => onChange(method)}
-            />
+            <ItemContent className={`http-method-${method}`} label={method} onClick={() => onChange(method)} />
           </DropdownItem>
         ))}
       </DropdownSection>
 
       <DropdownSection>
         <DropdownItem>
-          <ItemContent
-            className="http-method-custom"
-            label="Custom Method"
-            onClick={handleSetCustomMethod}
-          />
+          <ItemContent className="http-method-custom" label="Custom Method" onClick={handleSetCustomMethod} />
         </DropdownItem>
       </DropdownSection>
     </Dropdown>
diff --git a/packages/insomnia/src/ui/components/dropdowns/preview-mode-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/preview-mode-dropdown.tsx
index 3df3287898..1887822929 100644
--- a/packages/insomnia/src/ui/components/dropdowns/preview-mode-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/preview-mode-dropdown.tsx
@@ -17,11 +17,10 @@ interface Props {
   copyToClipboard: () => any;
 }
 
-export const PreviewModeDropdown: FC<Props> = ({
-  download,
-  copyToClipboard,
-}) => {
-  const { activeRequest, activeRequestMeta, activeResponse } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
+export const PreviewModeDropdown: FC<Props> = ({ download, copyToClipboard }) => {
+  const { activeRequest, activeRequestMeta, activeResponse } = useRouteLoaderData(
+    'request/:requestId',
+  ) as RequestLoaderData;
   const previewMode = activeRequestMeta.previewMode || PREVIEW_MODE_SOURCE;
   const patchRequestMeta = useRequestMetaPatcher();
   const handleDownloadPrettify = useCallback(() => download(true), [download]);
@@ -89,7 +88,7 @@ export const PreviewModeDropdown: FC<Props> = ({
 
   return (
     <Dropdown
-      aria-label='Preview Mode Dropdown'
+      aria-label="Preview Mode Dropdown"
       triggerButton={
         <Button className="text-[--hl]">
           {getPreviewModeName(previewMode)}
@@ -97,63 +96,34 @@ export const PreviewModeDropdown: FC<Props> = ({
         </Button>
       }
     >
-      <DropdownSection
-        aria-label='Preview Mode Section'
-        title="Preview Mode"
-      >
-        {PREVIEW_MODES.map(mode =>
-          <DropdownItem
-            key={mode}
-            aria-label={getPreviewModeName(mode, true)}
-          >
+      <DropdownSection aria-label="Preview Mode Section" title="Preview Mode">
+        {PREVIEW_MODES.map(mode => (
+          <DropdownItem key={mode} aria-label={getPreviewModeName(mode, true)}>
             <ItemContent
               icon={previewMode === mode ? 'check' : 'empty'}
               label={getPreviewModeName(mode, true)}
               onClick={() => patchRequestMeta(activeRequest._id, { previewMode: mode })}
             />
           </DropdownItem>
-        )}
+        ))}
       </DropdownSection>
-      <DropdownSection
-        aria-label='Action Section'
-        title="Action"
-      >
-        <DropdownItem aria-label='Copy raw response'>
-          <ItemContent
-            icon="copy"
-            label="Copy raw response"
-            onClick={copyToClipboard}
-          />
+      <DropdownSection aria-label="Action Section" title="Action">
+        <DropdownItem aria-label="Copy raw response">
+          <ItemContent icon="copy" label="Copy raw response" onClick={copyToClipboard} />
         </DropdownItem>
-        <DropdownItem aria-label='Export raw response'>
-          <ItemContent
-            icon="save"
-            label="Export raw response"
-            onClick={handleDownloadNormal}
-          />
+        <DropdownItem aria-label="Export raw response">
+          <ItemContent icon="save" label="Export raw response" onClick={handleDownloadNormal} />
         </DropdownItem>
-        <DropdownItem aria-label='Export prettified response'>
-          {shouldPrettifyOption &&
-            <ItemContent
-              icon="save"
-              label="Export prettified response"
-              onClick={handleDownloadPrettify}
-            />
-          }
+        <DropdownItem aria-label="Export prettified response">
+          {shouldPrettifyOption && (
+            <ItemContent icon="save" label="Export prettified response" onClick={handleDownloadPrettify} />
+          )}
         </DropdownItem>
-        <DropdownItem aria-label='Export HTTP debug'>
-          <ItemContent
-            icon="bug"
-            label="Export HTTP debug"
-            onClick={exportDebugFile}
-          />
+        <DropdownItem aria-label="Export HTTP debug">
+          <ItemContent icon="bug" label="Export HTTP debug" onClick={exportDebugFile} />
         </DropdownItem>
-        <DropdownItem aria-label='Export as HAR'>
-          <ItemContent
-            icon="save"
-            label="Export as HAR"
-            onClick={exportAsHAR}
-          />
+        <DropdownItem aria-label="Export as HAR">
+          <ItemContent icon="save" label="Export as HAR" onClick={exportAsHAR} />
         </DropdownItem>
       </DropdownSection>
     </Dropdown>
diff --git a/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
index ddcaf47d51..a465ad69aa 100644
--- a/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/project-dropdown.tsx
@@ -1,23 +1,10 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC, Fragment, useEffect, useState } from 'react';
-import {
-  Button,
-  Menu,
-  MenuItem,
-  MenuTrigger,
-  Popover,
-  Tooltip,
-  TooltipTrigger,
-} from 'react-aria-components';
+import { Button, Menu, MenuItem, MenuTrigger, Popover, Tooltip, TooltipTrigger } from 'react-aria-components';
 import { useFetcher } from 'react-router-dom';
 
 import type { GitRepository } from '../../../models/git-repository';
-import {
-  getProjectStorageTypeLabel,
-  isGitProject,
-  isRemoteProject,
-  type Project,
-} from '../../../models/project';
+import { getProjectStorageTypeLabel, isGitProject, isRemoteProject, type Project } from '../../../models/project';
 import { type StorageRules } from '../../routes/organization';
 import { Icon } from '../icon';
 import { showAlert, showModal } from '../modals';
@@ -39,8 +26,7 @@ interface ProjectActionItem {
 }
 
 export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRules, isGitSyncEnabled }) => {
-  const [isProjectSettingsModalOpen, setIsProjectSettingsModalOpen] =
-    useState(false);
+  const [isProjectSettingsModalOpen, setIsProjectSettingsModalOpen] = useState(false);
   const deleteProjectFetcher = useFetcher();
   const updateProjectFetcher = useFetcher();
 
@@ -80,7 +66,7 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRul
                 {
                   method: 'post',
                   action: `/organization/${organizationId}/project/${projectId}/delete`,
-                }
+                },
               );
             }
           },
@@ -109,39 +95,36 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRul
 
   return (
     <Fragment>
-      {isProjectInconsistent &&
+      {isProjectInconsistent && (
         <TooltipTrigger>
           <Button
             onPress={() => setIsProjectSettingsModalOpen(true)}
-            className="opacity-80 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-80 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
           >
-            <Icon
-              icon='triangle-exclamation'
-              color="var(--color-warning)"
-            />
+            <Icon icon="triangle-exclamation" color="var(--color-warning)" />
           </Button>
           <Tooltip
             placement="top"
             offset={4}
-            className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
           >
             {`This project type is not allowed by the organization owner. You can manually convert it to use ${getProjectStorageTypeLabel(storageRules)}.`}
           </Tooltip>
         </TooltipTrigger>
-      }
+      )}
       {project.hasUncommittedOrUnpushedChanges && (
-        <div className='group-focus:hidden group-hover:hidden aspect-square h-6 flex items-center justify-center'>
-          <Icon icon="circle" className='w-2 h-2' color="var(--color-warning)" />
+        <div className="flex aspect-square h-6 items-center justify-center group-hover:hidden group-focus:hidden">
+          <Icon icon="circle" className="h-2 w-2" color="var(--color-warning)" />
         </div>
       )}
       <MenuTrigger>
         <Button
           aria-label="Project Actions"
-          className="opacity-0 hidden items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 data-[pressed]:flex group-focus:flex group-hover:flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="hidden aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:flex group-hover:opacity-100 group-focus:flex group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:flex data-[pressed]:opacity-100"
         >
           <Icon icon="caret-down" />
         </Button>
-        <Popover className="min-w-max overflow-y-hidden flex flex-col">
+        <Popover className="flex min-w-max flex-col overflow-y-hidden">
           <Menu
             aria-label="Project Actions Menu"
             selectionMode="single"
@@ -149,13 +132,13 @@ export const ProjectDropdown: FC<Props> = ({ project, organizationId, storageRul
               projectActionList.find(({ id }) => key === id)?.action(project._id, project.name);
             }}
             items={projectActionList}
-            className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+            className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
             {item => (
               <MenuItem
                 key={item.id}
                 id={item.id}
-                className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                 aria-label={item.name}
               >
                 <Icon icon={item.icon} />
diff --git a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
index 0cf4b9ae0a..ece9b2ebde 100644
--- a/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/request-actions-dropdown.tsx
@@ -50,14 +50,16 @@ export const RequestActionsDropdown = ({
   onOpenChange,
   onRename,
 }: Props) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const patchRequestMeta = useRequestMetaPatcher();
   const { hotKeyRegistry } = settings;
   const [actionPlugins, setActionPlugins] = useState<RequestAction[]>([]);
   const requestFetcher = useFetcher();
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
 
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
 
@@ -77,22 +79,25 @@ export const RequestActionsDropdown = ({
       submitName: 'Create',
       label: 'New Name',
       selectText: true,
-      onComplete: (name: string) => requestFetcher.submit({ name },
-        {
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${request?._id}/duplicate`,
-          method: 'post',
-          encType: 'application/json',
-        }),
+      onComplete: (name: string) =>
+        requestFetcher.submit(
+          { name },
+          {
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${request?._id}/duplicate`,
+            method: 'post',
+            encType: 'application/json',
+          },
+        ),
     });
   };
 
   const handlePluginClick = async ({ plugin, action }: RequestAction) => {
     try {
       const context = {
-        ...(pluginContexts.app.init('no-render')),
+        ...pluginContexts.app.init('no-render'),
         ...pluginContexts.data.init(activeProject._id),
-        ...(pluginContexts.store.init(plugin)),
-        ...(pluginContexts.network.init()),
+        ...pluginContexts.store.init(plugin),
+        ...pluginContexts.network.init(),
       };
       await action(context, {
         request,
@@ -143,11 +148,13 @@ export const RequestActionsDropdown = ({
       onDone: async (isYes: boolean) => {
         if (isYes) {
           incrementDeletedRequests();
-          requestFetcher.submit({ id: request._id },
+          requestFetcher.submit(
+            { id: request._id },
             {
               action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/delete`,
               method: 'post',
-            });
+            },
+          );
         }
       },
     });
@@ -167,27 +174,30 @@ export const RequestActionsDropdown = ({
       hint?: PlatformKeyCombinations;
       action: () => void;
     }[];
-  }[] = !canGenerateCode ? [] :
-      [{
-        name: 'Export',
-        id: 'export',
-        icon: 'file-export',
-        items: [
-          {
-            id: 'GenerateCode',
-            name: 'Generate Code',
-            action: generateCode,
-            icon: 'code',
-            hint: hotKeyRegistry.request_showGenerateCodeEditor,
-          },
-          {
-            id: 'CopyAsCurl',
-            name: 'Copy as cURL',
-            action: copyAsCurl,
-            icon: 'copy',
-          },
-        ],
-      }];
+  }[] = !canGenerateCode
+    ? []
+    : [
+        {
+          name: 'Export',
+          id: 'export',
+          icon: 'file-export',
+          items: [
+            {
+              id: 'GenerateCode',
+              name: 'Generate Code',
+              action: generateCode,
+              icon: 'code',
+              hint: hotKeyRegistry.request_showGenerateCodeEditor,
+            },
+            {
+              id: 'CopyAsCurl',
+              name: 'Copy as cURL',
+              action: copyAsCurl,
+              icon: 'copy',
+            },
+          ],
+        },
+      ];
 
   const requestActionList: {
     name: string;
@@ -201,65 +211,66 @@ export const RequestActionsDropdown = ({
       action: () => void;
     }[];
   }[] = [
-      ...codeGenerationActions,
-      {
-        name: 'Actions',
-        id: 'actions',
-        icon: 'cog',
-        items: [
-          {
-            id: 'Pin',
-            name: isPinned ? 'Unpin' : 'Pin',
-            action: togglePin,
-            icon: 'thumbtack',
-            hint: hotKeyRegistry.request_togglePin,
-          },
-          {
-            id: 'Duplicate',
-            name: 'Duplicate',
-            action: handleDuplicateRequest,
-            icon: 'copy',
-            hint: hotKeyRegistry.request_showDuplicate,
-          },
-          {
-            id: 'Rename',
-            name: 'Rename',
-            action: onRename,
-            icon: 'edit',
-          },
-          {
-            id: 'Delete',
-            name: 'Delete',
-            action: deleteRequest,
-            icon: 'trash',
-            hint: hotKeyRegistry.request_showDelete,
-          },
-          {
-            id: 'Settings',
-            name: 'Settings',
-            icon: 'gear',
-            hint: hotKeyRegistry.request_showSettings,
-            action: () => {
-              setIsSettingsModalOpen(true);
-            },
-          },
-        ],
-      },
-      ...(actionPlugins.length > 0 ? [
+    ...codeGenerationActions,
+    {
+      name: 'Actions',
+      id: 'actions',
+      icon: 'cog',
+      items: [
         {
-          name: 'Plugins',
-          id: 'plugins',
-          icon: 'plug' as IconName,
-          items: actionPlugins.map(plugin => ({
-            id: plugin.label,
-            name: plugin.label,
-            icon: plugin.icon as IconName || 'plug',
-            action: () =>
-              handlePluginClick(plugin),
-          })),
+          id: 'Pin',
+          name: isPinned ? 'Unpin' : 'Pin',
+          action: togglePin,
+          icon: 'thumbtack',
+          hint: hotKeyRegistry.request_togglePin,
         },
-      ] : []),
-    ];
+        {
+          id: 'Duplicate',
+          name: 'Duplicate',
+          action: handleDuplicateRequest,
+          icon: 'copy',
+          hint: hotKeyRegistry.request_showDuplicate,
+        },
+        {
+          id: 'Rename',
+          name: 'Rename',
+          action: onRename,
+          icon: 'edit',
+        },
+        {
+          id: 'Delete',
+          name: 'Delete',
+          action: deleteRequest,
+          icon: 'trash',
+          hint: hotKeyRegistry.request_showDelete,
+        },
+        {
+          id: 'Settings',
+          name: 'Settings',
+          icon: 'gear',
+          hint: hotKeyRegistry.request_showSettings,
+          action: () => {
+            setIsSettingsModalOpen(true);
+          },
+        },
+      ],
+    },
+    ...(actionPlugins.length > 0
+      ? [
+          {
+            name: 'Plugins',
+            id: 'plugins',
+            icon: 'plug' as IconName,
+            items: actionPlugins.map(plugin => ({
+              id: plugin.label,
+              name: plugin.label,
+              icon: (plugin.icon as IconName) || 'plug',
+              action: () => handlePluginClick(plugin),
+            })),
+          },
+        ]
+      : []),
+  ];
 
   return (
     <Fragment>
@@ -273,21 +284,31 @@ export const RequestActionsDropdown = ({
         <Button
           data-testid={`Dropdown-${toKebabCase(request.name)}`}
           aria-label="Request Actions"
-          className="hidden items-center group-focus:flex group-hover:flex justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="hidden aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] group-hover:flex group-focus:flex aria-pressed:bg-[--hl-sm]"
         >
           <Icon icon="caret-down" />
         </Button>
-        <Popover className="min-w-max overflow-y-hidden flex flex-col" triggerRef={triggerRef} placement="bottom end" offset={5}>
+        <Popover
+          className="flex min-w-max flex-col overflow-y-hidden"
+          triggerRef={triggerRef}
+          placement="bottom end"
+          offset={5}
+        >
           <Menu
             aria-label="Request Actions Menu"
             selectionMode="single"
-            onAction={key => requestActionList.find(i => i.items.find(a => a.id === key))?.items.find(a => a.id === key)?.action()}
+            onAction={key =>
+              requestActionList
+                .find(i => i.items.find(a => a.id === key))
+                ?.items.find(a => a.id === key)
+                ?.action()
+            }
             items={requestActionList}
-            className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+            className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
             {section => (
-              <Section className='flex-1 flex flex-col'>
-                <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+              <Section className="flex flex-1 flex-col">
+                <Header className="flex items-center gap-2 py-1 pl-2 text-xs uppercase text-[--hl]">
                   <Icon icon={section.icon} /> <span>{section.name}</span>
                 </Header>
                 <Collection items={section.items}>
@@ -295,12 +316,12 @@ export const RequestActionsDropdown = ({
                     <MenuItem
                       key={item.id}
                       id={item.id}
-                      className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                       aria-label={item.name}
                     >
                       <Icon icon={item.icon} />
                       <span>{item.name}</span>
-                      {item.hint && (<DropdownHint keyBindings={item.hint} />)}
+                      {item.hint && <DropdownHint keyBindings={item.hint} />}
                     </MenuItem>
                   )}
                 </Collection>
@@ -309,14 +330,7 @@ export const RequestActionsDropdown = ({
           </Menu>
         </Popover>
       </MenuTrigger>
-      {
-        isSettingsModalOpen && (
-          <RequestSettingsModal
-            request={request}
-            onHide={() => setIsSettingsModalOpen(false)}
-          />
-        )
-      }
-    </Fragment >
+      {isSettingsModalOpen && <RequestSettingsModal request={request} onHide={() => setIsSettingsModalOpen(false)} />}
+    </Fragment>
   );
 };
diff --git a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx
index d3752893b1..0c4ad07792 100644
--- a/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/request-group-actions-dropdown.tsx
@@ -29,19 +29,9 @@ interface Props extends Partial<DropdownProps> {
   onRename: () => void;
 }
 
-export const RequestGroupActionsDropdown = ({
-  requestGroup,
-  isOpen,
-  triggerRef,
-  onOpenChange,
-  onRename,
-}: Props) => {
-  const {
-    activeProject,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
-  const {
-    settings,
-  } = useRootLoaderData();
+export const RequestGroupActionsDropdown = ({ requestGroup, isOpen, triggerRef, onOpenChange, onRename }: Props) => {
+  const { activeProject } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { settings } = useRootLoaderData();
   const { hotKeyRegistry } = settings;
   const [actionPlugins, setActionPlugins] = useState<RequestGroupAction[]>([]);
   const [loadingActions, setLoadingActions] = useState<Record<string, boolean>>({});
@@ -49,15 +39,26 @@ export const RequestGroupActionsDropdown = ({
   const navigate = useNavigate();
 
   const requestFetcher = useFetcher();
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
 
-  const createRequest = ({ requestType, parentId, req }: { requestType: CreateRequestType; parentId: string; req?: Partial<Request> }) =>
-    requestFetcher.submit(JSON.stringify({ requestType, parentId, req }),
-      {
-        encType: 'application/json',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new`,
-        method: 'post',
-      });
+  const createRequest = ({
+    requestType,
+    parentId,
+    req,
+  }: {
+    requestType: CreateRequestType;
+    parentId: string;
+    req?: Partial<Request>;
+  }) =>
+    requestFetcher.submit(JSON.stringify({ requestType, parentId, req }), {
+      encType: 'application/json',
+      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new`,
+      method: 'post',
+    });
 
   const onOpen = async () => {
     const actionPlugins = await getRequestGroupActions();
@@ -72,12 +73,14 @@ export const RequestGroupActionsDropdown = ({
       label: 'New Name',
       selectText: true,
       onComplete: async (name: string) => {
-        requestFetcher.submit({ _id: requestGroup._id, name },
+        requestFetcher.submit(
+          { _id: requestGroup._id, name },
           {
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/duplicate`,
             method: 'post',
             encType: 'application/json',
-          });
+          },
+        );
       },
     });
   };
@@ -92,11 +95,13 @@ export const RequestGroupActionsDropdown = ({
       onDone: async (isYes: boolean) => {
         if (isYes) {
           models.stats.incrementDeletedRequestsForDescendents(requestGroup);
-          requestFetcher.submit({ id: requestGroup._id },
+          requestFetcher.submit(
+            { id: requestGroup._id },
             {
               action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/delete`,
               method: 'post',
-            });
+            },
+          );
         }
       },
     });
@@ -131,13 +136,12 @@ export const RequestGroupActionsDropdown = ({
     });
 
     dropdownRef.current?.hide();
-
   };
 
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const [isPasteCurlModalOpen, setPasteCurlModalOpen] = useState(false);
 
-  const requestGroupActionItems: ({
+  const requestGroupActionItems: {
     name: string;
     id: string;
     icon: IconName;
@@ -148,147 +152,156 @@ export const RequestGroupActionsDropdown = ({
       hint?: PlatformKeyCombinations;
       action: () => void;
     }[];
-  })[] =
-    [
-      {
-        name: 'Create',
-        id: 'create',
-        icon: 'plus',
-        items: [
-          {
-            id: 'HTTP',
-            name: 'HTTP Request',
-            icon: 'plus-circle',
-            hint: hotKeyRegistry.request_createHTTP,
-            action: () => createRequest({
+  }[] = [
+    {
+      name: 'Create',
+      id: 'create',
+      icon: 'plus',
+      items: [
+        {
+          id: 'HTTP',
+          name: 'HTTP Request',
+          icon: 'plus-circle',
+          hint: hotKeyRegistry.request_createHTTP,
+          action: () =>
+            createRequest({
               requestType: 'HTTP',
               parentId: requestGroup._id,
             }),
-          },
-          {
-            id: 'Event Stream',
-            name: 'Event Stream Request (SSE)',
-            icon: 'plus-circle',
-            action: () => createRequest({
+        },
+        {
+          id: 'Event Stream',
+          name: 'Event Stream Request (SSE)',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
               requestType: 'Event Stream',
               parentId: requestGroup._id,
             }),
-          },
-          {
-            id: 'GraphQL Request',
-            name: 'GraphQL Request',
-            icon: 'plus-circle',
-            action: () => createRequest({
+        },
+        {
+          id: 'GraphQL Request',
+          name: 'GraphQL Request',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
               requestType: 'GraphQL',
               parentId: requestGroup._id,
             }),
-          },
-          {
-            id: 'gRPC Request',
-            name: 'gRPC Request',
-            icon: 'plus-circle',
-            action: () => createRequest({
+        },
+        {
+          id: 'gRPC Request',
+          name: 'gRPC Request',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
               requestType: 'gRPC',
               parentId: requestGroup._id,
             }),
-          },
-          {
-            id: 'WebSocket Request',
-            name: 'WebSocket Request',
-            icon: 'plus-circle',
-            action: () => createRequest({
+        },
+        {
+          id: 'WebSocket Request',
+          name: 'WebSocket Request',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
               requestType: 'WebSocket',
               parentId: requestGroup._id,
             }),
-          },
-          {
-            id: 'New Folder',
-            name: 'New Folder',
-            icon: 'folder',
-            action: () =>
-              showPrompt({
-                title: 'New Folder',
-                defaultValue: 'My Folder',
-                submitName: 'Create',
-                label: 'Name',
-                selectText: true,
-                onComplete: name => requestFetcher.submit({ parentId: requestGroup._id, name },
+        },
+        {
+          id: 'New Folder',
+          name: 'New Folder',
+          icon: 'folder',
+          action: () =>
+            showPrompt({
+              title: 'New Folder',
+              defaultValue: 'My Folder',
+              submitName: 'Create',
+              label: 'Name',
+              selectText: true,
+              onComplete: name =>
+                requestFetcher.submit(
+                  { parentId: requestGroup._id, name },
                   {
                     action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/new`,
                     method: 'post',
-                  }),
-              }),
-          }],
-      },
-      {
-        name: 'Import',
-        id: 'import',
-        icon: 'file-import',
-        items: [
-          {
-            id: 'From Curl',
-            name: 'From Curl',
-            icon: 'terminal',
-            action: () => setPasteCurlModalOpen(true),
-          },
-        ],
-      },
-      {
-        name: 'Actions',
-        id: 'actions',
-        icon: 'cog',
-        items: [
-          {
-            id: 'Duplicate',
-            name: 'Duplicate',
-            icon: 'copy',
-            action: () => handleRequestGroupDuplicate(),
-          },
-          {
-            id: 'Rename',
-            name: 'Rename',
-            icon: 'edit',
-            action: onRename,
-          },
-          {
-            id: 'Settings',
-            name: 'Settings',
-            icon: 'wrench',
-            action: () =>
-              setIsSettingsModalOpen(true),
-          },
-          {
-            id: 'Delete',
-            name: 'Delete',
-            icon: 'trash',
-            action: () =>
-              handleDeleteFolder(),
-          },
-          {
-            id: 'RunFolder',
-            name: 'Run Folder',
-            icon: 'circle-play',
-            action: () => {
-              navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?folder=${requestGroup._id}`,);
-            },
-          },
-        ],
-      },
-      ...(actionPlugins.length > 0 ? [
-        {
-          name: 'Plugins',
-          id: 'plugins',
-          icon: 'plug' as IconName,
-          items: actionPlugins.map(plugin => ({
-            id: plugin.label,
-            name: plugin.label,
-            icon: plugin.icon as IconName || 'plug',
-            action: () =>
-              handlePluginClick(plugin),
-          })),
+                  },
+                ),
+            }),
         },
-      ] : []),
-    ];
+      ],
+    },
+    {
+      name: 'Import',
+      id: 'import',
+      icon: 'file-import',
+      items: [
+        {
+          id: 'From Curl',
+          name: 'From Curl',
+          icon: 'terminal',
+          action: () => setPasteCurlModalOpen(true),
+        },
+      ],
+    },
+    {
+      name: 'Actions',
+      id: 'actions',
+      icon: 'cog',
+      items: [
+        {
+          id: 'Duplicate',
+          name: 'Duplicate',
+          icon: 'copy',
+          action: () => handleRequestGroupDuplicate(),
+        },
+        {
+          id: 'Rename',
+          name: 'Rename',
+          icon: 'edit',
+          action: onRename,
+        },
+        {
+          id: 'Settings',
+          name: 'Settings',
+          icon: 'wrench',
+          action: () => setIsSettingsModalOpen(true),
+        },
+        {
+          id: 'Delete',
+          name: 'Delete',
+          icon: 'trash',
+          action: () => handleDeleteFolder(),
+        },
+        {
+          id: 'RunFolder',
+          name: 'Run Folder',
+          icon: 'circle-play',
+          action: () => {
+            navigate(
+              `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner?folder=${requestGroup._id}`,
+            );
+          },
+        },
+      ],
+    },
+    ...(actionPlugins.length > 0
+      ? [
+          {
+            name: 'Plugins',
+            id: 'plugins',
+            icon: 'plug' as IconName,
+            items: actionPlugins.map(plugin => ({
+              id: plugin.label,
+              name: plugin.label,
+              icon: (plugin.icon as IconName) || 'plug',
+              action: () => handlePluginClick(plugin),
+            })),
+          },
+        ]
+      : []),
+  ];
 
   return (
     <Fragment>
@@ -302,21 +315,31 @@ export const RequestGroupActionsDropdown = ({
         <Button
           data-testid={`Dropdown-${toKebabCase(requestGroup.name)}`}
           aria-label="Request Group Actions"
-          className="hidden items-center group-focus:flex group-hover:flex data-[focused]:flex aria-pressed:flex justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="hidden aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] group-hover:flex group-focus:flex aria-pressed:flex aria-pressed:bg-[--hl-sm] data-[focused]:flex"
         >
           <Icon icon="caret-down" />
         </Button>
-        <Popover className="min-w-max overflow-y-hidden flex flex-col" triggerRef={triggerRef} placement="bottom end" offset={5}>
+        <Popover
+          className="flex min-w-max flex-col overflow-y-hidden"
+          triggerRef={triggerRef}
+          placement="bottom end"
+          offset={5}
+        >
           <Menu
             aria-label="Request Group Actions Menu"
             selectionMode="single"
-            onAction={key => requestGroupActionItems.find(i => i.items.find(a => a.id === key))?.items.find(a => a.id === key)?.action()}
+            onAction={key =>
+              requestGroupActionItems
+                .find(i => i.items.find(a => a.id === key))
+                ?.items.find(a => a.id === key)
+                ?.action()
+            }
             items={requestGroupActionItems}
-            className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto h-full focus:outline-none"
+            className="h-full min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
             {section => (
-              <Section className='flex-1 flex flex-col'>
-                <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+              <Section className="flex flex-1 flex-col">
+                <Header className="flex items-center gap-2 py-1 pl-2 text-xs uppercase text-[--hl]">
                   <Icon icon={section.icon} /> <span>{section.name}</span>
                 </Header>
                 <Collection items={section.items}>
@@ -324,12 +347,12 @@ export const RequestGroupActionsDropdown = ({
                     <MenuItem
                       key={item.id}
                       id={item.id}
-                      className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                       aria-label={item.name}
                     >
                       <Icon icon={item.icon} />
                       <span>{item.name}</span>
-                      {item.hint && (<DropdownHint keyBindings={item.hint} />)}
+                      {item.hint && <DropdownHint keyBindings={item.hint} />}
                     </MenuItem>
                   )}
                 </Collection>
@@ -338,14 +361,9 @@ export const RequestGroupActionsDropdown = ({
           </Menu>
         </Popover>
       </MenuTrigger>
-      {
-        isSettingsModalOpen && (
-          <RequestGroupSettingsModal
-            requestGroup={requestGroup}
-            onHide={() => setIsSettingsModalOpen(false)}
-          />
-        )
-      }
+      {isSettingsModalOpen && (
+        <RequestGroupSettingsModal requestGroup={requestGroup} onHide={() => setIsSettingsModalOpen(false)} />
+      )}
       {isPasteCurlModalOpen && (
         <PasteCurlModal
           onImport={req => {
diff --git a/packages/insomnia/src/ui/components/dropdowns/response-history-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/response-history-dropdown.tsx
index 7cfaf37f7f..6a69ed3d80 100644
--- a/packages/insomnia/src/ui/components/dropdowns/response-history-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/response-history-dropdown.tsx
@@ -21,19 +21,14 @@ import { TimeTag } from '../tags/time-tag';
 import { URLTag } from '../tags/url-tag';
 import { TimeFromNow } from '../time-from-now';
 
-export const ResponseHistoryDropdown = ({
-  activeResponse,
-}: { activeResponse: Response | WebSocketResponse }) => {
+export const ResponseHistoryDropdown = ({ activeResponse }: { activeResponse: Response | WebSocketResponse }) => {
   const { requestId } = useParams() as { requestId: string };
   const dropdownRef = useRef<DropdownHandle>(null);
   const patchRequestMeta = useRequestMetaPatcher();
-  const {
-    activeEnvironment,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
-  const {
-    responses,
-    requestVersions,
-  } = useRouteLoaderData('request/:requestId') as RequestLoaderData | WebSocketRequestLoaderData;
+  const { activeEnvironment } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { responses, requestVersions } = useRouteLoaderData('request/:requestId') as
+    | RequestLoaderData
+    | WebSocketRequestLoaderData;
   const now = new Date();
   const categories: Record<string, (Response | WebSocketResponse)[]> = {
     minutes: [],
@@ -43,30 +38,40 @@ export const ResponseHistoryDropdown = ({
     other: [],
   };
 
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const fetcher = useFetcher();
 
-  const handleSetActiveResponse = useCallback(async (requestId: string, activeResponse: Response | WebSocketResponse) => {
-    if (isWebSocketResponse(activeResponse)) {
-      window.main.webSocket.close({ requestId });
-    }
+  const handleSetActiveResponse = useCallback(
+    async (requestId: string, activeResponse: Response | WebSocketResponse) => {
+      if (isWebSocketResponse(activeResponse)) {
+        window.main.webSocket.close({ requestId });
+      }
 
-    if (activeResponse.requestVersionId) {
-      await models.requestVersion.restore(activeResponse.requestVersionId);
-    }
+      if (activeResponse.requestVersionId) {
+        await models.requestVersion.restore(activeResponse.requestVersionId);
+      }
 
-    await patchRequestMeta(requestId, { activeResponseId: activeResponse._id });
-  }, [patchRequestMeta]);
+      await patchRequestMeta(requestId, { activeResponseId: activeResponse._id });
+    },
+    [patchRequestMeta],
+  );
 
   const handleDeleteResponses = useCallback(async () => {
     if (isWebSocketResponse(activeResponse)) {
       window.main.webSocket.close({ requestId });
     }
-    fetcher.submit({}, {
-      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/response/delete-all`,
-      method: 'post',
-      encType: 'application/json',
-    });
+    fetcher.submit(
+      {},
+      {
+        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/response/delete-all`,
+        method: 'post',
+        encType: 'application/json',
+      },
+    );
   }, [activeResponse, fetcher, organizationId, projectId, requestId, workspaceId]);
 
   const handleDeleteResponse = useCallback(async () => {
@@ -75,22 +80,26 @@ export const ResponseHistoryDropdown = ({
         window.main.webSocket.close({ requestId });
       }
     }
-    fetcher.submit({ responseId: activeResponse._id }, {
-      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/response/delete`,
-      method: 'post',
-      encType: 'application/json',
-    });
+    fetcher.submit(
+      { responseId: activeResponse._id },
+      {
+        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/response/delete`,
+        method: 'post',
+        encType: 'application/json',
+      },
+    );
   }, [activeResponse, fetcher, requestId, organizationId, projectId, workspaceId]);
 
   responses.forEach((response: Response | WebSocketResponse) => {
     const responseTime = new Date(response.created);
-    const match = Object.entries({
-      'minutes': differenceInMinutes(now, responseTime) < 5,
-      'hours': differenceInHours(now, responseTime) < 2,
-      'today': isToday(responseTime),
-      'week': isThisWeek(responseTime),
-      'other': true,
-    }).find(([, value]) => value === true)?.[0] || 'other';
+    const match =
+      Object.entries({
+        minutes: differenceInMinutes(now, responseTime) < 5,
+        hours: differenceInHours(now, responseTime) < 2,
+        today: isToday(responseTime),
+        week: isThisWeek(responseTime),
+        other: true,
+      }).find(([, value]) => value === true)?.[0] || 'other';
     categories[match].push(response);
   });
 
@@ -98,19 +107,18 @@ export const ResponseHistoryDropdown = ({
     const activeResponseId = activeResponse ? activeResponse._id : 'n/a';
     const active = response._id === activeResponseId;
     const requestVersion = requestVersions.find(({ _id }) => _id === response.requestVersionId);
-    const request = requestVersion ? decompressObject<Request | WebSocketRequest>(requestVersion.compressedRequest) : null;
+    const request = requestVersion
+      ? decompressObject<Request | WebSocketRequest>(requestVersion.compressedRequest)
+      : null;
 
     return (
-      <DropdownItem
-        key={response._id}
-        aria-label={response._id}
-      >
+      <DropdownItem key={response._id} aria-label={response._id}>
         <ItemContent
           isDisabled={active}
           icon={active ? 'thumb-track' : 'empty'}
           onClick={() => handleSetActiveResponse(requestId, response)}
           label={
-            <div className='leading-10'>
+            <div className="leading-10">
               <StatusTag
                 small
                 statusCode={response.statusCode}
@@ -132,12 +140,14 @@ export const ResponseHistoryDropdown = ({
                   tooltipDelay={1000}
                 />
               )}
-              {!response.requestVersionId ?
+              {!response.requestVersionId ? (
                 <i
                   className="icon fa fa-info-circle"
-                  title={'Request will not be restored with this response because it was created before this ability was added'}
+                  title={
+                    'Request will not be restored with this response because it was created before this ability was added'
+                  }
                 />
-                : null}
+              ) : null}
             </div>
           }
         />
@@ -171,56 +181,37 @@ export const ResponseHistoryDropdown = ({
     >
       <DropdownSection
         aria-label={`${environmentName} Responses`}
-        title={<span><strong>{environmentName}</strong> Responses</span>}
+        title={
+          <span>
+            <strong>{environmentName}</strong> Responses
+          </span>
+        }
       >
-        <DropdownItem aria-label='Delete Current Response'>
-          <ItemContent
-            icon="trash-o"
-            label="Delete Current Response"
-            onClick={handleDeleteResponse}
-          />
+        <DropdownItem aria-label="Delete Current Response">
+          <ItemContent icon="trash-o" label="Delete Current Response" onClick={handleDeleteResponse} />
         </DropdownItem>
-        <DropdownItem aria-label='Clear History'>
-          <ItemContent
-            icon="trash-o"
-            label="Clear History"
-            onClick={handleDeleteResponses}
-          />
+        <DropdownItem aria-label="Clear History">
+          <ItemContent icon="trash-o" label="Clear History" onClick={handleDeleteResponses} />
         </DropdownItem>
       </DropdownSection>
 
-      <DropdownSection
-        aria-label='Minutes Section'
-        title="Just Now"
-      >
+      <DropdownSection aria-label="Minutes Section" title="Just Now">
         {categories.minutes.map(renderResponseRow)}
       </DropdownSection>
 
-      <DropdownSection
-        aria-label='Hours Section'
-        title="Less Than Two Hours Ago"
-      >
+      <DropdownSection aria-label="Hours Section" title="Less Than Two Hours Ago">
         {categories.hours.map(renderResponseRow)}
       </DropdownSection>
 
-      <DropdownSection
-        aria-label='Today Section'
-        title="Today"
-      >
+      <DropdownSection aria-label="Today Section" title="Today">
         {categories.today.map(renderResponseRow)}
       </DropdownSection>
 
-      <DropdownSection
-        aria-label='Week Section'
-        title="This Week"
-      >
+      <DropdownSection aria-label="Week Section" title="This Week">
         {categories.week.map(renderResponseRow)}
       </DropdownSection>
 
-      <DropdownSection
-        aria-label='Other Section'
-        title="Older Than This Week"
-      >
+      <DropdownSection aria-label="Other Section" title="Older Than This Week">
         {categories.other.map(renderResponseRow)}
       </DropdownSection>
     </Dropdown>
diff --git a/packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx
index af33be3a10..bda950914b 100644
--- a/packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/sync-dropdown.tsx
@@ -1,6 +1,16 @@
 import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC, Fragment, useCallback, useEffect, useState } from 'react';
-import { Button, Collection, Menu, MenuItem, MenuTrigger, Popover, Section, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  Section,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
@@ -22,7 +32,11 @@ interface Props {
 const ONE_MINUTE_IN_MS = 1000 * 60;
 
 export const SyncDropdown: FC<Props> = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
 
   const [isGitRepoSettingsModalOpen, setIsGitRepoSettingsModalOpen] = useState(false);
   const [isSyncHistoryModalOpen, setIsSyncHistoryModalOpen] = useState(false);
@@ -39,16 +53,21 @@ export const SyncDropdown: FC<Props> = () => {
 
   useEffect(() => {
     if (syncDataLoaderFetcher.state === 'idle' && !syncDataLoaderFetcher.data) {
-      syncDataLoaderFetcher.load(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/sync-data`);
+      syncDataLoaderFetcher.load(
+        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/sync-data`,
+      );
     }
   }, [organizationId, projectId, syncDataLoaderFetcher, workspaceId]);
 
   const triggerSync = useCallback(() => {
     const submit = syncDataActionFetcher.submit;
-    submit({}, {
-      method: 'POST',
-      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/sync-data`,
-    });
+    submit(
+      {},
+      {
+        method: 'POST',
+        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/sync-data`,
+      },
+    );
   }, [organizationId, projectId, syncDataActionFetcher.submit, workspaceId]);
 
   useEffect(() => {
@@ -65,11 +84,15 @@ export const SyncDropdown: FC<Props> = () => {
     };
   }, [triggerSync]);
 
-  useInterval(() => {
-    triggerSync();
-  }, isWindowFocused ? ONE_MINUTE_IN_MS : null);
+  useInterval(
+    () => {
+      triggerSync();
+    },
+    isWindowFocused ? ONE_MINUTE_IN_MS : null,
+  );
 
-  const error = checkoutFetcher.data?.error || pullFetcher.data?.error || pushFetcher.data?.error || rollbackFetcher.data?.error;
+  const error =
+    checkoutFetcher.data?.error || pullFetcher.data?.error || pushFetcher.data?.error || rollbackFetcher.data?.error;
 
   useEffect(() => {
     if (error) {
@@ -82,7 +105,7 @@ export const SyncDropdown: FC<Props> = () => {
 
   if (syncDataLoaderFetcher.state !== 'idle' && !syncDataLoaderFetcher.data) {
     return (
-      <Button className="flex items-center h-9 gap-4 px-[--padding-md] w-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+      <Button className="flex h-9 w-full items-center gap-4 rounded-sm px-[--padding-md] text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
         <Icon icon="refresh" className="animate-spin" /> Initializing
       </Button>
     );
@@ -143,12 +166,15 @@ export const SyncDropdown: FC<Props> = () => {
     icon: 'code-branch',
     isActive: branch === currentBranch,
     action: () => {
-      checkoutFetcher.submit({
-        branch,
-      }, {
-        method: 'POST',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/checkout`,
-      });
+      checkoutFetcher.submit(
+        {
+          branch,
+        },
+        {
+          method: 'POST',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/checkout`,
+        },
+      );
     },
   }));
 
@@ -159,103 +185,135 @@ export const SyncDropdown: FC<Props> = () => {
     isDisabled?: boolean;
     action: () => void;
   }[] = [
-      {
-        id: 'branches',
-        name: 'Branches',
-        icon: 'code-fork',
-        action: () => setIsSyncBranchesModalOpen(true),
-      },
-      {
-        id: 'history',
-        name: 'History',
-        icon: 'clock',
-        isDisabled: historyCount === 0,
-        action: () => setIsSyncHistoryModalOpen(true),
-      },
-      {
-        id: 'revert',
-        name: 'Discard all changes',
-        icon: 'undo',
-        isDisabled: historyCount === 0 || rollbackFetcher.state !== 'idle' || !canCreateSnapshot,
-        action: () => {
-          rollbackFetcher.submit({}, {
+    {
+      id: 'branches',
+      name: 'Branches',
+      icon: 'code-fork',
+      action: () => setIsSyncBranchesModalOpen(true),
+    },
+    {
+      id: 'history',
+      name: 'History',
+      icon: 'clock',
+      isDisabled: historyCount === 0,
+      action: () => setIsSyncHistoryModalOpen(true),
+    },
+    {
+      id: 'revert',
+      name: 'Discard all changes',
+      icon: 'undo',
+      isDisabled: historyCount === 0 || rollbackFetcher.state !== 'idle' || !canCreateSnapshot,
+      action: () => {
+        rollbackFetcher.submit(
+          {},
+          {
             method: 'POST',
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/rollback`,
-          });
-        },
+          },
+        );
       },
-      {
-        id: 'commit',
-        name: 'Commit',
-        icon: 'cube',
-        isDisabled: !canCreateSnapshot || rollbackFetcher.state !== 'idle',
-        action: () => setIsSyncStagingModalOpen(true),
-      },
-      {
-        id: 'pull',
-        name: pullFetcher.state !== 'idle' ? 'Pulling...' : behind > 0 ? `Pull ${behind || ''} Commit${behind === 1 ? '' : 's'}` : 'Pull',
-        icon: pullFetcher.state !== 'idle' ? 'refresh' : 'cloud-download',
-        isDisabled: behind === 0 || pullFetcher.state !== 'idle',
-        action: () => {
-          pullFetcher.submit({}, {
+    },
+    {
+      id: 'commit',
+      name: 'Commit',
+      icon: 'cube',
+      isDisabled: !canCreateSnapshot || rollbackFetcher.state !== 'idle',
+      action: () => setIsSyncStagingModalOpen(true),
+    },
+    {
+      id: 'pull',
+      name:
+        pullFetcher.state !== 'idle'
+          ? 'Pulling...'
+          : behind > 0
+            ? `Pull ${behind || ''} Commit${behind === 1 ? '' : 's'}`
+            : 'Pull',
+      icon: pullFetcher.state !== 'idle' ? 'refresh' : 'cloud-download',
+      isDisabled: behind === 0 || pullFetcher.state !== 'idle',
+      action: () => {
+        pullFetcher.submit(
+          {},
+          {
             method: 'POST',
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/pull`,
-          });
-        },
+          },
+        );
       },
-      {
-        id: 'push',
-        name: pushFetcher.state !== 'idle' ? 'Pushing...' : ahead > 0 ? `Push ${ahead || ''} Commit${ahead === 1 ? '' : 's'}` : 'Push',
-        icon: pushFetcher.state !== 'idle' ? 'refresh' : 'cloud-upload',
-        isDisabled: ahead === 0 || pushFetcher.state !== 'idle',
-        action: () => {
-          pushFetcher.submit({}, {
+    },
+    {
+      id: 'push',
+      name:
+        pushFetcher.state !== 'idle'
+          ? 'Pushing...'
+          : ahead > 0
+            ? `Push ${ahead || ''} Commit${ahead === 1 ? '' : 's'}`
+            : 'Push',
+      icon: pushFetcher.state !== 'idle' ? 'refresh' : 'cloud-upload',
+      isDisabled: ahead === 0 || pushFetcher.state !== 'idle',
+      action: () => {
+        pushFetcher.submit(
+          {},
+          {
             method: 'POST',
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/push`,
-          });
-        },
+          },
+        );
       },
-    ];
+    },
+  ];
 
-  const isSyncing = checkoutFetcher.state !== 'idle' || pullFetcher.state !== 'idle' || pushFetcher.state !== 'idle' || rollbackFetcher.state !== 'idle';
+  const isSyncing =
+    checkoutFetcher.state !== 'idle' ||
+    pullFetcher.state !== 'idle' ||
+    pushFetcher.state !== 'idle' ||
+    rollbackFetcher.state !== 'idle';
 
   const allSyncMenuActionList = [...localBranchesActionList, ...syncMenuActionList];
-  const syncError = syncDataLoaderFetcher.data && 'error' in syncDataLoaderFetcher.data ? syncDataLoaderFetcher.data.error : null;
+  const syncError =
+    syncDataLoaderFetcher.data && 'error' in syncDataLoaderFetcher.data ? syncDataLoaderFetcher.data.error : null;
   return (
     <Fragment>
       <MenuTrigger>
-        <div className="flex items-center h-[--line-height-sm] w-full aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+        <div className="flex h-[--line-height-sm] w-full items-center text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
           <Button
             aria-label="Insomnia Sync"
-            className="flex-1 flex h-full items-center gap-2 truncate px-[--padding-md]"
+            className="flex h-full flex-1 items-center gap-2 truncate px-[--padding-md]"
           >
             <Icon
               icon={syncError ? 'warning' : isSyncing ? 'refresh' : 'cloud'}
               className={`w-5 ${syncError ? 'text-[--color-warning]' : isSyncing ? 'animate-spin' : ''}`}
             />
-            <span className={`truncate ${syncError ? 'text-[--color-warning]' : ''}`}>{syncError ? 'Error syncing with Insomnia Cloud' : currentBranch}</span>
+            <span className={`truncate ${syncError ? 'text-[--color-warning]' : ''}`}>
+              {syncError ? 'Error syncing with Insomnia Cloud' : currentBranch}
+            </span>
           </Button>
-          <div className="flex items-center h-full">
+          <div className="flex h-full items-center">
             <TooltipTrigger>
               <Button className="h-full pl-2">
-                <Icon icon="cube" className={`transition-colors ${canCreateSnapshot ? 'text-[--color-warning]' : 'opacity-50'}`} />
+                <Icon
+                  icon="cube"
+                  className={`transition-colors ${canCreateSnapshot ? 'text-[--color-warning]' : 'opacity-50'}`}
+                />
               </Button>
               <Tooltip
                 placement="top end"
                 offset={8}
-                className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
               >
                 {snapshotToolTipMsg}
               </Tooltip>
             </TooltipTrigger>
             <TooltipTrigger>
               <Button className="h-full px-2">
-                <Icon icon="cloud-download" className={`transition-colors ${canPull ? '' : 'opacity-50'} ${pullFetcher.state !== 'idle' ? 'animate-pulse' : ''}`} />
+                <Icon
+                  icon="cloud-download"
+                  className={`transition-colors ${canPull ? '' : 'opacity-50'} ${pullFetcher.state !== 'idle' ? 'animate-pulse' : ''}`}
+                />
               </Button>
               <Tooltip
                 placement="top end"
                 offset={8}
-                className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
               >
                 {pullToolTipMsg}
               </Tooltip>
@@ -263,19 +321,22 @@ export const SyncDropdown: FC<Props> = () => {
 
             <TooltipTrigger>
               <Button className="h-full pr-[--padding-md]">
-                <Icon icon="cloud-upload" className={`transition-colors ${canPush ? '' : 'opacity-50'} ${pushFetcher.state !== 'idle' ? 'animate-pulse' : ''}`} />
+                <Icon
+                  icon="cloud-upload"
+                  className={`transition-colors ${canPush ? '' : 'opacity-50'} ${pushFetcher.state !== 'idle' ? 'animate-pulse' : ''}`}
+                />
               </Button>
               <Tooltip
                 placement="top end"
                 offset={8}
-                className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
               >
                 {pushToolTipMsg}
               </Tooltip>
             </TooltipTrigger>
           </div>
         </div>
-        <Popover className="min-w-max max-w-lg overflow-hidden" placement='top end' offset={8}>
+        <Popover className="min-w-max max-w-lg overflow-hidden" placement="top end" offset={8}>
           <Menu
             aria-label="Insomnia Sync Menu"
             selectionMode="single"
@@ -284,30 +345,32 @@ export const SyncDropdown: FC<Props> = () => {
               const item = allSyncMenuActionList.find(item => item.id === key);
               item?.action();
             }}
-            className="border max-w-lg select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            className="max-h-[85vh] max-w-lg select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
             {syncError && (
-              <Section className='border-b border-solid border-[--hl-sm]'>
+              <Section className="border-b border-solid border-[--hl-sm]">
                 <MenuItem
-                  className={'flex overflow-hidden gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] w-full text-md whitespace-nowrap bg-transparent disabled:cursor-not-allowed focus:outline-none transition-colors'}
+                  className={
+                    'text-md flex w-full items-center gap-2 overflow-hidden whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold'
+                  }
                   aria-label={syncError}
                 >
                   <Icon icon="exclamation-triangle" className="text-[--color-warning]" />
-                  <p className='whitespace-normal'>{syncError}</p>
+                  <p className="whitespace-normal">{syncError}</p>
                 </MenuItem>
               </Section>
             )}
             {!syncError && (
               <Fragment>
-                <Section className='border-b border-solid border-[--hl-sm]'>
+                <Section className="border-b border-solid border-[--hl-sm]">
                   <Collection items={localBranchesActionList}>
                     {item => (
                       <MenuItem
-                        className={`aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isActive ? 'font-bold' : ''}`}
+                        className={`text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold ${item.isActive ? 'font-bold' : ''}`}
                         aria-label={item.name}
                       >
                         <Icon icon={item.icon} className={item.isActive ? 'text-[--color-success]' : ''} />
-                        <span className='truncate'>{item.name}</span>
+                        <span className="truncate">{item.name}</span>
                       </MenuItem>
                     )}
                   </Collection>
@@ -316,7 +379,9 @@ export const SyncDropdown: FC<Props> = () => {
                   <Collection items={syncMenuActionList}>
                     {item => (
                       <MenuItem
-                        className={'aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors'}
+                        className={
+                          'text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold'
+                        }
                         aria-label={item.name}
                       >
                         <Icon icon={item.icon} />
@@ -330,11 +395,7 @@ export const SyncDropdown: FC<Props> = () => {
           </Menu>
         </Popover>
       </MenuTrigger>
-      {isGitRepoSettingsModalOpen && (
-        <GitRepositorySettingsModal
-          onHide={() => setIsGitRepoSettingsModalOpen(false)}
-        />
-      )}
+      {isGitRepoSettingsModalOpen && <GitRepositorySettingsModal onHide={() => setIsGitRepoSettingsModalOpen(false)} />}
       {isSyncBranchesModalOpen && (
         <SyncBranchesModal
           branches={localBranches}
@@ -354,10 +415,7 @@ export const SyncDropdown: FC<Props> = () => {
         />
       )}
       {isSyncHistoryModalOpen && (
-        <SyncHistoryModal
-          history={history}
-          onClose={() => setIsSyncHistoryModalOpen(false)}
-        />
+        <SyncHistoryModal history={history} onClose={() => setIsSyncHistoryModalOpen(false)} />
       )}
     </Fragment>
   );
diff --git a/packages/insomnia/src/ui/components/dropdowns/websocket-preview-mode.tsx b/packages/insomnia/src/ui/components/dropdowns/websocket-preview-mode.tsx
index 3cba7bec6c..d62cb1de20 100644
--- a/packages/insomnia/src/ui/components/dropdowns/websocket-preview-mode.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/websocket-preview-mode.tsx
@@ -13,15 +13,15 @@ const contentTypes: {
   id: string;
   name: string;
 }[] = [
-    {
-      id: CONTENT_TYPE_JSON,
-      name: 'JSON',
-    },
-    {
-      id: CONTENT_TYPE_PLAINTEXT,
-      name: 'Raw',
-    },
-  ];
+  {
+    id: CONTENT_TYPE_JSON,
+    name: 'JSON',
+  },
+  {
+    id: CONTENT_TYPE_PLAINTEXT,
+    name: 'Raw',
+  },
+];
 
 export const WebSocketPreviewMode: FC<Props> = ({ previewMode, onSelect }) => {
   return (
@@ -33,38 +33,27 @@ export const WebSocketPreviewMode: FC<Props> = ({ previewMode, onSelect }) => {
       }}
       selectedKey={previewMode}
     >
-      <Button className="px-4 min-w-[12ch] py-1 font-bold flex flex-1 items-center justify-between gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-        <SelectValue<{ id: string; name: string }>
-          className="flex truncate items-center justify-center gap-2"
-        >
-          {({ selectedText }) => (
-            <div className='flex items-center gap-2 text-[--hl]'>
-              {selectedText}
-            </div>
-          )}
+      <Button className="flex min-w-[12ch] flex-1 items-center justify-between gap-2 rounded-sm px-4 py-1 text-sm font-bold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+        <SelectValue<{ id: string; name: string }> className="flex items-center justify-center gap-2 truncate">
+          {({ selectedText }) => <div className="flex items-center gap-2 text-[--hl]">{selectedText}</div>}
         </SelectValue>
         <Icon icon="caret-down" />
       </Button>
-      <Popover className="min-w-max overflow-y-hidden flex flex-col">
+      <Popover className="flex min-w-max flex-col overflow-y-hidden">
         <ListBox
           items={contentTypes}
-          className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
         >
           {item => (
             <ListBoxItem
-              className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
               aria-label={item.name}
               textValue={item.name}
             >
               {({ isSelected }) => (
                 <>
                   <span>{item.name}</span>
-                  {isSelected && (
-                    <Icon
-                      icon="check"
-                      className="text-[--color-success] justify-self-end"
-                    />
-                  )}
+                  {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                 </>
               )}
             </ListBoxItem>
diff --git a/packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx
index c2b193cbbe..f6286efa49 100644
--- a/packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/workspace-card-dropdown.tsx
@@ -44,39 +44,43 @@ const useDocumentActionPlugins = ({ workspace, apiSpec, project }: Props) => {
     }
   }, [workspace.scope]);
 
-  const handleClick = useCallback(async (p: DocumentAction) => {
-    startLoading(p.label);
+  const handleClick = useCallback(
+    async (p: DocumentAction) => {
+      startLoading(p.label);
 
-    try {
-      const context = {
-        ...pluginContexts.app.init('no-render'),
-        ...pluginContexts.data.init(project._id),
-        ...pluginContexts.store.init(p.plugin),
-      };
-      await p.action(context, parseApiSpec(apiSpec?.contents || ''));
-    } catch (err) {
-      showError({
-        title: 'Document Action Failed',
-        error: err,
-      });
-    } finally {
-      stopLoading(p.label);
-    }
-  }, [apiSpec?.contents, project._id, startLoading, stopLoading]);
+      try {
+        const context = {
+          ...pluginContexts.app.init('no-render'),
+          ...pluginContexts.data.init(project._id),
+          ...pluginContexts.store.init(p.plugin),
+        };
+        await p.action(context, parseApiSpec(apiSpec?.contents || ''));
+      } catch (err) {
+        showError({
+          title: 'Document Action Failed',
+          error: err,
+        });
+      } finally {
+        stopLoading(p.label);
+      }
+    },
+    [apiSpec?.contents, project._id, startLoading, stopLoading],
+  );
 
-  const renderPluginDropdownItems: any = useCallback(() => actionPlugins.map(p => (
-    <DropdownItem
-      key={`${p.plugin.name}:${p.label}`}
-      aria-label={p.label}
-    >
-      <ItemContent
-        icon={isLoading(p.label) ? 'refresh fa-spin' : undefined}
-        label={p.label}
-        stayOpenAfterClick={!p.hideAfterClick}
-        onClick={() => handleClick(p)}
-      />
-    </DropdownItem>
-  )), [actionPlugins, handleClick, isLoading]);
+  const renderPluginDropdownItems: any = useCallback(
+    () =>
+      actionPlugins.map(p => (
+        <DropdownItem key={`${p.plugin.name}:${p.label}`} aria-label={p.label}>
+          <ItemContent
+            icon={isLoading(p.label) ? 'refresh fa-spin' : undefined}
+            label={p.label}
+            stayOpenAfterClick={!p.hideAfterClick}
+            onClick={() => handleClick(p)}
+          />
+        </DropdownItem>
+      )),
+    [actionPlugins, handleClick, isLoading],
+  );
 
   return { renderPluginDropdownItems, refresh };
 };
@@ -89,10 +93,7 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
   const [isExportModalOpen, setIsExportModalOpen] = useState(false);
   const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false);
   const [isDeleteRemoteWorkspaceModalOpen, setIsDeleteRemoteWorkspaceModalOpen] = useState(false);
-  const {
-    organizationId,
-    projectId,
-  } = useParams() as { organizationId: string; projectId: string };
+  const { organizationId, projectId } = useParams() as { organizationId: string; projectId: string };
 
   const deleteWorkspaceFetcher = useFetcher();
 
@@ -102,22 +103,21 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
   return (
     <Fragment>
       <Dropdown
-        aria-label='Workspace Actions Dropdown'
+        aria-label="Workspace Actions Dropdown"
         onOpen={refresh}
         triggerButton={
-          <Button aria-label='Workspace actions menu button' className="px-4 py-1 flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+          <Button
+            aria-label="Workspace actions menu button"
+            className="flex flex-1 items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          >
             <SvgIcon icon="ellipsis" />
           </Button>
         }
       >
-        <DropdownItem aria-label='Duplicate / Move'>
-          <ItemContent
-            label="Duplicate / Move"
-            icon="copy"
-            onClick={() => setIsDuplicateModalOpen(true)}
-          />
+        <DropdownItem aria-label="Duplicate / Move">
+          <ItemContent label="Duplicate / Move" icon="copy" onClick={() => setIsDuplicateModalOpen(true)} />
         </DropdownItem>
-        <DropdownItem aria-label='Rename'>
+        <DropdownItem aria-label="Rename">
           <ItemContent
             label="Rename"
             icon="pen-to-square"
@@ -135,21 +135,17 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
                       action: `/organization/${organizationId}/project/${workspace.parentId}/workspace/update`,
                       method: 'post',
                       encType: 'application/json',
-                    }
+                    },
                   ),
               });
             }}
           />
         </DropdownItem>
-        <DropdownSection aria-label='Meta section'>
-          <DropdownItem aria-label='Import'>
-            <ItemContent
-              label="Import"
-              icon="file-import"
-              onClick={() => setIsImportModalOpen(true)}
-            />
+        <DropdownSection aria-label="Meta section">
+          <DropdownItem aria-label="Import">
+            <ItemContent label="Import" icon="file-import" onClick={() => setIsImportModalOpen(true)} />
           </DropdownItem>
-          <DropdownItem aria-label='Export'>
+          <DropdownItem aria-label="Export">
             <ItemContent
               label="Export"
               icon="file-export"
@@ -164,18 +160,14 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
               }}
             />
           </DropdownItem>
-          <DropdownItem aria-label='Settings'>
-            <ItemContent
-              label="Settings"
-              icon="gear"
-              onClick={() => setIsSettingsModalOpen(true)}
-            />
+          <DropdownItem aria-label="Settings">
+            <ItemContent label="Settings" icon="gear" onClick={() => setIsSettingsModalOpen(true)} />
           </DropdownItem>
         </DropdownSection>
         {renderPluginDropdownItems()}
 
-        <DropdownSection aria-label='Delete section'>
-          <DropdownItem aria-label='Delete'>
+        <DropdownSection aria-label="Delete section">
+          <DropdownItem aria-label="Delete">
             <ItemContent
               label="Delete"
               icon="trash-o"
@@ -188,10 +180,7 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
         </DropdownSection>
       </Dropdown>
       {isDuplicateModalOpen && (
-        <WorkspaceDuplicateModal
-          onHide={() => setIsDuplicateModalOpen(false)}
-          workspace={workspace}
-        />
+        <WorkspaceDuplicateModal onHide={() => setIsDuplicateModalOpen(false)} workspace={workspace} />
       )}
       {isImportModalOpen && (
         <ImportModal
@@ -205,10 +194,7 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
         />
       )}
       {isExportModalOpen && (
-        <ExportRequestsModal
-          workspaceIdToExport={workspace._id}
-          onClose={() => setIsExportModalOpen(false)}
-        />
+        <ExportRequestsModal workspaceIdToExport={workspace._id} onClose={() => setIsExportModalOpen(false)} />
       )}
       {isSettingsModalOpen && (
         <WorkspaceSettingsModal
@@ -226,23 +212,21 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
             setIsDeleteRemoteWorkspaceModalOpen(false);
           }}
           isDismissable
-          className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+          className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
         >
           <Modal
             onOpenChange={() => {
               setIsDeleteRemoteWorkspaceModalOpen(false);
             }}
-            className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+            className="max-h-full w-full max-w-2xl rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
           >
-            <Dialog
-              className="outline-none"
-            >
+            <Dialog className="outline-none">
               {({ close }) => (
-                <div className='flex flex-col gap-4'>
-                  <div className='flex gap-2 items-center justify-between'>
-                    <Heading className='text-2xl'>Delete {getWorkspaceLabel(workspace).singular}</Heading>
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center justify-between gap-2">
+                    <Heading className="text-2xl">Delete {getWorkspaceLabel(workspace).singular}</Heading>
                     <Button
-                      className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                      className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       onPress={close}
                     >
                       <Icon icon="x" />
@@ -251,22 +235,21 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
                   <deleteWorkspaceFetcher.Form
                     action={`/organization/${organizationId}/project/${workspace.parentId}/workspace/delete`}
                     method="POST"
-                    className='flex flex-col gap-4'
+                    className="flex flex-col gap-4"
                   >
                     <input type="hidden" name="workspaceId" value={workspace._id} />
                     <p>
-                      This will permanently delete the {<strong style={{ whiteSpace: 'pre-wrap' }}>{workspace?.name}</strong>}{' '}
+                      This will permanently delete the{' '}
+                      {<strong style={{ whiteSpace: 'pre-wrap' }}>{workspace?.name}</strong>}{' '}
                       {getWorkspaceLabel(workspace).singular} {isRemoteProject(project) ? 'remotely' : ''}.
                     </p>
                     {deleteWorkspaceFetcher.data && deleteWorkspaceFetcher.data.error && (
-                      <p className="notice error margin-bottom-sm no-margin-top">
-                        {deleteWorkspaceFetcher.data.error}
-                      </p>
+                      <p className="notice error margin-bottom-sm no-margin-top">{deleteWorkspaceFetcher.data.error}</p>
                     )}
                     <div className="flex justify-end">
                       <Button
                         type="submit"
-                        className="hover:no-underline bg-[--color-danger] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-danger] transition-colors rounded-sm"
+                        className="rounded-sm border border-solid border-[--hl-md] bg-[--color-danger] px-3 py-2 text-[--color-font-danger] transition-colors hover:bg-opacity-90 hover:no-underline"
                       >
                         Delete
                       </Button>
@@ -278,7 +261,7 @@ export const WorkspaceCardDropdown: FC<Props> = props => {
           </Modal>
         </ModalOverlay>
       )}
-      { }
+      {}
     </Fragment>
   );
 };
diff --git a/packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx
index 416217871e..0975f7dbb8 100644
--- a/packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/workspace-dropdown.tsx
@@ -1,6 +1,19 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { type FC, type ReactNode, useCallback, useEffect, useState } from 'react';
-import { Button, Collection, Dialog, Header, Heading, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, Popover, Section } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Dialog,
+  Header,
+  Heading,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Modal,
+  ModalOverlay,
+  Popover,
+  Section,
+} from 'react-aria-components';
 import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { getProductName } from '../../../common/constants';
@@ -30,15 +43,16 @@ import { WorkspaceDuplicateModal } from '../modals/workspace-duplicate-modal';
 import { WorkspaceSettingsModal } from '../modals/workspace-settings-modal';
 
 export const WorkspaceDropdown: FC<{}> = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   invariant(organizationId, 'Expected organizationId');
   const { userSession } = useRootLoaderData();
-  const {
-    activeWorkspace,
-    activeWorkspaceMeta,
-    activeProject,
-    activeMockServer,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeWorkspace, activeWorkspaceMeta, activeProject, activeMockServer } = useRouteLoaderData(
+    ':workspaceId',
+  ) as WorkspaceLoaderData;
 
   const [isDuplicateModalOpen, setIsDuplicateModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
@@ -56,45 +70,41 @@ export const WorkspaceDropdown: FC<{}> = () => {
     setIsDuplicateModalOpen(false);
   }, [workspaceId]);
 
-  const {
-    access,
-    generateTests,
-  } = useAIContext();
+  const { access, generateTests } = useAIContext();
 
   useDocBodyKeyboardShortcuts({
     workspace_showSettings: () => setIsSettingsModalOpen(true),
   });
 
-  const handlePluginClick = useCallback(async ({ action, plugin, label }: WorkspaceAction, workspace: Workspace) => {
-    setLoadingActions({ ...loadingActions, [label]: true });
-    try {
-      const context = {
-        ...(pluginContexts.app.init('no-render') as Record<string, any>),
-        ...pluginContexts.data.init(activeProject._id),
-        ...(pluginContexts.store.init(plugin) as Record<string, any>),
-        ...(pluginContexts.network.init() as Record<string, any>),
-      };
+  const handlePluginClick = useCallback(
+    async ({ action, plugin, label }: WorkspaceAction, workspace: Workspace) => {
+      setLoadingActions({ ...loadingActions, [label]: true });
+      try {
+        const context = {
+          ...(pluginContexts.app.init('no-render') as Record<string, any>),
+          ...pluginContexts.data.init(activeProject._id),
+          ...(pluginContexts.store.init(plugin) as Record<string, any>),
+          ...(pluginContexts.network.init() as Record<string, any>),
+        };
 
-      const docs = await db.withDescendants(workspace);
-      const requests = docs
-        .filter(isRequest)
-        .filter(doc => (
-          !doc.isPrivate
-        ));
-      const requestGroups = docs.filter(isRequestGroup);
-      await action(context, {
-        requestGroups,
-        requests,
-        workspace,
-      });
-    } catch (err) {
-      showError({
-        title: 'Plugin Action Failed',
-        error: err,
-      });
-    }
-    setLoadingActions({ ...loadingActions, [label]: false });
-  }, [activeProject._id, loadingActions]);
+        const docs = await db.withDescendants(workspace);
+        const requests = docs.filter(isRequest).filter(doc => !doc.isPrivate);
+        const requestGroups = docs.filter(isRequestGroup);
+        await action(context, {
+          requestGroups,
+          requests,
+          workspace,
+        });
+      } catch (err) {
+        showError({
+          title: 'Plugin Action Failed',
+          error: err,
+        });
+      }
+      setLoadingActions({ ...loadingActions, [label]: false });
+    },
+    [activeProject._id, loadingActions],
+  );
 
   const handleDropdownOpen = useCallback(async () => {
     const actionPlugins = await getWorkspaceActions();
@@ -113,33 +123,37 @@ export const WorkspaceDropdown: FC<{}> = () => {
       hint?: PlatformKeyCombinations;
       action: () => void;
     }[];
-  }[] = [{
-    name: 'Actions',
-    id: 'Actions',
-    icon: 'cog',
-    items: [{
-      id: 'Import',
-      name: 'Import',
-      icon: <Icon icon='file-import' />,
-      action: () => setIsImportModalOpen(true),
-    },
+  }[] = [
     {
-      id: 'Export',
-      name: 'Export',
-      icon: <Icon icon='file-export' />,
-      action: () => {
-        if (activeWorkspace.scope === 'mock-server') {
-          return exportMockServerToFile(activeWorkspace);
-        }
+      name: 'Actions',
+      id: 'Actions',
+      icon: 'cog',
+      items: [
+        {
+          id: 'Import',
+          name: 'Import',
+          icon: <Icon icon="file-import" />,
+          action: () => setIsImportModalOpen(true),
+        },
+        {
+          id: 'Export',
+          name: 'Export',
+          icon: <Icon icon="file-export" />,
+          action: () => {
+            if (activeWorkspace.scope === 'mock-server') {
+              return exportMockServerToFile(activeWorkspace);
+            }
 
-        if (activeWorkspace.scope === 'environment') {
-          return exportGlobalEnvironmentToFile(activeWorkspace);
-        }
+            if (activeWorkspace.scope === 'environment') {
+              return exportGlobalEnvironmentToFile(activeWorkspace);
+            }
 
-        return setIsExportModalOpen(true);
-      },
-    }],
-  }];
+            return setIsExportModalOpen(true);
+          },
+        },
+      ],
+    },
+  ];
 
   const workspaceActionsList: {
     name: string;
@@ -153,48 +167,53 @@ export const WorkspaceDropdown: FC<{}> = () => {
       action: () => void;
     }[];
   }[] = [
-      {
-        name: 'Import',
-        id: 'import',
-        icon: 'cog',
-        items: [{
+    {
+      name: 'Import',
+      id: 'import',
+      icon: 'cog',
+      items: [
+        {
           id: 'from-file',
           name: 'From File',
-          icon: <Icon icon='file-import' />,
+          icon: <Icon icon="file-import" />,
           action: () => setIsImportModalOpen(true),
-        }],
-      },
-      {
-        name: 'Runner',
-        id: 'runner',
-        icon: 'circle-play',
-        items: [
-          {
-            id: 'run',
-            name: 'Run Collection',
-            icon: <Icon icon='circle-play' />,
-            action: () => {
-              navigate(`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner?folder=`,);
-            },
+        },
+      ],
+    },
+    {
+      name: 'Runner',
+      id: 'runner',
+      icon: 'circle-play',
+      items: [
+        {
+          id: 'run',
+          name: 'Run Collection',
+          icon: <Icon icon="circle-play" />,
+          action: () => {
+            navigate(
+              `/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner?folder=`,
+            );
           },
-        ],
-      },
-      {
-        name: 'Actions',
-        id: 'actions',
-        icon: 'cog',
-        items: [
-          {
-            id: 'duplicate',
-            name: 'Duplicate',
-            icon: <Icon icon='bars' />,
-            action: () => setIsDuplicateModalOpen(true),
-          },
-          {
-            id: 'rename',
-            name: 'Rename',
-            icon: <Icon icon='pen-to-square' />,
-            action: () => showPrompt({
+        },
+      ],
+    },
+    {
+      name: 'Actions',
+      id: 'actions',
+      icon: 'cog',
+      items: [
+        {
+          id: 'duplicate',
+          name: 'Duplicate',
+          icon: <Icon icon="bars" />,
+          action: () => setIsDuplicateModalOpen(true),
+        },
+        {
+          id: 'rename',
+          name: 'Rename',
+          icon: <Icon icon="pen-to-square" />,
+          action: () =>
+            showPrompt({
               title: `Rename ${getWorkspaceLabel(activeWorkspace).singular}`,
               defaultValue: activeWorkspace.name,
               submitName: 'Rename',
@@ -207,64 +226,70 @@ export const WorkspaceDropdown: FC<{}> = () => {
                     action: `/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/update`,
                     method: 'post',
                     encType: 'application/json',
-                  }
+                  },
                 ),
             }),
-          },
-          {
-            id: 'export',
-            name: 'Export',
-            icon: <Icon icon='file-export' />,
-            action: () => {
-              if (activeWorkspace.scope === 'mock-server') {
-                return exportMockServerToFile(activeWorkspace);
-              }
-
-              if (activeWorkspace.scope === 'environment') {
-                return exportGlobalEnvironmentToFile(activeWorkspace);
-              }
-
-              return setIsExportModalOpen(true);
-            },
-          },
-          {
-            id: 'settings',
-            name: 'Settings',
-            icon: <Icon icon='wrench' />,
-            action: () => setIsSettingsModalOpen(true),
-          },
-          {
-            id: 'delete',
-            name: 'Delete',
-            icon: <Icon icon='trash' />,
-            action: () => setIsDeleteRemoteWorkspaceModalOpen(true),
-
-          },
-          ...userSession.id && access.enabled && activeWorkspace.scope === 'design' ? [{
-            id: 'insomnia-ai/generate-test-suite',
-            name: 'Auto-generate Tests For Collection',
-            action: generateTests,
-            icon: <span className='flex items-center py-0 px-[--padding-xs]'>
-              <InsomniaAI />
-            </span>,
-          }] : [],
-        ],
-      },
-      ...(actionPlugins.length > 0 ? [
-        {
-          name: 'Plugins',
-          id: 'plugins',
-          icon: 'plug' as IconName,
-          items: actionPlugins.map(plugin => ({
-            id: plugin.label,
-            name: plugin.label,
-            icon: <Icon icon={plugin.icon as IconName || 'plug'} />,
-            action: () =>
-              handlePluginClick(plugin, activeWorkspace),
-          })),
         },
-      ] : []),
-    ];
+        {
+          id: 'export',
+          name: 'Export',
+          icon: <Icon icon="file-export" />,
+          action: () => {
+            if (activeWorkspace.scope === 'mock-server') {
+              return exportMockServerToFile(activeWorkspace);
+            }
+
+            if (activeWorkspace.scope === 'environment') {
+              return exportGlobalEnvironmentToFile(activeWorkspace);
+            }
+
+            return setIsExportModalOpen(true);
+          },
+        },
+        {
+          id: 'settings',
+          name: 'Settings',
+          icon: <Icon icon="wrench" />,
+          action: () => setIsSettingsModalOpen(true),
+        },
+        {
+          id: 'delete',
+          name: 'Delete',
+          icon: <Icon icon="trash" />,
+          action: () => setIsDeleteRemoteWorkspaceModalOpen(true),
+        },
+        ...(userSession.id && access.enabled && activeWorkspace.scope === 'design'
+          ? [
+              {
+                id: 'insomnia-ai/generate-test-suite',
+                name: 'Auto-generate Tests For Collection',
+                action: generateTests,
+                icon: (
+                  <span className="flex items-center px-[--padding-xs] py-0">
+                    <InsomniaAI />
+                  </span>
+                ),
+              },
+            ]
+          : []),
+      ],
+    },
+    ...(actionPlugins.length > 0
+      ? [
+          {
+            name: 'Plugins',
+            id: 'plugins',
+            icon: 'plug' as IconName,
+            items: actionPlugins.map(plugin => ({
+              id: plugin.label,
+              name: plugin.label,
+              icon: <Icon icon={(plugin.icon as IconName) || 'plug'} />,
+              action: () => handlePluginClick(plugin, activeWorkspace),
+            })),
+          },
+        ]
+      : []),
+  ];
   const actionlist = isScratchpadWorkspace ? scratchpadActionList : workspaceActionsList;
   return (
     <>
@@ -272,22 +297,29 @@ export const WorkspaceDropdown: FC<{}> = () => {
         <Button
           aria-label="Workspace actions"
           data-testid="workspace-context-dropdown"
-          className="px-3 py-1 h-7 flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm truncate"
+          className="flex h-7 flex-1 items-center justify-center gap-2 truncate rounded-sm px-3 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
-          <span className="truncate" title={activeWorkspace.name}>{activeWorkspace.name}</span>
+          <span className="truncate" title={activeWorkspace.name}>
+            {activeWorkspace.name}
+          </span>
           <Icon icon="caret-down" />
         </Button>
-        <Popover className="min-w-max overflow-y-hidden flex flex-col">
+        <Popover className="flex min-w-max flex-col overflow-y-hidden">
           <Menu
             aria-label="Create in project actions"
             selectionMode="single"
-            onAction={key => actionlist.find(i => i.items.find(a => a.id === key))?.items.find(a => a.id === key)?.action()}
+            onAction={key =>
+              actionlist
+                .find(i => i.items.find(a => a.id === key))
+                ?.items.find(a => a.id === key)
+                ?.action()
+            }
             items={actionlist}
-            className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+            className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
           >
             {section => (
-              <Section className='flex-1 flex flex-col'>
-                <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+              <Section className="flex flex-1 flex-col">
+                <Header className="flex items-center gap-2 py-1 pl-2 text-xs uppercase text-[--hl]">
                   <Icon icon={section.icon} /> <span>{section.name}</span>
                 </Header>
                 <Collection items={section.items}>
@@ -295,12 +327,12 @@ export const WorkspaceDropdown: FC<{}> = () => {
                     <MenuItem
                       key={item.id}
                       id={item.id}
-                      className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                       aria-label={item.name}
                     >
                       {item.icon}
                       <span>{item.name}</span>
-                      {item.hint && (<DropdownHint keyBindings={item.hint} />)}
+                      {item.hint && <DropdownHint keyBindings={item.hint} />}
                     </MenuItem>
                   )}
                 </Collection>
@@ -310,10 +342,7 @@ export const WorkspaceDropdown: FC<{}> = () => {
         </Popover>
       </MenuTrigger>
       {isDuplicateModalOpen && (
-        <WorkspaceDuplicateModal
-          onHide={() => setIsDuplicateModalOpen(false)}
-          workspace={activeWorkspace}
-        />
+        <WorkspaceDuplicateModal onHide={() => setIsDuplicateModalOpen(false)} workspace={activeWorkspace} />
       )}
       {isImportModalOpen && (
         <ImportModal
@@ -327,10 +356,7 @@ export const WorkspaceDropdown: FC<{}> = () => {
         />
       )}
       {isExportModalOpen && (
-        <ExportRequestsModal
-          workspaceIdToExport={activeWorkspace._id}
-          onClose={() => setIsExportModalOpen(false)}
-        />
+        <ExportRequestsModal workspaceIdToExport={activeWorkspace._id} onClose={() => setIsExportModalOpen(false)} />
       )}
       {isSettingsModalOpen && (
         <WorkspaceSettingsModal
@@ -348,23 +374,21 @@ export const WorkspaceDropdown: FC<{}> = () => {
             setIsDeleteRemoteWorkspaceModalOpen(false);
           }}
           isDismissable
-          className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+          className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
         >
           <Modal
             onOpenChange={() => {
               setIsDeleteRemoteWorkspaceModalOpen(false);
             }}
-            className="max-w-2xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+            className="max-h-full w-full max-w-2xl rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
           >
-            <Dialog
-              className="outline-none"
-            >
+            <Dialog className="outline-none">
               {({ close }) => (
-                <div className='flex flex-col gap-4'>
-                  <div className='flex gap-2 items-center justify-between'>
-                    <Heading className='text-2xl'>Delete {getWorkspaceLabel(activeWorkspace).singular}</Heading>
+                <div className="flex flex-col gap-4">
+                  <div className="flex items-center justify-between gap-2">
+                    <Heading className="text-2xl">Delete {getWorkspaceLabel(activeWorkspace).singular}</Heading>
                     <Button
-                      className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                      className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       onPress={close}
                     >
                       <Icon icon="x" />
@@ -373,22 +397,21 @@ export const WorkspaceDropdown: FC<{}> = () => {
                   <deleteWorkspaceFetcher.Form
                     action={`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/delete`}
                     method="POST"
-                    className='flex flex-col gap-4'
+                    className="flex flex-col gap-4"
                   >
                     <input type="hidden" name="workspaceId" value={activeWorkspace._id} />
                     <p>
-                      This will permanently delete the {<strong style={{ whiteSpace: 'pre-wrap' }}>{activeWorkspace?.name}</strong>}{' '}
+                      This will permanently delete the{' '}
+                      {<strong style={{ whiteSpace: 'pre-wrap' }}>{activeWorkspace?.name}</strong>}{' '}
                       {getWorkspaceLabel(activeWorkspace).singular} {isRemoteProject(activeProject) ? 'remotely' : ''}.
                     </p>
                     {deleteWorkspaceFetcher.data && deleteWorkspaceFetcher.data.error && (
-                      <p className="notice error margin-bottom-sm no-margin-top">
-                        {deleteWorkspaceFetcher.data.error}
-                      </p>
+                      <p className="notice error margin-bottom-sm no-margin-top">{deleteWorkspaceFetcher.data.error}</p>
                     )}
                     <div className="flex justify-end">
                       <Button
                         type="submit"
-                        className="hover:no-underline bg-[--color-danger] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-danger] transition-colors rounded-sm"
+                        className="rounded-sm border border-solid border-[--hl-md] bg-[--color-danger] px-3 py-2 text-[--color-font-danger] transition-colors hover:bg-opacity-90 hover:no-underline"
                       >
                         Delete
                       </Button>
diff --git a/packages/insomnia/src/ui/components/dropdowns/workspace-sync-dropdown.tsx b/packages/insomnia/src/ui/components/dropdowns/workspace-sync-dropdown.tsx
index b9b08abc5c..3c152b4cf1 100644
--- a/packages/insomnia/src/ui/components/dropdowns/workspace-sync-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/dropdowns/workspace-sync-dropdown.tsx
@@ -11,13 +11,8 @@ import { GitSyncDropdown } from './git-sync-dropdown';
 import { SyncDropdown } from './sync-dropdown';
 
 export const WorkspaceSyncDropdown: FC = () => {
-  const {
-    activeProject,
-    activeWorkspace,
-    gitRepository,
-    activeWorkspaceMeta,
-  } = useRouteLoaderData(
-    ':workspaceId'
+  const { activeProject, activeWorkspace, gitRepository, activeWorkspaceMeta } = useRouteLoaderData(
+    ':workspaceId',
   ) as WorkspaceLoaderData;
 
   const { userSession } = useRootLoaderData();
@@ -28,27 +23,28 @@ export const WorkspaceSyncDropdown: FC = () => {
     return null;
   }
 
-  const shouldShowCloudSyncDropdown = isRemoteProject(activeProject)
-    && !activeWorkspaceMeta?.gitRepositoryId;
+  const shouldShowCloudSyncDropdown = isRemoteProject(activeProject) && !activeWorkspaceMeta?.gitRepositoryId;
 
   if (shouldShowCloudSyncDropdown) {
-    return (
-      <SyncDropdown
-        key={activeWorkspace?._id}
-        workspace={activeWorkspace}
-        project={activeProject}
-      />
-    );
+    return <SyncDropdown key={activeWorkspace?._id} workspace={activeWorkspace} project={activeProject} />;
   }
 
-  const shouldShowGitSyncDropdown = features.gitSync.enabled && (activeWorkspaceMeta?.gitRepositoryId || !isRemoteProject(activeProject));
+  const shouldShowGitSyncDropdown =
+    features.gitSync.enabled && (activeWorkspaceMeta?.gitRepositoryId || !isRemoteProject(activeProject));
   if (shouldShowGitSyncDropdown) {
     if (isGitProject(activeProject)) {
       return <GitProjectSyncDropdown key={gitRepository?._id} gitRepository={gitRepository} />;
     }
 
     if (gitRepository) {
-      return <GitSyncDropdown key={gitRepository?._id} isInsomniaSyncEnabled={isRemoteProject(activeProject)} gitRepository={gitRepository} showDeprecatedWarning={!isGitProject(activeProject)} />;
+      return (
+        <GitSyncDropdown
+          key={gitRepository?._id}
+          isInsomniaSyncEnabled={isRemoteProject(activeProject)}
+          gitRepository={gitRepository}
+          showDeprecatedWarning={!isGitProject(activeProject)}
+        />
+      );
     }
   }
 
diff --git a/packages/insomnia/src/ui/components/editable-input.tsx b/packages/insomnia/src/ui/components/editable-input.tsx
index 90ce4b5753..470c3aa316 100644
--- a/packages/insomnia/src/ui/components/editable-input.tsx
+++ b/packages/insomnia/src/ui/components/editable-input.tsx
@@ -13,29 +13,25 @@ export const EditableInput = ({
 }: {
   value: string;
   ariaLabel?: string;
-    editable?: boolean;
-    onEditableChange?: (editable: boolean) => void;
+  editable?: boolean;
+  onEditableChange?: (editable: boolean) => void;
   name?: string;
-    className?: string;
-    onSubmit: (value: string) => void;
+  className?: string;
+  onSubmit: (value: string) => void;
 }) => {
   const [isEditable, setIsEditable] = useState(editable);
   const editableRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     setIsEditable(editable);
-  }
-    , [editable]);
+  }, [editable]);
 
   useEffect(() => {
     if (!isEditable) {
       return;
     }
 
-    const keysToIgnore = [
-      'Enter',
-      'Escape',
-    ];
+    const keysToIgnore = ['Enter', 'Escape'];
 
     function lockKeyDownToInput(e: KeyboardEvent) {
       if (keysToIgnore.includes(e.key)) {
@@ -65,12 +61,7 @@ export const EditableInput = ({
     <>
       <div
         ref={editableRef}
-        className={
-          `items-center truncate justify-center data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all
-            ${isEditable ? 'hidden' : ''}
-            ${className || 'px-2'}
-          `
-        }
+        className={`items-center justify-center truncate rounded-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] data-[pressed]:bg-[--hl-sm] ${isEditable ? 'hidden' : ''} ${className || 'px-2'} `}
         onDoubleClick={onDoubleClick}
         data-editable
         aria-label={ariaLabel}
diff --git a/packages/insomnia/src/ui/components/editors/__tests__/environment-editor.test.ts b/packages/insomnia/src/ui/components/editors/__tests__/environment-editor.test.ts
index 676a0d38f8..87eabec399 100644
--- a/packages/insomnia/src/ui/components/editors/__tests__/environment-editor.test.ts
+++ b/packages/insomnia/src/ui/components/editors/__tests__/environment-editor.test.ts
@@ -4,33 +4,19 @@ import { NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME } from '../../../../templating';
 import { checkNestedKeys, ensureKeyIsValid } from '../environment-utils';
 
 describe('ensureKeyIsValid()', () => {
-  it.each([
-    '$',
-    '$a',
-    '$ab',
-  ])('"%s" should be invalid when key begins with $', key => {
+  it.each(['$', '$a', '$ab'])('"%s" should be invalid when key begins with $', key => {
     expect(ensureKeyIsValid(key, false)).toBe(`"${key}" cannot begin with '$' or contain a '.'`);
   });
 
-  it.each([
-    '.',
-    'a.',
-    '.a',
-    'a.b',
-  ])('"%s" should be invalid when key contains .', key => {
+  it.each(['.', 'a.', '.a', 'a.b'])('"%s" should be invalid when key contains .', key => {
     expect(ensureKeyIsValid(key, false)).toBe(`"${key}" cannot begin with '$' or contain a '.'`);
   });
 
-  it.each([
-    '$a.b',
-    '$.',
-  ])('"%s" should be invalid when key starts with $ and contains .', key => {
+  it.each(['$a.b', '$.'])('"%s" should be invalid when key starts with $ and contains .', key => {
     expect(ensureKeyIsValid(key, false)).toBe(`"${key}" cannot begin with '$' or contain a '.'`);
   });
 
-  it.each([
-    '_',
-  ])('"%s" should be invalid when key is _', key => {
+  it.each(['_'])('"%s" should be invalid when key is _', key => {
     expect(ensureKeyIsValid(key, true)).toBe(`"${key}" is a reserved key`);
   });
 
@@ -70,17 +56,17 @@ describe('checkNestedKeys()', () => {
       'ar-ray': [
         '/first',
         {
-          'second': 'second',
+          second: 'second',
         },
         {
-          'third': 'third',
+          third: 'third',
         },
       ],
     };
 
     const err = checkNestedKeys(obj);
 
-    expect(err).toBe('"$nes.ted" cannot begin with \'$\' or contain a \'.\'');
+    expect(err).toBe("\"$nes.ted\" cannot begin with '$' or contain a '.'");
   });
 
   it('should check nested property and error', () => {
@@ -92,17 +78,17 @@ describe('checkNestedKeys()', () => {
       'ar-ray': [
         '/first',
         {
-          'second': 'second',
+          second: 'second',
         },
         {
-          'third': 'third',
+          third: 'third',
         },
       ],
     };
 
     const err = checkNestedKeys(obj);
 
-    expect(err).toBe('"$path-wi.th-hyphens" cannot begin with \'$\' or contain a \'.\'');
+    expect(err).toBe("\"$path-wi.th-hyphens\" cannot begin with '$' or contain a '.'");
   });
 
   it('should check for complex objects inside array', () => {
@@ -114,7 +100,7 @@ describe('checkNestedKeys()', () => {
       'ar-ray': [
         '/first',
         {
-          'second': 'second',
+          second: 'second',
         },
         {
           'thi.rd': 'third',
@@ -124,7 +110,7 @@ describe('checkNestedKeys()', () => {
 
     const err = checkNestedKeys(obj);
 
-    expect(err).toBe('"thi.rd" cannot begin with \'$\' or contain a \'.\'');
+    expect(err).toBe("\"thi.rd\" cannot begin with '$' or contain a '.'");
   });
 
   it('should check nested properties and pass', () => {
@@ -136,10 +122,10 @@ describe('checkNestedKeys()', () => {
       'ar-ray': [
         '/first',
         {
-          'second': 'second',
+          second: 'second',
         },
         {
-          'third': 'third',
+          third: 'third',
         },
       ],
     };
diff --git a/packages/insomnia/src/ui/components/editors/auth/api-key-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/api-key-auth.tsx
index f8f9ad0bc0..b236384a0e 100644
--- a/packages/insomnia/src/ui/components/editors/auth/api-key-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/api-key-auth.tsx
@@ -15,8 +15,8 @@ export const options = [
 export const ApiKeyAuth: FC<{ disabled?: boolean }> = ({ disabled = false }) => (
   <AuthTableBody>
     <AuthToggleRow label="Enabled" property="disabled" invert disabled={disabled} />
-    <AuthInputRow label='Key' property='key' disabled={disabled} />
-    <AuthInputRow label='Value' property='value' mask disabled={disabled} />
-    <AuthSelectRow label='Add to' property='addTo' options={options} disabled={disabled} />
+    <AuthInputRow label="Key" property="key" disabled={disabled} />
+    <AuthInputRow label="Value" property="value" mask disabled={disabled} />
+    <AuthSelectRow label="Add to" property="addTo" options={options} disabled={disabled} />
   </AuthTableBody>
 );
diff --git a/packages/insomnia/src/ui/components/editors/auth/asap-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/asap-auth.tsx
index 8a24c12445..99198c3378 100644
--- a/packages/insomnia/src/ui/components/editors/auth/asap-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/asap-auth.tsx
@@ -8,15 +8,15 @@ import { AuthToggleRow } from './components/auth-toggle-row';
 export const AsapAuth: FC = () => (
   <AuthTableBody>
     <AuthToggleRow label="Enabled" property="disabled" invert />
-    <AuthInputRow label='Issuer (iss)' property='issuer' />
-    <AuthInputRow label='Subject (sub)' property='subject' />
-    <AuthInputRow label='Audience (aud)' property='audience' />
-    <AuthInputRow label='Additional Claims' property='additionalClaims' />
-    <AuthInputRow label='Key ID (kid)' property='keyId' />
+    <AuthInputRow label="Issuer (iss)" property="issuer" />
+    <AuthInputRow label="Subject (sub)" property="subject" />
+    <AuthInputRow label="Audience (aud)" property="audience" />
+    <AuthInputRow label="Additional Claims" property="additionalClaims" />
+    <AuthInputRow label="Key ID (kid)" property="keyId" />
     <AuthPrivateKeyRow
-      label='Private Key'
-      property='privateKey'
-      help='Can also use single line data-uri format (e.g. obtained from asap-cli export-as-data-uri command), useful for saving as environment data'
+      label="Private Key"
+      property="privateKey"
+      help="Can also use single line data-uri format (e.g. obtained from asap-cli export-as-data-uri command), useful for saving as environment data"
     />
   </AuthTableBody>
 );
diff --git a/packages/insomnia/src/ui/components/editors/auth/auth-wrapper.tsx b/packages/insomnia/src/ui/components/editors/auth/auth-wrapper.tsx
index 513cbf934f..1b293e4be6 100644
--- a/packages/insomnia/src/ui/components/editors/auth/auth-wrapper.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/auth-wrapper.tsx
@@ -29,7 +29,11 @@ import { NTLMAuth } from './ntlm-auth';
 import { OAuth1Auth } from './o-auth-1-auth';
 import { OAuth2Auth } from './o-auth-2-auth';
 
-export const AuthWrapper: FC<{ authentication?: RequestAuthentication | {}; disabled?: boolean; authTypes?: AuthTypes[] }> = ({ authentication, disabled = false, authTypes }) => {
+export const AuthWrapper: FC<{
+  authentication?: RequestAuthentication | {};
+  disabled?: boolean;
+  authTypes?: AuthTypes[];
+}> = ({ authentication, disabled = false, authTypes }) => {
   const type = getAuthObjectOrNull(authentication)?.type || '';
   let authBody: ReactNode = null;
 
@@ -57,8 +61,8 @@ export const AuthWrapper: FC<{ authentication?: RequestAuthentication | {}; disa
     authBody = <AsapAuth />;
   } else {
     authBody = (
-      <div className="flex w-full h-full select-none items-center justify-center">
-        <p className="text-sm text-center p-4 text-[--hl]">
+      <div className="flex h-full w-full select-none items-center justify-center">
+        <p className="p-4 text-center text-sm text-[--hl]">
           <i
             className="fa fa-unlock-alt"
             style={{
@@ -74,12 +78,12 @@ export const AuthWrapper: FC<{ authentication?: RequestAuthentication | {}; disa
     );
   }
 
-  return <>
-    <Toolbar className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
-      <AuthDropdown authentication={authentication} authTypes={authTypes} />
-    </Toolbar>
-    <div className='flex-1 overflow-y-auto '>
-    {authBody}
-    </div>
-  </>;
+  return (
+    <>
+      <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
+        <AuthDropdown authentication={authentication} authTypes={authTypes} />
+      </Toolbar>
+      <div className="flex-1 overflow-y-auto">{authBody}</div>
+    </>
+  );
 };
diff --git a/packages/insomnia/src/ui/components/editors/auth/aws-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/aws-auth.tsx
index 07d4f5db17..e51445e409 100644
--- a/packages/insomnia/src/ui/components/editors/auth/aws-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/aws-auth.tsx
@@ -7,25 +7,14 @@ import { AuthToggleRow } from './components/auth-toggle-row';
 export const AWSAuth: FC = () => (
   <AuthTableBody>
     <AuthToggleRow label="Enabled" property="disabled" invert />
-    <AuthInputRow
-      label="Access Key ID"
-      property="accessKeyId"
-    />
-    <AuthInputRow
-      label="Secret Access Key"
-      property="secretAccessKey"
-      mask={true}
-    />
+    <AuthInputRow label="Access Key ID" property="accessKeyId" />
+    <AuthInputRow label="Secret Access Key" property="secretAccessKey" mask={true} />
     <AuthInputRow
       label="Region"
       property="region"
       help="Will be calculated from hostname or host or use 'us-east-1' if not given"
     />
-    <AuthInputRow
-      label="Service"
-      property="service"
-      help="Will be calculated from hostname or host if not given"
-    />
+    <AuthInputRow label="Service" property="service" help="Will be calculated from hostname or host if not given" />
     <AuthInputRow
       label="Session Token"
       property="sessionToken"
diff --git a/packages/insomnia/src/ui/components/editors/auth/basic-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/basic-auth.tsx
index 704c865608..03dec18840 100644
--- a/packages/insomnia/src/ui/components/editors/auth/basic-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/basic-auth.tsx
@@ -12,7 +12,7 @@ export const BasicAuth: FC<{ disabled?: boolean }> = ({ disabled = false }) => (
     <AuthToggleRow
       label="Use ISO 8859-1"
       help="Check this to use ISO-8859-1 encoding instead of default UTF-8"
-      property='useISO88591'
+      property="useISO88591"
       disabled={disabled}
     />
   </AuthTableBody>
diff --git a/packages/insomnia/src/ui/components/editors/auth/bearer-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/bearer-auth.tsx
index a9aa03ee6c..0e2c3015fe 100644
--- a/packages/insomnia/src/ui/components/editors/auth/bearer-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/bearer-auth.tsx
@@ -7,7 +7,7 @@ import { AuthToggleRow } from './components/auth-toggle-row';
 export const BearerAuth: FC<{ disabled?: boolean }> = ({ disabled = false }) => (
   <AuthTableBody>
     <AuthToggleRow label="Enabled" property="disabled" invert disabled={disabled} />
-    <AuthInputRow label='Token' property='token' mask disabled={disabled} />
-    <AuthInputRow label='Prefix' property='prefix' disabled={disabled} />
+    <AuthInputRow label="Token" property="token" mask disabled={disabled} />
+    <AuthInputRow label="Prefix" property="prefix" disabled={disabled} />
   </AuthTableBody>
 );
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-accordion.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-accordion.tsx
index 8e27124b40..e4dde4a2a2 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-accordion.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-accordion.tsx
@@ -16,12 +16,13 @@ export const AuthAccordion: FC<PropsWithChildren<Props>> = ({ accordionKey, labe
   const expanded = !reqData || Boolean(reqData.activeRequestMeta?.expandedAccordionKeys[accordionKey]);
   const patchRequestMeta = useRequestMetaPatcher();
   const toggle = () => {
-    reqData && patchRequestMeta(reqData.activeRequest._id, {
-      expandedAccordionKeys: {
-        ...reqData.activeRequestMeta?.expandedAccordionKeys,
-        [accordionKey]: !expanded,
-      },
-    });
+    reqData &&
+      patchRequestMeta(reqData.activeRequest._id, {
+        expandedAccordionKeys: {
+          ...reqData.activeRequestMeta?.expandedAccordionKeys,
+          [accordionKey]: !expanded,
+        },
+      });
   };
 
   return (
@@ -33,10 +34,7 @@ export const AuthAccordion: FC<PropsWithChildren<Props>> = ({ accordionKey, labe
               style={{
                 minWidth: '0.8rem',
               }}
-              className={classnames(
-                'fa fa--skinny',
-                `fa-caret-${expanded ? 'down' : 'right'}`,
-              )}
+              className={classnames('fa fa--skinny', `fa-caret-${expanded ? 'down' : 'right'}`)}
             />
             {label}
           </button>
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-input-row.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-input-row.tsx
index 99278b5462..e168a5e149 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-input-row.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-input-row.tsx
@@ -18,10 +18,15 @@ interface Props extends Pick<ComponentProps<typeof OneLineEditor>, 'getAutocompl
   disabled?: boolean;
 }
 
-export const AuthInputRow: FC<Props> = ({ label, getAutocompleteConstants, property, mask, help, disabled = false }) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+export const AuthInputRow: FC<Props> = ({
+  label,
+  getAutocompleteConstants,
+  property,
+  mask,
+  help,
+  disabled = false,
+}) => {
+  const { settings } = useRootLoaderData();
   const { showPasswords } = settings;
   const reqData = useRouteLoaderData('request/:requestId') as RequestLoaderData;
   const groupData = useRouteLoaderData('request-group/:requestGroupId') as RequestGroupLoaderData;
@@ -33,8 +38,10 @@ export const AuthInputRow: FC<Props> = ({ label, getAutocompleteConstants, prope
   const canBeMasked = !showPasswords && mask;
   const isMasked = canBeMasked && masked;
 
-  const onChange = useCallback((value: string) => patcher(_id, { authentication: { ...authentication, [property]: value } }),
-    [patcher, _id, authentication, property]);
+  const onChange = useCallback(
+    (value: string) => patcher(_id, { authentication: { ...authentication, [property]: value } }),
+    [patcher, _id, authentication, property],
+  );
 
   const id = toKebabCase(label);
 
@@ -50,12 +57,12 @@ export const AuthInputRow: FC<Props> = ({ label, getAutocompleteConstants, prope
         getAutocompleteConstants={getAutocompleteConstants}
       />
       {canBeMasked ? (
-        <button
-          className="btn btn--super-super-compact pointer"
-          onClick={toggleMask}
-          disabled={disabled}
-        >
-          {isMasked ? <i className="fa fa-eye" data-testid="reveal-password-icon" /> : <i className="fa fa-eye-slash" data-testid="mask-password-icon" />}
+        <button className="btn btn--super-super-compact pointer" onClick={toggleMask} disabled={disabled}>
+          {isMasked ? (
+            <i className="fa fa-eye" data-testid="reveal-password-icon" />
+          ) : (
+            <i className="fa fa-eye-slash" data-testid="mask-password-icon" />
+          )}
         </button>
       ) : null}
     </AuthRow>
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-private-key-row.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-private-key-row.tsx
index ca8181d63c..053f1ca9e8 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-private-key-row.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-private-key-row.tsx
@@ -43,8 +43,10 @@ export const AuthPrivateKeyRow: FC<Props> = ({ label, property, help }) => {
   const { handleGetRenderContext, handleRender } = useNunjucks();
 
   const privateKey = authentication[property];
-  const onChange = useCallback((value: string) => patcher(_id, { authentication: { ...authentication, [property]: value } }),
-    [_id, authentication, patcher, property]);
+  const onChange = useCallback(
+    (value: string) => patcher(_id, { authentication: { ...authentication, [property]: value } }),
+    [_id, authentication, patcher, property],
+  );
 
   const editPrivateKey = () => {
     showModal(CodePromptModal, {
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-row.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-row.tsx
index d19417b63a..0358606bb8 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-row.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-row.tsx
@@ -28,7 +28,7 @@ export const AuthRow: FC<PropsWithChildren<Props>> = ({ labelFor, label, help, d
       </td>
       <td className="wide">
         <div
-          className={classnames('form-control form-control--underlined no-margin flex wide', {
+          className={classnames('form-control form-control--underlined no-margin wide flex', {
             'form-control--inactive': isDisabled,
           })}
         >
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-select-row.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-select-row.tsx
index d17a8c6285..590390ca5a 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-select-row.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-select-row.tsx
@@ -29,16 +29,19 @@ export const AuthSelectRow: FC<Props> = ({ label, property, help, options, disab
 
   const { authentication, _id } = reqData?.activeRequest || groupData.activeRequestGroup;
   const authOrNull = getAuthObjectOrNull(authentication);
-  const selectedValue = authOrNull ? authOrNull[property as keyof RequestAuthentication] + "" : options[0].value;
+  const selectedValue = authOrNull ? authOrNull[property as keyof RequestAuthentication] + '' : options[0].value;
 
-  const onChange = useCallback((event: ChangeEvent<HTMLSelectElement>) => {
-    let updatedValue = event.currentTarget.value;
-    // Convert boolean strings to boolean values for further processing.
-    if (updatedValue === 'true' || updatedValue === 'false') {
-      updatedValue = JSON.parse(updatedValue);
-    }
-    patcher(_id, { authentication: { ...authentication, [property]: updatedValue } });
-  }, [patcher, _id, authentication, property]);
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLSelectElement>) => {
+      let updatedValue = event.currentTarget.value;
+      // Convert boolean strings to boolean values for further processing.
+      if (updatedValue === 'true' || updatedValue === 'false') {
+        updatedValue = JSON.parse(updatedValue);
+      }
+      patcher(_id, { authentication: { ...authentication, [property]: updatedValue } });
+    },
+    [patcher, _id, authentication, property],
+  );
 
   return (
     <AuthRow labelFor={toKebabCase(label)} label={label} help={help} disabled={disabled}>
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-table-body.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-table-body.tsx
index b5962df7ee..c01ab1418c 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-table-body.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-table-body.tsx
@@ -1,10 +1,9 @@
 import React, { type FC, type ReactNode } from 'react';
 
-export const AuthTableBody: FC<{children: ReactNode}> = ({ children }) => (
+export const AuthTableBody: FC<{ children: ReactNode }> = ({ children }) => (
   <div className="pad">
     <table>
-      <tbody>
-        {children}
-      </tbody>
+      <tbody>{children}</tbody>
     </table>
-  </div>);
+  </div>
+);
diff --git a/packages/insomnia/src/ui/components/editors/auth/components/auth-toggle-row.tsx b/packages/insomnia/src/ui/components/editors/auth/components/auth-toggle-row.tsx
index 95fdf8e9bf..39e18beb00 100644
--- a/packages/insomnia/src/ui/components/editors/auth/components/auth-toggle-row.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/components/auth-toggle-row.tsx
@@ -17,7 +17,12 @@ interface Props {
   disabled?: boolean;
 }
 
-const ToggleIcon: FC<{isOn: boolean}> = ({ isOn }) => isOn ? <i data-testid="toggle-is-on" className="fa fa-check-square-o" /> : <i data-testid="toggle-is-off" className="fa fa-square-o" />;
+const ToggleIcon: FC<{ isOn: boolean }> = ({ isOn }) =>
+  isOn ? (
+    <i data-testid="toggle-is-on" className="fa fa-check-square-o" />
+  ) : (
+    <i data-testid="toggle-is-off" className="fa fa-square-o" />
+  );
 
 export const AuthToggleRow: FC<Props> = ({
   label,
@@ -38,8 +43,10 @@ export const AuthToggleRow: FC<Props> = ({
   // @ts-expect-error -- garbage abstraction
   const databaseValue = Boolean(authentication[property]);
 
-  const onChange = useCallback((value?: boolean) => patcher(_id, { authentication: { ...authentication, [property]: value } }),
-    [patcher, _id, authentication, property]);
+  const onChange = useCallback(
+    (value?: boolean) => patcher(_id, { authentication: { ...authentication, [property]: value } }),
+    [patcher, _id, authentication, property],
+  );
   const isActuallyOn = invert ? !databaseValue : databaseValue;
 
   return (
diff --git a/packages/insomnia/src/ui/components/editors/auth/digest-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/digest-auth.tsx
index 3e713a1b2e..a4135fbb51 100644
--- a/packages/insomnia/src/ui/components/editors/auth/digest-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/digest-auth.tsx
@@ -7,7 +7,7 @@ import { AuthToggleRow } from './components/auth-toggle-row';
 export const DigestAuth: FC<{ disabled?: boolean }> = ({ disabled = false }) => (
   <AuthTableBody>
     <AuthToggleRow label="Enabled" property="disabled" invert disabled={disabled} />
-    <AuthInputRow label='Username' property='username' disabled={disabled} />
-    <AuthInputRow label='Password' property='password' mask disabled={disabled} />
+    <AuthInputRow label="Username" property="username" disabled={disabled} />
+    <AuthInputRow label="Password" property="password" mask disabled={disabled} />
   </AuthTableBody>
 );
diff --git a/packages/insomnia/src/ui/components/editors/auth/hawk-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/hawk-auth.tsx
index 894a853331..ac65b83f53 100644
--- a/packages/insomnia/src/ui/components/editors/auth/hawk-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/hawk-auth.tsx
@@ -1,9 +1,6 @@
 import React, { type FC } from 'react';
 
-import {
-  HAWK_ALGORITHM_SHA1,
-  HAWK_ALGORITHM_SHA256,
-} from '../../../../common/constants';
+import { HAWK_ALGORITHM_SHA1, HAWK_ALGORITHM_SHA256 } from '../../../../common/constants';
 import { AuthInputRow } from './components/auth-input-row';
 import { AuthSelectRow } from './components/auth-select-row';
 import { AuthTableBody } from './components/auth-table-body';
@@ -12,11 +9,11 @@ import { AuthToggleRow } from './components/auth-toggle-row';
 export const HawkAuth: FC = () => (
   <AuthTableBody>
     <AuthToggleRow label="Enabled" property="disabled" invert />
-    <AuthInputRow label='Auth Id' property='id' />
-    <AuthInputRow label='Auth Key' property='key' mask />
+    <AuthInputRow label="Auth Id" property="id" />
+    <AuthInputRow label="Auth Key" property="key" mask />
     <AuthSelectRow
-      label='Algorithm'
-      property='algorithm'
+      label="Algorithm"
+      property="algorithm"
       options={[
         {
           name: HAWK_ALGORITHM_SHA256,
@@ -28,7 +25,7 @@ export const HawkAuth: FC = () => (
         },
       ]}
     />
-    <AuthInputRow label='Ext' property='ext' />
-    <AuthToggleRow label='Validate Payload' property='validatePayload' />
+    <AuthInputRow label="Ext" property="ext" />
+    <AuthToggleRow label="Validate Payload" property="validatePayload" />
   </AuthTableBody>
 );
diff --git a/packages/insomnia/src/ui/components/editors/auth/netrc-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/netrc-auth.tsx
index cdfe91d921..d82df28bdf 100644
--- a/packages/insomnia/src/ui/components/editors/auth/netrc-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/netrc-auth.tsx
@@ -2,7 +2,7 @@ import React, { type FC } from 'react';
 
 export const NetrcAuth: FC = () => (
   <div className="vertically-center text-center">
-    <p className="pad super-faint text-sm text-center">
+    <p className="pad super-faint text-center text-sm">
       <br />
       Your netrc file will be used to authenticate this request
     </p>
diff --git a/packages/insomnia/src/ui/components/editors/auth/o-auth-1-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/o-auth-1-auth.tsx
index 6919970480..679414ca05 100644
--- a/packages/insomnia/src/ui/components/editors/auth/o-auth-1-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/o-auth-1-auth.tsx
@@ -18,22 +18,24 @@ import { AuthTableBody } from './components/auth-table-body';
 import { AuthToggleRow } from './components/auth-toggle-row';
 
 const blankForDefault = 'Leave blank for default';
-export const signatureMethodOptions: { name: OAuth1SignatureMethod; value: OAuth1SignatureMethod }[] = [{
-  name: 'HMAC-SHA1',
-  value: SIGNATURE_METHOD_HMAC_SHA1,
-},
-{
-  name: 'HMAC-SHA256',
-  value: SIGNATURE_METHOD_HMAC_SHA256,
-},
-{
-  name: 'RSA-SHA1',
-  value: SIGNATURE_METHOD_RSA_SHA1,
-},
-{
-  name: 'PLAINTEXT',
-  value: SIGNATURE_METHOD_PLAINTEXT,
-}];
+export const signatureMethodOptions: { name: OAuth1SignatureMethod; value: OAuth1SignatureMethod }[] = [
+  {
+    name: 'HMAC-SHA1',
+    value: SIGNATURE_METHOD_HMAC_SHA1,
+  },
+  {
+    name: 'HMAC-SHA256',
+    value: SIGNATURE_METHOD_HMAC_SHA256,
+  },
+  {
+    name: 'RSA-SHA1',
+    value: SIGNATURE_METHOD_RSA_SHA1,
+  },
+  {
+    name: 'PLAINTEXT',
+    value: SIGNATURE_METHOD_PLAINTEXT,
+  },
+];
 
 export const OAuth1Auth: FC = () => {
   const reqData = useRouteLoaderData('request/:requestId') as RequestLoaderData;
@@ -44,22 +46,22 @@ export const OAuth1Auth: FC = () => {
   return (
     <AuthTableBody>
       <AuthToggleRow label="Enabled" property="disabled" invert />
-      <AuthInputRow label='Consumer Key' property='consumerKey' />
-      <AuthInputRow label='Consumer Secret' property='consumerSecret' mask />
-      <AuthInputRow label='Token Key' property='tokenKey' />
-      <AuthInputRow label='Token Secret' property='tokenSecret' mask />
-      <AuthSelectRow label='Signature Method' property='signatureMethod' options={signatureMethodOptions} />
-      {signatureMethod === SIGNATURE_METHOD_RSA_SHA1 && <AuthPrivateKeyRow label='Private Key' property='privateKey' />}
-      <AuthInputRow label='Callback URL' property='callback' />
-      <AuthInputRow label='Version' property='version' />
-      <AuthInputRow label='Timestamp' property='timestamp' help={blankForDefault} />
-      <AuthInputRow label='Realm' property='realm' help={blankForDefault} />
-      <AuthInputRow label='Nonce' property='nonce' help={blankForDefault} />
-      <AuthInputRow label='Verifier' property='verifier' help={blankForDefault} />
+      <AuthInputRow label="Consumer Key" property="consumerKey" />
+      <AuthInputRow label="Consumer Secret" property="consumerSecret" mask />
+      <AuthInputRow label="Token Key" property="tokenKey" />
+      <AuthInputRow label="Token Secret" property="tokenSecret" mask />
+      <AuthSelectRow label="Signature Method" property="signatureMethod" options={signatureMethodOptions} />
+      {signatureMethod === SIGNATURE_METHOD_RSA_SHA1 && <AuthPrivateKeyRow label="Private Key" property="privateKey" />}
+      <AuthInputRow label="Callback URL" property="callback" />
+      <AuthInputRow label="Version" property="version" />
+      <AuthInputRow label="Timestamp" property="timestamp" help={blankForDefault} />
+      <AuthInputRow label="Realm" property="realm" help={blankForDefault} />
+      <AuthInputRow label="Nonce" property="nonce" help={blankForDefault} />
+      <AuthInputRow label="Verifier" property="verifier" help={blankForDefault} />
       <AuthToggleRow
-        label='Hash Body'
-        property='includeBodyHash'
-        help='If a application/x-www-form-urlencoded body is present, also generate a oauth_body_hash property'
+        label="Hash Body"
+        property="includeBodyHash"
+        help="If a application/x-www-form-urlencoded body is present, also generate a oauth_body_hash property"
       />
     </AuthTableBody>
   );
diff --git a/packages/insomnia/src/ui/components/editors/auth/o-auth-2-auth.tsx b/packages/insomnia/src/ui/components/editors/auth/o-auth-2-auth.tsx
index fdd155f8d0..cd69688faf 100644
--- a/packages/insomnia/src/ui/components/editors/auth/o-auth-2-auth.tsx
+++ b/packages/insomnia/src/ui/components/editors/auth/o-auth-2-auth.tsx
@@ -91,41 +91,88 @@ const credentialsInBodyOptions = [
 ];
 
 const getFields = (authentication: Extract<RequestAuthentication, { type: typeof AUTH_OAUTH_2 }>) => {
-  const clientId = <AuthInputRow label='Client ID' property='clientId' key='clientId' />;
-  const clientSecret = <AuthInputRow label='Client Secret' property='clientSecret' key='clientSecret' mask />;
-  const usePkce = <AuthToggleRow label='Use PKCE' property='usePkce' key='usePkce' onTitle='Disable PKCE' offTitle='Enable PKCE' />;
-  const pkceMethod = <AuthSelectRow
-    label='Code Challenge Method'
-    property='pkceMethod'
-    key='pkceMethod'
-    disabled={!authentication.usePkce}
-    options={pkceMethodOptions}
-  />;
-  const authorizationUrl = <AuthInputRow label='Authorization URL' property='authorizationUrl' key='authorizationUrl' getAutocompleteConstants={getAuthorizationUrls} />;
-  const accessTokenUrl = <AuthInputRow label='Access Token URL' property='accessTokenUrl' key='accessTokenUrl' getAutocompleteConstants={getAccessTokenUrls} />;
-  const redirectUri = <AuthInputRow label='Redirect URL' property='redirectUrl' key='redirectUrl' help='This can be whatever you want or need it to be. Insomnia will automatically detect a redirect in the client browser window and extract the code from the redirected URL.' />;
-  const state = <AuthInputRow label='State' property='state' key='state' />;
-  const scope = <AuthInputRow label='Scope' property='scope' key='scope' />;
-  const username = <AuthInputRow label='Username' property='username' key='username' />;
-  const password = <AuthInputRow label='Password' property='password' key='password' mask />;
-  const tokenPrefix = <AuthInputRow label='Header Prefix' property='tokenPrefix' key='tokenPrefix' help='Change Authorization header prefix from "Bearer" to something else. Use "NO_PREFIX" to send raw token without prefix.' />;
-  const responseType = <AuthSelectRow
-    label='Response Type'
-    property='responseType'
-    key='responseType'
-    options={responseTypeOptions}
-    help='Indicates the type of credentials returned in the response'
-  />;
-  const audience = <AuthInputRow label='Audience' property='audience' key='audience' help='Indicate what resource server to access' />;
-  const resource = <AuthInputRow label='Resource' property='resource' key='resource' help='Indicate what resource to access' />;
-  const origin = <AuthInputRow label='Origin' property='origin' key='origin' help='Specify Origin header when CORS is required for oauth endpoints' />;
-  const credentialsInBody = <AuthSelectRow
-    label='Credentials'
-    property='credentialsInBody'
-    key='credentialsInBody'
-    options={credentialsInBodyOptions}
-    help='Whether or not to send credentials as Basic Auth, or as plain text in the request body'
-  />;
+  const clientId = <AuthInputRow label="Client ID" property="clientId" key="clientId" />;
+  const clientSecret = <AuthInputRow label="Client Secret" property="clientSecret" key="clientSecret" mask />;
+  const usePkce = (
+    <AuthToggleRow label="Use PKCE" property="usePkce" key="usePkce" onTitle="Disable PKCE" offTitle="Enable PKCE" />
+  );
+  const pkceMethod = (
+    <AuthSelectRow
+      label="Code Challenge Method"
+      property="pkceMethod"
+      key="pkceMethod"
+      disabled={!authentication.usePkce}
+      options={pkceMethodOptions}
+    />
+  );
+  const authorizationUrl = (
+    <AuthInputRow
+      label="Authorization URL"
+      property="authorizationUrl"
+      key="authorizationUrl"
+      getAutocompleteConstants={getAuthorizationUrls}
+    />
+  );
+  const accessTokenUrl = (
+    <AuthInputRow
+      label="Access Token URL"
+      property="accessTokenUrl"
+      key="accessTokenUrl"
+      getAutocompleteConstants={getAccessTokenUrls}
+    />
+  );
+  const redirectUri = (
+    <AuthInputRow
+      label="Redirect URL"
+      property="redirectUrl"
+      key="redirectUrl"
+      help="This can be whatever you want or need it to be. Insomnia will automatically detect a redirect in the client browser window and extract the code from the redirected URL."
+    />
+  );
+  const state = <AuthInputRow label="State" property="state" key="state" />;
+  const scope = <AuthInputRow label="Scope" property="scope" key="scope" />;
+  const username = <AuthInputRow label="Username" property="username" key="username" />;
+  const password = <AuthInputRow label="Password" property="password" key="password" mask />;
+  const tokenPrefix = (
+    <AuthInputRow
+      label="Header Prefix"
+      property="tokenPrefix"
+      key="tokenPrefix"
+      help='Change Authorization header prefix from "Bearer" to something else. Use "NO_PREFIX" to send raw token without prefix.'
+    />
+  );
+  const responseType = (
+    <AuthSelectRow
+      label="Response Type"
+      property="responseType"
+      key="responseType"
+      options={responseTypeOptions}
+      help="Indicates the type of credentials returned in the response"
+    />
+  );
+  const audience = (
+    <AuthInputRow label="Audience" property="audience" key="audience" help="Indicate what resource server to access" />
+  );
+  const resource = (
+    <AuthInputRow label="Resource" property="resource" key="resource" help="Indicate what resource to access" />
+  );
+  const origin = (
+    <AuthInputRow
+      label="Origin"
+      property="origin"
+      key="origin"
+      help="Specify Origin header when CORS is required for oauth endpoints"
+    />
+  );
+  const credentialsInBody = (
+    <AuthSelectRow
+      label="Credentials"
+      property="credentialsInBody"
+      key="credentialsInBody"
+      options={credentialsInBodyOptions}
+      help="Whether or not to send credentials as Basic Auth, or as plain text in the request body"
+    />
+  );
 
   return {
     clientId,
@@ -175,68 +222,21 @@ const getFieldsForGrantType = (authentication: Extract<RequestAuthentication, {
   let advanced: ReactNode[] = [];
 
   if (grantType === GRANT_TYPE_AUTHORIZATION_CODE) {
-    basic = [
-      authorizationUrl,
-      accessTokenUrl,
-      clientId,
-      clientSecret,
-      usePkce,
-      pkceMethod,
-      redirectUri,
-    ];
+    basic = [authorizationUrl, accessTokenUrl, clientId, clientSecret, usePkce, pkceMethod, redirectUri];
 
-    advanced = [
-      scope,
-      state,
-      credentialsInBody,
-      tokenPrefix,
-      audience,
-      resource,
-      origin,
-    ];
+    advanced = [scope, state, credentialsInBody, tokenPrefix, audience, resource, origin];
   } else if (grantType === GRANT_TYPE_CLIENT_CREDENTIALS) {
-    basic = [
-      accessTokenUrl,
-      clientId,
-      clientSecret,
-    ];
+    basic = [accessTokenUrl, clientId, clientSecret];
 
-    advanced = [
-      scope,
-      credentialsInBody,
-      tokenPrefix,
-      audience,
-      resource,
-    ];
+    advanced = [scope, credentialsInBody, tokenPrefix, audience, resource];
   } else if (grantType === GRANT_TYPE_PASSWORD) {
-    basic = [
-      username,
-      password,
-      accessTokenUrl,
-      clientId,
-      clientSecret,
-    ];
+    basic = [username, password, accessTokenUrl, clientId, clientSecret];
 
-    advanced = [
-      scope,
-      credentialsInBody,
-      tokenPrefix,
-      audience,
-    ];
+    advanced = [scope, credentialsInBody, tokenPrefix, audience];
   } else if (grantType === GRANT_TYPE_IMPLICIT) {
-    basic = [
-      authorizationUrl,
-      clientId,
-      redirectUri,
-    ];
+    basic = [authorizationUrl, clientId, redirectUri];
 
-    advanced = [
-      responseType,
-      scope,
-      state,
-      tokenPrefix,
-      audience,
-    ];
+    advanced = [responseType, scope, state, tokenPrefix, audience];
   }
 
   return {
@@ -256,20 +256,19 @@ export const OAuth2Auth: FC = () => {
     <>
       <AuthTableBody>
         <AuthToggleRow label="Enabled" property="disabled" invert />
-        <AuthSelectRow
-          label='Grant Type'
-          property='grantType'
-          options={grantTypeOptions}
-        />
+        <AuthSelectRow label="Grant Type" property="grantType" options={grantTypeOptions} />
         {basic}
-        <AuthAccordion accordionKey='OAuth2AdvancedOptions' label='Advanced Options'>
+        <AuthAccordion accordionKey="OAuth2AdvancedOptions" label="Advanced Options">
           {advanced}
           {
             <tr>
               <td />
               <td className="wide">
                 <div className="pad-top text-right">
-                  <button className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]" onClick={initNewOAuthSession}>
+                  <button
+                    className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
+                    onClick={initNewOAuthSession}
+                  >
                     Clear OAuth 2 session
                   </button>
                 </div>
@@ -278,7 +277,7 @@ export const OAuth2Auth: FC = () => {
           }
         </AuthAccordion>
       </AuthTableBody>
-      <div className='pad'>
+      <div className="pad">
         <OAuth2Tokens />
       </div>
     </>
@@ -341,7 +340,11 @@ const renderAccessTokenExpiry = (token?: Pick<OAuth2Token, 'accessToken' | 'expi
   );
 };
 
-const OAuth2TokenInput: FC<{ token: OAuth2Token | null; label: string; property: keyof Pick<OAuth2Token, 'accessToken' | 'refreshToken' | 'identityToken'> }> = ({ token, label, property }) => {
+const OAuth2TokenInput: FC<{
+  token: OAuth2Token | null;
+  label: string;
+  property: keyof Pick<OAuth2Token, 'accessToken' | 'refreshToken' | 'identityToken'>;
+}> = ({ token, label, property }) => {
   const reqData = useRouteLoaderData('request/:requestId') as RequestLoaderData;
   const groupData = useRouteLoaderData('request-group/:requestGroupId') as RequestGroupLoaderData;
   const { _id } = reqData?.activeRequest || groupData.activeRequestGroup;
@@ -359,21 +362,19 @@ const OAuth2TokenInput: FC<{ token: OAuth2Token | null; label: string; property:
     } else if (property === 'accessToken') {
       return token && renderAccessTokenExpiry(token);
     }
-      return null;
-
+    return null;
   }, [property, token]);
 
   const id = toKebabCase(label);
 
   return (
-    <div className='form-control form-control--outlined'>
+    <div className="form-control form-control--outlined">
       <label htmlFor={id}>
-        <small>{label}{expiryLabel ? <em> {expiryLabel}</em> : null}</small>
-        <input
-          value={token?.[property] || ''}
-          placeholder='n/a'
-          onChange={onChange}
-        />
+        <small>
+          {label}
+          {expiryLabel ? <em> {expiryLabel}</em> : null}
+        </small>
+        <input value={token?.[property] || ''} placeholder="n/a" onChange={onChange} />
       </label>
     </div>
   );
@@ -392,11 +393,7 @@ const OAuth2Error: FC<{ token: OAuth2Token | null }> = ({ token }) => {
   };
 
   const debugButton = token?.xResponseId ? (
-    <Button
-      onClick={debug}
-      className="margin-top-sm"
-      title="View response timeline"
-    >
+    <Button onClick={debug} className="margin-top-sm" title="View response timeline">
       <i className="fa fa-bug space-right" /> Response Timeline
     </Button>
   ) : null;
@@ -442,20 +439,16 @@ const OAuth2Tokens: FC = () => {
   const [loading, setLoading] = useState(false);
 
   return (
-    <div className='notice subtle text-left'>
-      {error && (
-        <p className="selectable notice warning margin-bottom">
-          {error}
-        </p>
-      )}
+    <div className="notice subtle text-left">
+      {error && <p className="selectable notice warning margin-bottom">{error}</p>}
       <OAuth2Error token={token} />
-      <OAuth2TokenInput token={token} label='Refresh Token' property='refreshToken' />
-      <OAuth2TokenInput token={token} label='Identity Token' property='identityToken' />
-      <OAuth2TokenInput token={token} label='Access Token' property='accessToken' />
-      <div className='pad-top text-right'>
+      <OAuth2TokenInput token={token} label="Refresh Token" property="refreshToken" />
+      <OAuth2TokenInput token={token} label="Identity Token" property="identityToken" />
+      <OAuth2TokenInput token={token} label="Access Token" property="accessToken" />
+      <div className="pad-top text-right">
         {token ? (
           <button
-            className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
+            className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
             disabled={!token}
             onClick={() => {
               if (token) {
@@ -469,13 +462,13 @@ const OAuth2Tokens: FC = () => {
         ) : null}
         &nbsp;&nbsp;
         <button
-          className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
+          className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
           onClick={async () => {
             setError('');
             setLoading(true);
 
             try {
-              const renderedAuthentication = await handleRender(authentication) as AuthTypeOAuth2;
+              const renderedAuthentication = (await handleRender(authentication)) as AuthTypeOAuth2;
               const t = await getOAuth2Token(_id, renderedAuthentication, true);
               setToken(t);
               setLoading(false);
@@ -491,13 +484,7 @@ const OAuth2Tokens: FC = () => {
           }}
           disabled={loading}
         >
-          {loading
-            ? token
-              ? 'Refreshing...'
-              : 'Fetching...'
-            : token
-              ? 'Refresh Token'
-              : 'Fetch Tokens'}
+          {loading ? (token ? 'Refreshing...' : 'Fetching...') : token ? 'Refresh Token' : 'Fetch Tokens'}
         </button>
       </div>
     </div>
diff --git a/packages/insomnia/src/ui/components/editors/body/body-editor.tsx b/packages/insomnia/src/ui/components/editors/body/body-editor.tsx
index 50cc7771c2..bc3b5960aa 100644
--- a/packages/insomnia/src/ui/components/editors/body/body-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/body/body-editor.tsx
@@ -13,11 +13,7 @@ import {
 } from '../../../../common/constants';
 import { documentationLinks } from '../../../../common/documentation';
 import { getContentTypeHeader } from '../../../../common/misc';
-import {
-  isEventStreamRequest,
-  type Request,
-  type RequestBodyParameter,
-} from '../../../../models/request';
+import { isEventStreamRequest, type Request, type RequestBodyParameter } from '../../../../models/request';
 import { NunjucksEnabledProvider } from '../../../context/nunjucks/nunjucks-enabled-context';
 import { useRequestPatcher } from '../../../hooks/use-request';
 import { ContentTypeDropdown } from '../../dropdowns/content-type-dropdown';
@@ -36,35 +32,46 @@ interface Props {
   environmentId: string;
 }
 
-export const BodyEditor: FC<Props> = ({
-  request,
-  environmentId,
-}) => {
+export const BodyEditor: FC<Props> = ({ request, environmentId }) => {
   const { workspaceId, requestId } = useParams() as { workspaceId: string; requestId: string };
   const patchRequest = useRequestPatcher();
-  const handleRawChange = useCallback((rawValue: string) => {
-    const body = typeof request.body.mimeType !== 'string'
-      ? { text: rawValue }
-      : { mimeType: request.body.mimeType.split(';')[0], text: rawValue };
-    patchRequest(requestId, { body });
-  }, [patchRequest, request.body.mimeType, requestId]);
+  const handleRawChange = useCallback(
+    (rawValue: string) => {
+      const body =
+        typeof request.body.mimeType !== 'string'
+          ? { text: rawValue }
+          : { mimeType: request.body.mimeType.split(';')[0], text: rawValue };
+      patchRequest(requestId, { body });
+    },
+    [patchRequest, request.body.mimeType, requestId],
+  );
 
-  const handleGraphQLChange = useCallback((content: string) => {
-    const body = typeof CONTENT_TYPE_GRAPHQL !== 'string'
-      ? { text: content }
-      : { mimeType: CONTENT_TYPE_GRAPHQL.split(';')[0], text: content };
-    patchRequest(requestId, { body });
-  }, [patchRequest, requestId]);
+  const handleGraphQLChange = useCallback(
+    (content: string) => {
+      const body =
+        typeof CONTENT_TYPE_GRAPHQL !== 'string'
+          ? { text: content }
+          : { mimeType: CONTENT_TYPE_GRAPHQL.split(';')[0], text: content };
+      patchRequest(requestId, { body });
+    },
+    [patchRequest, requestId],
+  );
 
-  const handleFormUrlEncodedChange = useCallback((params: RequestBodyParameter[]) => {
-    const body = { mimeType: CONTENT_TYPE_FORM_URLENCODED, params };
-    patchRequest(requestId, { body });
-  }, [patchRequest, requestId]);
+  const handleFormUrlEncodedChange = useCallback(
+    (params: RequestBodyParameter[]) => {
+      const body = { mimeType: CONTENT_TYPE_FORM_URLENCODED, params };
+      patchRequest(requestId, { body });
+    },
+    [patchRequest, requestId],
+  );
 
-  const handleFormChange = useCallback((parameters: RequestBodyParameter[]) => {
-    const body = { mimeType: CONTENT_TYPE_FORM_DATA, params: parameters || [] };
-    patchRequest(requestId, { body });
-  }, [patchRequest, requestId]);
+  const handleFormChange = useCallback(
+    (parameters: RequestBodyParameter[]) => {
+      const body = { mimeType: CONTENT_TYPE_FORM_DATA, params: parameters || [] };
+      patchRequest(requestId, { body });
+    },
+    [patchRequest, requestId],
+  );
 
   const handleFileChange = async (path: string) => {
     const headers = clone(request.headers);
@@ -91,10 +98,12 @@ export const BodyEditor: FC<Props> = ({
       contentTypeHeader.value = newContentType;
       showModal(AskModal, {
         title: 'Change Content-Type',
-        message: <p>
-          Do you want set the <span className="monospace">Content-Type</span> header to{' '}
-          <span className="monospace">{newContentType}</span>?
-        </p>,
+        message: (
+          <p>
+            Do you want set the <span className="monospace">Content-Type</span> header to{' '}
+            <span className="monospace">{newContentType}</span>?
+          </p>
+        ),
         onDone: async (saidYes: boolean) => {
           if (saidYes) {
             patchRequest(requestId, { headers });
@@ -112,16 +121,38 @@ export const BodyEditor: FC<Props> = ({
 
   function renderBodyEditor() {
     if (mimeType === CONTENT_TYPE_FORM_URLENCODED) {
-      return <UrlEncodedEditor key={uniqueKey} onChange={handleFormUrlEncodedChange} parameters={request.body.params || []} />;
+      return (
+        <UrlEncodedEditor
+          key={uniqueKey}
+          onChange={handleFormUrlEncodedChange}
+          parameters={request.body.params || []}
+        />
+      );
     } else if (mimeType === CONTENT_TYPE_FORM_DATA) {
       return <FormEditor key={uniqueKey} onChange={handleFormChange} parameters={request.body.params || []} />;
     } else if (mimeType === CONTENT_TYPE_FILE) {
       return <FileEditor key={uniqueKey} onChange={handleFileChange} path={fileName || ''} />;
     } else if (mimeType === CONTENT_TYPE_GRAPHQL) {
-      return <GraphQLEditor key={uniqueKey} uniquenessKey={uniqueKey} request={request} workspaceId={workspaceId} environmentId={environmentId} onChange={handleGraphQLChange} />;
+      return (
+        <GraphQLEditor
+          key={uniqueKey}
+          uniquenessKey={uniqueKey}
+          request={request}
+          workspaceId={workspaceId}
+          environmentId={environmentId}
+          onChange={handleGraphQLChange}
+        />
+      );
     } else if (!isBodyEmpty) {
       const contentType = getContentTypeFromHeaders(request.headers) || mimeType;
-      return <RawEditor uniquenessKey={uniqueKey} contentType={contentType || 'text/plain'} content={request.body.text || ''} onChange={handleRawChange} />;
+      return (
+        <RawEditor
+          uniquenessKey={uniqueKey}
+          contentType={contentType || 'text/plain'}
+          content={request.body.text || ''}
+          onChange={handleRawChange}
+        />
+      );
     } else if (isEventStreamRequest(request)) {
       return (
         <EmptyStatePane
@@ -131,20 +162,19 @@ export const BodyEditor: FC<Props> = ({
         />
       );
     }
-      return (
-        <EmptyStatePane
-          icon={<SvgIcon icon="bug" />}
-          documentationLinks={[documentationLinks.introductionToInsomnia]}
-          secondaryAction="Select a body type from above to send data in the body of a request"
-          title="Enter a URL and send to get a response"
-        />
-      );
-
+    return (
+      <EmptyStatePane
+        icon={<SvgIcon icon="bug" />}
+        documentationLinks={[documentationLinks.introductionToInsomnia]}
+        secondaryAction="Select a body type from above to send data in the body of a request"
+        title="Enter a URL and send to get a response"
+      />
+    );
   }
 
   return (
     <NunjucksEnabledProvider disable={noRender}>
-      <Toolbar className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
+      <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
         <ContentTypeDropdown />
       </Toolbar>
       {renderBodyEditor()}
diff --git a/packages/insomnia/src/ui/components/editors/body/file-editor.tsx b/packages/insomnia/src/ui/components/editors/body/file-editor.tsx
index c264ed029a..11c0aac4f4 100644
--- a/packages/insomnia/src/ui/components/editors/body/file-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/body/file-editor.tsx
@@ -15,9 +15,12 @@ export const FileEditor: FC<Props> = ({ onChange, path }) => {
     onChange('');
   }, [onChange]);
 
-  const _handleChooseFile = useCallback((path: string) => {
-    onChange(path);
-  }, [onChange]);
+  const _handleChooseFile = useCallback(
+    (path: string) => {
+      onChange(path);
+    },
+    [onChange],
+  );
 
   // Replace home path with ~/ to make the path shorter
   const homeDirectory = window.app.getPath('home');
@@ -35,18 +38,22 @@ export const FileEditor: FC<Props> = ({ onChange, path }) => {
     <div className="text-center">
       <div className="pad text-left">
         <label className="label--small">Selected File</label>
-        {path ? <code className="block txt-sm">
-          <span className="force-wrap selectable" title={path}>
-            {pathDescription}
-          </span>{' '}
-          <span className="no-wrap">({sizeDescription})</span>
-        </code> : <code className="super-faint block txt-sm">No file selected</code>}
+        {path ? (
+          <code className="txt-sm block">
+            <span className="force-wrap selectable" title={path}>
+              {pathDescription}
+            </span>{' '}
+            <span className="no-wrap">({sizeDescription})</span>
+          </code>
+        ) : (
+          <code className="super-faint txt-sm block">No file selected</code>
+        )}
       </div>
       <div>
         <PromptButton className="btn btn--super-compact" disabled={!path} onClick={_handleResetFile}>
           Reset File
         </PromptButton>
-          &nbsp;&nbsp;
+        &nbsp;&nbsp;
         <FileInputButton path={path} className="btn btn--clicky" onChange={_handleChooseFile} />
       </div>
     </div>
diff --git a/packages/insomnia/src/ui/components/editors/body/form-editor.tsx b/packages/insomnia/src/ui/components/editors/body/form-editor.tsx
index 3799e5aeaf..9b62aa7650 100644
--- a/packages/insomnia/src/ui/components/editors/body/form-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/body/form-editor.tsx
@@ -3,12 +3,14 @@ import React, { type FC } from 'react';
 import { KeyValueEditor } from '../../key-value-editor/key-value-editor';
 
 interface Props {
-  onChange: (c: {
-    name: string;
-    value: string;
-    description?: string;
-    disabled?: boolean;
-  }[]) => void;
+  onChange: (
+    c: {
+      name: string;
+      value: string;
+      description?: string;
+      disabled?: boolean;
+    }[],
+  ) => void;
   parameters: any[];
 }
 
diff --git a/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx b/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx
index 7ac553db26..8a4ef57ab1 100644
--- a/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/body/graph-ql-editor.tsx
@@ -4,8 +4,18 @@ import type { GraphQLInfoOptions } from 'codemirror-graphql/info';
 import type { ModifiedGraphQLJumpOptions } from 'codemirror-graphql/jump';
 import type { OpenDialogOptions } from 'electron';
 import { readFileSync } from 'fs';
-import type { GraphQLNonNull, GraphQLSchema, OperationTypeNode} from 'graphql';
-import { buildClientSchema, type DefinitionNode, type DocumentNode, getIntrospectionQuery, Kind, type NonNullTypeNode, type OperationDefinitionNode, parse, typeFromAST } from 'graphql';
+import type { GraphQLNonNull, GraphQLSchema, OperationTypeNode } from 'graphql';
+import {
+  buildClientSchema,
+  type DefinitionNode,
+  type DocumentNode,
+  getIntrospectionQuery,
+  Kind,
+  type NonNullTypeNode,
+  type OperationDefinitionNode,
+  parse,
+  typeFromAST,
+} from 'graphql';
 import type { Maybe } from 'graphql-language-service';
 import React, { type FC, useCallback, useEffect, useRef, useState } from 'react';
 import { Button, Group, Heading, Toolbar, Tooltip, TooltipTrigger } from 'react-aria-components';
@@ -19,7 +29,13 @@ import { markdownToHTML } from '../../../../common/markdown-to-html';
 import type { ResponsePatch } from '../../../../main/network/libcurl-promise';
 import * as models from '../../../../models';
 import type { Request } from '../../../../models/request';
-import { fetchRequestData, responseTransform, sendCurlAndWriteTimeline, tryToInterpolateRequest, tryToTransformRequestWithPlugins } from '../../../../network/network';
+import {
+  fetchRequestData,
+  responseTransform,
+  sendCurlAndWriteTimeline,
+  tryToInterpolateRequest,
+  tryToTransformRequestWithPlugins,
+} from '../../../../network/network';
 import { invariant } from '../../../../utils/invariant';
 import { jsonPrettify } from '../../../../utils/prettify/json';
 import { Dropdown, DropdownItem, DropdownSection, ItemContent } from '../../base/dropdown';
@@ -33,17 +49,21 @@ import { TimeFromNow } from '../../time-from-now';
 import { prettifyGraphql } from './prettify-graphql.mjs';
 
 // Type guard to ensure loc is non-nullable
-const hasLocation = (def: OperationDefinitionNode): def is OperationDefinitionNode & { loc: NonNullable<OperationDefinitionNode['loc']> } => {
+const hasLocation = (
+  def: OperationDefinitionNode,
+): def is OperationDefinitionNode & { loc: NonNullable<OperationDefinitionNode['loc']> } => {
   return def.loc !== null && def.loc !== undefined;
 };
 /** note that `null` is a valid operation name.  For example, `null` is the operation name of an anonymous `query` operation. */
-const matchesOperation = (operationName: string | null | undefined) => ({ name }: OperationDefinitionNode) => {
-  // For matching an anonymous function, `operationName` will be `null` and `operation.name` will be `undefined`
-  if (!operationName && !name) {
-    return true;
-  }
-  return name?.value === operationName;
-};
+const matchesOperation =
+  (operationName: string | null | undefined) =>
+  ({ name }: OperationDefinitionNode) => {
+    // For matching an anonymous function, `operationName` will be `null` and `operation.name` will be `undefined`
+    if (!operationName && !name) {
+      return true;
+    }
+    return name?.value === operationName;
+  };
 
 function getGraphQLContent(body: GraphQLBody, query?: string, operationName?: string, variables?: string): string {
   // the body object is one dimensional, so we don't need to worry about shallow copying.
@@ -80,7 +100,8 @@ function getGraphQLContent(body: GraphQLBody, query?: string, operationName?: st
 }
 
 const isString = (value?: string): value is string => typeof value === 'string' || (value as unknown) instanceof String;
-const isOperationDefinition = (def: DefinitionNode): def is OperationDefinitionNode => def.kind === Kind.OPERATION_DEFINITION;
+const isOperationDefinition = (def: DefinitionNode): def is OperationDefinitionNode =>
+  def.kind === Kind.OPERATION_DEFINITION;
 
 const fetchGraphQLSchemaForRequest = async ({
   requestId,
@@ -122,7 +143,8 @@ const fetchGraphQLSchemaForRequest = async ({
       }),
     );
 
-    const { request,
+    const {
+      request,
       environment,
       settings,
       clientCertificates,
@@ -226,7 +248,11 @@ export const GraphQLEditor: FC<Props> = ({
   } catch (error) {
     documentAST = null;
   }
-  const operations = documentAST?.definitions.filter(isOperationDefinition)?.map(def => def.name?.value || '').filter(Boolean) || [];
+  const operations =
+    documentAST?.definitions
+      .filter(isOperationDefinition)
+      ?.map(def => def.name?.value || '')
+      .filter(Boolean) || [];
   const operationName = requestBody.operationName || operations[0] || '';
   const disabledOperationMarkers = useRef<TextMarker[]>([]);
   const [state, setState] = useState<State>({
@@ -242,16 +268,16 @@ export const GraphQLEditor: FC<Props> = ({
     documentAST,
   });
 
-  const [automaticFetch, setAutoFetch] = useLocalStorage<boolean>(
-    'graphql.automaticFetch',
-    true
-  );
+  const [automaticFetch, setAutoFetch] = useLocalStorage<boolean>('graphql.automaticFetch', true);
   const [includeInputValueDeprecation, setIncludeInputValueDeprecation] = useState(false);
   const [schema, setSchema] = useState<GraphQLSchema | null>(null);
-  const [schemaFetchError, setSchemaFetchError] = useState<{
-    message: string;
-    response?: ResponsePatch | null;
-  } | undefined>();
+  const [schemaFetchError, setSchemaFetchError] = useState<
+    | {
+        message: string;
+        response?: ResponsePatch | null;
+      }
+    | undefined
+  >();
   const [schemaIsFetching, setSchemaIsFetching] = useState<boolean | null>(null);
   const [schemaLastFetchTime, setSchemaLastFetchTime] = useState<number>(0);
   const editorRef = useRef<CodeEditorHandle>(null);
@@ -293,11 +319,14 @@ export const GraphQLEditor: FC<Props> = ({
   useDocBodyKeyboardShortcuts({
     beautifyRequestBody,
   });
-  const changeOperationName = useCallback((operationName: string) => {
-    const content = getGraphQLContent(state.body, undefined, operationName);
-    onChange(content);
-    setState(prevState => ({ ...prevState, body: { ...prevState.body, operationName } }));
-  }, [onChange, state.body]);
+  const changeOperationName = useCallback(
+    (operationName: string) => {
+      const content = getGraphQLContent(state.body, undefined, operationName);
+      onChange(content);
+      setState(prevState => ({ ...prevState, body: { ...prevState.body, operationName } }));
+    },
+    [onChange, state.body],
+  );
 
   const changeVariables = (variablesInput: string) => {
     try {
@@ -317,7 +346,11 @@ export const GraphQLEditor: FC<Props> = ({
   const changeQuery = (query: string) => {
     try {
       const documentAST = parse(query);
-      const operations = documentAST.definitions.filter(isOperationDefinition)?.map(def => def.name?.value || '').filter(Boolean) || [];
+      const operations =
+        documentAST.definitions
+          .filter(isOperationDefinition)
+          ?.map(def => def.name?.value || '')
+          .filter(Boolean) || [];
 
       // default to first operation when none selected
       let operationName = operations[0] || '';
@@ -413,11 +446,7 @@ export const GraphQLEditor: FC<Props> = ({
     }
   };
 
-  const {
-    variablesSyntaxError,
-    activeReference,
-    explorerVisible,
-  } = state;
+  const { variablesSyntaxError, activeReference, explorerVisible } = state;
 
   const variableTypes: Record<string, GraphQLNonNull<any>> = {};
   if (schema) {
@@ -428,8 +457,7 @@ export const GraphQLEditor: FC<Props> = ({
         if (inputType) {
           variableTypes[variable.name.value] = inputType;
         }
-      }
-      );
+      });
     });
   }
 
@@ -446,16 +474,18 @@ export const GraphQLEditor: FC<Props> = ({
         reference={activeReference}
         handleClose={() => setState(state => ({ ...state, explorerVisible: false }))}
       />,
-      explorerContainer
+      explorerContainer,
     );
   }
 
-  let graphqlOptions: {
-    hintOptions: GraphQLHintOptions & ShowHintOptions;
-    infoOptions: GraphQLInfoOptions;
-    jumpOptions: ModifiedGraphQLJumpOptions;
-    lintOptions: LintOptions;
-  } | undefined;
+  let graphqlOptions:
+    | {
+        hintOptions: GraphQLHintOptions & ShowHintOptions;
+        infoOptions: GraphQLInfoOptions;
+        jumpOptions: ModifiedGraphQLJumpOptions;
+        lintOptions: LintOptions;
+      }
+    | undefined;
   const handleClickReference = (reference: Maybe<ActiveReference>, event: MouseEvent) => {
     event.preventDefault();
     if (reference) {
@@ -488,42 +518,43 @@ export const GraphQLEditor: FC<Props> = ({
   }
   const canShowSchema = schema && !schemaIsFetching && !schemaFetchError && schemaLastFetchTime > 0;
 
-  const highlightOperation = useCallback((operationName?: string | null) => {
+  const highlightOperation = useCallback(
+    (operationName?: string | null) => {
+      if (!state.documentAST || !editorRef.current) {
+        return;
+      }
 
-    if (!state.documentAST || !editorRef.current) {
-      return;
-    }
+      // Remove current query highlighting
+      for (const textMarker of disabledOperationMarkers?.current || []) {
+        textMarker.clear();
+      }
 
-    // Remove current query highlighting
-    for (const textMarker of disabledOperationMarkers?.current || []) {
-      textMarker.clear();
-    }
+      disabledOperationMarkers.current = state.documentAST?.definitions
+        .filter(isOperationDefinition)
+        .filter(name => {
+          const fn = matchesOperation(operationName);
+          return !fn(name);
+        })
+        .filter(hasLocation)
+        .map(({ loc: { startToken, endToken } }) => {
+          const from = {
+            line: startToken.line - 1,
+            ch: startToken.column - 1,
+          };
+          const to = {
+            line: endToken.line,
+            ch: endToken.column - 1,
+          };
 
-    disabledOperationMarkers.current = state.documentAST?.definitions
-      .filter(isOperationDefinition)
-      .filter(name => {
-        const fn = matchesOperation(operationName);
-        return !fn(name);
-      })
-      .filter(hasLocation)
-      .map(({ loc: { startToken, endToken } }) => {
-        const from = {
-          line: startToken.line - 1,
-          ch: startToken.column - 1,
-        };
-        const to = {
-          line: endToken.line,
-          ch: endToken.column - 1,
-        };
-
-        return editorRef.current?.getDoc()?.markText(from, to, {
-          className: 'opacity-70',
-        }) as TextMarker;
-      });
-  }, [state.documentAST]);
+          return editorRef.current?.getDoc()?.markText(from, to, {
+            className: 'opacity-70',
+          }) as TextMarker;
+        });
+    },
+    [state.documentAST],
+  );
 
   const getCurrentOperation = useCallback(() => {
-
     if (!editorRef.current || !editorRef.current.hasFocus()) {
       return state.body.operationName || null;
     }
@@ -539,7 +570,6 @@ export const GraphQLEditor: FC<Props> = ({
 
     // Loop through all operationDefinitions to see if one contains the cursor.
     for (const operation of operationDefinitions) {
-
       if (!operation.name) {
         continue;
       }
@@ -577,39 +607,36 @@ export const GraphQLEditor: FC<Props> = ({
 
   return (
     <>
-      <Toolbar aria-label='GraphQL toolbar' className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
+      <Toolbar
+        aria-label="GraphQL toolbar"
+        className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2"
+      >
         <Dropdown
-          aria-label='Operations Dropdown'
+          aria-label="Operations Dropdown"
           isDisabled={!state.operations.length}
           triggerButton={
-            <Button className="btn btn--compact text-[--hl] p-[--padding-xs] bg-transparent h-full">
+            <Button className="btn btn--compact h-full bg-transparent p-[--padding-xs] text-[--hl]">
               {state.body.operationName || 'Operations'}
             </Button>
           }
         >
           {state.operations.map(operationName => (
-            <DropdownItem
-              key={operationName}
-              aria-label={`Operation ${operationName}`}
-            >
-              <ItemContent
-                label={operationName}
-                onClick={() => changeOperationName(operationName)}
-              />
+            <DropdownItem key={operationName} aria-label={`Operation ${operationName}`}>
+              <ItemContent label={operationName} onClick={() => changeOperationName(operationName)} />
             </DropdownItem>
           ))}
         </Dropdown>
         <Dropdown
-          aria-label='Schema Dropdown'
+          aria-label="Schema Dropdown"
           triggerButton={
-            <Button
-              className="btn btn--compact text-[--hl] p-[--padding-xs] bg-transparent h-full"
-            >
-              <span>schema <i className="fa fa-wrench" /></span>
+            <Button className="btn btn--compact h-full bg-transparent p-[--padding-xs] text-[--hl]">
+              <span>
+                schema <i className="fa fa-wrench" />
+              </span>
             </Button>
           }
         >
-          <DropdownItem aria-label='Show Documentation'>
+          <DropdownItem aria-label="Show Documentation">
             <ItemContent
               isDisabled={!canShowSchema}
               icon="file-code-o"
@@ -619,11 +646,8 @@ export const GraphQLEditor: FC<Props> = ({
               }}
             />
           </DropdownItem>
-          <DropdownSection
-            aria-label='Remote GraphQL Schema Section'
-            title="Remote GraphQL Schema"
-          >
-            <DropdownItem aria-label='Refresh Schema'>
+          <DropdownSection aria-label="Remote GraphQL Schema Section" title="Remote GraphQL Schema">
+            <DropdownItem aria-label="Refresh Schema">
               <ItemContent
                 stayOpenAfterClick
                 icon={`refresh ${schemaIsFetching ? 'fa-spin' : ''}`}
@@ -643,7 +667,7 @@ export const GraphQLEditor: FC<Props> = ({
                 }}
               />
             </DropdownItem>
-            <DropdownItem aria-label='Automatic Fetch'>
+            <DropdownItem aria-label="Automatic Fetch">
               <ItemContent
                 stayOpenAfterClick
                 icon={`toggle-${automaticFetch ? 'on' : 'off'}`}
@@ -658,7 +682,7 @@ export const GraphQLEditor: FC<Props> = ({
                 }}
               />
             </DropdownItem>
-            <DropdownItem aria-label='Fetch deprecation values'>
+            <DropdownItem aria-label="Fetch deprecation values">
               <ItemContent
                 stayOpenAfterClick
                 icon={`toggle-${includeInputValueDeprecation ? 'on' : 'off'}`}
@@ -675,19 +699,16 @@ export const GraphQLEditor: FC<Props> = ({
             </DropdownItem>
           </DropdownSection>
 
-          <DropdownSection
-            aria-label="Local GraphQL Schema Section"
-            title="Local GraphQL Schema"
-          >
-            <DropdownItem aria-label='Load schema from JSON'>
+          <DropdownSection aria-label="Local GraphQL Schema Section" title="Local GraphQL Schema">
+            <DropdownItem aria-label="Load schema from JSON">
               <ItemContent
                 icon="file-code-o"
                 label={
                   <>
                     <span style={{ marginRight: '10px' }}>Load schema from JSON</span>
                     <HelpTooltip>
-                      Run <i>apollo-codegen introspect-schema schema.graphql --output schema.json</i> to
-                      convert GraphQL DSL to JSON.
+                      Run <i>apollo-codegen introspect-schema schema.graphql --output schema.json</i> to convert GraphQL
+                      DSL to JSON.
                     </HelpTooltip>
                   </>
                 }
@@ -699,7 +720,7 @@ export const GraphQLEditor: FC<Props> = ({
           </DropdownSection>
         </Dropdown>
       </Toolbar>
-      <PanelGroup direction={'vertical'} autoSaveId='graphql-variables'>
+      <PanelGroup direction={'vertical'} autoSaveId="graphql-variables">
         <Panel id="GraphQL Editor" minSize={20} defaultSize={60}>
           <CodeEditor
             id="graphql-editor"
@@ -720,19 +741,17 @@ export const GraphQLEditor: FC<Props> = ({
             lintOptions={graphqlOptions?.lintOptions}
           />
         </Panel>
-        <PanelResizeHandle className={'w-full h-[1px] bg-[--hl-md]'} />
-        <Panel id="GraphQL Variables editor" className='flex flex-col' minSize={20}>
-          <Heading className="w-full px-2 text-[--hl] select-none flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center">
+        <PanelResizeHandle className={'h-[1px] w-full bg-[--hl-md]'} />
+        <Panel id="GraphQL Variables editor" className="flex flex-col" minSize={20}>
+          <Heading className="flex h-[--line-height-sm] w-full flex-shrink-0 select-none items-center border-b border-solid border-[--hl-md] px-2 text-[--hl]">
             Query Variables
             <HelpTooltip className="space-left">
               Variables to use in GraphQL query <br />
               (JSON format)
             </HelpTooltip>
-            {variablesSyntaxError && (
-              <span className="text-danger italic pull-right">{variablesSyntaxError}</span>
-            )}
+            {variablesSyntaxError && <span className="text-danger pull-right italic">{variablesSyntaxError}</span>}
           </Heading>
-          <div className='flex-1 overflow-hidden'>
+          <div className="flex-1 overflow-hidden">
             <CodeEditor
               id="graphql-editor-variables"
               dynamicHeight
@@ -753,25 +772,30 @@ export const GraphQLEditor: FC<Props> = ({
           </div>
         </Panel>
       </PanelGroup>
-      <Toolbar className="w-full overflow-y-auto  select-none flex-shrink-0 h-[--line-height-sm] border-t border-solid border-[--hl-md] flex items-center">
-        <Button className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-sm hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all" onPress={beautifyRequestBody}>
+      <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 select-none items-center overflow-y-auto border-t border-solid border-[--hl-md]">
+        <Button
+          className="flex h-full items-center justify-center gap-2 px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={beautifyRequestBody}
+        >
           Prettify GraphQL
         </Button>
-        <span className='flex-1' />
-        {!schemaFetchError && <div className="flex flex-shrink-0 items-center gap-2 text-sm px-2">
-          <Icon icon="info-circle" />
-          {renderSchemaFetchMessage()}
-        </div>}
+        <span className="flex-1" />
+        {!schemaFetchError && (
+          <div className="flex flex-shrink-0 items-center gap-2 px-2 text-sm">
+            <Icon icon="info-circle" />
+            {renderSchemaFetchMessage()}
+          </div>
+        )}
         {schemaFetchError && (
-          <Group className="flex items-center h-full">
+          <Group className="flex h-full items-center">
             <TooltipTrigger>
-              <Button className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-sm hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all">
-                <Icon icon="exclamation-triangle" className='text-[--color-warning]' />
+              <Button className="flex h-full items-center justify-center gap-2 px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+                <Icon icon="exclamation-triangle" className="text-[--color-warning]" />
                 <span>Error fetching Schema</span>
               </Button>
               <Tooltip
                 offset={8}
-                className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
               >
                 {schemaFetchError.message}
               </Tooltip>
diff --git a/packages/insomnia/src/ui/components/editors/body/prettify-graphql.mjs b/packages/insomnia/src/ui/components/editors/body/prettify-graphql.mjs
index a3c771a46a..9eb07b1947 100644
--- a/packages/insomnia/src/ui/components/editors/body/prettify-graphql.mjs
+++ b/packages/insomnia/src/ui/components/editors/body/prettify-graphql.mjs
@@ -1,12 +1,10 @@
 // taken from https://github.com/martin-888/graphql-prettier/blob/master/src/index.js
 import { Kind, parse, print } from 'graphql';
 
-const isSelectionsEmpty = (node) =>
-  !node.selectionSet ||
-  !node.selectionSet.selections ||
-  node.selectionSet.selections.length === 0;
+const isSelectionsEmpty = node =>
+  !node.selectionSet || !node.selectionSet.selections || node.selectionSet.selections.length === 0;
 
-const removeDuplicatedLeafNodes = (sourceNode) => {
+const removeDuplicatedLeafNodes = sourceNode => {
   if (isSelectionsEmpty(sourceNode)) {
     return sourceNode;
   }
@@ -14,18 +12,21 @@ const removeDuplicatedLeafNodes = (sourceNode) => {
   const newNode = { ...sourceNode };
 
   newNode.selectionSet.selections = newNode.selectionSet.selections
-    .filter((selection, index, self) =>
-      selection.kind !== Kind.FIELD ||
-      selection.selectionSet ||
-      index === self.findIndex(selection2 =>
-        selection2.kind === Kind.FIELD &&
-        selection.name.value === selection2.name.value))
+    .filter(
+      (selection, index, self) =>
+        selection.kind !== Kind.FIELD ||
+        selection.selectionSet ||
+        index ===
+          self.findIndex(
+            selection2 => selection2.kind === Kind.FIELD && selection.name.value === selection2.name.value,
+          ),
+    )
     .map(removeDuplicatedLeafNodes);
 
   return newNode;
 };
 
-const mergeDuplicatedNotLeafNodes = (sourceNode) => {
+const mergeDuplicatedNotLeafNodes = sourceNode => {
   if (isSelectionsEmpty(sourceNode)) {
     return sourceNode;
   }
@@ -33,8 +34,7 @@ const mergeDuplicatedNotLeafNodes = (sourceNode) => {
   const newNode = { ...sourceNode };
 
   if (sourceNode.selectionSet.selections.length <= 2) {
-    newNode.selectionSet.selections = newNode.selectionSet.selections
-      .map(mergeDuplicatedNotLeafNodes);
+    newNode.selectionSet.selections = newNode.selectionSet.selections.map(mergeDuplicatedNotLeafNodes);
 
     return newNode;
   }
@@ -44,33 +44,28 @@ const mergeDuplicatedNotLeafNodes = (sourceNode) => {
   const findIndex = (node1, node2) =>
     node1.kind === node2.kind &&
     node1.name.value === node2.name.value &&
-    ((!node1.alias && !node2.alias) || (node1.alias.value === node2.alias.value));
+    ((!node1.alias && !node2.alias) || node1.alias.value === node2.alias.value);
 
-  newNode.selectionSet.selections = newNode.selectionSet.selections
-    .filter((selection, index, self) => {
-      if (selection.kind !== Kind.FIELD) {
-        return true;
-      }
+  newNode.selectionSet.selections = newNode.selectionSet.selections.filter((selection, index, self) => {
+    if (selection.kind !== Kind.FIELD) {
+      return true;
+    }
 
-      if (!selection.selectionSet) {
-        return true;
-      }
+    if (!selection.selectionSet) {
+      return true;
+    }
 
-      if (index === self.findIndex(selection2 => findIndex(selection, selection2))) {
-        return true;
-      }
+    if (index === self.findIndex(selection2 => findIndex(selection, selection2))) {
+      return true;
+    }
 
-      nodesToMerge = [
-        ...nodesToMerge,
-        selection,
-      ];
+    nodesToMerge = [...nodesToMerge, selection];
 
-      return false;
-    });
+    return false;
+  });
 
   nodesToMerge.forEach(node => {
-    const index = newNode.selectionSet.selections
-      .findIndex(selection => findIndex(selection, node));
+    const index = newNode.selectionSet.selections.findIndex(selection => findIndex(selection, node));
 
     newNode.selectionSet.selections[index].selectionSet.selections = [
       ...newNode.selectionSet.selections[index].selectionSet.selections,
@@ -78,8 +73,7 @@ const mergeDuplicatedNotLeafNodes = (sourceNode) => {
     ];
   });
 
-  newNode.selectionSet.selections = newNode.selectionSet.selections
-    .map(mergeDuplicatedNotLeafNodes);
+  newNode.selectionSet.selections = newNode.selectionSet.selections.map(mergeDuplicatedNotLeafNodes);
 
   return newNode;
 };
@@ -93,35 +87,32 @@ const replaceFragments = (sourceNode, fragments) => {
 
   let foundFragments = [];
 
-  newNode.selectionSet.selections = newNode.selectionSet.selections
-    .filter(selection => {
-      if (selection.kind !== Kind.FRAGMENT_SPREAD) {
-        return true;
+  newNode.selectionSet.selections = newNode.selectionSet.selections.filter(selection => {
+    if (selection.kind !== Kind.FRAGMENT_SPREAD) {
+      return true;
+    }
+
+    if (!foundFragments.find(fragment => fragment.name.value === selection.name.value)) {
+      const fragment = fragments.find(fragment => fragment.name.value === selection.name.value);
+
+      if (!fragment) {
+        throw Error(`Found usage of unknown fragment ${selection.name.value}`);
       }
 
-      if (!foundFragments.find(fragment => fragment.name.value === selection.name.value)) {
-        const fragment = fragments.find(fragment => fragment.name.value === selection.name.value);
+      foundFragments = [...foundFragments, fragment];
+    }
 
-        if (!fragment) {
-          throw Error(`Found usage of unknown fragment ${selection.name.value}`);
-        }
-
-        foundFragments = [
-          ...foundFragments,
-          fragment,
-        ];
-      }
-
-      return false;
-    });
+    return false;
+  });
 
   newNode.selectionSet.selections = [
     ...newNode.selectionSet.selections,
     ...foundFragments.reduce((acc, fragment) => [...fragment.selectionSet.selections, ...acc], []),
   ];
 
-  newNode.selectionSet.selections = newNode.selectionSet.selections
-    .map(selection => replaceFragments(selection, fragments));
+  newNode.selectionSet.selections = newNode.selectionSet.selections.map(selection =>
+    replaceFragments(selection, fragments),
+  );
 
   return newNode;
 };
@@ -138,12 +129,14 @@ export const prettifyGraphql = (source, noDuplicates = true) => {
     .map(operationNode => {
       let newOperationNode = { ...operationNode };
 
-      newOperationNode.selectionSet.selections = newOperationNode.selectionSet.selections
-        .map(selection => replaceFragments(selection, fragments));
+      newOperationNode.selectionSet.selections = newOperationNode.selectionSet.selections.map(selection =>
+        replaceFragments(selection, fragments),
+      );
 
       if (noDuplicates) {
-        newOperationNode.selectionSet.selections = newOperationNode.selectionSet.selections
-          .map(selection => removeDuplicatedLeafNodes(mergeDuplicatedNotLeafNodes(selection)));
+        newOperationNode.selectionSet.selections = newOperationNode.selectionSet.selections.map(selection =>
+          removeDuplicatedLeafNodes(mergeDuplicatedNotLeafNodes(selection)),
+        );
       }
 
       return newOperationNode;
@@ -151,4 +144,3 @@ export const prettifyGraphql = (source, noDuplicates = true) => {
     .map(print)
     .join('\n');
 };
-
diff --git a/packages/insomnia/src/ui/components/editors/body/raw-editor.tsx b/packages/insomnia/src/ui/components/editors/body/raw-editor.tsx
index 6b7521b24c..f386e9bc13 100644
--- a/packages/insomnia/src/ui/components/editors/body/raw-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/body/raw-editor.tsx
@@ -10,13 +10,7 @@ interface Props {
   className?: string;
 }
 
-export const RawEditor: FC<Props> = ({
-  className,
-  content,
-  contentType,
-  onChange,
-  uniquenessKey,
-}) => (
+export const RawEditor: FC<Props> = ({ className, content, contentType, onChange, uniquenessKey }) => (
   <Fragment>
     <CodeEditor
       id="raw-editor"
diff --git a/packages/insomnia/src/ui/components/editors/body/url-encoded-editor.tsx b/packages/insomnia/src/ui/components/editors/body/url-encoded-editor.tsx
index 40d624055f..de50f73759 100644
--- a/packages/insomnia/src/ui/components/editors/body/url-encoded-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/body/url-encoded-editor.tsx
@@ -3,12 +3,14 @@ import React, { type FC } from 'react';
 import { KeyValueEditor } from '../../key-value-editor/key-value-editor';
 
 interface Props {
-  onChange: (c: {
-    name: string;
-    value: string;
-    description?: string;
-    disabled?: boolean;
-  }[]) => void;
+  onChange: (
+    c: {
+      name: string;
+      value: string;
+      description?: string;
+      disabled?: boolean;
+    }[],
+  ) => void;
   parameters: any[];
 }
 
diff --git a/packages/insomnia/src/ui/components/editors/environment-editor.tsx b/packages/insomnia/src/ui/components/editors/environment-editor.tsx
index 5e7df7c6b9..68654bda2c 100644
--- a/packages/insomnia/src/ui/components/editors/environment-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/environment-editor.tsx
@@ -21,71 +21,69 @@ export interface EnvironmentEditorHandle {
   getValue: () => EnvironmentInfo | null;
 }
 
-export const EnvironmentEditor = forwardRef<EnvironmentEditorHandle, Props>(({
-  environmentInfo,
-  onBlur,
-  onChange,
-}, ref) => {
-  const editorRef = useRef<CodeEditorHandle>(null);
-  const [error, setError] = useState('');
-  const getValue = useCallback(() => {
-    // @ts-expect-error -- current can be null
-    const value = editorRef.current.getValue();
-    if (!editorRef.current || !value) {
-      return null;
-    }
-    const json = orderedJSON.parse(
-      editorRef.current.getValue(),
-      JSON_ORDER_PREFIX,
+export const EnvironmentEditor = forwardRef<EnvironmentEditorHandle, Props>(
+  ({ environmentInfo, onBlur, onChange }, ref) => {
+    const editorRef = useRef<CodeEditorHandle>(null);
+    const [error, setError] = useState('');
+    const getValue = useCallback(() => {
+      // @ts-expect-error -- current can be null
+      const value = editorRef.current.getValue();
+      if (!editorRef.current || !value) {
+        return null;
+      }
+      const json = orderedJSON.parse(editorRef.current.getValue(), JSON_ORDER_PREFIX, JSON_ORDER_SEPARATOR);
+      const environmentInfo = {
+        object: json.object,
+        propertyOrder: json.map || null,
+      };
+      return environmentInfo;
+    }, []);
+    useImperativeHandle(
+      ref,
+      () => ({
+        isValid: () => !error,
+        getValue,
+      }),
+      [error, getValue],
+    );
+
+    const defaultValue = orderedJSON.stringify(
+      environmentInfo.object,
+      environmentInfo.propertyOrder || null,
       JSON_ORDER_SEPARATOR,
     );
-    const environmentInfo = {
-      object: json.object,
-      propertyOrder: json.map || null,
-    };
-    return environmentInfo;
-  }, []);
-  useImperativeHandle(ref, () => ({
-    isValid: () => !error,
-    getValue,
-  }), [error, getValue]);
-
-  const defaultValue = orderedJSON.stringify(
-    environmentInfo.object,
-    environmentInfo.propertyOrder || null,
-    JSON_ORDER_SEPARATOR,
-  );
-  return (
-    <div className="environment-editor">
-      <CodeEditor
-        id="environment-editor"
-        ref={editorRef}
-        autoPrettify
-        enableNunjucks
-        onChange={() => {
-          setError('');
-          try {
-            const value = getValue();
-            // Check for invalid key names
-            if (value?.object) {
-            // Check root and nested properties
-              const err = checkNestedKeys(value.object);
-              if (err) {
-                setError(err);
-              } else {
-                onChange?.(value);
+    return (
+      <div className="environment-editor">
+        <CodeEditor
+          id="environment-editor"
+          ref={editorRef}
+          autoPrettify
+          enableNunjucks
+          onChange={() => {
+            setError('');
+            try {
+              const value = getValue();
+              // Check for invalid key names
+              if (value?.object) {
+                // Check root and nested properties
+                const err = checkNestedKeys(value.object);
+                if (err) {
+                  setError(err);
+                } else {
+                  onChange?.(value);
+                }
               }
+            } catch (err) {
+              setError(err.message);
             }
-          } catch (err) {
-            setError(err.message);
-          }
-        }}
-        defaultValue={defaultValue}
-        mode="application/json"
-        onBlur={onBlur}
-      />
-      {error && <p className="notice error margin">{error}</p>}
-    </div>
-  );
-});
+          }}
+          defaultValue={defaultValue}
+          mode="application/json"
+          onBlur={onBlur}
+        />
+        {error && <p className="notice error margin">{error}</p>}
+      </div>
+    );
+  },
+);
 EnvironmentEditor.displayName = 'EnvironmentEditor';
diff --git a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx
index 251334d9c3..f067f5d4c6 100644
--- a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/key-value-editor.tsx
@@ -1,8 +1,25 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Button, type ButtonProps, DropIndicator, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Popover, Toolbar, useDragAndDrop } from 'react-aria-components';
+import {
+  Button,
+  type ButtonProps,
+  DropIndicator,
+  ListBox,
+  ListBoxItem,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  Toolbar,
+  useDragAndDrop,
+} from 'react-aria-components';
 
 import { generateId } from '../../../../common/misc';
-import { decryptSecretValue, encryptSecretValue, type EnvironmentKvPairData, EnvironmentKvPairDataType } from '../../../../models/environment';
+import {
+  decryptSecretValue,
+  encryptSecretValue,
+  type EnvironmentKvPairData,
+  EnvironmentKvPairDataType,
+} from '../../../../models/environment';
 import { base64decode } from '../../../../utils/vault';
 import { PromptButton } from '../../base/prompt-button';
 import { OneLineEditor } from '../../codemirror/one-line-editor';
@@ -46,11 +63,12 @@ const ItemButton = (props: ButtonProps & { tabIndex?: number }) => {
 
 export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate = false }: EditorProps) => {
   const kvPairs: EnvironmentKvPairData[] = useMemo(
-    () => data.length > 0 ? [...data] : [createNewPair()],
+    () => (data.length > 0 ? [...data] : [createNewPair()]),
     // Ensure same array data will not generate different kvPairs to avoid flash issue
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(data)]
-  );  const codeModalRef = useRef<CodePromptModalHandle>(null);
+    [JSON.stringify(data)],
+  );
+  const codeModalRef = useRef<CodePromptModalHandle>(null);
   const [kvPairError, setKvPairError] = useState<{ id: string; error: string }[]>([]);
   const symmetricKey = vaultKey === '' ? {} : base64decode(vaultKey, true);
 
@@ -90,7 +108,7 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
 
       return (
         <div
-          className='flex outline-none bg-[--color-bg] h-[--line-height-sm]'
+          className="flex h-[--line-height-sm] bg-[--color-bg] outline-none"
           style={{
             width: element?.clientWidth,
           }}
@@ -100,16 +118,15 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
       );
     },
     renderDropIndicator(target) {
-      return (
-        <DropIndicator
-          target={target}
-          className="outline-[--color-surprise] outline-1 outline !border-none"
-        />
-      );
+      return <DropIndicator target={target} className="!border-none outline outline-1 outline-[--color-surprise]" />;
     },
   });
 
-  const handleItemChange = <K extends keyof EnvironmentKvPairData>(id: string, changedPropertyName: K, newValue: EnvironmentKvPairData[K]) => {
+  const handleItemChange = <K extends keyof EnvironmentKvPairData>(
+    id: string,
+    changedPropertyName: K,
+    newValue: EnvironmentKvPairData[K],
+  ) => {
     const changedItemIdx = kvPairs.findIndex(p => p.id === id);
     if (changedItemIdx !== -1) {
       const changedItem = kvPairs[changedItemIdx];
@@ -136,7 +153,8 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
         // need confirm if user changes from secret type which will decrypt and reveal value;
         showModal(AskModal, {
           title: `Change from Secret to ${newTypeDisplayText}`,
-          message: 'This will make the value unmasked and unencrypted. Besides, none-secret item will not be wrapped with vault namespace when using as environment variable.',
+          message:
+            'This will make the value unmasked and unencrypted. Besides, none-secret item will not be wrapped with vault namespace when using as environment variable.',
           yesText: 'Change',
           noText: 'Cancel',
           onDone: async (yes: boolean) => {
@@ -182,14 +200,19 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
     const { id, name, value, type, enabled = false } = kvPair;
     const itemIndex = kvPairs.findIndex(pair => pair.id === id);
     const itemError = kvPairError.find(p => p.id === id);
-    const hasItemWithSameNameAfter = name !== '' && kvPairs.slice(itemIndex + 1).some(pair => pair.name.trim() === name.trim() && pair.enabled);
+    const hasItemWithSameNameAfter =
+      name !== '' && kvPairs.slice(itemIndex + 1).some(pair => pair.name.trim() === name.trim() && pair.enabled);
     const isValidJSONString = checkValidJSONString(value);
     return (
       <>
-        <div slot="drag" className={`${cellCommonStyle} w-6 flex flex-shrink-0 items-center justify-end border-l border-r-0`} style={{ padding: 0 }}>
-          <Icon icon="grip-vertical" className="cursor-grab mr-1" />
+        <div
+          slot="drag"
+          className={`${cellCommonStyle} flex w-6 flex-shrink-0 items-center justify-end border-l border-r-0`}
+          style={{ padding: 0 }}
+        >
+          <Icon icon="grip-vertical" className="mr-1 cursor-grab" />
         </div>
-        <div className={`${cellCommonStyle} relative h-full w-[30%] flex flex-grow pl-1`}>
+        <div className={`${cellCommonStyle} relative flex h-full w-[30%] flex-grow pl-1`}>
           <OneLineEditor
             id={`environment-kv-editor-name-${id}`}
             placeholder={'Input Name'}
@@ -200,7 +223,7 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
               const error = ensureKeyIsValid(newName, true);
               if (error) {
                 if (itemError) {
-                  setKvPairError(kvPairError.map(p => p.id === id ? { id, error } : p));
+                  setKvPairError(kvPairError.map(p => (p.id === id ? { id, error } : p)));
                 } else {
                   setKvPairError([...kvPairError, { id, error }]);
                 }
@@ -212,19 +235,19 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
               }
             }}
           />
-          {itemError &&
+          {itemError && (
             <Tooltip message={itemError.error} delay={200}>
               <i className="fa fa-exclamation-circle text-[--color-danger]" />
             </Tooltip>
-          }
-          {hasItemWithSameNameAfter &&
+          )}
+          {hasItemWithSameNameAfter && (
             <Tooltip message={`Duplicate name: ${name}. Only the last item with same name will be used.`} delay={200}>
               <i className="fa fa-exclamation-circle text-[--color-warning]" />
             </Tooltip>
-          }
+          )}
         </div>
-        <div className={`${cellCommonStyle} w-[50%] relative`}>
-          {type === EnvironmentKvPairDataType.STRING &&
+        <div className={`${cellCommonStyle} relative w-[50%]`}>
+          {type === EnvironmentKvPairDataType.STRING && (
             <OneLineEditor
               id={`environment-kv-editor-value-${id}`}
               placeholder={'Input Value'}
@@ -232,10 +255,10 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
               readOnly={!enabled}
               onChange={newValue => handleItemChange(id, 'value', newValue)}
             />
-          }
-          {type === EnvironmentKvPairDataType.JSON &&
+          )}
+          {type === EnvironmentKvPairDataType.JSON && (
             <ItemButton
-              className="px-2 py-1 w-full flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
+              className="flex w-full flex-1 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               tabIndex={-1}
               isDisabled={!enabled}
               onPress={() => {
@@ -266,31 +289,38 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
                 }
               }}
             >
-              <i className="fa fa-pencil-square-o space-right" aria-label='Edit JSON' />Click to Edit
+              <i className="fa fa-pencil-square-o space-right" aria-label="Edit JSON" />
+              Click to Edit
             </ItemButton>
-          }
-          {type === EnvironmentKvPairDataType.SECRET &&
+          )}
+          {type === EnvironmentKvPairDataType.SECRET && (
             <PasswordInput
               itemId={id}
               enabled={enabled}
-              placeholder='Input Secret'
+              placeholder="Input Secret"
               value={decryptSecretValue(value, symmetricKey)}
               onChange={newValue => {
                 const encryptedValue = encryptSecretValue(newValue, symmetricKey);
                 handleItemChange(id, 'value', encryptedValue);
               }}
             />
-          }
+          )}
         </div>
-        <div className={`${cellCommonStyle} w-32`} >
+        <div className={`${cellCommonStyle} w-32`}>
           <MenuTrigger>
-            <ItemButton className="py-1 px-[--padding-sm] w-full font-bold flex flex-1 items-center justify-between aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] text-sm" tabIndex={-1} aria-label='Type Selection'>
-              <span className="flex truncate items-center justify-center gap-2" >{kvPairItemTypes.find(t => t.id === type)?.name}</span>
+            <ItemButton
+              className="flex w-full flex-1 items-center justify-between rounded-sm px-[--padding-sm] py-1 text-sm font-bold text-[--color-font] hover:bg-[--hl-xs] aria-pressed:bg-[--hl-sm]"
+              tabIndex={-1}
+              aria-label="Type Selection"
+            >
+              <span className="flex items-center justify-center gap-2 truncate">
+                {kvPairItemTypes.find(t => t.id === type)?.name}
+              </span>
               <Icon icon="caret-down" />
             </ItemButton>
-            <Popover className='border-solid border-[--hl-sm] shadow-lg bg-[--color-bg]'>
+            <Popover className="border-solid border-[--hl-sm] bg-[--color-bg] shadow-lg">
               <Menu
-                aria-label='environment-kv-editor-type-selector'
+                aria-label="environment-kv-editor-type-selector"
                 selectionMode="single"
                 selectedKeys={[type]}
                 // Only valid json string or empty string allowed to convert to JSON type
@@ -301,20 +331,14 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
                   <MenuItem
                     key={item.id}
                     id={item.id}
-                    className="aria-disabled:text-[--hl-lg] aria-disabled:cursor-not-allowed aria-disabled:bg-transparent flex gap-2 pl-[--padding-sm] pr-[--padding-xl] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full
-                      text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none transition-colors text-sm react-aria-ListBoxItem"
+                    className="text-md react-aria-ListBoxItem flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent pl-[--padding-sm] pr-[--padding-xl] text-sm text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none aria-disabled:cursor-not-allowed aria-disabled:bg-transparent aria-disabled:text-[--hl-lg] aria-selected:font-bold"
                     aria-label={item.name}
                     onAction={() => handleItemTypeChange(id, item.id)}
                   >
                     {({ isSelected }) => (
                       <>
                         <span>{item.name}</span>
-                        {isSelected && (
-                          <Icon
-                            icon="check"
-                            className="text-[--color-success] justify-self-end"
-                          />
-                        )}
+                        {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                       </>
                     )}
                   </MenuItem>
@@ -323,9 +347,9 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
             </Popover>
           </MenuTrigger>
         </div>
-        <div className={`${cellCommonStyle} w-20`} >
+        <div className={`${cellCommonStyle} w-20`}>
           <ItemButton
-            className="flex items-center justify-center h-7 aspect-square rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex aspect-square h-7 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
             tabIndex={-1}
             aria-label={enabled ? 'Disable Row' : 'Enable Row'}
             onPress={() => handleItemChange(id, 'enabled', !enabled)}
@@ -333,11 +357,11 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
             <Icon icon={enabled ? 'check-square' : 'square'} />
           </ItemButton>
           <PromptButton
-            className="flex	items-center disabled:opacity-50 justify-center h-7 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex aspect-square h-7 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:opacity-50 aria-pressed:bg-[--hl-sm]"
             fullWidth
-            confirmMessage=''
-            doneMessage=''
-            ariaLabel='Delete Row'
+            confirmMessage=""
+            doneMessage=""
+            ariaLabel="Delete Row"
             tabIndex={-1}
             onClick={() => handleDeleteItem(id)}
           >
@@ -349,11 +373,11 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
   };
 
   return (
-    <div className="min-w-max h-full overflow-hidden flex flex-col">
-      <Toolbar className="content-box z-10 bg-[var(--color-bg)] flex flex-shrink-0 h-[var(--line-height-sm)] text-[var(--font-size-sm)]">
+    <div className="flex h-full min-w-max flex-col overflow-hidden">
+      <Toolbar className="content-box z-10 flex h-[var(--line-height-sm)] flex-shrink-0 bg-[var(--color-bg)] text-[var(--font-size-sm)]">
         <Button
-          className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
-          aria-label='Add Row'
+          className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          aria-label="Add Row"
           onPress={() => {
             handleAddItem();
           }}
@@ -365,19 +389,19 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
           onClick={() => {
             onChange([]);
           }}
-          ariaLabel='Delete All'
-          className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+          ariaLabel="Delete All"
+          className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
           <Icon icon="trash-can" />
           <span>Delete all</span>
         </PromptButton>
       </Toolbar>
       <ListBox
-        aria-label='Environment Key Value Pair'
-        selectionMode='none'
+        aria-label="Environment Key Value Pair"
+        selectionMode="none"
         dragAndDropHooks={dragAndDropHooks}
         dependencies={[kvPairError, data, symmetricKey]}
-        className="p-[--padding-sm] w-full overflow-y-auto h-full"
+        className="h-full w-full overflow-y-auto p-[--padding-sm]"
         items={kvPairs}
       >
         {kvPair => {
@@ -388,16 +412,14 @@ export const EnvironmentKVEditor = ({ data, onChange, vaultKey = '', isPrivate =
               id={id}
               textValue={`environment-item-${name || id}`}
               style={{ opacity: enabled ? '1' : '0.4' }}
-              className={'w-full flex focus:outline-none  h-[--line-height-sm]'}
+              className={'flex h-[--line-height-sm] w-full focus:outline-none'}
             >
               {renderPairItem(kvPair)}
             </ListBoxItem>
           );
         }}
       </ListBox>
-      <CodePromptModal
-        ref={codeModalRef}
-      />
+      <CodePromptModal ref={codeModalRef} />
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/password-input.tsx b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/password-input.tsx
index a7489dfe85..8263b94602 100644
--- a/packages/insomnia/src/ui/components/editors/environment-key-value-editor/password-input.tsx
+++ b/packages/insomnia/src/ui/components/editors/environment-key-value-editor/password-input.tsx
@@ -28,17 +28,18 @@ export const PasswordInput = (props: PasswordInputProps) => {
   };
 
   return (
-    <div className={`h-full w-full flex items-center justify-between ${className}`}>
-      <div className='flex-1 w-full h-full'>
-        {isHidden ?
+    <div className={`flex h-full w-full items-center justify-between ${className}`}>
+      <div className="h-full w-full flex-1">
+        {isHidden ? (
           <input
             value={value}
-            className='placeholder-[--hl-lg] w-full h-full'
+            className="h-full w-full placeholder-[--hl-lg]"
             onChange={event => onChange(event.target.value)}
             placeholder={placeholder}
             readOnly={!enabled}
             type={'password'}
-          /> :
+          />
+        ) : (
           <OneLineEditor
             id={`environment-kv-editor-value-${itemId}`}
             placeholder={placeholder}
@@ -46,12 +47,9 @@ export const PasswordInput = (props: PasswordInputProps) => {
             readOnly={!enabled}
             onChange={newValue => onChange(newValue)}
           />
-        }
+        )}
       </div>
-      <button
-        className='m-0 px-1 h-full items-center'
-        onClick={handleShowHidePassword}
-      >
+      <button className="m-0 h-full items-center px-1" onClick={handleShowHidePassword}>
         {isHidden ? <i className="fa fa-eye-slash" /> : <i className="fa fa-eye" />}
       </button>
     </div>
diff --git a/packages/insomnia/src/ui/components/editors/environment-utils.tsx b/packages/insomnia/src/ui/components/editors/environment-utils.tsx
index c809c07bda..b8b70f05b2 100644
--- a/packages/insomnia/src/ui/components/editors/environment-utils.tsx
+++ b/packages/insomnia/src/ui/components/editors/environment-utils.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
-import { type Environment, type EnvironmentKvPairData, EnvironmentType, getKVPairFromData, vaultEnvironmentPath, vaultEnvironmentRuntimePath } from '../../../models/environment';
+import {
+  type Environment,
+  type EnvironmentKvPairData,
+  EnvironmentType,
+  getKVPairFromData,
+  vaultEnvironmentPath,
+  vaultEnvironmentRuntimePath,
+} from '../../../models/environment';
 import { NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME } from '../../../templating';
 import { showModal } from '../modals';
 import { AlertModal } from '../modals/alert-modal';
@@ -69,9 +76,13 @@ export function handleToggleEnvironmentType(
   // clear kvPairData when switch to json view, otherwise convert json data to kvPairData
   const kvPairData = isSelected ? [] : getKVPairFromData(environment.data, environment.dataPropertyOrder);
   const foundDisabledItem = isSelected && environment.kvPairData?.some(pair => !pair.enabled);
-  const foundDuplicateNameItem = isSelected && environment.kvPairData?.some(
-    (pair, idx) => environment.kvPairData?.slice(idx + 1).some(newPair => pair.name.trim() === newPair.name.trim() && newPair.enabled)
-  );
+  const foundDuplicateNameItem =
+    isSelected &&
+    environment.kvPairData?.some((pair, idx) =>
+      environment.kvPairData
+        ?.slice(idx + 1)
+        .some(newPair => pair.name.trim() === newPair.name.trim() && newPair.enabled),
+    );
   if (!isValidJSON && newEnvironmentType === EnvironmentType.KVPAIR) {
     showModal(AlertModal, {
       title: 'Error',
diff --git a/packages/insomnia/src/ui/components/editors/mock-response-extractor.tsx b/packages/insomnia/src/ui/components/editors/mock-response-extractor.tsx
index 8e3c15f65c..5c7c0f6726 100644
--- a/packages/insomnia/src/ui/components/editors/mock-response-extractor.tsx
+++ b/packages/insomnia/src/ui/components/editors/mock-response-extractor.tsx
@@ -2,10 +2,7 @@ import fs from 'fs/promises';
 import React, { useState } from 'react';
 import { Button } from 'react-aria-components';
 import { useNavigate, useParams } from 'react-router-dom';
-import {
-  useFetcher,
-  useRouteLoaderData,
-} from 'react-router-dom';
+import { useFetcher, useRouteLoaderData } from 'react-router-dom';
 
 import { getContentTypeName, getMimeTypeFromContentType } from '../../../common/constants';
 import type { ResponseHeader } from '../../../models/response';
@@ -26,10 +23,7 @@ export const MockResponseExtractor = () => {
   let { mockServerAndRoutes } = requestLoaderData;
 
   // file://./../../routes/workspace.tsx#workspaceLoader
-  const {
-    activeProject,
-    activeWorkspace,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeProject, activeWorkspace } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
   const isLocalProject = !activeProject?.remoteId;
   const { currentPlan } = useRouteLoaderData('/organization') as OrganizationLoaderData;
   const isEnterprise = currentPlan?.type.includes('enterprise');
@@ -60,35 +54,33 @@ If you want to create a self-hosted mock server route from a request response in
 
   const patchMockRoute = useMockRoutePatcher();
   const navigate = useNavigate();
-  const {
-    organizationId,
-    projectId,
-    workspaceId,
-  } = useParams();
+  const { organizationId, projectId, workspaceId } = useParams();
   const fetcher = useFetcher();
   const [selectedMockServer, setSelectedMockServer] = useState(
-    canOnlyChooseExistingMockServer
-      ? mockServerAndRoutes[0]._id
-      : ''
+    canOnlyChooseExistingMockServer ? mockServerAndRoutes[0]._id : '',
   );
   const [selectedMockRoute, setSelectedMockRoute] = useState('');
   const maybeMimeType = activeResponse && getMimeTypeFromContentType(activeResponse.contentType);
   const mimeType = maybeMimeType && isInMockContentTypeList(maybeMimeType) ? maybeMimeType : 'text/plain';
   return (
-    <div className="px-32 h-full flex flex-col justify-center">
-      <div className="flex place-content-center text-9xl pb-8 text-[--hl-md]">
+    <div className="flex h-full flex-col justify-center px-32">
+      <div className="flex place-content-center pb-8 text-9xl text-[--hl-md]">
         <Icon icon="cube" />
       </div>
-      {tipPreventingUserFromCreatingMockRoute
-        ? (
-          <div className="flex place-content-center pb-2 whitespace-pre-line">
-            {tipPreventingUserFromCreatingMockRoute}
-          </div>
-        )
-        : (<>
+      {tipPreventingUserFromCreatingMockRoute ? (
+        <div className="flex place-content-center whitespace-pre-line pb-2">
+          {tipPreventingUserFromCreatingMockRoute}
+        </div>
+      ) : (
+        <>
           <div className="flex place-content-center pb-2">
             Transform this
-            {activeResponse?.contentType ? getContentTypeName(activeResponse?.contentType) === 'Other' ? '' : ` ${getContentTypeName(activeResponse?.contentType)}` : ''} response to a new mock route or overwrite an existing one.
+            {activeResponse?.contentType
+              ? getContentTypeName(activeResponse?.contentType) === 'Other'
+                ? ''
+                : ` ${getContentTypeName(activeResponse?.contentType)}`
+              : ''}{' '}
+            response to a new mock route or overwrite an existing one.
           </div>
           <form
             onSubmit={async e => {
@@ -123,7 +115,9 @@ If you want to create a self-hosted mock server route from a request response in
                     invariant(activeResponse, 'Active response must be defined');
                     const body = await fs.readFile(activeResponse.bodyPath);
                     // auth mechanism is too sensitive to allow content length checks
-                    const headersWithoutContentLength: ResponseHeader[] = activeResponse.headers.filter(h => h.name.toLowerCase() !== 'content-length');
+                    const headersWithoutContentLength: ResponseHeader[] = activeResponse.headers.filter(
+                      h => h.name.toLowerCase() !== 'content-length',
+                    );
                     // file://./../../routes/actions.tsx#createMockRouteAction
                     fetcher.submit(
                       JSON.stringify({
@@ -138,7 +132,7 @@ If you want to create a self-hosted mock server route from a request response in
                         encType: 'application/json',
                         method: 'post',
                         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/new`,
-                      }
+                      },
                     );
                   },
                 });
@@ -153,8 +147,9 @@ If you want to create a self-hosted mock server route from a request response in
                   onComplete: async name => {
                     invariant(activeResponse, 'Active response must be defined');
                     const body = await fs.readFile(activeResponse.bodyPath);
-                    const hasRouteInServer = mockServerAndRoutes.find(s => s._id === selectedMockServer)?.routes
-                      .find(r => r.name === name && r.method.toUpperCase() === 'GET');
+                    const hasRouteInServer = mockServerAndRoutes
+                      .find(s => s._id === selectedMockServer)
+                      ?.routes.find(r => r.name === name && r.method.toUpperCase() === 'GET');
                     if (hasRouteInServer) {
                       showModal(AlertModal, {
                         title: 'Error',
@@ -163,7 +158,9 @@ If you want to create a self-hosted mock server route from a request response in
                       return;
                     }
                     // auth mechanism is too sensitive to allow content length checks
-                    const headersWithoutContentLength: ResponseHeader[] = activeResponse.headers.filter(h => h.name.toLowerCase() !== 'content-length');
+                    const headersWithoutContentLength: ResponseHeader[] = activeResponse.headers.filter(
+                      h => h.name.toLowerCase() !== 'content-length',
+                    );
                     fetcher.submit(
                       JSON.stringify({
                         name: name,
@@ -177,12 +174,11 @@ If you want to create a self-hosted mock server route from a request response in
                         encType: 'application/json',
                         method: 'post',
                         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/new`,
-                      }
+                      },
                     );
                   },
                 });
               }
-
             }}
           >
             <div className="form-row">
@@ -200,16 +196,12 @@ If you want to create a self-hosted mock server route from a request response in
                       setSelectedMockRoute('');
                     }}
                   >
-                    {!canOnlyChooseExistingMockServer && (
-                      <option value="">-- Create new --</option>
-                    )}
-                    {mockServerAndRoutes
-                      .map(w => (
-                        <option key={w._id} value={w._id}>
-                          {w.name}
-                        </option>
-                      ))
-                    }
+                    {!canOnlyChooseExistingMockServer && <option value="">-- Create new --</option>}
+                    {mockServerAndRoutes.map(w => (
+                      <option key={w._id} value={w._id}>
+                        {w.name}
+                      </option>
+                    ))}
                   </select>
                 </label>
               </div>
@@ -229,21 +221,21 @@ If you want to create a self-hosted mock server route from a request response in
                     }}
                   >
                     <option value="">-- Create new --</option>
-                    {mockServerAndRoutes.find(s => s._id === selectedMockServer)?.routes
-                      .map(w => (
+                    {mockServerAndRoutes
+                      .find(s => s._id === selectedMockServer)
+                      ?.routes.map(w => (
                         <option key={w._id} value={w._id}>
                           {w.name}
                         </option>
-                      ))
-                    }
+                      ))}
                   </select>
                 </label>
               </div>
             </div>
-            <div className="flex mt-2">
+            <div className="mt-2 flex">
               <Button
                 type="submit"
-                className="mr-2 hover:no-underline bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] aria-pressed:bg-opacity-80 focus:ring-[--hl-md] transition-colors rounded-sm"
+                className="mr-2 rounded-sm border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline focus:ring-[--hl-md] aria-pressed:bg-opacity-80"
               >
                 {selectedMockRoute ? 'Overwrite' : 'Create'}
               </Button>
@@ -251,16 +243,18 @@ If you want to create a self-hosted mock server route from a request response in
                 isDisabled={!selectedMockServer || !selectedMockRoute}
                 onPress={() => {
                   const mockWorkspaceId = mockServerAndRoutes.find(s => s._id === selectedMockServer)?.parentId;
-                  navigate(`/organization/${organizationId}/project/${projectId}/workspace/${mockWorkspaceId}/mock-server/mock-route/${selectedMockRoute}`);
+                  navigate(
+                    `/organization/${organizationId}/project/${projectId}/workspace/${mockWorkspaceId}/mock-server/mock-route/${selectedMockRoute}`,
+                  );
                 }}
-                className="flex items-center justify-center py-2 px-3 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-3 py-2 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               >
                 Go to mock
               </Button>
             </div>
           </form>
-        </>)
-      }
+        </>
+      )}
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/editors/mock-response-headers-editor.tsx b/packages/insomnia/src/ui/components/editors/mock-response-headers-editor.tsx
index 90113431a0..3d4c80300a 100644
--- a/packages/insomnia/src/ui/components/editors/mock-response-headers-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/mock-response-headers-editor.tsx
@@ -13,39 +13,38 @@ interface Props {
   onBlur?: (e: FocusEvent) => void;
 }
 
-export const MockResponseHeadersEditor: FC<Props> = ({
-  bulk,
-  isDisabled,
-  onBlur,
-}) => {
+export const MockResponseHeadersEditor: FC<Props> = ({ bulk, isDisabled, onBlur }) => {
   const { mockRoute } = useRouteLoaderData(':mockRouteId') as MockRouteLoaderData;
   const patchMockRoute = useMockRoutePatcher();
 
   const { mockRouteId } = useParams() as { mockRouteId: string };
 
-  const handleBulkUpdate = useCallback((headersString: string) => {
-    const headers: {
-      name: string;
-      value: string;
-    }[] = [];
+  const handleBulkUpdate = useCallback(
+    (headersString: string) => {
+      const headers: {
+        name: string;
+        value: string;
+      }[] = [];
 
-    const rows = headersString.split(/\n+/);
-    for (const row of rows) {
-      const [rawName, rawValue] = row.split(/:(.*)$/);
-      const name = (rawName || '').trim();
-      const value = (rawValue || '').trim();
+      const rows = headersString.split(/\n+/);
+      for (const row of rows) {
+        const [rawName, rawValue] = row.split(/:(.*)$/);
+        const name = (rawName || '').trim();
+        const value = (rawValue || '').trim();
 
-      if (!name && !value) {
-        continue;
+        if (!name && !value) {
+          continue;
+        }
+
+        headers.push({
+          name,
+          value,
+        });
       }
-
-      headers.push({
-        name,
-        value,
-      });
-    }
-    patchMockRoute(mockRouteId, { headers });
-  }, [patchMockRoute, mockRouteId]);
+      patchMockRoute(mockRouteId, { headers });
+    },
+    [patchMockRoute, mockRouteId],
+  );
 
   let headersString = '';
   for (const header of mockRoute.headers) {
@@ -61,9 +60,12 @@ export const MockResponseHeadersEditor: FC<Props> = ({
     headersString += `${header.name}: ${header.value}\n`;
   }
 
-  const onChangeHeaders = useCallback((headers: RequestHeader[]) => {
-    patchMockRoute(mockRouteId, { headers });
-  }, [patchMockRoute, mockRouteId]);
+  const onChangeHeaders = useCallback(
+    (headers: RequestHeader[]) => {
+      patchMockRoute(mockRouteId, { headers });
+    },
+    [patchMockRoute, mockRouteId],
+  );
 
   if (bulk) {
     return (
diff --git a/packages/insomnia/src/ui/components/editors/request-headers-editor.tsx b/packages/insomnia/src/ui/components/editors/request-headers-editor.tsx
index b8db0f29e0..a70a4e0412 100644
--- a/packages/insomnia/src/ui/components/editors/request-headers-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/request-headers-editor.tsx
@@ -27,12 +27,7 @@ export const readOnlyHttpPairs = [
   { name: 'Host', value: '<calculated at runtime>' },
 ].map(pair => ({ ...pair, id: generateId('pair') }));
 
-export const RequestHeadersEditor: FC<Props> = ({
-  headers,
-  bulk,
-  isDisabled,
-  requestType,
-}) => {
+export const RequestHeadersEditor: FC<Props> = ({ headers, bulk, isDisabled, requestType }) => {
   const patchRequest = useRequestPatcher();
   const patchRequestGroup = useRequestGroupPatcher();
   const patcher = requestType === 'RequestGroup' ? patchRequestGroup : patchRequest;
@@ -40,29 +35,32 @@ export const RequestHeadersEditor: FC<Props> = ({
   const { requestId, requestGroupId } = useParams() as { requestId?: string; requestGroupId?: string };
   const id = requestType === 'RequestGroup' ? requestGroupId : requestId;
   invariant(id, 'Request or RequestGroup ID is required');
-  const handleBulkUpdate = useCallback((headersString: string) => {
-    const headersArray: {
-      name: string;
-      value: string;
-    }[] = [];
+  const handleBulkUpdate = useCallback(
+    (headersString: string) => {
+      const headersArray: {
+        name: string;
+        value: string;
+      }[] = [];
 
-    const rows = headersString.split(/\n+/);
-    for (const row of rows) {
-      const [rawName, rawValue] = row.split(/:(.*)$/);
-      const name = (rawName || '').trim();
-      const value = (rawValue || '').trim();
+      const rows = headersString.split(/\n+/);
+      for (const row of rows) {
+        const [rawName, rawValue] = row.split(/:(.*)$/);
+        const name = (rawName || '').trim();
+        const value = (rawValue || '').trim();
 
-      if (!name && !value) {
-        continue;
+        if (!name && !value) {
+          continue;
+        }
+
+        headersArray.push({
+          name,
+          value,
+        });
       }
-
-      headersArray.push({
-        name,
-        value,
-      });
-    }
-    patcher(id, { headers: headersArray });
-  }, [patcher, id]);
+      patcher(id, { headers: headersArray });
+    },
+    [patcher, id],
+  );
 
   let headersString = '';
   for (const header of headers) {
diff --git a/packages/insomnia/src/ui/components/editors/request-parameters-editor.tsx b/packages/insomnia/src/ui/components/editors/request-parameters-editor.tsx
index e79cc4fbf3..3f2ecf0601 100644
--- a/packages/insomnia/src/ui/components/editors/request-parameters-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/request-parameters-editor.tsx
@@ -12,36 +12,36 @@ interface Props {
   disabled?: boolean;
 }
 
-export const RequestParametersEditor: FC<Props> = ({
-  bulk,
-  disabled = false,
-}) => {
+export const RequestParametersEditor: FC<Props> = ({ bulk, disabled = false }) => {
   const { requestId } = useParams() as { requestId: string };
   const { activeRequest } = useRouteLoaderData('request/:requestId') as RequestLoaderData | WebSocketRequestLoaderData;
   const patchRequest = useRequestPatcher();
-  const handleBulkUpdate = useCallback((paramsString: string) => {
-    const parameters: {
-      name: string;
-      value: string;
-    }[] = [];
+  const handleBulkUpdate = useCallback(
+    (paramsString: string) => {
+      const parameters: {
+        name: string;
+        value: string;
+      }[] = [];
 
-    const rows = paramsString.split(/\n+/);
-    for (const row of rows) {
-      const [rawName, rawValue] = row.split(/:(.*)$/);
-      const name = (rawName || '').trim();
-      const value = (rawValue || '').trim();
+      const rows = paramsString.split(/\n+/);
+      for (const row of rows) {
+        const [rawName, rawValue] = row.split(/:(.*)$/);
+        const name = (rawName || '').trim();
+        const value = (rawValue || '').trim();
 
-      if (!name && !value) {
-        continue;
+        if (!name && !value) {
+          continue;
+        }
+
+        parameters.push({
+          name,
+          value,
+        });
       }
-
-      parameters.push({
-        name,
-        value,
-      });
-    }
-    patchRequest(requestId, { parameters });
-  }, [patchRequest, requestId]);
+      patchRequest(requestId, { parameters });
+    },
+    [patchRequest, requestId],
+  );
 
   let paramsString = '';
   for (const param of activeRequest.parameters) {
@@ -57,15 +57,18 @@ export const RequestParametersEditor: FC<Props> = ({
     paramsString += `${param.name}: ${param.value}\n`;
   }
 
-  const onChangeParameter = useCallback((parameters: RequestParameter[]) => {
-    patchRequest(requestId, { parameters });
-  }, [patchRequest, requestId]);
+  const onChangeParameter = useCallback(
+    (parameters: RequestParameter[]) => {
+      patchRequest(requestId, { parameters });
+    },
+    [patchRequest, requestId],
+  );
 
   if (bulk) {
     return (
       <CodeEditor
         id="request-parameters-editor"
-        className='flex-1'
+        className="flex-1"
         onChange={handleBulkUpdate}
         defaultValue={paramsString}
         enableNunjucks
diff --git a/packages/insomnia/src/ui/components/editors/request-script-editor.tsx b/packages/insomnia/src/ui/components/editors/request-script-editor.tsx
index 9ac76731b0..d5134bf851 100644
--- a/packages/insomnia/src/ui/components/editors/request-script-editor.tsx
+++ b/packages/insomnia/src/ui/components/editors/request-script-editor.tsx
@@ -1,8 +1,28 @@
 import type { Snippet } from 'codemirror';
 import React, { type FC, useRef } from 'react';
-import { Button, Collection, Header, Menu, MenuItem, MenuTrigger, Popover, Section, Toolbar } from 'react-aria-components';
+import {
+  Button,
+  Collection,
+  Header,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  Section,
+  Toolbar,
+} from 'react-aria-components';
 
-import { CookieObject, Environment, Execution, InsomniaObject, Request as ScriptRequest, RequestInfo, Url, Variables, Vault } from '../../../../../insomnia-scripting-environment/src/objects';
+import {
+  CookieObject,
+  Environment,
+  Execution,
+  InsomniaObject,
+  Request as ScriptRequest,
+  RequestInfo,
+  Url,
+  Variables,
+  Vault,
+} from '../../../../../insomnia-scripting-environment/src/objects';
 import { ParentFolders } from '../../../../../insomnia-scripting-environment/src/objects/folders';
 import type { Settings } from '../../../models/settings';
 import { translateHandlersInScript } from '../../../utils/importers/importers/postman';
@@ -28,8 +48,7 @@ const setCollectionVar = 'insomnia.collectionVariables.set("variable_name", "var
 const unsetEnvVar = 'insomnia.environment.unset("variable_name");';
 const unsetGlbVar = 'insomnia.globals.unset("variable_name");';
 const unsetCollectionVar = 'insomnia.collectionVariables.unset("variable_name");';
-const sendReq =
-  `const resp = await insomnia.sendRequest(
+const sendReq = `const resp = await insomnia.sendRequest(
 	'https://insomnia.rest/',
 	(err, resp) => {
 		if (err != null) {
@@ -43,14 +62,12 @@ const addHeader = "insomnia.request.addHeader({key: 'X-Header-Name', value: 'hea
 const removeHeader = "insomnia.request.removeHeader('X-Header-Name');";
 const setMethod = "insomnia.request.method = 'GET';";
 const addQueryParams = "insomnia.request.url.addQueryParams('k1=v1');";
-const updateRequestBody =
-  `insomnia.request.body.update({
+const updateRequestBody = `insomnia.request.body.update({
   mode: 'raw',
   raw: 'rawContent',
 });`;
 
-const updateRequestAuth =
-  `insomnia.request.auth.update(
+const updateRequestAuth = `insomnia.request.auth.update(
   {
       type: 'bearer',
       bearer: [
@@ -67,8 +84,7 @@ const getStatusMsg = 'const status = insomnia.response.status;';
 const getRespTime = 'const responseTime = insomnia.response.responseTime;';
 const getJsonBody = 'const jsonBody = insomnia.response.json();';
 const getTextBody = 'const textBody = insomnia.response.text();';
-const findHeader =
-  `const header = insomnia.response.headers.find(
+const findHeader = `const header = insomnia.response.headers.find(
     header => header.key === 'Content-Type',
     {},
 );`;
@@ -79,8 +95,7 @@ const activeReqPath = 'console.log(insomnia.execution.location);';
 const activeReqItem = 'console.log(insomnia.execution.location.current);';
 const activeReqInfo = 'console.log(insomnia.info);';
 
-const checkStatus200 =
-  `insomnia.test('Check if status is 200', () => {
+const checkStatus200 = `insomnia.test('Check if status is 200', () => {
     insomnia.expect(insomnia.response.code).to.eql(200);
 });`;
 
@@ -183,58 +198,61 @@ function getRequestScriptSnippets(insomniaObject: InsomniaObject, path: string):
 interface SnippetMenuItem {
   id: string;
   name: string;
-  items: ({
-    id: string;
-    name: string;
-    snippet: string;
-  } | {
-    id: string;
-    name: string;
-    items: {
-      id: string;
-      name: string;
-      snippet: string;
-    }[];
-  })[];
+  items: (
+    | {
+        id: string;
+        name: string;
+        snippet: string;
+      }
+    | {
+        id: string;
+        name: string;
+        items: {
+          id: string;
+          name: string;
+          snippet: string;
+        }[];
+      }
+  )[];
 }
 
 const variableSnippetsMenu: SnippetMenuItem = {
-  'id': 'variable-snippets',
-  'name': 'Variable Snippets',
+  id: 'variable-snippets',
+  name: 'Variable Snippets',
   items: [
     {
-      'id': 'get-values',
-      'name': 'Get values',
+      id: 'get-values',
+      name: 'Get values',
       items: [
         {
-          'id': 'get-env-var',
-          'name': 'Get an environment variable',
-          'snippet': getEnvVar,
+          id: 'get-env-var',
+          name: 'Get an environment variable',
+          snippet: getEnvVar,
         },
         {
-          'id': 'get-glb-var',
-          'name': 'Get a global variable',
-          'snippet': getGlbVar,
+          id: 'get-glb-var',
+          name: 'Get a global variable',
+          snippet: getGlbVar,
         },
         {
-          'id': 'get-var',
-          'name': 'Get a variable',
-          'snippet': getVar,
+          id: 'get-var',
+          name: 'Get a variable',
+          snippet: getVar,
         },
         {
-          'id': 'get-collection-var',
-          'name': 'Get a collection variable',
-          'snippet': getCollectionVar,
+          id: 'get-collection-var',
+          name: 'Get a collection variable',
+          snippet: getCollectionVar,
         },
         {
-          'id': 'get-folder-var',
-          'name': 'Get a folder-level variable',
-          'snippet': getFolderEnvValue,
+          id: 'get-folder-var',
+          name: 'Get a folder-level variable',
+          snippet: getFolderEnvValue,
         },
         {
-          'id': 'find-folder-var',
-          'name': 'Find a folder-level variable',
-          'snippet': findFolderEnvValue,
+          id: 'find-folder-var',
+          name: 'Find a folder-level variable',
+          snippet: findFolderEnvValue,
         },
       ],
     },
@@ -243,29 +261,29 @@ const variableSnippetsMenu: SnippetMenuItem = {
       name: 'Set values',
       items: [
         {
-          'id': 'set-env-var',
-          'name': 'Set an environment variable',
-          'snippet': setEnvVar,
+          id: 'set-env-var',
+          name: 'Set an environment variable',
+          snippet: setEnvVar,
         },
         {
-          'id': 'set-glb-var',
-          'name': 'Set a global variable',
-          'snippet': setGlbVar,
+          id: 'set-glb-var',
+          name: 'Set a global variable',
+          snippet: setGlbVar,
         },
         {
-          'id': 'set-var',
-          'name': 'Set a variable',
-          'snippet': setVar,
+          id: 'set-var',
+          name: 'Set a variable',
+          snippet: setVar,
         },
         {
-          'id': 'set-collection-var',
-          'name': 'Set a collection variable',
-          'snippet': setCollectionVar,
+          id: 'set-collection-var',
+          name: 'Set a collection variable',
+          snippet: setCollectionVar,
         },
         {
-          'id': 'set-folder-var',
-          'name': 'Set a folder-level variable',
-          'snippet': setFolderEnvValue,
+          id: 'set-folder-var',
+          name: 'Set a folder-level variable',
+          snippet: setFolderEnvValue,
         },
       ],
     },
@@ -274,19 +292,19 @@ const variableSnippetsMenu: SnippetMenuItem = {
       name: 'Clear values',
       items: [
         {
-          'id': 'unset-env-var',
-          'name': 'Clear an environment variable',
-          'snippet': unsetEnvVar,
+          id: 'unset-env-var',
+          name: 'Clear an environment variable',
+          snippet: unsetEnvVar,
         },
         {
-          'id': 'unset-glb-var',
-          'name': 'Clear a global variable',
-          'snippet': unsetGlbVar,
+          id: 'unset-glb-var',
+          name: 'Clear a global variable',
+          snippet: unsetGlbVar,
         },
         {
-          'id': 'unset-collection-var',
-          'name': 'Clear a collection variable',
-          'snippet': unsetCollectionVar,
+          id: 'unset-collection-var',
+          name: 'Clear a collection variable',
+          snippet: unsetCollectionVar,
         },
       ],
     },
@@ -298,34 +316,34 @@ const requestManipulationMenu: SnippetMenuItem = {
   name: 'Request Manipulation',
   items: [
     {
-      'id': 'add-query-param',
-      'name': 'Add query param',
-      'snippet': addQueryParams,
+      id: 'add-query-param',
+      name: 'Add query param',
+      snippet: addQueryParams,
     },
     {
-      'id': 'set-method',
-      'name': 'Set method',
-      'snippet': setMethod,
+      id: 'set-method',
+      name: 'Set method',
+      snippet: setMethod,
     },
     {
-      'id': 'add-header',
-      'name': 'Add a header',
-      'snippet': addHeader,
+      id: 'add-header',
+      name: 'Add a header',
+      snippet: addHeader,
     },
     {
-      'id': 'remove-header',
-      'name': 'Remove header',
-      'snippet': removeHeader,
+      id: 'remove-header',
+      name: 'Remove header',
+      snippet: removeHeader,
     },
     {
-      'id': 'update-body-raw',
-      'name': 'Update body as raw',
-      'snippet': updateRequestBody,
+      id: 'update-body-raw',
+      name: 'Update body as raw',
+      snippet: updateRequestBody,
     },
     {
-      'id': 'update-auth-method',
-      'name': 'Update auth method',
-      'snippet': updateRequestAuth,
+      id: 'update-auth-method',
+      name: 'Update auth method',
+      snippet: updateRequestAuth,
     },
   ],
 };
@@ -335,39 +353,39 @@ const responseHandlingMenu: SnippetMenuItem = {
   name: 'Response Handling',
   items: [
     {
-      'id': 'get-status-code',
-      'name': 'Get status code',
-      'snippet': getStatusCode,
+      id: 'get-status-code',
+      name: 'Get status code',
+      snippet: getStatusCode,
     },
     {
-      'id': 'get-status-message',
-      'name': 'Get status message',
-      'snippet': getStatusMsg,
+      id: 'get-status-message',
+      name: 'Get status message',
+      snippet: getStatusMsg,
     },
     {
-      'id': 'get-response-time',
-      'name': 'Get response time',
-      'snippet': getRespTime,
+      id: 'get-response-time',
+      name: 'Get response time',
+      snippet: getRespTime,
     },
     {
-      'id': 'get-body-json',
-      'name': 'Get body as JSON',
-      'snippet': getJsonBody,
+      id: 'get-body-json',
+      name: 'Get body as JSON',
+      snippet: getJsonBody,
     },
     {
-      'id': 'get-body-text',
-      'name': 'Get body as text',
-      'snippet': getTextBody,
+      id: 'get-body-text',
+      name: 'Get body as text',
+      snippet: getTextBody,
     },
     {
-      'id': 'find-header',
-      'name': 'Find a header by name',
-      'snippet': findHeader,
+      id: 'find-header',
+      name: 'Find a header by name',
+      snippet: findHeader,
     },
     {
-      'id': 'get-cookies',
-      'name': 'Get cookies',
-      'snippet': getCookies,
+      id: 'get-cookies',
+      name: 'Get cookies',
+      snippet: getCookies,
     },
   ],
 };
@@ -377,49 +395,49 @@ const miscMenu: SnippetMenuItem = {
   name: 'Misc',
   items: [
     {
-      'id': 'send-request',
-      'name': 'Send a request',
-      'snippet': sendReq,
+      id: 'send-request',
+      name: 'Send a request',
+      snippet: sendReq,
     },
     {
-      'id': 'print-log',
-      'name': 'Print log',
-      'snippet': logValue,
+      id: 'print-log',
+      name: 'Print log',
+      snippet: logValue,
     },
     {
-      'id': 'require-module',
-      'name': 'Require a module',
-      'snippet': requireAModule,
+      id: 'require-module',
+      name: 'Require a module',
+      snippet: requireAModule,
     },
     {
-      'id': 'delay',
-      'name': 'Delay',
-      'snippet': delay,
+      id: 'delay',
+      name: 'Delay',
+      snippet: delay,
     },
     {
-      'id': 'skip-request',
-      'name': 'Skip request',
-      'snippet': skipRequest,
+      id: 'skip-request',
+      name: 'Skip request',
+      snippet: skipRequest,
     },
     {
-      'id': 'set-next-request',
-      'name': 'Set next request (in Runner)',
-      'snippet': setNextRequest,
+      id: 'set-next-request',
+      name: 'Set next request (in Runner)',
+      snippet: setNextRequest,
     },
     {
-      'id': 'active-request-info',
-      'name': 'Active request info',
-      'snippet': activeReqInfo,
+      id: 'active-request-info',
+      name: 'Active request info',
+      snippet: activeReqInfo,
     },
     {
-      'id': 'active-request-path',
-      'name': 'Active request path',
-      'snippet': activeReqPath,
+      id: 'active-request-path',
+      name: 'Active request path',
+      snippet: activeReqPath,
     },
     {
-      'id': 'active-request-item',
-      'name': 'Active request item',
-      'snippet': activeReqItem,
+      id: 'active-request-item',
+      name: 'Active request item',
+      snippet: activeReqItem,
     },
   ],
 };
@@ -429,89 +447,89 @@ const testMenu: SnippetMenuItem = {
   name: 'Test Utils',
   items: [
     {
-      'id': 'test-examples',
-      'name': 'Test Examples',
+      id: 'test-examples',
+      name: 'Test Examples',
       items: [
         {
-          'id': 'check-status-200',
-          'name': 'Check if status is 200',
-          'snippet': checkStatus200,
+          id: 'check-status-200',
+          name: 'Check if status is 200',
+          snippet: checkStatus200,
         },
       ],
     },
     {
-      'id': 'expect-examples',
-      'name': 'Expect Examples',
+      id: 'expect-examples',
+      name: 'Expect Examples',
       items: [
         {
-          'id': 'expect-to-equal',
-          'name': 'expectToEqual',
-          'snippet': expectToEqual,
+          id: 'expect-to-equal',
+          name: 'expectToEqual',
+          snippet: expectToEqual,
         },
         {
-          'id': 'expect-to-be-a',
-          'name': 'expectToBeA',
-          'snippet': expectToBeA,
+          id: 'expect-to-be-a',
+          name: 'expectToBeA',
+          snippet: expectToBeA,
         },
         {
-          'id': 'expect-to-have-length',
-          'name': 'expectToHaveLength',
-          'snippet': expectToHaveLength,
+          id: 'expect-to-have-length',
+          name: 'expectToHaveLength',
+          snippet: expectToHaveLength,
         },
         {
-          'id': 'expect-to-include',
-          'name': 'expectToInclude',
-          'snippet': expectToInclude,
+          id: 'expect-to-include',
+          name: 'expectToInclude',
+          snippet: expectToInclude,
         },
         {
-          'id': 'expect-to-be-one-of',
-          'name': 'expectToBeOneOf',
-          'snippet': expectToBeOneOf,
+          id: 'expect-to-be-one-of',
+          name: 'expectToBeOneOf',
+          snippet: expectToBeOneOf,
         },
         {
-          'id': 'expect-to-be-below',
-          'name': 'expectToBeBelow',
-          'snippet': expectToBeBelow,
+          id: 'expect-to-be-below',
+          name: 'expectToBeBelow',
+          snippet: expectToBeBelow,
         },
         {
-          'id': 'expect-to-have-all-keys',
-          'name': 'expectToHaveAllKeys',
-          'snippet': expectToHaveAllKeys,
+          id: 'expect-to-have-all-keys',
+          name: 'expectToHaveAllKeys',
+          snippet: expectToHaveAllKeys,
         },
         {
-          'id': 'expect-to-have-any-keys',
-          'name': 'expectToHaveAnyKeys',
-          'snippet': expectToHaveAnyKeys,
+          id: 'expect-to-have-any-keys',
+          name: 'expectToHaveAnyKeys',
+          snippet: expectToHaveAnyKeys,
         },
         {
-          'id': 'expect-to-not-have-any-keys',
-          'name': 'expectToNotHaveAnyKeys',
-          'snippet': expectToNotHaveAnyKeys,
+          id: 'expect-to-not-have-any-keys',
+          name: 'expectToNotHaveAnyKeys',
+          snippet: expectToNotHaveAnyKeys,
         },
         {
-          'id': 'expect-to-have-property',
-          'name': 'expectToHaveProperty',
-          'snippet': expectToHaveProperty,
+          id: 'expect-to-have-property',
+          name: 'expectToHaveProperty',
+          snippet: expectToHaveProperty,
         },
         {
-          'id': 'expect-to-be-an-object-that-has-all-keys',
-          'name': 'expectToBeAnObjectThatHasAllKeys',
-          'snippet': expectToBeAnObjectThatHasAllKeys,
+          id: 'expect-to-be-an-object-that-has-all-keys',
+          name: 'expectToBeAnObjectThatHasAllKeys',
+          snippet: expectToBeAnObjectThatHasAllKeys,
         },
       ],
     },
   ],
 };
 
-const snippetsMenus: SnippetMenuItem[] = [variableSnippetsMenu, requestManipulationMenu, responseHandlingMenu, testMenu, miscMenu];
+const snippetsMenus: SnippetMenuItem[] = [
+  variableSnippetsMenu,
+  requestManipulationMenu,
+  responseHandlingMenu,
+  testMenu,
+  miscMenu,
+];
 
-export const RequestScriptEditor: FC<Props> = ({
-  className,
-  defaultValue,
-  onChange,
-  uniquenessKey,
-  settings,
-}) => {
+export const RequestScriptEditor: FC<Props> = ({ className, defaultValue, onChange, uniquenessKey, settings }) => {
   const editorRef = useRef<CodeEditorHandle>(null);
 
   // Inserts at the line below the cursor and moves to the line beneath
@@ -520,12 +538,9 @@ export const RequestScriptEditor: FC<Props> = ({
     const nextRow = cursorRow + 1;
     const value = editorRef.current?.getValue() || '';
 
-    editorRef.current?.setValue([
-      ...value.split('\n').slice(0, nextRow),
-      snippet,
-      '\n',
-      ...value.split('\n').slice(nextRow),
-    ].join('\n'));
+    editorRef.current?.setValue(
+      [...value.split('\n').slice(0, nextRow), snippet, '\n', ...value.split('\n').slice(nextRow)].join('\n'),
+    );
 
     editorRef.current?.focus();
     editorRef.current?.setCursorLine(cursorRow + snippet.split('\n').length);
@@ -579,7 +594,7 @@ export const RequestScriptEditor: FC<Props> = ({
   );
 
   return (
-    <div className='h-full flex flex-col divide-y divide-solid divide-[--hl-md]'>
+    <div className="flex h-full flex-col divide-y divide-solid divide-[--hl-md]">
       <CodeEditor
         id={`script-editor-${uniquenessKey}`}
         key={uniquenessKey}
@@ -588,37 +603,41 @@ export const RequestScriptEditor: FC<Props> = ({
         defaultValue={defaultValue}
         className={className}
         onChange={onChange}
-        mode='text/javascript'
+        mode="text/javascript"
         placeholder="..."
         lintOptions={lintOptions}
         ref={editorRef}
         getAutocompleteSnippets={() => requestScriptSnippets}
         onPaste={translateHandlersInScript}
       />
-      <Toolbar className="flex items-center h-[--line-height-sm] flex-shrink-0 flex-row text-[var(--font-size-sm)] box-border overflow-x-auto">
+      <Toolbar className="box-border flex h-[--line-height-sm] flex-shrink-0 flex-row items-center overflow-x-auto text-[var(--font-size-sm)]">
         {snippetsMenus.map(menu => (
           <MenuTrigger key={menu.id}>
-            <Button className="flex gap-2 px-2 items-center justify-center h-full aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+            <Button className="flex h-full items-center justify-center gap-2 px-2 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
               <Icon icon="code" />
               {menu.name}
             </Button>
-            <Popover className="min-w-max overflow-y-hidden flex flex-col">
+            <Popover className="flex min-w-max flex-col overflow-y-hidden">
               <Menu
                 aria-label="Create a new request"
                 selectionMode="single"
-                className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                 items={menu.items}
               >
                 {section => {
                   if ('items' in section) {
                     return (
                       <Section>
-                        <Header className='pl-2 py-1 text-[--hl] text-xs uppercase'>
-                          {section.name}
-                        </Header>
+                        <Header className="py-1 pl-2 text-xs uppercase text-[--hl]">{section.name}</Header>
                         <Collection items={section.items}>
                           {item => (
-                            <MenuItem onAction={() => addSnippet(item.snippet)} className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors" key={item.name}>{item.name}</MenuItem>
+                            <MenuItem
+                              onAction={() => addSnippet(item.snippet)}
+                              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                              key={item.name}
+                            >
+                              {item.name}
+                            </MenuItem>
                           )}
                         </Collection>
                       </Section>
@@ -626,14 +645,19 @@ export const RequestScriptEditor: FC<Props> = ({
                   }
 
                   return (
-                    <MenuItem onAction={() => addSnippet(section.snippet)} className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors" key={section.name}>{section.name}</MenuItem>
+                    <MenuItem
+                      onAction={() => addSnippet(section.snippet)}
+                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                      key={section.name}
+                    >
+                      {section.name}
+                    </MenuItem>
                   );
                 }}
               </Menu>
             </Popover>
           </MenuTrigger>
         ))}
-
       </Toolbar>
     </div>
   );
diff --git a/packages/insomnia/src/ui/components/encoding-picker.tsx b/packages/insomnia/src/ui/components/encoding-picker.tsx
index bcc4c7e2bc..41c684aa22 100644
--- a/packages/insomnia/src/ui/components/encoding-picker.tsx
+++ b/packages/insomnia/src/ui/components/encoding-picker.tsx
@@ -51,8 +51,8 @@ const BUILT_IN_ENCODINGS = [
 export const EncodingPicker = ({ encoding, onChange }: { encoding: string; onChange: (value: string) => void }) => {
   return (
     <ComboBox
-      aria-label='Encoding Selector'
-      className='inline-block'
+      aria-label="Encoding Selector"
+      className="inline-block"
       selectedKey={encoding}
       onSelectionChange={key => {
         if (key) {
@@ -61,22 +61,21 @@ export const EncodingPicker = ({ encoding, onChange }: { encoding: string; onCha
       }}
       defaultFilter={(textValue, filter) => {
         const encodingKey = BUILT_IN_ENCODINGS.find(e => e.label === textValue)?.key || '';
-        return Boolean(fuzzyMatch(
-          filter,
-          encodingKey,
-          { splitSpace: false, loose: true }
-        )?.indexes) || textValue.toLowerCase().includes(filter.toLowerCase());
+        return (
+          Boolean(fuzzyMatch(filter, encodingKey, { splitSpace: false, loose: true })?.indexes) ||
+          textValue.toLowerCase().includes(filter.toLowerCase())
+        );
       }}
     >
-      <Group className='flex border-solid border border-[--hl-sm] w-full pr-2 min-w-64'>
-        <Input className='flex-1 py-1 px-2'/>
-        <Button className="flex items-center transition-all bg-transparent">
-         <Icon icon="caret-down" />
+      <Group className="flex w-full min-w-64 border border-solid border-[--hl-sm] pr-2">
+        <Input className="flex-1 px-2 py-1" />
+        <Button className="flex items-center bg-transparent transition-all">
+          <Icon icon="caret-down" />
         </Button>
       </Group>
-      <Popover className="overflow-y-hidden flex flex-col">
+      <Popover className="flex flex-col overflow-y-hidden">
         <ListBox
-          className="border select-none text-sm max-h-80 border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-1 rounded-md overflow-y-auto focus:outline-none"
+          className="max-h-80 select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-1 text-sm shadow-lg focus:outline-none"
           items={BUILT_IN_ENCODINGS}
           aria-label="Encoding List"
           autoFocus
@@ -85,17 +84,12 @@ export const EncodingPicker = ({ encoding, onChange }: { encoding: string; onCha
             <ListBoxItem
               aria-label={item.label}
               textValue={item.label}
-              className="aria-disabled:opacity-30 rounded aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] data-[focused]:bg-[--hl-xs] focus:outline-none transition-colors"
+              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap rounded bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold data-[focused]:bg-[--hl-xs]"
             >
               {({ isSelected }) => (
                 <>
                   <span>{item.label}</span>
-                  {isSelected && (
-                    <Icon
-                      icon="check"
-                      className="ml-1 text-[--color-success] justify-self-end"
-                    />
-                  )}
+                  {isSelected && <Icon icon="check" className="ml-1 justify-self-end text-[--color-success]" />}
                 </>
               )}
             </ListBoxItem>
diff --git a/packages/insomnia/src/ui/components/environment-picker.tsx b/packages/insomnia/src/ui/components/environment-picker.tsx
index ad01007841..77eaae5037 100644
--- a/packages/insomnia/src/ui/components/environment-picker.tsx
+++ b/packages/insomnia/src/ui/components/environment-picker.tsx
@@ -1,6 +1,17 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment } from 'react';
-import { Button, ComboBox, Dialog, DialogTrigger, Heading, Input, ListBox, ListBoxItem, Popover, Text } from 'react-aria-components';
+import {
+  Button,
+  ComboBox,
+  Dialog,
+  DialogTrigger,
+  Heading,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Text,
+} from 'react-aria-components';
 import { useFetcher, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { fuzzyMatch } from '../../common/misc';
@@ -45,12 +56,27 @@ export const EnvironmentPicker = ({
   const setActiveEnvironmentFetcher = useFetcher();
   const setActiveGlobalEnvironmentFetcher = useFetcher();
 
-  const collectionEnvironmentList = [baseEnvironment, ...subEnvironments].map(({ type, ...environment }) => ({ ...environment, id: environment._id, isBase: environment._id === baseEnvironment._id }));
+  const collectionEnvironmentList = [baseEnvironment, ...subEnvironments].map(({ type, ...environment }) => ({
+    ...environment,
+    id: environment._id,
+    isBase: environment._id === baseEnvironment._id,
+  }));
 
-  const selectedGlobalBaseEnvironmentId = activeGlobalEnvironment?.parentId.startsWith('wrk') ? activeGlobalEnvironment._id : activeGlobalEnvironment?.parentId;
+  const selectedGlobalBaseEnvironmentId = activeGlobalEnvironment?.parentId.startsWith('wrk')
+    ? activeGlobalEnvironment._id
+    : activeGlobalEnvironment?.parentId;
   const selectedGlobalBaseEnvironment = globalBaseEnvironments.find(e => e._id === selectedGlobalBaseEnvironmentId);
 
-  const globalEnvironmentList = selectedGlobalBaseEnvironment ? [selectedGlobalBaseEnvironment, ...globalSubEnvironments.filter(e => e.parentId === selectedGlobalBaseEnvironment._id)].map(({ type, ...subenvironment }) => ({ ...subenvironment, id: subenvironment._id, isBase: subenvironment._id === selectedGlobalBaseEnvironment._id })) : [];
+  const globalEnvironmentList = selectedGlobalBaseEnvironment
+    ? [
+        selectedGlobalBaseEnvironment,
+        ...globalSubEnvironments.filter(e => e.parentId === selectedGlobalBaseEnvironment._id),
+      ].map(({ type, ...subenvironment }) => ({
+        ...subenvironment,
+        id: subenvironment._id,
+        isBase: subenvironment._id === selectedGlobalBaseEnvironment._id,
+      }))
+    : [];
 
   const activeGlobalBaseEnvironment = selectedGlobalBaseEnvironment;
   const activeBaseEnvironment = baseEnvironment;
@@ -60,56 +86,82 @@ export const EnvironmentPicker = ({
 
   return (
     <DialogTrigger isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Button aria-label='Manage Environments' className="py-1 px-4 max-w-full items-start gap-2 truncate flex flex-col aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+      <Button
+        aria-label="Manage Environments"
+        className="flex max-w-full flex-col items-start gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+      >
         {activeGlobalEnvironment && activeGlobalBaseEnvironment && (
-          <div className='flex flex-col w-full'>
-            <div className='flex items-center gap-2 w-full'>
-              <Icon icon={activeGlobalEnvironment.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'} style={{ color: activeGlobalEnvironment.color || '' }} className='w-5 flex-shrink-0' />
-              <span className='truncate'>
-                {activeGlobalEnvironment.name}
-              </span>
+          <div className="flex w-full flex-col">
+            <div className="flex w-full items-center gap-2">
+              <Icon
+                icon={
+                  activeGlobalEnvironment.isPrivate
+                    ? 'lock'
+                    : isUsingGitSync
+                      ? ['fab', 'git-alt']
+                      : isUsingInsomniaCloudSync
+                        ? 'globe-americas'
+                        : 'file-arrow-down'
+                }
+                style={{ color: activeGlobalEnvironment.color || '' }}
+                className="w-5 flex-shrink-0"
+              />
+              <span className="truncate">{activeGlobalEnvironment.name}</span>
             </div>
-            <div className='flex items-center gap-2 w-full'>
-              <Icon icon="0" className='w-5 flex-shrink-0 invisible' />
-              <span className='flex-shrink truncate text-xs text-[--hl]'>
+            <div className="flex w-full items-center gap-2">
+              <Icon icon="0" className="invisible w-5 flex-shrink-0" />
+              <span className="flex-shrink truncate text-xs text-[--hl]">
                 {activeGlobalBaseEnvironment.workspaceName}
               </span>
             </div>
           </div>
         )}
-        <div className='flex flex-1 items-center gap-2 w-full'>
-          <Icon icon={activeEnvironment.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'} style={{ color: activeEnvironment.color || '' }} className='w-5 flex-shrink-0' />
-          <span className='truncate'>
+        <div className="flex w-full flex-1 items-center gap-2">
+          <Icon
+            icon={
+              activeEnvironment.isPrivate
+                ? 'lock'
+                : isUsingGitSync
+                  ? ['fab', 'git-alt']
+                  : isUsingInsomniaCloudSync
+                    ? 'globe-americas'
+                    : 'file-arrow-down'
+            }
+            style={{ color: activeEnvironment.color || '' }}
+            className="w-5 flex-shrink-0"
+          />
+          <span className="truncate">
             {activeSubEnvironment ? activeSubEnvironment.name : activeBaseEnvironment.name}
           </span>
         </div>
       </Button>
-      <Popover className="min-w-max max-h-[90vh] flex flex-col !z-10" placement='bottom start' offset={8}>
-        <Dialog className="border h-full w-full grid grid-flow-col [grid-auto-columns:min(260px,calc(40vw))_min(260px,calc(40vw))] overflow-hidden divide-x divide-solid divide-[--hl-md] select-none text-sm border-solid border-[--hl-sm] bg-[--color-bg] shadow-lg rounded-md focus:outline-none">
-          <div className='relative w-full h-full flex flex-col overflow-hidden flex-1'>
-            <Heading className='text-sm flex-shrink-0 h-[--line-height-sm] font-bold text-[--hl] px-3 py-1 flex items-center gap-2 justify-between'>
+      <Popover className="!z-10 flex max-h-[90vh] min-w-max flex-col" placement="bottom start" offset={8}>
+        <Dialog className="grid h-full w-full select-none grid-flow-col divide-x divide-solid divide-[--hl-md] overflow-hidden rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] text-sm shadow-lg [grid-auto-columns:min(260px,calc(40vw))_min(260px,calc(40vw))] focus:outline-none">
+          <div className="relative flex h-full w-full flex-1 flex-col overflow-hidden">
+            <Heading className="flex h-[--line-height-sm] flex-shrink-0 items-center justify-between gap-2 px-3 py-1 text-sm font-bold text-[--hl]">
               <span>Global Environments</span>
               <Button
-                aria-label='Manage global environment'
-                onPress={() => selectedGlobalBaseEnvironment && navigate(`/organization/${organizationId}/project/${projectId}/workspace/${selectedGlobalBaseEnvironment.parentId}/environment`)}
-                className={`flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] outline-none hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm ${!selectedGlobalBaseEnvironment ? 'opacity-50' : ''}`}
+                aria-label="Manage global environment"
+                onPress={() =>
+                  selectedGlobalBaseEnvironment &&
+                  navigate(
+                    `/organization/${organizationId}/project/${projectId}/workspace/${selectedGlobalBaseEnvironment.parentId}/environment`,
+                  )
+                }
+                className={`flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] ${!selectedGlobalBaseEnvironment ? 'opacity-50' : ''}`}
               >
                 <Icon icon="gear" />
               </Button>
             </Heading>
             <div>
               <ComboBox
-                aria-label='Global Environment'
+                aria-label="Global Environment"
                 shouldFocusWrap
                 allowsCustomValue={false}
-                onFocus={() => { }}
-                menuTrigger='focus'
+                onFocus={() => {}}
+                menuTrigger="focus"
                 defaultFilter={(textValue, filter) => {
-                  const match = Boolean(fuzzyMatch(
-                    filter,
-                    textValue,
-                    { splitSpace: false, loose: true }
-                  )?.indexes);
+                  const match = Boolean(fuzzyMatch(filter, textValue, { splitSpace: false, loose: true })?.indexes);
 
                   return match;
                 }}
@@ -125,37 +177,53 @@ export const EnvironmentPicker = ({
                     {
                       method: 'POST',
                       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`,
-                    }
+                    },
                   );
                 }}
-                defaultInputValue={selectedGlobalBaseEnvironment?.workspaceName || selectedGlobalBaseEnvironment?.name || 'No Global Environment'}
+                defaultInputValue={
+                  selectedGlobalBaseEnvironment?.workspaceName ||
+                  selectedGlobalBaseEnvironment?.name ||
+                  'No Global Environment'
+                }
                 selectedKey={selectedGlobalBaseEnvironmentId || ''}
-                defaultItems={[{ id: '', icon: 'cancel', name: 'No Global Environment', textValue: 'No Global Environment' }, ...globalBaseEnvironments.map(baseEnv => {
-                  return {
-                    id: baseEnv._id,
-                    icon: 'code',
-                    name: baseEnv.workspaceName || baseEnv.name,
-                    textValue: baseEnv.workspaceName || baseEnv.name,
-                  };
-                })]}
+                defaultItems={[
+                  { id: '', icon: 'cancel', name: 'No Global Environment', textValue: 'No Global Environment' },
+                  ...globalBaseEnvironments.map(baseEnv => {
+                    return {
+                      id: baseEnv._id,
+                      icon: 'code',
+                      name: baseEnv.workspaceName || baseEnv.name,
+                      textValue: baseEnv.workspaceName || baseEnv.name,
+                    };
+                  }),
+                ]}
               >
-                <div className='px-2 mx-2 my-2 flex items-center gap-2 group rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors'>
-                  <Input aria-label='Global Environment' placeholder='Choose a global environment' className="py-1 placeholder:italic w-full pl-2 pr-7 " />
-                  <Button className="aspect-square gap-2 truncate flex items-center justify-center aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-                    <Icon icon="caret-down" className='w-5 flex-shrink-0' />
+                <div className="group mx-2 my-2 flex items-center gap-2 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] px-2 text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]">
+                  <Input
+                    aria-label="Global Environment"
+                    placeholder="Choose a global environment"
+                    className="w-full py-1 pl-2 pr-7 placeholder:italic"
+                  />
+                  <Button className="flex aspect-square items-center justify-center gap-2 truncate rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+                    <Icon icon="caret-down" className="w-5 flex-shrink-0" />
                   </Button>
                 </div>
-                <Popover className="min-w-max max-h-[90vh] !z-10 border grid grid-flow-col auto-cols-[min(250px,calc(45vw))] overflow-y-auto divide-x divide-solid divide-[--hl-md] select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] rounded-md focus:outline-none" placement='bottom start' offset={8}>
-                  <ListBox<{ name: string; icon: IconName }>
-                    className="select-none text-sm min-w-max p-2 h-full max-h-full flex flex-col focus:outline-none"
-                  >
+                <Popover
+                  className="!z-10 grid max-h-[90vh] min-w-max select-none auto-cols-[min(250px,calc(45vw))] grid-flow-col divide-x divide-solid divide-[--hl-md] overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] text-sm shadow-lg focus:outline-none"
+                  placement="bottom start"
+                  offset={8}
+                >
+                  <ListBox<{
+                    name: string;
+                    icon: IconName;
+                  }> className="flex h-full max-h-full min-w-max select-none flex-col p-2 text-sm focus:outline-none">
                     {item => (
                       <ListBoxItem
                         textValue={item.name}
-                        className="aria-disabled:opacity-30 aria-selected:bg-[--hl-sm] rounded aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] data-[focused]:bg-[--hl-xs] focus:outline-none transition-colors"
+                        className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap rounded bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:bg-[--hl-sm] aria-selected:font-bold data-[focused]:bg-[--hl-xs]"
                       >
-                        <Icon icon={item.icon} className='w-4' />
-                        <span className='truncate'>{item.name}</span>
+                        <Icon icon={item.icon} className="w-4" />
+                        <span className="truncate">{item.name}</span>
                       </ListBoxItem>
                     )}
                   </ListBox>
@@ -163,8 +231,8 @@ export const EnvironmentPicker = ({
               </ComboBox>
             </div>
             <ListBox
-              aria-label='Select a Global Environment'
-              selectionMode='single'
+              aria-label="Select a Global Environment"
+              selectionMode="single"
               disallowEmptySelection
               key={activeGlobalEnvironment?._id}
               items={globalEnvironmentList}
@@ -182,15 +250,15 @@ export const EnvironmentPicker = ({
                   {
                     method: 'POST',
                     action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active-global`,
-                  }
+                  },
                 );
               }}
-              className="select-none empty:p-0 text-sm min-w-max p-2 flex flex-col overflow-y-auto focus:outline-none"
+              className="flex min-w-max select-none flex-col overflow-y-auto p-2 text-sm empty:p-0 focus:outline-none"
             >
               {item => (
                 <ListBoxItem
                   textValue={item.name}
-                  className={`rounded flex gap-2 pr-1 items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isBase ? 'pl-[--padding-md]' : 'pl-8'}`}
+                  className={`text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap rounded bg-transparent pr-1 text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed ${item.isBase ? 'pl-[--padding-md]' : 'pl-8'}`}
                 >
                   {({ isSelected }) => (
                     <Fragment>
@@ -200,37 +268,44 @@ export const EnvironmentPicker = ({
                         }}
                       >
                         <Icon
-                          icon={item.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'}
-                          className='text-xs w-5'
+                          icon={
+                            item.isPrivate
+                              ? 'lock'
+                              : isUsingGitSync
+                                ? ['fab', 'git-alt']
+                                : isUsingInsomniaCloudSync
+                                  ? 'globe-americas'
+                                  : 'file-arrow-down'
+                          }
+                          className="w-5 text-xs"
                           style={{
                             color: item.color ?? 'var(--color-font)',
                           }}
                         />
                       </span>
-                      <Text slot="label" className='flex-1 truncate'>
+                      <Text slot="label" className="flex-1 truncate">
                         {item.name}
                       </Text>
-                      {isSelected && (
-                        <Icon
-                          icon="check"
-                          className="text-[--color-success] justify-self-end px-2"
-                        />
-                      )}
+                      {isSelected && <Icon icon="check" className="justify-self-end px-2 text-[--color-success]" />}
                     </Fragment>
                   )}
                 </ListBoxItem>
               )}
             </ListBox>
-            <div className='relative w-full h-full flex flex-col overflow-hidden flex-1'>
-              <Heading className='text-sm flex-shrink-0 h-7 font-bold text-[--hl] px-3 py-1 flex items-center gap-2 justify-between'>
+            <div className="relative flex h-full w-full flex-1 flex-col overflow-hidden">
+              <Heading className="flex h-7 flex-shrink-0 items-center justify-between gap-2 px-3 py-1 text-sm font-bold text-[--hl]">
                 <span>Collection Environments</span>
-                <Button onPress={onOpenEnvironmentSettingsModal} aria-label='Manage collection environments' className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] outline-none hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+                <Button
+                  onPress={onOpenEnvironmentSettingsModal}
+                  aria-label="Manage collection environments"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                >
                   <Icon icon="edit" />
                 </Button>
               </Heading>
               <ListBox
-                aria-label='Select a Collection Environment'
-                selectionMode='single'
+                aria-label="Select a Collection Environment"
+                selectionMode="single"
                 key={activeEnvironment._id}
                 items={collectionEnvironmentList}
                 selectedKeys={[activeEnvironment._id || baseEnvironment._id || '']}
@@ -247,16 +322,16 @@ export const EnvironmentPicker = ({
                     {
                       method: 'POST',
                       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/set-active`,
-                    }
+                    },
                   );
                   uiEventBus.emit('CHANGE_ACTIVE_ENV', workspaceId);
                 }}
-                className="p-2 select-none text-sm overflow-y-auto focus:outline-none"
+                className="select-none overflow-y-auto p-2 text-sm focus:outline-none"
               >
                 {item => (
                   <ListBoxItem
                     textValue={item.name}
-                    className={`truncate rounded flex gap-2 pr-1 items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none transition-colors ${item.isBase ? 'pl-[--padding-md]' : 'pl-8'}`}
+                    className={`text-md flex h-[--line-height-xs] w-full items-center gap-2 truncate whitespace-nowrap rounded bg-transparent pr-1 text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none ${item.isBase ? 'pl-[--padding-md]' : 'pl-8'}`}
                   >
                     {({ isSelected }) => (
                       <Fragment>
@@ -266,22 +341,25 @@ export const EnvironmentPicker = ({
                           }}
                         >
                           <Icon
-                            icon={item.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'}
-                            className='text-xs w-5'
+                            icon={
+                              item.isPrivate
+                                ? 'lock'
+                                : isUsingGitSync
+                                  ? ['fab', 'git-alt']
+                                  : isUsingInsomniaCloudSync
+                                    ? 'globe-americas'
+                                    : 'file-arrow-down'
+                            }
+                            className="w-5 text-xs"
                             style={{
                               color: item.color ?? 'var(--color-font)',
                             }}
                           />
                         </span>
-                        <Text slot="label" className='flex-1 truncate'>
+                        <Text slot="label" className="flex-1 truncate">
                           {item.name}
                         </Text>
-                        {isSelected && (
-                          <Icon
-                            icon="check"
-                            className="text-[--color-success] justify-self-end px-2"
-                          />
-                        )}
+                        {isSelected && <Icon icon="check" className="justify-self-end px-2 text-[--color-success]" />}
                       </Fragment>
                     )}
                   </ListBoxItem>
diff --git a/packages/insomnia/src/ui/components/error-boundary.tsx b/packages/insomnia/src/ui/components/error-boundary.tsx
index 512dc86f2a..aae3bb59e2 100644
--- a/packages/insomnia/src/ui/components/error-boundary.tsx
+++ b/packages/insomnia/src/ui/components/error-boundary.tsx
@@ -45,7 +45,8 @@ class SingleErrorBoundary extends PureComponent<Props, State> {
           title: 'Application Error',
           message: (
             <p>
-              Failed to render {componentName}. Please report the error to <a href="https://github.com/Kong/insomnia/issues">our GitHub Issues</a>
+              Failed to render {componentName}. Please report the error to{' '}
+              <a href="https://github.com/Kong/insomnia/issues">our GitHub Issues</a>
             </p>
           ),
         });
@@ -73,9 +74,5 @@ export const ErrorBoundary = (props: Props) => {
     return null;
   }
 
-  return (
-    <SingleErrorBoundary {...extraProps}>
-      {children}
-    </SingleErrorBoundary>
-  );
+  return <SingleErrorBoundary {...extraProps}>{children}</SingleErrorBoundary>;
 };
diff --git a/packages/insomnia/src/ui/components/git-credentials/custom-repository-settings-form.tsx b/packages/insomnia/src/ui/components/git-credentials/custom-repository-settings-form.tsx
index 2b996baab5..f2a7b4511b 100644
--- a/packages/insomnia/src/ui/components/git-credentials/custom-repository-settings-form.tsx
+++ b/packages/insomnia/src/ui/components/git-credentials/custom-repository-settings-form.tsx
@@ -11,12 +11,13 @@ export interface Props {
   onSubmit: (args: Partial<GitRepository>) => void;
 }
 
-export const CustomRepositorySettingsFormGroup: FunctionComponent<Props> = ({
-  gitRepository,
-  onSubmit,
-}) => {
+export const CustomRepositorySettingsFormGroup: FunctionComponent<Props> = ({ gitRepository, onSubmit }) => {
   const linkIcon = <i className="fa fa-external-link-square" />;
-  const defaultValues = gitRepository || { uri: '', credentials: { username: '', token: '' }, author: { name: '', email: '' } };
+  const defaultValues = gitRepository || {
+    uri: '',
+    credentials: { username: '', token: '' },
+    author: { name: '', email: '' },
+  };
 
   const uri = defaultValues.uri;
   const author = defaultValues.author;
@@ -25,66 +26,67 @@ export const CustomRepositorySettingsFormGroup: FunctionComponent<Props> = ({
   return (
     <form
       id="custom"
-      className='flex flex-col gap-4'
+      className="flex flex-col gap-4"
       onSubmit={event => {
         event.preventDefault();
         const formData = new FormData(event.currentTarget);
         onSubmit({
-          uri: formData.get('uri') as string || '',
+          uri: (formData.get('uri') as string) || '',
           credentials: {
-            username: formData.get('username') as string || '',
-            token: formData.get('token') as string || '',
+            username: (formData.get('username') as string) || '',
+            token: (formData.get('token') as string) || '',
           },
           author: {
-            name: formData.get('authorName') as string || '',
-            email: formData.get('authorEmail') as string || '',
+            name: (formData.get('authorName') as string) || '',
+            email: (formData.get('authorEmail') as string) || '',
           },
         });
       }}
     >
-      <TextField name="uri" className="flex flex-col w-full gap-1 px-0.5" isRequired>
-        <Label className='text-start text-sm font-semibold'>Git URI (https, including .git suffix)</Label>
+      <TextField name="uri" className="flex w-full flex-col gap-1 px-0.5" isRequired>
+        <Label className="text-start text-sm font-semibold">Git URI (https, including .git suffix)</Label>
         <Input
           type="url"
           autoFocus
           defaultValue={uri}
           disabled={Boolean(uri)}
           placeholder="https://github.com/org/repo.git"
-          className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors placeholder:text-sm"
+          className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:text-sm placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
         />
       </TextField>
-      <div className='flex items-center justify-between gap-2'>
-        <TextField name="authorName" className="flex flex-col w-full gap-1 px-0.5" isRequired>
-          <Label className='text-start text-sm font-semibold'>Author Name</Label>
+      <div className="flex items-center justify-between gap-2">
+        <TextField name="authorName" className="flex w-full flex-col gap-1 px-0.5" isRequired>
+          <Label className="text-start text-sm font-semibold">Author Name</Label>
           <Input
             placeholder="Name"
             disabled={Boolean(uri)}
             defaultValue={author?.name}
-            className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors placeholder:text-sm"
+            className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:text-sm placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
           />
         </TextField>
-        <TextField name="authorName" className="flex flex-col w-full gap-1 px-0.5" isRequired>
-          <Label className='text-start text-sm font-semibold'>Author Name</Label>
+        <TextField name="authorName" className="flex w-full flex-col gap-1 px-0.5" isRequired>
+          <Label className="text-start text-sm font-semibold">Author Name</Label>
           <Input
             placeholder="Name"
             disabled={Boolean(uri)}
             defaultValue={author?.name}
-            className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors placeholder:text-sm"
+            className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:text-sm placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
           />
         </TextField>
       </div>
-      <div className='flex items-center justify-between gap-2'>
-        <TextField name="username" className="flex flex-col w-full gap-1 px-0.5" isRequired>
-          <Label className='text-start text-sm font-semibold'>Username</Label>
+      <div className="flex items-center justify-between gap-2">
+        <TextField name="username" className="flex w-full flex-col gap-1 px-0.5" isRequired>
+          <Label className="text-start text-sm font-semibold">Username</Label>
           <Input
             placeholder="MyUser"
             disabled={Boolean(uri)}
             defaultValue={credentials?.username}
-            className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors placeholder:text-sm"
+            className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:text-sm placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
           />
         </TextField>
-        <TextField name="token" className="flex flex-col w-full gap-1 px-0.5" isRequired>
-          <Label className='text-start text-sm font-semibold'>Authentication Token
+        <TextField name="token" className="flex w-full flex-col gap-1 px-0.5" isRequired>
+          <Label className="text-start text-sm font-semibold">
+            Authentication Token
             <HelpTooltip className="space-left">
               Create a personal access token
               <br />
@@ -94,20 +96,17 @@ export const CustomRepositorySettingsFormGroup: FunctionComponent<Props> = ({
               {' | '}
               <Link href={docsGitAccessToken.bitbucket}>Bitbucket {linkIcon}</Link>
               {' | '}
-              <Link href={docsGitAccessToken.bitbucketServer}>
-                Bitbucket Server {linkIcon}
-              </Link>
+              <Link href={docsGitAccessToken.bitbucketServer}>Bitbucket Server {linkIcon}</Link>
               {' | '}
-              <Link href={docsGitAccessToken.azureDevOps}>
-                Azure DevOps {linkIcon}
-              </Link>
-            </HelpTooltip></Label>
+              <Link href={docsGitAccessToken.azureDevOps}>Azure DevOps {linkIcon}</Link>
+            </HelpTooltip>
+          </Label>
           <Input
             type="password"
             disabled={Boolean(uri)}
             defaultValue={'token' in credentials ? credentials?.token : ''}
             placeholder="88e7ee63b254e4b0bf047559eafe86ba9dd49507"
-            className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors placeholder:text-sm"
+            className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:text-sm placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
           />
         </TextField>
       </div>
diff --git a/packages/insomnia/src/ui/components/git-credentials/github-repository-select.tsx b/packages/insomnia/src/ui/components/git-credentials/github-repository-select.tsx
index 354b4c6cb2..68c0c463e8 100644
--- a/packages/insomnia/src/ui/components/git-credentials/github-repository-select.tsx
+++ b/packages/insomnia/src/ui/components/git-credentials/github-repository-select.tsx
@@ -10,11 +10,7 @@ import { Button } from '../themed-button';
 
 type GitHubRepository = Awaited<ReturnType<typeof window.main.git.getGitHubRepositories>>['repos'][number];
 
-export const GitHubRepositorySelect = (
-  { uri, token }: {
-    uri?: string;
-    token: string;
-  }) => {
+export const GitHubRepositorySelect = ({ uri, token }: { uri?: string; token: string }) => {
   const [loading, setLoading] = useState(false);
   const [repositories, setRepositories] = useState<GitHubRepository[]>([]);
   const [selectedRepository, setSelectedRepository] = useState<GitHubRepository | null>(null);
@@ -46,7 +42,7 @@ export const GitHubRepositorySelect = (
       setCannotFindRepository(false);
       return;
     }
-    if ((!selectedRepository) && token && isGitHubAppUserToken(token)) {
+    if (!selectedRepository && token && isGitHubAppUserToken(token)) {
       (async function getRepository() {
         const { repo, errors, notFound } = await window.main.git.getGitHubRepository({ uri });
         setCannotFindRepository(notFound);
@@ -57,9 +53,13 @@ export const GitHubRepositorySelect = (
 
   return (
     <div className="flex flex-col">
-      <span className="font-semibold flex gap-1 text-sm">Repository</span>
-      {uri && <div className='form-control form-control--outlined'><input className="form-control" disabled defaultValue={uri} /></div>}
-      {!uri &&
+      <span className="flex gap-1 text-sm font-semibold">Repository</span>
+      {uri && (
+        <div className="form-control form-control--outlined">
+          <input className="form-control" disabled defaultValue={uri} />
+        </div>
+      )}
+      {!uri && (
         <>
           <div className="flex flex-row items-center gap-2 py-2">
             <ComboBox
@@ -71,24 +71,37 @@ export const GitHubRepositorySelect = (
                 id: repo.clone_url,
                 name: repo.full_name,
               }))}
-              onSelectionChange={(key => setSelectedRepository(repositories.find(r => r.clone_url === key) || null))}
+              onSelectionChange={key => setSelectedRepository(repositories.find(r => r.clone_url === key) || null)}
             >
-              <div className='flex items-center gap-2 group rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors'>
-                <Input aria-label='Repository Search' placeholder={loading ? 'Fetching...' : 'Find a repository...'} className="py-1 placeholder:italic w-full pl-2 pr-7 " />
-                <ComboButton id="github_repo_select_dropdown_button" type="button" className="!border-none m-2 aspect-square gap-2 truncate flex items-center justify-center aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-                  <Icon icon="caret-down" className='w-5 flex-shrink-0' />
+              <div className="group flex items-center gap-2 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]">
+                <Input
+                  aria-label="Repository Search"
+                  placeholder={loading ? 'Fetching...' : 'Find a repository...'}
+                  className="w-full py-1 pl-2 pr-7 placeholder:italic"
+                />
+                <ComboButton
+                  id="github_repo_select_dropdown_button"
+                  type="button"
+                  className="m-2 flex aspect-square items-center justify-center gap-2 truncate rounded-sm !border-none text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                >
+                  <Icon icon="caret-down" className="w-5 flex-shrink-0" />
                 </ComboButton>
               </div>
-              <Popover className="w-[--trigger-width] min-w-max border grid grid-flow-col overflow-y-auto divide-x divide-solid divide-[--hl-md] select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] rounded-md focus:outline-none" placement='bottom start' offset={8}>
-                <ListBox<{ id: string; name: string }>
-                  className="select-none text-sm min-w-max p-2 flex flex-col focus:outline-none"
-                >
+              <Popover
+                className="grid w-[--trigger-width] min-w-max select-none grid-flow-col divide-x divide-solid divide-[--hl-md] overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] text-sm shadow-lg focus:outline-none"
+                placement="bottom start"
+                offset={8}
+              >
+                <ListBox<{
+                  id: string;
+                  name: string;
+                }> className="flex min-w-max select-none flex-col p-2 text-sm focus:outline-none">
                   {item => (
                     <ListBoxItem
                       textValue={item.name}
-                      className="aria-disabled:opacity-30 aria-selected:bg-[--hl-sm] rounded aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] data-[focused]:bg-[--hl-xs] focus:outline-none transition-colors"
+                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap rounded bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:bg-[--hl-sm] aria-selected:font-bold data-[focused]:bg-[--hl-xs]"
                     >
-                      <span className='truncate'>{item.name}</span>
+                      <span className="truncate">{item.name}</span>
                     </ListBoxItem>
                   )}
                 </ListBox>
@@ -98,7 +111,7 @@ export const GitHubRepositorySelect = (
             <Button
               type="button"
               disabled={loading}
-              className='border border-solid border-[--hl-sm] !p-0 m-2 aspect-square gap-2 truncate flex items-center justify-center aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+              className="m-2 flex aspect-square items-center justify-center gap-2 truncate rounded-sm border border-solid border-[--hl-sm] !p-0 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               aria-label="Refresh repositories"
               onClick={() => {
                 setLoading(true);
@@ -108,14 +121,30 @@ export const GitHubRepositorySelect = (
               <Icon icon="refresh" className={loading ? 'animate-spin' : ''} />
             </Button>
           </div>
-          {isGitHubAppUserToken(token) &&
+          {isGitHubAppUserToken(token) && (
             <div className={`flex gap-1 text-sm ${loading ? 'opacity-40' : ''}`}>
               Can't find a repository?
-              <a className="text-purple-500 flex items-center gap-1" href={`${getAppWebsiteBaseURL()}/oauth/github-app`}>Configure the App <i className="fa-solid fa-up-right-from-square" /></a>
-            </div>}
-        </>}
-      {cannotFindRepository && <div className="text-sm text-red-500"><Icon icon="warning" /> Repository information could not be retrieved. Please <code>Reset</code> and select a different repository.</div>}
-      {selectedRepository !== null && !selectedRepository.permissions.push && <div className="text-sm text-orange-500 mt-2"><Icon icon="warning" /> You do not have write access to this repository</div>}
+              <a
+                className="flex items-center gap-1 text-purple-500"
+                href={`${getAppWebsiteBaseURL()}/oauth/github-app`}
+              >
+                Configure the App <i className="fa-solid fa-up-right-from-square" />
+              </a>
+            </div>
+          )}
+        </>
+      )}
+      {cannotFindRepository && (
+        <div className="text-sm text-red-500">
+          <Icon icon="warning" /> Repository information could not be retrieved. Please <code>Reset</code> and select a
+          different repository.
+        </div>
+      )}
+      {selectedRepository !== null && !selectedRepository.permissions.push && (
+        <div className="mt-2 text-sm text-orange-500">
+          <Icon icon="warning" /> You do not have write access to this repository
+        </div>
+      )}
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/git-credentials/github-repository-settings-form.tsx b/packages/insomnia/src/ui/components/git-credentials/github-repository-settings-form.tsx
index 7f386e5a67..400a48d022 100644
--- a/packages/insomnia/src/ui/components/git-credentials/github-repository-settings-form.tsx
+++ b/packages/insomnia/src/ui/components/git-credentials/github-repository-settings-form.tsx
@@ -28,13 +28,7 @@ export const GitHubRepositorySetupFormGroup = (props: Props) => {
     return <GitHubSignInForm />;
   }
 
-  return (
-    <GitHubRepositoryForm
-      uri={uri}
-      onSubmit={onSubmit}
-      credentials={credentials}
-    />
-  );
+  return <GitHubRepositoryForm uri={uri} onSubmit={onSubmit} credentials={credentials} />;
 };
 
 const Avatar = ({ src }: { src: string }) => {
@@ -62,11 +56,7 @@ const Avatar = ({ src }: { src: string }) => {
     };
   }, [src]);
 
-  return imageSrc ? (
-    <img src={imageSrc} className="rounded-full w-10 h-10" />
-  ) : (
-    <i className="fas fa-user-circle" />
-  );
+  return imageSrc ? <img src={imageSrc} className="h-10 w-10 rounded-full" /> : <i className="fas fa-user-circle" />;
 };
 
 interface GitHubRepositoryFormProps {
@@ -75,11 +65,7 @@ interface GitHubRepositoryFormProps {
   credentials: GitCredentials;
 }
 
-const GitHubRepositoryForm = ({
-  uri,
-  credentials,
-  onSubmit,
-}: GitHubRepositoryFormProps) => {
+const GitHubRepositoryForm = ({ uri, credentials, onSubmit }: GitHubRepositoryFormProps) => {
   const [error, setError] = useState('');
   const signOutFetcher = useFetcher();
 
@@ -106,16 +92,12 @@ const GitHubRepositoryForm = ({
         });
       }}
     >
-      <div className='flex items-center justify-between border border-solid border-[--hl-sm] rounded-sm py-1 px-3'>
-        <div className="flex gap-3 items-center">
+      <div className="flex items-center justify-between rounded-sm border border-solid border-[--hl-sm] px-3 py-1">
+        <div className="flex items-center gap-3">
           <Avatar src={credentials.author.avatarUrl ?? ''} />
           <div className="flex flex-col items-start">
-            <span className='font-semibold'>
-              {credentials.author.name}
-            </span>
-            <span className='text-sm text-[--hl]'>
-              {credentials.author.email || 'Signed in'}
-            </span>
+            <span className="font-semibold">{credentials.author.name}</span>
+            <span className="text-sm text-[--hl]">{credentials.author.email || 'Signed in'}</span>
           </div>
         </div>
         <Button
@@ -155,9 +137,7 @@ const GitHubSignInForm = () => {
   const completeSignInFetcher = useFetcher();
 
   return (
-    <div
-      className='flex items-center justify-center flex-col border border-solid border-[--hl-sm] p-4'
-    >
+    <div className="flex flex-col items-center justify-center border border-solid border-[--hl-sm] p-4">
       <Button
         className="flex items-center gap-2 disabled:opacity-100"
         type="button"
@@ -195,17 +175,24 @@ const GitHubSignInForm = () => {
                 return;
               }
 
-              completeSignInFetcher.submit({ code, state }, { action: '/git-credentials/github/complete-sign-in', method: 'POST', encType: 'application/json' });
+              completeSignInFetcher.submit(
+                { code, state },
+                { action: '/git-credentials/github/complete-sign-in', method: 'POST', encType: 'application/json' },
+              );
             }
           }}
         >
           <label className="form-control form-control--outlined">
-            <div>
-              If you aren't redirected to the app you can manually paste the authentication url here:
-            </div>
+            <div>If you aren't redirected to the app you can manually paste the authentication url here:</div>
             <div className="form-row">
               <input name="link" />
-              <Button type="submit" name="add-token" className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">Authenticate</Button>
+              <Button
+                type="submit"
+                name="add-token"
+                className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
+              >
+                Authenticate
+              </Button>
             </div>
           </label>
           {error && (
diff --git a/packages/insomnia/src/ui/components/git-credentials/gitlab-repository-settings-form.tsx b/packages/insomnia/src/ui/components/git-credentials/gitlab-repository-settings-form.tsx
index 328236db87..252468f938 100644
--- a/packages/insomnia/src/ui/components/git-credentials/gitlab-repository-settings-form.tsx
+++ b/packages/insomnia/src/ui/components/git-credentials/gitlab-repository-settings-form.tsx
@@ -28,13 +28,7 @@ export const GitLabRepositorySetupFormGroup = (props: Props) => {
     return <GitLabSignInForm />;
   }
 
-  return (
-    <GitLabRepositoryForm
-      uri={uri}
-      onSubmit={onSubmit}
-      credentials={credentials}
-    />
-  );
+  return <GitLabRepositoryForm uri={uri} onSubmit={onSubmit} credentials={credentials} />;
 };
 
 const Avatar = ({ src }: { src: string }) => {
@@ -62,11 +56,7 @@ const Avatar = ({ src }: { src: string }) => {
     };
   }, [src]);
 
-  return imageSrc ? (
-    <img src={imageSrc} className="rounded-full w-10 h-10" />
-  ) : (
-    <i className="fas fa-user-circle" />
-  );
+  return imageSrc ? <img src={imageSrc} className="h-10 w-10 rounded-full" /> : <i className="fas fa-user-circle" />;
 };
 
 interface GitLabRepositoryFormProps {
@@ -75,11 +65,7 @@ interface GitLabRepositoryFormProps {
   credentials: GitCredentials;
 }
 
-const GitLabRepositoryForm = ({
-  uri,
-  credentials,
-  onSubmit,
-}: GitLabRepositoryFormProps) => {
+const GitLabRepositoryForm = ({ uri, credentials, onSubmit }: GitLabRepositoryFormProps) => {
   const [error, setError] = useState('');
 
   const signOutFetcher = useFetcher();
@@ -104,16 +90,12 @@ const GitLabRepositoryForm = ({
         });
       }}
     >
-      <div className='flex items-center justify-between border border-solid border-[--hl-sm] rounded-sm py-1 px-3'>
-        <div className="flex gap-3 items-center">
+      <div className="flex items-center justify-between rounded-sm border border-solid border-[--hl-sm] px-3 py-1">
+        <div className="flex items-center gap-3">
           <Avatar src={credentials.author.avatarUrl ?? ''} />
-          <div className='flex flex-col items-start'>
-            <span className='font-semibold'>
-              {credentials.author.name}
-            </span>
-            <span className='text-sm text-[--hl]'>
-              {credentials.author.email || 'Signed in'}
-            </span>
+          <div className="flex flex-col items-start">
+            <span className="font-semibold">{credentials.author.name}</span>
+            <span className="text-sm text-[--hl]">{credentials.author.email || 'Signed in'}</span>
           </div>
         </div>
         <Button
@@ -133,14 +115,14 @@ const GitLabRepositoryForm = ({
           Sign out
         </Button>
       </div>
-      <TextField autoFocus name="uri" className="flex flex-col w-full gap-1 px-0.5" isRequired>
-        <Label className='text-start text-sm font-semibold'>Git URI (https, including .git suffix)</Label>
+      <TextField autoFocus name="uri" className="flex w-full flex-col gap-1 px-0.5" isRequired>
+        <Label className="text-start text-sm font-semibold">Git URI (https, including .git suffix)</Label>
         <Input
           type="url"
           defaultValue={uri}
           disabled={Boolean(uri)}
           placeholder="https://github.com/org/repo.git"
-          className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors placeholder:text-sm"
+          className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:text-sm placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
         />
       </TextField>
       {error && (
@@ -162,9 +144,7 @@ const GitLabSignInForm = () => {
   const completeSignInFetcher = useFetcher();
 
   return (
-    <div
-      className='flex items-center justify-center flex-col border border-solid border-[--hl-sm] p-4'
-    >
+    <div className="flex flex-col items-center justify-center border border-solid border-[--hl-sm] p-4">
       <Button
         className="flex items-center gap-2 disabled:opacity-100"
         type="button"
@@ -202,18 +182,24 @@ const GitLabSignInForm = () => {
                 return;
               }
 
-              completeSignInFetcher.submit({ code, state }, { action: '/git-credentials/gitlab/complete-sign-in', method: 'POST', encType: 'application/json' });
+              completeSignInFetcher.submit(
+                { code, state },
+                { action: '/git-credentials/gitlab/complete-sign-in', method: 'POST', encType: 'application/json' },
+              );
             }
           }}
         >
           <label className="form-control form-control--outlined">
-            <div>
-              If you aren't redirected to the app you can manually paste your
-              code here:
-            </div>
+            <div>If you aren't redirected to the app you can manually paste your code here:</div>
             <div className="form-row">
               <input name="link" />
-              <Button type="submit" name="add-token" className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">Authenticate</Button>
+              <Button
+                type="submit"
+                name="add-token"
+                className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
+              >
+                Authenticate
+              </Button>
             </div>
           </label>
           {error && (
diff --git a/packages/insomnia/src/ui/components/github-app-config-link.tsx b/packages/insomnia/src/ui/components/github-app-config-link.tsx
index e38ca59df7..f9f51c1349 100644
--- a/packages/insomnia/src/ui/components/github-app-config-link.tsx
+++ b/packages/insomnia/src/ui/components/github-app-config-link.tsx
@@ -16,7 +16,23 @@ export function isGitHubAppUserToken(token?: string) {
 }
 
 export const ConfigLink = ({ small = false, gitRepository = null, errors = [] }: ConfigLinkProps) => {
-  const show = gitRepository?.credentials && 'oauth2format' in gitRepository.credentials && getOauth2FormatName(gitRepository?.credentials) === 'github' && isGitHubAppUserToken(gitRepository?.credentials.token) && errors && errors?.length > 0 && errors[0].startsWith('HTTP Error: 40');
+  const show =
+    gitRepository?.credentials &&
+    'oauth2format' in gitRepository.credentials &&
+    getOauth2FormatName(gitRepository?.credentials) === 'github' &&
+    isGitHubAppUserToken(gitRepository?.credentials.token) &&
+    errors &&
+    errors?.length > 0 &&
+    errors[0].startsWith('HTTP Error: 40');
 
-  return show && <p className={`text-${small ? 'sm' : 'md'}`}>You may need to <a className="underline text-purple-500" href={`${getAppWebsiteBaseURL()}/oauth/github-app`}>Configure the App <i className="fa-solid fa-up-right-from-square" /></a></p>;
+  return (
+    show && (
+      <p className={`text-${small ? 'sm' : 'md'}`}>
+        You may need to{' '}
+        <a className="text-purple-500 underline" href={`${getAppWebsiteBaseURL()}/oauth/github-app`}>
+          Configure the App <i className="fa-solid fa-up-right-from-square" />
+        </a>
+      </p>
+    )
+  );
 };
diff --git a/packages/insomnia/src/ui/components/github-stars-button.tsx b/packages/insomnia/src/ui/components/github-stars-button.tsx
index 0d9438cc02..b30c9bdfcf 100644
--- a/packages/insomnia/src/ui/components/github-stars-button.tsx
+++ b/packages/insomnia/src/ui/components/github-stars-button.tsx
@@ -72,11 +72,11 @@ export const GitHubStarsButton = () => {
   const shouldShowCount = !error;
 
   return (
-    <div className="flex select-none rounded-lg divide-x divide-[--hl-md] divide-solid border border-solid border-[--hl-md]">
+    <div className="flex select-none divide-x divide-solid divide-[--hl-md] rounded-lg border border-solid border-[--hl-md]">
       <Link onPress={starClick}>
         <a
           href="https://github.com/Kong/insomnia"
-          className="px-4 py-1 rounded-l-lg last-of-type:rounded-r-lg outline-none flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="flex items-center justify-center gap-2 rounded-l-lg px-4 py-1 text-sm text-[--color-font] outline-none ring-transparent transition-all last-of-type:rounded-r-lg hover:bg-[--hl-xs] focus:ring-1 focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
           <Icon icon={['fab', 'github']} />
           Star
@@ -86,7 +86,7 @@ export const GitHubStarsButton = () => {
         <Link onPress={counterClick}>
           <a
             href="https://github.com/Kong/insomnia/stargazers"
-            className="px-4 py-1 rounded-r-lg outline-none flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex items-center justify-center gap-2 rounded-r-lg px-4 py-1 text-sm text-[--color-font] outline-none ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-1 focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           >
             {starCount.toLocaleString()}
           </a>
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-default-value.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-default-value.tsx
index d295076932..1444192666 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-default-value.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-default-value.tsx
@@ -15,8 +15,7 @@ export const GraphQLDefaultValue: FC<Props> = memo(({ field }) => {
     const strDefault = ast ? print(ast) : '';
     return <span className="success">{` = ${strDefault}`}</span>;
   }
-    return null;
-
+  return null;
 });
 
 GraphQLDefaultValue.displayName = 'GraphQLDefaultValue';
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-arg-links.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-arg-links.tsx
index 9bce29a874..b556c8608b 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-arg-links.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-arg-links.tsx
@@ -10,23 +10,23 @@ interface Props {
   onNavigate: (type: GraphQLType) => void;
 }
 
-export const GraphQLExplorerArgLinks: FC<Props> = ({
-  args,
-  onNavigate,
-}) => <>
-  {args ? args.map(a => (
-    <div key={a.name} className="graphql-explorer__defs__arg">
-      <span className="info">{a.name}</span>:{' '}
-      <GraphQLExplorerTypeLink onNavigate={onNavigate} type={a.type} />
-      {a.deprecationReason && (
-        <Tooltip
-          message={`The argument "${a.name}" is deprecated. ${a.deprecationReason}`}
-          position="bottom"
-          delay={1000}
-        >
-          <SvgIcon icon="warning" />
-        </Tooltip>
-      )}
-    </div>
-  )) : null}
-</>;
+export const GraphQLExplorerArgLinks: FC<Props> = ({ args, onNavigate }) => (
+  <>
+    {args
+      ? args.map(a => (
+          <div key={a.name} className="graphql-explorer__defs__arg">
+            <span className="info">{a.name}</span>: <GraphQLExplorerTypeLink onNavigate={onNavigate} type={a.type} />
+            {a.deprecationReason && (
+              <Tooltip
+                message={`The argument "${a.name}" is deprecated. ${a.deprecationReason}`}
+                position="bottom"
+                delay={1000}
+              >
+                <SvgIcon icon="warning" />
+              </Tooltip>
+            )}
+          </div>
+        ))
+      : null}
+  </>
+);
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-enum.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-enum.tsx
index f989696770..89e2d803b3 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-enum.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-enum.tsx
@@ -21,7 +21,9 @@ export const GraphQLExplorerEnum: FC<Props> = ({ type }) => {
             <span className="selectable bold">{value.name}</span>
             <div className="graphql-explorer__defs__description">
               <MarkdownPreview
-                markdown={value.description || `This is a long paragraph that is a description for the enum value ${value.name}`}
+                markdown={
+                  value.description || `This is a long paragraph that is a description for the enum value ${value.name}`
+                }
               />
             </div>
           </li>
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-field-link.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-field-link.tsx
index b8a602eaff..83ace16e43 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-field-link.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-field-link.tsx
@@ -7,24 +7,20 @@ interface Props {
   field: GraphQLFieldWithParentName;
 }
 
-export const GraphQLExplorerFieldLink: FC<Props> = ({
-  field,
-  onNavigate,
-}) => {
+export const GraphQLExplorerFieldLink: FC<Props> = ({ field, onNavigate }) => {
   const { name, parentName } = field;
 
-  const handleClick = useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    onNavigate(field);
-  }, [onNavigate, field]);
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      onNavigate(field);
+    },
+    [onNavigate, field],
+  );
   return (
     <Fragment>
       {parentName ? <span>{parentName}.</span> : null}
-      <a
-        href="#"
-        onClick={handleClick}
-        className="success"
-      >
+      <a href="#" onClick={handleClick} className="success">
         {name}
       </a>
     </Fragment>
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-fields-list.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-fields-list.tsx
index 15914d6c1f..e6c973fa69 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-fields-list.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-fields-list.tsx
@@ -47,9 +47,5 @@ export const GraphQLExplorerFieldsList: FC<Props> = ({ fields, onNavigateType, o
     );
   });
 
-  return (
-    <ul className="graphql-explorer__defs">
-      {fieldsList}
-    </ul>
-  );
+  return <ul className="graphql-explorer__defs">{fieldsList}</ul>;
 };
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-schema.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-schema.tsx
index d76cb4021e..ce4b9262b0 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-schema.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-schema.tsx
@@ -19,8 +19,7 @@ export class GraphQLExplorerSchema extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <span className="success">query</span>:{' '}
-        <GraphQLExplorerTypeLink onNavigate={onNavigateType} type={type} />
+        <span className="success">query</span>: <GraphQLExplorerTypeLink onNavigate={onNavigateType} type={type} />
       </Fragment>
     );
   }
@@ -35,8 +34,7 @@ export class GraphQLExplorerSchema extends PureComponent<Props> {
 
     return (
       <Fragment>
-        <span className="success">mutation</span>:{' '}
-        <GraphQLExplorerTypeLink onNavigate={onNavigateType} type={type} />
+        <span className="success">mutation</span>: <GraphQLExplorerTypeLink onNavigate={onNavigateType} type={type} />
       </Fragment>
     );
   }
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-search-results.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-search-results.tsx
index dabe281ce1..98edf885a1 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-search-results.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-search-results.tsx
@@ -56,9 +56,9 @@ export class GraphQLExplorerSearchResults extends PureComponent<Props, State> {
     const { schema, filter } = this.props;
     const typeMap = schema.getTypeMap();
 
-    const types = Object
-      .values(typeMap)
-      .filter(({ name }) => Boolean(fuzzyMatch(filter, name, { splitSpace: true, loose: true })));
+    const types = Object.values(typeMap).filter(({ name }) =>
+      Boolean(fuzzyMatch(filter, name, { splitSpace: true, loose: true })),
+    );
 
     return types;
   }
@@ -72,10 +72,13 @@ export class GraphQLExplorerSearchResults extends PureComponent<Props, State> {
       }
 
       const fields: GraphQLFieldWithOptionalArgs[] = type.getFields();
-      const relevantFields: GraphQLFieldWithParentName[] = Object
-        .values(fields)
+      const relevantFields: GraphQLFieldWithParentName[] = Object.values(fields)
         // Fuzzy match on field.name and field.args[*].name
-        .filter(({ name, args }) => Boolean(fuzzyMatchAll(filter, [name, ...(args?.map(arg => arg.name) || [])], { splitSpace: true, loose: true })))
+        .filter(({ name, args }) =>
+          Boolean(
+            fuzzyMatchAll(filter, [name, ...(args?.map(arg => arg.name) || [])], { splitSpace: true, loose: true }),
+          ),
+        )
         .map(field => ({ ...field, parentName: type.name }));
       return [...acc, ...relevantFields];
     }, []);
@@ -107,7 +110,9 @@ export class GraphQLExplorerSearchResults extends PureComponent<Props, State> {
           <a
             href="#"
             className="surprise"
-            onClick={() => this.setState(({ displayedTypeBatches: oldValue }) => ({ displayedTypeBatches: oldValue + 1 }))}
+            onClick={() =>
+              this.setState(({ displayedTypeBatches: oldValue }) => ({ displayedTypeBatches: oldValue + 1 }))
+            }
           >
             And {numberOfAllTypes - numberOfTypesToRender} more types found... Click here to show {BATCH_SIZE} more.
           </a>
@@ -138,7 +143,9 @@ export class GraphQLExplorerSearchResults extends PureComponent<Props, State> {
           <a
             href="#"
             className="surprise"
-            onClick={() => this.setState(({ displayedFieldBatches: oldValue }) => ({ displayedFieldBatches: oldValue + 1 }))}
+            onClick={() =>
+              this.setState(({ displayedFieldBatches: oldValue }) => ({ displayedFieldBatches: oldValue + 1 }))
+            }
           >
             And {numberOfAllFields - numberOfFieldsToRender} more fields found... Click here to show {BATCH_SIZE} more.
           </a>
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type-link.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type-link.tsx
index 048df3ed61..d46a208593 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type-link.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type-link.tsx
@@ -7,10 +7,13 @@ interface Props {
 }
 
 export const GraphQLExplorerTypeLink: FC<Props> = ({ type, onNavigate }) => {
-  const _handleClick = useCallback((event: React.MouseEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
-    onNavigate(type);
-  }, [onNavigate, type]);
+  const _handleClick = useCallback(
+    (event: React.MouseEvent<HTMLAnchorElement>) => {
+      event.preventDefault();
+      onNavigate(type);
+    },
+    [onNavigate, type],
+  );
 
   if (type instanceof GraphQLList) {
     return (
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type.tsx
index e8015bec34..c71eb05f91 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer-type.tsx
@@ -1,4 +1,4 @@
-import type { GraphQLSchema} from 'graphql';
+import type { GraphQLSchema } from 'graphql';
 import { GraphQLInterfaceType, GraphQLObjectType, type GraphQLType, GraphQLUnionType } from 'graphql';
 import React, { type FC, Fragment } from 'react';
 
@@ -38,7 +38,7 @@ export const GraphQLExplorerType: FC<Props> = ({ schema, type, onNavigateType, o
     return [];
   };
 
-  const markdown = ('description' in type) ? (type.description || '') : '*no description*';
+  const markdown = 'description' in type ? type.description || '' : '*no description*';
 
   const types = getTypes();
   const hasSchemaAndTypes = schema && types.length;
@@ -50,7 +50,7 @@ export const GraphQLExplorerType: FC<Props> = ({ schema, type, onNavigateType, o
   return (
     <div className="graphql-explorer__type">
       <MarkdownPreview markdown={markdown} />
-      {hasSchemaAndTypes ?
+      {hasSchemaAndTypes ? (
         <Fragment>
           <h2 className="graphql-explorer__subheading">{title}</h2>
           <ul className="graphql-explorer__defs">
@@ -61,17 +61,17 @@ export const GraphQLExplorerType: FC<Props> = ({ schema, type, onNavigateType, o
             ))}
           </ul>
         </Fragment>
-        : null}
-      {sortedFields.length
-        ? (<Fragment>
+      ) : null}
+      {sortedFields.length ? (
+        <Fragment>
           <h2 className="graphql-explorer__subheading">Fields</h2>
           <GraphQLExplorerFieldsList
             fields={sortedFields}
             onNavigateType={onNavigateType}
             onNavigateField={onNavigateField}
           />
-        </Fragment>)
-        : null}
+        </Fragment>
+      ) : null}
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer.tsx b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer.tsx
index 25807d7eac..cacc51872b 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer.tsx
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-explorer.tsx
@@ -1,5 +1,5 @@
 import { type SchemaReference } from 'codemirror-graphql/utils/SchemaReference';
-import type { GraphQLSchema} from 'graphql';
+import type { GraphQLSchema } from 'graphql';
 import { GraphQLEnumType, type GraphQLField, type GraphQLNamedType, type GraphQLType, isNamedType } from 'graphql';
 import React, { type FC, useCallback, useEffect, useRef, useState } from 'react';
 
@@ -29,13 +29,16 @@ function isSameFieldAndType(
   currentType?: GraphQLType | null,
   type?: GraphQLType | null,
   currentField?: GraphQLFieldWithParentName,
-  field?: GraphQLField<any, any, Record<string, any>>
+  field?: GraphQLField<any, any, Record<string, any>>,
 ) {
   // @TODO Simplify this function since it's hard to follow along
   const compare = <
     T extends GraphQLNamedType | GraphQLFieldWithParentName,
-    U extends GraphQLNamedType | GraphQLFieldWithParentName
-  >(a?: T, b?: U) => (!a && !b) || (a && b && a.name === b.name);
+    U extends GraphQLNamedType | GraphQLFieldWithParentName,
+  >(
+    a?: T,
+    b?: U,
+  ) => (!a && !b) || (a && b && a.name === b.name);
 
   if (!isNamedType(currentType)) {
     currentType = undefined;
@@ -69,7 +72,7 @@ interface State extends HistoryItem {
 }
 
 export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, reference }) => {
-  const [{ currentType, currentField, history, filter }, setState] = useState<State>({ history:[], filter: '' });
+  const [{ currentType, currentField, history, filter }, setState] = useState<State>({ history: [], filter: '' });
   const inputRef = useRef<HTMLInputElement>(null);
 
   const addToHistory = useCallback(({ currentType, currentField, history }: State) => {
@@ -91,12 +94,12 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
         return state;
       }
 
-      return ({
+      return {
         ...state,
         history: addToHistory(state),
         currentType: type,
         currentField: field,
-      });
+      };
     });
   }, [addToHistory, reference]);
 
@@ -121,12 +124,12 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
   const handlePopHistory = () => {
     setState(state => {
       const last = state.history[state.history.length - 1] || null;
-      return ({
+      return {
         ...state,
         history: state.history.slice(0, state.history.length - 1),
         currentType: last ? last.currentType : undefined,
         currentField: last ? last.currentField : undefined,
-      });
+      };
     });
   };
 
@@ -152,9 +155,7 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
   let child: JSX.Element | null = null;
 
   if (currentField) {
-    child = (
-      <GraphQLExplorerField onNavigateType={handleNavigateType} field={currentField} />
-    );
+    child = <GraphQLExplorerField onNavigateType={handleNavigateType} field={currentField} />;
   } else if (currentType && currentType instanceof GraphQLEnumType) {
     child = <GraphQLExplorerEnum type={currentType} />;
   } else if (currentType) {
@@ -183,7 +184,7 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
                 onClick={() => {
                   if (inputRef.current) {
                     inputRef.current.value = '';
-                    setState(state => ({ ...state, filter:'' }));
+                    setState(state => ({ ...state, filter: '' }));
                   }
                 }}
               >
@@ -200,10 +201,7 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
             onNavigateField={handleNavigateField}
           />
         ) : (
-          <GraphQLExplorerSchema
-            onNavigateType={handleNavigateType}
-            schema={schema}
-          />
+          <GraphQLExplorerSchema onNavigateType={handleNavigateType} schema={schema} />
         )}
       </>
     );
@@ -227,8 +225,8 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
   return (
     <div className="graphql-explorer theme--dialog">
       <div className="graphql-explorer__header">
-        {history.length ?
-          (<a
+        {history.length ? (
+          <a
             href="#"
             className="graphql-explorer__header__back-btn"
             onClick={event => {
@@ -237,24 +235,21 @@ export const GraphQLExplorer: FC<Props> = ({ schema, handleClose, visible, refer
             }}
           >
             <i className="fa--skinny fa fa-angle-left" /> {name}
-          </a>)
-          : typeOrField ?
-            (<a
-              href="#"
-              className="graphql-explorer__header__back-btn"
-              onClick={event => {
-                event.preventDefault();
-                handlePopHistory();
-              }}
-            >
-              <i className="fa--skinny fa fa-angle-left" /> Schema
-            </a>)
-            : null}
+          </a>
+        ) : typeOrField ? (
+          <a
+            href="#"
+            className="graphql-explorer__header__back-btn"
+            onClick={event => {
+              event.preventDefault();
+              handlePopHistory();
+            }}
+          >
+            <i className="fa--skinny fa fa-angle-left" /> Schema
+          </a>
+        ) : null}
         <h1>{fieldName || typeName || schemaName || 'Unknown'}</h1>
-        <button
-          className="btn btn--compact graphql-explorer__header__close-btn"
-          onClick={handleClose}
-        >
+        <button className="btn btn--compact graphql-explorer__header__close-btn" onClick={handleClose}>
           <i className="fa fa-close" />
         </button>
       </div>
diff --git a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-types.ts b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-types.ts
index 8c2e9599e6..7d675961ee 100644
--- a/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-types.ts
+++ b/packages/insomnia/src/ui/components/graph-ql-explorer/graph-ql-types.ts
@@ -4,9 +4,7 @@ import type { GraphQLField } from 'graphql';
 type GraphQLFieldAny = GraphQLField<any, any>;
 
 // It is possible for args to be undefined, but the exported type has it as required, so we override it here
-export type GraphQLFieldWithOptionalArgs =
-  & Omit<GraphQLFieldAny, 'args'>
-  & Partial<Pick<GraphQLFieldAny, 'args'>>;
+export type GraphQLFieldWithOptionalArgs = Omit<GraphQLFieldAny, 'args'> & Partial<Pick<GraphQLFieldAny, 'args'>>;
 
 export interface GraphQLFieldWithParentName extends GraphQLFieldWithOptionalArgs {
   parentName?: string;
diff --git a/packages/insomnia/src/ui/components/header-invite-button.tsx b/packages/insomnia/src/ui/components/header-invite-button.tsx
index 36d4c871fc..4ce75b5ef9 100644
--- a/packages/insomnia/src/ui/components/header-invite-button.tsx
+++ b/packages/insomnia/src/ui/components/header-invite-button.tsx
@@ -11,13 +11,11 @@ export const HeaderInviteButton = ({ className = '' }) => {
     <>
       <Button
         aria-label="Invite collaborators"
-        className={`${className} px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm`}
+        className={`${className} flex h-full items-center justify-center gap-2 rounded-md px-4 py-2 text-sm ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80`}
         onPress={() => setIsInviteModalOpen(true)}
       >
         <Icon icon="user-plus" />
-        <span className="truncate">
-          Invite
-        </span>
+        <span className="truncate">Invite</span>
       </Button>
       <InviteModalContainer
         {...{
diff --git a/packages/insomnia/src/ui/components/header-user-button.tsx b/packages/insomnia/src/ui/components/header-user-button.tsx
index 76cc8fabce..3f10c1326f 100644
--- a/packages/insomnia/src/ui/components/header-user-button.tsx
+++ b/packages/insomnia/src/ui/components/header-user-button.tsx
@@ -24,12 +24,7 @@ const formatCurrentPlanType = (type: PersonalPlanType) => {
   }
 };
 
-const UpgradeButton = ({
-  currentPlan,
-}: {
-  currentPlan: CurrentPlan;
-}) => {
-
+const UpgradeButton = ({ currentPlan }: { currentPlan: CurrentPlan }) => {
   // For the enterprise-member plan we don't show the upgrade button.
   if (currentPlan?.type === 'enterprise-member') {
     return null;
@@ -39,7 +34,7 @@ const UpgradeButton = ({
   if (['team', 'enterprise'].includes(currentPlan?.type || '')) {
     return (
       <a
-        className="px-4 text-[--color-font] hover:bg-[--hl-xs] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+        className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         href={'https://insomnia.rest/pricing/contact'}
       >
         {currentPlan?.type === 'enterprise' ? '+ Add more seats' : 'Upgrade'}
@@ -56,7 +51,7 @@ const UpgradeButton = ({
   return (
     <a
       href={getAppWebsiteBaseURL() + to}
-      className="px-4 text-[--color-font] hover:bg-[--hl-xs] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+      className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
     >
       Upgrade
     </a>
@@ -68,34 +63,28 @@ interface UserButtonProps {
   currentPlan?: CurrentPlan;
   isMinimal?: boolean;
 }
-export const HeaderUserButton = ({
-  user,
-  currentPlan,
-  isMinimal = false,
-}: UserButtonProps) => {
+export const HeaderUserButton = ({ user, currentPlan, isMinimal = false }: UserButtonProps) => {
   const logoutFetcher = useFetcher();
 
   return (
     <MenuTrigger>
-      <Button data-testid='user-dropdown' className="px-1 py-1 flex-shrink-0 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-        <Avatar
-          src={user.picture}
-          alt={user.name}
-        />
-        <span className="truncate">
-          {user.name}
-        </span>
-        <Icon className='w-4 pr-2' icon={isMinimal ? 'caret-up' : 'caret-down'} />
+      <Button
+        data-testid="user-dropdown"
+        className="flex flex-shrink-0 items-center justify-center gap-2 rounded-md px-1 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-sm]"
+      >
+        <Avatar src={user.picture} alt={user.name} />
+        <span className="truncate">{user.name}</span>
+        <Icon className="w-4 pr-2" icon={isMinimal ? 'caret-up' : 'caret-down'} />
       </Button>
-      <Popover className="min-w-max border select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none">
+      <Popover className="max-h-[85vh] min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none">
         {currentPlan && Boolean(currentPlan.type) && (
-          <div className='flex gap-2 justify-between items-center pb-2 px-[--padding-md] border-b border-solid border-[--hl-sm] text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap capitalize'>
+          <div className="text-md flex h-[--line-height-xs] w-full items-center justify-between gap-2 whitespace-nowrap border-b border-solid border-[--hl-sm] px-[--padding-md] pb-2 capitalize text-[--color-font]">
             <span>{currentPlan?.planName ?? formatCurrentPlanType(currentPlan.type)} Plan</span>
             <UpgradeButton currentPlan={currentPlan} />
           </div>
         )}
         <Menu
-          className='focus:outline-none'
+          className="focus:outline-none"
           onAction={action => {
             if (action === 'logout') {
               logoutFetcher.submit(
@@ -108,21 +97,17 @@ export const HeaderUserButton = ({
             }
 
             if (action === 'account-settings') {
-              window.main.openInBrowser(
-                `${getAppWebsiteBaseURL()}/app/settings/account`,
-              );
+              window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/settings/account`);
             }
 
             if (action === 'manage-organizations') {
-              window.main.openInBrowser(
-                `${getAppWebsiteBaseURL()}/app/dashboard/organizations`
-              );
+              window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/dashboard/organizations`);
             }
           }}
         >
           <MenuItem
             id="manage-organizations"
-            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+            className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
             aria-label="Manage organizations"
           >
             <Icon icon="users" />
@@ -130,7 +115,7 @@ export const HeaderUserButton = ({
           </MenuItem>
           <MenuItem
             id="account-settings"
-            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+            className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
             aria-label="Account settings"
           >
             <Icon icon="gear" />
@@ -138,7 +123,7 @@ export const HeaderUserButton = ({
           </MenuItem>
           <MenuItem
             id="logout"
-            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+            className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
             aria-label="logout"
           >
             <Icon icon="sign-out" />
diff --git a/packages/insomnia/src/ui/components/hotkey.tsx b/packages/insomnia/src/ui/components/hotkey.tsx
index f4bce3732d..8a8a84a436 100644
--- a/packages/insomnia/src/ui/components/hotkey.tsx
+++ b/packages/insomnia/src/ui/components/hotkey.tsx
@@ -47,14 +47,11 @@ export const Hotkey: FC<Props> = memo(({ keyCombination, keyBindings, className,
 
   const classes = {
     'font-normal': isMac(),
-    italic: isFallback,
+    'italic': isFallback,
   };
 
   return (
-    <kbd
-      className={classnames(className, classes)}
-      style={{ verticalAlign: 'middle' }}
-    >
+    <kbd className={classnames(className, classes)} style={{ verticalAlign: 'middle' }}>
       {display}
     </kbd>
   );
diff --git a/packages/insomnia/src/ui/components/icon.tsx b/packages/insomnia/src/ui/components/icon.tsx
index 3c50a3f90e..97ddfe404b 100644
--- a/packages/insomnia/src/ui/components/icon.tsx
+++ b/packages/insomnia/src/ui/components/icon.tsx
@@ -2,14 +2,9 @@ import { library } from '@fortawesome/fontawesome-svg-core';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fas } from '@fortawesome/free-solid-svg-icons';
-import {
-  FontAwesomeIcon,
-  type FontAwesomeIconProps,
-} from '@fortawesome/react-fontawesome';
+import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome';
 import React from 'react';
 
 library.add(fas, far, fab);
 
-export const Icon = (props: FontAwesomeIconProps) => (
-  <FontAwesomeIcon {...props} />
-);
+export const Icon = (props: FontAwesomeIconProps) => <FontAwesomeIcon {...props} />;
diff --git a/packages/insomnia/src/ui/components/insomnia-ai-icon.tsx b/packages/insomnia/src/ui/components/insomnia-ai-icon.tsx
index be0793fd28..2665abefac 100644
--- a/packages/insomnia/src/ui/components/insomnia-ai-icon.tsx
+++ b/packages/insomnia/src/ui/components/insomnia-ai-icon.tsx
@@ -2,9 +2,7 @@ import React from 'react';
 
 import { useAIContext } from '../context/app/ai-context';
 
-export const InsomniaAI = ({
-  ...props
-}: React.SVGProps<SVGSVGElement>) => {
+export const InsomniaAI = ({ ...props }: React.SVGProps<SVGSVGElement>) => {
   const { generating: loading } = useAIContext();
 
   return (
@@ -23,14 +21,7 @@ export const InsomniaAI = ({
         strokeLinejoin="round"
         d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zm8.446-7.189L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zm-1.365 11.852L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
       >
-        {loading && (
-          <animate
-            attributeName="opacity"
-            values="0.4;1;0.4"
-            dur="2s"
-            repeatCount="indefinite"
-          />
-        )}
+        {loading && <animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite" />}
       </path>
     </svg>
   );
diff --git a/packages/insomnia/src/ui/components/insomnia-icon.tsx b/packages/insomnia/src/ui/components/insomnia-icon.tsx
index 7c01b5ba9a..3cd75e9ec9 100644
--- a/packages/insomnia/src/ui/components/insomnia-icon.tsx
+++ b/packages/insomnia/src/ui/components/insomnia-icon.tsx
@@ -36,14 +36,7 @@ export const InsomniaLogo = ({
       fill="url(#_Linear1)"
       transform="translate(-448 -236) translate(448.128 232.136) scale(3.99198)"
     >
-      {loading && (
-        <animate
-          attributeName="opacity"
-          values="0.4;1;0.4"
-          dur="4s"
-          repeatCount="indefinite"
-        />
-      )}
+      {loading && <animate attributeName="opacity" values="0.4;1;0.4" dur="4s" repeatCount="indefinite" />}
     </path>
     <defs>
       <linearGradient
diff --git a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
index bd5881f203..c99656da67 100644
--- a/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
+++ b/packages/insomnia/src/ui/components/key-value-editor/key-value-editor.tsx
@@ -1,5 +1,17 @@
 import React, { type FC, Fragment, useCallback, useMemo } from 'react';
-import { Button, DropIndicator, ListBox, ListBoxItem, Menu, MenuItem, MenuTrigger, Popover, ToggleButton, Toolbar, useDragAndDrop } from 'react-aria-components';
+import {
+  Button,
+  DropIndicator,
+  ListBox,
+  ListBoxItem,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  ToggleButton,
+  Toolbar,
+  useDragAndDrop,
+} from 'react-aria-components';
 
 import { describeByteSize, generateId } from '../../../common/misc';
 import { useNunjucksEnabled } from '../../context/nunjucks/nunjucks-enabled-context';
@@ -64,20 +76,24 @@ export const KeyValueEditor: FC<Props> = ({
   const [showDescription, setShowDescription] = React.useState(false);
   const { enabled: nunjucksEnabled } = useNunjucksEnabled();
   let pairsListItems = useMemo(
-    () => pairs.length > 0 ? pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) : [createEmptyPair()],
+    () =>
+      pairs.length > 0 ? pairs.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) : [createEmptyPair()],
     // Ensure same array data will not generate different kvPairs to avoid flash issue
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [JSON.stringify(pairs)]
+    [JSON.stringify(pairs)],
   );
   const initialReadOnlyItems = readOnlyPairs?.map(pair => ({ ...pair, id: pair.id || generateId('pair') })) || [];
 
-  const upsertPair = useCallback(function upsertPair(pairsListItems: Pair[], pair: Pair) {
-    if (pairsListItems.find(item => item.id === pair.id)) {
-      onChange(pairsListItems.map(item => (item.id === pair.id ? pair : item)));
-    } else {
-      onChange([...pairsListItems, pair]);
-    }
-  }, [onChange]);
+  const upsertPair = useCallback(
+    function upsertPair(pairsListItems: Pair[], pair: Pair) {
+      if (pairsListItems.find(item => item.id === pair.id)) {
+        onChange(pairsListItems.map(item => (item.id === pair.id ? pair : item)));
+      } else {
+        onChange([...pairsListItems, pair]);
+      }
+    },
+    [onChange],
+  );
 
   const repositionInArray = (allItems: Pair[], itemsToMove: string[], targetIndex: number) => {
     const removed = allItems.filter(item => item.id !== itemsToMove[0]);
@@ -91,7 +107,13 @@ export const KeyValueEditor: FC<Props> = ({
     getItems: keys =>
       [...keys].map(key => ({ 'text/plain': `${pairsListItems.find(item => item.id === key.toString())?.id}` })),
     onReorder(e) {
-      onChange(repositionInArray(pairsListItems, [...e.keys].map(key => key.toString()), pairsListItems.findIndex(item => item.id === e.target.key.toString())));
+      onChange(
+        repositionInArray(
+          pairsListItems,
+          [...e.keys].map(key => key.toString()),
+          pairsListItems.findIndex(item => item.id === e.target.key.toString()),
+        ),
+      );
     },
     renderDragPreview(items) {
       const pair = pairsListItems.find(item => item.id === items[0]['text/plain']) || createEmptyPair();
@@ -103,14 +125,14 @@ export const KeyValueEditor: FC<Props> = ({
       const bytes = isMultiline ? Buffer.from(pair.value, 'utf8').length : 0;
 
       let valueEditor = (
-        <div className="relative h-full w-full flex flex-1 px-2">
+        <div className="relative flex h-full w-full flex-1 px-2">
           <OneLineEditor
             id={'key-value-editor__value' + pair.id}
             placeholder={valuePlaceholder || 'Value'}
             defaultValue={pair.value}
             readOnly
             getAutocompleteConstants={() => handleGetAutocompleteValueConstants?.(pair) || []}
-            onChange={() => { }}
+            onChange={() => {}}
           />
         </div>
       );
@@ -121,9 +143,9 @@ export const KeyValueEditor: FC<Props> = ({
             showFileName
             showFileIcon
             disabled
-            className="px-2 py-1 w-full flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
+            className="flex w-full flex-1 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             path={pair.fileName || ''}
-            onChange={() => { }}
+            onChange={() => {}}
           />
         );
       }
@@ -132,7 +154,7 @@ export const KeyValueEditor: FC<Props> = ({
         valueEditor = (
           <Button
             isDisabled
-            className="px-2 py-1 w-full flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
+            className="flex w-full flex-1 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           >
             <i className="fa fa-pencil-square-o space-right" />
             {bytes > 0 ? describeByteSize(bytes, true) : 'Click to Edit'}
@@ -142,36 +164,39 @@ export const KeyValueEditor: FC<Props> = ({
 
       return (
         <div
-          className="flex outline-none bg-[--color-bg] flex-shrink-0 h-[--line-height-sm] items-center gap-2 px-2"
+          className="flex h-[--line-height-sm] flex-shrink-0 items-center gap-2 bg-[--color-bg] px-2 outline-none"
           style={{
             width: element?.clientWidth,
           }}
         >
-          <div slot="drag" className="cursor-grab invisible p-2 w-5 flex focus-visible:bg-[--hl-sm] justify-center items-center flex-shrink-0">
-            <Icon icon="grip-vertical" className='w-2 text-[--hl]' />
+          <div
+            slot="drag"
+            className="invisible flex w-5 flex-shrink-0 cursor-grab items-center justify-center p-2 focus-visible:bg-[--hl-sm]"
+          >
+            <Icon icon="grip-vertical" className="w-2 text-[--hl]" />
           </div>
-          <div className="relative h-full w-full flex flex-1 px-2">
+          <div className="relative flex h-full w-full flex-1 px-2">
             <OneLineEditor
               id={'key-value-editor__name' + pair.id}
               placeholder={namePlaceholder || 'Name'}
               defaultValue={pair.name}
               readOnly
-              onChange={() => { }}
+              onChange={() => {}}
             />
           </div>
           {valueEditor}
           {showDescription && (
-            <div className="relative h-full w-full flex flex-1 px-2">
+            <div className="relative flex h-full w-full flex-1 px-2">
               <OneLineEditor
                 id={'key-value-editor__description' + pair.id}
                 placeholder={descriptionPlaceholder || 'Description'}
                 defaultValue={pair.description || ''}
                 readOnly
-                onChange={() => { }}
+                onChange={() => {}}
               />
             </div>
           )}
-          <div className="flex flex-shrink-0 items-center gap-2 w-[5.75rem]" />
+          <div className="flex w-[5.75rem] flex-shrink-0 items-center gap-2" />
         </div>
       );
     },
@@ -179,7 +204,7 @@ export const KeyValueEditor: FC<Props> = ({
       return (
         <DropIndicator
           target={target}
-          className="data-[drop-target]:outline-[--color-surprise] z-10 outline-1 outline"
+          className="z-10 outline outline-1 data-[drop-target]:outline-[--color-surprise]"
         />
       );
     },
@@ -187,9 +212,9 @@ export const KeyValueEditor: FC<Props> = ({
 
   return (
     <Fragment>
-      <Toolbar className="content-box sticky top-0 z-10 bg-[var(--color-bg)] flex flex-shrink-0 border-b border-[var(--hl-md)] h-[var(--line-height-sm)] text-[var(--font-size-sm)]">
+      <Toolbar className="content-box sticky top-0 z-10 flex h-[var(--line-height-sm)] flex-shrink-0 border-b border-[var(--hl-md)] bg-[var(--color-bg)] text-[var(--font-size-sm)]">
         <Button
-          className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+          className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() => {
             const id = generateId('pair');
             upsertPair(pairsListItems, { id, name: '', value: '', description: '', disabled: false });
@@ -203,19 +228,22 @@ export const KeyValueEditor: FC<Props> = ({
             pairsListItems = [createEmptyPair()];
             onChange([]);
           }}
-          className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+          className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
           <Icon icon="trash-can" />
           <span>Delete all</span>
         </PromptButton>
         <ToggleButton
-          className="px-4 py-1 h-full flex items-center justify-center gap-2 text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+          className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
           onChange={setShowDescription}
           isSelected={showDescription}
         >
           {({ isSelected }) => (
             <>
-              <Icon className={isSelected ? 'text-[--color-success]' : ''} icon={isSelected ? 'toggle-on' : 'toggle-off'} />
+              <Icon
+                className={isSelected ? 'text-[--color-success]' : ''}
+                icon={isSelected ? 'toggle-on' : 'toggle-off'}
+              />
               <span>Description</span>
             </>
           )}
@@ -223,10 +251,10 @@ export const KeyValueEditor: FC<Props> = ({
       </Toolbar>
       {initialReadOnlyItems.length > 0 && (
         <ListBox
-          aria-label='Key-value pairs readonly'
-          selectionMode='none'
+          aria-label="Key-value pairs readonly"
+          selectionMode="none"
           dependencies={[showDescription, nunjucksEnabled]}
-          className="flex pt-1 flex-col w-full overflow-y-auto flex-1 relative"
+          className="relative flex w-full flex-1 flex-col overflow-y-auto pt-1"
           items={initialReadOnlyItems}
         >
           {pair => {
@@ -235,14 +263,14 @@ export const KeyValueEditor: FC<Props> = ({
             const bytes = isMultiline ? Buffer.from(pair.value, 'utf8').length : 0;
 
             let valueEditor = (
-              <div className="relative h-full w-full flex flex-1 px-2">
+              <div className="relative flex h-full w-full flex-1 px-2">
                 <OneLineEditor
                   id={'key-value-editor__value' + pair.id}
                   placeholder={valuePlaceholder || 'Value'}
                   defaultValue={pair.value}
                   readOnly
                   getAutocompleteConstants={() => handleGetAutocompleteValueConstants?.(pair) || []}
-                  onChange={() => { }}
+                  onChange={() => {}}
                 />
               </div>
             );
@@ -253,9 +281,9 @@ export const KeyValueEditor: FC<Props> = ({
                   showFileName
                   showFileIcon
                   disabled
-                  className="px-2 py-1 w-full flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
+                  className="flex w-full flex-1 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   path={pair.fileName || ''}
-                  onChange={() => { }}
+                  onChange={() => {}}
                 />
               );
             }
@@ -264,7 +292,7 @@ export const KeyValueEditor: FC<Props> = ({
               valueEditor = (
                 <Button
                   isDisabled
-                  className="px-2 py-1 w-full flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
+                  className="flex w-full flex-1 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 >
                   <i className="fa fa-pencil-square-o space-right" />
                   {bytes > 0 ? describeByteSize(bytes, true) : 'Click to Edit'}
@@ -273,41 +301,47 @@ export const KeyValueEditor: FC<Props> = ({
             }
 
             return (
-              <ListBoxItem textValue={pair.name + '-' + pair.value} className="flex outline-none bg-[--color-bg] flex-shrink-0 h-[--line-height-sm] items-center gap-2 px-2">
-                <div slot="drag" className="cursor-grab invisible p-2 w-5 flex focus-visible:bg-[--hl-sm] justify-center items-center flex-shrink-0">
-                  <Icon icon="grip-vertical" className='w-2 text-[--hl]' />
+              <ListBoxItem
+                textValue={pair.name + '-' + pair.value}
+                className="flex h-[--line-height-sm] flex-shrink-0 items-center gap-2 bg-[--color-bg] px-2 outline-none"
+              >
+                <div
+                  slot="drag"
+                  className="invisible flex w-5 flex-shrink-0 cursor-grab items-center justify-center p-2 focus-visible:bg-[--hl-sm]"
+                >
+                  <Icon icon="grip-vertical" className="w-2 text-[--hl]" />
                 </div>
-                <div className="relative h-full w-full flex flex-1 px-2">
+                <div className="relative flex h-full w-full flex-1 px-2">
                   <OneLineEditor
                     id={'key-value-editor__name' + pair.id}
                     placeholder={namePlaceholder || 'Name'}
                     defaultValue={pair.name}
                     readOnly
-                    onChange={() => { }}
+                    onChange={() => {}}
                   />
                 </div>
                 {valueEditor}
                 {showDescription && (
-                  <div className="relative h-full w-full flex flex-1 px-2">
+                  <div className="relative flex h-full w-full flex-1 px-2">
                     <OneLineEditor
                       id={'key-value-editor__description' + pair.id}
                       placeholder={descriptionPlaceholder || 'Description'}
                       defaultValue={pair.description || ''}
                       readOnly
-                      onChange={() => { }}
+                      onChange={() => {}}
                     />
                   </div>
                 )}
-                <div className="flex flex-shrink-0 items-center gap-2 w-[5.75rem]" />
+                <div className="flex w-[5.75rem] flex-shrink-0 items-center gap-2" />
               </ListBoxItem>
             );
           }}
         </ListBox>
       )}
       <ListBox
-        aria-label='Key-value pairs'
-        selectionMode='none'
-        className="flex pt-1 flex-col w-full overflow-y-auto flex-1 relative"
+        aria-label="Key-value pairs"
+        selectionMode="none"
+        className="relative flex w-full flex-1 flex-col overflow-y-auto pt-1"
         dragAndDropHooks={dragAndDropHooks}
         dependencies={[upsertPair, showDescription, nunjucksEnabled]}
         items={pairsListItems}
@@ -335,7 +369,7 @@ export const KeyValueEditor: FC<Props> = ({
                 showFileName
                 showFileIcon
                 disabled={pair.disabled || isDisabled}
-                className="px-2 py-1 w-full fle flex-shrink-0 flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
+                className="fle w-full flex-1 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 path={pair.fileName || ''}
                 onChange={fileName => upsertPair(pairsListItems, { ...pair, fileName })}
               />
@@ -346,16 +380,18 @@ export const KeyValueEditor: FC<Props> = ({
             valueEditor = (
               <Button
                 isDisabled={pair.disabled || isDisabled}
-                className="px-2 py-1 w-full flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm overflow-hidden"
-                onPress={() => showModal(CodePromptModal, {
-                  submitName: 'Done',
-                  title: `Edit ${pair.name}`,
-                  defaultValue: pair.value,
-                  enableRender: nunjucksEnabled,
-                  mode: pair.multiline && typeof pair.multiline === 'string' ? pair.multiline : 'text/plain',
-                  onChange: (value: string) => upsertPair(pairsListItems, { ...pair, value }),
-                  onModeChange: (mode: string) => upsertPair(pairsListItems, { ...pair, multiline: mode }),
-                })}
+                className="flex w-full flex-1 items-center justify-center gap-2 overflow-hidden rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                onPress={() =>
+                  showModal(CodePromptModal, {
+                    submitName: 'Done',
+                    title: `Edit ${pair.name}`,
+                    defaultValue: pair.value,
+                    enableRender: nunjucksEnabled,
+                    mode: pair.multiline && typeof pair.multiline === 'string' ? pair.multiline : 'text/plain',
+                    onChange: (value: string) => upsertPair(pairsListItems, { ...pair, value }),
+                    onModeChange: (mode: string) => upsertPair(pairsListItems, { ...pair, multiline: mode }),
+                  })
+                }
               >
                 <i className="fa fa-pencil-square-o space-right" />
                 {bytes > 0 ? describeByteSize(bytes, true) : 'Click to Edit'}
@@ -377,10 +413,13 @@ export const KeyValueEditor: FC<Props> = ({
               key={pair.id}
               textValue={pair.name + '-' + pair.value}
               style={{ opacity: pair.disabled ? '0.4' : '1' }}
-              className={`grid relative outline-none bg-[--color-bg] flex-shrink-0 h-[--line-height-sm] gap-2 px-2 ${showDescription ? '[grid-template-columns:max-content_1fr_1fr_1fr_max-content]' : '[grid-template-columns:max-content_1fr_1fr_max-content]'}`}
+              className={`relative grid h-[--line-height-sm] flex-shrink-0 gap-2 bg-[--color-bg] px-2 outline-none ${showDescription ? '[grid-template-columns:max-content_1fr_1fr_1fr_max-content]' : '[grid-template-columns:max-content_1fr_1fr_max-content]'}`}
             >
-              <div slot="drag" className="cursor-grab p-2 w-5 flex focus-visible:bg-[--hl-sm] justify-center items-center flex-shrink-0">
-                <Icon icon="grip-vertical" className='w-2 text-[--hl]' />
+              <div
+                slot="drag"
+                className="flex w-5 flex-shrink-0 cursor-grab items-center justify-center p-2 focus-visible:bg-[--hl-sm]"
+              >
+                <Icon icon="grip-vertical" className="w-2 text-[--hl]" />
               </div>
               <OneLineEditor
                 id={'key-value-editor__name' + pair.id}
@@ -408,13 +447,13 @@ export const KeyValueEditor: FC<Props> = ({
                 <MenuTrigger>
                   <Button
                     aria-label="Text mode"
-                    className="flex items-center justify-center h-7 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex aspect-square h-7 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   >
                     <Icon icon="caret-down" />
                   </Button>
-                  <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                  <Popover className="flex min-w-max flex-col overflow-y-hidden">
                     <Menu
-                      className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                      className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                       aria-label="Create a new request"
                       selectionMode="single"
                       selectedKeys={[selectedValueType]}
@@ -425,22 +464,26 @@ export const KeyValueEditor: FC<Props> = ({
                           textValue: 'Text',
                           onAction: () => upsertPair(pairsListItems, { ...pair, type: 'text', multiline: false }),
                         },
-                        ...allowMultiline ? [
-                          {
-                            id: 'multiline-text',
-                            name: 'Multiline text',
-                            textValue: 'Multiline text',
-                            onAction: () => upsertPair(pairsListItems, { ...pair, type: 'text', multiline: true }),
-                          },
-                        ] : [],
-                        ...allowFile ? [
-                          {
-                            id: 'file',
-                            name: 'File',
-                            textValue: 'File',
-                            onAction: () => upsertPair(pairsListItems, { ...pair, type: 'file' }),
-                          },
-                        ] : [],
+                        ...(allowMultiline
+                          ? [
+                              {
+                                id: 'multiline-text',
+                                name: 'Multiline text',
+                                textValue: 'Multiline text',
+                                onAction: () => upsertPair(pairsListItems, { ...pair, type: 'text', multiline: true }),
+                              },
+                            ]
+                          : []),
+                        ...(allowFile
+                          ? [
+                              {
+                                id: 'file',
+                                name: 'File',
+                                textValue: 'File',
+                                onAction: () => upsertPair(pairsListItems, { ...pair, type: 'file' }),
+                              },
+                            ]
+                          : []),
                       ]}
                     >
                       {item => (
@@ -448,7 +491,7 @@ export const KeyValueEditor: FC<Props> = ({
                           key={item.id}
                           id={item.id}
                           onAction={item.onAction}
-                          className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                          className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                           aria-label={item.name}
                         >
                           <span>{item.name}</span>
@@ -458,7 +501,7 @@ export const KeyValueEditor: FC<Props> = ({
                   </Popover>
                 </MenuTrigger>
                 <ToggleButton
-                  className="flex items-center justify-center h-7 aspect-square rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-7 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                   onChange={isSelected => upsertPair(pairsListItems, { ...pair, disabled: !isSelected })}
                   isSelected={!pair.disabled}
                 >
@@ -466,9 +509,9 @@ export const KeyValueEditor: FC<Props> = ({
                 </ToggleButton>
                 <PromptButton
                   disabled={pair.id === 'pair-empty' || isDisabled}
-                  className="flex items-center disabled:opacity-50 justify-center h-7 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                  confirmMessage=''
-                  doneMessage=''
+                  className="flex aspect-square h-7 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:opacity-50 aria-pressed:bg-[--hl-sm]"
+                  confirmMessage=""
+                  doneMessage=""
                   onClick={() => {
                     if (pairsListItems.find(item => item.id === pair.id)) {
                       pairsListItems = pairsListItems.filter(item => item.id !== pair.id);
diff --git a/packages/insomnia/src/ui/components/key-value-editor/row.tsx b/packages/insomnia/src/ui/components/key-value-editor/row.tsx
index 8e1eba79e5..c1dd3593ea 100644
--- a/packages/insomnia/src/ui/components/key-value-editor/row.tsx
+++ b/packages/insomnia/src/ui/components/key-value-editor/row.tsx
@@ -72,9 +72,11 @@ export const Row: FC<Props> = ({
   });
 
   const isFileOrMultiline = allowMultiline || allowFile;
-  const hiddenButtons = isFileOrMultiline ? (<button>
-    <i className="fa fa-empty" />
-  </button>) : null;
+  const hiddenButtons = isFileOrMultiline ? (
+    <button>
+      <i className="fa fa-empty" />
+    </button>
+  ) : null;
 
   const isFile = pair.type === 'file';
   const isMultiline = pair.type === 'text' && pair.multiline;
@@ -114,15 +116,17 @@ export const Row: FC<Props> = ({
           ) : isMultiline ? (
             <button
               className="btn btn--outlined btn--super-super-compact wide ellipsis"
-              onClick={() => showModal(CodePromptModal, {
-                submitName: 'Done',
-                title: `Edit ${pair.name}`,
-                defaultValue: pair.value,
-                onChange: (value: string) => onChange({ ...pair, value }),
-                enableRender: enabled,
-                mode: pair.multiline && typeof pair.multiline === 'string' ? pair.multiline : 'text/plain',
-                onModeChange: (mode: string) => onChange({ ...pair, multiline: mode }),
-              })}
+              onClick={() =>
+                showModal(CodePromptModal, {
+                  submitName: 'Done',
+                  title: `Edit ${pair.name}`,
+                  defaultValue: pair.value,
+                  onChange: (value: string) => onChange({ ...pair, value }),
+                  enableRender: enabled,
+                  mode: pair.multiline && typeof pair.multiline === 'string' ? pair.multiline : 'text/plain',
+                  onModeChange: (mode: string) => onChange({ ...pair, multiline: mode }),
+                })
+              }
             >
               <i className="fa fa-pencil-square-o space-right" />
               {bytes > 0 ? describeByteSize(bytes, true) : 'Click to Edit'}
@@ -138,15 +142,13 @@ export const Row: FC<Props> = ({
               onChange={value => onChange({ ...pair, value })}
               getAutocompleteConstants={() => handleGetAutocompleteValueConstants?.(pair) || []}
             />
-          )
-          }
+          )}
         </div>
         {showDescription ? (
           <div
-            className={classnames(
-              'form-control form-control--underlined form-control--wide no-min-width',
-              { 'form-control--inactive': pair.disabled },
-            )}
+            className={classnames('form-control form-control--underlined form-control--wide no-min-width', {
+              'form-control--inactive': pair.disabled,
+            })}
           >
             <OneLineEditor
               id={'key-value-editor__description' + pair.id}
@@ -158,22 +160,21 @@ export const Row: FC<Props> = ({
           </div>
         ) : null}
 
-        {hideButtons ? hiddenButtons : isFileOrMultiline ? (
+        {hideButtons ? (
+          hiddenButtons
+        ) : isFileOrMultiline ? (
           <Dropdown
-            aria-label='Select type Dropdown'
+            aria-label="Select type Dropdown"
             triggerButton={
               <Button>
                 <i className="fa fa-caret-down" />
               </Button>
             }
           >
-            <DropdownItem aria-label='Text'>
-              <ItemContent
-                label="Text"
-                onClick={() => onChange({ ...pair, type: 'text', multiline: false })}
-              />
+            <DropdownItem aria-label="Text">
+              <ItemContent label="Text" onClick={() => onChange({ ...pair, type: 'text', multiline: false })} />
             </DropdownItem>
-            <DropdownItem aria-label='Text (Multi-line)'>
+            <DropdownItem aria-label="Text (Multi-line)">
               {allowMultiline && (
                 <ItemContent
                   label="Text (Multi-line)"
@@ -181,13 +182,8 @@ export const Row: FC<Props> = ({
                 />
               )}
             </DropdownItem>
-            <DropdownItem aria-label='File'>
-              {allowFile && (
-                <ItemContent
-                  label="File"
-                  onClick={() => onChange({ ...pair, type: 'file' })}
-                />
-              )}
+            <DropdownItem aria-label="File">
+              {allowFile && <ItemContent label="File" onClick={() => onChange({ ...pair, type: 'file' })} />}
             </DropdownItem>
           </Dropdown>
         ) : null}
@@ -197,11 +193,7 @@ export const Row: FC<Props> = ({
             onClick={() => onChange({ ...pair, disabled: !pair.disabled })}
             title={pair.disabled ? 'Enable item' : 'Disable item'}
           >
-            {pair.disabled ? (
-              <i className="fa fa-square-o" />
-            ) : (
-              <i className="fa fa-check-square-o" />
-            )}
+            {pair.disabled ? <i className="fa fa-square-o" /> : <i className="fa fa-check-square-o" />}
           </button>
         ) : (
           <button>
@@ -210,12 +202,7 @@ export const Row: FC<Props> = ({
         )}
 
         {!hideButtons ? (
-          <PromptButton
-            tabIndex={-1}
-            confirmMessage=""
-            onClick={() => onDelete?.(pair)}
-            title="Delete item"
-          >
+          <PromptButton tabIndex={-1} confirmMessage="" onClick={() => onDelete?.(pair)} title="Delete item">
             <i className="fa fa-trash-o" />
           </PromptButton>
         ) : (
diff --git a/packages/insomnia/src/ui/components/keydown-binder.ts b/packages/insomnia/src/ui/components/keydown-binder.ts
index e194c505d0..ea208e4f07 100644
--- a/packages/insomnia/src/ui/components/keydown-binder.ts
+++ b/packages/insomnia/src/ui/components/keydown-binder.ts
@@ -1,6 +1,11 @@
 import { useEffect } from 'react';
 import { useRouteLoaderData } from 'react-router-dom';
-import { createKeybindingsHandler as _createKeybindingsHandler, type KeyBindingHandlerOptions, type KeyBindingMap, tinykeys } from 'tinykeys';
+import {
+  createKeybindingsHandler as _createKeybindingsHandler,
+  type KeyBindingHandlerOptions,
+  type KeyBindingMap,
+  tinykeys,
+} from 'tinykeys';
 
 import { getPlatformKeyCombinations } from '../../common/hotkeys';
 import { keyboardKeys } from '../../common/keyboard-keys';
@@ -8,12 +13,14 @@ import type { KeyboardShortcut, KeyCombination } from '../../common/settings';
 import type { RootLoaderData } from '../routes/root';
 
 const keyCombinationToTinyKeyString = ({ ctrl, alt, shift, meta, keyCode }: KeyCombination): string =>
-  `${meta ? 'Meta+' : ''}${alt ? 'Alt+' : ''}${ctrl ? 'Control+' : ''}${shift ? 'Shift+' : ''}` + Object.entries(keyboardKeys).find(([, { keyCode: kc }]) => kc === keyCode)?.[1].code;
+  `${meta ? 'Meta+' : ''}${alt ? 'Alt+' : ''}${ctrl ? 'Control+' : ''}${shift ? 'Shift+' : ''}` +
+  Object.entries(keyboardKeys).find(([, { keyCode: kc }]) => kc === keyCode)?.[1].code;
 
-export function useKeyboardShortcuts(getTarget: () => HTMLElement, listeners: Partial<Record<KeyboardShortcut, (event: KeyboardEvent) => any>>) {
-  const {
-    settings,
-  } = useRouteLoaderData('root') as RootLoaderData;
+export function useKeyboardShortcuts(
+  getTarget: () => HTMLElement,
+  listeners: Partial<Record<KeyboardShortcut, (event: KeyboardEvent) => any>>,
+) {
+  const { settings } = useRouteLoaderData('root') as RootLoaderData;
   const { hotKeyRegistry } = settings;
 
   useEffect(() => {
@@ -29,8 +36,12 @@ export function useKeyboardShortcuts(getTarget: () => HTMLElement, listeners: Pa
     // hot key variations are multiple hotkeys that can trigger the same behaviour
     // eg. Control+Space, Control+Shift+Space both could trigger SHOW_AUTOCOMPLETE
     const keyBindingMap: KeyBindingMap = keyboardShortcuts
-      .map(([keyboardShortcut, action]) => getPlatformKeyCombinations(hotKeyRegistry[keyboardShortcut])
-        .map(combo => ({ tinyKeyString: keyCombinationToTinyKeyString(combo), action })))
+      .map(([keyboardShortcut, action]) =>
+        getPlatformKeyCombinations(hotKeyRegistry[keyboardShortcut]).map(combo => ({
+          tinyKeyString: keyCombinationToTinyKeyString(combo),
+          action,
+        })),
+      )
       .flat()
       .reduce((acc, { tinyKeyString, action }) => ({ ...acc, [tinyKeyString]: action }), {});
 
@@ -39,7 +50,9 @@ export function useKeyboardShortcuts(getTarget: () => HTMLElement, listeners: Pa
   }, [hotKeyRegistry, listeners, getTarget]);
 }
 
-export function useDocBodyKeyboardShortcuts(listeners: Partial<Record<KeyboardShortcut, (event: KeyboardEvent) => any>>) {
+export function useDocBodyKeyboardShortcuts(
+  listeners: Partial<Record<KeyboardShortcut, (event: KeyboardEvent) => any>>,
+) {
   useKeyboardShortcuts(() => document.body, listeners);
 }
 
diff --git a/packages/insomnia/src/ui/components/markdown-editor.tsx b/packages/insomnia/src/ui/components/markdown-editor.tsx
index ad88897385..cf7a8bcb0f 100644
--- a/packages/insomnia/src/ui/components/markdown-editor.tsx
+++ b/packages/insomnia/src/ui/components/markdown-editor.tsx
@@ -14,75 +14,72 @@ interface Props {
   tall?: boolean;
 }
 
-export const MarkdownEditor = forwardRef<CodeEditorHandle, Props>(({
-  mode,
-  placeholder,
-  tall,
-  defaultValue,
-  onChange,
-}, ref): ReactElement => {
-  // default value is added here to capture the original class component's behavior, but this way cuts the flow of prop change event after the initial rendering
-  const [markdown, setMarkdown] = useState(defaultValue);
+export const MarkdownEditor = forwardRef<CodeEditorHandle, Props>(
+  ({ mode, placeholder, tall, defaultValue, onChange }, ref): ReactElement => {
+    // default value is added here to capture the original class component's behavior, but this way cuts the flow of prop change event after the initial rendering
+    const [markdown, setMarkdown] = useState(defaultValue);
 
-  const handleChange = useCallback((markdown: string) => {
-    onChange(markdown);
-    setMarkdown(markdown);
-  }, [onChange]);
+    const handleChange = useCallback(
+      (markdown: string) => {
+        onChange(markdown);
+        setMarkdown(markdown);
+      },
+      [onChange],
+    );
 
-  return (
-    <Tabs
-      className="w-full h-full flex flex-col overflow-hidden"
-      aria-label="Markdown editor tabs"
-      defaultSelectedKey={defaultValue ? 'preview' : 'write'}
-    >
-      <TabList className="w-full flex-shrink-0 overflow-x-auto border-solid border-b border-b-[--hl-md] px-2 bg-[--color-bg] flex items-center gap-2 h-[--line-height-sm]" aria-label="Request scripts tabs">
-        <Tab
-          className="rounded-md flex-shrink-0 h-[--line-height-xxs] text-sm flex items-center justify-between cursor-pointer w-[10.5rem] outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300"
-          id="write"
+    return (
+      <Tabs
+        className="flex h-full w-full flex-col overflow-hidden"
+        aria-label="Markdown editor tabs"
+        defaultSelectedKey={defaultValue ? 'preview' : 'write'}
+      >
+        <TabList
+          className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center gap-2 overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg] px-2"
+          aria-label="Request scripts tabs"
         >
-          <div className='flex flex-1 items-center gap-2'>
-            <span>Write</span>
-          </div>
-        </Tab>
-        <Tab
-          className="rounded-md flex-shrink-0 h-[--line-height-xxs] text-sm flex items-center justify-between cursor-pointer w-[10.5rem] outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300"
-          id="preview"
-        >
-          <div className='flex flex-1 items-center gap-2'>
-            <span>Preview</span>
-          </div>
-        </Tab>
-      </TabList>
-      <TabPanel className="w-full flex-1 overflow-hidden m-2" id='write'>
-        <ErrorBoundary
-          errorClassName="tall wide vertically-align font-error pad text-center"
-        >
-          <div className='h-full flex flex-col divide-y divide-solid divide-[--hl-md]'>
-            <CodeEditor
-              id="markdown-editor"
-              ref={ref}
-              hideGutters
-              hideLineNumbers
-              dynamicHeight={!tall}
-              showPrettifyButton
-              noStyleActiveLine
-              mode={mode || 'text/x-markdown'}
-              placeholder={placeholder}
-              defaultValue={markdown}
-              onChange={handleChange}
-            />
-          </div>
-        </ErrorBoundary>
-      </TabPanel>
-      <TabPanel className="w-full flex-1 overflow-y-auto m-2" id="preview">
-        <ErrorBoundary
-          errorClassName="tall wide vertically-align font-error pad text-center"
-        >
-          <MarkdownPreview markdown={markdown} />
-        </ErrorBoundary>
-      </TabPanel>
-    </Tabs>
-
-  );
-});
+          <Tab
+            className="flex h-[--line-height-xxs] w-[10.5rem] flex-shrink-0 cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 text-sm text-[--hl] outline-none transition-colors duration-300 hover:bg-[rgba(var(--color-surprise-rgb),50%)] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] aria-selected:text-[--color-font-surprise]"
+            id="write"
+          >
+            <div className="flex flex-1 items-center gap-2">
+              <span>Write</span>
+            </div>
+          </Tab>
+          <Tab
+            className="flex h-[--line-height-xxs] w-[10.5rem] flex-shrink-0 cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 text-sm text-[--hl] outline-none transition-colors duration-300 hover:bg-[rgba(var(--color-surprise-rgb),50%)] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] aria-selected:text-[--color-font-surprise]"
+            id="preview"
+          >
+            <div className="flex flex-1 items-center gap-2">
+              <span>Preview</span>
+            </div>
+          </Tab>
+        </TabList>
+        <TabPanel className="m-2 w-full flex-1 overflow-hidden" id="write">
+          <ErrorBoundary errorClassName="tall wide vertically-align font-error pad text-center">
+            <div className="flex h-full flex-col divide-y divide-solid divide-[--hl-md]">
+              <CodeEditor
+                id="markdown-editor"
+                ref={ref}
+                hideGutters
+                hideLineNumbers
+                dynamicHeight={!tall}
+                showPrettifyButton
+                noStyleActiveLine
+                mode={mode || 'text/x-markdown'}
+                placeholder={placeholder}
+                defaultValue={markdown}
+                onChange={handleChange}
+              />
+            </div>
+          </ErrorBoundary>
+        </TabPanel>
+        <TabPanel className="m-2 w-full flex-1 overflow-y-auto" id="preview">
+          <ErrorBoundary errorClassName="tall wide vertically-align font-error pad text-center">
+            <MarkdownPreview markdown={markdown} />
+          </ErrorBoundary>
+        </TabPanel>
+      </Tabs>
+    );
+  },
+);
 MarkdownEditor.displayName = 'MarkdownEditor';
diff --git a/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx b/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx
index 7841977d1c..cf5498da2e 100644
--- a/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx
+++ b/packages/insomnia/src/ui/components/mocks/mock-response-pane.tsx
@@ -6,7 +6,13 @@ import { useRouteLoaderData } from 'react-router-dom';
 import { useFetcher } from 'react-router-dom';
 import { useInterval } from 'react-use';
 
-import { getMockServiceURL, getPreviewModeName, PREVIEW_MODE_FRIENDLY, PREVIEW_MODES, type PreviewMode } from '../../../common/constants';
+import {
+  getMockServiceURL,
+  getPreviewModeName,
+  PREVIEW_MODE_FRIENDLY,
+  PREVIEW_MODES,
+  type PreviewMode,
+} from '../../../common/constants';
 import { exportHarCurrentRequest } from '../../../common/har';
 import type { ResponseTimelineEntry } from '../../../main/network/libcurl-promise';
 import * as models from '../../../models';
@@ -44,7 +50,7 @@ interface MockbinLogOutput {
         startedDateTime: string;
         clientIPAddress: string;
         request: Har.Request;
-      }
+      },
     ];
   };
 }
@@ -69,11 +75,13 @@ export const MockResponsePane = () => {
   if (requestFetcher.state !== 'idle') {
     return (
       <PlaceholderResponsePane>
-        {<ResponseTimer
-          handleCancel={() => activeResponse && cancelRequestById(activeResponse.parentId)}
-          activeRequestId={mockRoute._id}
-          steps={steps}
-        />}
+        {
+          <ResponseTimer
+            handleCancel={() => activeResponse && cancelRequestById(activeResponse.parentId)}
+            activeRequestId={mockRoute._id}
+            steps={steps}
+          />
+        }
       </PlaceholderResponsePane>
     );
   }
@@ -88,72 +96,74 @@ export const MockResponsePane = () => {
           </div>
         </PaneHeader>
       )}
-      <Tabs aria-label='Mock response' className="flex-1 w-full h-full flex flex-col">
-        <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+      <Tabs aria-label="Mock response" className="flex h-full w-full flex-1 flex-col">
+        <TabList
+          className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+          aria-label="Request pane tabs"
+        >
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='preview'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="preview"
           >
             Preview
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='headers'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="headers"
           >
             Headers
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='timeline'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="timeline"
           >
             Console
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='history'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="history"
           >
             History
           </Tab>
         </TabList>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='preview'>
-          <Toolbar className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
-            {activeResponse ?
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="preview">
+          <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
+            {activeResponse ? (
               <PreviewModeDropdown
                 activeResponse={activeResponse}
                 previewMode={previewMode}
                 setPreviewMode={setPreviewMode}
-              /> : null}
+              />
+            ) : null}
           </Toolbar>
-          {activeResponse && <ResponseViewer
-            key={activeResponse._id}
-            bytes={Math.max(activeResponse.bytesContent, activeResponse.bytesRead)}
-            contentType={activeResponse.contentType || ''}
-            disableHtmlPreviewJs={settings.disableHtmlPreviewJs}
-            disablePreviewLinks={settings.disableResponsePreviewLinks}
-            download={() => { }}
-            editorFontSize={settings.editorFontSize}
-            error={activeResponse.error}
-            filter={''}
-            filterHistory={[]}
-            bodyBuffer={activeResponse.bodyBuffer}
-            getBody={() => models.response.getBodyBuffer(activeResponse)}
-            previewMode={previewMode}
-            responseId={activeResponse._id}
-            updateFilter={activeResponse.error ? undefined : () => { }}
-            url={activeResponse.url}
-          />}
+          {activeResponse && (
+            <ResponseViewer
+              key={activeResponse._id}
+              bytes={Math.max(activeResponse.bytesContent, activeResponse.bytesRead)}
+              contentType={activeResponse.contentType || ''}
+              disableHtmlPreviewJs={settings.disableHtmlPreviewJs}
+              disablePreviewLinks={settings.disableResponsePreviewLinks}
+              download={() => {}}
+              editorFontSize={settings.editorFontSize}
+              error={activeResponse.error}
+              filter={''}
+              filterHistory={[]}
+              bodyBuffer={activeResponse.bodyBuffer}
+              getBody={() => models.response.getBodyBuffer(activeResponse)}
+              previewMode={previewMode}
+              responseId={activeResponse._id}
+              updateFilter={activeResponse.error ? undefined : () => {}}
+              url={activeResponse.url}
+            />
+          )}
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='headers'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="headers">
           <ResponseHeadersViewer headers={activeResponse?.headers || []} />
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='timeline'>
-          <ResponseTimelineViewer
-            key={activeResponse?._id}
-            timeline={timeline}
-            pinToBottom={true}
-          />
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="timeline">
+          <ResponseTimelineViewer key={activeResponse?._id} timeline={timeline} pinToBottom={true} />
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='history'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="history">
           <HistoryViewWrapperComponentFactory mockServer={mockServer} mockRoute={mockRoute} />
         </TabPanel>
       </Tabs>
@@ -161,7 +171,13 @@ export const MockResponsePane = () => {
   );
 };
 
-const HistoryViewWrapperComponentFactory = ({ mockServer, mockRoute }: { mockServer: MockServer; mockRoute: MockRoute }) => {
+const HistoryViewWrapperComponentFactory = ({
+  mockServer,
+  mockRoute,
+}: {
+  mockServer: MockServer;
+  mockRoute: MockRoute;
+}) => {
   const [logs, setLogs] = useState<MockbinLogOutput | null>(null);
   const [logEntryId, setLogEntryId] = useState<number | null>(null);
   const { userSession } = useRootLoaderData();
@@ -188,7 +204,14 @@ const HistoryViewWrapperComponentFactory = ({ mockServer, mockRoute }: { mockSer
       // network erros will be managed by the upsert trigger, so we can ignore them here
       console.log({ mockbinUrl, e });
     }
-  }, [mockRoute.method, mockRoute.name, mockRoute.parentId, mockServer.url, mockServer.useInsomniaCloud, userSession.id]);
+  }, [
+    mockRoute.method,
+    mockRoute.name,
+    mockRoute.parentId,
+    mockServer.url,
+    mockServer.useInsomniaCloud,
+    userSession.id,
+  ]);
   // refetches logs whenever the path changes, or a response is recieved, or tenseconds elapses or history tab is click
   // chatgpt: answer my called
   useInterval(() => {
@@ -200,36 +223,54 @@ const HistoryViewWrapperComponentFactory = ({ mockServer, mockRoute }: { mockSer
   }, [fetchLogs]);
 
   return (
-    <div className="h-full w-full grid grid-rows-[repeat(auto-fit,minmax(0,1fr))]">
-      <div className="w-full flex-1 overflow-hidden box-border overflow-y-scroll">
-        <div className="grid grid-cols-[repeat(5,auto)] divide-solid divide-y divide-[--hl-sm]">
-          <div className="uppercase p-2 bg-[--hl-sm] text-left text-xs font-semibold focus:outline-none">Method</div>
-          <div className="uppercase p-2 bg-[--hl-sm] text-left text-xs font-semibold focus:outline-none">Size</div>
-          <div className="uppercase p-2 bg-[--hl-sm] text-left text-xs font-semibold focus:outline-none">Date</div>
-          <div className="uppercase p-2 bg-[--hl-sm] text-left text-xs font-semibold focus:outline-none">IP</div>
-          <div className="uppercase p-2 bg-[--hl-sm] text-left text-xs font-semibold focus:outline-none">Path</div>
-          {logs?.log.entries?.map((row, index) => (
-            <Fragment key={row.startedDateTime}>
-              <div onClick={() => setLogEntryId(index)} className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer whitespace-nowrap text-sm truncate font-medium group-last-of-type:border-none focus:outline-none`}>
-                <div className='p-2'>{row.request.method}</div>
-              </div>
-              <div onClick={() => setLogEntryId(index)} className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer whitespace-nowrap text-sm truncate font-medium group-last-of-type:border-none focus:outline-none`}>
-                <div className='p-2'>{row.request.bodySize + row.request.headersSize}</div></div>
-              <div onClick={() => setLogEntryId(index)} className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer whitespace-nowrap text-sm truncate font-medium group-last-of-type:border-none focus:outline-none`}>
-                <div className='p-2 truncate'>{getTimeFromNow(row.startedDateTime, false)}</div>
-              </div>
-              <div onClick={() => setLogEntryId(index)} className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer whitespace-nowrap text-sm truncate font-medium group-last-of-type:border-none focus:outline-none`}>
-                <div className='p-2 truncate'>{row.clientIPAddress}</div>
-              </div>
-              <div onClick={() => setLogEntryId(index)} className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer whitespace-nowrap truncate text-sm font-medium group-last-of-type:border-none focus:outline-none`}>
-                <div className='p-2 truncate'>{row.request.url}</div>
-              </div>
-            </Fragment>
-          )).reverse()}
+    <div className="grid h-full w-full grid-rows-[repeat(auto-fit,minmax(0,1fr))]">
+      <div className="box-border w-full flex-1 overflow-hidden overflow-y-scroll">
+        <div className="grid grid-cols-[repeat(5,auto)] divide-y divide-solid divide-[--hl-sm]">
+          <div className="bg-[--hl-sm] p-2 text-left text-xs font-semibold uppercase focus:outline-none">Method</div>
+          <div className="bg-[--hl-sm] p-2 text-left text-xs font-semibold uppercase focus:outline-none">Size</div>
+          <div className="bg-[--hl-sm] p-2 text-left text-xs font-semibold uppercase focus:outline-none">Date</div>
+          <div className="bg-[--hl-sm] p-2 text-left text-xs font-semibold uppercase focus:outline-none">IP</div>
+          <div className="bg-[--hl-sm] p-2 text-left text-xs font-semibold uppercase focus:outline-none">Path</div>
+          {logs?.log.entries
+            ?.map((row, index) => (
+              <Fragment key={row.startedDateTime}>
+                <div
+                  onClick={() => setLogEntryId(index)}
+                  className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer truncate whitespace-nowrap text-sm font-medium focus:outline-none group-last-of-type:border-none`}
+                >
+                  <div className="p-2">{row.request.method}</div>
+                </div>
+                <div
+                  onClick={() => setLogEntryId(index)}
+                  className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer truncate whitespace-nowrap text-sm font-medium focus:outline-none group-last-of-type:border-none`}
+                >
+                  <div className="p-2">{row.request.bodySize + row.request.headersSize}</div>
+                </div>
+                <div
+                  onClick={() => setLogEntryId(index)}
+                  className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer truncate whitespace-nowrap text-sm font-medium focus:outline-none group-last-of-type:border-none`}
+                >
+                  <div className="truncate p-2">{getTimeFromNow(row.startedDateTime, false)}</div>
+                </div>
+                <div
+                  onClick={() => setLogEntryId(index)}
+                  className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer truncate whitespace-nowrap text-sm font-medium focus:outline-none group-last-of-type:border-none`}
+                >
+                  <div className="truncate p-2">{row.clientIPAddress}</div>
+                </div>
+                <div
+                  onClick={() => setLogEntryId(index)}
+                  className={`${index % 2 === 0 ? '' : 'bg-[--hl-xs]'} cursor-pointer truncate whitespace-nowrap text-sm font-medium focus:outline-none group-last-of-type:border-none`}
+                >
+                  <div className="truncate p-2">{row.request.url}</div>
+                </div>
+              </Fragment>
+            ))
+            .reverse()}
         </div>
       </div>
       {logEntryId !== null && logs?.log.entries?.[logEntryId] && (
-        <div className='flex-1 h-full border-solid border border-[--hl-md]'>
+        <div className="h-full flex-1 border border-solid border-[--hl-md]">
           <CodeEditor
             id="log-body-preview"
             key={logEntryId + logs?.log.entries?.[logEntryId].startedDateTime}
@@ -244,10 +285,18 @@ const HistoryViewWrapperComponentFactory = ({ mockServer, mockRoute }: { mockSer
   );
 };
 
-const PreviewModeDropdown = ({ activeResponse, previewMode, setPreviewMode }: { activeResponse: Response; previewMode: PreviewMode; setPreviewMode: (mode: PreviewMode) => void }) => {
+const PreviewModeDropdown = ({
+  activeResponse,
+  previewMode,
+  setPreviewMode,
+}: {
+  activeResponse: Response;
+  previewMode: PreviewMode;
+  setPreviewMode: (mode: PreviewMode) => void;
+}) => {
   return (
     <Dropdown
-      aria-label='Preview Mode Dropdown'
+      aria-label="Preview Mode Dropdown"
       triggerButton={
         <Button className="text-[--hl]">
           {getPreviewModeName(previewMode)}
@@ -255,28 +304,19 @@ const PreviewModeDropdown = ({ activeResponse, previewMode, setPreviewMode }: {
         </Button>
       }
     >
-      <DropdownSection
-        aria-label='Preview Mode Section'
-        title="Preview Mode"
-      >
-        {PREVIEW_MODES.map(mode =>
-          <DropdownItem
-            key={mode}
-            aria-label={getPreviewModeName(mode, true)}
-          >
+      <DropdownSection aria-label="Preview Mode Section" title="Preview Mode">
+        {PREVIEW_MODES.map(mode => (
+          <DropdownItem key={mode} aria-label={getPreviewModeName(mode, true)}>
             <ItemContent
               icon={previewMode === mode ? 'check' : 'empty'}
               label={getPreviewModeName(mode, true)}
               onClick={() => setPreviewMode(mode)}
             />
           </DropdownItem>
-        )}
+        ))}
       </DropdownSection>
-      <DropdownSection
-        aria-label='Action Section'
-        title="Action"
-      >
-        <DropdownItem aria-label='Copy raw response'>
+      <DropdownSection aria-label="Action Section" title="Action">
+        <DropdownItem aria-label="Copy raw response">
           <ItemContent
             icon="copy"
             label="Copy raw response"
@@ -286,7 +326,7 @@ const PreviewModeDropdown = ({ activeResponse, previewMode, setPreviewMode }: {
             }}
           />
         </DropdownItem>
-        <DropdownItem aria-label='Export raw response'>
+        <DropdownItem aria-label="Export raw response">
           <ItemContent
             icon="save"
             label="Export raw response"
@@ -305,8 +345,8 @@ const PreviewModeDropdown = ({ activeResponse, previewMode, setPreviewMode }: {
             }}
           />
         </DropdownItem>
-        <DropdownItem aria-label='Export prettified response'>
-          {activeResponse.contentType.includes('json') &&
+        <DropdownItem aria-label="Export prettified response">
+          {activeResponse.contentType.includes('json') && (
             <ItemContent
               icon="save"
               label="Export prettified response"
@@ -324,9 +364,9 @@ const PreviewModeDropdown = ({ activeResponse, previewMode, setPreviewMode }: {
                 fs.promises.writeFile(filePath, jsonPrettify(bodyBuffer.toString('utf8')));
               }}
             />
-          }
+          )}
         </DropdownItem>
-        <DropdownItem aria-label='Export HTTP debug'>
+        <DropdownItem aria-label="Export HTTP debug">
           <ItemContent
             icon="bug"
             label="Export HTTP debug"
@@ -350,7 +390,7 @@ const PreviewModeDropdown = ({ activeResponse, previewMode, setPreviewMode }: {
             }}
           />
         </DropdownItem>
-        <DropdownItem aria-label='Export as HAR'>
+        <DropdownItem aria-label="Export as HAR">
           <ItemContent
             icon="save"
             label="Export as HAR"
diff --git a/packages/insomnia/src/ui/components/mocks/mock-url-bar.tsx b/packages/insomnia/src/ui/components/mocks/mock-url-bar.tsx
index a1d839d5d5..a67e6d2eaa 100644
--- a/packages/insomnia/src/ui/components/mocks/mock-url-bar.tsx
+++ b/packages/insomnia/src/ui/components/mocks/mock-url-bar.tsx
@@ -16,7 +16,13 @@ import { showModal, showPrompt } from '../modals';
 import { AlertModal } from '../modals/alert-modal';
 import { GenerateCodeModal } from '../modals/generate-code-modal';
 
-export const MockUrlBar = ({ onPathUpdate, onSend }: { onPathUpdate: (path: string) => void; onSend: (path: string) => void }) => {
+export const MockUrlBar = ({
+  onPathUpdate,
+  onSend,
+}: {
+  onPathUpdate: (path: string) => void;
+  onSend: (path: string) => void;
+}) => {
   const { mockServer, mockRoute } = useRouteLoaderData(':mockRouteId') as MockRouteLoaderData;
   const { settings } = useRootLoaderData();
   const { hotKeyRegistry } = settings;
@@ -50,141 +56,154 @@ export const MockUrlBar = ({ onPathUpdate, onSend }: { onPathUpdate: (path: stri
     },
   });
   const isCancellable = currentInterval || currentTimeout;
-  return (<div className='w-full flex justify-between self-stretch'>
-    <Dropdown
-      ref={methodDropdownRef}
-      triggerButton={
-        <Button className="pad-right pad-left vertically-center hover:bg-[--color-surprise] focus:bg-[--color-surprise]">
-          <span className={`http-method-${mockRoute.method}`}>{mockRoute.method}</span>{' '}
-          <i className="fa fa-caret-down space-left" />
-        </Button>
-      }
-    >{HTTP_METHODS.map(method => (
-      <DropdownItem key={method}>
-        <ItemContent
-          className={`http-method-${method}`}
-          label={method}
-          onClick={() => patchMockRoute(mockRoute._id, { method })}
-        />
-      </DropdownItem>
-    ))}
-    </Dropdown>
-    <div className='flex p-1'>
-      <Button
-        className="bg-[--hl-sm] px-3 rounded-sm"
-        onPress={() => {
-          showModal(AlertModal, {
-            title: 'Full URL',
-            message: getMockServiceBinURL(mockServer, pathInput),
-            onConfirm: () => window.clipboard.writeText(getMockServiceBinURL(mockServer, pathInput)),
-            addCancel: true,
-            okLabel: 'Copy',
-          });
-        }}
-      >
-        <Icon icon="eye" /> Show URL
-      </Button>
-    </div>
-
-    <div className='flex flex-1 p-1 items-center'>
-      <input className='flex-1' onBlur={() => onPathUpdate(pathInput)} value={pathInput} onChange={e => setPathInput(e.currentTarget.value)} />
-    </div>
-    <div className='flex p-1'>
-      <Button
-        className="bg-[--hl-sm] px-3 rounded-sm aria-pressed:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs]"
-        onPress={() => {
-          window.clipboard.writeText(getMockServiceBinURL(mockServer, pathInput));
-        }}
-      >
-        <Icon icon="copy" />
-      </Button>
-      <Button
-        className="px-5 ml-1 text-[--color-font-surprise] bg-[--color-surprise] hover:bg-opacity-90 focus:bg-opacity-90 rounded-l-sm"
-        onPress={() => {
-          if (isCancellable) {
-            setCurrentInterval(null);
-            setCurrentTimeout(undefined);
-            return;
-          }
-          onSend(pathInput);
-        }}
-      >
-        {isCancellable ? 'Stop' : 'Test'}
-      </Button>
+  return (
+    <div className="flex w-full justify-between self-stretch">
       <Dropdown
-        key="dropdown"
-        className="flex"
-        ref={dropdownRef}
-        aria-label="Request Options"
-        closeOnSelect={false}
+        ref={methodDropdownRef}
         triggerButton={
-          <Button
-            className="px-1 bg-[--color-surprise] text-[--color-font-surprise] rounded-r-sm"
-            style={{
-              borderTopRightRadius: '0.125rem',
-              borderBottomRightRadius: '0.125rem',
-            }}
-          >
-            <i className="fa fa-caret-down" />
+          <Button className="pad-right pad-left vertically-center hover:bg-[--color-surprise] focus:bg-[--color-surprise]">
+            <span className={`http-method-${mockRoute.method}`}>{mockRoute.method}</span>{' '}
+            <i className="fa fa-caret-down space-left" />
           </Button>
         }
       >
-        <DropdownSection
-          aria-label="Basic Section"
-          title="Basic"
-        >
-          <DropdownItem aria-label="send-now">
-            <ItemContent icon="arrow-circle-o-right" label="Send Now" hint={hotKeyRegistry.request_send} onClick={send} />
-          </DropdownItem>
-          <DropdownItem aria-label='Generate Client Code'>
+        {HTTP_METHODS.map(method => (
+          <DropdownItem key={method}>
             <ItemContent
-              icon="code"
-              label="Generate Client Code"
-              onClick={async () => {
-                const request = await models.request.getByParentId(mockRoute._id);
-                request && showModal(GenerateCodeModal, { request: { ...request, url: getMockServiceBinURL(mockServer, pathInput) } });
-              }}
+              className={`http-method-${method}`}
+              label={method}
+              onClick={() => patchMockRoute(mockRoute._id, { method })}
             />
           </DropdownItem>
-        </DropdownSection>
-        <DropdownSection
-          aria-label="Advanced Section"
-          title="Advanced"
-        >
-          <DropdownItem aria-label='Send After Delay'>
-            <ItemContent
-              icon="clock-o"
-              label="Send After Delay"
-              onClick={() => showPrompt({
-                inputType: 'decimal',
-                title: 'Send After Delay',
-                label: 'Delay in seconds',
-                defaultValue: '3',
-                onComplete: seconds => {
-                  setCurrentTimeout(+seconds * 1000);
-                },
-              })}
-            />
-          </DropdownItem>
-          <DropdownItem aria-label='Repeat on Interval'>
-            <ItemContent
-              icon="repeat"
-              label="Repeat on Interval"
-              onClick={() => showPrompt({
-                inputType: 'decimal',
-                title: 'Send on Interval',
-                label: 'Interval in seconds',
-                defaultValue: '3',
-                submitName: 'Start',
-                onComplete: seconds => {
-                  setCurrentInterval(+seconds * 1000);
-                },
-              })}
-            />
-          </DropdownItem>
-        </DropdownSection>
-
+        ))}
       </Dropdown>
+      <div className="flex p-1">
+        <Button
+          className="rounded-sm bg-[--hl-sm] px-3"
+          onPress={() => {
+            showModal(AlertModal, {
+              title: 'Full URL',
+              message: getMockServiceBinURL(mockServer, pathInput),
+              onConfirm: () => window.clipboard.writeText(getMockServiceBinURL(mockServer, pathInput)),
+              addCancel: true,
+              okLabel: 'Copy',
+            });
+          }}
+        >
+          <Icon icon="eye" /> Show URL
+        </Button>
+      </div>
+
+      <div className="flex flex-1 items-center p-1">
+        <input
+          className="flex-1"
+          onBlur={() => onPathUpdate(pathInput)}
+          value={pathInput}
+          onChange={e => setPathInput(e.currentTarget.value)}
+        />
+      </div>
+      <div className="flex p-1">
+        <Button
+          className="rounded-sm bg-[--hl-sm] px-3 aria-pressed:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs]"
+          onPress={() => {
+            window.clipboard.writeText(getMockServiceBinURL(mockServer, pathInput));
+          }}
+        >
+          <Icon icon="copy" />
+        </Button>
+        <Button
+          className="ml-1 rounded-l-sm bg-[--color-surprise] px-5 text-[--color-font-surprise] hover:bg-opacity-90 focus:bg-opacity-90"
+          onPress={() => {
+            if (isCancellable) {
+              setCurrentInterval(null);
+              setCurrentTimeout(undefined);
+              return;
+            }
+            onSend(pathInput);
+          }}
+        >
+          {isCancellable ? 'Stop' : 'Test'}
+        </Button>
+        <Dropdown
+          key="dropdown"
+          className="flex"
+          ref={dropdownRef}
+          aria-label="Request Options"
+          closeOnSelect={false}
+          triggerButton={
+            <Button
+              className="rounded-r-sm bg-[--color-surprise] px-1 text-[--color-font-surprise]"
+              style={{
+                borderTopRightRadius: '0.125rem',
+                borderBottomRightRadius: '0.125rem',
+              }}
+            >
+              <i className="fa fa-caret-down" />
+            </Button>
+          }
+        >
+          <DropdownSection aria-label="Basic Section" title="Basic">
+            <DropdownItem aria-label="send-now">
+              <ItemContent
+                icon="arrow-circle-o-right"
+                label="Send Now"
+                hint={hotKeyRegistry.request_send}
+                onClick={send}
+              />
+            </DropdownItem>
+            <DropdownItem aria-label="Generate Client Code">
+              <ItemContent
+                icon="code"
+                label="Generate Client Code"
+                onClick={async () => {
+                  const request = await models.request.getByParentId(mockRoute._id);
+                  request &&
+                    showModal(GenerateCodeModal, {
+                      request: { ...request, url: getMockServiceBinURL(mockServer, pathInput) },
+                    });
+                }}
+              />
+            </DropdownItem>
+          </DropdownSection>
+          <DropdownSection aria-label="Advanced Section" title="Advanced">
+            <DropdownItem aria-label="Send After Delay">
+              <ItemContent
+                icon="clock-o"
+                label="Send After Delay"
+                onClick={() =>
+                  showPrompt({
+                    inputType: 'decimal',
+                    title: 'Send After Delay',
+                    label: 'Delay in seconds',
+                    defaultValue: '3',
+                    onComplete: seconds => {
+                      setCurrentTimeout(+seconds * 1000);
+                    },
+                  })
+                }
+              />
+            </DropdownItem>
+            <DropdownItem aria-label="Repeat on Interval">
+              <ItemContent
+                icon="repeat"
+                label="Repeat on Interval"
+                onClick={() =>
+                  showPrompt({
+                    inputType: 'decimal',
+                    title: 'Send on Interval',
+                    label: 'Interval in seconds',
+                    defaultValue: '3',
+                    submitName: 'Start',
+                    onComplete: seconds => {
+                      setCurrentInterval(+seconds * 1000);
+                    },
+                  })
+                }
+              />
+            </DropdownItem>
+          </DropdownSection>
+        </Dropdown>
+      </div>
     </div>
-  </div>);
+  );
 };
diff --git a/packages/insomnia/src/ui/components/modals/__tests__/upload-runner-data-modal.test.ts b/packages/insomnia/src/ui/components/modals/__tests__/upload-runner-data-modal.test.ts
index c5bf44b0e8..db4fc57555 100644
--- a/packages/insomnia/src/ui/components/modals/__tests__/upload-runner-data-modal.test.ts
+++ b/packages/insomnia/src/ui/components/modals/__tests__/upload-runner-data-modal.test.ts
@@ -3,36 +3,35 @@ import { describe, expect, it } from 'vitest';
 import { genPreviewTableData } from '../upload-runner-data-modal';
 
 describe('test generate table preview data ', () => {
-
   it('test normal json input', () => {
     const uploadData = [
       {
-        'position': 0,
-        'value': 'value0',
+        position: 0,
+        value: 'value0',
       },
       {
-        'position': 1,
-        'value': 'value1',
+        position: 1,
+        value: 'value1',
       },
       {
-        'position': 2,
-        'valeu': 'value-typo',
+        position: 2,
+        valeu: 'value-typo',
       },
     ];
     const { data, headers } = genPreviewTableData(uploadData);
     expect(headers).toEqual(['position', 'value', 'valeu']);
     expect(data).toEqual([
       {
-        'position': 0,
-        'value': 'value0',
+        position: 0,
+        value: 'value0',
       },
       {
-        'position': 1,
-        'value': 'value1',
+        position: 1,
+        value: 'value1',
       },
       {
-        'position': 2,
-        'valeu': 'value-typo',
+        position: 2,
+        valeu: 'value-typo',
       },
     ]);
   });
@@ -40,8 +39,8 @@ describe('test generate table preview data ', () => {
   it('test complex json input', () => {
     const uploadData = [
       {
-        'position': 0,
-        'value': 'value0',
+        position: 0,
+        value: 'value0',
       },
       'invalid',
       undefined,
@@ -53,19 +52,14 @@ describe('test generate table preview data ', () => {
     expect(headers).toEqual(['position', 'value']);
     expect(data).toEqual([
       {
-        'position': 0,
-        'value': 'value0',
+        position: 0,
+        value: 'value0',
       },
     ]);
   });
 
   it('test invalid json input', () => {
-    const uploadData = [
-      'invalid',
-      [1, 2, 3],
-      undefined,
-      null,
-    ];
+    const uploadData = ['invalid', [1, 2, 3], undefined, null];
     // @ts-expect-error test inalid input
     const { data, headers } = genPreviewTableData(uploadData);
     expect(headers.length).toBe(0);
diff --git a/packages/insomnia/src/ui/components/modals/add-key-combination-modal.tsx b/packages/insomnia/src/ui/components/modals/add-key-combination-modal.tsx
index c28c1f2fc9..2471205234 100644
--- a/packages/insomnia/src/ui/components/modals/add-key-combination-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/add-key-combination-modal.tsx
@@ -28,15 +28,19 @@ export const AddKeyCombinationModal = forwardRef<AddKeyCombinationModalHandle, M
     pressedKeyCombination: null,
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setState(options);
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setState(options);
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     event.preventDefault();
@@ -101,17 +105,21 @@ export const AddKeyCombinationModal = forwardRef<AddKeyCombinationModalHandle, M
     hidden: !isDuplicate,
   });
   return (
-    <Modal
-      ref={modalRef}
-      className="shortcuts add-key-comb-modal"
-    >
+    <Modal ref={modalRef} className="shortcuts add-key-comb-modal">
       <ModalHeader>Add Keyboard Shortcut</ModalHeader>
       <ModalBody noScroll>
         <div className="pad-left pad-right pad-top pad-bottom-sm">
           <div className="form-control form-control--outlined">
             <label>
               Press desired key combination and then press ENTER.
-              <input onKeyDown={handleKeyDown} autoFocus type="text" className="key-comb" value={keyCombDisplay} readOnly />
+              <input
+                onKeyDown={handleKeyDown}
+                autoFocus
+                type="text"
+                className="key-comb"
+                value={keyCombDisplay}
+                readOnly
+              />
             </label>
           </div>
         </div>
diff --git a/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx b/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx
index 2edcde2c6a..ef0a06bde2 100644
--- a/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/add-request-to-collection-modal.tsx
@@ -50,8 +50,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
     modalRef.current?.show();
   }, []);
 
-  const isBtnDisabled = requestFetcher.state !== 'idle'
-    || !selectedProjectId || !selectedWorkspaceId;
+  const isBtnDisabled = requestFetcher.state !== 'idle' || !selectedProjectId || !selectedWorkspaceId;
 
   const previousRequestFetcherState = useRef('idle');
 
@@ -86,7 +85,8 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
               <select name="projectId" value={selectedProjectId} onChange={e => setSelectedProjectId(e.target.value)}>
                 {projectOptions.map(project => (
                   <option key={project._id} value={project._id}>
-                    {project.name}{project._id === currentProjectId && ' (current)'}
+                    {project.name}
+                    {project._id === currentProjectId && ' (current)'}
                   </option>
                 ))}
               </select>
@@ -106,10 +106,16 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
           <div className="form-control form-control--outlined">
             <label>
               {strings.collection.plural}:
-              <select aria-label='Select Workspace' name="workspaceId" value={selectedWorkspaceId} onChange={e => setSelectedWorkspaceId(e.target.value)}>
+              <select
+                aria-label="Select Workspace"
+                name="workspaceId"
+                value={selectedWorkspaceId}
+                onChange={e => setSelectedWorkspaceId(e.target.value)}
+              >
                 {workspaceOptions.map(workspace => (
                   <option aria-label={workspace.name} key={workspace._id} value={workspace._id}>
-                    {workspace.name}{workspace._id === currentWorkspaceId && ' (current)'}
+                    {workspace.name}
+                    {workspace._id === currentWorkspaceId && ' (current)'}
                   </option>
                 ))}
               </select>
@@ -126,9 +132,7 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
             </p>
           )}
           {requestFetcher.data?.error && (
-            <p className="notice error margin-bottom-sm mt-6">
-              {requestFetcher.data.error}
-            </p>
+            <p className="notice error margin-bottom-sm mt-6">{requestFetcher.data.error}</p>
           )}
         </ModalBody>
         <ModalFooter>
@@ -140,13 +144,8 @@ export const AddRequestToCollectionModal: FC<AddRequestModalProps> = ({ onHide }
             >
               Cancel
             </button>
-            <button
-              disabled={isBtnDisabled}
-              form="workspace-duplicate-form"
-              className="btn"
-              onClick={createNewRequest}
-            >
-              {requestFetcher.state !== 'idle' && <Icon icon='spinner' className='animate-spin' />} Add
+            <button disabled={isBtnDisabled} form="workspace-duplicate-form" className="btn" onClick={createNewRequest}>
+              {requestFetcher.state !== 'idle' && <Icon icon="spinner" className="animate-spin" />} Add
             </button>
           </div>
         </ModalFooter>
diff --git a/packages/insomnia/src/ui/components/modals/alert-modal.tsx b/packages/insomnia/src/ui/components/modals/alert-modal.tsx
index 7e23aee912..cdbc8ce863 100644
--- a/packages/insomnia/src/ui/components/modals/alert-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/alert-modal.tsx
@@ -28,36 +28,32 @@ export const AlertModal = forwardRef<AlertModalHandle, ModalProps>((_, ref) => {
     bodyClassName: '',
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: ({ title, message, addCancel, onConfirm, okLabel, bodyClassName = '' }) => {
-      setState({
-        title,
-        message,
-        addCancel,
-        okLabel,
-        onConfirm,
-        bodyClassName,
-      });
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: ({ title, message, addCancel, onConfirm, okLabel, bodyClassName = '' }) => {
+        setState({
+          title,
+          message,
+          addCancel,
+          okLabel,
+          onConfirm,
+          bodyClassName,
+        });
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
   const { message, title, addCancel, okLabel, bodyClassName } = state;
   return (
     <Modal ref={modalRef}>
       <ModalHeader>{title || 'Uh Oh!'}</ModalHeader>
-      <ModalBody
-        className={classnames([
-          'wide',
-          'pad',
-          bodyClassName,
-        ])}
-      >
-        {message}
-      </ModalBody>
+      <ModalBody className={classnames(['wide', 'pad', bodyClassName])}>{message}</ModalBody>
       <ModalFooter>
         <div>
           {addCancel ? (
diff --git a/packages/insomnia/src/ui/components/modals/ask-modal.tsx b/packages/insomnia/src/ui/components/modals/ask-modal.tsx
index 4391f3e794..2cc8e53d03 100644
--- a/packages/insomnia/src/ui/components/modals/ask-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/ask-modal.tsx
@@ -32,32 +32,36 @@ export const AskModal = forwardRef<AskModalHandle, ModalProps>((_, ref) => {
     yesText: 'Yes',
     noText: 'No',
     color: 'surprise',
-    onDone: async () => { },
+    onDone: async () => {},
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: ({ title, message, onDone, yesText, noText, color }) => {
-      setState({
-        title: title || 'Confirm',
-        message: message || 'No message provided',
-        yesText: yesText || 'Yes',
-        noText: noText || 'No',
-        color: color || 'surprise',
-        onDone,
-      });
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: ({ title, message, onDone, yesText, noText, color }) => {
+        setState({
+          title: title || 'Confirm',
+          message: message || 'No message provided',
+          yesText: yesText || 'Yes',
+          noText: noText || 'No',
+          color: color || 'surprise',
+          onDone,
+        });
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
   const { message, title, yesText, noText, color, onDone } = state;
   return (
     <Modal ref={modalRef}>
       <ModalHeader>{title || 'Confirm?'}</ModalHeader>
       <ModalBody className="wide pad">{message}</ModalBody>
       <ModalFooter>
-        <div className='flex items-center gap-4'>
+        <div className="flex items-center gap-4">
           <button
             className="btn"
             onClick={() => {
diff --git a/packages/insomnia/src/ui/components/modals/cli-preview-modal.tsx b/packages/insomnia/src/ui/components/modals/cli-preview-modal.tsx
index 4127d48540..8b8daceb7a 100644
--- a/packages/insomnia/src/ui/components/modals/cli-preview-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/cli-preview-modal.tsx
@@ -6,7 +6,12 @@ import type { WorkspaceLoaderData } from '../../routes/workspace';
 import { CopyButton } from '../base/copy-button';
 import { Icon } from '../icon';
 
-function generateCommandArgumentsForRequests(workspaceId: string, targetFolderId: string | null, requestIds: string[], keepManualOrder: boolean) {
+function generateCommandArgumentsForRequests(
+  workspaceId: string,
+  targetFolderId: string | null,
+  requestIds: string[],
+  keepManualOrder: boolean,
+) {
   const shortWorkspaceId = workspaceId.slice(0, 10);
 
   if (targetFolderId !== null && targetFolderId !== '') {
@@ -17,15 +22,40 @@ function generateCommandArgumentsForRequests(workspaceId: string, targetFolderId
   return keepManualOrder ? shortWorkspaceId : shortWorkspaceId + ' -i ' + requestIds.join(' -i ');
 }
 
-export const CLIPreviewModal = ({ onClose, requestIds, targetFolderId, keepManualOrder, iterationCount, delay, filePath, bail }: { onClose: () => void; requestIds: string[]; targetFolderId: string | null; keepManualOrder: boolean; iterationCount: number; delay: number; filePath: string; bail: boolean }) => {
+export const CLIPreviewModal = ({
+  onClose,
+  requestIds,
+  targetFolderId,
+  keepManualOrder,
+  iterationCount,
+  delay,
+  filePath,
+  bail,
+}: {
+  onClose: () => void;
+  requestIds: string[];
+  targetFolderId: string | null;
+  keepManualOrder: boolean;
+  iterationCount: number;
+  delay: number;
+  filePath: string;
+  bail: boolean;
+}) => {
   const { workspaceId } = useParams() as { workspaceId: string };
   const { activeEnvironment, activeGlobalEnvironment } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
-  const workspaceIdAndRequestIds = generateCommandArgumentsForRequests(workspaceId, targetFolderId, requestIds, keepManualOrder);
+  const workspaceIdAndRequestIds = generateCommandArgumentsForRequests(
+    workspaceId,
+    targetFolderId,
+    requestIds,
+    keepManualOrder,
+  );
   const iterationCountArgument = iterationCount > 1 ? ` -n ${iterationCount}` : '';
   const delayArgument = delay > 0 ? ` --delay-request ${delay}` : '';
   const iterationFilePath = filePath ? ` -d "${filePath}"` : '';
   const bailArgument = bail ? ' --bail' : '';
-  const globalEnvironmentArgument = activeGlobalEnvironment ? ` --globals ${activeGlobalEnvironment._id.slice(0, 10)}` : '';
+  const globalEnvironmentArgument = activeGlobalEnvironment
+    ? ` --globals ${activeGlobalEnvironment._id.slice(0, 10)}`
+    : '';
   const cliCommand = `inso run collection ${workspaceIdAndRequestIds} -e ${activeEnvironment._id.slice(0, 10)}${globalEnvironmentArgument}${iterationCountArgument}${delayArgument}${iterationFilePath}${bailArgument}`;
 
   return (
@@ -35,32 +65,32 @@ export const CLIPreviewModal = ({ onClose, requestIds, targetFolderId, keepManua
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-start justify-center bg-black/30"
     >
       <Modal
-        className="max-w-[75%] max-h-[75%] overflow-auto flex flex-col w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font] m-24"
+        className="m-24 flex max-h-[75%] w-full max-w-[75%] flex-col overflow-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Run via CLI</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Run via CLI
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className="h-full w-full text-md flex-row p-2">
+              <div className="text-md h-full w-full flex-row p-2">
                 <div className="pb-4">Copy this command to run your collection in the terminal</div>
-                <div className="max-h-32 flex flex-col overflow-y-auto min-h-[2em] bg-[--hl-xs] px-2 py-1 border border-solid border-[--hl-sm]">
-                  <div className="flex justify-between overflow-auto relative h-full gap-[var(--padding-sm)] w-full font-mono">
+                <div className="flex max-h-32 min-h-[2em] flex-col overflow-y-auto border border-solid border-[--hl-sm] bg-[--hl-xs] px-2 py-1">
+                  <div className="relative flex h-full w-full justify-between gap-[var(--padding-sm)] overflow-auto font-mono">
                     <span>{cliCommand}</span>
 
                     <CopyButton
@@ -68,16 +98,16 @@ export const CLIPreviewModal = ({ onClose, requestIds, targetFolderId, keepManua
                       content={cliCommand}
                       title="Copy Command"
                       confirmMessage=""
-                      className='self-start sticky top-0'
+                      className="sticky top-0 self-start"
                     >
                       <i className="fa fa-copy" />
                     </CopyButton>
                   </div>
                 </div>
               </div>
-              <div className="flex justify-end mt-2">
+              <div className="mt-2 flex justify-end">
                 <Button
-                  className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--hl] transition-colors rounded-sm"
+                  className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--hl] transition-colors hover:bg-opacity-90 hover:no-underline"
                   onPress={close}
                 >
                   Close
diff --git a/packages/insomnia/src/ui/components/modals/code-prompt-modal.tsx b/packages/insomnia/src/ui/components/modals/code-prompt-modal.tsx
index 6213cb2833..7c5b6d14a3 100644
--- a/packages/insomnia/src/ui/components/modals/code-prompt-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/code-prompt-modal.tsx
@@ -52,37 +52,31 @@ export const CodePromptModal = forwardRef<CodePromptModalHandle, ModalProps>((_,
     hideMode: false,
     enableRender: false,
     showCopyButton: false,
-    onChange: () => { },
-    onModeChange: () => { },
+    onChange: () => {},
+    onModeChange: () => {},
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      const realMode = typeof options.mode === 'string' ? options.mode : 'text/plain';
-      setState(state => ({
-        ...options,
-        mode: realMode || state.mode || 'text/plain',
-      }));
-      modalRef.current?.show();
-    },
-    setError: (error: string) => setError(error),
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        const realMode = typeof options.mode === 'string' ? options.mode : 'text/plain';
+        setState(state => ({
+          ...options,
+          mode: realMode || state.mode || 'text/plain',
+        }));
+        modalRef.current?.show();
+      },
+      setError: (error: string) => setError(error),
+    }),
+    [],
+  );
 
-  const {
-    submitName,
-    title,
-    placeholder,
-    defaultValue,
-    hint,
-    mode,
-    hideMode,
-    enableRender,
-    showCopyButton,
-    onChange,
-  } = state;
+  const { submitName, title, placeholder, defaultValue, hint, mode, hideMode, enableRender, showCopyButton, onChange } =
+    state;
 
   return (
     <Modal ref={modalRef} tall>
@@ -93,13 +87,13 @@ export const CodePromptModal = forwardRef<CodePromptModalHandle, ModalProps>((_,
         style={
           showCopyButton
             ? {
-              display: 'grid',
-              gridTemplateColumns: 'minmax(0, 1fr)',
-              gridTemplateRows: 'auto minmax(0, 1fr)',
-            }
+                display: 'grid',
+                gridTemplateColumns: 'minmax(0, 1fr)',
+                gridTemplateRows: 'auto minmax(0, 1fr)',
+              }
             : {
-              minHeight: '10rem',
-            }
+                minHeight: '10rem',
+              }
         }
       >
         <NunjucksEnabledProvider disable={!enableRender}>
@@ -119,17 +113,17 @@ export const CodePromptModal = forwardRef<CodePromptModalHandle, ModalProps>((_,
               />
             </div>
           ) : (
-              <div className="tall bg-[--hl-xs] rounded">
-                <CodeEditor
-                  id="code-prompt-modal"
-                  hideLineNumbers
-                  showPrettifyButton
-                  defaultValue={defaultValue}
-                  placeholder={placeholder}
-                  onChange={onChange}
-                  mode={mode}
-                  enableNunjucks
-                />
+            <div className="tall rounded bg-[--hl-xs]">
+              <CodeEditor
+                id="code-prompt-modal"
+                hideLineNumbers
+                showPrettifyButton
+                defaultValue={defaultValue}
+                placeholder={placeholder}
+                onChange={onChange}
+                mode={mode}
+                enableNunjucks
+              />
             </div>
           )}
         </NunjucksEnabledProvider>
@@ -137,23 +131,17 @@ export const CodePromptModal = forwardRef<CodePromptModalHandle, ModalProps>((_,
       <ModalFooter>
         {!hideMode ? (
           <Dropdown
-            aria-label='Select a mode'
+            aria-label="Select a mode"
             triggerButton={
-              <Button className="!hover:no-underline !bg-transparent !hover:bg-opacity-90 !border !border-solid !border-[--hl-md] !py-2 !px-3 !text-[--color-font] !transition-colors !rounded-sm">
+              <Button className="!hover:no-underline !hover:bg-opacity-90 !rounded-sm !border !border-solid !border-[--hl-md] !bg-transparent !px-3 !py-2 !text-[--color-font] !transition-colors">
                 {MODES[mode]}
                 <i className="fa fa-caret-down space-left" />
               </Button>
             }
           >
-            <DropdownSection
-              aria-label="Editor Syntax"
-              title="Editor Syntax"
-            >
+            <DropdownSection aria-label="Editor Syntax" title="Editor Syntax">
               {Object.keys(MODES).map(mode => (
-                <DropdownItem
-                  key={mode}
-                  aria-label={MODES[mode]}
-                >
+                <DropdownItem key={mode} aria-label={MODES[mode]}>
                   <ItemContent
                     icon="code"
                     label={MODES[mode]}
@@ -167,9 +155,18 @@ export const CodePromptModal = forwardRef<CodePromptModalHandle, ModalProps>((_,
             </DropdownSection>
           </Dropdown>
         ) : null}
-        <div className="margin-left faint italic txt-sm">{hint ? `* ${hint}` : ''}</div>
-        {error !== '' && <p className="notice error w-full" style={{ marginTop: 0, marginBottom: 0 }}>{error}</p>}
-        <button className="btn" onClick={() => modalRef.current?.hide()} disabled={error !== ''} aria-label='Modal Submit'>
+        <div className="margin-left faint txt-sm italic">{hint ? `* ${hint}` : ''}</div>
+        {error !== '' && (
+          <p className="notice error w-full" style={{ marginTop: 0, marginBottom: 0 }}>
+            {error}
+          </p>
+        )}
+        <button
+          className="btn"
+          onClick={() => modalRef.current?.hide()}
+          disabled={error !== ''}
+          aria-label="Modal Submit"
+        >
           {submitName || 'Submit'}
         </button>
       </ModalFooter>
diff --git a/packages/insomnia/src/ui/components/modals/cookies-modal.tsx b/packages/insomnia/src/ui/components/modals/cookies-modal.tsx
index e872180ec9..a4dba1609d 100644
--- a/packages/insomnia/src/ui/components/modals/cookies-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/cookies-modal.tsx
@@ -1,7 +1,22 @@
 import clone from 'clone';
 import { isValid } from 'date-fns';
 import React, { useState } from 'react';
-import { Button, Dialog, Group, Heading, Input, ListBox, ListBoxItem, Modal, ModalOverlay, Tab, TabList, TabPanel, Tabs, TextField } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  Group,
+  Heading,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Modal,
+  ModalOverlay,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 import { Cookie as ToughCookie } from 'tough-cookie';
 import { v4 as uuidv4 } from 'uuid';
@@ -36,7 +51,11 @@ interface Props {
 export const CookiesModal = ({ setIsOpen }: Props) => {
   const { handleRender } = useNunjucks();
 
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const { activeCookieJar } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
   const updateCookieJarFetcher = useFetcher<CookieJar>();
 
@@ -58,7 +77,7 @@ export const CookiesModal = ({ setIsOpen }: Props) => {
     setFilter(value);
     const renderedCookies: Cookie[] = [];
 
-    for (const cookie of (activeCookieJar?.cookies || [])) {
+    for (const cookie of activeCookieJar?.cookies || []) {
       try {
         renderedCookies.push(await handleRender(cookie));
       } catch (err) {
@@ -97,16 +116,19 @@ export const CookiesModal = ({ setIsOpen }: Props) => {
 
   const handleAddCookie = () => {
     const updatedActiveCookieJar = activeCookieJar;
-    updatedActiveCookieJar.cookies = [{
-      id: uuidv4(),
-      key: 'foo',
-      value: 'bar',
-      domain: 'domain.com',
-      expires: MAX_TIME as unknown as Date,
-      path: '/',
-      secure: false,
-      httpOnly: false,
-    }, ...activeCookieJar.cookies];
+    updatedActiveCookieJar.cookies = [
+      {
+        id: uuidv4(),
+        key: 'foo',
+        value: 'bar',
+        domain: 'domain.com',
+        expires: MAX_TIME as unknown as Date,
+        path: '/',
+        secure: false,
+        httpOnly: false,
+      },
+      ...activeCookieJar.cookies,
+    ];
 
     updateCookieJar(activeCookieJar._id, updatedActiveCookieJar);
   };
@@ -140,23 +162,21 @@ export const CookiesModal = ({ setIsOpen }: Props) => {
       isDismissable={true}
       isOpen={true}
       onOpenChange={setIsOpen}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-[--color-bg] theme--transparent-overlay"
+      className="theme--transparent-overlay fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-[--color-bg]"
     >
-      <Modal className="fixed top-[100px] w-full max-w-[900px] rounded-md border border-solid border-[--hl-sm] p-[32px] h-fit bg-[--color-bg] text-[--color-font] theme--dialog">
-        <Dialog className="outline-none relative">
+      <Modal className="theme--dialog fixed top-[100px] h-fit w-full max-w-[900px] rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[32px] text-[--color-font]">
+        <Dialog className="relative outline-none">
           {({ close }) => (
             <>
               {activeCookieJar && (
                 <div className="flex flex-col gap-4">
-                  <Heading slot="title" className="text-[22px] leading-[34px] mb-[14px]">
+                  <Heading slot="title" className="mb-[14px] text-[22px] leading-[34px]">
                     Manage Cookies
                   </Heading>
-                  <Button onPress={close} className="fa fa-times absolute top-0 right-0 text-xl" />
+                  <Button onPress={close} className="fa fa-times absolute right-0 top-0 text-xl" />
 
-                  <div className='flex gap-4 justify-between'>
-                    <Group
-                      className="w-[50%] bg-[--hl-xs] py-[4px] px-[8px] rounded flex items-center gap-2"
-                    >
+                  <div className="flex justify-between gap-4">
+                    <Group className="flex w-[50%] items-center gap-2 rounded bg-[--hl-xs] px-[8px] py-[4px]">
                       <i className="fa fa-search" />
                       <TextField
                         value={filter}
@@ -164,69 +184,65 @@ export const CookiesModal = ({ setIsOpen }: Props) => {
                         aria-label="Cookie search query"
                         className="flex-1"
                       >
-                        <Input
-                          className="w-full"
-                          placeholder="Search cookies"
-                        />
+                        <Input className="w-full" placeholder="Search cookies" />
                       </TextField>
                       {filter && (
                         <Button onPress={() => handleFilterChange('')}>
-                          <Icon icon="circle-xmark" className='h-4 w-4' />
+                          <Icon icon="circle-xmark" className="h-4 w-4" />
                         </Button>
                       )}
                     </Group>
-                    <div className="flex gap-4 items-end">
+                    <div className="flex items-end gap-4">
                       <Button
-                        className="flex items-center gap-2 min-w-[75px] py-1 px-2 font-semibold aria-pressed:bg-[--hl-sm] text-[--color-font] transition-all text-sm"
+                        className="flex min-w-[75px] items-center gap-2 px-2 py-1 text-sm font-semibold text-[--color-font] transition-all aria-pressed:bg-[--hl-sm]"
                         onPress={handleAddCookie}
                       >
                         <Icon icon="plus" /> Add Cookie
                       </Button>
                       <PromptButton
-                        className="flex items-center gap-2 min-w-[85px] py-1 px-2 font-semibold aria-pressed:bg-[--hl-sm] text-[--color-font] transition-all text-sm"
-                        confirmMessage='Confirm'
+                        className="flex min-w-[85px] items-center gap-2 px-2 py-1 text-sm font-semibold text-[--color-font] transition-all aria-pressed:bg-[--hl-sm]"
+                        confirmMessage="Confirm"
                         onClick={handleDeleteAll}
                       >
                         <Icon icon="trash" /> Delete All
                       </PromptButton>
                     </div>
                   </div>
-                  <hr className="border my-[14px]" />
-                  {filteredCookies.length === 0 ?
-                    (<div className='flex items-center justify-center h-[200px]'>
-                      <p className="text-[12px] text-[--color-font]">{filter ? `No cookies match your search: "${filter}"` : 'No cookies found.'}</p>
-                    </div>)
-                    : (
-                      <>
-                        <CookieList
-                          cookies={filteredCookies[page] || []}
-                          onCookieDelete={handleCookieDelete}
-                          onUpdateCookie={handleCookieUpdate}
-                        />
-                        <PaginationBar
-                          isPrevDisabled={page === 0}
-                          isNextDisabled={filteredCookies.length === 1 || page === filteredCookies.length - 1}
-                          isHidden={filteredCookies.length === 1}
-                          page={page + 1}
-                          totalPages={filteredCookies.length}
-                          onPrevPress={() => {
-                            setPage(page - 1);
-                          }}
-                          onNextPress={() => {
-                            setPage(page + 1);
-                          }}
-                        />
-                      </>
-                    )
-                  }
+                  <hr className="my-[14px] border" />
+                  {filteredCookies.length === 0 ? (
+                    <div className="flex h-[200px] items-center justify-center">
+                      <p className="text-[12px] text-[--color-font]">
+                        {filter ? `No cookies match your search: "${filter}"` : 'No cookies found.'}
+                      </p>
+                    </div>
+                  ) : (
+                    <>
+                      <CookieList
+                        cookies={filteredCookies[page] || []}
+                        onCookieDelete={handleCookieDelete}
+                        onUpdateCookie={handleCookieUpdate}
+                      />
+                      <PaginationBar
+                        isPrevDisabled={page === 0}
+                        isNextDisabled={filteredCookies.length === 1 || page === filteredCookies.length - 1}
+                        isHidden={filteredCookies.length === 1}
+                        page={page + 1}
+                        totalPages={filteredCookies.length}
+                        onPrevPress={() => {
+                          setPage(page - 1);
+                        }}
+                        onNextPress={() => {
+                          setPage(page + 1);
+                        }}
+                      />
+                    </>
+                  )}
                 </div>
               )}
-              <div className='flex items-center justify-between gap-3 mt-[2rem]'>
-                <div className="italic text-[12px]">
-                  * cookies are automatically sent with relevant requests
-                </div>
+              <div className="mt-[2rem] flex items-center justify-between gap-3">
+                <div className="text-[12px] italic">* cookies are automatically sent with relevant requests</div>
                 <Button
-                  className="text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
                   onPress={close}
                 >
                   Done
@@ -251,10 +267,7 @@ const CookieList = ({ cookies, onCookieDelete, onUpdateCookie }: CookieListProps
 
   return (
     <>
-      <ListBox
-        aria-label="Cookies list"
-        className="flex flex-col w-full min-h-[200px]"
-      >
+      <ListBox aria-label="Cookies list" className="flex min-h-[200px] w-full flex-col">
         {cookies.map((cookie, index) => {
           const cookieJSON = ToughCookie.fromJSON(cookie);
           const cookieString = cookieJSON ? cookieToString(cookieJSON) : '';
@@ -269,21 +282,25 @@ const CookieList = ({ cookies, onCookieDelete, onUpdateCookie }: CookieListProps
               id={cookie.id}
               data-testid={`cookie-test-iteration-${index}`}
               textValue={cookie.domain}
-              className='flex justify-between outline-none gap-2 leading-[36px] odd:bg-[--hl-xs] px-2 py-1 rounded-sm min-h-[40px]'
+              className="flex min-h-[40px] justify-between gap-2 rounded-sm px-2 py-1 leading-[36px] outline-none odd:bg-[--hl-xs]"
             >
-              <span className='flex items-center leading-relaxed min-w-[20%] break-all'><RenderedText>{cookie.domain || ''}</RenderedText></span>
-              <span className='flex items-center leading-relaxed w-[70%] break-all'><RenderedText>{cookieString || ''}</RenderedText></span>
-              <div className='flex gap-1 min-w-[10%] items-center justify-end'>
+              <span className="flex min-w-[20%] items-center break-all leading-relaxed">
+                <RenderedText>{cookie.domain || ''}</RenderedText>
+              </span>
+              <span className="flex w-[70%] items-center break-all leading-relaxed">
+                <RenderedText>{cookieString || ''}</RenderedText>
+              </span>
+              <div className="flex min-w-[10%] items-center justify-end gap-1">
                 <Button
-                  className="flex items-center gap-2 min-w-[35px] py-1 px-2 justify-center font-semibold aria-pressed:bg-[--hl-sm] text-[--color-font] transition-all text-sm"
+                  className="flex min-w-[35px] items-center justify-center gap-2 px-2 py-1 text-sm font-semibold text-[--color-font] transition-all aria-pressed:bg-[--hl-sm]"
                   onPress={() => setCookieToEdit(cookie)}
                 >
                   Edit
                 </Button>
                 <PromptButton
-                  className="flex items-center gap-2 min-w-[15px] py-1 px-2 font-semibold aria-pressed:bg-[--hl-sm] text-[--color-font] transition-all text-sm"
+                  className="flex min-w-[15px] items-center gap-2 px-2 py-1 text-sm font-semibold text-[--color-font] transition-all aria-pressed:bg-[--hl-sm]"
                   confirmMessage=""
-                  doneMessage=''
+                  doneMessage=""
                   onClick={() => onCookieDelete(cookie.id)}
                   title="Delete cookie"
                 >
@@ -294,12 +311,14 @@ const CookieList = ({ cookies, onCookieDelete, onUpdateCookie }: CookieListProps
           );
         })}
       </ListBox>
-      {cookieToEdit && <CookieModifyModal
-        isOpen={cookieToEdit !== null}
-        cookie={cookieToEdit as Cookie}
-        setIsOpen={() => setCookieToEdit(null)}
-        onUpdateCookie={onUpdateCookie}
-      />}
+      {cookieToEdit && (
+        <CookieModifyModal
+          isOpen={cookieToEdit !== null}
+          cookie={cookieToEdit as Cookie}
+          setIsOpen={() => setCookieToEdit(null)}
+          onUpdateCookie={onUpdateCookie}
+        />
+      )}
     </>
   );
 };
@@ -314,7 +333,15 @@ interface PaginationBarProps {
   onNextPress?: () => void;
 }
 
-const PaginationBar = ({ isNextDisabled, isPrevDisabled, isHidden, page, totalPages, onPrevPress, onNextPress }: PaginationBarProps) => {
+const PaginationBar = ({
+  isNextDisabled,
+  isPrevDisabled,
+  isHidden,
+  page,
+  totalPages,
+  onPrevPress,
+  onNextPress,
+}: PaginationBarProps) => {
   if (isHidden) {
     return null;
   }
@@ -328,13 +355,19 @@ const PaginationBar = ({ isNextDisabled, isPrevDisabled, isHidden, page, totalPa
           className="flex h-[25px] items-center justify-center gap-[5px] p-1"
           onPress={onPrevPress}
         >
-          <Icon icon="arrow-left" className="h-[12px] w-[12px] text text-[--color-font] disabled:text-[#00000080]" />
-          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">Previous</p>
+          <Icon icon="arrow-left" className="text h-[12px] w-[12px] text-[--color-font] disabled:text-[#00000080]" />
+          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">
+            Previous
+          </p>
         </Button>
-        <div className="flex gap-2 items-center">
-          <p className="m-0 text-[10px] font-normal leading-[15px] text-[--color-font] disabled:text-[#00000080]">{page}</p>
+        <div className="flex items-center gap-2">
+          <p className="m-0 text-[10px] font-normal leading-[15px] text-[--color-font] disabled:text-[#00000080]">
+            {page}
+          </p>
           <p className="m-0 text-[10px] font-normal leading-[15px] text-[--color-font] disabled:text-[#00000080]">of</p>
-          <p className="m-0 text-[10px] font-normal leading-[15px] text-[--color-font] disabled:text-[#00000080]">{totalPages}</p>
+          <p className="m-0 text-[10px] font-normal leading-[15px] text-[--color-font] disabled:text-[#00000080]">
+            {totalPages}
+          </p>
         </div>
         <Button
           isDisabled={isNextDisabled}
@@ -342,7 +375,9 @@ const PaginationBar = ({ isNextDisabled, isPrevDisabled, isHidden, page, totalPa
           className="flex h-[25px] items-center justify-center gap-[5px] p-1"
           onPress={onNextPress}
         >
-          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">Next</p>
+          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">
+            Next
+          </p>
           <Icon icon="arrow-right" className="h-[12px] w-[12px] text-[--color-font] disabled:text-[#00000080]" />
         </Button>
       </div>
@@ -357,7 +392,7 @@ interface CookieModifyModalProps {
   onUpdateCookie: (cookie: Cookie) => void;
 }
 
-const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: CookieModifyModalProps) => {
+const CookieModifyModal = ({ cookie, isOpen, setIsOpen, onUpdateCookie }: CookieModifyModalProps) => {
   const [editCookie, setEditCookie] = useState<Cookie>(cookie);
 
   let localDateTime: string;
@@ -383,43 +418,46 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
       isDismissable={true}
       isOpen={isOpen}
       onOpenChange={setIsOpen}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-[--color-bg] theme--transparent-overlay"
+      className="theme--transparent-overlay fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-[--color-bg]"
     >
-      <Modal className="fixed top-[100px] w-full max-w-[900px] rounded-md border border-solid border-[--hl-sm] p-[32px] h-fit bg-[--color-bg] text-[--color-font] theme--dialog">
-        <Dialog className="outline-none relative">
+      <Modal className="theme--dialog fixed top-[100px] h-fit w-full max-w-[900px] rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[32px] text-[--color-font]">
+        <Dialog className="relative outline-none">
           {({ close }) => (
             <>
               {editCookie && (
                 <>
                   <div className="flex flex-col gap-4">
-                    <Heading slot="title" className="text-[22px] leading-[34px] mb-[14px]">
+                    <Heading slot="title" className="mb-[14px] text-[22px] leading-[34px]">
                       Manage Cookies
                     </Heading>
-                    <Button onPress={close} className="fa fa-times absolute top-0 right-0 text-xl" />
+                    <Button onPress={close} className="fa fa-times absolute right-0 top-0 text-xl" />
 
-                    <Tabs aria-label='Cookie modify tabs' className="flex-1 w-full h-full flex flex-col">
-                      <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+                    <Tabs aria-label="Cookie modify tabs" className="flex h-full w-full flex-1 flex-col">
+                      <TabList
+                        className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+                        aria-label="Request pane tabs"
+                      >
                         <Tab
-                          className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                          id='friendly'
+                          className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                          id="friendly"
                         >
                           Friendly
                         </Tab>
                         <Tab
-                          className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                          id='raw'
+                          className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                          id="raw"
                         >
                           Raw
                         </Tab>
                       </TabList>
-                      <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto pt-3' id='friendly'>
+                      <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto pt-3" id="friendly">
                         <div className="form-row">
                           <div className="form-control form-control--outlined">
                             <label data-testid="CookieKey">
                               Key
                               <OneLineEditor
                                 id="cookie-key"
-                                defaultValue={(editCookie && editCookie.key || '').toString()}
+                                defaultValue={((editCookie && editCookie.key) || '').toString()}
                                 onChange={value => setEditCookie({ ...editCookie, key: value.trim() })}
                               />
                             </label>
@@ -429,7 +467,7 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
                               Value
                               <OneLineEditor
                                 id="cookie-value"
-                                defaultValue={(editCookie && editCookie.value || '').toString()}
+                                defaultValue={((editCookie && editCookie.value) || '').toString()}
                                 onChange={value => setEditCookie({ ...editCookie, value: value.trim() })}
                               />
                             </label>
@@ -441,7 +479,7 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
                               Domain
                               <OneLineEditor
                                 id="cookie-domain"
-                                defaultValue={(editCookie && editCookie.domain || '').toString()}
+                                defaultValue={((editCookie && editCookie.domain) || '').toString()}
                                 onChange={value => setEditCookie({ ...editCookie, domain: value.trim() })}
                               />
                             </label>
@@ -451,7 +489,7 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
                               Path
                               <OneLineEditor
                                 id="cookie-path"
-                                defaultValue={(editCookie && editCookie.path || '').toString()}
+                                defaultValue={((editCookie && editCookie.path) || '').toString()}
                                 onChange={value => setEditCookie({ ...editCookie, path: value.trim() })}
                               />
                             </label>
@@ -463,12 +501,12 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
                             <input
                               type="datetime-local"
                               defaultValue={localDateTime}
-                              className='calendar-invert'
+                              className="calendar-invert"
                               onChange={event => setEditCookie({ ...editCookie, expires: event.target.value })}
                             />
                           </label>
                         </div>
-                        <div className="grid grid-cols-2 gap-2 w-full">
+                        <div className="grid w-full grid-cols-2 gap-2">
                           <label className="flex items-center gap-1">
                             <input
                               className="space-left"
@@ -491,7 +529,7 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
                           </label>
                         </div>
                       </TabPanel>
-                      <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto pt-3' id='raw'>
+                      <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto pt-3" id="raw">
                         <div className="form-control form-control--outlined">
                           <label>
                             Raw Cookie String
@@ -520,9 +558,9 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
                   </div>
                 </>
               )}
-              <div className='flex items-center justify-end mt-[2rem]'>
+              <div className="mt-[2rem] flex items-center justify-end">
                 <Button
-                  className="text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
                   onPress={() => {
                     onUpdateCookie(editCookie as Cookie);
                     setIsOpen(false);
@@ -537,4 +575,4 @@ const CookieModifyModal = (({ cookie, isOpen, setIsOpen, onUpdateCookie }: Cooki
       </Modal>
     </ModalOverlay>
   );
-});
+};
diff --git a/packages/insomnia/src/ui/components/modals/error-modal.tsx b/packages/insomnia/src/ui/components/modals/error-modal.tsx
index 5c600cf6a8..4f9702b683 100644
--- a/packages/insomnia/src/ui/components/modals/error-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/error-modal.tsx
@@ -24,15 +24,19 @@ export const ErrorModal = forwardRef<ErrorModalHandle, ModalProps>((_, ref) => {
     addCancel: false,
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setState(options);
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setState(options);
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
   const { error, title, addCancel } = state;
   const message = state.message || error?.message;
   return (
diff --git a/packages/insomnia/src/ui/components/modals/export-requests-modal.tsx b/packages/insomnia/src/ui/components/modals/export-requests-modal.tsx
index d39b5a7730..1351fdef41 100644
--- a/packages/insomnia/src/ui/components/modals/export-requests-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/export-requests-modal.tsx
@@ -37,91 +37,98 @@ export const RequestGroupRow: FC<{
   selectedRequests,
   totalRequests,
 }) => {
-    const isSelected = selectedRequests === totalRequests;
-    const isIndeterminate = selectedRequests > 0 && selectedRequests < totalRequests;
+  const isSelected = selectedRequests === totalRequests;
+  const isIndeterminate = selectedRequests > 0 && selectedRequests < totalRequests;
 
-    return (
-      <li key={requestGroup._id} className="flex flex-col">
-        <div className="flex items-center gap-2 p-2">
-          <Checkbox aria-label={requestGroup.name} isIndeterminate={isIndeterminate} slot={null} isSelected={isSelected} onChange={isSelected => handleSetItemSelected(requestGroup._id, isSelected)} className="group p-0 flex items-center h-full">
-            <div className="w-4 h-4 rounded flex items-center justify-center transition-colors group-data-[selected]:bg-[--hl-xs] group-focus:ring-2 ring-1 ring-[--hl-sm]">
-              <Icon icon={isIndeterminate ? 'minus' : 'check'} className='opacity-0 group-data-[selected]:opacity-100 group-data-[indeterminate]:opacity-100 group-data-[selected]:text-[--color-success] w-3 h-3' />
-            </div>
-          </Checkbox>
-          <Button className="flex items-center gap-2" onPress={() => handleSetRequestGroupCollapsed(requestGroup._id, !isCollapsed)}>
-            <Icon icon={isCollapsed ? 'folder' : 'folder-open'} />
-            {requestGroup.name}
-            <span className="text-sm text-[--hl]">{totalRequests} requests</span>
-          </Button>
-        </div>
-
-        <ul
-          className="flex flex-col pl-5"
+  return (
+    <li key={requestGroup._id} className="flex flex-col">
+      <div className="flex items-center gap-2 p-2">
+        <Checkbox
+          aria-label={requestGroup.name}
+          isIndeterminate={isIndeterminate}
+          slot={null}
+          isSelected={isSelected}
+          onChange={isSelected => handleSetItemSelected(requestGroup._id, isSelected)}
+          className="group flex h-full items-center p-0"
         >
-          {!isCollapsed ? children : null}
-        </ul>
-      </li>
-    );
-  };
+          <div className="flex h-4 w-4 items-center justify-center rounded ring-1 ring-[--hl-sm] transition-colors group-focus:ring-2 group-data-[selected]:bg-[--hl-xs]">
+            <Icon
+              icon={isIndeterminate ? 'minus' : 'check'}
+              className="h-3 w-3 opacity-0 group-data-[selected]:text-[--color-success] group-data-[indeterminate]:opacity-100 group-data-[selected]:opacity-100"
+            />
+          </div>
+        </Checkbox>
+        <Button
+          className="flex items-center gap-2"
+          onPress={() => handleSetRequestGroupCollapsed(requestGroup._id, !isCollapsed)}
+        >
+          <Icon icon={isCollapsed ? 'folder' : 'folder-open'} />
+          {requestGroup.name}
+          <span className="text-sm text-[--hl]">{totalRequests} requests</span>
+        </Button>
+      </div>
+
+      <ul className="flex flex-col pl-5">{!isCollapsed ? children : null}</ul>
+    </li>
+  );
+};
 
 export const RequestRow: FC<{
   handleSetItemSelected: (...args: any[]) => any;
   isSelected: boolean;
   request: Request | WebSocketRequest | GrpcRequest;
-}> = ({
-  handleSetItemSelected,
-  request,
-  isSelected,
-}) => {
-    return (
-      <li className="flex items-center gap-2 p-2">
-        <Checkbox
-          slot={null}
-          aria-label={request.name}
-          isSelected={isSelected}
-          onChange={isSelected => {
-            handleSetItemSelected(request._id, isSelected);
-          }}
-          className="group p-0 flex items-center h-full"
-        >
-          <div className="w-4 h-4 rounded flex items-center justify-center transition-colors group-data-[selected]:bg-[--hl-xs] group-focus:ring-2 ring-1 ring-[--hl-sm]">
-            <Icon icon='check' className='opacity-0 group-data-[selected]:opacity-100 group-data-[selected]:text-[--color-success] w-3 h-3' />
-          </div>
-        </Checkbox>
-        <div className="w-full flex items-center gap-2">
-          {isRequest(request) && (
-            <span
-              className={
-                `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-                  ${{
-                  'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-                  'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-                  'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                  'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                  'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-                  'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-                  'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-                }[request.method] || 'text-[--color-font] bg-[--hl-md]'}`
-              }
-            >
-              {getMethodShortHand(request)}
-            </span>
-          )}
-          {isWebSocketRequest(request) && (
-            <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
-              WS
-            </span>
-          )}
-          {isGrpcRequest(request) && (
-            <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
-              gRPC
-            </span>
-          )}
-          <span>{request.name}</span>
+}> = ({ handleSetItemSelected, request, isSelected }) => {
+  return (
+    <li className="flex items-center gap-2 p-2">
+      <Checkbox
+        slot={null}
+        aria-label={request.name}
+        isSelected={isSelected}
+        onChange={isSelected => {
+          handleSetItemSelected(request._id, isSelected);
+        }}
+        className="group flex h-full items-center p-0"
+      >
+        <div className="flex h-4 w-4 items-center justify-center rounded ring-1 ring-[--hl-sm] transition-colors group-focus:ring-2 group-data-[selected]:bg-[--hl-xs]">
+          <Icon
+            icon="check"
+            className="h-3 w-3 opacity-0 group-data-[selected]:text-[--color-success] group-data-[selected]:opacity-100"
+          />
         </div>
-      </li>
-    );
-  };
+      </Checkbox>
+      <div className="flex w-full items-center gap-2">
+        {isRequest(request) && (
+          <span
+            className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+              {
+                GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+              }[request.method] || 'bg-[--hl-md] text-[--color-font]'
+            }`}
+          >
+            {getMethodShortHand(request)}
+          </span>
+        )}
+        {isWebSocketRequest(request) && (
+          <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]">
+            WS
+          </span>
+        )}
+        {isGrpcRequest(request) && (
+          <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]">
+            gRPC
+          </span>
+        )}
+        <span>{request.name}</span>
+      </div>
+    </li>
+  );
+};
 
 export const Tree: FC<{
   root?: Node | null;
@@ -164,12 +171,16 @@ export const Tree: FC<{
     );
   };
 
-  return (
-    <ul className="flex flex-col">{renderChildren(root)}</ul>
-  );
+  return <ul className="flex flex-col">{renderChildren(root)}</ul>;
 };
 
-export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspaceIdToExport: string; onClose: () => void }) => {
+export const ExportRequestsModal = ({
+  workspaceIdToExport,
+  onClose,
+}: {
+  workspaceIdToExport: string;
+  onClose: () => void;
+}) => {
   const { organizationId, projectId } = useParams() as { organizationId: string; projectId: string };
   const workspaceFetcher = useFetcher();
   const [state, setState] = useState<{
@@ -213,8 +224,12 @@ export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspac
         },
         collapsed: false,
         children: children,
-        totalRequests: children.map(child => child.totalRequests).reduce((acc, totalRequests) => acc + totalRequests, 0),
-        selectedRequests: children.map(child => child.totalRequests).reduce((acc, totalRequests) => acc + totalRequests, 0), // Default select all
+        totalRequests: children
+          .map(child => child.totalRequests)
+          .reduce((acc, totalRequests) => acc + totalRequests, 0),
+        selectedRequests: children
+          .map(child => child.totalRequests)
+          .reduce((acc, totalRequests) => acc + totalRequests, 0), // Default select all
       },
     });
   }, [workspaceLoaderData?.requestTree]);
@@ -241,7 +256,9 @@ export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspac
     for (const child of node.children) {
       const found = setItemSelected(child, isSelected, id);
       if (found) {
-        node.selectedRequests = node.children.map(ch => ch.selectedRequests).reduce((acc, selected) => acc + selected, 0);
+        node.selectedRequests = node.children
+          .map(ch => ch.selectedRequests)
+          .reduce((acc, selected) => acc + selected, 0);
         return true;
       }
     }
@@ -256,7 +273,9 @@ export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspac
     return !!node.children.find(child => setRequestGroupCollapsed(child, isCollapsed, requestGroupId));
   };
 
-  const isExportDisabled = (state?.treeRoot?.totalRequests && state?.treeRoot?.totalRequests > 0 && state?.treeRoot?.selectedRequests === 0) || false;
+  const isExportDisabled =
+    (state?.treeRoot?.totalRequests && state?.treeRoot?.totalRequests > 0 && state?.treeRoot?.selectedRequests === 0) ||
+    false;
 
   return (
     <ModalOverlay
@@ -265,29 +284,29 @@ export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspac
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Export requests</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Export requests
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded w-full border border-solid border-[--hl-sm] select-none overflow-y-auto min-h-[20rem] max-h-96'>
+              <div className="max-h-96 min-h-[20rem] w-full select-none overflow-y-auto rounded border border-solid border-[--hl-sm]">
                 <Tree
                   root={state?.treeRoot}
                   handleSetRequestGroupCollapsed={(requestGroupId: string, isCollapsed: boolean) => {
@@ -302,10 +321,10 @@ export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspac
                   }}
                 />
               </div>
-              <div className="flex flex-shrink-0 flex-1 justify-end gap-2 items-center">
+              <div className="flex flex-1 flex-shrink-0 items-center justify-end gap-2">
                 <Button
                   onPress={close}
-                  className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                  className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:bg-opacity-90 hover:no-underline"
                 >
                   Cancel
                 </Button>
@@ -315,11 +334,11 @@ export const ExportRequestsModal = ({ workspaceIdToExport, onClose }: { workspac
                     close();
                   }}
                   isDisabled={isExportDisabled}
-                  className="hover:no-underline flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                  className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
                 >
                   <Icon icon="save" /> Export
                 </Button>
-          </div>
+              </div>
             </div>
           )}
         </Dialog>
diff --git a/packages/insomnia/src/ui/components/modals/filter-help-modal.tsx b/packages/insomnia/src/ui/components/modals/filter-help-modal.tsx
index dc0c67c8d6..b9bbcb4fb2 100644
--- a/packages/insomnia/src/ui/components/modals/filter-help-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/filter-help-modal.tsx
@@ -15,7 +15,9 @@ const HelpExamples: FC<{ helpExamples: HelpExample[] }> = ({ helpExamples }) =>
     <tbody>
       {helpExamples.map(({ code, description }) => (
         <tr key={code}>
-          <td><code className="selectable">{code}</code></td>
+          <td>
+            <code className="selectable">{code}</code>
+          </td>
           {description}
         </tr>
       ))}
@@ -26,7 +28,8 @@ const HelpExamples: FC<{ helpExamples: HelpExample[] }> = ({ helpExamples }) =>
 const JSONPathHelp: FC = () => (
   <ModalBody className="pad">
     <p>
-      Use <Link href="http://goessner.net/articles/JsonPath/">JSONPath</Link> to filter the response body. Here are some examples that you might use on a book store API:
+      Use <Link href="http://goessner.net/articles/JsonPath/">JSONPath</Link> to filter the response body. Here are some
+      examples that you might use on a book store API:
     </p>
     <HelpExamples
       helpExamples={[
@@ -34,11 +37,15 @@ const JSONPathHelp: FC = () => (
         { code: '$.store.books[?(@.price < 10)].title', description: 'Get books costing less than $10' },
         { code: '$.store.books[-1:]', description: 'Get the last book in the store' },
         { code: '$.store.books.length', description: 'Get the number of books in the store' },
-        { code: '$.store.books[?(@.title.match(/lord.*rings/i))]', description: 'Get book by title regular expression' },
+        {
+          code: '$.store.books[?(@.title.match(/lord.*rings/i))]',
+          description: 'Get book by title regular expression',
+        },
       ]}
     />
     <p className="notice info">
-      Note that there's <Link href="https://cburgmer.github.io/json-path-comparison/">no standard</Link> for JSONPath. Insomnia uses <Link href="https://www.npmjs.com/package/jsonpath-plus">jsonpath-plus</Link>.
+      Note that there's <Link href="https://cburgmer.github.io/json-path-comparison/">no standard</Link> for JSONPath.
+      Insomnia uses <Link href="https://www.npmjs.com/package/jsonpath-plus">jsonpath-plus</Link>.
     </p>
   </ModalBody>
 );
@@ -46,8 +53,8 @@ const JSONPathHelp: FC = () => (
 const XPathHelp: FC = () => (
   <ModalBody className="pad">
     <p>
-      Use <Link href="https://www.w3.org/TR/xpath/">XPath</Link> to filter the response body. Here are some examples that you might use on a
-      book store API:
+      Use <Link href="https://www.w3.org/TR/xpath/">XPath</Link> to filter the response body. Here are some examples
+      that you might use on a book store API:
     </p>
     <HelpExamples
       helpExamples={[
@@ -73,16 +80,20 @@ export const FilterHelpModal = forwardRef<FilterHelpModalHandle, ModalProps>((_,
     isJSON: true,
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      const { isJSON } = options;
-      setState({ isJSON });
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        const { isJSON } = options;
+        setState({ isJSON });
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
   const { isJSON } = state;
   const isXPath = !isJSON;
   return (
diff --git a/packages/insomnia/src/ui/components/modals/generate-code-modal.tsx b/packages/insomnia/src/ui/components/modals/generate-code-modal.tsx
index 8a8927c62d..7d9d3409de 100644
--- a/packages/insomnia/src/ui/components/modals/generate-code-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/generate-code-modal.tsx
@@ -49,11 +49,11 @@ export const GenerateCodeModal = forwardRef<GenerateCodeModalHandle, Props>((pro
   let storedClient: HTTPSnippetClient | undefined;
   try {
     storedTarget = JSON.parse(window.localStorage.getItem('insomnia::generateCode::target') || '') as HTTPSnippetTarget;
-  } catch (error) { }
+  } catch (error) {}
 
   try {
     storedClient = JSON.parse(window.localStorage.getItem('insomnia::generateCode::client') || '') as HTTPSnippetClient;
-  } catch (error) { }
+  } catch (error) {}
   const [state, setState] = useState<State>({
     request: undefined,
     target: storedTarget,
@@ -63,45 +63,54 @@ export const GenerateCodeModal = forwardRef<GenerateCodeModalHandle, Props>((pro
 
   const [snippet, setSnippet] = useState<string>('');
 
-  const generateCode = useCallback(async (request: Request, target?: HTTPSnippetTarget, client?: HTTPSnippetClient) => {
-    const HTTPSnippet = (await import('httpsnippet')).default;
+  const generateCode = useCallback(
+    async (request: Request, target?: HTTPSnippetTarget, client?: HTTPSnippetClient) => {
+      const HTTPSnippet = (await import('httpsnippet')).default;
 
-    const targets = HTTPSnippet.availableTargets();
-    const targetOrFallback = target || targets.find(t => t.key === 'shell') as HTTPSnippetTarget;
-    const clientOrFallback = client || targetOrFallback.clients.find(t => t.key === 'curl') as HTTPSnippetClient;
+      const targets = HTTPSnippet.availableTargets();
+      const targetOrFallback = target || (targets.find(t => t.key === 'shell') as HTTPSnippetTarget);
+      const clientOrFallback = client || (targetOrFallback.clients.find(t => t.key === 'curl') as HTTPSnippetClient);
 
-    setState({
-      request,
-      client: clientOrFallback,
-      target: targetOrFallback,
-      targets,
-    });
-    // Save client/target for next time
-    window.localStorage.setItem('insomnia::generateCode::client', JSON.stringify(clientOrFallback));
-    window.localStorage.setItem('insomnia::generateCode::target', JSON.stringify(targetOrFallback));
+      setState({
+        request,
+        client: clientOrFallback,
+        target: targetOrFallback,
+        targets,
+      });
+      // Save client/target for next time
+      window.localStorage.setItem('insomnia::generateCode::client', JSON.stringify(clientOrFallback));
+      window.localStorage.setItem('insomnia::generateCode::target', JSON.stringify(targetOrFallback));
 
-    // Some clients need a content-length for the request to succeed
-    const addContentLength = Boolean((TO_ADD_CONTENT_LENGTH[targetOrFallback.key] || []).find(c => c === clientOrFallback.key));
-    const har = await exportHarWithRequest(request, props.environmentId, addContentLength);
-    if (har) {
-      const snippet = new HTTPSnippet(har);
-      const cmd = snippet.convert(targetOrFallback.key, clientOrFallback.key) || '';
-      setSnippet(cmd);
-    }
-  }, [props.environmentId]);
-
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      if (!options.request) {
-        return;
+      // Some clients need a content-length for the request to succeed
+      const addContentLength = Boolean(
+        (TO_ADD_CONTENT_LENGTH[targetOrFallback.key] || []).find(c => c === clientOrFallback.key),
+      );
+      const har = await exportHarWithRequest(request, props.environmentId, addContentLength);
+      if (har) {
+        const snippet = new HTTPSnippet(har);
+        const cmd = snippet.convert(targetOrFallback.key, clientOrFallback.key) || '';
+        setSnippet(cmd);
       }
-      generateCode(options.request, state.target, state.client);
-      modalRef.current?.show();
     },
-  }), [generateCode, state]);
+    [props.environmentId],
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        if (!options.request) {
+          return;
+        }
+        generateCode(options.request, state.target, state.client);
+        modalRef.current?.show();
+      },
+    }),
+    [generateCode, state],
+  );
 
   const { target, targets, client, request } = state;
   // NOTE: Just some extra precautions in case the target is messed up
@@ -122,19 +131,16 @@ export const GenerateCodeModal = forwardRef<GenerateCodeModalHandle, Props>((pro
       >
         <div className="pad">
           <Dropdown
-            aria-label='Select a target'
+            aria-label="Select a target"
             triggerButton={
-              <Button className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]">
+              <Button className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]">
                 {target ? target.title : 'n/a'}
                 <i className="fa fa-caret-down" />
               </Button>
             }
           >
             {targets.map(target => (
-              <DropdownItem
-                key={target.key}
-                aria-label={target.title}
-              >
+              <DropdownItem key={target.key} aria-label={target.title}>
                 <ItemContent
                   label={target.title}
                   onClick={() => {
@@ -149,19 +155,16 @@ export const GenerateCodeModal = forwardRef<GenerateCodeModalHandle, Props>((pro
           </Dropdown>
           &nbsp;&nbsp;
           <Dropdown
-            aria-label='Select a client'
+            aria-label="Select a client"
             triggerButton={
-              <Button className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]">
+              <Button className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]">
                 {client ? client.title : 'n/a'}
                 <i className="fa fa-caret-down" />
               </Button>
             }
           >
             {clients.map(client => (
-              <DropdownItem
-                key={client.key}
-                aria-label={client.title}
-              >
+              <DropdownItem key={client.key} aria-label={client.title}>
                 <ItemContent
                   label={client.title}
                   onClick={() => request && generateCode(request, state.target, client)}
@@ -172,18 +175,20 @@ export const GenerateCodeModal = forwardRef<GenerateCodeModalHandle, Props>((pro
           &nbsp;&nbsp;
           <CopyButton content={snippet} className="pull-right" />
         </div>
-        {target && <CodeEditor
-          id="generate-code-modal-content"
-          placeholder="Generating code snippet..."
-          className="border-top"
-          key={Date.now()}
-          mode={MODE_MAP[target.key] || target.key}
-          ref={editorRef}
-          defaultValue={snippet}
-        />}
+        {target && (
+          <CodeEditor
+            id="generate-code-modal-content"
+            placeholder="Generating code snippet..."
+            className="border-top"
+            key={Date.now()}
+            mode={MODE_MAP[target.key] || target.key}
+            ref={editorRef}
+            defaultValue={snippet}
+          />
+        )}
       </ModalBody>
       <ModalFooter>
-        <div className="margin-left italic txt-sm">
+        <div className="margin-left txt-sm italic">
           * Code snippets generated by&nbsp;
           <Link href="https://github.com/Kong/httpsnippet">httpsnippet</Link>
         </div>
diff --git a/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx b/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx
index 8b8d6ecbd8..b3d28ad194 100644
--- a/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-branches-modal.tsx
@@ -1,9 +1,27 @@
 import React, { type FC, useEffect, useState } from 'react';
-import { Button, Dialog, GridList, GridListItem, Heading, Input, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  GridList,
+  GridListItem,
+  Heading,
+  Input,
+  Label,
+  Modal,
+  ModalOverlay,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRevalidator } from 'react-router-dom';
 
 import type { MergeConflict } from '../../../sync/types';
-import { checkGitCanPush, continueMerge, type CreateNewGitBranchResult, type GitBranchesLoaderData, type GitChangesLoaderData, mergeGitBranch } from '../../routes/git-actions';
+import {
+  checkGitCanPush,
+  continueMerge,
+  type CreateNewGitBranchResult,
+  type GitBranchesLoaderData,
+  type GitChangesLoaderData,
+  mergeGitBranch,
+} from '../../routes/git-actions';
 import { PromptButton } from '../base/prompt-button';
 import { Icon } from '../icon';
 import { showAlert, showModal } from '.';
@@ -22,15 +40,21 @@ const LocalBranchItem = ({
   organizationId: string;
   projectId: string;
   workspaceId: string;
-    hasUncommittedChanges: boolean;
+  hasUncommittedChanges: boolean;
 }) => {
   const checkoutBranchFetcher = useFetcher<{} | { error: string }>();
   const mergeBranchFetcher = useFetcher();
   const deleteBranchFetcher = useFetcher();
 
   useEffect(() => {
-    if (checkoutBranchFetcher.data && 'error' in checkoutBranchFetcher.data && checkoutBranchFetcher.data.error && checkoutBranchFetcher.state === 'idle') {
-      const error: string = checkoutBranchFetcher.data.error || 'An unexpected error occurred while checking out the branch.';
+    if (
+      checkoutBranchFetcher.data &&
+      'error' in checkoutBranchFetcher.data &&
+      checkoutBranchFetcher.data.error &&
+      checkoutBranchFetcher.state === 'idle'
+    ) {
+      const error: string =
+        checkoutBranchFetcher.data.error || 'An unexpected error occurred while checking out the branch.';
       showAlert({
         title: 'Error while checking out branch.',
         message: error,
@@ -39,7 +63,12 @@ const LocalBranchItem = ({
   }, [checkoutBranchFetcher.data, checkoutBranchFetcher.state]);
 
   useEffect(() => {
-    if (mergeBranchFetcher.data && 'error' in mergeBranchFetcher.data && mergeBranchFetcher.data.error && mergeBranchFetcher.state === 'idle') {
+    if (
+      mergeBranchFetcher.data &&
+      'error' in mergeBranchFetcher.data &&
+      mergeBranchFetcher.data.error &&
+      mergeBranchFetcher.state === 'idle'
+    ) {
       const error: string = mergeBranchFetcher.data.error || 'An unexpected error occurred while merging the branches.';
       showAlert({
         title: 'Error while merging branches.',
@@ -49,7 +78,12 @@ const LocalBranchItem = ({
   }, [mergeBranchFetcher.data, mergeBranchFetcher.state]);
 
   useEffect(() => {
-    if (deleteBranchFetcher.data && 'error' in deleteBranchFetcher.data && deleteBranchFetcher.data.error && deleteBranchFetcher.state === 'idle') {
+    if (
+      deleteBranchFetcher.data &&
+      'error' in deleteBranchFetcher.data &&
+      deleteBranchFetcher.data.error &&
+      deleteBranchFetcher.state === 'idle'
+    ) {
       const error: string = deleteBranchFetcher.data.error || 'An unexpected error occurred while deleting the branch.';
       showAlert({
         title: 'Error while deleting branch',
@@ -63,14 +97,16 @@ const LocalBranchItem = ({
   const { revalidate } = useRevalidator();
 
   return (
-    <div className='flex flex-col justify-start'>
-      <div className="flex items-center w-full">
-        <span className='flex-1 truncate'>{branch} {isCurrent ? '*' : ''}</span>
-        <div className='flex items-center gap-2'>
+    <div className="flex flex-col justify-start">
+      <div className="flex w-full items-center">
+        <span className="flex-1 truncate">
+          {branch} {isCurrent ? '*' : ''}
+        </span>
+        <div className="flex items-center gap-2">
           {branch !== 'master' && (
             <PromptButton
-              confirmMessage='Confirm'
-              className="px-4 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              confirmMessage="Confirm"
+              className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               doneMessage="Deleted"
               disabled={isCurrent || branch === 'master'}
               onClick={() => {
@@ -86,99 +122,109 @@ const LocalBranchItem = ({
                 );
               }}
             >
-              <Icon icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'} className={`text-[--color-danger] w-5 ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+              <Icon
+                icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'}
+                className={`w-5 text-[--color-danger] ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+              />
               Delete
             </PromptButton>
           )}
           <Button
-            className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             isDisabled={isCurrent}
             onPress={() => {
               setErrorMessage('');
               // file://./../../routes/git-actions.tsx#checkoutGitBranchAction
-              checkoutBranchFetcher.submit({
-                branch,
-              }, {
-                method: 'POST',
-                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/checkout`,
-              });
+              checkoutBranchFetcher.submit(
+                {
+                  branch,
+                },
+                {
+                  method: 'POST',
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/checkout`,
+                },
+              );
             }}
           >
-            <Icon icon={checkoutBranchFetcher.state !== 'idle' ? 'spinner' : 'turn-up'} className={`w-5 ${checkoutBranchFetcher.state !== 'idle' ? 'animate-spin' : 'rotate-90'}`} />
+            <Icon
+              icon={checkoutBranchFetcher.state !== 'idle' ? 'spinner' : 'turn-up'}
+              className={`w-5 ${checkoutBranchFetcher.state !== 'idle' ? 'animate-spin' : 'rotate-90'}`}
+            />
             Checkout
           </Button>
           <PromptButton
-            className="px-4 py-1 min-w-[12ch] font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             doneMessage="Merged"
-            confirmMessage='Confirm'
-            loadingMessage='Merging'
+            confirmMessage="Confirm"
+            loadingMessage="Merging"
             disabled={isCurrent}
             referToOnClickReturnValue
             onClick={async () => {
               setErrorMessage('');
 
               if (hasUncommittedChanges) {
-                setErrorMessage('You have uncommitted changes in your working tree. Please commit or discard them before merging.');
+                setErrorMessage(
+                  'You have uncommitted changes in your working tree. Please commit or discard them before merging.',
+                );
               }
-                try {
-                  const result = await mergeGitBranch({
-                    projectId,
-                    workspaceId,
-                    theirsBranch: branch,
-                    allowUncommittedChangesBeforeMerge: true,
-                  });
+              try {
+                const result = await mergeGitBranch({
+                  projectId,
+                  workspaceId,
+                  theirsBranch: branch,
+                  allowUncommittedChangesBeforeMerge: true,
+                });
 
-                  if ('conflicts' in result) {
-                    await new Promise((resolve, reject) => {
-                      showModal(SyncMergeModal, {
-                        conflicts: result.conflicts,
-                        labels: result.labels,
-                        handleDone: (conflicts?: MergeConflict[]) => {
-                          if (Array.isArray(conflicts) && conflicts.length > 0) {
-                            continueMerge({
-                              projectId,
-                              workspaceId,
-                              handledMergeConflicts: conflicts,
-                              commitMessage: result.commitMessage,
-                              commitParent: result.commitParent,
-                            }).then(
-                              resolve,
-                              reject,
-                            ).finally(() => {
+                if ('conflicts' in result) {
+                  await new Promise((resolve, reject) => {
+                    showModal(SyncMergeModal, {
+                      conflicts: result.conflicts,
+                      labels: result.labels,
+                      handleDone: (conflicts?: MergeConflict[]) => {
+                        if (Array.isArray(conflicts) && conflicts.length > 0) {
+                          continueMerge({
+                            projectId,
+                            workspaceId,
+                            handledMergeConflicts: conflicts,
+                            commitMessage: result.commitMessage,
+                            commitParent: result.commitParent,
+                          })
+                            .then(resolve, reject)
+                            .finally(() => {
                               checkGitCanPush({ projectId, workspaceId });
                               revalidate();
                             });
-                          } else {
-                            // user aborted merge
-                            reject(new Error('You aborted the merge, no changes were made to working tree.'));
-                          }
-                        },
-                      });
+                        } else {
+                          // user aborted merge
+                          reject(new Error('You aborted the merge, no changes were made to working tree.'));
+                        }
+                      },
                     });
-                  }
-
-                  if ('errors' in result && result.errors && result.errors?.length > 0) {
-                    setErrorMessage(result.errors.join('\n'));
-                  }
-
-                  revalidate();
-                } catch (err) {
-                  const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred while merging the branches.';
-
-                  setErrorMessage(errorMessage);
+                  });
                 }
+
+                if ('errors' in result && result.errors && result.errors?.length > 0) {
+                  setErrorMessage(result.errors.join('\n'));
+                }
+
+                revalidate();
+              } catch (err) {
+                const errorMessage =
+                  err instanceof Error ? err.message : 'An unexpected error occurred while merging the branches.';
+
+                setErrorMessage(errorMessage);
+              }
             }}
           >
-            <Icon icon={mergeBranchFetcher.state !== 'idle' ? 'spinner' : 'code-merge'} className={`w-5 ${mergeBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+            <Icon
+              icon={mergeBranchFetcher.state !== 'idle' ? 'spinner' : 'code-merge'}
+              className={`w-5 ${mergeBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+            />
             Merge
           </PromptButton>
         </div>
       </div>
-      {errMsg && (
-        <div className='text-right text-[--color-danger] whitespace-break-spaces'>
-          {errMsg}
-        </div>
-      )}
+      {errMsg && <div className="whitespace-break-spaces text-right text-[--color-danger]">{errMsg}</div>}
     </div>
   );
 };
@@ -198,7 +244,12 @@ const RemoteBranchItem = ({
   const pullBranchFetcher = useFetcher();
 
   useEffect(() => {
-    if (pullBranchFetcher.data && 'error' in pullBranchFetcher.data && pullBranchFetcher.data.error && pullBranchFetcher.state === 'idle') {
+    if (
+      pullBranchFetcher.data &&
+      'error' in pullBranchFetcher.data &&
+      pullBranchFetcher.data.error &&
+      pullBranchFetcher.state === 'idle'
+    ) {
       const error: string = pullBranchFetcher.data.error || 'An unexpected error occurred while pulling the branch.';
       showAlert({
         title: 'Error while pulling branch.',
@@ -208,19 +259,27 @@ const RemoteBranchItem = ({
   }, [pullBranchFetcher.data, pullBranchFetcher.state]);
 
   return (
-    <div className="flex items-center w-full">
-      <span className='flex-1 truncate'>{branch}</span>
-      <div className='flex items-center gap-2'>
+    <div className="flex w-full items-center">
+      <span className="flex-1 truncate">{branch}</span>
+      <div className="flex items-center gap-2">
         <Button
-          className="px-4 py-1 min-w-[12ch] font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-          onPress={() => pullBranchFetcher.submit({
-            branch,
-          }, {
-            method: 'POST',
-            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/checkout`,
-          })}
+          className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() =>
+            pullBranchFetcher.submit(
+              {
+                branch,
+              },
+              {
+                method: 'POST',
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/checkout`,
+              },
+            )
+          }
         >
-          <Icon icon={pullBranchFetcher.state !== 'idle' ? 'spinner' : 'cloud-arrow-down'} className={`w-5 ${pullBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+          <Icon
+            icon={pullBranchFetcher.state !== 'idle' ? 'spinner' : 'cloud-arrow-down'}
+            className={`w-5 ${pullBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+          />
           Fetch and checkout
         </Button>
       </div>
@@ -240,22 +299,24 @@ function sortBranches(branchA: string, branchB: string) {
   } else if (branchB === 'master') {
     return 1;
   }
-    return branchA.localeCompare(branchB);
-
+  return branchA.localeCompare(branchB);
 }
 
-export const GitBranchesModal: FC<Props> = (({
-  currentBranch,
-  branches,
-  onClose,
-}) => {
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+export const GitBranchesModal: FC<Props> = ({ currentBranch, branches, onClose }) => {
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
 
   const branchesFetcher = useFetcher<GitBranchesLoaderData>();
   const createBranchFetcher = useFetcher<CreateNewGitBranchResult>();
 
   const errors = branchesFetcher.data && 'errors' in branchesFetcher.data ? branchesFetcher.data.errors : [];
-  const { remoteBranches, branches: localBranches } = branchesFetcher.data && 'branches' in branchesFetcher.data ? branchesFetcher.data : { branches: [], remoteBranches: [] };
+  const { remoteBranches, branches: localBranches } =
+    branchesFetcher.data && 'branches' in branchesFetcher.data
+      ? branchesFetcher.data
+      : { branches: [], remoteBranches: [] };
 
   const fetchedBranches = localBranches.length > 0 ? localBranches : branches;
   const remoteOnlyBranches = remoteBranches.filter(b => !fetchedBranches.includes(b));
@@ -263,25 +324,30 @@ export const GitBranchesModal: FC<Props> = (({
 
   useEffect(() => {
     if (branchesFetcher.state === 'idle' && !branchesFetcher.data) {
-      branchesFetcher.load(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branches`);
+      branchesFetcher.load(
+        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branches`,
+      );
     }
   }, [branchesFetcher, organizationId, projectId, workspaceId]);
 
-  const createNewBranchError = createBranchFetcher.data?.errors && createBranchFetcher.data.errors.length > 0 ? createBranchFetcher.data.errors[0] : null;
+  const createNewBranchError =
+    createBranchFetcher.data?.errors && createBranchFetcher.data.errors.length > 0
+      ? createBranchFetcher.data.errors[0]
+      : null;
 
   const gitChangesFetcher = useFetcher<GitChangesLoaderData>();
   useEffect(() => {
     if (gitChangesFetcher.state === 'idle' && !gitChangesFetcher.data) {
       // file://./../../routes/git-actions.tsx#gitChangesLoader
-      gitChangesFetcher.load(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/changes`);
+      gitChangesFetcher.load(
+        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/changes`,
+      );
     }
   }, [organizationId, projectId, workspaceId, gitChangesFetcher]);
 
   const hasUncommittedChanges = Boolean(
-    gitChangesFetcher.data?.changes && (
-      gitChangesFetcher.data.changes.staged.length > 0 ||
-      gitChangesFetcher.data.changes.unstaged.length > 0
-    )
+    gitChangesFetcher.data?.changes &&
+      (gitChangesFetcher.data.changes.staged.length > 0 || gitChangesFetcher.data.changes.unstaged.length > 0),
   );
 
   return (
@@ -291,23 +357,23 @@ export const GitBranchesModal: FC<Props> = (({
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot='title' className='text-2xl'>Branches</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Branches
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
@@ -315,55 +381,61 @@ export const GitBranchesModal: FC<Props> = (({
               </div>
               <createBranchFetcher.Form
                 action={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/branch/new`}
-                method='POST'
-                className='flex flex-col gap-2 flex-shrink-0'
+                method="POST"
+                className="flex flex-shrink-0 flex-col gap-2"
               >
                 <TextField className="flex flex-col gap-2">
-                  <Label className='col-span-4'>
-                    New branch name:
-                  </Label>
-                  <div className='flex items-center gap-2'>
+                  <Label className="col-span-4">New branch name:</Label>
+                  <div className="flex items-center gap-2">
                     <Input
                       required
-                      className='py-1 h-8 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors flex-1 placeholder:italic placeholder:opacity-60 col-span-3'
+                      className="col-span-3 h-8 w-full flex-1 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic placeholder:opacity-60 focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                       type="text"
                       name="branch"
                       placeholder="Branch name"
                     />
-                    <Button className="px-4 h-8 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" isDisabled={createBranchFetcher.state !== 'idle'} type="submit">
-                      <Icon className={`w-5 ${createBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} icon={createBranchFetcher.state !== 'idle' ? 'spinner' : 'plus'} /> Create
+                    <Button
+                      className="flex h-8 min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                      isDisabled={createBranchFetcher.state !== 'idle'}
+                      type="submit"
+                    >
+                      <Icon
+                        className={`w-5 ${createBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+                        icon={createBranchFetcher.state !== 'idle' ? 'spinner' : 'plus'}
+                      />{' '}
+                      Create
                     </Button>
                   </div>
                 </TextField>
                 {createNewBranchError && (
-                  <div className='flex flex-wrap justify-between items-center gap-2 p-[--padding-sm] border border-solid border-[--hl-md] bg-opacity-50 bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] text-[--color-font-warning] rounded'>
-                    <p className='text-base'>
-                      <Icon icon="exclamation-triangle" className='mr-2' />
+                  <div className="flex flex-wrap items-center justify-between gap-2 rounded border border-solid border-[--hl-md] bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] bg-opacity-50 p-[--padding-sm] text-[--color-font-warning]">
+                    <p className="text-base">
+                      <Icon icon="exclamation-triangle" className="mr-2" />
                       {createNewBranchError}
                     </p>
                   </div>
                 )}
               </createBranchFetcher.Form>
 
-              <div className='flex-1 max-h-96 overflow-hidden flex flex-col select-none border border-solid rounded border-[--hl-sm] divide-y divide-solid divide-[--hl-sm]'>
-                <Heading className='font-semibold uppercase text-[--hl] text-sm p-2'>Local Branches</Heading>
+              <div className="flex max-h-96 flex-1 select-none flex-col divide-y divide-solid divide-[--hl-sm] overflow-hidden rounded border border-solid border-[--hl-sm]">
+                <Heading className="p-2 text-sm font-semibold uppercase text-[--hl]">Local Branches</Heading>
                 <GridList
-                  aria-label='Branches list'
-                  selectionMode='none'
+                  aria-label="Branches list"
+                  selectionMode="none"
                   items={fetchedBranches.sort(sortBranches).map(branch => ({
                     id: branch,
                     key: branch,
                     name: branch,
                     isCurrent: branch === currentBranch,
                   }))}
-                  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
+                  className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-sm] overflow-y-auto focus:outline-none data-[empty]:py-0"
                 >
                   {item => (
                     <GridListItem
                       id={item.id}
                       key={item.key}
                       textValue={item.name}
-                      className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
+                      className="w-full p-2 transition-colors focus:bg-[--hl-sm] focus:outline-none"
                     >
                       <LocalBranchItem
                         branch={item.name}
@@ -378,11 +450,11 @@ export const GitBranchesModal: FC<Props> = (({
                 </GridList>
               </div>
 
-              <div className='flex-1 max-h-96 overflow-hidden flex flex-col select-none border border-solid rounded border-[--hl-sm] divide-y divide-solid divide-[--hl-sm]'>
-                <Heading className='font-semibold uppercase text-[--hl] text-sm p-2'>Remote Branches</Heading>
+              <div className="flex max-h-96 flex-1 select-none flex-col divide-y divide-solid divide-[--hl-sm] overflow-hidden rounded border border-solid border-[--hl-sm]">
+                <Heading className="p-2 text-sm font-semibold uppercase text-[--hl]">Remote Branches</Heading>
                 <GridList
-                  aria-label='Remote Branches list'
-                  selectionMode='none'
+                  aria-label="Remote Branches list"
+                  selectionMode="none"
                   items={remoteOnlyBranches.sort(sortBranches).map(branch => ({
                     id: branch,
                     key: branch,
@@ -390,31 +462,37 @@ export const GitBranchesModal: FC<Props> = (({
                     isCurrent: branch === currentBranch,
                   }))}
                   renderEmptyState={() => (
-                    <div className='p-2 text-[--color-font-disabled] text-center'>
+                    <div className="p-2 text-center text-[--color-font-disabled]">
                       {isFetchingRemoteBranches ? 'Fetching remote branches...' : 'No remote branches found'}
                     </div>
                   )}
-                  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
+                  className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-sm] overflow-y-auto focus:outline-none data-[empty]:py-0"
                 >
                   {item => (
                     <GridListItem
                       id={item.id}
                       key={item.key}
                       textValue={item.name}
-                      className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
+                      className="w-full p-2 transition-colors focus:bg-[--hl-sm] focus:outline-none"
                     >
-                      <RemoteBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
+                      <RemoteBranchItem
+                        branch={item.name}
+                        isCurrent={item.isCurrent}
+                        organizationId={organizationId}
+                        projectId={projectId}
+                        workspaceId={workspaceId}
+                      />
                     </GridListItem>
                   )}
                 </GridList>
                 {errors.length > 0 && (
-                  <div className='p-2'>
+                  <div className="p-2">
                     {errors.map(error => (
-                      <div key={error} className='p-2'>
+                      <div key={error} className="p-2">
                         {error}
                       </div>
                     ))}
-                </div>
+                  </div>
                 )}
               </div>
             </div>
@@ -423,4 +501,4 @@ export const GitBranchesModal: FC<Props> = (({
       </Modal>
     </ModalOverlay>
   );
-});
+};
diff --git a/packages/insomnia/src/ui/components/modals/git-log-modal.tsx b/packages/insomnia/src/ui/components/modals/git-log-modal.tsx
index 231370dea8..a0a53adce2 100644
--- a/packages/insomnia/src/ui/components/modals/git-log-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-log-modal.tsx
@@ -1,5 +1,19 @@
 import React, { type FC, useEffect } from 'react';
-import { Button, Cell, Column, Dialog, Heading, Modal, ModalOverlay, Row, Table, TableBody, TableHeader, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Cell,
+  Column,
+  Dialog,
+  Heading,
+  Modal,
+  ModalOverlay,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { GitLogLoaderData } from '../../routes/git-actions';
@@ -37,78 +51,73 @@ export const GitLogModal: FC<Props> = ({ onClose }) => {
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading className='text-2xl'>History</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading className="text-2xl">History</Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded w-full border border-solid border-[--hl-sm] select-none overflow-y-auto max-h-96'>
+              <div className="max-h-96 w-full select-none overflow-y-auto rounded border border-solid border-[--hl-sm]">
                 <Table
-                  selectionMode='multiple'
+                  selectionMode="multiple"
                   defaultSelectedKeys="all"
-                  aria-label='Modified objects'
-                  className="border-separate border-spacing-0 w-full"
+                  aria-label="Modified objects"
+                  className="w-full border-separate border-spacing-0"
                 >
                   <TableHeader>
-                    <Column isRowHeader className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column
+                      isRowHeader
+                      className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none"
+                    >
                       Message
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       When
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       Author
                     </Column>
                   </TableHeader>
                   <TableBody
                     renderEmptyState={() => (
-                      <div className='p-2 text-center'>
-                        {isLoading ? 'Loading...' : 'No history available'}
-                      </div>
+                      <div className="p-2 text-center">{isLoading ? 'Loading...' : 'No history available'}</div>
                     )}
-                    className="divide divide-[--hl-sm] divide-solid"
+                    className="divide divide-solid divide-[--hl-sm]"
                     items={log.map(logEntry => ({ id: logEntry.oid, ...logEntry }))}
                   >
                     {item => (
-                      <Row className="group focus:outline-none focus-within:bg-[--hl-xxs] transition-colors">
-                        <Cell className="whitespace-nowrap text-wrap p-2 text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <span>
-                            {item.commit.message}
-                          </span>
+                      <Row className="group transition-colors focus-within:bg-[--hl-xxs] focus:outline-none">
+                        <Cell className="whitespace-nowrap text-wrap border-b border-solid border-[--hl-sm] p-2 text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <span>{item.commit.message}</span>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
                           <TimeFromNow
                             className="no-wrap p-2"
                             timestamp={item.commit.author.timestamp * 1000}
                             intervalSeconds={30}
                           />
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
                           <TooltipTrigger>
-                            <Button className="p-2 h-full">
-                              {item.commit.author.name}
-                            </Button>
+                            <Button className="h-full p-2">{item.commit.author.name}</Button>
                             <Tooltip
                               placement="top end"
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               {item.commit.author.email}
                             </Tooltip>
diff --git a/packages/insomnia/src/ui/components/modals/git-project-branches-modal.tsx b/packages/insomnia/src/ui/components/modals/git-project-branches-modal.tsx
index 5980e8c0b3..b666cfcab4 100644
--- a/packages/insomnia/src/ui/components/modals/git-project-branches-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-project-branches-modal.tsx
@@ -1,9 +1,27 @@
 import React, { type FC, useEffect, useState } from 'react';
-import { Button, Dialog, GridList, GridListItem, Heading, Input, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  GridList,
+  GridListItem,
+  Heading,
+  Input,
+  Label,
+  Modal,
+  ModalOverlay,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRevalidator } from 'react-router-dom';
 
 import type { MergeConflict } from '../../../sync/types';
-import { checkGitCanPush, continueMerge, type CreateNewGitBranchResult, type GitBranchesLoaderData, type GitChangesLoaderData, mergeGitBranch } from '../../routes/git-project-actions';
+import {
+  checkGitCanPush,
+  continueMerge,
+  type CreateNewGitBranchResult,
+  type GitBranchesLoaderData,
+  type GitChangesLoaderData,
+  mergeGitBranch,
+} from '../../routes/git-project-actions';
 import { PromptButton } from '../base/prompt-button';
 import { Icon } from '../icon';
 import { showAlert, showModal } from '.';
@@ -29,8 +47,14 @@ const LocalBranchItem = ({
   const deleteBranchFetcher = useFetcher();
 
   useEffect(() => {
-    if (checkoutBranchFetcher.data && 'error' in checkoutBranchFetcher.data && checkoutBranchFetcher.data.error && checkoutBranchFetcher.state === 'idle') {
-      const error: string = checkoutBranchFetcher.data.error || 'An unexpected error occurred while checking out the branch.';
+    if (
+      checkoutBranchFetcher.data &&
+      'error' in checkoutBranchFetcher.data &&
+      checkoutBranchFetcher.data.error &&
+      checkoutBranchFetcher.state === 'idle'
+    ) {
+      const error: string =
+        checkoutBranchFetcher.data.error || 'An unexpected error occurred while checking out the branch.';
       showAlert({
         title: 'Error while checking out branch.',
         message: error,
@@ -39,7 +63,12 @@ const LocalBranchItem = ({
   }, [checkoutBranchFetcher.data, checkoutBranchFetcher.state]);
 
   useEffect(() => {
-    if (mergeBranchFetcher.data && 'error' in mergeBranchFetcher.data && mergeBranchFetcher.data.error && mergeBranchFetcher.state === 'idle') {
+    if (
+      mergeBranchFetcher.data &&
+      'error' in mergeBranchFetcher.data &&
+      mergeBranchFetcher.data.error &&
+      mergeBranchFetcher.state === 'idle'
+    ) {
       const error: string = mergeBranchFetcher.data.error || 'An unexpected error occurred while merging the branches.';
       showAlert({
         title: 'Error while merging branches.',
@@ -49,7 +78,12 @@ const LocalBranchItem = ({
   }, [mergeBranchFetcher.data, mergeBranchFetcher.state]);
 
   useEffect(() => {
-    if (deleteBranchFetcher.data && 'error' in deleteBranchFetcher.data && deleteBranchFetcher.data.error && deleteBranchFetcher.state === 'idle') {
+    if (
+      deleteBranchFetcher.data &&
+      'error' in deleteBranchFetcher.data &&
+      deleteBranchFetcher.data.error &&
+      deleteBranchFetcher.state === 'idle'
+    ) {
       const error: string = deleteBranchFetcher.data.error || 'An unexpected error occurred while deleting the branch.';
       showAlert({
         title: 'Error while deleting branch',
@@ -63,14 +97,16 @@ const LocalBranchItem = ({
   const { revalidate } = useRevalidator();
 
   return (
-    <div className='flex flex-col justify-start'>
-      <div className="flex items-center w-full">
-        <span className='flex-1 truncate'>{branch} {isCurrent ? '*' : ''}</span>
-        <div className='flex items-center gap-2'>
+    <div className="flex flex-col justify-start">
+      <div className="flex w-full items-center">
+        <span className="flex-1 truncate">
+          {branch} {isCurrent ? '*' : ''}
+        </span>
+        <div className="flex items-center gap-2">
           {branch !== 'master' && (
             <PromptButton
-              confirmMessage='Confirm'
-              className="px-4 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              confirmMessage="Confirm"
+              className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               doneMessage="Deleted"
               disabled={isCurrent || branch === 'master'}
               onClick={() => {
@@ -86,39 +122,50 @@ const LocalBranchItem = ({
                 );
               }}
             >
-              <Icon icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'} className={`text-[--color-danger] w-5 ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+              <Icon
+                icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'}
+                className={`w-5 text-[--color-danger] ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+              />
               Delete
             </PromptButton>
           )}
           <Button
-            className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             isDisabled={isCurrent}
             onPress={() => {
               setErrorMessage('');
               // file://./../../routes/git-actions.tsx#checkoutGitBranchAction
-              checkoutBranchFetcher.submit({
-                branch,
-              }, {
-                method: 'POST',
-                action: `/organization/${organizationId}/project/${projectId}/git/branch/checkout`,
-              });
+              checkoutBranchFetcher.submit(
+                {
+                  branch,
+                },
+                {
+                  method: 'POST',
+                  action: `/organization/${organizationId}/project/${projectId}/git/branch/checkout`,
+                },
+              );
             }}
           >
-            <Icon icon={checkoutBranchFetcher.state !== 'idle' ? 'spinner' : 'turn-up'} className={`w-5 ${checkoutBranchFetcher.state !== 'idle' ? 'animate-spin' : 'rotate-90'}`} />
+            <Icon
+              icon={checkoutBranchFetcher.state !== 'idle' ? 'spinner' : 'turn-up'}
+              className={`w-5 ${checkoutBranchFetcher.state !== 'idle' ? 'animate-spin' : 'rotate-90'}`}
+            />
             Checkout
           </Button>
           <PromptButton
-            className="px-4 py-1 min-w-[12ch] font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             doneMessage="Merged"
-            confirmMessage='Confirm'
-            loadingMessage='Merging'
+            confirmMessage="Confirm"
+            loadingMessage="Merging"
             disabled={isCurrent}
             referToOnClickReturnValue
             onClick={async () => {
               setErrorMessage('');
 
               if (hasUncommittedChanges) {
-                setErrorMessage('You have uncommitted changes in your working tree. Please commit or discard them before merging.');
+                setErrorMessage(
+                  'You have uncommitted changes in your working tree. Please commit or discard them before merging.',
+                );
                 return;
               }
 
@@ -141,13 +188,12 @@ const LocalBranchItem = ({
                             handledMergeConflicts: conflicts,
                             commitMessage: result.commitMessage,
                             commitParent: result.commitParent,
-                          }).then(
-                            resolve,
-                            reject,
-                          ).finally(() => {
-                            checkGitCanPush(workspaceId);
-                            revalidate();
-                          });
+                          })
+                            .then(resolve, reject)
+                            .finally(() => {
+                              checkGitCanPush(workspaceId);
+                              revalidate();
+                            });
                         } else {
                           // user aborted merge
                           reject(new Error('You aborted the merge, no changes were made to working tree.'));
@@ -164,22 +210,22 @@ const LocalBranchItem = ({
                 checkGitCanPush(workspaceId);
                 revalidate();
               } catch (err) {
-                const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred while merging the branches.';
+                const errorMessage =
+                  err instanceof Error ? err.message : 'An unexpected error occurred while merging the branches.';
 
                 setErrorMessage(errorMessage);
               }
             }}
           >
-            <Icon icon={mergeBranchFetcher.state !== 'idle' ? 'spinner' : 'code-merge'} className={`w-5 ${mergeBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+            <Icon
+              icon={mergeBranchFetcher.state !== 'idle' ? 'spinner' : 'code-merge'}
+              className={`w-5 ${mergeBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+            />
             Merge
           </PromptButton>
         </div>
       </div>
-      {errMsg && (
-        <div className='text-right text-[--color-danger] whitespace-break-spaces'>
-          {errMsg}
-        </div>
-      )}
+      {errMsg && <div className="whitespace-break-spaces text-right text-[--color-danger]">{errMsg}</div>}
     </div>
   );
 };
@@ -198,7 +244,12 @@ const RemoteBranchItem = ({
   const pullBranchFetcher = useFetcher();
 
   useEffect(() => {
-    if (pullBranchFetcher.data && 'error' in pullBranchFetcher.data && pullBranchFetcher.data.error && pullBranchFetcher.state === 'idle') {
+    if (
+      pullBranchFetcher.data &&
+      'error' in pullBranchFetcher.data &&
+      pullBranchFetcher.data.error &&
+      pullBranchFetcher.state === 'idle'
+    ) {
       const error: string = pullBranchFetcher.data.error || 'An unexpected error occurred while pulling the branch.';
       showAlert({
         title: 'Error while pulling branch.',
@@ -208,19 +259,27 @@ const RemoteBranchItem = ({
   }, [pullBranchFetcher.data, pullBranchFetcher.state]);
 
   return (
-    <div className="flex items-center w-full">
-      <span className='flex-1 truncate'>{branch}</span>
-      <div className='flex items-center gap-2'>
+    <div className="flex w-full items-center">
+      <span className="flex-1 truncate">{branch}</span>
+      <div className="flex items-center gap-2">
         <Button
-          className="px-4 py-1 min-w-[12ch] font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-          onPress={() => pullBranchFetcher.submit({
-            branch,
-          }, {
-            method: 'POST',
-            action: `/organization/${organizationId}/project/${projectId}/git/branch/checkout`,
-          })}
+          className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() =>
+            pullBranchFetcher.submit(
+              {
+                branch,
+              },
+              {
+                method: 'POST',
+                action: `/organization/${organizationId}/project/${projectId}/git/branch/checkout`,
+              },
+            )
+          }
         >
-          <Icon icon={pullBranchFetcher.state !== 'idle' ? 'spinner' : 'cloud-arrow-down'} className={`w-5 ${pullBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+          <Icon
+            icon={pullBranchFetcher.state !== 'idle' ? 'spinner' : 'cloud-arrow-down'}
+            className={`w-5 ${pullBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+          />
           Fetch and checkout
         </Button>
       </div>
@@ -240,22 +299,24 @@ function sortBranches(branchA: string, branchB: string) {
   } else if (branchB === 'master') {
     return 1;
   }
-    return branchA.localeCompare(branchB);
-
+  return branchA.localeCompare(branchB);
 }
 
-export const GitProjectBranchesModal: FC<Props> = (({
-  currentBranch,
-  branches,
-  onClose,
-}) => {
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+export const GitProjectBranchesModal: FC<Props> = ({ currentBranch, branches, onClose }) => {
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
 
   const branchesFetcher = useFetcher<GitBranchesLoaderData>();
   const createBranchFetcher = useFetcher<CreateNewGitBranchResult>();
 
   const errors = branchesFetcher.data && 'errors' in branchesFetcher.data ? branchesFetcher.data.errors : [];
-  const { remoteBranches, branches: localBranches } = branchesFetcher.data && 'branches' in branchesFetcher.data ? branchesFetcher.data : { branches: [], remoteBranches: [] };
+  const { remoteBranches, branches: localBranches } =
+    branchesFetcher.data && 'branches' in branchesFetcher.data
+      ? branchesFetcher.data
+      : { branches: [], remoteBranches: [] };
 
   const fetchedBranches = localBranches.length > 0 ? localBranches : branches;
   const remoteOnlyBranches = remoteBranches.filter(b => !fetchedBranches.includes(b));
@@ -267,7 +328,10 @@ export const GitProjectBranchesModal: FC<Props> = (({
     }
   }, [branchesFetcher, organizationId, projectId, workspaceId]);
 
-  const createNewBranchError = createBranchFetcher.data?.errors && createBranchFetcher.data.errors.length > 0 ? createBranchFetcher.data.errors[0] : null;
+  const createNewBranchError =
+    createBranchFetcher.data?.errors && createBranchFetcher.data.errors.length > 0
+      ? createBranchFetcher.data.errors[0]
+      : null;
 
   const gitChangesFetcher = useFetcher<GitChangesLoaderData>();
   useEffect(() => {
@@ -278,10 +342,8 @@ export const GitProjectBranchesModal: FC<Props> = (({
   }, [organizationId, projectId, workspaceId, gitChangesFetcher]);
 
   const hasUncommittedChanges = Boolean(
-    gitChangesFetcher.data?.changes && (
-      gitChangesFetcher.data.changes.staged.length > 0 ||
-      gitChangesFetcher.data.changes.unstaged.length > 0
-    )
+    gitChangesFetcher.data?.changes &&
+      (gitChangesFetcher.data.changes.staged.length > 0 || gitChangesFetcher.data.changes.unstaged.length > 0),
   );
 
   return (
@@ -291,23 +353,23 @@ export const GitProjectBranchesModal: FC<Props> = (({
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot='title' className='text-2xl'>Branches</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Branches
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
@@ -315,55 +377,61 @@ export const GitProjectBranchesModal: FC<Props> = (({
               </div>
               <createBranchFetcher.Form
                 action={`/organization/${organizationId}/project/${projectId}/git/branch/new`}
-                method='POST'
-                className='flex flex-col gap-2 flex-shrink-0'
+                method="POST"
+                className="flex flex-shrink-0 flex-col gap-2"
               >
                 <TextField className="flex flex-col gap-2">
-                  <Label className='col-span-4'>
-                    New branch name:
-                  </Label>
-                  <div className='flex items-center gap-2'>
+                  <Label className="col-span-4">New branch name:</Label>
+                  <div className="flex items-center gap-2">
                     <Input
                       required
-                      className='py-1 h-8 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors flex-1 placeholder:italic placeholder:opacity-60 col-span-3'
+                      className="col-span-3 h-8 w-full flex-1 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic placeholder:opacity-60 focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                       type="text"
                       name="branch"
                       placeholder="Branch name"
                     />
-                    <Button className="px-4 h-8 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" isDisabled={createBranchFetcher.state !== 'idle'} type="submit">
-                      <Icon className={`w-5 ${createBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} icon={createBranchFetcher.state !== 'idle' ? 'spinner' : 'plus'} /> Create
+                    <Button
+                      className="flex h-8 min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                      isDisabled={createBranchFetcher.state !== 'idle'}
+                      type="submit"
+                    >
+                      <Icon
+                        className={`w-5 ${createBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+                        icon={createBranchFetcher.state !== 'idle' ? 'spinner' : 'plus'}
+                      />{' '}
+                      Create
                     </Button>
                   </div>
                 </TextField>
                 {createNewBranchError && (
-                  <div className='flex flex-wrap justify-between items-center gap-2 p-[--padding-sm] border border-solid border-[--hl-md] bg-opacity-50 bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] text-[--color-font-warning] rounded'>
-                    <p className='text-base'>
-                      <Icon icon="exclamation-triangle" className='mr-2' />
+                  <div className="flex flex-wrap items-center justify-between gap-2 rounded border border-solid border-[--hl-md] bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] bg-opacity-50 p-[--padding-sm] text-[--color-font-warning]">
+                    <p className="text-base">
+                      <Icon icon="exclamation-triangle" className="mr-2" />
                       {createNewBranchError}
                     </p>
                   </div>
                 )}
               </createBranchFetcher.Form>
 
-              <div className='flex-1 max-h-96 overflow-hidden flex flex-col select-none border border-solid rounded border-[--hl-sm] divide-y divide-solid divide-[--hl-sm]'>
-                <Heading className='font-semibold uppercase text-[--hl] text-sm p-2'>Local Branches</Heading>
+              <div className="flex max-h-96 flex-1 select-none flex-col divide-y divide-solid divide-[--hl-sm] overflow-hidden rounded border border-solid border-[--hl-sm]">
+                <Heading className="p-2 text-sm font-semibold uppercase text-[--hl]">Local Branches</Heading>
                 <GridList
-                  aria-label='Branches list'
-                  selectionMode='none'
+                  aria-label="Branches list"
+                  selectionMode="none"
                   items={fetchedBranches.sort(sortBranches).map(branch => ({
                     id: branch,
                     key: branch,
                     name: branch,
                     isCurrent: branch === currentBranch,
                   }))}
-                  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
+                  className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-sm] overflow-y-auto focus:outline-none data-[empty]:py-0"
                 >
                   {item => (
                     <GridListItem
                       id={item.id}
                       key={item.key}
                       textValue={item.name}
-                      className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
+                      className="w-full p-2 transition-colors focus:bg-[--hl-sm] focus:outline-none"
                     >
                       <LocalBranchItem
                         branch={item.name}
@@ -378,11 +446,11 @@ export const GitProjectBranchesModal: FC<Props> = (({
                 </GridList>
               </div>
 
-              <div className='flex-1 max-h-96 overflow-hidden flex flex-col select-none border border-solid rounded border-[--hl-sm] divide-y divide-solid divide-[--hl-sm]'>
-                <Heading className='font-semibold uppercase text-[--hl] text-sm p-2'>Remote Branches</Heading>
+              <div className="flex max-h-96 flex-1 select-none flex-col divide-y divide-solid divide-[--hl-sm] overflow-hidden rounded border border-solid border-[--hl-sm]">
+                <Heading className="p-2 text-sm font-semibold uppercase text-[--hl]">Remote Branches</Heading>
                 <GridList
-                  aria-label='Remote Branches list'
-                  selectionMode='none'
+                  aria-label="Remote Branches list"
+                  selectionMode="none"
                   items={remoteOnlyBranches.sort(sortBranches).map(branch => ({
                     id: branch,
                     key: branch,
@@ -390,27 +458,33 @@ export const GitProjectBranchesModal: FC<Props> = (({
                     isCurrent: branch === currentBranch,
                   }))}
                   renderEmptyState={() => (
-                    <div className='p-2 text-[--color-font-disabled] text-center'>
+                    <div className="p-2 text-center text-[--color-font-disabled]">
                       {isFetchingRemoteBranches ? 'Fetching remote branches...' : 'No remote branches found'}
                     </div>
                   )}
-                  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
+                  className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-sm] overflow-y-auto focus:outline-none data-[empty]:py-0"
                 >
                   {item => (
                     <GridListItem
                       id={item.id}
                       key={item.key}
                       textValue={item.name}
-                      className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
+                      className="w-full p-2 transition-colors focus:bg-[--hl-sm] focus:outline-none"
                     >
-                      <RemoteBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
+                      <RemoteBranchItem
+                        branch={item.name}
+                        isCurrent={item.isCurrent}
+                        organizationId={organizationId}
+                        projectId={projectId}
+                        workspaceId={workspaceId}
+                      />
                     </GridListItem>
                   )}
                 </GridList>
                 {errors.length > 0 && (
-                  <div className='p-2'>
+                  <div className="p-2">
                     {errors.map(error => (
-                      <div key={error} className='p-2'>
+                      <div key={error} className="p-2">
                         {error}
                       </div>
                     ))}
@@ -423,4 +497,4 @@ export const GitProjectBranchesModal: FC<Props> = (({
       </Modal>
     </ModalOverlay>
   );
-});
+};
diff --git a/packages/insomnia/src/ui/components/modals/git-project-log-modal.tsx b/packages/insomnia/src/ui/components/modals/git-project-log-modal.tsx
index 431b3a6050..e4832bbd0f 100644
--- a/packages/insomnia/src/ui/components/modals/git-project-log-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-project-log-modal.tsx
@@ -1,5 +1,19 @@
 import React, { type FC, useEffect } from 'react';
-import { Button, Cell, Column, Dialog, Heading, Modal, ModalOverlay, Row, Table, TableBody, TableHeader, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Cell,
+  Column,
+  Dialog,
+  Heading,
+  Modal,
+  ModalOverlay,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { GitLogLoaderData } from '../../routes/git-project-actions';
@@ -37,78 +51,73 @@ export const GitProjectLogModal: FC<Props> = ({ onClose }) => {
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading className='text-2xl'>History</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading className="text-2xl">History</Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded w-full border border-solid border-[--hl-sm] select-none overflow-y-auto max-h-96'>
+              <div className="max-h-96 w-full select-none overflow-y-auto rounded border border-solid border-[--hl-sm]">
                 <Table
-                  selectionMode='multiple'
+                  selectionMode="multiple"
                   defaultSelectedKeys="all"
-                  aria-label='Modified objects'
-                  className="border-separate border-spacing-0 w-full"
+                  aria-label="Modified objects"
+                  className="w-full border-separate border-spacing-0"
                 >
                   <TableHeader>
-                    <Column isRowHeader className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column
+                      isRowHeader
+                      className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none"
+                    >
                       Message
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       When
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       Author
                     </Column>
                   </TableHeader>
                   <TableBody
                     renderEmptyState={() => (
-                      <div className='p-2 text-center'>
-                        {isLoading ? 'Loading...' : 'No history available'}
-                      </div>
+                      <div className="p-2 text-center">{isLoading ? 'Loading...' : 'No history available'}</div>
                     )}
-                    className="divide divide-[--hl-sm] divide-solid"
+                    className="divide divide-solid divide-[--hl-sm]"
                     items={log.filter(l => !!l).map(logEntry => ({ id: logEntry.oid, ...logEntry }))}
                   >
                     {item => (
-                      <Row className="group focus:outline-none focus-within:bg-[--hl-xxs] transition-colors">
-                        <Cell className="whitespace-nowrap p-2 text-wrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <span>
-                            {item.commit.message}
-                          </span>
+                      <Row className="group transition-colors focus-within:bg-[--hl-xxs] focus:outline-none">
+                        <Cell className="whitespace-nowrap text-wrap border-b border-solid border-[--hl-sm] p-2 text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <span>{item.commit.message}</span>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
                           <TimeFromNow
                             className="no-wrap p-2"
                             timestamp={item.commit.author.timestamp * 1000}
                             intervalSeconds={30}
                           />
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
                           <TooltipTrigger>
-                            <Button className="p-2 h-full">
-                              {item.commit.author.name}
-                            </Button>
+                            <Button className="h-full p-2">{item.commit.author.name}</Button>
                             <Tooltip
                               placement="top end"
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               {item.commit.author.email}
                             </Tooltip>
diff --git a/packages/insomnia/src/ui/components/modals/git-project-staging-modal.tsx b/packages/insomnia/src/ui/components/modals/git-project-staging-modal.tsx
index bfe6d35b6d..d4dc9ee15f 100644
--- a/packages/insomnia/src/ui/components/modals/git-project-staging-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-project-staging-modal.tsx
@@ -1,5 +1,18 @@
 import React, { type FC, useEffect } from 'react';
-import { Button, Dialog, GridList, GridListItem, Heading, Label, Modal, ModalOverlay, TextArea, TextField, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  GridList,
+  GridListItem,
+  Heading,
+  Label,
+  Modal,
+  ModalOverlay,
+  TextArea,
+  TextField,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { GitChangesLoaderData, GitDiffResult } from '../../routes/git-project-actions';
@@ -7,9 +20,7 @@ import { DiffEditor } from '../diff-view-editor';
 import { Icon } from '../icon';
 import { showAlert } from '.';
 
-export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
-  onClose,
-}) => {
+export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({ onClose }) => {
   const { organizationId, projectId, workspaceId } = useParams() as {
     organizationId: string;
     projectId: string;
@@ -46,7 +57,7 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
         method: 'POST',
         action: `/organization/${organizationId}/project/${projectId}/git/stage`,
         encType: 'application/json',
-      }
+      },
     );
   }
 
@@ -59,13 +70,14 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
         method: 'POST',
         action: `/organization/${organizationId}/project/${projectId}/git/unstage`,
         encType: 'application/json',
-      }
+      },
     );
   }
 
   function undoUnstagedChanges(paths: string[]) {
     showAlert({
-      message: 'Are you sure you want to undo your changes? This action cannot be undone and will revert all changes made since the last commit that are unstaged.',
+      message:
+        'Are you sure you want to undo your changes? This action cannot be undone and will revert all changes made since the last commit that are unstaged.',
       title: 'Undo changes',
       onConfirm: () => {
         undoUnstagedChangesFetcher.submit(
@@ -76,7 +88,7 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
             method: 'POST',
             action: `/organization/${organizationId}/project/${projectId}/git/discard`,
             encType: 'application/json',
-          }
+          },
         );
       },
       addCancel: true,
@@ -90,9 +102,7 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
     }
   }, [organizationId, projectId, workspaceId, gitChangesFetcher]);
 
-  const {
-    changes,
-  } = gitChangesFetcher.data || {
+  const { changes } = gitChangesFetcher.data || {
     changes: {
       staged: [],
       unstaged: [],
@@ -103,8 +113,10 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
 
   const { Form, formAction, state, data } = useFetcher<{ errors?: string[] }>();
 
-  const isCreatingSnapshot = state !== 'idle' && formAction === `/organization/${organizationId}/project/${projectId}/git/commit`;
-  const isPushing = state !== 'idle' && formAction === `/organization/${organizationId}/project/${projectId}/git/commit-and-push`;
+  const isCreatingSnapshot =
+    state !== 'idle' && formAction === `/organization/${organizationId}/project/${projectId}/git/commit`;
+  const isPushing =
+    state !== 'idle' && formAction === `/organization/${organizationId}/project/${projectId}/git/commit-and-push`;
   const previewDiffItem = diffChangesFetcher.data && 'diff' in diffChangesFetcher.data ? diffChangesFetcher.data : null;
 
   const allChanges = [...changes.staged, ...changes.unstaged];
@@ -124,79 +136,88 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-[calc(100%-var(--padding-xl))] h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex h-[calc(100%-var(--padding-xl))] w-[calc(100%-var(--padding-xl))] flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
         <Dialog
           data-loading={gitChangesFetcher.state === 'loading' ? 'true' : undefined}
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden data-[loading]:animate-pulse"
+          className="flex h-full flex-1 flex-col overflow-hidden outline-none data-[loading]:animate-pulse"
         >
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Commit changes {gitChangesFetcher.state === 'loading' && <Icon icon="spinner" className='animate-spin' />}</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Commit changes{' '}
+                  {gitChangesFetcher.state === 'loading' && <Icon icon="spinner" className="animate-spin" />}
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='grid [grid-template-columns:300px_1fr] h-full overflow-hidden divide-x divide-solid divide-[--hl-md] gap-2'>
-                <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-                  <Form method="POST" className='flex flex-col gap-2'>
-                    <TextField className="flex flex-col gap-2 flex-shrink-0">
-                      <Label className='font-bold'>
-                        Message
-                      </Label>
+              <div className="grid h-full gap-2 divide-x divide-solid divide-[--hl-md] overflow-hidden [grid-template-columns:300px_1fr]">
+                <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+                  <Form method="POST" className="flex flex-col gap-2">
+                    <TextField className="flex flex-shrink-0 flex-col gap-2">
+                      <Label className="font-bold">Message</Label>
                       <TextArea
                         rows={3}
                         name="message"
-                        className="border border-solid border-[--hl-sm] placeholder:text-[--hl-md] rounded-sm p-2 resize-none"
+                        className="resize-none rounded-sm border border-solid border-[--hl-sm] p-2 placeholder:text-[--hl-md]"
                         placeholder="This is a helpful message that describes the changes made in this commit."
                         required
                       />
                     </TextField>
 
-                    <div className="flex flex-shrink-0 justify-stretch gap-2 items-center">
+                    <div className="flex flex-shrink-0 items-center justify-stretch gap-2">
                       <Button
-                        type='submit'
+                        type="submit"
                         isDisabled={state !== 'idle' || changes.staged.length === 0}
                         formAction={`/organization/${organizationId}/project/${projectId}/git/commit`}
-                        className="flex-1 flex h-8 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        <Icon icon={isCreatingSnapshot ? 'spinner' : 'check'} className={`w-5 ${isCreatingSnapshot ? 'animate-spin' : ''}`} /> Commit
+                        <Icon
+                          icon={isCreatingSnapshot ? 'spinner' : 'check'}
+                          className={`w-5 ${isCreatingSnapshot ? 'animate-spin' : ''}`}
+                        />{' '}
+                        Commit
                       </Button>
                       <Button
                         type="submit"
                         isDisabled={state !== 'idle' || changes.staged.length === 0}
                         formAction={`/organization/${organizationId}/project/${projectId}/git/commit-and-push`}
-                        className="flex-1 flex h-8 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        <Icon icon={isPushing ? 'spinner' : 'cloud-arrow-up'} className={`w-5 ${isPushing ? 'animate-spin' : ''}`} /> Commit and push
+                        <Icon
+                          icon={isPushing ? 'spinner' : 'cloud-arrow-up'}
+                          className={`w-5 ${isPushing ? 'animate-spin' : ''}`}
+                        />{' '}
+                        Commit and push
                       </Button>
                     </div>
                     {data && data.errors && data.errors.length > 0 && (
-                      <p className="bg-opacity-20 text-sm text-[--color-font-danger] p-2 rounded-sm bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))]">
+                      <p className="rounded-sm bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] bg-opacity-20 p-2 text-sm text-[--color-font-danger]">
                         <Icon icon="exclamation-triangle" /> {data.errors.join('\n')}
                       </p>
                     )}
                   </Form>
 
-                  <div className='grid auto-rows-auto gap-2 overflow-y-auto'>
-                    <div className='flex flex-col gap-2 overflow-hidden max-h-96 w-full'>
-                      <Heading className='group font-semibold flex-shrink-0 w-full flex items-center gap-2 py-1 justify-between'>
-                        <span className='flex-1'>Staged changes</span>
+                  <div className="grid auto-rows-auto gap-2 overflow-y-auto">
+                    <div className="flex max-h-96 w-full flex-col gap-2 overflow-hidden">
+                      <Heading className="group flex w-full flex-shrink-0 items-center justify-between gap-2 py-1 font-semibold">
+                        <span className="flex-1">Staged changes</span>
                         <TooltipTrigger>
                           <Button
-                            className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base'
+                            className="flex aspect-square h-6 items-center justify-center rounded-sm text-base text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                             slot={null}
-                            name='Unstage all changes'
+                            name="Unstage all changes"
                             onPress={() => {
                               unstageChanges(changes.staged.map(entry => entry.path));
                             }}
@@ -205,17 +226,19 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                           </Button>
                           <Tooltip
                             offset={8}
-                            className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                            className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                           >
                             Unstage all changes
                           </Tooltip>
                         </TooltipTrigger>
-                        <span className='text-sm rounded-full size-6 flex items-center justify-center px-1 text-[--hl] bg-[--hl-sm]'>{changes.staged.length}</span>
+                        <span className="flex size-6 items-center justify-center rounded-full bg-[--hl-sm] px-1 text-sm text-[--hl]">
+                          {changes.staged.length}
+                        </span>
                       </Heading>
-                      <div className='flex-1 flex overflow-y-auto w-full select-none'>
+                      <div className="flex w-full flex-1 select-none overflow-y-auto">
                         <GridList
                           className="w-full"
-                          aria-label='Unstaged changes'
+                          aria-label="Unstaged changes"
                           items={changes.staged.map(entry => ({
                             entry,
                             id: entry.path,
@@ -228,19 +251,17 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                             });
                           }}
                           renderEmptyState={() => (
-                            <p className='p-2 text-[--hl] text-sm'>
-                              Stage your changes to commit them.
-                            </p>
+                            <p className="p-2 text-sm text-[--hl]">Stage your changes to commit them.</p>
                           )}
                         >
                           {item => {
                             return (
-                              <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                                <span className='truncate'>{item.entry.path}</span>
-                                <div className='flex items-center gap-1'>
+                              <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                                <span className="truncate">{item.entry.path}</span>
+                                <div className="flex items-center gap-1">
                                   <TooltipTrigger>
                                     <Button
-                                      className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                      className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                       slot={null}
                                       name="Unstage change"
                                       onPress={() => {
@@ -251,7 +272,7 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
                                       Unstage change
                                     </Tooltip>
@@ -274,15 +295,15 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                         </GridList>
                       </div>
                     </div>
-                    <div className='flex flex-col gap-2 overflow-hidden max-h-96 w-full'>
-                      <Heading className='group font-semibold flex-shrink-0 w-full flex items-center py-1 justify-between'>
+                    <div className="flex max-h-96 w-full flex-col gap-2 overflow-hidden">
+                      <Heading className="group flex w-full flex-shrink-0 items-center justify-between py-1 font-semibold">
                         <span>Changes</span>
-                        <div className='flex items-center gap-2'>
+                        <div className="flex items-center gap-2">
                           <TooltipTrigger>
                             <Button
-                              className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base'
+                              className="flex aspect-square h-6 items-center justify-center rounded-sm text-base text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                               slot={null}
-                              name='Discard all changes'
+                              name="Discard all changes"
                               onPress={() => {
                                 undoUnstagedChanges(changes.unstaged.map(entry => entry.path));
                               }}
@@ -298,14 +319,14 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                             </Button>
                             <Tooltip
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               Discard all changes
                             </Tooltip>
                           </TooltipTrigger>
                           <TooltipTrigger>
                             <Button
-                              className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] px-2 gap-2 rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base'
+                              className="flex aspect-square h-6 items-center justify-center gap-2 rounded-sm px-2 text-base text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                               slot={null}
                               name="Stage all changes"
                               onPress={() => {
@@ -316,17 +337,19 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                             </Button>
                             <Tooltip
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               Stage all changes
                             </Tooltip>
                           </TooltipTrigger>
-                          <span className='text-sm rounded-full size-6 flex items-center justify-center px-1 text-[--hl] bg-[--hl-sm]'>{changes.unstaged.length}</span>
+                          <span className="flex size-6 items-center justify-center rounded-full bg-[--hl-sm] px-1 text-sm text-[--hl]">
+                            {changes.unstaged.length}
+                          </span>
                         </div>
                       </Heading>
-                      <div className='flex-1 flex overflow-y-auto w-full select-none'>
+                      <div className="flex w-full flex-1 select-none overflow-y-auto">
                         <GridList
-                          aria-label='Unstaged changes'
+                          aria-label="Unstaged changes"
                           className="w-full"
                           items={changes.unstaged.map(entry => ({
                             entry,
@@ -343,12 +366,12 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                         >
                           {item => {
                             return (
-                              <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                                <span className='truncate'>{item.entry.path}</span>
-                                <div className='flex items-center gap-1'>
+                              <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                                <span className="truncate">{item.entry.path}</span>
+                                <div className="flex items-center gap-1">
                                   <TooltipTrigger>
                                     <Button
-                                      className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                      className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                       slot={null}
                                       name="Discard change"
                                       onPress={() => {
@@ -366,14 +389,14 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
                                       Discard change
                                     </Tooltip>
                                   </TooltipTrigger>
                                   <TooltipTrigger>
                                     <Button
-                                      className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                      className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                       slot={null}
                                       name="Stage change"
                                       onPress={() => {
@@ -384,7 +407,7 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
                                       Stage change
                                     </Tooltip>
@@ -409,27 +432,27 @@ export const GitProjectStagingModal: FC<{ onClose: () => void }> = ({
                     </div>
                   </div>
                 </div>
-                {previewDiffItem?.diff ? <div className='p-2 pb-0 flex flex-col gap-2 h-full overflow-y-auto'>
-                  <Heading className='font-bold flex items-center gap-2'>
-                    <Icon icon="code-compare" />
-                    {previewDiffItem.name}
-                  </Heading>
-                  {previewDiffItem && (
-                    <div
-                      className='bg-[--hl-xs] rounded-sm p-2 flex-1 overflow-y-auto text-[--color-font]'
-                    >
-                      <DiffEditor original={previewDiffItem.diff.before} modified={previewDiffItem.diff.after} />
-                    </div>
-                  )}
-                </div> : <div className='p-2 h-full flex flex-col gap-4 items-center justify-center'>
-                  <Heading className='font-semibold flex justify-center items-center gap-2 text-4xl text-[--hl-md]'>
-                    <Icon icon="code-compare" />
-                    Diff view
-                  </Heading>
-                  <p className='text-[--hl]'>
-                    Select an item to compare
-                  </p>
-                </div>}
+                {previewDiffItem?.diff ? (
+                  <div className="flex h-full flex-col gap-2 overflow-y-auto p-2 pb-0">
+                    <Heading className="flex items-center gap-2 font-bold">
+                      <Icon icon="code-compare" />
+                      {previewDiffItem.name}
+                    </Heading>
+                    {previewDiffItem && (
+                      <div className="flex-1 overflow-y-auto rounded-sm bg-[--hl-xs] p-2 text-[--color-font]">
+                        <DiffEditor original={previewDiffItem.diff.before} modified={previewDiffItem.diff.after} />
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="flex h-full flex-col items-center justify-center gap-4 p-2">
+                    <Heading className="flex items-center justify-center gap-2 text-4xl font-semibold text-[--hl-md]">
+                      <Icon icon="code-compare" />
+                      Diff view
+                    </Heading>
+                    <p className="text-[--hl]">Select an item to compare</p>
+                  </div>
+                )}
               </div>
             </div>
           )}
diff --git a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repo-clone-modal.tsx b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repo-clone-modal.tsx
index 7bdf7a32ab..4a32c880c9 100644
--- a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repo-clone-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repo-clone-modal.tsx
@@ -28,16 +28,8 @@ export const GitProjectRepositoryCloneModal = (props: ModalProps) => {
   }, []);
 
   const onSubmit = (gitRepositoryPatch: Partial<GitRepository>) => {
-    const {
-      author,
-      credentials,
-      created,
-      modified,
-      isPrivate,
-      needsFullClone,
-      uriNeedsMigration,
-      ...repoPatch
-    } = gitRepositoryPatch;
+    const { author, credentials, created, modified, isPrivate, needsFullClone, uriNeedsMigration, ...repoPatch } =
+      gitRepositoryPatch;
 
     cloneGitRepositoryFetcher.submit(
       {
@@ -50,7 +42,7 @@ export const GitProjectRepositoryCloneModal = (props: ModalProps) => {
         // file://./../../../routes/git-actions.tsx#cloneGitRepoAction
         action: `/organization/${organizationId}/git/clone`,
         method: 'post',
-      }
+      },
     );
   };
 
@@ -58,7 +50,7 @@ export const GitProjectRepositoryCloneModal = (props: ModalProps) => {
   const errors = cloneGitRepositoryFetcher.data?.errors as (Error | string)[];
   useEffect(() => {
     if (errors && errors.length) {
-      const errorMessage = errors.map(e => e instanceof Error ? e.message : typeof e === 'string' && e).join(', ');
+      const errorMessage = errors.map(e => (e instanceof Error ? e.message : typeof e === 'string' && e)).join(', ');
 
       showAlert({
         title: 'Error Cloning Repository',
@@ -84,43 +76,46 @@ export const GitProjectRepositoryCloneModal = (props: ModalProps) => {
             onSelectionChange={key => {
               setTab(key as OauthProviderName);
             }}
-            aria-label='Git repository settings tabs'
-            className="flex-1 w-full h-full flex flex-col"
+            aria-label="Git repository settings tabs"
+            className="flex h-full w-full flex-1 flex-col"
           >
-            <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+            <TabList
+              className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+              aria-label="Request pane tabs"
+            >
               <Tab
-                className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                id='github'
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="github"
               >
-                <div className="flex gap-2 items-center"><i className="fa fa-github" /> GitHub</div>
+                <div className="flex items-center gap-2">
+                  <i className="fa fa-github" /> GitHub
+                </div>
               </Tab>
               <Tab
-                className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                id='gitlab'
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="gitlab"
               >
-                <div className="flex gap-2 items-center"><i className="fa fa-gitlab" /> GitLab</div>
+                <div className="flex items-center gap-2">
+                  <i className="fa fa-gitlab" /> GitLab
+                </div>
               </Tab>
               <Tab
-                className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                id='custom'
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="custom"
               >
-                <div className="flex gap-2 items-center"><i className="fa fa-code-fork" /> Git</div>
+                <div className="flex items-center gap-2">
+                  <i className="fa fa-code-fork" /> Git
+                </div>
               </Tab>
             </TabList>
-            <TabPanel className='w-full h-full overflow-y-auto py-2' id='github'>
-              <GitHubRepositorySetupFormGroup
-                onSubmit={onSubmit}
-              />
+            <TabPanel className="h-full w-full overflow-y-auto py-2" id="github">
+              <GitHubRepositorySetupFormGroup onSubmit={onSubmit} />
             </TabPanel>
-            <TabPanel className='w-full h-full overflow-y-auto py-2' id='gitlab'>
-              <GitLabRepositorySetupFormGroup
-                onSubmit={onSubmit}
-              />
+            <TabPanel className="h-full w-full overflow-y-auto py-2" id="gitlab">
+              <GitLabRepositorySetupFormGroup onSubmit={onSubmit} />
             </TabPanel>
-            <TabPanel className='w-full h-full overflow-y-auto py-2' id='custom'>
-              <CustomRepositorySettingsFormGroup
-                onSubmit={onSubmit}
-              />
+            <TabPanel className="h-full w-full overflow-y-auto py-2" id="custom">
+              <CustomRepositorySettingsFormGroup onSubmit={onSubmit} />
             </TabPanel>
           </Tabs>
         </ErrorBoundary>
@@ -130,7 +125,13 @@ export const GitProjectRepositoryCloneModal = (props: ModalProps) => {
           <button className="btn" onClick={() => modalRef.current?.hide()}>
             Cancel
           </button>
-          <button type="submit" disabled={isSubmitting} form={selectedTab} className="btn" data-testid="git-repository-settings-modal__sync-btn">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            form={selectedTab}
+            className="btn"
+            data-testid="git-repository-settings-modal__sync-btn"
+          >
             Clone
           </button>
         </div>
diff --git a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repository-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repository-settings-modal.tsx
index f34ce378a6..56d61759c0 100644
--- a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repository-settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-project-repository-settings-modal.tsx
@@ -30,10 +30,17 @@ function getDefaultOAuthProvider(credentials?: GitCredentials | null): OauthProv
   return 'custom';
 }
 
-export const GitProjectRepositorySettingsModal = ({ gitRepository, ...modalProps }: ModalProps & {
+export const GitProjectRepositorySettingsModal = ({
+  gitRepository,
+  ...modalProps
+}: ModalProps & {
   gitRepository?: GitRepository;
 }) => {
-  const { organizationId, projectId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
   const modalRef = useRef<ModalHandle>(null);
   const updateGitRepositoryFetcher = useFetcher();
   const deleteGitRepositoryFetcher = useFetcher();
@@ -45,16 +52,8 @@ export const GitProjectRepositorySettingsModal = ({ gitRepository, ...modalProps
   }, []);
 
   const onSubmit = (gitRepositoryPatch: Partial<GitRepository>) => {
-    const {
-      author,
-      credentials,
-      created,
-      modified,
-      isPrivate,
-      needsFullClone,
-      uriNeedsMigration,
-      ...repoPatch
-    } = gitRepositoryPatch;
+    const { author, credentials, created, modified, isPrivate, needsFullClone, uriNeedsMigration, ...repoPatch } =
+      gitRepositoryPatch;
 
     updateGitRepositoryFetcher.submit(
       {
@@ -66,7 +65,7 @@ export const GitProjectRepositorySettingsModal = ({ gitRepository, ...modalProps
       {
         action: `/organization/${organizationId}/project/${projectId}/git/update`,
         method: 'post',
-      }
+      },
     );
   };
 
@@ -76,7 +75,7 @@ export const GitProjectRepositorySettingsModal = ({ gitRepository, ...modalProps
 
   useEffect(() => {
     if (errors && errors.length) {
-      const errorMessage = errors.map(e => e instanceof Error ? e.message : typeof e === 'string' && e).join(', ');
+      const errorMessage = errors.map(e => (e instanceof Error ? e.message : typeof e === 'string' && e)).join(', ');
 
       showAlert({
         title: 'Error Cloning Repository',
@@ -104,46 +103,46 @@ export const GitProjectRepositorySettingsModal = ({ gitRepository, ...modalProps
               onSelectionChange={key => {
                 setTab(key as OauthProviderName);
               }}
-              aria-label='Git repository settings tabs'
-              className="flex-1 w-full h-full flex flex-col"
+              aria-label="Git repository settings tabs"
+              className="flex h-full w-full flex-1 flex-col"
             >
-              <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+              <TabList
+                className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+                aria-label="Request pane tabs"
+              >
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='github'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="github"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-github" /> GitHub</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-github" /> GitHub
+                  </div>
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='gitlab'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="gitlab"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-gitlab" /> GitLab</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-gitlab" /> GitLab
+                  </div>
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='custom'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="custom"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-code-fork" /> Git</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-code-fork" /> Git
+                  </div>
                 </Tab>
               </TabList>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='github'>
-                <GitHubRepositorySetupFormGroup
-                  uri={gitRepository?.uri}
-                  onSubmit={onSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="github">
+                <GitHubRepositorySetupFormGroup uri={gitRepository?.uri} onSubmit={onSubmit} />
               </TabPanel>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='gitlab'>
-                <GitLabRepositorySetupFormGroup
-                  uri={gitRepository?.uri}
-                  onSubmit={onSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="gitlab">
+                <GitLabRepositorySetupFormGroup uri={gitRepository?.uri} onSubmit={onSubmit} />
               </TabPanel>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='custom'>
-                <CustomRepositorySettingsFormGroup
-                  gitRepository={gitRepository}
-                  onSubmit={onSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="custom">
+                <CustomRepositorySettingsFormGroup gitRepository={gitRepository} onSubmit={onSubmit} />
               </TabPanel>
             </Tabs>
           </ErrorBoundary>
@@ -159,10 +158,13 @@ export const GitProjectRepositorySettingsModal = ({ gitRepository, ...modalProps
               className="btn"
               disabled={!hasGitRepository}
               onClick={() => {
-                deleteGitRepositoryFetcher.submit({}, {
-                  action: `/organization/${organizationId}/project/${projectId}/git/reset`,
-                  method: 'post',
-                });
+                deleteGitRepositoryFetcher.submit(
+                  {},
+                  {
+                    action: `/organization/${organizationId}/project/${projectId}/git/reset`,
+                    method: 'post',
+                  },
+                );
               }}
             >
               Reset
diff --git a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repo-clone-modal.tsx b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repo-clone-modal.tsx
index 8fb32ab561..809e915ec1 100644
--- a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repo-clone-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repo-clone-modal.tsx
@@ -28,16 +28,8 @@ export const GitRepositoryCloneModal = (props: ModalProps) => {
   }, []);
 
   const onSubmit = (gitRepositoryPatch: Partial<GitRepository>) => {
-    const {
-      author,
-      credentials,
-      created,
-      modified,
-      isPrivate,
-      needsFullClone,
-      uriNeedsMigration,
-      ...repoPatch
-    } = gitRepositoryPatch;
+    const { author, credentials, created, modified, isPrivate, needsFullClone, uriNeedsMigration, ...repoPatch } =
+      gitRepositoryPatch;
 
     cloneGitRepositoryFetcher.submit(
       {
@@ -50,7 +42,7 @@ export const GitRepositoryCloneModal = (props: ModalProps) => {
         // file://./../../../routes/git-actions.tsx#cloneGitRepoAction
         action: `/organization/${organizationId}/project/${projectId}/git/clone`,
         method: 'post',
-      }
+      },
     );
   };
 
@@ -58,7 +50,7 @@ export const GitRepositoryCloneModal = (props: ModalProps) => {
   const errors = cloneGitRepositoryFetcher.data?.errors as (Error | string)[];
   useEffect(() => {
     if (errors && errors.length) {
-      const errorMessage = errors.map(e => e instanceof Error ? e.message : typeof e === 'string' && e).join(', ');
+      const errorMessage = errors.map(e => (e instanceof Error ? e.message : typeof e === 'string' && e)).join(', ');
 
       showAlert({
         title: 'Error Cloning Repository',
@@ -84,43 +76,46 @@ export const GitRepositoryCloneModal = (props: ModalProps) => {
             onSelectionChange={key => {
               setTab(key as OauthProviderName);
             }}
-            aria-label='Git repository settings tabs'
-            className="flex-1 w-full h-full flex flex-col"
+            aria-label="Git repository settings tabs"
+            className="flex h-full w-full flex-1 flex-col"
           >
-            <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+            <TabList
+              className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+              aria-label="Request pane tabs"
+            >
               <Tab
-                className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                id='github'
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="github"
               >
-                <div className="flex gap-2 items-center"><i className="fa fa-github" /> GitHub</div>
+                <div className="flex items-center gap-2">
+                  <i className="fa fa-github" /> GitHub
+                </div>
               </Tab>
               <Tab
-                className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                id='gitlab'
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="gitlab"
               >
-                <div className="flex gap-2 items-center"><i className="fa fa-gitlab" /> GitLab</div>
+                <div className="flex items-center gap-2">
+                  <i className="fa fa-gitlab" /> GitLab
+                </div>
               </Tab>
               <Tab
-                className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                id='custom'
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="custom"
               >
-                <div className="flex gap-2 items-center"><i className="fa fa-code-fork" /> Git</div>
+                <div className="flex items-center gap-2">
+                  <i className="fa fa-code-fork" /> Git
+                </div>
               </Tab>
             </TabList>
-            <TabPanel className='w-full h-full overflow-y-auto py-2' id='github'>
-              <GitHubRepositorySetupFormGroup
-                onSubmit={onSubmit}
-              />
+            <TabPanel className="h-full w-full overflow-y-auto py-2" id="github">
+              <GitHubRepositorySetupFormGroup onSubmit={onSubmit} />
             </TabPanel>
-            <TabPanel className='w-full h-full overflow-y-auto py-2' id='gitlab'>
-              <GitLabRepositorySetupFormGroup
-                onSubmit={onSubmit}
-              />
+            <TabPanel className="h-full w-full overflow-y-auto py-2" id="gitlab">
+              <GitLabRepositorySetupFormGroup onSubmit={onSubmit} />
             </TabPanel>
-            <TabPanel className='w-full h-full overflow-y-auto py-2' id='custom'>
-              <CustomRepositorySettingsFormGroup
-                onSubmit={onSubmit}
-              />
+            <TabPanel className="h-full w-full overflow-y-auto py-2" id="custom">
+              <CustomRepositorySettingsFormGroup onSubmit={onSubmit} />
             </TabPanel>
           </Tabs>
         </ErrorBoundary>
@@ -130,7 +125,13 @@ export const GitRepositoryCloneModal = (props: ModalProps) => {
           <button className="btn" onClick={() => modalRef.current?.hide()}>
             Cancel
           </button>
-          <button type="submit" disabled={isSubmitting} form={selectedTab} className="btn" data-testid="git-repository-settings-modal__sync-btn">
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            form={selectedTab}
+            className="btn"
+            data-testid="git-repository-settings-modal__sync-btn"
+          >
             Clone
           </button>
         </div>
diff --git a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repository-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repository-settings-modal.tsx
index c3d2467a95..15577ab19e 100644
--- a/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repository-settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-repository-settings-modal/git-repository-settings-modal.tsx
@@ -30,10 +30,17 @@ function getDefaultOAuthProvider(credentials?: GitCredentials | null): OauthProv
   return 'custom';
 }
 
-export const GitRepositorySettingsModal = ({ gitRepository, ...modalProps }: ModalProps & {
+export const GitRepositorySettingsModal = ({
+  gitRepository,
+  ...modalProps
+}: ModalProps & {
   gitRepository?: GitRepository;
 }) => {
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
   const modalRef = useRef<ModalHandle>(null);
   const updateGitRepositoryFetcher = useFetcher();
   const deleteGitRepositoryFetcher = useFetcher();
@@ -45,16 +52,8 @@ export const GitRepositorySettingsModal = ({ gitRepository, ...modalProps }: Mod
   }, []);
 
   const onSubmit = (gitRepositoryPatch: Partial<GitRepository>) => {
-    const {
-      author,
-      credentials,
-      created,
-      modified,
-      isPrivate,
-      needsFullClone,
-      uriNeedsMigration,
-      ...repoPatch
-    } = gitRepositoryPatch;
+    const { author, credentials, created, modified, isPrivate, needsFullClone, uriNeedsMigration, ...repoPatch } =
+      gitRepositoryPatch;
 
     updateGitRepositoryFetcher.submit(
       {
@@ -66,7 +65,7 @@ export const GitRepositorySettingsModal = ({ gitRepository, ...modalProps }: Mod
       {
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/update`,
         method: 'post',
-      }
+      },
     );
   };
 
@@ -76,7 +75,7 @@ export const GitRepositorySettingsModal = ({ gitRepository, ...modalProps }: Mod
 
   useEffect(() => {
     if (errors && errors.length) {
-      const errorMessage = errors.map(e => e instanceof Error ? e.message : typeof e === 'string' && e).join(', ');
+      const errorMessage = errors.map(e => (e instanceof Error ? e.message : typeof e === 'string' && e)).join(', ');
 
       showAlert({
         title: 'Error Cloning Repository',
@@ -104,46 +103,46 @@ export const GitRepositorySettingsModal = ({ gitRepository, ...modalProps }: Mod
               onSelectionChange={key => {
                 setTab(key as OauthProviderName);
               }}
-              aria-label='Git repository settings tabs'
-              className="flex-1 w-full h-full flex flex-col"
+              aria-label="Git repository settings tabs"
+              className="flex h-full w-full flex-1 flex-col"
             >
-              <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+              <TabList
+                className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+                aria-label="Request pane tabs"
+              >
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='github'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="github"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-github" /> GitHub</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-github" /> GitHub
+                  </div>
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='gitlab'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="gitlab"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-gitlab" /> GitLab</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-gitlab" /> GitLab
+                  </div>
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='custom'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="custom"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-code-fork" /> Git</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-code-fork" /> Git
+                  </div>
                 </Tab>
               </TabList>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='github'>
-                <GitHubRepositorySetupFormGroup
-                  uri={gitRepository?.uri}
-                  onSubmit={onSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="github">
+                <GitHubRepositorySetupFormGroup uri={gitRepository?.uri} onSubmit={onSubmit} />
               </TabPanel>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='gitlab'>
-                <GitLabRepositorySetupFormGroup
-                  uri={gitRepository?.uri}
-                  onSubmit={onSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="gitlab">
+                <GitLabRepositorySetupFormGroup uri={gitRepository?.uri} onSubmit={onSubmit} />
               </TabPanel>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='custom'>
-                <CustomRepositorySettingsFormGroup
-                  gitRepository={gitRepository}
-                  onSubmit={onSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="custom">
+                <CustomRepositorySettingsFormGroup gitRepository={gitRepository} onSubmit={onSubmit} />
               </TabPanel>
             </Tabs>
           </ErrorBoundary>
@@ -159,10 +158,13 @@ export const GitRepositorySettingsModal = ({ gitRepository, ...modalProps }: Mod
               className="btn"
               disabled={!hasGitRepository}
               onClick={() => {
-                deleteGitRepositoryFetcher.submit({}, {
-                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/reset`,
-                  method: 'post',
-                });
+                deleteGitRepositoryFetcher.submit(
+                  {},
+                  {
+                    action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/reset`,
+                    method: 'post',
+                  },
+                );
               }}
             >
               Reset
diff --git a/packages/insomnia/src/ui/components/modals/git-staging-modal.tsx b/packages/insomnia/src/ui/components/modals/git-staging-modal.tsx
index 3b942c8a29..4c64eb1a0f 100644
--- a/packages/insomnia/src/ui/components/modals/git-staging-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/git-staging-modal.tsx
@@ -1,5 +1,18 @@
 import React, { type FC, useEffect } from 'react';
-import { Button, Dialog, GridList, GridListItem, Heading, Label, Modal, ModalOverlay, TextArea, TextField, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  GridList,
+  GridListItem,
+  Heading,
+  Label,
+  Modal,
+  ModalOverlay,
+  TextArea,
+  TextField,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { GitRepository } from '../../../models/git-repository';
@@ -9,9 +22,7 @@ import { ConfigLink } from '../github-app-config-link';
 import { Icon } from '../icon';
 import { showAlert } from '.';
 
-export const GitStagingModal: FC<{ onClose: () => void }> = ({
-  onClose,
-}) => {
+export const GitStagingModal: FC<{ onClose: () => void }> = ({ onClose }) => {
   const { organizationId, projectId, workspaceId } = useParams() as {
     organizationId: string;
     projectId: string;
@@ -48,7 +59,7 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
         method: 'POST',
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/stage`,
         encType: 'application/json',
-      }
+      },
     );
   }
 
@@ -61,13 +72,14 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
         method: 'POST',
         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/unstage`,
         encType: 'application/json',
-      }
+      },
     );
   }
 
   function undoUnstagedChanges(paths: string[]) {
     showAlert({
-      message: 'Are you sure you want to undo your changes? This action cannot be undone and will revert all changes made since the last commit that are unstaged.',
+      message:
+        'Are you sure you want to undo your changes? This action cannot be undone and will revert all changes made since the last commit that are unstaged.',
       title: 'Undo changes',
       onConfirm: () => {
         undoUnstagedChangesFetcher.submit(
@@ -78,7 +90,7 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
             method: 'POST',
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/discard`,
             encType: 'application/json',
-          }
+          },
         );
       },
       addCancel: true,
@@ -88,13 +100,13 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
   useEffect(() => {
     if (gitChangesFetcher.state === 'idle' && !gitChangesFetcher.data) {
       // file://./../../routes/git-actions.tsx#gitChangesLoader
-      gitChangesFetcher.load(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/changes`);
+      gitChangesFetcher.load(
+        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/changes`,
+      );
     }
   }, [organizationId, projectId, workspaceId, gitChangesFetcher]);
 
-  const {
-    changes,
-  } = gitChangesFetcher.data || {
+  const { changes } = gitChangesFetcher.data || {
     changes: {
       staged: [],
       unstaged: [],
@@ -105,8 +117,12 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
 
   const { Form, formAction, state, data } = useFetcher<{ errors?: string[]; gitRepository: GitRepository }>();
 
-  const isCreatingSnapshot = state !== 'idle' && formAction === `/organization/${organizationId}/project/${projectId}/workspace/:workspaceId/git/commit`;
-  const isPushing = state !== 'idle' && formAction === `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/commit-and-push`;
+  const isCreatingSnapshot =
+    state !== 'idle' &&
+    formAction === `/organization/${organizationId}/project/${projectId}/workspace/:workspaceId/git/commit`;
+  const isPushing =
+    state !== 'idle' &&
+    formAction === `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/commit-and-push`;
 
   const previewDiffItem = diffChangesFetcher.data && 'diff' in diffChangesFetcher.data ? diffChangesFetcher.data : null;
 
@@ -127,80 +143,88 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-[calc(100%-var(--padding-xl))] h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex h-[calc(100%-var(--padding-xl))] w-[calc(100%-var(--padding-xl))] flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
         <Dialog
           data-loading={gitChangesFetcher.state === 'loading' ? 'true' : undefined}
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden data-[loading]:animate-pulse"
+          className="flex h-full flex-1 flex-col overflow-hidden outline-none data-[loading]:animate-pulse"
         >
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Commit changes</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Commit changes
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='grid [grid-template-columns:300px_1fr] h-full overflow-hidden divide-x divide-solid divide-[--hl-md] gap-2'>
-                <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-                  <Form method="POST" className='flex flex-col gap-2'>
-                    <TextField className="flex flex-col gap-2 flex-shrink-0">
-                      <Label className='font-bold'>
-                        Message
-                      </Label>
+              <div className="grid h-full gap-2 divide-x divide-solid divide-[--hl-md] overflow-hidden [grid-template-columns:300px_1fr]">
+                <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+                  <Form method="POST" className="flex flex-col gap-2">
+                    <TextField className="flex flex-shrink-0 flex-col gap-2">
+                      <Label className="font-bold">Message</Label>
                       <TextArea
                         rows={3}
                         name="message"
-                        className="border border-solid border-[--hl-sm] placeholder:text-[--hl-md] rounded-sm p-2 resize-none"
+                        className="resize-none rounded-sm border border-solid border-[--hl-sm] p-2 placeholder:text-[--hl-md]"
                         placeholder="This is a helpful message that describes the changes made in this commit."
                         required
                       />
                     </TextField>
 
-                    <div className="flex flex-shrink-0 justify-stretch gap-2 items-center">
+                    <div className="flex flex-shrink-0 items-center justify-stretch gap-2">
                       <Button
-                        type='submit'
+                        type="submit"
                         isDisabled={state !== 'idle' || changes.staged.length === 0}
                         formAction={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/commit`}
-                        className="flex-1 flex h-8 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        <Icon icon={isCreatingSnapshot ? 'spinner' : 'check'} className={`w-5 ${isCreatingSnapshot ? 'animate-spin' : ''}`} /> Commit
+                        <Icon
+                          icon={isCreatingSnapshot ? 'spinner' : 'check'}
+                          className={`w-5 ${isCreatingSnapshot ? 'animate-spin' : ''}`}
+                        />{' '}
+                        Commit
                       </Button>
                       <Button
                         type="submit"
                         isDisabled={state !== 'idle' || changes.staged.length === 0}
                         formAction={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/git/commit-and-push`}
-                        className="flex-1 flex h-8 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        <Icon icon={isPushing ? 'spinner' : 'cloud-arrow-up'} className={`w-5 ${isPushing ? 'animate-spin' : ''}`} /> Commit and push
+                        <Icon
+                          icon={isPushing ? 'spinner' : 'cloud-arrow-up'}
+                          className={`w-5 ${isPushing ? 'animate-spin' : ''}`}
+                        />{' '}
+                        Commit and push
                       </Button>
                     </div>
                     {data && data.errors && data.errors.length > 0 && (
-                      <p className="bg-opacity-20 text-sm text-[--color-font-danger] p-2 rounded-sm bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))]">
+                      <p className="rounded-sm bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] bg-opacity-20 p-2 text-sm text-[--color-font-danger]">
                         <Icon icon="exclamation-triangle" /> {data.errors.join('\n')}
                         <ConfigLink small {...data} />
                       </p>
                     )}
                   </Form>
 
-                  <div className='grid auto-rows-auto gap-2 overflow-y-auto'>
-                    <div className='flex flex-col gap-2 overflow-hidden max-h-96 w-full'>
-                      <Heading className='group font-semibold flex-shrink-0 w-full flex items-center gap-2 py-1 justify-between'>
-                        <span className='flex-1'>Staged changes</span>
+                  <div className="grid auto-rows-auto gap-2 overflow-y-auto">
+                    <div className="flex max-h-96 w-full flex-col gap-2 overflow-hidden">
+                      <Heading className="group flex w-full flex-shrink-0 items-center justify-between gap-2 py-1 font-semibold">
+                        <span className="flex-1">Staged changes</span>
                         <TooltipTrigger>
                           <Button
-                            className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base'
+                            className="flex aspect-square h-6 items-center justify-center rounded-sm text-base text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                             slot={null}
-                            name='Unstage all changes'
+                            name="Unstage all changes"
                             onPress={() => {
                               unstageChanges(changes.staged.map(entry => entry.path));
                             }}
@@ -209,14 +233,16 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                           </Button>
                           <Tooltip
                             offset={8}
-                            className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                            className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                           >
                             Unstage all changes
                           </Tooltip>
                         </TooltipTrigger>
-                        <span className='text-sm rounded-full size-6 flex items-center justify-center px-1 text-[--hl] bg-[--hl-sm]'>{changes.staged.length}</span>
+                        <span className="flex size-6 items-center justify-center rounded-full bg-[--hl-sm] px-1 text-sm text-[--hl]">
+                          {changes.staged.length}
+                        </span>
                       </Heading>
-                      <div className='flex-1 flex overflow-y-auto w-full select-none'>
+                      <div className="flex w-full flex-1 select-none overflow-y-auto">
                         <GridList
                           className="w-full"
                           items={changes.staged.map(entry => ({
@@ -224,7 +250,7 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                             id: entry.path,
                             textValue: entry.path,
                           }))}
-                          aria-label='Unstaged changes'
+                          aria-label="Unstaged changes"
                           onAction={key => {
                             diffChanges({
                               path: key.toString(),
@@ -232,19 +258,17 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                             });
                           }}
                           renderEmptyState={() => (
-                            <p className='p-2 text-[--hl] text-sm'>
-                              Stage your changes to commit them.
-                            </p>
+                            <p className="p-2 text-sm text-[--hl]">Stage your changes to commit them.</p>
                           )}
                         >
                           {item => {
                             return (
-                              <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                                <span className='truncate'>{item.entry.name}</span>
-                                <div className='flex items-center gap-1'>
+                              <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                                <span className="truncate">{item.entry.name}</span>
+                                <div className="flex items-center gap-1">
                                   <TooltipTrigger>
                                     <Button
-                                      className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                      className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                       slot={null}
                                       name="Unstage change"
                                       onPress={() => {
@@ -255,7 +279,7 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
                                       Unstage change
                                     </Tooltip>
@@ -278,15 +302,15 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                         </GridList>
                       </div>
                     </div>
-                    <div className='flex flex-col gap-2 overflow-hidden max-h-96 w-full'>
-                      <Heading className='group font-semibold flex-shrink-0 w-full flex items-center py-1 justify-between'>
+                    <div className="flex max-h-96 w-full flex-col gap-2 overflow-hidden">
+                      <Heading className="group flex w-full flex-shrink-0 items-center justify-between py-1 font-semibold">
                         <span>Changes</span>
-                        <div className='flex items-center gap-2'>
+                        <div className="flex items-center gap-2">
                           <TooltipTrigger>
                             <Button
-                              className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base'
+                              className="flex aspect-square h-6 items-center justify-center rounded-sm text-base text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                               slot={null}
-                              name='Discard all changes'
+                              name="Discard all changes"
                               onPress={() => {
                                 undoUnstagedChanges(changes.unstaged.map(entry => entry.path));
                               }}
@@ -302,14 +326,14 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                             </Button>
                             <Tooltip
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               Discard all changes
                             </Tooltip>
                           </TooltipTrigger>
                           <TooltipTrigger>
                             <Button
-                              className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] px-2 gap-2 rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base'
+                              className="flex aspect-square h-6 items-center justify-center gap-2 rounded-sm px-2 text-base text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                               slot={null}
                               name="Stage all changes"
                               onPress={() => {
@@ -320,15 +344,17 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                             </Button>
                             <Tooltip
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               Stage all changes
                             </Tooltip>
                           </TooltipTrigger>
-                          <span className='text-sm rounded-full size-6 flex items-center justify-center px-1 text-[--hl] bg-[--hl-sm]'>{changes.unstaged.length}</span>
+                          <span className="flex size-6 items-center justify-center rounded-full bg-[--hl-sm] px-1 text-sm text-[--hl]">
+                            {changes.unstaged.length}
+                          </span>
                         </div>
                       </Heading>
-                      <div className='flex-1 flex overflow-y-auto w-full select-none'>
+                      <div className="flex w-full flex-1 select-none overflow-y-auto">
                         <GridList
                           className="w-full"
                           items={changes.unstaged.map(entry => ({
@@ -337,7 +363,7 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                             key: entry.path,
                             textValue: entry.path,
                           }))}
-                          aria-label='Unstaged changes'
+                          aria-label="Unstaged changes"
                           onAction={key => {
                             diffChanges({
                               path: key.toString(),
@@ -347,12 +373,12 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                         >
                           {item => {
                             return (
-                              <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                                <span className='truncate'>{item.entry.name}</span>
-                                <div className='flex items-center gap-1'>
+                              <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                                <span className="truncate">{item.entry.name}</span>
+                                <div className="flex items-center gap-1">
                                   <TooltipTrigger>
                                     <Button
-                                      className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                      className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                       slot={null}
                                       name="Discard change"
                                       onPress={() => {
@@ -370,14 +396,14 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
                                       Discard change
                                     </Tooltip>
                                   </TooltipTrigger>
                                   <TooltipTrigger>
                                     <Button
-                                      className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                      className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                       slot={null}
                                       name="Stage change"
                                       onPress={() => {
@@ -388,7 +414,7 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
                                       Stage change
                                     </Tooltip>
@@ -413,27 +439,27 @@ export const GitStagingModal: FC<{ onClose: () => void }> = ({
                     </div>
                   </div>
                 </div>
-                {previewDiffItem?.diff ? <div className='p-2 pb-0 flex flex-col gap-2 h-full overflow-y-auto'>
-                  <Heading className='font-bold flex items-center gap-2'>
-                    <Icon icon="code-compare" />
-                    {previewDiffItem.name}
-                  </Heading>
-                  {previewDiffItem && (
-                    <div
-                      className='bg-[--hl-xs] rounded-sm p-2 flex-1 overflow-y-auto text-[--color-font]'
-                    >
-                      <DiffEditor original={previewDiffItem.diff.before} modified={previewDiffItem.diff.after} />
-                    </div>
-                  )}
-                </div> : <div className='p-2 h-full flex flex-col gap-4 items-center justify-center'>
-                  <Heading className='font-semibold flex justify-center items-center gap-2 text-4xl text-[--hl-md]'>
-                    <Icon icon="code-compare" />
-                    Diff view
-                  </Heading>
-                  <p className='text-[--hl]'>
-                    Select an item to compare
-                  </p>
-                </div>}
+                {previewDiffItem?.diff ? (
+                  <div className="flex h-full flex-col gap-2 overflow-y-auto p-2 pb-0">
+                    <Heading className="flex items-center gap-2 font-bold">
+                      <Icon icon="code-compare" />
+                      {previewDiffItem.name}
+                    </Heading>
+                    {previewDiffItem && (
+                      <div className="flex-1 overflow-y-auto rounded-sm bg-[--hl-xs] p-2 text-[--color-font]">
+                        <DiffEditor original={previewDiffItem.diff.before} modified={previewDiffItem.diff.after} />
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="flex h-full flex-col items-center justify-center gap-4 p-2">
+                    <Heading className="flex items-center justify-center gap-2 text-4xl font-semibold text-[--hl-md]">
+                      <Icon icon="code-compare" />
+                      Diff view
+                    </Heading>
+                    <p className="text-[--hl]">Select an item to compare</p>
+                  </div>
+                )}
               </div>
             </div>
           )}
diff --git a/packages/insomnia/src/ui/components/modals/import-modal.tsx b/packages/insomnia/src/ui/components/modals/import-modal.tsx
index fa2d688de1..fe1e55839f 100644
--- a/packages/insomnia/src/ui/components/modals/import-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/import-modal.tsx
@@ -25,9 +25,7 @@ import { Icon } from '../icon';
 import { Button } from '../themed-button';
 
 const Pill: FC<PropsWithChildren> = ({ children }) => (
-  <div
-    className="flex items-center gap-[var(--padding-xs)] p-[var(--padding-sm)] rounded-[var(--radius-md)] text-[length:var(--font-size-xs)]"
-  >
+  <div className="flex items-center gap-[var(--padding-xs)] rounded-[var(--radius-md)] p-[var(--padding-sm)] text-[length:var(--font-size-xs)]">
     {children}
   </div>
 );
@@ -54,13 +52,15 @@ const Radio: FC<{
         style={{
           clip: 'rect(0,0,0,0)',
         }}
-        className="absolute w-px h-px overflow-hidden whitespace-nowrap -m-px p-0 border-0"
+        className="absolute -m-px h-px w-px overflow-hidden whitespace-nowrap border-0 p-0"
       />
       <label
-        className="p-[var(--padding-sm)] rounded-[var(--radius-md)] flex items-center gap-[var(--padding-sm)]"
+        className="flex items-center gap-[var(--padding-sm)] rounded-[var(--radius-md)] p-[var(--padding-sm)]"
         data-test-id={`import-from-${value}`}
         htmlFor={id}
-      >{children}</label>
+      >
+        {children}
+      </label>
     </div>
   );
 };
@@ -76,7 +76,10 @@ interface Entry {
 }
 
 // get all files' paths from drop items
-async function recurse(list: (FileDropItem | DirectoryDropItem)[] | AsyncIterable<FileDropItem | DirectoryDropItem>, filePathList: string[]) {
+async function recurse(
+  list: (FileDropItem | DirectoryDropItem)[] | AsyncIterable<FileDropItem | DirectoryDropItem>,
+  filePathList: string[],
+) {
   for await (const item of list) {
     if (item.kind === 'file') {
       const file = await item.getFile();
@@ -102,7 +105,9 @@ const FileField: FC = () => {
     ref: dropRef,
     onDrop: async event => {
       const list = event.items.filter(item => item.kind === 'file' || item.kind === 'directory');
-      setEntryList(list.map(item => ({ type: item.kind === 'file' ? ENTRY_TYPE.FILE : ENTRY_TYPE.DIR, name: item.name })));
+      setEntryList(
+        list.map(item => ({ type: item.kind === 'file' ? ENTRY_TYPE.FILE : ENTRY_TYPE.DIR, name: item.name })),
+      );
       const filePathList: string[] = [];
       await recurse(list, filePathList);
       setFilePathList(filePathList);
@@ -135,44 +140,31 @@ const FileField: FC = () => {
       <label
         {...dropProps}
         className={classNames(
-          'p-[var(--padding-sm)] rounded-[var(--radius-md)] flex items-center gap-[var(--padding-sm)] bg-[color:var(--hl-xs)] flex-wrap border border-solid max-h-[50vh] overflow-auto',
+          'flex max-h-[50vh] flex-wrap items-center gap-[var(--padding-sm)] overflow-auto rounded-[var(--radius-md)] border border-solid bg-[color:var(--hl-xs)] p-[var(--padding-sm)]',
           {
             'border-[color:var(--color-surprise)]': isDropTarget,
             'border-[color:var(--hl-md)]': !isDropTarget,
-          }
+          },
         )}
         htmlFor={id}
       >
         <input type="hidden" name="filePaths" value={filePaths} />
-        {filePathList.length ? (<div
-          className="bg-[color:var(--color-bg)] rounded-[var(--radius-md)] text-ellipsis whitespace-nowrap flex flex-col items-center justify-start p-[var(--padding-md)] gap-[var(--padding-sm)] w-full"
-        >
-          {entryList.map(({ name, type }) => (
-            <div
-              key={name}
-            >
-              <Icon
-                icon={type === ENTRY_TYPE.DIR ? 'folder' : 'file'}
-                className="mr-1"
-              />
-              {name}
-            </div>
-          ))}
-        </div>) : (
-          <div
-            className="flex flex-col items-center justify-center p-[var(--padding-md)] gap-[var(--padding-sm)] w-full"
-          >
+        {filePathList.length ? (
+          <div className="flex w-full flex-col items-center justify-start gap-[var(--padding-sm)] text-ellipsis whitespace-nowrap rounded-[var(--radius-md)] bg-[color:var(--color-bg)] p-[var(--padding-md)]">
+            {entryList.map(({ name, type }) => (
+              <div key={name}>
+                <Icon icon={type === ENTRY_TYPE.DIR ? 'folder' : 'file'} className="mr-1" />
+                {name}
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="flex w-full flex-col items-center justify-center gap-[var(--padding-sm)] p-[var(--padding-md)]">
             <div>
               <i className="fa fa-upload fa-xl" />
             </div>
             <div>
-              Drag and Drop or{' '}
-              <span
-                className="text-[color:var(--color-surprise)]"
-              >
-                Choose Files
-              </span>{' '}
-              to import
+              Drag and Drop or <span className="text-[color:var(--color-surprise)]">Choose Files</span> to import
             </div>
           </div>
         )}
@@ -183,14 +175,7 @@ const FileField: FC = () => {
 
 const InsomniaIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={18}
-      height={18}
-      viewBox="0 0 32 32"
-      fill="none"
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 32 32" fill="none" {...props}>
       <path
         d="M16 31.186c8.387 0 15.186-6.799 15.186-15.186S24.387.814 16 .814.814 7.613.814 16 7.613 31.186 16 31.186z"
         fill="var(--color-bg)"
@@ -224,13 +209,7 @@ const InsomniaIcon = (props: React.SVGProps<SVGSVGElement>) => {
 
 const SwaggerIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="18px"
-      height="18px"
-      viewBox="0 0 256 256"
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 256 256" {...props}>
       <path
         fill="var(--color-font)"
         d="M127.999 249.895c-67.215 0-121.9-54.68-121.9-121.896C6.1 60.782 60.785 6.102 128 6.102c67.214 0 121.899 54.685 121.899 121.9 0 67.214-54.685 121.893-121.9 121.893z"
@@ -249,13 +228,7 @@ const SwaggerIcon = (props: React.SVGProps<SVGSVGElement>) => {
 
 const OpenAPIIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={17}
-      height={17}
-      viewBox="0 0 512 512"
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width={17} height={17} viewBox="0 0 512 512" {...props}>
       <path
         fill="currentColor"
         d="M.204 294.376l135.073-.002a91.735 91.735 0 008.452 30.17L27.94 394.298C12.75 368.103 3.166 334.783.204 294.376zm131.802 196.803l51.407-124.841a91.475 91.475 0 01-14.938-9.955l-95.47 95.472c19.49 17.557 39.562 30.71 59.001 39.324zm-65.604-45.647l95.284-95.286c-4.933-4.963-9.482-10.85-13.667-17.616L32.512 402.213c10.491 17.069 22.148 31.847 33.89 43.319zm313.997 6.327l-95.53-95.525a91.813 91.813 0 01-3.184 2.466l69.71 115.72c9.73-6.055 19.39-13.823 29.004-22.66zm-36.74 27.532l-69.565-115.479c-25.964 14.5-53.318 17.553-82.406 6.337l-51.301 124.583c70.2 28.467 142.961 20.313 203.272-15.441zM171.713 211.67L102.005 95.95c-10.164 6.523-19.819 14.106-29.006 22.66l95.527 95.527a135.39 135.39 0 013.187-2.467zM0 285.236l134.762-.002c.291-23.838 8.71-45.682 26.928-65.006l-95.287-95.287C22.416 171.553.512 225.056 0 285.236zm226.694-91.938L226.7 58.54c-44.728.274-84.005 12.326-116.96 32.539l69.563 115.48c13.077-7.677 28.664-12.98 47.39-13.26zm186.404-37.118l-99.449 99.452a93.73 93.73 0 014.453 20.46h135.09c-.883-40.98-14.404-80.939-40.094-119.912zm40.28 129.052H318.631c-.468 25.24-9.9 48.244-26.924 65.014l95.29 95.286c43.82-43.123 65.122-96.948 66.381-160.3zM235.84 58.74l-.006 135.087c7.082.802 13.883 2.342 20.466 4.455l99.415-99.415c-35.132-24.575-76.54-38.362-119.875-40.127zM430.95 2.597c-39.165 11.457-55.533 55.183-38.782 88.672L254.808 228.63c-32.407-16.157-74.902-1.57-87.795 36.034-15.716 45.84 24.243 91.802 71.754 82.533 42.01-8.196 62.31-54.188 44.466-90.01L420.722 119.7c34.66 17.226 79.533-1.065 89.396-41.654 11.43-47.037-32.658-89.054-79.168-75.449z"
@@ -266,13 +239,7 @@ const OpenAPIIcon = (props: React.SVGProps<SVGSVGElement>) => {
 
 const CurlIcon = (props: React.SVGProps<SVGSVGElement>) => {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={18}
-      height={18}
-      viewBox="0 0 123.184 102.926"
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" width={18} height={18} viewBox="0 0 123.184 102.926" {...props}>
       <defs>
         <symbol overflow="visible">
           <path
@@ -333,31 +300,19 @@ interface ImportModalProps extends ModalProps {
   // undefined when in workspace selection page
   defaultWorkspaceId?: string;
   from:
-  | {
-    type: 'file';
-  }
-  | {
-    type: 'uri';
-    defaultValue?: string;
-  }
-  | {
-    type: 'clipboard';
-  };
+    | {
+        type: 'file';
+      }
+    | {
+        type: 'uri';
+        defaultValue?: string;
+      }
+    | {
+        type: 'clipboard';
+      };
 }
 
-const validImportExtensions = [
-  'sh',
-  'txt',
-  'json',
-  'har',
-  'curl',
-  'bash',
-  'shell',
-  'yaml',
-  'yml',
-  'wsdl',
-  'zip',
-];
+const validImportExtensions = ['sh', 'txt', 'json', 'har', 'curl', 'bash', 'shell', 'yaml', 'yml', 'wsdl', 'zip'];
 
 export const ImportModal: FC<ImportModalProps> = ({
   projectName,
@@ -383,20 +338,31 @@ export const ImportModal: FC<ImportModalProps> = ({
   }, [importFetcher.data]);
   // allow workspace import if there is only one workspace
   const totalWorkspacesCount = useMemo(() => {
-    return scanResourcesFetcherData?.reduce((accumulator, scanResult) => accumulator + (scanResult.workspaces?.length || 0), 0) || 0;
+    return (
+      scanResourcesFetcherData?.reduce(
+        (accumulator, scanResult) => accumulator + (scanResult.workspaces?.length || 0),
+        0,
+      ) || 0
+    );
   }, [scanResourcesFetcherData]);
   const shouldImportToWorkspace = !!defaultWorkspaceId && totalWorkspacesCount <= 1;
   // TODO: need to add a more strong way to inform users that resources will be imported into project rather than current workspace
-  const header = shouldImportToWorkspace ? `Import to "${workspaceName}" Workspace` : `Import to "${projectName}" Project`;
-  const isScratchPad = defaultProjectId && isScratchpadProject({
-    _id: defaultProjectId,
-  });
+  const header = shouldImportToWorkspace
+    ? `Import to "${workspaceName}" Workspace`
+    : `Import to "${projectName}" Project`;
+  const isScratchPad =
+    defaultProjectId &&
+    isScratchpadProject({
+      _id: defaultProjectId,
+    });
 
   const cannotImportToWorkspace = totalWorkspacesCount > 1 && isScratchPad;
 
   const importErrors = [
     ...(importFetcher.data?.errors || []),
-    ...cannotImportToWorkspace ? ['Cannot import multiple files to ScratchPad. Please try to import your files one by one.'] : [],
+    ...(cannotImportToWorkspace
+      ? ['Cannot import multiple files to ScratchPad. Please try to import your files one by one.']
+      : []),
   ];
 
   const hasAnyDataToImport = useMemo(() => {
@@ -424,13 +390,15 @@ export const ImportModal: FC<ImportModalProps> = ({
                 method: 'post',
                 action: '/import/resources',
               });
-              scanResourcesFetcherData.filter(({ errors }) => errors.length === 0).forEach(scanResult => {
-                const type = scanResult.type?.id ?? 'unknown';
-                window.main.trackSegmentEvent({
-                  event: SegmentEvent.dataImport,
-                  properties: { 'data-import-type': type },
+              scanResourcesFetcherData
+                .filter(({ errors }) => errors.length === 0)
+                .forEach(scanResult => {
+                  const type = scanResult.type?.id ?? 'unknown';
+                  window.main.trackSegmentEvent({
+                    event: SegmentEvent.dataImport,
+                    properties: { 'data-import-type': type },
+                  });
                 });
-              });
             }}
           />
         ) : (
@@ -469,22 +437,16 @@ const ScanResourcesForm = ({
 
   return (
     <Fragment>
-      <div
-        className='flex flex-col'
-      >
+      <div className="flex flex-col">
         <form
           aria-label="Import from"
           id={id}
           onSubmit={onSubmit}
           method="post"
-          className='flex flex-col gap-[var(--padding-sm)]'
+          className="flex flex-col gap-[var(--padding-sm)]"
         >
-          <fieldset
-            className='flex flex-col gap-[var(--padding-md)]'
-          >
-            <div
-              className='flex p-[var(--padding-xs)] border border-[color:var(--hl-md)] rounded-[var(--radius-md)] bg-[color:var(--hl-xs)] border-solid'
-            >
+          <fieldset className="flex flex-col gap-[var(--padding-md)]">
+            <div className="flex rounded-[var(--radius-md)] border border-solid border-[color:var(--hl-md)] bg-[color:var(--hl-xs)] p-[var(--padding-xs)]">
               <Radio
                 onChange={() => setImportFrom('file')}
                 name="importFrom"
@@ -494,12 +456,7 @@ const ScanResourcesForm = ({
                 <i className="fa fa-plus" />
                 File
               </Radio>
-              <Radio
-                onChange={() => setImportFrom('uri')}
-                name="importFrom"
-                value="uri"
-                checked={importFrom === 'uri'}
-              >
+              <Radio onChange={() => setImportFrom('uri')} name="importFrom" value="uri" checked={importFrom === 'uri'}>
                 <i className="fa fa-link" />
                 Url
               </Radio>
@@ -530,23 +487,15 @@ const ScanResourcesForm = ({
           )}
         </form>
         {scanResults && (
-          <div className='margin-top-sm overflow-y-auto max-h-[20vh]'>
+          <div className="margin-top-sm max-h-[20vh] overflow-y-auto">
             <ScanResultsTable scanResults={scanResults} />
           </div>
         )}
       </div>
-      <div
-        className='flex gap-[var(--padding-sm)] justify-between items-end'
-      >
+      <div className="flex items-end justify-between gap-[var(--padding-sm)]">
         <div>
-          <div
-            className='pb-[var(--padding-sm)]'
-          >
-            Supported Formats
-          </div>
-          <div
-            className='flex flex-wrap gap-[var(--padding-sm)]'
-          >
+          <div className="pb-[var(--padding-sm)]">Supported Formats</div>
+          <div className="flex flex-wrap gap-[var(--padding-sm)]">
             <Pill>
               <InsomniaIcon />
               Insomnia
@@ -577,15 +526,9 @@ const ScanResourcesForm = ({
             </Pill>
           </div>
         </div>
-        <Button
-          variant="contained"
-          bg="surprise"
-          type="submit"
-          form={id}
-          className="btn h-10 gap-[var(--padding-sm)]"
-        >
+        <Button variant="contained" bg="surprise" type="submit" form={id} className="btn h-10 gap-[var(--padding-sm)]">
           <i className="fa fa-file-import" /> Scan
-          {loading && (<Icon icon="spinner" className="animate-spin ml-[4px]" />)}
+          {loading && <Icon icon="spinner" className="ml-[4px] animate-spin" />}
         </Button>
       </div>
     </Fragment>
@@ -610,47 +553,32 @@ const ImportResourcesForm = ({
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
   disabled: boolean;
   loading: boolean;
-}
-) => {
+}) => {
   const id = useId();
   return (
     <Fragment>
-      <div
-        className='flex flex-col gap-[var(--padding-md)] overflow-auto max-h-[50vh]'
-      >
-        <form
-          onSubmit={onSubmit}
-          method="post"
-          action="/import/resources"
-          id={id}
-          className='hidden'
-        >
+      <div className="flex max-h-[50vh] flex-col gap-[var(--padding-md)] overflow-auto">
+        <form onSubmit={onSubmit} method="post" action="/import/resources" id={id} className="hidden">
           <input hidden name="organizationId" readOnly value={organizationId} />
           <input hidden name="projectId" readOnly value={defaultProjectId} />
           <input hidden name="workspaceId" readOnly value={defaultWorkspaceId} />
         </form>
-        <div
-          className='overflow-y-auto'
-        >
+        <div className="overflow-y-auto">
           <ScanResultsTable scanResults={scanResults} />
         </div>
         <div>
           {errors && errors.length > 0 && (
             <div className="notice error margin-top-sm">
-              <Heading className='font-bold'>Error while importing to Insomnia:</Heading>
+              <Heading className="font-bold">Error while importing to Insomnia:</Heading>
               <p>{errors[0]}</p>
             </div>
           )}
         </div>
       </div>
 
-      <div
-        className='flex gap-[var(--padding-sm)] w-full justify-between items-end'
-      >
+      <div className="flex w-full items-end justify-between gap-[var(--padding-sm)]">
         <div>
-          <div
-            className='pb-[var(--padding-sm)]'
-          >
+          <div className="pb-[var(--padding-sm)]">
             Insomnia provides features that may automatically execute code. Only import files from trusted sources.
           </div>
         </div>
@@ -691,9 +619,12 @@ const ScanResultsTable = ({ scanResults }: { scanResults: ScanResult[] }) => {
               <tr className="table--no-outline-row">
                 <td className="bg-[color:var(--hl-xxs)]">
                   <div
-                    className={classNames({
-                      'text-danger': hasErrors,
-                    }, 'flex items-center gap-[var(--padding-sm)]')}
+                    className={classNames(
+                      {
+                        'text-danger': hasErrors,
+                      },
+                      'flex items-center gap-[var(--padding-sm)]',
+                    )}
                   >
                     {hasErrors ? (
                       <Fragment>
@@ -702,7 +633,7 @@ const ScanResultsTable = ({ scanResults }: { scanResults: ScanResult[] }) => {
                       </Fragment>
                     ) : (
                       <Fragment>
-                        {getImporterSign(scanResult)}{' '}resources to be imported from {scanResult.oriFileName}:
+                        {getImporterSign(scanResult)} resources to be imported from {scanResult.oriFileName}:
                       </Fragment>
                     )}
                   </div>
@@ -718,9 +649,7 @@ const ScanResultsTable = ({ scanResults }: { scanResults: ScanResult[] }) => {
                     >
                       {scanResult.errors.map((error, idx) => {
                         const key = `${uniqueKey}${scanResult.oriFileName}${idx}`;
-                        return (
-                          <li key={key}>{error}</li>
-                        );
+                        return <li key={key}>{error}</li>;
                       })}
                     </ul>
                   </td>
@@ -728,32 +657,21 @@ const ScanResultsTable = ({ scanResults }: { scanResults: ScanResult[] }) => {
               ) : (
                 <Fragment>
                   {scanResult.workspaces && scanResult.workspaces?.length > 0 && (
-                    <tr
-                      key={scanResult.workspaces[0]._id}
-                      className="table--no-outline-row"
-                    >
+                    <tr key={scanResult.workspaces[0]._id} className="table--no-outline-row">
                       <td>
-                        {scanResult.workspaces.length}{' '}
-                        {scanResult.workspaces.length === 1 ? 'Workspace' : 'Workspaces'}
+                        {scanResult.workspaces.length} {scanResult.workspaces.length === 1 ? 'Workspace' : 'Workspaces'}
                       </td>
                     </tr>
                   )}
                   {scanResult.requests && scanResult.requests?.length > 0 && (
-                    <tr
-                      key={scanResult.requests[0]._id}
-                      className="table--no-outline-row"
-                    >
+                    <tr key={scanResult.requests[0]._id} className="table--no-outline-row">
                       <td>
-                        {scanResult.requests.length}{' '}
-                        {scanResult.requests.length === 1 ? 'Request' : 'Requests'}
+                        {scanResult.requests.length} {scanResult.requests.length === 1 ? 'Request' : 'Requests'}
                       </td>
                     </tr>
                   )}
                   {scanResult.apiSpecs && scanResult.apiSpecs?.length > 0 && (
-                    <tr
-                      key={scanResult.apiSpecs[0]._id}
-                      className="table--no-outline-row"
-                    >
+                    <tr key={scanResult.apiSpecs[0]._id} className="table--no-outline-row">
                       <td>
                         <div className="flex items-center gap-[var(--padding-md)]">
                           {scanResult.apiSpecs.length}{' '}
@@ -762,45 +680,36 @@ const ScanResultsTable = ({ scanResults }: { scanResults: ScanResult[] }) => {
                       </td>
                     </tr>
                   )}
-                  {scanResult.environments &&
-                    scanResult.environments.length > 0 && (
-                      <tr className="table--no-outline-row">
-                        <td>
-                          {scanResult.environments.length}{' '}
-                          {scanResult.environments.length === 1
-                            ? 'Environment'
-                            : 'Environments'}
-                          {' with '}
-                          {scanResult.cookieJars?.length}{' '}
-                          {scanResult.cookieJars?.length === 1 ? 'Cookie Jar' : 'Cookie Jars'}
-                        </td>
-                      </tr>
-                    )}
-                  {scanResult.unitTestSuites &&
-                    scanResult.unitTestSuites?.length > 0 && (
-                      <tr className="table--no-outline-row">
-                        <td>
-                          {scanResult.unitTestSuites.length}{' '}
-                          {scanResult.unitTestSuites.length === 1
-                            ? 'Test Suite'
-                            : 'Test Suites'}
-                          {' with '}
-                          {scanResult.unitTests?.length}
-                          {scanResult.unitTests?.length === 1 ? ' Test' : ' Tests'}
-                        </td>
-                      </tr>
-                    )}
-                  {scanResult.mockRoutes &&
-                    scanResult.mockRoutes?.length > 0 && (
-                      <tr className="table--no-outline-row">
-                        <td>
-                          {scanResult.mockRoutes?.length}{' '}
-                          {scanResult.mockRoutes?.length === 1
-                            ? 'Mock Route'
-                            : 'Mock Routes'}
-                        </td>
-                      </tr>
-                    )}
+                  {scanResult.environments && scanResult.environments.length > 0 && (
+                    <tr className="table--no-outline-row">
+                      <td>
+                        {scanResult.environments.length}{' '}
+                        {scanResult.environments.length === 1 ? 'Environment' : 'Environments'}
+                        {' with '}
+                        {scanResult.cookieJars?.length}{' '}
+                        {scanResult.cookieJars?.length === 1 ? 'Cookie Jar' : 'Cookie Jars'}
+                      </td>
+                    </tr>
+                  )}
+                  {scanResult.unitTestSuites && scanResult.unitTestSuites?.length > 0 && (
+                    <tr className="table--no-outline-row">
+                      <td>
+                        {scanResult.unitTestSuites.length}{' '}
+                        {scanResult.unitTestSuites.length === 1 ? 'Test Suite' : 'Test Suites'}
+                        {' with '}
+                        {scanResult.unitTests?.length}
+                        {scanResult.unitTests?.length === 1 ? ' Test' : ' Tests'}
+                      </td>
+                    </tr>
+                  )}
+                  {scanResult.mockRoutes && scanResult.mockRoutes?.length > 0 && (
+                    <tr className="table--no-outline-row">
+                      <td>
+                        {scanResult.mockRoutes?.length}{' '}
+                        {scanResult.mockRoutes?.length === 1 ? 'Mock Route' : 'Mock Routes'}
+                      </td>
+                    </tr>
+                  )}
                 </Fragment>
               )}
             </React.Fragment>
@@ -817,27 +726,32 @@ function getImporterSign(scanResult: ScanResult) {
   if (scanResult.type?.id) {
     const id = scanResult.type.id;
     if (id.includes('insomnia')) {
-      icon = (<InsomniaIcon width={24} height={24} />);
+      icon = <InsomniaIcon width={24} height={24} />;
       name = 'Insomnia';
     } else if (id.includes('postman')) {
-      icon = (<i className="fa-regular fa-file fa-lg" />);
+      icon = <i className="fa-regular fa-file fa-lg" />;
       name = 'Postman';
     } else if (id.includes('swagger')) {
-      icon = (<SwaggerIcon width={24} height={24} />);
+      icon = <SwaggerIcon width={24} height={24} />;
       name = 'Swagger';
     } else if (id.includes('openapi')) {
-      icon = (<OpenAPIIcon width={24} height={24} />);
+      icon = <OpenAPIIcon width={24} height={24} />;
       name = 'OpenAPI';
     } else if (id.includes('wsdl')) {
-      icon = (<i className="fa-regular fa-file fa-lg" />);
+      icon = <i className="fa-regular fa-file fa-lg" />;
       name = 'WSDL';
     } else if (id.includes('har')) {
-      icon = (<i className="fa-regular fa-file fa-lg" />);
+      icon = <i className="fa-regular fa-file fa-lg" />;
       name = 'HAR';
     } else if (id.includes('curl')) {
-      icon = (<CurlIcon width={24} height={24} />);
+      icon = <CurlIcon width={24} height={24} />;
       name = 'cURL';
     }
   }
-  return (<Fragment>{icon}{name}</Fragment>);
+  return (
+    <Fragment>
+      {icon}
+      {name}
+    </Fragment>
+  );
 }
diff --git a/packages/insomnia/src/ui/components/modals/index.ts b/packages/insomnia/src/ui/components/modals/index.ts
index 5f1a87d746..ed0a7e801b 100644
--- a/packages/insomnia/src/ui/components/modals/index.ts
+++ b/packages/insomnia/src/ui/components/modals/index.ts
@@ -5,8 +5,8 @@ import { ErrorModal, type ErrorModalOptions } from './error-modal';
 import { PromptModal, type PromptModalOptions } from './prompt-modal';
 
 interface ModalHandle {
-  show:(options: any) => void;
-  hide:() => void;
+  show: (options: any) => void;
+  hide: () => void;
 }
 
 const modals: Record<string, ModalHandle> = {};
@@ -22,17 +22,22 @@ export function registerModal(instance: any, modalName?: string) {
 
 type GetRefHandleFromProps<Props> = Props extends React.RefAttributes<infer TModalHandle> ? TModalHandle : never;
 
-type ModalComponent<TModalProps> = React.ForwardRefExoticComponent<TModalProps & React.RefAttributes<GetRefHandleFromProps<TModalProps>>>;
+type ModalComponent<TModalProps> = React.ForwardRefExoticComponent<
+  TModalProps & React.RefAttributes<GetRefHandleFromProps<TModalProps>>
+>;
 
 type ModalHandleShowOptions<TModalHandle> = TModalHandle extends {
   show: (options: infer TOptions) => void;
-} ? TOptions : any;
+}
+  ? TOptions
+  : any;
 
-export function showModal<TModalProps extends ModalProps & React.RefAttributes<{
-  show:(options: any) => void;
-}>>(
-  modalComponent: ModalComponent<TModalProps>, config?: ModalHandleShowOptions<GetRefHandleFromProps<TModalProps>>,
-) {
+export function showModal<
+  TModalProps extends ModalProps &
+    React.RefAttributes<{
+      show: (options: any) => void;
+    }>,
+>(modalComponent: ModalComponent<TModalProps>, config?: ModalHandleShowOptions<GetRefHandleFromProps<TModalProps>>) {
   const name = modalComponent.name || modalComponent.displayName;
   invariant(name, 'Modal must have a name or displayName');
   window.main.trackPageView({ name });
diff --git a/packages/insomnia/src/ui/components/modals/input-vault-key-modal.tsx b/packages/insomnia/src/ui/components/modals/input-vault-key-modal.tsx
index 32733ef4d6..94e0c229f2 100644
--- a/packages/insomnia/src/ui/components/modals/input-vault-key-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/input-vault-key-modal.tsx
@@ -44,7 +44,11 @@ export const InputVaultKeyModal = (props: InputVaultKeyModalProps) => {
   useEffect(() => {
     (async () => {
       // close modal and return user input vault key if srp validation success
-      if (validateVaultKeyFetcher.data && !validateVaultKeyFetcher.data.error && validateVaultKeyFetcher.state === 'idle') {
+      if (
+        validateVaultKeyFetcher.data &&
+        !validateVaultKeyFetcher.data.error &&
+        validateVaultKeyFetcher.state === 'idle'
+      ) {
         onClose(validateVaultKeyFetcher.data.vaultKey);
       }
     })();
@@ -60,19 +64,22 @@ export const InputVaultKeyModal = (props: InputVaultKeyModalProps) => {
     setError('');
     validateVaultKeyFetcher.submit(
       {
-        vaultKey, saveVaultKey: true,
+        vaultKey,
+        saveVaultKey: true,
       },
       {
         action: '/auth/validateVaultKey',
         method: 'POST',
         encType: 'application/json',
-      });
+      },
+    );
   };
 
   const resetVaultKey = () => {
     showModal(AskModal, {
       title: 'Reset Vault Key',
-      message: 'Are you sure you sure to reset vault key? This will clear all secrets in private environment among all devices.',
+      message:
+        'Are you sure you sure to reset vault key? This will clear all secrets in private environment among all devices.',
       yesText: 'Yes',
       noText: 'No',
       onDone: async (yes: boolean) => {
@@ -94,89 +101,80 @@ export const InputVaultKeyModal = (props: InputVaultKeyModalProps) => {
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-start justify-center bg-black/30"
     >
       <Modal
-        className="max-h-[75%] overflow-auto flex flex-col w-full max-w-3xl rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font] m-24"
+        className="m-24 flex max-h-[75%] w-full max-w-3xl flex-col overflow-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
         data-testid="input-vault-key-modal"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div
-              className='flex-1 flex flex-col gap-4 overflow-hidden'
-            >
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
                   {resetDone ? 'Reset Vault Key' : 'Enter Vault Key'}
                 </Heading>
-                {allowClose &&
+                {allowClose && (
                   <Button
-                    className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                     onPress={close}
                   >
                     <Icon icon="x" />
                   </Button>
-                }
+                )}
               </div>
-              {!resetDone ?
-                (
-                  <>
-                    <div className='rounded grow shrink-0 w-full basis-12 flex flex-col gap-3 select-none'>
-                      <label>
-                        Unlock all secrets by entering the vault key
-                      </label>
-                      <Input
-                        className='py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font]'
-                        placeholder='Enter Vault Key'
-                        value={vaultKey}
-                        onChange={e => setVaultKey(e.target.value)}
-                        aria-label='Vault Key Input'
-                      />
-                    </div>
-                    {error &&
-                      <p className="notice error margin-top-sm no-margin-bottom">{error}</p>
-                    }
-                    <div className="flex justify-between mt-2 items-center">
-                      <div>
-                        <span className='faint text-sm'>Forget Vault Key?</span>
-                        <Button
-                          className="px-4 py-1 h-full underline text-[--color-info] text-sm transition-all "
-                          onPress={resetVaultKey}
-                        >
-                          Reset Vault Key
-                        </Button>
-                      </div>
+              {!resetDone ? (
+                <>
+                  <div className="flex w-full shrink-0 grow basis-12 select-none flex-col gap-3 rounded">
+                    <label>Unlock all secrets by entering the vault key</label>
+                    <Input
+                      className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font]"
+                      placeholder="Enter Vault Key"
+                      value={vaultKey}
+                      onChange={e => setVaultKey(e.target.value)}
+                      aria-label="Vault Key Input"
+                    />
+                  </div>
+                  {error && <p className="notice error margin-top-sm no-margin-bottom">{error}</p>}
+                  <div className="mt-2 flex items-center justify-between">
+                    <div>
+                      <span className="faint text-sm">Forget Vault Key?</span>
                       <Button
-                        className="hover:no-underline ml-4 flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
-                        onPress={handleValidateVaultKey}
-                        isDisabled={isLoading || !vaultKey}
+                        className="h-full px-4 py-1 text-sm text-[--color-info] underline transition-all"
+                        onPress={resetVaultKey}
                       >
-                        {isLoading && <Icon icon="spinner" className="text-[--color-font] animate-spin m-auto inline-block mr-2" />}
-                        Unlock
+                        Reset Vault Key
                       </Button>
                     </div>
-                  </>
-                ) :
-                (
-                  <>
-                    <div>Please save or download the vault key which will be needed when you login again.</div>
-                    <VaultKeyDisplayInput vaultKey={vaultKey} />
-                    <div className="flex justify-end mt-2 items-center">
-                      <Button
-                        className="hover:no-underline ml-4 flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
-                        onPress={() => onClose(vaultKey)}
-                      >
-                        OK
-                      </Button>
-                    </div>
-                  </>
-                )
-              }
+                    <Button
+                      className="ml-4 flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
+                      onPress={handleValidateVaultKey}
+                      isDisabled={isLoading || !vaultKey}
+                    >
+                      {isLoading && (
+                        <Icon icon="spinner" className="m-auto mr-2 inline-block animate-spin text-[--color-font]" />
+                      )}
+                      Unlock
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <>
+                  <div>Please save or download the vault key which will be needed when you login again.</div>
+                  <VaultKeyDisplayInput vaultKey={vaultKey} />
+                  <div className="mt-2 flex items-center justify-end">
+                    <Button
+                      className="ml-4 flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
+                      onPress={() => onClose(vaultKey)}
+                    >
+                      OK
+                    </Button>
+                  </div>
+                </>
+              )}
             </div>
           )}
         </Dialog>
diff --git a/packages/insomnia/src/ui/components/modals/invite-modal/invite-form.tsx b/packages/insomnia/src/ui/components/modals/invite-modal/invite-form.tsx
index bec0e93a96..45daffc426 100644
--- a/packages/insomnia/src/ui/components/modals/invite-modal/invite-form.tsx
+++ b/packages/insomnia/src/ui/components/modals/invite-modal/invite-form.tsx
@@ -1,5 +1,14 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Button, type Key, ListBox, ListBoxItem, type ListBoxItemProps, Popover, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  type Key,
+  ListBox,
+  ListBoxItem,
+  type ListBoxItemProps,
+  Popover,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams, useSearchParams } from 'react-router-dom';
 
 import { getCurrentSessionId } from '../../../../account/session';
@@ -50,10 +59,7 @@ const isValidEmail = (email: string): boolean => {
 
 const defaultRoleName = 'member';
 
-export const InviteForm = ({
-  allRoles,
-  onInviteCompleted,
-}: EmailsInputProps) => {
+export const InviteForm = ({ allRoles, onInviteCompleted }: EmailsInputProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const organizationId = useParams().organizationId as string;
@@ -67,9 +73,7 @@ export const InviteForm = ({
   const popoverRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLDivElement>(null);
 
-  const selectedRoleRef = React.useRef<Role>(
-    allRoles.find(role => role.name === defaultRoleName) as Role,
-  );
+  const selectedRoleRef = React.useRef<Role>(allRoles.find(role => role.name === defaultRoleName) as Role);
 
   const collaboratorSearchLoader = useFetcher<CollaboratorSearchLoaderResult>();
 
@@ -83,7 +87,15 @@ export const InviteForm = ({
     }
   }, [searchResult]);
 
-  const addEmail = ({ email, teamId, picture = 'https://static.insomnia.rest/insomnia-gorilla.png' }: { email: string; teamId?: string; picture?: string }) => {
+  const addEmail = ({
+    email,
+    teamId,
+    picture = 'https://static.insomnia.rest/insomnia-gorilla.png',
+  }: {
+    email: string;
+    teamId?: string;
+    picture?: string;
+  }) => {
     const trimmedEmail = email.trim();
     if (!trimmedEmail) {
       return;
@@ -118,7 +130,9 @@ export const InviteForm = ({
 
   const handleSearch = debounce((query: string) => {
     if (query.trim() !== '') {
-      collaboratorSearchLoader.load(`/organization/${organizationId}/collaborators-search?query=${encodeURIComponent(query)}`);
+      collaboratorSearchLoader.load(
+        `/organization/${organizationId}/collaborators-search?query=${encodeURIComponent(query)}`,
+      );
       setSearchParams(getSearchParamsString(searchParams, { query }));
     }
   }, 500);
@@ -144,21 +158,24 @@ export const InviteForm = ({
   };
 
   return (
-    <div className="flex flex-col gap-1 w-full">
-      <div className="flex gap-4 items-center w-full">
-        <div className='flex flex-1 justify-between gap-3 bg-[--hl-xs] border border-[#4c4c4c] rounded-md p-2' ref={triggerRef}>
+    <div className="flex w-full flex-col gap-1">
+      <div className="flex w-full items-center gap-4">
+        <div
+          className="flex flex-1 justify-between gap-3 rounded-md border border-[#4c4c4c] bg-[--hl-xs] p-2"
+          ref={triggerRef}
+        >
           <div
-            className="flex flex-1 gap-3 overflow-y-auto flex-wrap items-center max-h-[200px]"
+            className="flex max-h-[200px] flex-1 flex-wrap items-center gap-3 overflow-y-auto"
             onClick={() => inputRef.current?.focus()}
           >
             {emails.map(({ picture, email, isValid }: EmailInput) => (
               <span
                 key={email}
-                className={`bg-[--hl-xs] text-[--color-font] rounded-full flex gap-2 items-center pl-1 pr-2 text-sm leading-6 h-7 ${isValid ? 'bg-[--hl-xs]' : 'bg-orange-400 bg-opacity-40 border border-orange-400 border-dashed'}`}
+                className={`flex h-7 items-center gap-2 rounded-full bg-[--hl-xs] pl-1 pr-2 text-sm leading-6 text-[--color-font] ${isValid ? 'bg-[--hl-xs]' : 'border border-dashed border-orange-400 bg-orange-400 bg-opacity-40'}`}
               >
                 <TooltipTrigger delay={0}>
                   <Button
-                    className='flex gap-1 items-center'
+                    className="flex items-center gap-1"
                     onPress={() => {
                       if (inputRef.current) {
                         inputRef.current.value = email;
@@ -168,32 +185,32 @@ export const InviteForm = ({
                       }
                     }}
                   >
-                    <img src={picture} alt="member image" className="w-5 h-5 rounded-full" />
-                    <span className="flex items-center h-full">{`${email} ${isValid ? '' : '(Invalid)'}`}</span>
+                    <img src={picture} alt="member image" className="h-5 w-5 rounded-full" />
+                    <span className="flex h-full items-center">{`${email} ${isValid ? '' : '(Invalid)'}`}</span>
                   </Button>
                   <Tooltip
                     offset={8}
-                    placement='top'
-                    className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                    placement="top"
+                    className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                   >
                     Click to edit
                   </Tooltip>
                 </TooltipTrigger>
                 <Button
-                  className="flex items-center justify-center h-full w-4"
+                  className="flex h-full w-4 items-center justify-center"
                   onPress={() => {
                     setError('');
                     removeEmail(email);
                   }}
                 >
-                  <Icon icon="xmark" className='text-[--color-font] h-4 w-4 cursor-default' />
+                  <Icon icon="xmark" className="h-4 w-4 cursor-default text-[--color-font]" />
                 </Button>
               </span>
             ))}
             <input
               ref={inputRef}
               type="text"
-              className="border-none leading-6 min-h-[24px] px-2 py-1 outline-none grow-[inherit]"
+              className="min-h-[24px] grow-[inherit] border-none px-2 py-1 leading-6 outline-none"
               placeholder={emails.length > 0 ? 'Enter more emails...' : 'Enter emails, separated by comma...'}
               onKeyDown={handleInputKeyPress}
               onBlur={handleInputBlur}
@@ -201,7 +218,7 @@ export const InviteForm = ({
               onChange={e => handleSearch(e.currentTarget.value)}
             />
           </div>
-          <div className="flex items-center w-[81px]">
+          <div className="flex w-[81px] items-center">
             <OrganizationMemberRolesSelector
               type={SELECTOR_TYPE.INVITE}
               availableRoles={allRoles}
@@ -214,7 +231,7 @@ export const InviteForm = ({
           </div>
         </div>
         <Button
-          className="h-[40px] w-[67px] text-center bg-[#4000bf] rounded disabled:opacity-70 shrink-0 self-end text-[--color-font-surprise]"
+          className="h-[40px] w-[67px] shrink-0 self-end rounded bg-[#4000bf] text-center text-[--color-font-surprise] disabled:opacity-70"
           isDisabled={loading}
           onPress={() => {
             if (emails.some(({ isValid }) => !isValid)) {
@@ -234,33 +251,35 @@ export const InviteForm = ({
               teamIds: groupsToInvite,
               organizationId,
               roleId: selectedRoleRef.current.id,
-            }).then(
-              () => {
-                window.main.trackSegmentEvent({
-                  event: SegmentEvent.inviteMember,
-                  properties: {
-                    numberOfInvites: emailsToInvite.length,
-                    numberOfTeams: groupsToInvite.length,
-                  },
-                });
+            })
+              .then(
+                () => {
+                  window.main.trackSegmentEvent({
+                    event: SegmentEvent.inviteMember,
+                    properties: {
+                      numberOfInvites: emailsToInvite.length,
+                      numberOfTeams: groupsToInvite.length,
+                    },
+                  });
 
-                setEmails([]);
-                onInviteCompleted?.();
-              },
-              (error: Error) => {
-                setError(error.message);
-              },
-            ).finally(() => {
-              setLoading(false);
-            });
+                  setEmails([]);
+                  onInviteCompleted?.();
+                },
+                (error: Error) => {
+                  setError(error.message);
+                },
+              )
+              .finally(() => {
+                setLoading(false);
+              });
           }}
         >
           Invite
-          {loading && (<Icon icon="spinner" className="animate-spin ml-[4px]" />)}
+          {loading && <Icon icon="spinner" className="ml-[4px] animate-spin" />}
         </Button>
         <Popover
           placement="bottom start"
-          className="w-[--trigger-width] min-w-[650px] rounded-md bg-[--color-bg] text-[--color-font] border border-solid border-[--hl-sm] shadow-md"
+          className="w-[--trigger-width] min-w-[650px] rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] shadow-md"
           ref={popoverRef}
           triggerRef={triggerRef}
           isOpen={showResults}
@@ -278,7 +297,11 @@ export const InviteForm = ({
               } else {
                 const selectedItem = searchResult.find(item => item.name === email);
 
-                addEmail({ email: email.toString(), teamId: selectedItem?.type === 'group' ? selectedItem?.id : undefined, picture: selectedItem?.picture });
+                addEmail({
+                  email: email.toString(),
+                  teamId: selectedItem?.type === 'group' ? selectedItem?.id : undefined,
+                  picture: selectedItem?.picture,
+                });
               }
 
               if (inputRef.current) {
@@ -294,15 +317,15 @@ export const InviteForm = ({
                 isSelected={emails.findIndex(({ email: e }) => e === item.name) !== -1}
               >
                 <img alt="" src={item.picture} className="h-6 w-6 rounded-full" />
-                <span className="truncate" data-testid={`search-test-result-iteration-${index}`}>{item.name}</span>
+                <span className="truncate" data-testid={`search-test-result-iteration-${index}`}>
+                  {item.name}
+                </span>
               </UserItem>
             ))}
           </ListBox>
         </Popover>
       </div>
-      {error && (
-        <p className='text-red-500'>{error}</p>
-      )}
+      {error && <p className="text-red-500">{error}</p>}
     </div>
   );
 };
@@ -311,12 +334,12 @@ const UserItem = (props: ListBoxItemProps & { children: React.ReactNode; isSelec
   return (
     <ListBoxItem
       {...props}
-      className="group flex select-none items-center gap-2 rounded px-1 py-1 outline-none cursor-pointer hover:bg-[--hl-xs] hover:text-[--color-font] focus:bg-[--hl-xs] focus:text-[--color-font]"
+      className="group flex cursor-pointer select-none items-center gap-2 rounded px-1 py-1 outline-none hover:bg-[--hl-xs] hover:text-[--color-font] focus:bg-[--hl-xs] focus:text-[--color-font]"
     >
       <span className="group-selected:font-medium flex flex-1 items-center gap-3 truncate font-normal">
         {props.children}
       </span>
-      {props.isSelected && <Icon icon="check" className="h-4 w-4 text-primary" />}
+      {props.isSelected && <Icon icon="check" className="text-primary h-4 w-4" />}
     </ListBoxItem>
   );
 };
diff --git a/packages/insomnia/src/ui/components/modals/invite-modal/invite-modal.tsx b/packages/insomnia/src/ui/components/modals/invite-modal/invite-modal.tsx
index f192aa3ac1..3038f17c21 100644
--- a/packages/insomnia/src/ui/components/modals/invite-modal/invite-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/invite-modal/invite-modal.tsx
@@ -1,6 +1,17 @@
 import { isAfter } from 'date-fns';
 import React, { type FC, type MutableRefObject, useEffect, useRef, useState } from 'react';
-import { Button, Dialog, Group, Heading, Input, ListBox, ListBoxItem, Modal, ModalOverlay, TextField } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  Group,
+  Heading,
+  Input,
+  ListBox,
+  ListBoxItem,
+  Modal,
+  ModalOverlay,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams, useSearchParams } from 'react-router-dom';
 
 import { getAccountId, getCurrentSessionId } from '../../../../account/session';
@@ -56,160 +67,181 @@ const InviteModal: FC<{
   currentUserAccountId,
   revalidateCurrentUserRoleAndPermissionsInOrg,
 }) => {
-    const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParams, setSearchParams] = useSearchParams();
 
-    const [queryInputString, setQueryInputString] = useState('');
-    const [error, setError] = useState<string | null>(null);
+  const [queryInputString, setQueryInputString] = useState('');
+  const [error, setError] = useState<string | null>(null);
 
-    const collaboratorsListLoader = useFetcher<CollaboratorsListLoaderResult>();
+  const collaboratorsListLoader = useFetcher<CollaboratorsListLoaderResult>();
 
-    const page = searchParams.get('page') ? Number(searchParams.get('page')) : 0;
+  const page = searchParams.get('page') ? Number(searchParams.get('page')) : 0;
 
-    const total = collaboratorsListLoader.data && 'total' in collaboratorsListLoader.data && collaboratorsListLoader.data.total || 0;
-    const collaboratorListError = collaboratorsListLoader.data && 'error' in collaboratorsListLoader.data && 'message' in collaboratorsListLoader.data && collaboratorsListLoader.data?.message as string || null;
-    const collaborators = collaboratorsListLoader.data && 'collaborators' in collaboratorsListLoader.data && collaboratorsListLoader.data?.collaborators || [];
+  const total =
+    (collaboratorsListLoader.data && 'total' in collaboratorsListLoader.data && collaboratorsListLoader.data.total) ||
+    0;
+  const collaboratorListError =
+    (collaboratorsListLoader.data &&
+      'error' in collaboratorsListLoader.data &&
+      'message' in collaboratorsListLoader.data &&
+      (collaboratorsListLoader.data?.message as string)) ||
+    null;
+  const collaborators =
+    (collaboratorsListLoader.data &&
+      'collaborators' in collaboratorsListLoader.data &&
+      collaboratorsListLoader.data?.collaborators) ||
+    [];
 
-    useEffect(() => {
-      if (!collaboratorsListLoader.data && collaboratorsListLoader.state === 'idle') {
-        collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}`);
-      }
-    }, [collaboratorsListLoader, organizationId]);
+  useEffect(() => {
+    if (!collaboratorsListLoader.data && collaboratorsListLoader.state === 'idle') {
+      collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}`);
+    }
+  }, [collaboratorsListLoader, organizationId]);
 
-    const handleSearch = debounce((filter: string) => {
-      if (filter.trim() === '') {
-        collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}`);
-        setSearchParams(getSearchParamsString(searchParams, { page: 0, filter: '' }));
-      } else {
-        collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}&filter=${encodeURIComponent(filter)}`);
-        setSearchParams(getSearchParamsString(searchParams, { page: 0, filter }));
-      }
-    }, 500);
-
-    const resetCollaboratorsList = () => {
-      setQueryInputString('');
+  const handleSearch = debounce((filter: string) => {
+    if (filter.trim() === '') {
       collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}`);
       setSearchParams(getSearchParamsString(searchParams, { page: 0, filter: '' }));
-    };
+    } else {
+      collaboratorsListLoader.load(
+        `/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}&filter=${encodeURIComponent(filter)}`,
+      );
+      setSearchParams(getSearchParamsString(searchParams, { page: 0, filter }));
+    }
+  }, 500);
 
-    const resetCurrentPage = () => {
-      collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=${page}&per_page=${ItemsPerPage}`);
-      setSearchParams(getSearchParamsString(searchParams, { page, filter: queryInputString }));
-    };
-
-    return (
-      <ModalOverlay
-        isDismissable={true}
-        isOpen={true}
-        onOpenChange={setIsOpen}
-        className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-[--color-bg] theme--transparent-overlay"
-      >
-        <Modal className="fixed top-[100px] w-full max-w-[900px] rounded-md border border-solid border-[--hl-sm] p-[32px] h-fit bg-[--color-bg] text-[--color-font] theme--dialog">
-          <Dialog className="outline-none relative">
-            {({ close }) => (
-              <>
-                <Heading slot="title" className="text-[22px] leading-[34px] mb-[24px]">
-                  Invite collaborators
-                </Heading>
-                <Button onPress={close} className="fa fa-times absolute top-0 right-0 text-xl" />
-                {permissionRef.current?.['create:invitation'] && (
-                  <>
-                    <InviteForm
-                      onInviteCompleted={() => {
-                        if (organizationId) {
-                          resetCollaboratorsList();
-                        }
-                      }}
-                      allRoles={allRoles}
-                    />
-                    <hr className="border my-[24px]" />
-                  </>
-                )}
-
-                <div className='flex justify-between leading-[24px] mb-[16px]'>
-                  <p>WHO HAS ACCESS ({total})</p>
-                  <Group
-                    className="w-[50%] bg-[--hl-xs] py-[4px] px-[8px] rounded flex items-center gap-2"
-                    isDisabled={collaboratorsListLoader.state !== 'idle'}
-                  >
-                    <i
-                      className="fa fa-search"
-                    />
-                    <TextField
-                      value={queryInputString}
-                      onChange={value => {
-                        setQueryInputString(value);
-                        handleSearch(value);
-                      }}
-                      aria-label="Member search query"
-                      className="flex-1"
-                    >
-                      <Input
-                        className="w-full"
-                        placeholder="Search collaborators"
-                      />
-                    </TextField>
-                    {queryInputString && (
-                      <Button onPress={resetCollaboratorsList}>
-                        <Icon icon="circle-xmark" className='h-4 w-4' />
-                      </Button>
-                    )}
-                  </Group>
-                </div>
-                {collaboratorListError && <div className='flex items-center justify-center h-[200px]'>
-                  <p className="text-[12px] text-[--color-danger] first-letter:capitalize">{collaboratorListError}</p>
-                </div>}
-                {collaborators?.length === 0 && page === 0 ? !collaboratorListError && (
-                  <div className='flex items-center justify-center h-[200px]'>
-                    <p className="text-[14px] text-[--color-font]">{queryInputString ? `No member or team found for the search: "${queryInputString}"` : 'No members or teams'}</p>
-                  </div>
-                ) : (
-                  <>
-                    <ListBox
-                      aria-label="Invitation list"
-                      className="flex flex-col gap-1"
-                    >
-                      {collaborators?.map((member: Collaborator, idx: number) => (
-                        <MemberListItem
-                          key={member.id}
-                          index={idx}
-                          organizationId={organizationId}
-                          member={member}
-                          currentUserAccountId={currentUserAccountId}
-                          currentUserRoleInOrg={currentUserRoleInOrg}
-                          allRoles={allRoles}
-                          isCurrentUserOrganizationOwner={isCurrentUserOrganizationOwner}
-                          orgFeatures={orgFeatures}
-                          permissionRef={permissionRef}
-                          revalidateCurrentUserRoleAndPermissionsInOrg={revalidateCurrentUserRoleAndPermissionsInOrg}
-                          onResetCurrentPage={resetCurrentPage}
-                          onError={setError}
-                        />
-                      ))}
-                    </ListBox>
-                    <PaginationBar
-                      isPrevDisabled={page === 0}
-                      isNextDisabled={total <= ItemsPerPage || total <= (page + 1) * ItemsPerPage}
-                      isHidden={total <= ItemsPerPage && page === 0}
-                      onPrevPress={() => {
-                        collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=${page - 1}&per_page=${ItemsPerPage}`);
-                        setSearchParams(getSearchParamsString(searchParams, { page: page - 1 }));
-                      }}
-                      onNextPress={() => {
-                        collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=${page + 1}&per_page=${ItemsPerPage}`);
-                        setSearchParams(getSearchParamsString(searchParams, { page: page + 1 }));
-                      }}
-                    />
-                    {error && <div className='flex justify-center mt-[16px]'>
-                      <p className="text-[12px] text-[--color-danger]">{error}</p>
-                    </div>}
-                  </>)}
-              </>)}
-          </Dialog>
-        </Modal>
-      </ModalOverlay>
-    );
+  const resetCollaboratorsList = () => {
+    setQueryInputString('');
+    collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=0&per_page=${ItemsPerPage}`);
+    setSearchParams(getSearchParamsString(searchParams, { page: 0, filter: '' }));
   };
 
+  const resetCurrentPage = () => {
+    collaboratorsListLoader.load(`/organization/${organizationId}/collaborators?page=${page}&per_page=${ItemsPerPage}`);
+    setSearchParams(getSearchParamsString(searchParams, { page, filter: queryInputString }));
+  };
+
+  return (
+    <ModalOverlay
+      isDismissable={true}
+      isOpen={true}
+      onOpenChange={setIsOpen}
+      className="theme--transparent-overlay fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-[--color-bg]"
+    >
+      <Modal className="theme--dialog fixed top-[100px] h-fit w-full max-w-[900px] rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[32px] text-[--color-font]">
+        <Dialog className="relative outline-none">
+          {({ close }) => (
+            <>
+              <Heading slot="title" className="mb-[24px] text-[22px] leading-[34px]">
+                Invite collaborators
+              </Heading>
+              <Button onPress={close} className="fa fa-times absolute right-0 top-0 text-xl" />
+              {permissionRef.current?.['create:invitation'] && (
+                <>
+                  <InviteForm
+                    onInviteCompleted={() => {
+                      if (organizationId) {
+                        resetCollaboratorsList();
+                      }
+                    }}
+                    allRoles={allRoles}
+                  />
+                  <hr className="my-[24px] border" />
+                </>
+              )}
+
+              <div className="mb-[16px] flex justify-between leading-[24px]">
+                <p>WHO HAS ACCESS ({total})</p>
+                <Group
+                  className="flex w-[50%] items-center gap-2 rounded bg-[--hl-xs] px-[8px] py-[4px]"
+                  isDisabled={collaboratorsListLoader.state !== 'idle'}
+                >
+                  <i className="fa fa-search" />
+                  <TextField
+                    value={queryInputString}
+                    onChange={value => {
+                      setQueryInputString(value);
+                      handleSearch(value);
+                    }}
+                    aria-label="Member search query"
+                    className="flex-1"
+                  >
+                    <Input className="w-full" placeholder="Search collaborators" />
+                  </TextField>
+                  {queryInputString && (
+                    <Button onPress={resetCollaboratorsList}>
+                      <Icon icon="circle-xmark" className="h-4 w-4" />
+                    </Button>
+                  )}
+                </Group>
+              </div>
+              {collaboratorListError && (
+                <div className="flex h-[200px] items-center justify-center">
+                  <p className="text-[12px] text-[--color-danger] first-letter:capitalize">{collaboratorListError}</p>
+                </div>
+              )}
+              {collaborators?.length === 0 && page === 0 ? (
+                !collaboratorListError && (
+                  <div className="flex h-[200px] items-center justify-center">
+                    <p className="text-[14px] text-[--color-font]">
+                      {queryInputString
+                        ? `No member or team found for the search: "${queryInputString}"`
+                        : 'No members or teams'}
+                    </p>
+                  </div>
+                )
+              ) : (
+                <>
+                  <ListBox aria-label="Invitation list" className="flex flex-col gap-1">
+                    {collaborators?.map((member: Collaborator, idx: number) => (
+                      <MemberListItem
+                        key={member.id}
+                        index={idx}
+                        organizationId={organizationId}
+                        member={member}
+                        currentUserAccountId={currentUserAccountId}
+                        currentUserRoleInOrg={currentUserRoleInOrg}
+                        allRoles={allRoles}
+                        isCurrentUserOrganizationOwner={isCurrentUserOrganizationOwner}
+                        orgFeatures={orgFeatures}
+                        permissionRef={permissionRef}
+                        revalidateCurrentUserRoleAndPermissionsInOrg={revalidateCurrentUserRoleAndPermissionsInOrg}
+                        onResetCurrentPage={resetCurrentPage}
+                        onError={setError}
+                      />
+                    ))}
+                  </ListBox>
+                  <PaginationBar
+                    isPrevDisabled={page === 0}
+                    isNextDisabled={total <= ItemsPerPage || total <= (page + 1) * ItemsPerPage}
+                    isHidden={total <= ItemsPerPage && page === 0}
+                    onPrevPress={() => {
+                      collaboratorsListLoader.load(
+                        `/organization/${organizationId}/collaborators?page=${page - 1}&per_page=${ItemsPerPage}`,
+                      );
+                      setSearchParams(getSearchParamsString(searchParams, { page: page - 1 }));
+                    }}
+                    onNextPress={() => {
+                      collaboratorsListLoader.load(
+                        `/organization/${organizationId}/collaborators?page=${page + 1}&per_page=${ItemsPerPage}`,
+                      );
+                      setSearchParams(getSearchParamsString(searchParams, { page: page + 1 }));
+                    }}
+                  />
+                  {error && (
+                    <div className="mt-[16px] flex justify-center">
+                      <p className="text-[12px] text-[--color-danger]">{error}</p>
+                    </div>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  );
+};
+
 const MemberListItem: FC<{
   index: number;
   organizationId: string;
@@ -237,201 +269,242 @@ const MemberListItem: FC<{
   onResetCurrentPage,
   onError,
 }) => {
-    const reinviteCollaboratorFetcher = useFetcher();
-    const reinviting = reinviteCollaboratorFetcher.state !== 'idle';
+  const reinviteCollaboratorFetcher = useFetcher();
+  const reinviting = reinviteCollaboratorFetcher.state !== 'idle';
 
-    const updateInvitationRoleFetcher = useFetcher();
-    const invitationRoleUpdating = updateInvitationRoleFetcher.state !== 'idle';
+  const updateInvitationRoleFetcher = useFetcher();
+  const invitationRoleUpdating = updateInvitationRoleFetcher.state !== 'idle';
 
-    const updateMemberRoleFetcher = useFetcher();
-    const memberRoleUpdating = updateMemberRoleFetcher.state !== 'idle';
+  const updateMemberRoleFetcher = useFetcher();
+  const memberRoleUpdating = updateMemberRoleFetcher.state !== 'idle';
 
-    const [isFailed, setIsFailed] = useState(false);
+  const [isFailed, setIsFailed] = useState(false);
 
-    const isAcceptedMember = member.type === 'member';
-    const isPendingMember = member.type === 'invite';
-    const isGroup = member.type === 'group';
+  const isAcceptedMember = member.type === 'member';
+  const isPendingMember = member.type === 'invite';
+  const isGroup = member.type === 'group';
 
-    const textValue = member.name ?? member.metadata.email;
-    const isCurrentUser = isAcceptedMember && currentUserAccountId === member.metadata.userId;
+  const textValue = member.name ?? member.metadata.email;
+  const isCurrentUser = isAcceptedMember && currentUserAccountId === member.metadata.userId;
 
-    const isPendingInvitationExpired = isPendingMember && member.metadata.expiresAt && isAfter(new Date(), new Date(member.metadata.expiresAt));
-    const memberRoleName = allRoles.find((r: Role) => r.id === member.metadata.roleId)?.name ?? 'member';
+  const isPendingInvitationExpired =
+    isPendingMember && member.metadata.expiresAt && isAfter(new Date(), new Date(member.metadata.expiresAt));
+  const memberRoleName = allRoles.find((r: Role) => r.id === member.metadata.roleId)?.name ?? 'member';
 
-    useEffect(() => {
-      if (updateMemberRoleFetcher.data && 'error' in updateMemberRoleFetcher.data && updateMemberRoleFetcher.state === 'idle') {
-        onError(updateMemberRoleFetcher.data.error);
-      } else if (updateMemberRoleFetcher.data && updateMemberRoleFetcher.state === 'idle') {
-        revalidateCurrentUserRoleAndPermissionsInOrg(organizationId);
-        onResetCurrentPage();
-      }
-    }, [onError, onResetCurrentPage, organizationId, revalidateCurrentUserRoleAndPermissionsInOrg, updateMemberRoleFetcher.data, updateMemberRoleFetcher.state]);
+  useEffect(() => {
+    if (
+      updateMemberRoleFetcher.data &&
+      'error' in updateMemberRoleFetcher.data &&
+      updateMemberRoleFetcher.state === 'idle'
+    ) {
+      onError(updateMemberRoleFetcher.data.error);
+    } else if (updateMemberRoleFetcher.data && updateMemberRoleFetcher.state === 'idle') {
+      revalidateCurrentUserRoleAndPermissionsInOrg(organizationId);
+      onResetCurrentPage();
+    }
+  }, [
+    onError,
+    onResetCurrentPage,
+    organizationId,
+    revalidateCurrentUserRoleAndPermissionsInOrg,
+    updateMemberRoleFetcher.data,
+    updateMemberRoleFetcher.state,
+  ]);
 
-    return (
-      <ListBoxItem
-        id={isAcceptedMember ? member.metadata.userId : member.id}
-        data-testid={`collaborator-test-iteration-${index}`}
-        textValue={textValue}
-        className='flex justify-between outline-none gap-[16px] leading-[36px] odd:bg-[--hl-xs] px-2 rounded-sm'
-      >
-        <div className="grow truncate relative flex items-center gap-3">
-          <div className="relative w-[24px] h-[24px]">
-            <img src={member.picture} alt="member image" className="w-[24px] h-[24px] rounded-full absolute left-0 bottom-0 top-0 m-auto" />
-            {member.metadata.groupTotal !== undefined && (
-              <div className="absolute -bottom-1 -right-1 flex h-3 w-auto min-w-3 items-center justify-center rounded-full border border-white bg-opacity-100 bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] text-[--color-font-danger] p-1">
-                <p className="text-[9px]">{member.metadata.groupTotal}</p>
-              </div>
-            )}
-          </div>
-          <div className='flex items-center gap-2'>
-            <span>{textValue}</span>
-            {isGroup && <span className="inline-flex items-center rounded-full bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-1.5 py-0.5 text-xs font-medium text-[--color-font-surprise] ring-1 ring-inset ring-[rgba(var(--color-surprise-rgb),1)]">Team</span>}
-            {isCurrentUser && <span className="inline-flex items-center rounded-full bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-1.5 py-0.5 text-xs font-medium text-[--color-font-surprise] ring-1 ring-inset ring-[rgba(var(--color-surprise-rgb),1)]">You</span>}
-            {isPendingMember && !isPendingInvitationExpired && <span className="inline-flex items-center rounded-full bg-opacity-100 bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] px-1.5 py-0.5 text-xs font-medium text-[--color-font-warning] ring-1 ring-inset ring-[rgba(var(--color-warning-rgb),1)]">Invite sent</span>}
-            {isPendingMember && isPendingInvitationExpired && <span className="inline-flex items-center rounded-full bg-opacity-100 bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] px-1.5 py-0.5 text-xs font-medium text-[--color-font-danger] ring-1 ring-inset ring-[rgba(var(--color-danger-rgb),1)]">Expired</span>}
-          </div>
-        </div>
-        <div className='flex items-center gap-2'>
-          {member.metadata.invitationId ? (
-            <Button
-              aria-label="Delete member button"
-              isDisabled={reinviting}
-              onPress={async () => {
-                if (!permissionRef.current['update:membership']) {
-                  showAlert({
-                    title: 'Permission required',
-                    message: 'You don\'t have permission to make this action, please contact the organization owner.',
-                  });
-                  return;
-                }
-
-                if (member.metadata.invitationId) {
-                  reinviteCollaboratorFetcher.submit({}, {
-                    action: `/organization/${organizationId}/invites/${member.metadata.invitationId}/reinvite`,
-                    method: 'POST',
-                  });
-                }
-              }}
-              className="flex items-center gap-2 min-w-[75px] py-1 px-2 font-semibold aria-pressed:bg-[--hl-sm] text-[--color-font] transition-all text-sm"
-            >
-              {reinviting ? (
-                <Icon icon="spinner" className='fa-spin fa-1x' />
-              ) : (
-                <Icon icon="paper-plane" />
-              )}
-              Resend
-            </Button>
-          ) : (
-            <div className='flex h-[25px] min-w-[75px] cursor-pointer items-center justify-center' />
-          )}
-          {member.type !== 'group' && (
-            <OrganizationMemberRolesSelector
-              type={SELECTOR_TYPE.UPDATE}
-              availableRoles={allRoles}
-              memberRoles={[memberRoleName]}
-              userRole={currentUserRoleInOrg}
-              isDisabled={isAcceptedMember && memberRoleName === 'owner' || invitationRoleUpdating || memberRoleUpdating}
-              isRBACEnabled={Boolean(orgFeatures?.features.orgBasicRbac?.enabled)}
-              isUserOrganizationOwner={isCurrentUserOrganizationOwner}
-              hasPermissionToChangeRoles={permissionRef.current['update:membership']}
-              className="min-w-[88px] flex items-center gap-2 h-6"
-              onRoleChange={async role => {
-                if (isAcceptedMember) {
-                  updateMemberRoleFetcher.submit({
-                    roleId: role.id,
-                  }, {
-                    action: `/organization/${organizationId}/members/${member.metadata.userId}/roles`,
-                    method: 'POST',
-                  });
-                } else {
-                  updateInvitationRoleFetcher.submit({
-                    roleId: role.id,
-                  }, {
-                    action: `/organization/${organizationId}/invites/${member.metadata.invitationId}`,
-                    method: 'POST',
-                  });
-                }
-              }}
-            />
-          )}
-          {member.type === 'group' && (
-            <div className='min-w-[88px] flex justify-center items-center'>
-              <Button
-                aria-label="Manage collaborators"
-                className="min-w-[70px] pressed:bg-opacity-40 flex gap-2 p-1 text-[--color-font-surprise] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] cursor-pointer items-center justify-center rounded-sm bg-clip-padding outline-none hover:bg-opacity-80 focus-visible:ring-2 focus-visible:ring-white/75 transition-all text-sm"
-                onPress={() => {
-                  if (!permissionRef.current['own:organization']) {
-                    showAlert({
-                      title: 'Permission required',
-                      message: 'You don\'t have permission to make this action, please contact the organization owner.',
-                    });
-                    return;
-                  }
-
-                  window.main.openInBrowser(
-                    `${getAppWebsiteBaseURL()}/app/enterprise/team/${member.metadata.groupId}`,
-                  );
-                }}
-              >
-                <Icon icon="users" className="h-3 w-3" />
-                <p className="m-0 truncate text-sm font-normal">
-                  Manage
-                </p>
-              </Button>
+  return (
+    <ListBoxItem
+      id={isAcceptedMember ? member.metadata.userId : member.id}
+      data-testid={`collaborator-test-iteration-${index}`}
+      textValue={textValue}
+      className="flex justify-between gap-[16px] rounded-sm px-2 leading-[36px] outline-none odd:bg-[--hl-xs]"
+    >
+      <div className="relative flex grow items-center gap-3 truncate">
+        <div className="relative h-[24px] w-[24px]">
+          <img
+            src={member.picture}
+            alt="member image"
+            className="absolute bottom-0 left-0 top-0 m-auto h-[24px] w-[24px] rounded-full"
+          />
+          {member.metadata.groupTotal !== undefined && (
+            <div className="absolute -bottom-1 -right-1 flex h-3 w-auto min-w-3 items-center justify-center rounded-full border border-white bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] bg-opacity-100 p-1 text-[--color-font-danger]">
+              <p className="text-[9px]">{member.metadata.groupTotal}</p>
             </div>
           )}
-          <PromptButton
-            confirmMessage='Confirm'
-            className="flex items-center gap-2 min-w-[85px] py-1 px-2 font-semibold aria-pressed:bg-[--hl-sm] text-[--color-font] transition-all text-sm"
-            doneMessage={isFailed ? 'Failed' : isAcceptedMember || isGroup ? 'Removed' : 'Revoked'}
-            disabled={memberRoleName === 'owner' || isCurrentUser}
-            onClick={() => {
-              if (!permissionRef.current['delete:membership']) {
+        </div>
+        <div className="flex items-center gap-2">
+          <span>{textValue}</span>
+          {isGroup && (
+            <span className="inline-flex items-center rounded-full bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-1.5 py-0.5 text-xs font-medium text-[--color-font-surprise] ring-1 ring-inset ring-[rgba(var(--color-surprise-rgb),1)]">
+              Team
+            </span>
+          )}
+          {isCurrentUser && (
+            <span className="inline-flex items-center rounded-full bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-1.5 py-0.5 text-xs font-medium text-[--color-font-surprise] ring-1 ring-inset ring-[rgba(var(--color-surprise-rgb),1)]">
+              You
+            </span>
+          )}
+          {isPendingMember && !isPendingInvitationExpired && (
+            <span className="inline-flex items-center rounded-full bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-1.5 py-0.5 text-xs font-medium text-[--color-font-warning] ring-1 ring-inset ring-[rgba(var(--color-warning-rgb),1)]">
+              Invite sent
+            </span>
+          )}
+          {isPendingMember && isPendingInvitationExpired && (
+            <span className="inline-flex items-center rounded-full bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-1.5 py-0.5 text-xs font-medium text-[--color-font-danger] ring-1 ring-inset ring-[rgba(var(--color-danger-rgb),1)]">
+              Expired
+            </span>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        {member.metadata.invitationId ? (
+          <Button
+            aria-label="Delete member button"
+            isDisabled={reinviting}
+            onPress={async () => {
+              if (!permissionRef.current['update:membership']) {
                 showAlert({
                   title: 'Permission required',
-                  message: 'You don\'t have permission to make this action, please contact the organization owner.',
+                  message: "You don't have permission to make this action, please contact the organization owner.",
                 });
                 return;
               }
 
-              onError(null);
-              setIsFailed(false);
-
-              if (isAcceptedMember) {
-                deleteMember(organizationId, member.metadata.userId!).then(() => {
-                  onResetCurrentPage();
-                }).catch(error => {
-                  onError(error.message);
-                  setIsFailed(true);
-                });
-              }
-
-              if (isPendingMember && member.metadata.invitationId) {
-                revokeOrganizationInvite(organizationId, member.metadata.invitationId).then(() => {
-                  onResetCurrentPage();
-                }).catch(error => {
-                  onError(error.message);
-                  setIsFailed(true);
-                });
-              }
-
-              if (isGroup) {
-                unlinkTeam(organizationId, member.id).then(() => {
-                  onResetCurrentPage();
-                }).catch(error => {
-                  onError(error.message);
-                  setIsFailed(true);
-                });
+              if (member.metadata.invitationId) {
+                reinviteCollaboratorFetcher.submit(
+                  {},
+                  {
+                    action: `/organization/${organizationId}/invites/${member.metadata.invitationId}/reinvite`,
+                    method: 'POST',
+                  },
+                );
               }
             }}
+            className="flex min-w-[75px] items-center gap-2 px-2 py-1 text-sm font-semibold text-[--color-font] transition-all aria-pressed:bg-[--hl-sm]"
           >
-            <Icon icon={isAcceptedMember || isGroup ? 'trash' : 'square-minus'} />
-            {isAcceptedMember || isGroup ? 'Remove' : 'Revoke'}
-          </PromptButton>
-        </div>
-      </ListBoxItem>
-    );
-  };
+            {reinviting ? <Icon icon="spinner" className="fa-spin fa-1x" /> : <Icon icon="paper-plane" />}
+            Resend
+          </Button>
+        ) : (
+          <div className="flex h-[25px] min-w-[75px] cursor-pointer items-center justify-center" />
+        )}
+        {member.type !== 'group' && (
+          <OrganizationMemberRolesSelector
+            type={SELECTOR_TYPE.UPDATE}
+            availableRoles={allRoles}
+            memberRoles={[memberRoleName]}
+            userRole={currentUserRoleInOrg}
+            isDisabled={
+              (isAcceptedMember && memberRoleName === 'owner') || invitationRoleUpdating || memberRoleUpdating
+            }
+            isRBACEnabled={Boolean(orgFeatures?.features.orgBasicRbac?.enabled)}
+            isUserOrganizationOwner={isCurrentUserOrganizationOwner}
+            hasPermissionToChangeRoles={permissionRef.current['update:membership']}
+            className="flex h-6 min-w-[88px] items-center gap-2"
+            onRoleChange={async role => {
+              if (isAcceptedMember) {
+                updateMemberRoleFetcher.submit(
+                  {
+                    roleId: role.id,
+                  },
+                  {
+                    action: `/organization/${organizationId}/members/${member.metadata.userId}/roles`,
+                    method: 'POST',
+                  },
+                );
+              } else {
+                updateInvitationRoleFetcher.submit(
+                  {
+                    roleId: role.id,
+                  },
+                  {
+                    action: `/organization/${organizationId}/invites/${member.metadata.invitationId}`,
+                    method: 'POST',
+                  },
+                );
+              }
+            }}
+          />
+        )}
+        {member.type === 'group' && (
+          <div className="flex min-w-[88px] items-center justify-center">
+            <Button
+              aria-label="Manage collaborators"
+              className="pressed:bg-opacity-40 flex min-w-[70px] cursor-pointer items-center justify-center gap-2 rounded-sm bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 bg-clip-padding p-1 text-sm text-[--color-font-surprise] outline-none transition-all hover:bg-opacity-80 focus-visible:ring-2 focus-visible:ring-white/75"
+              onPress={() => {
+                if (!permissionRef.current['own:organization']) {
+                  showAlert({
+                    title: 'Permission required',
+                    message: "You don't have permission to make this action, please contact the organization owner.",
+                  });
+                  return;
+                }
+
+                window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/enterprise/team/${member.metadata.groupId}`);
+              }}
+            >
+              <Icon icon="users" className="h-3 w-3" />
+              <p className="m-0 truncate text-sm font-normal">Manage</p>
+            </Button>
+          </div>
+        )}
+        <PromptButton
+          confirmMessage="Confirm"
+          className="flex min-w-[85px] items-center gap-2 px-2 py-1 text-sm font-semibold text-[--color-font] transition-all aria-pressed:bg-[--hl-sm]"
+          doneMessage={isFailed ? 'Failed' : isAcceptedMember || isGroup ? 'Removed' : 'Revoked'}
+          disabled={memberRoleName === 'owner' || isCurrentUser}
+          onClick={() => {
+            if (!permissionRef.current['delete:membership']) {
+              showAlert({
+                title: 'Permission required',
+                message: "You don't have permission to make this action, please contact the organization owner.",
+              });
+              return;
+            }
+
+            onError(null);
+            setIsFailed(false);
+
+            if (isAcceptedMember) {
+              deleteMember(organizationId, member.metadata.userId!)
+                .then(() => {
+                  onResetCurrentPage();
+                })
+                .catch(error => {
+                  onError(error.message);
+                  setIsFailed(true);
+                });
+            }
+
+            if (isPendingMember && member.metadata.invitationId) {
+              revokeOrganizationInvite(organizationId, member.metadata.invitationId)
+                .then(() => {
+                  onResetCurrentPage();
+                })
+                .catch(error => {
+                  onError(error.message);
+                  setIsFailed(true);
+                });
+            }
+
+            if (isGroup) {
+              unlinkTeam(organizationId, member.id)
+                .then(() => {
+                  onResetCurrentPage();
+                })
+                .catch(error => {
+                  onError(error.message);
+                  setIsFailed(true);
+                });
+            }
+          }}
+        >
+          <Icon icon={isAcceptedMember || isGroup ? 'trash' : 'square-minus'} />
+          {isAcceptedMember || isGroup ? 'Remove' : 'Revoke'}
+        </PromptButton>
+      </div>
+    </ListBoxItem>
+  );
+};
 
 interface PaginationBarProps {
   isPrevDisabled?: boolean;
@@ -455,8 +528,10 @@ const PaginationBar = ({ isNextDisabled, isPrevDisabled, isHidden, onPrevPress,
           className="flex h-[25px] items-center justify-center gap-[5px] p-1"
           onPress={onPrevPress}
         >
-          <Icon icon="arrow-left" className="h-[12px] w-[12px] text text-[--color-font] disabled:text-[#00000080]" />
-          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">Previous</p>
+          <Icon icon="arrow-left" className="text h-[12px] w-[12px] text-[--color-font] disabled:text-[#00000080]" />
+          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">
+            Previous
+          </p>
         </Button>
         <Button
           isDisabled={isNextDisabled}
@@ -464,7 +539,9 @@ const PaginationBar = ({ isNextDisabled, isPrevDisabled, isHidden, onPrevPress,
           className="flex h-[25px] items-center justify-center gap-[5px] p-1"
           onPress={onNextPress}
         >
-          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">Next</p>
+          <p className="m-0 text-[12px] font-normal capitalize leading-[15px] text-[--color-font] disabled:text-[#00000080]">
+            Next
+          </p>
           <Icon icon="arrow-right" className="h-[12px] w-[12px] text-[--color-font] disabled:text-[#00000080]" />
         </Button>
       </div>
@@ -476,97 +553,91 @@ const PaginationBar = ({ isNextDisabled, isPrevDisabled, isHidden, onPrevPress,
 export const InviteModalContainer: FC<{
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
-}> = ({
-  isOpen,
-  setIsOpen,
-}) => {
-    const [loadingOrgInfo, setLoadingOrgInfo] = useState(true);
-    const { organizationId } = useParams();
-    const [allRoles, setAllRoles] = useState<Role[]>([]);
-    const [currentUserRoleInOrg, setCurrentUserRoleInOrg] = useState<Role | null>(null);
-    const [orgFeatures, setOrgFeatures] = useState<Features | null>(null);
-    const permissionRef = useRef<Record<Permission, boolean>>();
-    const [currentUserAccountId, setCurrentUserAccountId] = useState('');
-    const [currentOrgInfo, setCurrentOrgInfo] = useState<OrganizationAuth0 | null>(null);
+}> = ({ isOpen, setIsOpen }) => {
+  const [loadingOrgInfo, setLoadingOrgInfo] = useState(true);
+  const { organizationId } = useParams();
+  const [allRoles, setAllRoles] = useState<Role[]>([]);
+  const [currentUserRoleInOrg, setCurrentUserRoleInOrg] = useState<Role | null>(null);
+  const [orgFeatures, setOrgFeatures] = useState<Features | null>(null);
+  const permissionRef = useRef<Record<Permission, boolean>>();
+  const [currentUserAccountId, setCurrentUserAccountId] = useState('');
+  const [currentOrgInfo, setCurrentOrgInfo] = useState<OrganizationAuth0 | null>(null);
 
-    const isCurrentUserOrganizationOwner = currentUserAccountId === currentOrgInfo?.metadata?.ownerAccountId;
+  const isCurrentUserOrganizationOwner = currentUserAccountId === currentOrgInfo?.metadata?.ownerAccountId;
 
-    function getBaseInfo(organizationId: string) {
-      return Promise.all([
-        getCurrentUserRoleInOrg(organizationId).then(setCurrentUserRoleInOrg),
-        getOrganizationFeatures(organizationId).then(setOrgFeatures),
-        getCurrentUserPermissionsInOrg(organizationId).then(permissions => {
-          permissionRef.current = permissions;
-        }),
-        getAccountId().then(setCurrentUserAccountId),
-        getOrganization(organizationId).then(setCurrentOrgInfo),
-      ]);
-    }
-
-    function revalidateCurrentUserRoleAndPermissionsInOrg(organizationId: string) {
-      return Promise.all([
-        getCurrentUserRoleInOrg(organizationId).then(setCurrentUserRoleInOrg),
-        getCurrentUserPermissionsInOrg(organizationId).then(permissions => {
-          permissionRef.current = permissions;
-        }),
-      ]);
-    }
-
-    // get info every time organizationId changes
-    useEffect(() => {
-      (async () => {
-        if (organizationId) {
-          setLoadingOrgInfo(true);
-          await Promise.all([
-            getAllRoles().then(setAllRoles),
-            getBaseInfo(organizationId),
-          ]);
-          setLoadingOrgInfo(false);
-        }
-      })();
-    }, [organizationId]);
-
-    // get info every time modal is opened
-    useEffect(() => {
-      if (organizationId && isOpen) {
-        getBaseInfo(organizationId);
-      }
-    }, [organizationId, isOpen]);
-
-    // track event when modal is opened
-    useEffect(() => {
-      if (isOpen) {
-        window.main.trackSegmentEvent({ event: SegmentEvent.inviteTrigger });
-      }
-    }, [
-      isOpen,
+  function getBaseInfo(organizationId: string) {
+    return Promise.all([
+      getCurrentUserRoleInOrg(organizationId).then(setCurrentUserRoleInOrg),
+      getOrganizationFeatures(organizationId).then(setOrgFeatures),
+      getCurrentUserPermissionsInOrg(organizationId).then(permissions => {
+        permissionRef.current = permissions;
+      }),
+      getAccountId().then(setCurrentUserAccountId),
+      getOrganization(organizationId).then(setCurrentOrgInfo),
     ]);
+  }
 
-    if (loadingOrgInfo || !organizationId || !isOpen) {
-      return null;
-    }
-    invariant(currentUserRoleInOrg, 'currentUserRoleInOrg should not be null');
-    invariant(orgFeatures, 'orgFeatures should not be null');
+  function revalidateCurrentUserRoleAndPermissionsInOrg(organizationId: string) {
+    return Promise.all([
+      getCurrentUserRoleInOrg(organizationId).then(setCurrentUserRoleInOrg),
+      getCurrentUserPermissionsInOrg(organizationId).then(permissions => {
+        permissionRef.current = permissions;
+      }),
+    ]);
+  }
 
-    if (checkPermissionRefType(permissionRef)) {
-      return (
-        <InviteModal
-          setIsOpen={setIsOpen}
-          organizationId={organizationId}
-          allRoles={allRoles}
-          currentUserRoleInOrg={currentUserRoleInOrg}
-          orgFeatures={orgFeatures}
-          permissionRef={permissionRef}
-          isCurrentUserOrganizationOwner={isCurrentUserOrganizationOwner}
-          currentUserAccountId={currentUserAccountId}
-          revalidateCurrentUserRoleAndPermissionsInOrg={revalidateCurrentUserRoleAndPermissionsInOrg}
-        />
-      );
+  // get info every time organizationId changes
+  useEffect(() => {
+    (async () => {
+      if (organizationId) {
+        setLoadingOrgInfo(true);
+        await Promise.all([getAllRoles().then(setAllRoles), getBaseInfo(organizationId)]);
+        setLoadingOrgInfo(false);
+      }
+    })();
+  }, [organizationId]);
+
+  // get info every time modal is opened
+  useEffect(() => {
+    if (organizationId && isOpen) {
+      getBaseInfo(organizationId);
     }
+  }, [organizationId, isOpen]);
+
+  // track event when modal is opened
+  useEffect(() => {
+    if (isOpen) {
+      window.main.trackSegmentEvent({ event: SegmentEvent.inviteTrigger });
+    }
+  }, [isOpen]);
+
+  if (loadingOrgInfo || !organizationId || !isOpen) {
     return null;
-  };
+  }
+  invariant(currentUserRoleInOrg, 'currentUserRoleInOrg should not be null');
+  invariant(orgFeatures, 'orgFeatures should not be null');
 
-function checkPermissionRefType(permissionRef: MutableRefObject<Record<Permission, boolean> | undefined>): permissionRef is MutableRefObject<Record<Permission, boolean>> {
+  if (checkPermissionRefType(permissionRef)) {
+    return (
+      <InviteModal
+        setIsOpen={setIsOpen}
+        organizationId={organizationId}
+        allRoles={allRoles}
+        currentUserRoleInOrg={currentUserRoleInOrg}
+        orgFeatures={orgFeatures}
+        permissionRef={permissionRef}
+        isCurrentUserOrganizationOwner={isCurrentUserOrganizationOwner}
+        currentUserAccountId={currentUserAccountId}
+        revalidateCurrentUserRoleAndPermissionsInOrg={revalidateCurrentUserRoleAndPermissionsInOrg}
+      />
+    );
+  }
+  return null;
+};
+
+function checkPermissionRefType(
+  permissionRef: MutableRefObject<Record<Permission, boolean> | undefined>,
+): permissionRef is MutableRefObject<Record<Permission, boolean>> {
   return Boolean(permissionRef.current);
 }
 
@@ -587,9 +658,7 @@ export type Permission =
   | 'update:enterprise_connection'
   | 'leave:organization';
 
-export async function getCurrentUserPermissionsInOrg(
-  organizationId: string,
-): Promise<Record<Permission, boolean>> {
+export async function getCurrentUserPermissionsInOrg(organizationId: string): Promise<Record<Permission, boolean>> {
   return insomniaFetch({
     method: 'GET',
     path: `/v1/organizations/${organizationId}/user-permissions`,
@@ -614,9 +683,7 @@ export interface Features {
   features: OrgFeatures;
 }
 
-async function getOrganizationFeatures(
-  organizationId: string,
-): Promise<Features> {
+async function getOrganizationFeatures(organizationId: string): Promise<Features> {
   return insomniaFetch<Features>({
     method: 'GET',
     path: `/v1/organizations/${organizationId}/features`,
@@ -672,9 +739,7 @@ export interface OrganizationAuth0 {
   metadata: Metadata;
 }
 
-async function getOrganization(
-  organizationId: string,
-): Promise<OrganizationAuth0> {
+async function getOrganization(organizationId: string): Promise<OrganizationAuth0> {
   return insomniaFetch<OrganizationAuth0>({
     method: 'GET',
     path: `/v1/organizations/${organizationId}`,
diff --git a/packages/insomnia/src/ui/components/modals/invite-modal/organization-member-roles-selector.tsx b/packages/insomnia/src/ui/components/modals/invite-modal/organization-member-roles-selector.tsx
index 66b633d881..abb9881378 100644
--- a/packages/insomnia/src/ui/components/modals/invite-modal/organization-member-roles-selector.tsx
+++ b/packages/insomnia/src/ui/components/modals/invite-modal/organization-member-roles-selector.tsx
@@ -58,7 +58,7 @@ const checkIfAllow = ({
       return {
         allow: false,
         title: 'Permission required',
-        message: 'You don\'t have permission to make this action, please contact the organization owner.',
+        message: "You don't have permission to make this action, please contact the organization owner.",
       };
     }
 
@@ -135,16 +135,16 @@ export const OrganizationMemberRolesSelector = (props: Props) => {
         <Button
           isDisabled={isDisabled}
           aria-label="Menu"
-          className={`px-[8px] w-full pressed:bg-opacity-40 flex items-center gap-[8px] rounded-full bg-opacity-20 bg-clip-padding outline-none transition-colors hover:bg-opacity-30 disabled:opacity-40 ${className}`}
+          className={`pressed:bg-opacity-40 flex w-full items-center gap-[8px] rounded-full bg-opacity-20 bg-clip-padding px-[8px] outline-none transition-colors hover:bg-opacity-30 disabled:opacity-40 ${className}`}
         >
-          <p className="flex-1 m-0 text-[12px] font-normal capitalize tracking-[-0.25px] text-center">
+          <p className="m-0 flex-1 text-center text-[12px] font-normal capitalize tracking-[-0.25px]">
             {selectedRoles?.length ? selectedRoles[0] : 'Member'}
           </p>
           <i className="fa fa-caret-down" />
         </Button>
         <Popover
           placement="bottom end"
-          className="entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 w-56 min-w-[300px] origin-top-left overflow-auto rounded-md p-1 border-solid border-white/20 border bg-[--color-bg]"
+          className="entering:animate-in entering:fade-in entering:zoom-in-95 exiting:animate-out exiting:fade-out exiting:zoom-out-95 w-56 min-w-[300px] origin-top-left overflow-auto rounded-md border border-solid border-white/20 bg-[--color-bg] p-1"
         >
           <Menu
             className="outline-none"
@@ -161,20 +161,18 @@ export const OrganizationMemberRolesSelector = (props: Props) => {
                 key={item.name}
                 aria-label="Select role"
                 className={({ isDisabled }) =>
-                  `hover:bg-[--hl-xs] group box-border flex w-full cursor-default flex-col rounded-md px-3 py-2 outline-none text-[--color-font] ${isDisabled ? 'opacity-40' : 'cursor-pointer'
+                  `group box-border flex w-full cursor-default flex-col rounded-md px-3 py-2 text-[--color-font] outline-none hover:bg-[--hl-xs] ${
+                    isDisabled ? 'opacity-40' : 'cursor-pointer'
                   }`
                 }
               >
                 <div className="flex items-center gap-[5px]">
-                  <Text
-                    slot="label"
-                    className="text-[14px] font-[700] capitalize leading-[28px] tracking-[-0.25px]"
-                  >
+                  <Text slot="label" className="text-[14px] font-[700] capitalize leading-[28px] tracking-[-0.25px]">
                     {item.name}
                   </Text>
                   {selectedRoles?.length
-                    ? selectedRoles?.includes(item.name) && <i className="fa fa-check h-3 w-3 text-primary" />
-                    : item.name === 'member' && <i className="fa fa-check h-3 w-3 text-primary" />}
+                    ? selectedRoles?.includes(item.name) && <i className="fa fa-check text-primary h-3 w-3" />
+                    : item.name === 'member' && <i className="fa fa-check text-primary h-3 w-3" />}
                 </div>
                 <Text
                   slot="description"
diff --git a/packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx b/packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx
index f995b2e1e0..d6ffe1bb7d 100644
--- a/packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/new-workspace-modal.tsx
@@ -92,13 +92,10 @@ export const NewWorkspaceModal = ({
   }, [gitRepoTreeFetcher, isOpen, organizationId, project]);
 
   const createNewWorkspace = () => {
-    createNewWorkspaceFetcher.submit(
-      workspaceData,
-      {
-        action: `/organization/${organizationId}/project/${project._id}/workspace/new`,
-        method: 'POST',
-      }
-    );
+    createNewWorkspaceFetcher.submit(workspaceData, {
+      action: `/organization/${organizationId}/project/${project._id}/workspace/new`,
+      method: 'POST',
+    });
   };
 
   // From the folderPath we need to get the folder children and validate that there is no file with the same name
@@ -110,19 +107,19 @@ export const NewWorkspaceModal = ({
       isOpen={isOpen}
       onOpenChange={onOpenChange}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
-        className={`max-w-3xl w-full rounded-md border border-solid border-[--hl-sm] max-h-[90dvh] bg-[--color-bg] text-[--color-font] flex flex-col overflow-hidden ${isGitProject(project) ? 'min-h-[420px]' : 'min-h-[220px]'}`}
+        className={`flex max-h-[90dvh] w-full max-w-3xl flex-col overflow-hidden rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] ${isGitProject(project) ? 'min-h-[420px]' : 'min-h-[220px]'}`}
       >
         <Dialog
-          aria-label='Create or update dialog'
-          className="outline-none flex-1 gap-4 grid [grid-template-rows:min-content_1fr_min-content] overflow-hidden"
+          aria-label="Create or update dialog"
+          className="grid flex-1 gap-4 overflow-hidden outline-none [grid-template-rows:min-content_1fr_min-content]"
         >
           {({ close }) => (
             <Form
-              validationBehavior='native'
-              className='contents'
+              validationBehavior="native"
+              className="contents"
               onSubmit={e => {
                 e.preventDefault();
 
@@ -133,10 +130,12 @@ export const NewWorkspaceModal = ({
                 }
               }}
             >
-              <div className='pt-10 px-10 flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Create a new {titleByScope[workspaceData.scope]}</Heading>
+              <div className="flex items-center justify-between gap-2 px-10 pt-10">
+                <Heading slot="title" className="text-2xl">
+                  Create a new {titleByScope[workspaceData.scope]}
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
@@ -144,8 +143,8 @@ export const NewWorkspaceModal = ({
               </div>
 
               {createNewWorkspaceFetcher.data?.error && (
-                <div className='px-10'>
-                  <div className="flex items-center px-2 py-1 gap-2 text-sm rounded-sm text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]">
+                <div className="px-10">
+                  <div className="flex items-center gap-2 rounded-sm bg-[rgba(var(--color-danger-rgb),0.5)] px-2 py-1 text-sm text-[--color-font-danger]">
                     <Icon icon="triangle-exclamation" />
                     <span>
                       Error:
@@ -155,7 +154,7 @@ export const NewWorkspaceModal = ({
                 </div>
               )}
 
-              <div className='flex flex-col justify-start gap-2 overflow-y-auto overflow-x-hidden px-10'>
+              <div className="flex flex-col justify-start gap-2 overflow-y-auto overflow-x-hidden px-10">
                 <TextField
                   autoFocus
                   name="name"
@@ -164,14 +163,12 @@ export const NewWorkspaceModal = ({
                   onChange={name => setWorkspaceData({ ...workspaceData, name })}
                   className="group relative flex flex-col gap-2"
                 >
-                  <Label className='text-sm text-[--hl]'>
-                    Name
-                  </Label>
+                  <Label className="text-sm text-[--hl]">Name</Label>
                   <Input
                     placeholder={`Enter a name for your ${titleByScope[workspaceData.scope]}...`}
-                    className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
+                    className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                   />
-                  <FieldError className='text-red-500 text-xs' />
+                  <FieldError className="text-xs text-red-500" />
                 </TextField>
                 {isGitProject(project) && gitRepoTreeFetcher.data && (
                   <>
@@ -187,29 +184,29 @@ export const NewWorkspaceModal = ({
                       }}
                       value={safeToUseInsomniaFileName(workspaceData.fileName || '')}
                       onChange={fileName => setWorkspaceData({ ...workspaceData, fileName })}
-                      className="group relative flex flex-col gap-2 overflow-hidden max-w-full"
+                      className="group relative flex max-w-full flex-col gap-2 overflow-hidden"
                     >
                       <Label className="group relative flex flex-col gap-2 overflow-hidden">
-                        <span className='text-sm text-[--hl]'>
-                          File name
-                        </span>
+                        <span className="text-sm text-[--hl]">File name</span>
 
-                        <div className="overflow-hidden grid [grid-template-columns:min-content_auto] [grid-template-areas:'input_extension'] focus:outline-none py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:ring-1 focus:ring-[--hl-md] transition-colors">
+                        <div className="grid w-full overflow-hidden rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors [grid-template-areas:'input_extension'] [grid-template-columns:min-content_auto] focus:outline-none focus:ring-1 focus:ring-[--hl-md]">
                           <Input
                             placeholder={workspaceData.name ? safeToUseInsomniaFileName(workspaceData.name) : 'name'}
-                            className="[grid-area:input] placeholder:italic outline-none focus:outline-none w-full min-w-[3ch]"
+                            className="w-full min-w-[3ch] outline-none [grid-area:input] placeholder:italic focus:outline-none"
                           />
-                          <span className='[grid-area:input] -z-10 opacity-0 truncate w-min'>{safeToUseInsomniaFileName(workspaceData.fileName || workspaceData.name || 'name')}</span>
-                          <span className='[grid-area:extension] text-[--hl]'>.yaml</span>
+                          <span className="-z-10 w-min truncate opacity-0 [grid-area:input]">
+                            {safeToUseInsomniaFileName(workspaceData.fileName || workspaceData.name || 'name')}
+                          </span>
+                          <span className="text-[--hl] [grid-area:extension]">.yaml</span>
                         </div>
                       </Label>
-                      <FieldError className='text-red-500 text-xs' />
+                      <FieldError className="text-xs text-red-500" />
                     </TextField>
                     <Label className="text-sm text-[--hl]">
                       Folder where the file will be saved in the repository:
                     </Label>
                     <Tree
-                      className="grid gap-0 max-h-52 overflow-auto rounded-sm border border-solid border-[--hl-sm]"
+                      className="grid max-h-52 gap-0 overflow-auto rounded-sm border border-solid border-[--hl-sm]"
                       defaultSelectedKeys={[gitRepoTreeFetcher.data.repositoryTree.id]}
                       disallowEmptySelection
                       defaultExpandedKeys={[gitRepoTreeFetcher.data.repositoryTree.id]}
@@ -225,116 +222,122 @@ export const NewWorkspaceModal = ({
                       {function renderItem(item) {
                         return (
                           <TreeItem
-                            className="group flex odd:bg-[--hl-xxs] flex-col pl-[--tree-item-level] aria-selected:bg-[--hl-lg] aria-disabled:text-[--hl] outline-none border border-solid border-transparent aria-selected:border-[--color-surprise] rounded-sm px-2 py-1 transition-colors duration-300"
+                            className="group flex flex-col rounded-sm border border-solid border-transparent px-2 py-1 pl-[--tree-item-level] outline-none transition-colors duration-300 odd:bg-[--hl-xxs] aria-disabled:text-[--hl] aria-selected:border-[--color-surprise] aria-selected:bg-[--hl-lg]"
                             style={{
                               // @ts-expect-error --tree-item-level is a custom property
                               '--tree-item-level': `${(item.type === 'root' ? 0 : item.id.split('/').length * 1) + 0.5}rem`,
-                              color: item.type === 'file' ? 'var(--hl)' : 'var(--color-font)',
+                              'color': item.type === 'file' ? 'var(--hl)' : 'var(--color-font)',
                             }}
                             isDisabled={item.type === 'file'}
                             textValue={item.name}
                           >
                             <TreeItemContent>
                               {({ isExpanded }) => (
-                                <div className='flex items-center gap-2 data-[disabled=true]:text-[--hl]'>
-                                  {'children' in item ? item.children.length ? <Button slot="chevron">
-                                    <Icon className='size-4' icon={isExpanded ? 'folder-open' : 'folder'} />
-                                  </Button> : <Icon icon={'folder-blank'} /> : <Icon icon={'file'} />}
+                                <div className="flex items-center gap-2 data-[disabled=true]:text-[--hl]">
+                                  {'children' in item ? (
+                                    item.children.length ? (
+                                      <Button slot="chevron">
+                                        <Icon className="size-4" icon={isExpanded ? 'folder-open' : 'folder'} />
+                                      </Button>
+                                    ) : (
+                                      <Icon icon={'folder-blank'} />
+                                    )
+                                  ) : (
+                                    <Icon icon={'file'} />
+                                  )}
                                   {item.name}
                                 </div>
                               )}
                             </TreeItemContent>
-                            {item.type !== 'file' && (
-                              <Collection items={item.children}>
-                                {renderItem}
-                              </Collection>
-                            )}
+                            {item.type !== 'file' && <Collection items={item.children}>{renderItem}</Collection>}
                           </TreeItem>
                         );
                       }}
                     </Tree>
                   </>
                 )}
-                {workspaceData.scope === 'mock-server' && (<>
-                  <RadioGroup
-                    name="mockServerType"
-                    defaultValue={workspaceData.mockServerType}
-                    onChange={serverType => {
-                      setWorkspaceData({ ...workspaceData, mockServerType: serverType as 'self-hosted' | 'cloud' });
-                    }}
-                    className="flex flex-col gap-2"
-                  >
-                    <Label className="text-sm text-[--hl]">
-                      Mock server type
-                    </Label>
-                    <div className="flex gap-2">
-                      <Radio
-                        value="cloud"
-                        isDisabled={isCloudProjectDisabled}
-                        className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
-                      >
-                        <div className='flex items-center gap-2'>
-                          <Icon icon="globe" />
-                          <Heading className="text-lg font-bold">Cloud Mock</Heading>
-                        </div>
-                        <p className='pt-2'>
-                          {isCloudProjectDisabled ? 'Only available for cloud projects' : 'Runs on Insomnia cloud, ideal for collaboration.'}
-                        </p>
-                      </Radio>
-                      <Radio
-                        value="self-hosted"
-                        isDisabled={isSelfHostedDisabled}
-                        className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
-                      >
-                        <div className="flex items-center gap-2">
-                          <Icon icon="server" />
-                          <Heading className="text-lg font-bold">Self-hosted Mock</Heading>
-                        </div>
-                        <p className="pt-2">
-                          Runs locally or on your infrastructure, ideal for private usage and lower latency.
-                        </p>
-                      </Radio>
-                    </div>
-                  </RadioGroup>
-                  <div className="flex items-center gap-2 text-sm">
-                    <Icon icon="info-circle" />
-                    <span>
-                      To learn more about self hosting <Link href="https://docs.insomnia.rest/insomnia/api-mocking" className='underline'>click here</Link>
-                    </span>
-                  </div>
-                  {!isSelfHostedDisabled && (
-                    <TextField
-                      name="mockServerUrl"
-                      value={workspaceData.mockServerUrl}
-                      onChange={url => setWorkspaceData({ ...workspaceData, mockServerUrl: url })}
-                      className={`group relative flex-1 flex flex-col gap-2 ${workspaceData.mockServerType === 'cloud' ? 'disabled' : ''}`}
+                {workspaceData.scope === 'mock-server' && (
+                  <>
+                    <RadioGroup
+                      name="mockServerType"
+                      defaultValue={workspaceData.mockServerType}
+                      onChange={serverType => {
+                        setWorkspaceData({ ...workspaceData, mockServerType: serverType as 'self-hosted' | 'cloud' });
+                      }}
+                      className="flex flex-col gap-2"
                     >
-                      <Label className='text-sm text-[--hl]'>
-                        Self-hosted mock server URL
-                      </Label>
-                      <Input
-                        disabled={workspaceData.mockServerType === 'cloud'}
-                        placeholder={workspaceData.mockServerType === 'cloud' ? '' : 'https://example.com'}
-                        className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
-                      />
-                    </TextField>
-                  )}
-                </>
+                      <Label className="text-sm text-[--hl]">Mock server type</Label>
+                      <div className="flex gap-2">
+                        <Radio
+                          value="cloud"
+                          isDisabled={isCloudProjectDisabled}
+                          className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
+                        >
+                          <div className="flex items-center gap-2">
+                            <Icon icon="globe" />
+                            <Heading className="text-lg font-bold">Cloud Mock</Heading>
+                          </div>
+                          <p className="pt-2">
+                            {isCloudProjectDisabled
+                              ? 'Only available for cloud projects'
+                              : 'Runs on Insomnia cloud, ideal for collaboration.'}
+                          </p>
+                        </Radio>
+                        <Radio
+                          value="self-hosted"
+                          isDisabled={isSelfHostedDisabled}
+                          className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
+                        >
+                          <div className="flex items-center gap-2">
+                            <Icon icon="server" />
+                            <Heading className="text-lg font-bold">Self-hosted Mock</Heading>
+                          </div>
+                          <p className="pt-2">
+                            Runs locally or on your infrastructure, ideal for private usage and lower latency.
+                          </p>
+                        </Radio>
+                      </div>
+                    </RadioGroup>
+                    <div className="flex items-center gap-2 text-sm">
+                      <Icon icon="info-circle" />
+                      <span>
+                        To learn more about self hosting{' '}
+                        <Link href="https://docs.insomnia.rest/insomnia/api-mocking" className="underline">
+                          click here
+                        </Link>
+                      </span>
+                    </div>
+                    {!isSelfHostedDisabled && (
+                      <TextField
+                        name="mockServerUrl"
+                        value={workspaceData.mockServerUrl}
+                        onChange={url => setWorkspaceData({ ...workspaceData, mockServerUrl: url })}
+                        className={`group relative flex flex-1 flex-col gap-2 ${workspaceData.mockServerType === 'cloud' ? 'disabled' : ''}`}
+                      >
+                        <Label className="text-sm text-[--hl]">Self-hosted mock server URL</Label>
+                        <Input
+                          disabled={workspaceData.mockServerType === 'cloud'}
+                          placeholder={workspaceData.mockServerType === 'cloud' ? '' : 'https://example.com'}
+                          className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
+                        />
+                      </TextField>
+                    )}
+                  </>
                 )}
               </div>
-              <div className="flex justify-end gap-2 items-center p-10">
-                <div className='flex items-center gap-2'>
+              <div className="flex items-center justify-end gap-2 p-10">
+                <div className="flex items-center gap-2">
                   <Button
                     onPress={close}
                     isDisabled={createNewWorkspaceFetcher.state !== 'idle'}
-                    className="hover:no-underline hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                    className="rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:bg-opacity-90 hover:no-underline"
                   >
                     Cancel
                   </Button>
                   <Button
-                    type='submit'
+                    type="submit"
                     isDisabled={createNewWorkspaceFetcher.state !== 'idle'}
-                    className="hover:no-underline w-[10ch] flex items-center justify-center gap-2 text-center bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                    className="flex w-[10ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-center text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
                   >
                     {createNewWorkspaceFetcher.state !== 'idle' && <Icon icon="spinner" className="animate-spin" />}
                     <span>Create</span>
diff --git a/packages/insomnia/src/ui/components/modals/nunjucks-modal.tsx b/packages/insomnia/src/ui/components/modals/nunjucks-modal.tsx
index be71ad4555..09fb36efc7 100644
--- a/packages/insomnia/src/ui/components/modals/nunjucks-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/nunjucks-modal.tsx
@@ -34,24 +34,28 @@ export const NunjucksModal = forwardRef<NunjucksModalHandle, ModalProps & Props>
   const [state, setState] = useState<State>({
     isTag: false,
     template: '',
-    onDone: () => { },
+    onDone: () => {},
     editorId: '',
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: ({ onDone, template, editorId }) => {
-      setState({
-        isTag: template.indexOf('{%') === 0,
-        template,
-        onDone,
-        editorId,
-      });
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: ({ onDone, template, editorId }) => {
+        setState({
+          isTag: template.indexOf('{%') === 0,
+          template,
+          onDone,
+          editorId,
+        });
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
   const handleTemplateChange = (template: string) => {
     setState(state => ({
@@ -65,7 +69,14 @@ export const NunjucksModal = forwardRef<NunjucksModalHandle, ModalProps & Props>
   const title = isTag ? 'Tag' : 'Variable';
   let editor: JSX.Element | null = null;
   if (isTag) {
-    editor = <TagEditor onChange={handleTemplateChange} defaultValue={template} workspace={workspace} editorId={state.editorId} />;
+    editor = (
+      <TagEditor
+        onChange={handleTemplateChange}
+        defaultValue={template}
+        workspace={workspace}
+        editorId={state.editorId}
+      />
+    );
   } else {
     editor = <VariableEditor onChange={handleTemplateChange} defaultValue={template} />;
   }
@@ -88,7 +99,9 @@ export const NunjucksModal = forwardRef<NunjucksModalHandle, ModalProps & Props>
             event.preventDefault();
             modalRef.current?.hide();
           }}
-        >{editor}</form>
+        >
+          {editor}
+        </form>
       </ModalBody>
       <ModalFooter>
         <button className="btn" onClick={() => modalRef.current?.hide()}>
diff --git a/packages/insomnia/src/ui/components/modals/paste-curl-modal.tsx b/packages/insomnia/src/ui/components/modals/paste-curl-modal.tsx
index ceb348aeb1..7544cc0b42 100644
--- a/packages/insomnia/src/ui/components/modals/paste-curl-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/paste-curl-modal.tsx
@@ -9,7 +9,11 @@ import { ModalFooter } from '../base/modal-footer';
 import { ModalHeader } from '../base/modal-header';
 import { CodeEditor } from '../codemirror/code-editor';
 
-export const PasteCurlModal = ({ onHide, onImport, defaultValue }: ModalProps & { onImport: (req: Partial<Request>) => void; defaultValue?: string }) => {
+export const PasteCurlModal = ({
+  onHide,
+  onImport,
+  defaultValue,
+}: ModalProps & { onImport: (req: Partial<Request>) => void; defaultValue?: string }) => {
   const modalRef = useRef<ModalHandle>(null);
   const [isValid, setIsValid] = useState<boolean>(true);
   const [req, setReq] = useState<any>({});
@@ -22,7 +26,6 @@ export const PasteCurlModal = ({ onHide, onImport, defaultValue }: ModalProps &
         const importedRequest = resources[0];
         setIsValid(true);
         setReq(importedRequest);
-
       } catch (error) {
         console.log('[importer] error', error);
         setIsValid(false);
@@ -32,7 +35,6 @@ export const PasteCurlModal = ({ onHide, onImport, defaultValue }: ModalProps &
       }
     }
     parseCurlToRequest();
-
   }, [defaultValue]);
 
   return (
@@ -43,7 +45,7 @@ export const PasteCurlModal = ({ onHide, onImport, defaultValue }: ModalProps &
           <CodeEditor
             id="paste-curl-content"
             placeholder="Paste curl request here"
-            className=" border-top"
+            className="border-top"
             mode="text"
             dynamicHeight
             defaultValue={defaultValue}
@@ -57,7 +59,6 @@ export const PasteCurlModal = ({ onHide, onImport, defaultValue }: ModalProps &
                 const importedRequest = resources[0];
                 setIsValid(true);
                 setReq(importedRequest);
-
               } catch (error) {
                 console.log('[importer] error', error);
                 setIsValid(false);
@@ -67,7 +68,7 @@ export const PasteCurlModal = ({ onHide, onImport, defaultValue }: ModalProps &
           />
         </ModalBody>
         <ModalFooter>
-          <div className="margin-left italic txt-sm truncate">
+          <div className="margin-left txt-sm truncate italic">
             {isValid ? `Detected ${req.method} request to ${req.url}` : 'Invalid input'}
           </div>
           <div>
diff --git a/packages/insomnia/src/ui/components/modals/project-modal.tsx b/packages/insomnia/src/ui/components/modals/project-modal.tsx
index 89b48b70c0..5230d36314 100644
--- a/packages/insomnia/src/ui/components/modals/project-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/project-modal.tsx
@@ -35,20 +35,25 @@ export const ProjectModal = ({
   const title = project ? 'Update project' : 'Create a new project';
 
   return (
-    <ModalOverlay isOpen={isOpen} onOpenChange={onOpenChange} isDismissable className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30">
-      <Modal
-        className="max-w-3xl w-full rounded-md border border-solid border-[--hl-sm] max-h-[90dvh] min-h-[420px] bg-[--color-bg] text-[--color-font] flex flex-col overflow-hidden"
-      >
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
+    >
+      <Modal className="flex max-h-[90dvh] min-h-[420px] w-full max-w-3xl flex-col overflow-hidden rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font]">
         <Dialog
-          aria-label='Create or update dialog'
-          className="outline-none flex-1 gap-4 grid [grid-template-rows:min-content_1fr_min-content] pt-10 px-10"
+          aria-label="Create or update dialog"
+          className="grid flex-1 gap-4 px-10 pt-10 outline-none [grid-template-rows:min-content_1fr_min-content]"
         >
           {({ close }) => (
             <>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>{title}</Heading>
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  {title}
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
diff --git a/packages/insomnia/src/ui/components/modals/prompt-modal.tsx b/packages/insomnia/src/ui/components/modals/prompt-modal.tsx
index b71e599897..287218db93 100644
--- a/packages/insomnia/src/ui/components/modals/prompt-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/prompt-modal.tsx
@@ -68,36 +68,32 @@ export const PromptModal = forwardRef<PromptModalHandle, ModalProps>((_, ref) =>
   const handleSubmit = async (event: React.SyntheticEvent<HTMLFormElement | HTMLButtonElement>) => {
     event.preventDefault();
     if (inputRef.current) {
-      const result = inputRef.current.type === 'checkbox' ? inputRef.current.checked.toString() : inputRef.current.value;
+      const result =
+        inputRef.current.type === 'checkbox' ? inputRef.current.checked.toString() : inputRef.current.value;
       if (result || inputRef.current?.type === 'text') {
         state.onComplete?.(state.upperCase ? result?.toUpperCase() : result);
       }
       modalRef.current?.hide();
     }
   };
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setState({
-        ...options,
-        loading: false,
-      });
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setState({
+          ...options,
+          loading: false,
+        });
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
-  const {
-    submitName,
-    title,
-    hint,
-    inputType,
-    placeholder,
-    label,
-    upperCase,
-    hints,
-  } = state;
+  const { submitName, title, hint, inputType, placeholder, label, upperCase, hints } = state;
   const input = (
     <input
       ref={inputRef}
@@ -122,8 +118,8 @@ export const PromptModal = forwardRef<PromptModalHandle, ModalProps>((_, ref) =>
   let sanitizedHints: ReactNode[] = [];
 
   if (Array.isArray(hints)) {
-    sanitizedHints = hints.slice(0, 15).map(hint =>
-    (<div key={hint} className="btn btn--outlined btn--super-super-compact margin-right-sm margin-top-sm inline-block">
+    sanitizedHints = hints.slice(0, 15).map(hint => (
+      <div key={hint} className="btn btn--outlined btn--super-super-compact margin-right-sm margin-top-sm inline-block">
         <button
           className="tall"
           onClick={() => {
@@ -149,7 +145,8 @@ export const PromptModal = forwardRef<PromptModalHandle, ModalProps>((_, ref) =>
         >
           <i className="fa fa-close faint" />
         </PromptButton>
-      </div>));
+      </div>
+    ));
   }
 
   let field = input;
@@ -169,10 +166,7 @@ export const PromptModal = forwardRef<PromptModalHandle, ModalProps>((_, ref) =>
     'form-control--outlined': inputType !== 'checkbox',
   });
   return (
-    <Modal
-      ref={modalRef}
-      onHide={state.onHide}
-    >
+    <Modal ref={modalRef} onHide={state.onHide}>
       <ModalHeader>{title}</ModalHeader>
       <ModalBody className="wide">
         <form onSubmit={handleSubmit} className="wide pad">
@@ -181,7 +175,7 @@ export const PromptModal = forwardRef<PromptModalHandle, ModalProps>((_, ref) =>
         </form>
       </ModalBody>
       <ModalFooter>
-        <div className="margin-left faint italic txt-sm">{hint ? `* ${hint}` : ''}</div>
+        <div className="margin-left faint txt-sm italic">{hint ? `* ${hint}` : ''}</div>
         <button className="btn" onClick={handleSubmit}>
           {submitName || 'Submit'}
         </button>
diff --git a/packages/insomnia/src/ui/components/modals/proto-files-modal.tsx b/packages/insomnia/src/ui/components/modals/proto-files-modal.tsx
index 4e98fddfeb..46d9d52dd0 100644
--- a/packages/insomnia/src/ui/components/modals/proto-files-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/proto-files-modal.tsx
@@ -23,7 +23,6 @@ const tryToSelectFilePath = async () => {
     const { filePath, canceled } = await selectFileOrFolder({ itemTypes: ['file'], extensions: ['proto'] });
     if (!canceled && filePath) {
       return filePath;
-
     }
   } catch (error) {
     showError({ error });
@@ -35,7 +34,6 @@ const tryToSelectFolderPath = async () => {
     const { filePath, canceled } = await selectFileOrFolder({ itemTypes: ['directory'], extensions: ['proto'] });
     if (!canceled && filePath) {
       return filePath;
-
     }
   } catch (error) {
     showError({ error });
@@ -62,10 +60,16 @@ const isProtofileValid = async (filePath: string) => {
   }
 };
 
-const traverseDirectory = (dir: ProtoDirectory, files: ProtoFile[], directories: ProtoDirectory[]): ExpandedProtoDirectory => ({
+const traverseDirectory = (
+  dir: ProtoDirectory,
+  files: ProtoFile[],
+  directories: ProtoDirectory[],
+): ExpandedProtoDirectory => ({
   dir,
   files: files.filter(pf => pf.parentId === dir._id),
-  subDirs: directories.filter(pd => pd.parentId === dir._id).map(subDir => traverseDirectory(subDir, files, directories)),
+  subDirs: directories
+    .filter(pd => pd.parentId === dir._id)
+    .map(subDir => traverseDirectory(subDir, files, directories)),
 });
 
 const getProtoDirectories = async (workspaceId: string) => {
@@ -223,10 +227,12 @@ export const ProtoFilesModal: FC<Props> = ({ defaultId, onHide, onSave }) => {
   const handleDeleteDirectory = (protoDirectory: ProtoDirectory) => {
     showAlert({
       title: `Delete ${protoDirectory.name}`,
-      message: (<span>
-        Really delete <strong>{protoDirectory.name}</strong> and all proto files contained within?
-        All requests that use these proto files will stop working.
-      </span>),
+      message: (
+        <span>
+          Really delete <strong>{protoDirectory.name}</strong> and all proto files contained within? All requests that
+          use these proto files will stop working.
+        </span>
+      ),
       addCancel: true,
       onConfirm: async () => {
         models.protoDirectory.remove(protoDirectory);
@@ -237,10 +243,11 @@ export const ProtoFilesModal: FC<Props> = ({ defaultId, onHide, onSave }) => {
   const handleDeleteFile = (protoFile: ProtoFile) => {
     showAlert({
       title: `Delete ${protoFile.name}`,
-      message: (<span>
-        Really delete <strong>{protoFile.name}</strong>? All requests that use this proto file will
-        stop working.
-      </span>),
+      message: (
+        <span>
+          Really delete <strong>{protoFile.name}</strong>? All requests that use this proto file will stop working.
+        </span>
+      ),
       addCancel: true,
       onConfirm: () => {
         models.protoFile.remove(protoFile);
@@ -255,7 +262,7 @@ export const ProtoFilesModal: FC<Props> = ({ defaultId, onHide, onSave }) => {
     if (!filePath) {
       return;
     }
-    if (!await isProtofileValid(filePath)) {
+    if (!(await isProtofileValid(filePath))) {
       return;
     }
     const contents = await fs.promises.readFile(filePath, 'utf-8');
@@ -281,10 +288,7 @@ export const ProtoFilesModal: FC<Props> = ({ defaultId, onHide, onSave }) => {
             >
               Add Directory
             </AsyncButton>
-            <AsyncButton
-              onClick={handleAddFile}
-              loadingNode={<i className="fa fa-spin fa-refresh" />}
-            >
+            <AsyncButton onClick={handleAddFile} loadingNode={<i className="fa fa-spin fa-refresh" />}>
               Add Proto File
             </AsyncButton>
           </span>
@@ -314,6 +318,6 @@ export const ProtoFilesModal: FC<Props> = ({ defaultId, onHide, onSave }) => {
           </button>
         </div>
       </ModalFooter>
-    </Modal >
+    </Modal>
   );
 };
diff --git a/packages/insomnia/src/ui/components/modals/request-group-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/request-group-settings-modal.tsx
index f2692fe9c9..beef347696 100644
--- a/packages/insomnia/src/ui/components/modals/request-group-settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/request-group-settings-modal.tsx
@@ -17,11 +17,18 @@ export interface RequestGroupSettingsModalOptions {
   requestGroup: RequestGroup;
 }
 
-export const RequestGroupSettingsModal = ({ requestGroup, onHide }: ModalProps & {
+export const RequestGroupSettingsModal = ({
+  requestGroup,
+  onHide,
+}: ModalProps & {
   requestGroup: RequestGroup;
 }) => {
   const modalRef = useRef<ModalHandle>(null);
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
   const workspacesFetcher = useFetcher<ListWorkspacesLoaderData>();
   useEffect(() => {
     const isIdleAndUninitialized = workspacesFetcher.state === 'idle' && !workspacesFetcher.data;
@@ -30,18 +37,21 @@ export const RequestGroupSettingsModal = ({ requestGroup, onHide }: ModalProps &
     }
   }, [organizationId, projectId, workspacesFetcher]);
   const projectLoaderData = workspacesFetcher?.data;
-  const workspacesForActiveProject = projectLoaderData?.files.map(w => w.workspace).filter(isNotNullOrUndefined).filter(w => w.scope !== 'mock-server') || [];
+  const workspacesForActiveProject =
+    projectLoaderData?.files
+      .map(w => w.workspace)
+      .filter(isNotNullOrUndefined)
+      .filter(w => w.scope !== 'mock-server') || [];
   const [workspaceToCopyTo, setWorkspaceToCopyTo] = useState('');
   const patchRequestGroup = useRequestGroupPatcher();
   const requestFetcher = useFetcher();
 
   const duplicateRequestGroup = (r: Partial<RequestGroup>) => {
-    requestFetcher.submit(JSON.stringify(r),
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/duplicate`,
-        method: 'post',
-        encType: 'application/json',
-      });
+    requestFetcher.submit(JSON.stringify(r), {
+      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/duplicate`,
+      method: 'post',
+      encType: 'application/json',
+    });
   };
   useEffect(() => {
     modalRef.current?.show();
@@ -69,72 +79,70 @@ export const RequestGroupSettingsModal = ({ requestGroup, onHide }: ModalProps &
     <OverlayContainer onClick={e => e.stopPropagation()}>
       <Modal ref={modalRef} onHide={onHide}>
         <ModalHeader>
-          Folder Settings{' '}
-          <span className="txt-sm selectable faint monospace">
-            {requestGroup?._id || ''}
-          </span>
+          Folder Settings <span className="txt-sm selectable faint monospace">{requestGroup?._id || ''}</span>
         </ModalHeader>
-        <ModalBody className="pad"><div>
-          <div className="form-control form-control--outlined">
-            <label>
-              Name
-              <input
-                type="text"
-                placeholder={requestGroup?.name || 'My Folder'}
-                defaultValue={requestGroup?.name}
-                onChange={async event => {
-                  invariant(requestGroup, 'No request group');
-                  patchRequestGroup(requestGroup._id, { name: event.target.value });
-                }}
-              />
-            </label>
-          </div>
-          <div className="form-row">
+        <ModalBody className="pad">
+          <div>
             <div className="form-control form-control--outlined">
               <label>
-                Move/Copy to Workspace
-                <HelpTooltip position="top" className="space-left">
-                  Copy or move the current folder to a new workspace. It will be
-                  placed at the root of the new workspace's folder structure.
-                </HelpTooltip>
-                <select
-                  value={workspaceToCopyTo}
-                  onChange={event => {
-                    setWorkspaceToCopyTo(event.currentTarget.value);
+                Name
+                <input
+                  type="text"
+                  placeholder={requestGroup?.name || 'My Folder'}
+                  defaultValue={requestGroup?.name}
+                  onChange={async event => {
+                    invariant(requestGroup, 'No request group');
+                    patchRequestGroup(requestGroup._id, { name: event.target.value });
                   }}
-                >
-                  <option value="">-- Select Workspace --</option>
-                  {workspacesForActiveProject
-                    .filter(w => workspaceId !== w._id)
-                    .map(w => (
-                      <option key={w._id} value={w._id}>
-                        {w.name}
-                      </option>
-                    ))
-                  }
-                </select>
+                />
               </label>
             </div>
-            <div className="form-control form-control--no-label width-auto">
-              <button
-                disabled={!workspaceToCopyTo}
-                className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
-                onClick={handleCopyToWorkspace}
-              >
-                Copy
-              </button>
-            </div>
-            <div className="form-control form-control--no-label width-auto">
-              <button
-                disabled={!workspaceToCopyTo}
-                className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
-                onClick={handleMoveToWorkspace}
-              >
-                Move
-              </button>
+            <div className="form-row">
+              <div className="form-control form-control--outlined">
+                <label>
+                  Move/Copy to Workspace
+                  <HelpTooltip position="top" className="space-left">
+                    Copy or move the current folder to a new workspace. It will be placed at the root of the new
+                    workspace's folder structure.
+                  </HelpTooltip>
+                  <select
+                    value={workspaceToCopyTo}
+                    onChange={event => {
+                      setWorkspaceToCopyTo(event.currentTarget.value);
+                    }}
+                  >
+                    <option value="">-- Select Workspace --</option>
+                    {workspacesForActiveProject
+                      .filter(w => workspaceId !== w._id)
+                      .map(w => (
+                        <option key={w._id} value={w._id}>
+                          {w.name}
+                        </option>
+                      ))}
+                  </select>
+                </label>
+              </div>
+              <div className="form-control form-control--no-label width-auto">
+                <button
+                  disabled={!workspaceToCopyTo}
+                  className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
+                  onClick={handleCopyToWorkspace}
+                >
+                  Copy
+                </button>
+              </div>
+              <div className="form-control form-control--no-label width-auto">
+                <button
+                  disabled={!workspaceToCopyTo}
+                  className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
+                  onClick={handleMoveToWorkspace}
+                >
+                  Move
+                </button>
+              </div>
             </div>
           </div>
-        </div></ModalBody>
+        </ModalBody>
       </Modal>
     </OverlayContainer>
   );
diff --git a/packages/insomnia/src/ui/components/modals/request-render-error-modal.tsx b/packages/insomnia/src/ui/components/modals/request-render-error-modal.tsx
index e14a31f08a..198a19a909 100644
--- a/packages/insomnia/src/ui/components/modals/request-render-error-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/request-render-error-modal.tsx
@@ -27,15 +27,19 @@ export const RequestRenderErrorModal = forwardRef<RequestRenderErrorModalHandle,
   });
   const { request, error } = state;
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setState(options);
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setState(options);
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
   const fullPath = `Request.${error?.path}`;
   const result = JSONPath({ json: request, path: `$.${error?.path}` });
@@ -45,32 +49,38 @@ export const RequestRenderErrorModal = forwardRef<RequestRenderErrorModalHandle,
   return (
     <Modal ref={modalRef}>
       <ModalHeader>Failed to Render Request</ModalHeader>
-      <ModalBody>{request && error ? (
-        <div className="pad">
-          <div className="notice warning">
-            <p>
-              Failed to render <strong>{fullPath}</strong> prior to sending
-            </p>
-            <div className="pad-top-sm">
-              <Link button href={docsTemplateTags} className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]">
-                Templating Documentation <i className="fa fa-external-link" />
-              </Link>
+      <ModalBody>
+        {request && error ? (
+          <div className="pad">
+            <div className="notice warning">
+              <p>
+                Failed to render <strong>{fullPath}</strong> prior to sending
+              </p>
+              <div className="pad-top-sm">
+                <Link
+                  button
+                  href={docsTemplateTags}
+                  className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
+                >
+                  Templating Documentation <i className="fa fa-external-link" />
+                </Link>
+              </div>
             </div>
+
+            <p>
+              <strong>Render error</strong>
+              <code className="selectable block">{error.message}</code>
+            </p>
+
+            <p>
+              <strong>Caused by the following field</strong>
+              <code className="block">
+                {locationLabel} {fullPath}
+              </code>
+            </p>
           </div>
-
-          <p>
-            <strong>Render error</strong>
-            <code className="block selectable">{error.message}</code>
-          </p>
-
-          <p>
-            <strong>Caused by the following field</strong>
-            <code className="block">
-              {locationLabel} {fullPath}
-            </code>
-          </p>
-        </div>
-      ) : null}</ModalBody>
+        ) : null}
+      </ModalBody>
     </Modal>
   );
 });
diff --git a/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx
index 5a8b513d43..87a150fd86 100644
--- a/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/request-settings-modal.tsx
@@ -24,7 +24,11 @@ export interface RequestSettingsModalOptions {
 
 export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSettingsModalOptions) => {
   const modalRef = useRef<ModalHandle>(null);
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
   const workspacesFetcher = useFetcher<ListWorkspacesLoaderData>();
   useEffect(() => {
     const isIdleAndUninitialized = workspacesFetcher.state === 'idle' && !workspacesFetcher.data;
@@ -33,7 +37,11 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
     }
   }, [organizationId, projectId, workspacesFetcher]);
   const projectLoaderData = workspacesFetcher?.data;
-  const workspacesForActiveProject = projectLoaderData?.files.map(w => w.workspace).filter(isNotNullOrUndefined).filter(w => w.scope !== 'mock-server') || [];
+  const workspacesForActiveProject =
+    projectLoaderData?.files
+      .map(w => w.workspace)
+      .filter(isNotNullOrUndefined)
+      .filter(w => w.scope !== 'mock-server') || [];
   const [workspaceToCopyTo, setWorkspaceToCopyTo] = useState('');
   useEffect(() => {
     modalRef.current?.show();
@@ -43,12 +51,11 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
   const patchRequest = useRequestPatcher();
   const navigate = useNavigate();
   const duplicateRequest = (r: Partial<Request>) => {
-    requestFetcher.submit(JSON.stringify(r),
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${request._id}/duplicate`,
-        method: 'post',
-        encType: 'application/json',
-      });
+    requestFetcher.submit(JSON.stringify(r), {
+      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${request._id}/duplicate`,
+      method: 'post',
+      encType: 'application/json',
+    });
   };
   async function handleMoveToWorkspace() {
     invariant(workspaceToCopyTo, 'Workspace ID is required');
@@ -81,15 +88,13 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
     <OverlayContainer>
       <Modal ref={modalRef} onHide={onHide}>
         <ModalHeader>
-          Request Settings{' '}
-          <span className="txt-sm selectable faint monospace">{request ? request._id : ''}</span>
+          Request Settings <span className="txt-sm selectable faint monospace">{request ? request._id : ''}</span>
         </ModalHeader>
         <ModalBody className="pad">
           <div>
             <div className="form-control form-control--outlined">
               <label>
-                Name{' '}
-                <span className="txt-sm faint italic">(also rename by double-clicking in sidebar)</span>
+                Name <span className="txt-sm faint italic">(also rename by double-clicking in sidebar)</span>
                 <input
                   type="text"
                   placeholder={request?.url || 'My Request'}
@@ -146,8 +151,8 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                     <label>
                       Move/Copy to Workspace
                       <HelpTooltip position="top" className="space-left">
-                        Copy or move the current request to a new workspace. It will be placed at the root of
-                        the new workspace's folder structure.
+                        Copy or move the current request to a new workspace. It will be placed at the root of the new
+                        workspace's folder structure.
                       </HelpTooltip>
                       <select
                         value={workspaceToCopyTo}
@@ -173,7 +178,7 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                   <div className="form-control form-control--no-label width-auto">
                     <button
                       disabled={!workspaceToCopyTo}
-                      className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
+                      className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
                       onClick={handleCopyToWorkspace}
                     >
                       Copy
@@ -182,14 +187,15 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                   <div className="form-control form-control--no-label width-auto">
                     <button
                       disabled={!workspaceToCopyTo}
-                      className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
+                      className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
                       onClick={handleMoveToWorkspace}
                     >
                       Move
                     </button>
                   </div>
                 </div>
-              </>)}
+              </>
+            )}
             {request && isGrpcRequest(request) && (
               <>
                 <div className="form-control form-control--thin pad-top-sm">
@@ -202,13 +208,16 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                       type="checkbox"
                       name="reflectionApi"
                       checked={request.reflectionApi.enabled}
-                      onChange={event => patchRequest(request._id, {
-                        reflectionApi: {
-                          ...request.reflectionApi,
-                          enabled: event.currentTarget.checked,
-                        },
-                      })}
-                    />̵
+                      onChange={event =>
+                        patchRequest(request._id, {
+                          reflectionApi: {
+                            ...request.reflectionApi,
+                            enabled: event.currentTarget.checked,
+                          },
+                        })
+                      }
+                    />
+                    ̵
                   </label>
                 </div>
                 <div className="form-row pad-top-sm">
@@ -264,7 +273,7 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                     </>
                   )}
                 </div>
-                <p className="faint italic pad-top">
+                <p className="faint pad-top italic">
                   Are there any gRPC settings you expect to see? Create a{' '}
                   <a href={'https://github.com/Kong/insomnia/issues/new/choose'}>feature request</a>!
                 </p>
@@ -306,8 +315,8 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                           onChange={toggleCheckBox}
                         />
                         <HelpTooltip position="top" className="space-left">
-                          Automatically encode special characters at send time (does not apply to query
-                          parameters editor)
+                          Automatically encode special characters at send time (does not apply to query parameters
+                          editor)
                         </HelpTooltip>
                       </label>
                     </div>
@@ -329,9 +338,8 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                       <label>
                         Rebuild path dot sequences
                         <HelpTooltip position="top" className="space-left">
-                          This instructs libcurl to squash sequences of "/../" or "/./" that may exist in the
-                          URL's path part and that is supposed to be removed according to RFC 3986 section
-                          5.2.4
+                          This instructs libcurl to squash sequences of "/../" or "/./" that may exist in the URL's path
+                          part and that is supposed to be removed according to RFC 3986 section 5.2.4
                         </HelpTooltip>
                         <input
                           type="checkbox"
@@ -367,8 +375,8 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                     <label>
                       Move/Copy to Workspace
                       <HelpTooltip position="top" className="space-left">
-                        Copy or move the current request to a new workspace. It will be placed at the root of
-                        the new workspace's folder structure.
+                        Copy or move the current request to a new workspace. It will be placed at the root of the new
+                        workspace's folder structure.
                       </HelpTooltip>
                       <select
                         value={workspaceToCopyTo}
@@ -394,7 +402,7 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                   <div className="form-control form-control--no-label width-auto">
                     <button
                       disabled={!workspaceToCopyTo}
-                      className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
+                      className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
                       onClick={handleCopyToWorkspace}
                     >
                       Copy
@@ -403,15 +411,15 @@ export const RequestSettingsModal = ({ request, onHide }: ModalProps & RequestSe
                   <div className="form-control form-control--no-label width-auto">
                     <button
                       disabled={!workspaceToCopyTo}
-                      className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]"
+                      className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
                       onClick={handleMoveToWorkspace}
                     >
                       Move
                     </button>
                   </div>
                 </div>
-              </>)
-            }
+              </>
+            )}
           </div>
         </ModalBody>
       </Modal>
diff --git a/packages/insomnia/src/ui/components/modals/response-debug-modal.tsx b/packages/insomnia/src/ui/components/modals/response-debug-modal.tsx
index 8844746fa3..22910a3596 100644
--- a/packages/insomnia/src/ui/components/modals/response-debug-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/response-debug-modal.tsx
@@ -30,28 +30,32 @@ export const ResponseDebugModal = forwardRef<ResponseDebugModalHandle, ModalProp
     timeline: [],
     title: '',
   });
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: async options => {
-      let response = options.response;
-      if (!response) {
-        response = await models.response.getById(options.responseId || 'n/a');
-      }
-      if (!response) {
-        console.error('No response found');
-        return;
-      }
-      const timeline = await models.response.getTimeline(response, options.showBody);
-      setState({
-        responseId: response._id,
-        timeline,
-        title: options.title || null,
-      });
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: async options => {
+        let response = options.response;
+        if (!response) {
+          response = await models.response.getById(options.responseId || 'n/a');
+        }
+        if (!response) {
+          console.error('No response found');
+          return;
+        }
+        const timeline = await models.response.getTimeline(response, options.showBody);
+        setState({
+          responseId: response._id,
+          timeline,
+          title: options.title || null,
+        });
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
   const { responseId, timeline, title } = state;
   return (
     <Modal ref={modalRef} tall>
@@ -63,11 +67,8 @@ export const ResponseDebugModal = forwardRef<ResponseDebugModalHandle, ModalProp
           }}
           className="tall"
         >
-          {(responseId && timeline) ? (
-            <ResponseTimelineViewer
-              key={responseId}
-              timeline={timeline}
-            />
+          {responseId && timeline ? (
+            <ResponseTimelineViewer key={responseId} timeline={timeline} />
           ) : (
             <div>No response found</div>
           )}
diff --git a/packages/insomnia/src/ui/components/modals/select-modal.tsx b/packages/insomnia/src/ui/components/modals/select-modal.tsx
index 9164bb243b..8336579508 100644
--- a/packages/insomnia/src/ui/components/modals/select-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/select-modal.tsx
@@ -30,15 +30,19 @@ export const SelectModal = forwardRef<SelectModalHandle, ModalProps>((_, ref) =>
     value: null,
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setState(options);
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setState(options);
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
   const { message, title, options, value, onDone } = state;
 
   return (
@@ -47,7 +51,10 @@ export const SelectModal = forwardRef<SelectModalHandle, ModalProps>((_, ref) =>
       <ModalBody className="wide pad">
         <p>{message}</p>
         <div className="form-control form-control--outlined">
-          <select onChange={event => setState(state => ({ ...state, value: event.target.value }))} value={value ?? undefined}>
+          <select
+            onChange={event => setState(state => ({ ...state, value: event.target.value }))}
+            value={value ?? undefined}
+          >
             {options.map(({ name, value }) => (
               <option key={value} value={value}>
                 {name}
diff --git a/packages/insomnia/src/ui/components/modals/settings-modal.tsx b/packages/insomnia/src/ui/components/modals/settings-modal.tsx
index 9c2fc1f536..378b95548c 100644
--- a/packages/insomnia/src/ui/components/modals/settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/settings-modal.tsx
@@ -33,23 +33,27 @@ export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props,
   const { userSession, settings } = useRootLoaderData();
   const modalRef = useRef<ModalHandle>(null);
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setDefaultTabKey(options?.tab || 'general');
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setDefaultTabKey(options?.tab || 'general');
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
   return (
-    <Modal className='!z-10' ref={modalRef} tall {...props}>
+    <Modal className="!z-10" ref={modalRef} tall {...props}>
       <ModalHeader>
         {getProductName()} Preferences
         <span className="faint txt-sm">
           &nbsp;&nbsp;–&nbsp; v{getAppVersion()}
-          {(userSession.id && userSession.email) ? ` – ${userSession.email}` : null}
+          {userSession.id && userSession.email ? ` – ${userSession.email}` : null}
         </span>
       </ModalHeader>
       <ModalBody noScroll>
@@ -58,58 +62,61 @@ export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props,
           onSelectionChange={key => {
             setDefaultTabKey(key.toString());
           }}
-          aria-label='Settings'
-          className="flex-1 w-full h-full flex flex-col"
+          aria-label="Settings"
+          className="flex h-full w-full flex-1 flex-col"
         >
-          <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+          <TabList
+            className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+            aria-label="Request pane tabs"
+          >
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='general'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="general"
             >
               General
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='proxy'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="proxy"
             >
               Proxy
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='data'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="data"
             >
               Data
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='themes'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="themes"
             >
               Themes
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='keyboard'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="keyboard"
             >
               Keyboard
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='plugins'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="plugins"
             >
               Plugins
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='ai'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="ai"
             >
               AI
             </Tab>
           </TabList>
-          <TabPanel className='w-full h-full overflow-y-auto' id='general'>
+          <TabPanel className="h-full w-full overflow-y-auto" id="general">
             <General />
           </TabPanel>
-          <TabPanel className='w-full h-full overflow-y-auto p-4' id='proxy'>
-            <h2 className='font-bold pt-2 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Network Proxy</h2>
+          <TabPanel className="h-full w-full overflow-y-auto p-4" id="proxy">
+            <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-2 text-lg font-bold">Network Proxy</h2>
 
             <BooleanSetting
               label="Enable proxy"
@@ -119,15 +126,15 @@ export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props,
 
             <div className="form-row pad-top-sm">
               <MaskedSetting
-                label='Proxy for HTTP'
-                setting='httpProxy'
+                label="Proxy for HTTP"
+                setting="httpProxy"
                 help="Enter a HTTP or SOCKS4/5 proxy starting with appropriate prefix from the following (http://, socks4://, socks5://)"
                 placeholder="localhost:8005"
                 disabled={!settings.proxyEnabled}
               />
               <MaskedSetting
-                label='Proxy for HTTPS'
-                setting='httpsProxy'
+                label="Proxy for HTTPS"
+                setting="httpsProxy"
                 help="Enter a HTTPS or SOCKS4/5 proxy starting with appropriate prefix from the following (https://, socks4://, socks5://)"
                 placeholder="localhost:8005"
                 disabled={!settings.proxyEnabled}
@@ -141,23 +148,22 @@ export const SettingsModal = forwardRef<SettingsModalHandle, ModalProps>((props,
               />
             </div>
           </TabPanel>
-          <TabPanel className='w-full h-full overflow-y-auto p-4' id='data'>
+          <TabPanel className="h-full w-full overflow-y-auto p-4" id="data">
             <ImportExport hideSettingsModal={() => modalRef.current?.hide()} />
           </TabPanel>
-          <TabPanel className='w-full h-full overflow-y-auto p-4' id='themes'>
+          <TabPanel className="h-full w-full overflow-y-auto p-4" id="themes">
             <ThemePanel />
           </TabPanel>
-          <TabPanel className='w-full h-full overflow-y-auto p-4' id='keyboard'>
+          <TabPanel className="h-full w-full overflow-y-auto p-4" id="keyboard">
             <Shortcuts />
           </TabPanel>
-          <TabPanel className='w-full h-full overflow-y-auto p-4' id='plugins'>
+          <TabPanel className="h-full w-full overflow-y-auto p-4" id="plugins">
             <Plugins />
           </TabPanel>
-          <TabPanel className='w-full h-full overflow-y-auto p-4' id='ai'>
+          <TabPanel className="h-full w-full overflow-y-auto p-4" id="ai">
             <AI />
           </TabPanel>
         </Tabs>
-
       </ModalBody>
     </Modal>
   );
diff --git a/packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx
index 266d37ae24..1f0dd665dd 100644
--- a/packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/sync-branches-modal.tsx
@@ -1,5 +1,16 @@
 import React, { useEffect } from 'react';
-import { Button, Dialog, GridList, GridListItem, Heading, Input, Label, Modal, ModalOverlay, TextField } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  GridList,
+  GridListItem,
+  Heading,
+  Input,
+  Label,
+  Modal,
+  ModalOverlay,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import { PromptButton } from '../base/prompt-button';
@@ -24,8 +35,14 @@ const LocalBranchItem = ({
   const deleteBranchFetcher = useFetcher();
 
   useEffect(() => {
-    if (checkoutBranchFetcher.data && 'error' in checkoutBranchFetcher.data && checkoutBranchFetcher.data.error && checkoutBranchFetcher.state === 'idle') {
-      const error: string = checkoutBranchFetcher.data.error || 'An unexpected error occurred while checking out the branch.';
+    if (
+      checkoutBranchFetcher.data &&
+      'error' in checkoutBranchFetcher.data &&
+      checkoutBranchFetcher.data.error &&
+      checkoutBranchFetcher.state === 'idle'
+    ) {
+      const error: string =
+        checkoutBranchFetcher.data.error || 'An unexpected error occurred while checking out the branch.';
       showAlert({
         title: 'Error while checking out branch.',
         message: error,
@@ -34,7 +51,12 @@ const LocalBranchItem = ({
   }, [checkoutBranchFetcher.data, checkoutBranchFetcher.state]);
 
   useEffect(() => {
-    if (mergeBranchFetcher.data && 'error' in mergeBranchFetcher.data && mergeBranchFetcher.data.error && mergeBranchFetcher.state === 'idle') {
+    if (
+      mergeBranchFetcher.data &&
+      'error' in mergeBranchFetcher.data &&
+      mergeBranchFetcher.data.error &&
+      mergeBranchFetcher.state === 'idle'
+    ) {
       const error: string = mergeBranchFetcher.data.error || 'An unexpected error occurred while merging the branches.';
       showAlert({
         title: 'Error while merging branches.',
@@ -44,7 +66,12 @@ const LocalBranchItem = ({
   }, [mergeBranchFetcher.data, mergeBranchFetcher.state]);
 
   useEffect(() => {
-    if (deleteBranchFetcher.data && 'error' in deleteBranchFetcher.data && deleteBranchFetcher.data.error && deleteBranchFetcher.state === 'idle') {
+    if (
+      deleteBranchFetcher.data &&
+      'error' in deleteBranchFetcher.data &&
+      deleteBranchFetcher.data.error &&
+      deleteBranchFetcher.state === 'idle'
+    ) {
       const error: string = deleteBranchFetcher.data.error || 'An unexpected error occurred while deleting the branch.';
       showAlert({
         title: 'Error while deleting branch',
@@ -54,58 +81,77 @@ const LocalBranchItem = ({
   }, [deleteBranchFetcher.data, deleteBranchFetcher.state]);
 
   return (
-    <div className="flex items-center w-full">
-      <span className='flex-1 truncate'>{branch}</span>
-      <div className='flex items-center gap-2'>
+    <div className="flex w-full items-center">
+      <span className="flex-1 truncate">{branch}</span>
+      <div className="flex items-center gap-2">
         {branch !== 'master' && (
           <PromptButton
-            confirmMessage='Confirm'
-            className="px-4 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            confirmMessage="Confirm"
+            className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             doneMessage="Deleted"
             disabled={isCurrent || branch === 'master'}
-            onClick={() => deleteBranchFetcher.submit(
+            onClick={() =>
+              deleteBranchFetcher.submit(
+                {
+                  branch,
+                },
+                {
+                  method: 'POST',
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/delete`,
+                },
+              )
+            }
+          >
+            <Icon
+              icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'}
+              className={`w-5 text-[--color-danger] ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+            />
+            Delete
+          </PromptButton>
+        )}
+        <Button
+          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          isDisabled={isCurrent}
+          onPress={() =>
+            checkoutBranchFetcher.submit(
               {
                 branch,
               },
               {
                 method: 'POST',
-                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/delete`,
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/checkout`,
               },
-            )}
-          >
-            <Icon icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'} className={`text-[--color-danger] w-5 ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
-            Delete
-          </PromptButton>
-        )}
-        <Button
-          className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-          isDisabled={isCurrent}
-          onPress={() => checkoutBranchFetcher.submit({
-            branch,
-          }, {
-            method: 'POST',
-            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/checkout`,
-          })}
+            )
+          }
         >
-          <Icon icon={checkoutBranchFetcher.state !== 'idle' ? 'spinner' : 'turn-up'} className={`w-5 ${checkoutBranchFetcher.state !== 'idle' ? 'animate-spin' : 'rotate-90'}`} />
+          <Icon
+            icon={checkoutBranchFetcher.state !== 'idle' ? 'spinner' : 'turn-up'}
+            className={`w-5 ${checkoutBranchFetcher.state !== 'idle' ? 'animate-spin' : 'rotate-90'}`}
+          />
           Checkout
         </Button>
         <PromptButton
-          className="px-4 py-1 min-w-[12ch] font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           doneMessage="Merged"
-          confirmMessage='Confirm'
+          confirmMessage="Confirm"
           disabled={isCurrent}
           onClick={() => {
             // file://./../../routes/remote-collections.tsx#mergeBranchAction
-            mergeBranchFetcher.submit({
-              branch,
-            }, {
-              method: 'POST',
-              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/merge`,
-            });
+            mergeBranchFetcher.submit(
+              {
+                branch,
+              },
+              {
+                method: 'POST',
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/merge`,
+              },
+            );
           }}
         >
-          <Icon icon={mergeBranchFetcher.state !== 'idle' ? 'spinner' : 'code-merge'} className={`w-5 ${mergeBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+          <Icon
+            icon={mergeBranchFetcher.state !== 'idle' ? 'spinner' : 'code-merge'}
+            className={`w-5 ${mergeBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+          />
           Merge
         </PromptButton>
       </div>
@@ -130,7 +176,12 @@ const RemoteBranchItem = ({
   const pullBranchFetcher = useFetcher();
 
   useEffect(() => {
-    if (pullBranchFetcher.data && 'error' in pullBranchFetcher.data && pullBranchFetcher.data.error && pullBranchFetcher.state === 'idle') {
+    if (
+      pullBranchFetcher.data &&
+      'error' in pullBranchFetcher.data &&
+      pullBranchFetcher.data.error &&
+      pullBranchFetcher.state === 'idle'
+    ) {
       const error: string = pullBranchFetcher.data.error || 'An unexpected error occurred while pulling the branch.';
       showAlert({
         title: 'Error while pulling branch.',
@@ -140,7 +191,12 @@ const RemoteBranchItem = ({
   }, [pullBranchFetcher.data, pullBranchFetcher.state]);
 
   useEffect(() => {
-    if (deleteBranchFetcher.data && 'error' in deleteBranchFetcher.data && deleteBranchFetcher.data.error && deleteBranchFetcher.state === 'idle') {
+    if (
+      deleteBranchFetcher.data &&
+      'error' in deleteBranchFetcher.data &&
+      deleteBranchFetcher.data.error &&
+      deleteBranchFetcher.state === 'idle'
+    ) {
       const error: string = deleteBranchFetcher.data.error || 'An unexpected error occurred while deleting the branch.';
       showAlert({
         title: 'Error while deleting branch.',
@@ -150,39 +206,52 @@ const RemoteBranchItem = ({
   }, [deleteBranchFetcher.data, deleteBranchFetcher.state]);
 
   return (
-    <div className="flex items-center w-full">
-      <span className='flex-1 truncate'>{branch}</span>
-      <div className='flex items-center gap-2'>
+    <div className="flex w-full items-center">
+      <span className="flex-1 truncate">{branch}</span>
+      <div className="flex items-center gap-2">
         {branch !== 'master' && (
           <PromptButton
-            confirmMessage='Confirm'
-            className="px-4 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            confirmMessage="Confirm"
+            className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             doneMessage="Deleted"
             disabled={isCurrent || branch === 'master'}
-            onClick={() => deleteBranchFetcher.submit(
+            onClick={() =>
+              deleteBranchFetcher.submit(
+                {
+                  branch,
+                },
+                {
+                  method: 'POST',
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/delete`,
+                },
+              )
+            }
+          >
+            <Icon
+              icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'}
+              className={`w-5 text-[--color-danger] ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+            />
+            Delete
+          </PromptButton>
+        )}
+        <Button
+          className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() =>
+            pullBranchFetcher.submit(
               {
                 branch,
               },
               {
                 method: 'POST',
-                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/delete`,
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/fetch`,
               },
-            )}
-          >
-            <Icon icon={deleteBranchFetcher.state !== 'idle' ? 'spinner' : 'trash'} className={`text-[--color-danger] w-5 ${deleteBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
-            Delete
-          </PromptButton>
-        )}
-        <Button
-          className="px-4 py-1 min-w-[12ch] font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-          onPress={() => pullBranchFetcher.submit({
-            branch,
-          }, {
-            method: 'POST',
-            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/fetch`,
-          })}
+            )
+          }
         >
-          <Icon icon={pullBranchFetcher.state !== 'idle' ? 'spinner' : 'cloud-arrow-down'} className={`w-5 ${pullBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} />
+          <Icon
+            icon={pullBranchFetcher.state !== 'idle' ? 'spinner' : 'cloud-arrow-down'}
+            className={`w-5 ${pullBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+          />
           Fetch
         </Button>
       </div>
@@ -212,8 +281,7 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
     } else if (branchB === 'master') {
       return 1;
     }
-      return branchA.localeCompare(branchB);
-
+    return branchA.localeCompare(branchB);
   }
 
   return (
@@ -223,23 +291,23 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Branches</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Branches
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
@@ -247,83 +315,101 @@ export const SyncBranchesModal = ({ onClose, branches, remoteBranches, currentBr
               </div>
               <createBranchFetcher.Form
                 action={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/create`}
-                method='POST'
-                className='flex flex-col gap-2 flex-shrink-0'
+                method="POST"
+                className="flex flex-shrink-0 flex-col gap-2"
               >
                 <TextField className="flex flex-col gap-2">
-                  <Label className='col-span-4'>
-                    New branch name:
-                  </Label>
-                  <div className='flex items-center gap-2'>
+                  <Label className="col-span-4">New branch name:</Label>
+                  <div className="flex items-center gap-2">
                     <Input
                       required
-                      className='py-1 h-8 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors flex-1 placeholder:italic placeholder:opacity-60 col-span-3'
+                      className="col-span-3 h-8 w-full flex-1 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic placeholder:opacity-60 focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                       type="text"
                       name="branchName"
                       placeholder="Branch name"
                     />
-                    <Button className="px-4 h-8 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" isDisabled={createBranchFetcher.state !== 'idle'} type="submit">
-                      <Icon className={`w-5 ${createBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`} icon={createBranchFetcher.state !== 'idle' ? 'spinner' : 'plus'} /> Create
+                    <Button
+                      className="flex h-8 min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                      isDisabled={createBranchFetcher.state !== 'idle'}
+                      type="submit"
+                    >
+                      <Icon
+                        className={`w-5 ${createBranchFetcher.state !== 'idle' ? 'animate-spin' : ''}`}
+                        icon={createBranchFetcher.state !== 'idle' ? 'spinner' : 'plus'}
+                      />{' '}
+                      Create
                     </Button>
                   </div>
                 </TextField>
               </createBranchFetcher.Form>
 
               {createBranchFetcher.data?.error && (
-                <div className='flex items-center gap-2 flex-shrink-0'>
-                  <Icon icon='triangle-exclamation' className='w-5 text-[--color-danger]' />
-                  <span className='text-[--color-danger] text-sm'>{createBranchFetcher.data.error}</span>
+                <div className="flex flex-shrink-0 items-center gap-2">
+                  <Icon icon="triangle-exclamation" className="w-5 text-[--color-danger]" />
+                  <span className="text-sm text-[--color-danger]">{createBranchFetcher.data.error}</span>
                 </div>
               )}
 
-              <div className='flex-1 max-h-96 overflow-hidden flex flex-col select-none border border-solid rounded border-[--hl-sm] divide-y divide-solid divide-[--hl-sm]'>
-                <Heading className='font-semibold uppercase text-[--hl] text-sm p-2'>Local Branches</Heading>
+              <div className="flex max-h-96 flex-1 select-none flex-col divide-y divide-solid divide-[--hl-sm] overflow-hidden rounded border border-solid border-[--hl-sm]">
+                <Heading className="p-2 text-sm font-semibold uppercase text-[--hl]">Local Branches</Heading>
                 <GridList
-                  aria-label='Branches list'
-                  selectionMode='none'
+                  aria-label="Branches list"
+                  selectionMode="none"
                   items={branches.sort(sortBranches).map(branch => ({
                     id: branch,
                     key: branch,
                     name: branch,
                     isCurrent: branch === currentBranch,
                   }))}
-                  className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
+                  className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-sm] overflow-y-auto focus:outline-none data-[empty]:py-0"
                 >
                   {item => (
                     <GridListItem
                       id={item.id}
                       key={item.key}
                       textValue={item.name}
-                      className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
+                      className="w-full p-2 transition-colors focus:bg-[--hl-sm] focus:outline-none"
                     >
-                      <LocalBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
+                      <LocalBranchItem
+                        branch={item.name}
+                        isCurrent={item.isCurrent}
+                        organizationId={organizationId}
+                        projectId={projectId}
+                        workspaceId={workspaceId}
+                      />
                     </GridListItem>
                   )}
                 </GridList>
               </div>
 
               {remoteBranches.length > 0 && (
-                <div className='flex-1 max-h-96 overflow-hidden flex flex-col select-none border border-solid rounded border-[--hl-sm] divide-y divide-solid divide-[--hl-sm]'>
-                  <Heading className='font-semibold uppercase text-[--hl] text-sm p-2'>Remote Branches</Heading>
+                <div className="flex max-h-96 flex-1 select-none flex-col divide-y divide-solid divide-[--hl-sm] overflow-hidden rounded border border-solid border-[--hl-sm]">
+                  <Heading className="p-2 text-sm font-semibold uppercase text-[--hl]">Remote Branches</Heading>
                   <GridList
-                    aria-label='Remote Branches list'
-                    selectionMode='none'
+                    aria-label="Remote Branches list"
+                    selectionMode="none"
                     items={remoteBranches.sort(sortBranches).map(branch => ({
                       id: branch,
                       key: branch,
                       name: branch,
                       isCurrent: branch === currentBranch,
                     }))}
-                    className="divide-y divide-solid divide-[--hl-sm] flex flex-col focus:outline-none overflow-y-auto flex-1 data-[empty]:py-0"
+                    className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-sm] overflow-y-auto focus:outline-none data-[empty]:py-0"
                   >
                     {item => (
                       <GridListItem
                         id={item.id}
                         key={item.key}
                         textValue={item.name}
-                        className="p-2 w-full focus:outline-none focus:bg-[--hl-sm] transition-colors"
+                        className="w-full p-2 transition-colors focus:bg-[--hl-sm] focus:outline-none"
                       >
-                        <RemoteBranchItem branch={item.name} isCurrent={item.isCurrent} organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
+                        <RemoteBranchItem
+                          branch={item.name}
+                          isCurrent={item.isCurrent}
+                          organizationId={organizationId}
+                          projectId={projectId}
+                          workspaceId={workspaceId}
+                        />
                       </GridListItem>
                     )}
                   </GridList>
diff --git a/packages/insomnia/src/ui/components/modals/sync-delete-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-delete-modal.tsx
index d560350dad..bc605bfe07 100644
--- a/packages/insomnia/src/ui/components/modals/sync-delete-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/sync-delete-modal.tsx
@@ -25,9 +25,7 @@ export const SyncDeleteModal = ({ vcs, onHide }: Props) => {
     error: '',
     workspaceName: '',
   });
-  const {
-    activeWorkspace,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeWorkspace } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
 
   useEffect(() => {
     modalRef.current?.show();
@@ -59,10 +57,13 @@ export const SyncDeleteModal = ({ vcs, onHide }: Props) => {
         <ModalBody className="wide pad-left pad-right text-center" noScroll>
           {error && <p className="notice error margin-bottom-sm no-margin-top">{error}</p>}
           <p className="selectable">
-            This will permanently delete the {<strong style={{ whiteSpace: 'pre-wrap' }}>{activeWorkspace?.name}</strong>}{' '}
+            This will permanently delete the{' '}
+            {<strong style={{ whiteSpace: 'pre-wrap' }}>{activeWorkspace?.name}</strong>}{' '}
             {strings.collection.singular.toLowerCase()} remotely.
           </p>
-          <p className="selectable">Please type {<strong style={{ whiteSpace: 'pre-wrap' }}>{activeWorkspace?.name}</strong>} to confirm.</p>
+          <p className="selectable">
+            Please type {<strong style={{ whiteSpace: 'pre-wrap' }}>{activeWorkspace?.name}</strong>} to confirm.
+          </p>
           <form onSubmit={onSubmit}>
             <div className="form-control form-control--outlined">
               <input
diff --git a/packages/insomnia/src/ui/components/modals/sync-history-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-history-modal.tsx
index 4a8dd8620d..52acb0d97f 100644
--- a/packages/insomnia/src/ui/components/modals/sync-history-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/sync-history-modal.tsx
@@ -1,5 +1,17 @@
 import React from 'react';
-import { Button, Cell, Column, Dialog, Heading, Modal, ModalOverlay, Row, Table, TableBody, TableHeader } from 'react-aria-components';
+import {
+  Button,
+  Cell,
+  Column,
+  Dialog,
+  Heading,
+  Modal,
+  ModalOverlay,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { Snapshot } from '../../../sync/types';
@@ -25,15 +37,18 @@ const RestoreButton = ({ snapshot }: { snapshot: Snapshot }) => {
 
   return (
     <PromptButton
-      className="px-4 min-w-[12ch] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-      confirmMessage='Confirm'
+      className="flex min-w-[12ch] items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+      confirmMessage="Confirm"
       onClick={() => {
-        restoreChangesFetcher.submit({
-          id: snapshot.id,
-        }, {
-          method: 'POST',
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/restore`,
-        });
+        restoreChangesFetcher.submit(
+          {
+            id: snapshot.id,
+          },
+          {
+            method: 'POST',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/restore`,
+          },
+        );
       }}
     >
       Restore
@@ -62,72 +77,64 @@ export const SyncHistoryModal = ({ history, onClose }: Props) => {
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading className='text-2xl'>History</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading className="text-2xl">History</Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded w-full border border-solid border-[--hl-sm] select-none overflow-y-auto max-h-96'>
+              <div className="max-h-96 w-full select-none overflow-y-auto rounded border border-solid border-[--hl-sm]">
                 <Table
-                  selectionMode='multiple'
+                  selectionMode="multiple"
                   defaultSelectedKeys="all"
-                  aria-label='Modified objects'
-                  className="border-separate border-spacing-0 w-full"
+                  aria-label="Modified objects"
+                  className="w-full border-separate border-spacing-0"
                 >
                   <TableHeader>
-                    <Column isRowHeader className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column
+                      isRowHeader
+                      className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none"
+                    >
                       Message
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       When
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       Author
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       Objects
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       Restore
                     </Column>
                   </TableHeader>
-                  <TableBody
-                    className="divide divide-[--hl-sm] divide-solid"
-                    items={history}
-                  >
+                  <TableBody className="divide divide-solid divide-[--hl-sm]" items={history}>
                     {item => (
-                      <Row className="group focus:outline-none focus-within:bg-[--hl-xxs] transition-colors">
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <span className='p-2'>
-                            {item.name}
-                          </span>
+                      <Row className="group transition-colors focus-within:bg-[--hl-xxs] focus:outline-none">
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <span className="p-2">{item.name}</span>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <TimeFromNow
-                            className="no-wrap p-2"
-                            timestamp={item.created}
-                            intervalSeconds={30}
-                          />
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <TimeFromNow className="no-wrap p-2" timestamp={item.created} intervalSeconds={30} />
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <div className='p-2' >
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <div className="p-2">
                             {authorName(item) ? (
                               <>
                                 {authorName(item)}{' '}
@@ -139,16 +146,16 @@ export const SyncHistoryModal = ({ history, onClose }: Props) => {
                                   {item.authorAccount?.email || ''}
                                 </HelpTooltip>
                               </>
-                            ) : '--'}
+                            ) : (
+                              '--'
+                            )}
                           </div>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <span className='p-2'>
-                            {item.state.length}
-                          </span>
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <span className="p-2">{item.state.length}</span>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <div className='p-2'>
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <div className="p-2">
                             <RestoreButton snapshot={item} />
                           </div>
                         </Cell>
diff --git a/packages/insomnia/src/ui/components/modals/sync-merge-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-merge-modal.tsx
index ac07fe8820..9302177713 100644
--- a/packages/insomnia/src/ui/components/modals/sync-merge-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/sync-merge-modal.tsx
@@ -1,5 +1,16 @@
 import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
-import { Button, Dialog, Form, GridList, GridListItem, Heading, Modal, ModalOverlay, Radio, RadioGroup } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  Form,
+  GridList,
+  GridListItem,
+  Heading,
+  Modal,
+  ModalOverlay,
+  Radio,
+  RadioGroup,
+} from 'react-aria-components';
 import { stringify } from 'yaml';
 
 import type { MergeConflict } from '../../../sync/types';
@@ -58,23 +69,27 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
     setSelectedConflict(null);
   }, []);
 
-  useImperativeHandle(ref, () => ({
-    hide: reset,
-    show: ({ conflicts, labels, handleDone }) => {
-      setState({
-        conflicts,
-        handleDone,
-        isOpen: true,
-        labels,
-      });
-      // select the first conflict by default
-      setSelectedConflict(conflicts?.[0] || null);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: reset,
+      show: ({ conflicts, labels, handleDone }) => {
+        setState({
+          conflicts,
+          handleDone,
+          isOpen: true,
+          labels,
+        });
+        // select the first conflict by default
+        setSelectedConflict(conflicts?.[0] || null);
 
-      window.main.trackSegmentEvent({
-        event: SegmentEvent.syncConflictResolutionStart,
-      });
-    },
-  }), [reset]);
+        window.main.trackSegmentEvent({
+          event: SegmentEvent.syncConflictResolutionStart,
+        });
+      },
+    }),
+    [reset],
+  );
 
   const { conflicts, handleDone } = state;
 
@@ -91,7 +106,7 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
         !isOpen && handleDone?.();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
@@ -99,24 +114,24 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
 
           !isOpen && handleDone?.();
         }}
-        className="flex flex-col w-[calc(100%-var(--padding-xl))] h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="flex h-[calc(100%-var(--padding-xl))] max-h-full w-[calc(100%-var(--padding-xl))] flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Resolve conflicts</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Resolve conflicts
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
               <Form
-                className='flex-1 flex flex-col gap-4 overflow-hidden'
+                className="flex flex-1 flex-col gap-4 overflow-hidden"
                 onSubmit={event => {
                   event.preventDefault();
                   handleDone?.(conflicts);
@@ -136,20 +151,20 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
                   reset();
                 }}
               >
-                <div className='grid [grid-template-columns:300px_1fr] h-full overflow-hidden divide-x divide-solid divide-[--hl-md] gap-2'>
+                <div className="grid h-full gap-2 divide-x divide-solid divide-[--hl-md] overflow-hidden [grid-template-columns:300px_1fr]">
                   {conflicts && conflicts.length > 0 && (
-                    <div className='flex flex-col gap-2 overflow-hidden'>
+                    <div className="flex flex-col gap-2 overflow-hidden">
                       <Button
                         type="submit"
-                        className="flex h-10 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+                        className="flex h-10 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
                         <Icon icon="code-merge" className="w-5" /> Resolve conflicts
                       </Button>
-                      <div className='flex-1 overflow-y-auto w-full select-none'>
+                      <div className="w-full flex-1 select-none overflow-y-auto">
                         <GridList
-                          aria-label='Conflicted changes'
+                          aria-label="Conflicted changes"
                           selectedKeys={[selectedConflict?.key || '']}
-                          selectionMode='single'
+                          selectionMode="single"
                           onSelectionChange={keys => {
                             if (keys !== 'all') {
                               const selectedKey = keys.values().next().value;
@@ -163,16 +178,18 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
                           }))}
                         >
                           {item => (
-                            <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                              <span className='truncate'>{item.name}</span>
+                            <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                              <span className="truncate">{item.name}</span>
                               <RadioGroup
                                 onChange={value => {
                                   setState({
                                     ...state,
-                                    conflicts: conflicts.map(c => c.key !== item.key ? c : { ...c, choose: value || null }),
+                                    conflicts: conflicts.map(c =>
+                                      c.key !== item.key ? c : { ...c, choose: value || null },
+                                    ),
                                   });
                                 }}
-                                aria-label='Choose version'
+                                aria-label="Choose version"
                                 name="type"
                                 value={item.choose || ''}
                                 className="flex flex-col gap-2 text-sm"
@@ -180,21 +197,17 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
                                 <div className="flex gap-2">
                                   <Radio
                                     value={item.mineBlob || ''}
-                                    className="flex items-center gap-2 data-[selected]:text-[--color-font] data-[selected]:border-[--color-surprise] flex-1 data-[selected]:bg-[rgba(var(--color-surprise-rgb),0.3)] data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded px-2 py-1 focus:outline-none transition-colors"
+                                    className="flex flex-1 items-center gap-2 rounded border border-solid border-[--hl-md] px-2 py-1 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[selected]:bg-[rgba(var(--color-surprise-rgb),0.3)] data-[selected]:text-[--color-font] data-[selected]:ring-[--color-surprise]"
                                   >
                                     <Icon icon="laptop" />
-                                    <span>
-                                      Ours
-                                    </span>
+                                    <span>Ours</span>
                                   </Radio>
                                   <Radio
                                     value={item.theirsBlob || ''}
-                                    className="flex items-center gap-2 data-[selected]:text-[--color-font-surprise] data-[selected]:border-[--color-surprise] flex-1 data-[selected]:bg-[rgba(var(--color-surprise-rgb),0.3)] data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded px-2 py-1 focus:outline-none transition-colors"
+                                    className="flex flex-1 items-center gap-2 rounded border border-solid border-[--hl-md] px-2 py-1 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[selected]:bg-[rgba(var(--color-surprise-rgb),0.3)] data-[selected]:text-[--color-font-surprise] data-[selected]:ring-[--color-surprise]"
                                   >
                                     <Icon icon="globe" />
-                                    <span>
-                                      Theirs
-                                    </span>
+                                    <span>Theirs</span>
                                   </Radio>
                                 </div>
                               </RadioGroup>
@@ -205,29 +218,36 @@ export const SyncMergeModal = forwardRef<SyncMergeModalHandle>((_, ref) => {
                     </div>
                   )}
 
-                  {selectedConflict ? <div className='p-2 pb-0 flex flex-col gap-2 h-full overflow-y-auto'>
-                    <Heading className='font-bold flex items-center gap-2'>
-                      <Icon icon="code-compare" />
-                      {selectedConflict.name}
-                    </Heading>
-                    <div className='flex w-full items-center gap-2'>
-                      <span className='flex-1 flex items-center gap-2 p-2 bg-[--hl-xs] uppercase font-semibold text-xs text-[--hl]'><Icon icon="laptop" /> {state.labels.ours}</span>
-                      <span className='flex-1 flex items-center gap-2 p-2 bg-[--hl-xs] uppercase font-semibold text-xs text-[--hl]'><Icon icon="globe" /> {state.labels.theirs}</span>
+                  {selectedConflict ? (
+                    <div className="flex h-full flex-col gap-2 overflow-y-auto p-2 pb-0">
+                      <Heading className="flex items-center gap-2 font-bold">
+                        <Icon icon="code-compare" />
+                        {selectedConflict.name}
+                      </Heading>
+                      <div className="flex w-full items-center gap-2">
+                        <span className="flex flex-1 items-center gap-2 bg-[--hl-xs] p-2 text-xs font-semibold uppercase text-[--hl]">
+                          <Icon icon="laptop" /> {state.labels.ours}
+                        </span>
+                        <span className="flex flex-1 items-center gap-2 bg-[--hl-xs] p-2 text-xs font-semibold uppercase text-[--hl]">
+                          <Icon icon="globe" /> {state.labels.theirs}
+                        </span>
+                      </div>
+                      <div className="flex-1 overflow-y-auto rounded-sm bg-[--hl-xs] p-2 text-[--color-font]">
+                        <DiffEditor
+                          original={selectedConflictDiff?.before || ''}
+                          modified={selectedConflictDiff?.after || ''}
+                        />
+                      </div>
                     </div>
-                    <div
-                      className='bg-[--hl-xs] rounded-sm p-2 flex-1 overflow-y-auto text-[--color-font]'
-                    >
-                      <DiffEditor original={selectedConflictDiff?.before || ''} modified={selectedConflictDiff?.after || ''} />
+                  ) : (
+                    <div className="flex h-full flex-col items-center justify-center gap-4 p-2">
+                      <Heading className="flex items-center justify-center gap-2 text-4xl font-semibold text-[--hl-md]">
+                        <Icon icon="code-compare" />
+                        Diff view
+                      </Heading>
+                      <p className="text-[--hl]">Select an item to compare</p>
                     </div>
-                  </div> : <div className='p-2 h-full flex flex-col gap-4 items-center justify-center'>
-                    <Heading className='font-semibold flex justify-center items-center gap-2 text-4xl text-[--hl-md]'>
-                      <Icon icon="code-compare" />
-                      Diff view
-                    </Heading>
-                    <p className='text-[--hl]'>
-                      Select an item to compare
-                    </p>
-                  </div>}
+                  )}
                 </div>
               </Form>
             </div>
diff --git a/packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx b/packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx
index ba24261ed8..a6a4126c1f 100644
--- a/packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/sync-staging-modal.tsx
@@ -1,5 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dialog, GridList, GridListItem, Heading, Label, Modal, ModalOverlay, TextArea, TextField, Tooltip, TooltipTrigger } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  GridList,
+  GridListItem,
+  Heading,
+  Label,
+  Modal,
+  ModalOverlay,
+  TextArea,
+  TextField,
+  Tooltip,
+  TooltipTrigger,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 import { stringify } from 'yaml';
 
@@ -85,35 +98,47 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
 
   const stagedChanges = Object.entries(status.stage).map(([key, entry]) => ({
     ...entry,
-    document: syncItems.find(item => item.key === key)?.document || 'deleted' in entry ? { type: getModelTypeById(key) } : undefined,
+    document:
+      syncItems.find(item => item.key === key)?.document || 'deleted' in entry
+        ? { type: getModelTypeById(key) }
+        : undefined,
     id: `staged-${key}`,
   }));
   const unstagedChanges = Object.entries(status.unstaged).map(([key, entry]) => ({
     ...entry,
-    document: syncItems.find(item => item.key === key)?.document || 'deleted' in entry ? { type: getModelTypeById(key) } : undefined,
+    document:
+      syncItems.find(item => item.key === key)?.document || 'deleted' in entry
+        ? { type: getModelTypeById(key) }
+        : undefined,
     id: `unstaged-${key}`,
   }));
 
   const stageChangesFetcher = useFetcher();
 
   const stageChanges = (keys: string[]) => {
-    stageChangesFetcher.submit({
-      keys,
-    }, {
-      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/stage`,
-      method: 'POST',
-      encType: 'application/json',
-    });
+    stageChangesFetcher.submit(
+      {
+        keys,
+      },
+      {
+        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/stage`,
+        method: 'POST',
+        encType: 'application/json',
+      },
+    );
   };
 
   const unstageChanges = (keys: string[]) => {
-    stageChangesFetcher.submit({
-      keys,
-    }, {
-      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/unstage`,
-      method: 'POST',
-      encType: 'application/json',
-    });
+    stageChangesFetcher.submit(
+      {
+        keys,
+      },
+      {
+        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/unstage`,
+        method: 'POST',
+        encType: 'application/json',
+      },
+    );
   };
 
   const allChanges = [...stagedChanges, ...unstagedChanges];
@@ -143,75 +168,81 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
         !isOpen && onClose();
       }}
       isDismissable
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-[calc(100%-var(--padding-xl))] h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex h-[calc(100%-var(--padding-xl))] w-[calc(100%-var(--padding-xl))] flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex-shrink-0 flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Commit changes</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex flex-shrink-0 items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Commit changes
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='grid [grid-template-columns:300px_1fr] h-full overflow-hidden divide-x divide-solid divide-[--hl-md] gap-2'>
-                <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-                  <Form method="POST" className='flex flex-col gap-2'>
-                    <TextField className="flex flex-col gap-2 flex-shrink-0">
-                      <Label className='font-bold'>
-                        Message
-                      </Label>
+              <div className="grid h-full gap-2 divide-x divide-solid divide-[--hl-md] overflow-hidden [grid-template-columns:300px_1fr]">
+                <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+                  <Form method="POST" className="flex flex-col gap-2">
+                    <TextField className="flex flex-shrink-0 flex-col gap-2">
+                      <Label className="font-bold">Message</Label>
                       <TextArea
                         rows={3}
                         name="message"
-                        className="border border-solid border-[--hl-sm] placeholder:text-[--hl-md] rounded-sm p-2 resize-none"
+                        className="resize-none rounded-sm border border-solid border-[--hl-sm] p-2 placeholder:text-[--hl-md]"
                         placeholder="This is a helpful message that describes the changes made in this commit."
                         required
                       />
                     </TextField>
 
-                    <div className="flex flex-shrink-0 justify-stretch gap-2 items-center">
+                    <div className="flex flex-shrink-0 items-center justify-stretch gap-2">
                       <Button
-                        type='submit'
+                        type="submit"
                         isDisabled={state !== 'idle'}
                         formAction={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/create-snapshot`}
-                        className="flex-1 flex h-8 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        <Icon icon={isCreatingSnapshot ? 'spinner' : 'check'} className={`w-5 ${isCreatingSnapshot ? 'animate-spin' : ''}`} /> Commit
+                        <Icon
+                          icon={isCreatingSnapshot ? 'spinner' : 'check'}
+                          className={`w-5 ${isCreatingSnapshot ? 'animate-spin' : ''}`}
+                        />{' '}
+                        Commit
                       </Button>
                       <Button
                         type="submit"
                         isDisabled={state !== 'idle'}
                         formAction={`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/branch/create-snapshot-and-push`}
-                        className="flex-1 flex h-8 items-center justify-center px-4 gap-2 bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        <Icon icon={isPushing ? 'spinner' : 'cloud-arrow-up'} className={`w-5 ${isPushing ? 'animate-spin' : ''}`} /> Commit and push
+                        <Icon
+                          icon={isPushing ? 'spinner' : 'cloud-arrow-up'}
+                          className={`w-5 ${isPushing ? 'animate-spin' : ''}`}
+                        />{' '}
+                        Commit and push
                       </Button>
                     </div>
                     {data?.error && (
-                      <p className="bg-opacity-20 text-sm text-[--color-font-danger] p-2 rounded-sm bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))]">
+                      <p className="rounded-sm bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))] bg-opacity-20 p-2 text-sm text-[--color-font-danger]">
                         <Icon icon="exclamation-triangle" /> {data.error}
                       </p>
                     )}
                   </Form>
 
-                  <div className='grid auto-rows-auto gap-2 overflow-y-auto'>
-                    <div className='flex flex-col gap-2 overflow-hidden max-h-96 w-full'>
-                      <Heading className='group font-semibold flex-shrink-0 w-full flex items-center gap-2 py-1 justify-between'>
-                        <span className='flex-1'>Staged changes</span>
+                  <div className="grid auto-rows-auto gap-2 overflow-y-auto">
+                    <div className="flex max-h-96 w-full flex-col gap-2 overflow-hidden">
+                      <Heading className="group flex w-full flex-shrink-0 items-center justify-between gap-2 py-1 font-semibold">
+                        <span className="flex-1">Staged changes</span>
                         <Button
-                          className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                          className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                           slot={null}
                           onPress={() => {
                             unstageChanges(stagedChanges.map(item => item.key));
@@ -219,9 +250,11 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                         >
                           <Icon icon="minus" />
                         </Button>
-                        <span className='text-xs rounded-full px-1 text-[--hl] bg-[--hl-sm]'>{stagedChanges.length}</span>
+                        <span className="rounded-full bg-[--hl-sm] px-1 text-xs text-[--hl]">
+                          {stagedChanges.length}
+                        </span>
                       </Heading>
-                      <div className='flex-1 flex overflow-y-auto w-full select-none'>
+                      <div className="flex w-full flex-1 select-none overflow-y-auto">
                         <GridList
                           className="w-full"
                           items={stagedChanges.map(entry => ({
@@ -230,23 +263,21 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                             key: entry.id,
                             textValue: entry.name || entry.document?.type || '',
                           }))}
-                          aria-label='Unstaged changes'
+                          aria-label="Unstaged changes"
                           onAction={key => {
                             setSelectedItemId(key.toString());
                           }}
                           renderEmptyState={() => (
-                            <p className='p-2 text-[--hl] text-sm'>
-                              Stage your changes to commit them.
-                            </p>
+                            <p className="p-2 text-sm text-[--hl]">Stage your changes to commit them.</p>
                           )}
                         >
                           {item => {
                             return (
-                              <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                                <span className='truncate'>{item.entry.name || item.entry.document?.type}</span>
-                                <div className='flex items-center gap-1'>
+                              <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                                <span className="truncate">{item.entry.name || item.entry.document?.type}</span>
+                                <div className="flex items-center gap-1">
                                   <Button
-                                    className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                    className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                     slot={null}
                                     onPress={() => {
                                       unstageChanges([item.entry.key]);
@@ -260,9 +291,13 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
-                                      {'added' in item.entry ? 'Untracked' : 'deleted' in item.entry ? 'Deleted' : 'Modified'}
+                                      {'added' in item.entry
+                                        ? 'Untracked'
+                                        : 'deleted' in item.entry
+                                          ? 'Deleted'
+                                          : 'Modified'}
                                     </Tooltip>
                                   </TooltipTrigger>
                                 </div>
@@ -272,12 +307,12 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                         </GridList>
                       </div>
                     </div>
-                    <div className='flex flex-col gap-2 overflow-hidden max-h-96 w-full'>
-                      <Heading className='group font-semibold flex-shrink-0 w-full flex items-center py-1 justify-between'>
+                    <div className="flex max-h-96 w-full flex-col gap-2 overflow-hidden">
+                      <Heading className="group flex w-full flex-shrink-0 items-center justify-between py-1 font-semibold">
                         <span>Changes</span>
-                        <div className='flex items-center gap-2'>
+                        <div className="flex items-center gap-2">
                           <Button
-                            className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                            className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                             slot={null}
                             onPress={() => {
                               stageChanges(unstagedChanges.map(item => item.key));
@@ -285,10 +320,12 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                           >
                             <Icon icon="plus" />
                           </Button>
-                          <span className='text-xs rounded-full px-1 text-[--hl] bg-[--hl-sm]'>{unstagedChanges.length}</span>
+                          <span className="rounded-full bg-[--hl-sm] px-1 text-xs text-[--hl]">
+                            {unstagedChanges.length}
+                          </span>
                         </div>
                       </Heading>
-                      <div className='flex-1 flex overflow-y-auto w-full select-none'>
+                      <div className="flex w-full flex-1 select-none overflow-y-auto">
                         <GridList
                           className="w-full"
                           items={unstagedChanges.map(entry => ({
@@ -297,18 +334,18 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                             key: entry.id,
                             textValue: entry.name || entry.document?.type || '',
                           }))}
-                          aria-label='Unstaged changes'
+                          aria-label="Unstaged changes"
                           onAction={key => {
                             setSelectedItemId(key.toString());
                           }}
                         >
                           {item => {
                             return (
-                              <GridListItem className="group outline-none select-none aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font] hover:bg-[--hl-xs] focus:bg-[--hl-sm] overflow-hidden text-[--hl] transition-colors w-full flex items-center px-2 py-1 justify-between">
-                                <span className='truncate'>{item.entry.name || item.entry.document?.type}</span>
-                                <div className='flex items-center gap-1'>
+                              <GridListItem className="group flex w-full select-none items-center justify-between overflow-hidden px-2 py-1 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]">
+                                <span className="truncate">{item.entry.name || item.entry.document?.type}</span>
+                                <div className="flex items-center gap-1">
                                   <Button
-                                    className='opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus-within:opacity-100 group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'
+                                    className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                                     slot={null}
                                     onPress={() => {
                                       stageChanges([item.entry.key]);
@@ -322,9 +359,13 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                                     </Button>
                                     <Tooltip
                                       offset={8}
-                                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                                     >
-                                      {'added' in item.entry ? 'Untracked' : 'deleted' in item.entry ? 'Deleted' : 'Modified'}
+                                      {'added' in item.entry
+                                        ? 'Untracked'
+                                        : 'deleted' in item.entry
+                                          ? 'Deleted'
+                                          : 'Modified'}
                                     </Tooltip>
                                   </TooltipTrigger>
                                 </div>
@@ -336,27 +377,27 @@ export const SyncStagingModal = ({ onClose, status, syncItems }: Props) => {
                     </div>
                   </div>
                 </div>
-                {previewDiffItem ? <div className='p-2 pb-0 flex flex-col gap-2 h-full overflow-y-auto'>
-                  <Heading className='font-bold flex items-center gap-2'>
-                    <Icon icon="code-compare" />
-                    {previewDiffItemName}
-                  </Heading>
-                  {previewDiffItem && (
-                    <div
-                      className='bg-[--hl-xs] rounded-sm p-2 flex-1 overflow-y-auto text-[--color-font]'
-                    >
-                      <DiffEditor original={diff.before} modified={diff.after} />
-                    </div>
-                  )}
-                </div> : <div className='p-2 h-full flex flex-col gap-4 items-center justify-center'>
-                  <Heading className='font-semibold flex justify-center items-center gap-2 text-4xl text-[--hl-md]'>
-                    <Icon icon="code-compare" />
-                    Diff view
-                  </Heading>
-                  <p className='text-[--hl]'>
-                    Select an item to compare
-                  </p>
-                </div>}
+                {previewDiffItem ? (
+                  <div className="flex h-full flex-col gap-2 overflow-y-auto p-2 pb-0">
+                    <Heading className="flex items-center gap-2 font-bold">
+                      <Icon icon="code-compare" />
+                      {previewDiffItemName}
+                    </Heading>
+                    {previewDiffItem && (
+                      <div className="flex-1 overflow-y-auto rounded-sm bg-[--hl-xs] p-2 text-[--color-font]">
+                        <DiffEditor original={diff.before} modified={diff.after} />
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  <div className="flex h-full flex-col items-center justify-center gap-4 p-2">
+                    <Heading className="flex items-center justify-center gap-2 text-4xl font-semibold text-[--hl-md]">
+                      <Icon icon="code-compare" />
+                      Diff view
+                    </Heading>
+                    <p className="text-[--hl]">Select an item to compare</p>
+                  </div>
+                )}
               </div>
             </div>
           )}
diff --git a/packages/insomnia/src/ui/components/modals/upgrade-modal.tsx b/packages/insomnia/src/ui/components/modals/upgrade-modal.tsx
index 6923f01de0..d8dbe19944 100644
--- a/packages/insomnia/src/ui/components/modals/upgrade-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/upgrade-modal.tsx
@@ -17,45 +17,52 @@ export interface UpgradeModalHandle {
 }
 export const UpgradeModal = forwardRef<UpgradeModalHandle, ModalProps>((_, ref) => {
   const modalRef = useRef<AskModalHandle>(null);
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: (options: UpgradeModalOptions) => {
-      const {
-        newPlan,
-        featureName,
-        title = 'Upgrade Plan',
-        yesText = 'Upgrade',
-        noText = 'Cancel',
-        color = 'surpirse',
-        isOwner,
-      } = options;
-      const planDetail = newPlan === 'team' ? 'Pro plan or above' : 'Enterprise plan';
-      const upgradeDetail = isOwner ? 'please upgrade your plan.' : 'please contact the organization owner to upgrade the plan.';
-      const message = `${featureName} is only enbaled for ${planDetail}, ${upgradeDetail}`;
-      const onDone = async (isYes: boolean) => {
-        if (isYes) {
-          window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/subscription/update?plan=team`);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: (options: UpgradeModalOptions) => {
+        const {
+          newPlan,
+          featureName,
+          title = 'Upgrade Plan',
+          yesText = 'Upgrade',
+          noText = 'Cancel',
+          color = 'surpirse',
+          isOwner,
+        } = options;
+        const planDetail = newPlan === 'team' ? 'Pro plan or above' : 'Enterprise plan';
+        const upgradeDetail = isOwner
+          ? 'please upgrade your plan.'
+          : 'please contact the organization owner to upgrade the plan.';
+        const message = `${featureName} is only enbaled for ${planDetail}, ${upgradeDetail}`;
+        const onDone = async (isYes: boolean) => {
+          if (isYes) {
+            window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/subscription/update?plan=team`);
+          }
+        };
+        if (isOwner) {
+          modalRef.current?.show({
+            title,
+            message,
+            yesText,
+            noText,
+            color,
+            ...(isOwner && { onDone }),
+          });
+        } else {
+          modalRef.current?.show({
+            title,
+            message,
+          });
         }
-      };
-      if (isOwner) {
-        modalRef.current?.show({
-          title, message, yesText, noText, color,
-          ...(isOwner && { onDone }),
-        });
-      } else {
-        modalRef.current?.show({
-          title, message,
-        });
-      }
-    },
-  }), []);
-
-  return (
-    <AskModal
-      ref={modalRef}
-    />
+      },
+    }),
+    [],
   );
+
+  return <AskModal ref={modalRef} />;
 });
 UpgradeModal.displayName = 'UpgradeModal';
diff --git a/packages/insomnia/src/ui/components/modals/upload-runner-data-modal.tsx b/packages/insomnia/src/ui/components/modals/upload-runner-data-modal.tsx
index b663eebb18..73162b669c 100644
--- a/packages/insomnia/src/ui/components/modals/upload-runner-data-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/upload-runner-data-modal.tsx
@@ -24,12 +24,11 @@ export interface UploadDataModalProps {
   userUploadData: UploadDataType[];
 }
 
-const rowHeaderStyle = 'sticky normal-case top-[-8px] p-2 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none';
-const rowCellStyle = 'whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none';
-const supportedFileTypes = [
-  'application/json',
-  'text/csv',
-];
+const rowHeaderStyle =
+  'sticky normal-case top-[-8px] p-2 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none';
+const rowCellStyle =
+  'whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none';
+const supportedFileTypes = ['application/json', 'text/csv'];
 
 export const genPreviewTableData = (uploadData: UploadDataType[]) => {
   // generate header and body data for preview table from upload data
@@ -74,15 +73,20 @@ export const UploadDataModal = ({ onUploadFile, onClose, userUploadData }: Uploa
         }
       } else if (fileType === 'text/csv') {
         // Replace CRLF (Windows line break) and CR (Mac link break) with \n, then split into csv arrays
-        const csvRows = content.replace(/\r\n|\r/g, '\n').split('\n').map(row => row.split(','));
+        const csvRows = content
+          .replace(/\r\n|\r/g, '\n')
+          .split('\n')
+          .map(row => row.split(','));
         // at least 2 rows required for csv
         if (csvRows.length > 1) {
           const csvHeaders = csvRows[0];
           const csvContentRows = csvRows.slice(1, csvRows.length);
-          const uploadData = csvContentRows.map(contentRow => csvHeaders.reduce((acc: UploadDataType, cur, idx) => {
-            acc[cur] = contentRow[idx] ?? '';
-            return acc;
-          }, {}));
+          const uploadData = csvContentRows.map(contentRow =>
+            csvHeaders.reduce((acc: UploadDataType, cur, idx) => {
+              acc[cur] = contentRow[idx] ?? '';
+              return acc;
+            }, {}),
+          );
           setUploadDataHeaders(csvHeaders);
           setUploadData(uploadData);
         } else {
@@ -161,66 +165,53 @@ export const UploadDataModal = ({ onUploadFile, onClose, userUploadData }: Uploa
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-start justify-center bg-black/30"
     >
       <Modal
-        className="max-h-[75%] overflow-auto flex flex-col w-full max-w-3xl rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font] m-24"
+        className="m-24 flex max-h-[75%] w-full max-w-3xl flex-col overflow-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>{userUploadData.length > 0 ? 'Update Data' : 'Preview Data'}</Heading>
+            <div className="flex flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  {userUploadData.length > 0 ? 'Update Data' : 'Preview Data'}
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded grow shrink-0 w-full overflow-hidden basis-12 flex flex-col gap-6 select-none overflow-y-auto'>
-                <FileTrigger
-                  allowsMultiple={false}
-                  onSelect={handleFileSelect}
-                  acceptedFileTypes={['.csv', '.json']}
-                >
-                  <Button className="flex flex-1 flex-shrink-0 border-solid border border-[--hl-sm] py-1 gap-2 items-center justify-center px-2 aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent transition-all text-base">
+              <div className="flex w-full shrink-0 grow basis-12 select-none flex-col gap-6 overflow-hidden overflow-y-auto rounded">
+                <FileTrigger allowsMultiple={false} onSelect={handleFileSelect} acceptedFileTypes={['.csv', '.json']}>
+                  <Button className="flex flex-1 flex-shrink-0 items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-sm] px-2 py-1 text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm]">
                     <Icon icon="upload" />
                     <span>{uploadData.length > 0 ? 'Change Data File' : 'Select Data File'}</span>
                   </Button>
                 </FileTrigger>
               </div>
-              {file && uploadData.length > 0 &&
+              {file && uploadData.length > 0 && (
                 <div>
-                  <span className='mr-4'>File Encoding</span>
-                  <EncodingPicker
-                    encoding={fileEncoding}
-                    onChange={handleEncodingChange}
-                  />
+                  <span className="mr-4">File Encoding</span>
+                  <EncodingPicker encoding={fileEncoding} onChange={handleEncodingChange} />
                 </div>
-              }
-              {invalidFileReason !== '' &&
+              )}
+              {invalidFileReason !== '' && (
                 <div className="notice error margin-top-sm">
                   <p>{invalidFileReason}</p>
                 </div>
-              }
-              {uploadData.length > 0 &&
-                <div className='overflow-auto py-2 flex-1'>
-                  <Heading className='text-xl margin-bottom-sm'>Data Preview</Heading>
-                  <Table
-                    aria-label='Data Preview Table'
-                    className="min-w-full table-auto"
-                  >
+              )}
+              {uploadData.length > 0 && (
+                <div className="flex-1 overflow-auto py-2">
+                  <Heading className="margin-bottom-sm text-xl">Data Preview</Heading>
+                  <Table aria-label="Data Preview Table" className="min-w-full table-auto">
                     <TableHeader>
-                      <Column
-                        isRowHeader
-                        className={rowHeaderStyle}
-                      >
+                      <Column isRowHeader className={rowHeaderStyle}>
                         Iteration
                       </Column>
                       {uploadDataHeaders.map((header, idx) => (
@@ -238,18 +229,18 @@ export const UploadDataModal = ({ onUploadFile, onClose, userUploadData }: Uploa
                         return (
                           // eslint-disable-next-line react/no-array-index-key
                           <Row key={idx}>
-                            <Cell
-                              className={rowCellStyle}
-                            >
-                              <span className='p-2'>{idx + 1}</span>
+                            <Cell className={rowCellStyle}>
+                              <span className="p-2">{idx + 1}</span>
                             </Cell>
                             {uploadDataHeaders.map(rowKey => (
                               <Cell
-                                className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none"
+                                className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none"
                                 key={rowKey}
                               >
-                                <span className='p-2'>
-                                  {typeof rowData[rowKey] === 'string' ? rowData[rowKey] : JSON.stringify(rowData[rowKey])}
+                                <span className="p-2">
+                                  {typeof rowData[rowKey] === 'string'
+                                    ? rowData[rowKey]
+                                    : JSON.stringify(rowData[rowKey])}
                                 </span>
                               </Cell>
                             ))}
@@ -259,19 +250,19 @@ export const UploadDataModal = ({ onUploadFile, onClose, userUploadData }: Uploa
                     </TableBody>
                   </Table>
                 </div>
-              }
-              <div className="flex justify-end mt-2">
-                {userUploadData.length > 0 &&
+              )}
+              <div className="mt-2 flex justify-end">
+                {userUploadData.length > 0 && (
                   <Button
-                    className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--hl] transition-colors rounded-sm"
+                    className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--hl] transition-colors hover:bg-opacity-90 hover:no-underline"
                     onPress={handleClearData}
                   >
                     Remove Data
                   </Button>
-                }
+                )}
                 <Button
                   isDisabled={uploadData.length < 1}
-                  className="hover:no-underline ml-4 flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                  className="ml-4 flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
                   onPress={handleUploadData}
                 >
                   Upload
diff --git a/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx b/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx
index df72c8891a..dfa0ce832b 100644
--- a/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/variable-missing-error-modal.tsx
@@ -12,42 +12,46 @@ interface Props {
   isDismissable?: boolean;
 }
 
-export const VariableMissingErrorModal = ({ isOpen, title, cancelText, onCancel, okText, children, onOk, isDismissable = false }: Props) => {
+export const VariableMissingErrorModal = ({
+  isOpen,
+  title,
+  cancelText,
+  onCancel,
+  okText,
+  children,
+  onOk,
+  isDismissable = false,
+}: Props) => {
   return (
     <ModalOverlay
       isOpen={isOpen}
       onOpenChange={isOpen => {
         !isOpen && onCancel?.();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-start justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-start justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onCancel?.();
         }}
         isDismissable={isDismissable}
-        className="flex flex-col max-w-4xl w-full rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] m-[--padding-lg] max-h-full bg-[--color-bg] text-[--color-font]"
+        className="m-[--padding-lg] flex max-h-full w-full max-w-4xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog className="outline-none flex-1 h-full flex flex-col gap-4 overflow-hidden">
+        <Dialog className="flex h-full flex-1 flex-col gap-4 overflow-hidden outline-none">
           <>
-            <Heading
-              slot="title"
-              className="text-2xl"
-            >
+            <Heading slot="title" className="text-2xl">
               {title}
             </Heading>
-            <div className=''>
-              {children}
-            </div>
-            <div className="flex flex-shrink-0 flex-1 justify-end gap-2 items-center">
+            <div className="">{children}</div>
+            <div className="flex flex-1 flex-shrink-0 items-center justify-end gap-2">
               <Button
-                className="hover:no-underline flex items-center gap-2 hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:bg-opacity-90 hover:no-underline"
                 onPress={onCancel}
               >
                 {cancelText || 'Cancel'}
               </Button>
               <Button
-                className="hover:no-underline flex items-center gap-2 bg-[--color-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
                 onPress={onOk}
               >
                 {okText || 'OK'}
diff --git a/packages/insomnia/src/ui/components/modals/workspace-certificates-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-certificates-modal.tsx
index 63e1b66b8b..0b93a6f82f 100644
--- a/packages/insomnia/src/ui/components/modals/workspace-certificates-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/workspace-certificates-modal.tsx
@@ -1,5 +1,21 @@
 import React, { Fragment, useEffect, useId, useState } from 'react';
-import { Button, Dialog, FileTrigger, GridList, GridListItem, Heading, Input, Label, Modal, ModalOverlay, Tab, TabList, TabPanel, Tabs, ToggleButton } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  FileTrigger,
+  GridList,
+  GridListItem,
+  Heading,
+  Input,
+  Label,
+  Modal,
+  ModalOverlay,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  ToggleButton,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import type { ClientCertificate } from '../../../models/client-certificate';
@@ -8,7 +24,11 @@ import { Icon } from '../icon';
 import { PasswordViewer } from '../viewers/password-viewer';
 
 const AddClientCertificateModal = ({ onClose }: { onClose: () => void }) => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
 
   const createClientCertificateFetcher = useFetcher();
   const formId = useId();
@@ -29,73 +49,80 @@ const AddClientCertificateModal = ({ onClose }: { onClose: () => void }) => {
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-20 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-20 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-full max-w-lg rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex w-full max-w-lg flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-y-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-y-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-y-hidden h-full'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Add Client Certificate</Heading>
+            <div className="flex h-full flex-1 flex-col gap-4 overflow-y-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Add Client Certificate
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded flex-1 w-full basis-96 flex flex-col gap-2 select-none px-2 overflow-y-auto'>
+              <div className="flex w-full flex-1 basis-96 select-none flex-col gap-2 overflow-y-auto rounded px-2">
                 <form
                   id={formId}
-                  className='flex flex-col gap-2'
+                  className="flex flex-col gap-2"
                   onSubmit={e => {
                     e.preventDefault();
                     const formData = new FormData(e.currentTarget);
 
                     const certificate = Object.fromEntries(formData.entries());
 
-                    createClientCertificateFetcher.submit({
-                      ...certificate,
-                      isPrivate: certificate.isPrivate === 'on',
-                    }, {
-                      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/clientcert/new`,
-                      method: 'post',
-                      encType: 'application/json',
-                    });
+                    createClientCertificateFetcher.submit(
+                      {
+                        ...certificate,
+                        isPrivate: certificate.isPrivate === 'on',
+                      },
+                      {
+                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/clientcert/new`,
+                        method: 'post',
+                        encType: 'application/json',
+                      },
+                    );
                   }}
                 >
-                  <Input
-                    name='parentId'
-                    type='text'
-                    value={workspaceId}
-                    readOnly
-                    className='hidden'
-                  />
-                  <Label className='flex flex-col gap-1' aria-label='Host'>
-                    <span className='text-sm'>Host</span>
+                  <Input name="parentId" type="text" value={workspaceId} readOnly className="hidden" />
+                  <Label className="flex flex-col gap-1" aria-label="Host">
+                    <span className="text-sm">Host</span>
                     <Input
-                      name='host'
-                      type='text'
+                      name="host"
+                      type="text"
                       required
-                      placeholder='example.com'
-                      className='py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors'
+                      placeholder="example.com"
+                      className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                     />
                   </Label>
                   <Tabs className="rounded-sm border border-solid border-[--hl-md]">
                     <TabList className="flex items-center border-b border-solid border-[--hl-md]">
-                      <Tab className="hover:no-underline aria-selected:bg-[--hl-md] hover:bg-[--hl-sm] outline-none gap-2 flex items-center hover:bg-opacity-90 py-1 px-2 text-[--color-font] transition-colors" id="certificate">Certificate</Tab>
-                      <Tab className="hover:no-underline aria-selected:bg-[--hl-md] hover:bg-[--hl-sm] outline-none gap-2 flex items-center hover:bg-opacity-90 py-1 px-2 text-[--color-font] transition-colors" id="pfx">PFX or PKCS12</Tab>
+                      <Tab
+                        className="flex items-center gap-2 px-2 py-1 text-[--color-font] outline-none transition-colors hover:bg-[--hl-sm] hover:bg-opacity-90 hover:no-underline aria-selected:bg-[--hl-md]"
+                        id="certificate"
+                      >
+                        Certificate
+                      </Tab>
+                      <Tab
+                        className="flex items-center gap-2 px-2 py-1 text-[--color-font] outline-none transition-colors hover:bg-[--hl-sm] hover:bg-opacity-90 hover:no-underline aria-selected:bg-[--hl-md]"
+                        id="pfx"
+                      >
+                        PFX or PKCS12
+                      </Tab>
                     </TabList>
                     <TabPanel className="p-2" id="pfx">
-                      <Label className='flex flex-col gap-1' aria-label='Host'>
-                        <span className='text-sm'>PFX or PKCS12 file</span>
+                      <Label className="flex flex-col gap-1" aria-label="Host">
+                        <span className="text-sm">PFX or PKCS12 file</span>
                         <FileTrigger
                           allowsMultiple={false}
                           onSelect={fileList => {
@@ -108,23 +135,19 @@ const AddClientCertificateModal = ({ onClose }: { onClose: () => void }) => {
                             setPfxPath(window.webUtils.getPathForFile(file));
                           }}
                         >
-                          <Button className="flex flex-shrink-0 border-solid border border-[--hl-sm] py-1 gap-2 items-center justify-center px-2 h-full aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base">
+                          <Button className="flex h-full flex-shrink-0 items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-sm] px-2 py-1 text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm]">
                             {!pfxPath && <Icon icon="plus" />}
-                            <span className='truncate' title={pfxPath}>{pfxPath ? pfxPath : 'Add PFX or PKCS12 file'}</span>
+                            <span className="truncate" title={pfxPath}>
+                              {pfxPath ? pfxPath : 'Add PFX or PKCS12 file'}
+                            </span>
                           </Button>
                         </FileTrigger>
-                        <Input
-                          name='pfx'
-                          type='text'
-                          value={pfxPath}
-                          readOnly
-                          className='hidden'
-                        />
+                        <Input name="pfx" type="text" value={pfxPath} readOnly className="hidden" />
                       </Label>
                     </TabPanel>
-                    <TabPanel className="flex flex-col overflow-hidden w-full gap-2 p-2" id="certificate">
-                      <Label className='flex-1 flex flex-col gap-1' aria-label='Certificate'>
-                        <span className='text-sm'>Certificate</span>
+                    <TabPanel className="flex w-full flex-col gap-2 overflow-hidden p-2" id="certificate">
+                      <Label className="flex flex-1 flex-col gap-1" aria-label="Certificate">
+                        <span className="text-sm">Certificate</span>
                         <FileTrigger
                           allowsMultiple={false}
                           onSelect={fileList => {
@@ -137,21 +160,20 @@ const AddClientCertificateModal = ({ onClose }: { onClose: () => void }) => {
                             setCertificatePath(window.webUtils.getPathForFile(file));
                           }}
                         >
-                          <Button data-test-id='add-client-certificate-file-chooser' className="flex flex-shrink-0 border-solid border border-[--hl-sm] py-1 gap-2 items-center justify-center px-2 h-full aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base">
+                          <Button
+                            data-test-id="add-client-certificate-file-chooser"
+                            className="flex h-full flex-shrink-0 items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-sm] px-2 py-1 text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm]"
+                          >
                             {!certificatePath && <Icon icon="plus" />}
-                            <span className='truncate' title={certificatePath}>{certificatePath ? certificatePath : 'Add certificate file'}</span>
+                            <span className="truncate" title={certificatePath}>
+                              {certificatePath ? certificatePath : 'Add certificate file'}
+                            </span>
                           </Button>
                         </FileTrigger>
-                        <Input
-                          name='cert'
-                          type='text'
-                          value={certificatePath}
-                          readOnly
-                          className='hidden'
-                        />
+                        <Input name="cert" type="text" value={certificatePath} readOnly className="hidden" />
                       </Label>
-                      <Label className='flex-1 flex flex-col gap-1' aria-label='Key'>
-                        <span className='text-sm'>Key</span>
+                      <Label className="flex flex-1 flex-col gap-1" aria-label="Key">
+                        <span className="text-sm">Key</span>
                         <FileTrigger
                           allowsMultiple={false}
                           onSelect={fileList => {
@@ -164,40 +186,43 @@ const AddClientCertificateModal = ({ onClose }: { onClose: () => void }) => {
                             setKeyPath(window.webUtils.getPathForFile(file));
                           }}
                         >
-                          <Button data-test-id='add-client-certificate-key-file-chooser' className="flex flex-shrink-0 border-solid border border-[--hl-sm] py-1 gap-2 items-center justify-center px-2 h-full aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base">
+                          <Button
+                            data-test-id="add-client-certificate-key-file-chooser"
+                            className="flex h-full flex-shrink-0 items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-sm] px-2 py-1 text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm]"
+                          >
                             {!keyPath && <Icon icon="plus" />}
-                            <span className='truncate' title={keyPath}>{keyPath ? keyPath : 'Add key file'}</span>
+                            <span className="truncate" title={keyPath}>
+                              {keyPath ? keyPath : 'Add key file'}
+                            </span>
                           </Button>
                         </FileTrigger>
-                        <Input
-                          name='key'
-                          type='text'
-                          value={keyPath}
-                          readOnly
-                          className='hidden'
-                        />
+                        <Input name="key" type="text" value={keyPath} readOnly className="hidden" />
                       </Label>
                     </TabPanel>
                   </Tabs>
 
-                  <Label className='flex flex-col gap-1' aria-label='Passphrase'>
-                    <span className='text-sm'>Passphrase</span>
+                  <Label className="flex flex-col gap-1" aria-label="Passphrase">
+                    <span className="text-sm">Passphrase</span>
                     <Input
-                      name='passphrase'
-                      type='password'
-                      className='py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors'
+                      name="passphrase"
+                      type="password"
+                      className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                     />
                   </Label>
                 </form>
               </div>
-              <div className='flex items-center gap-2 justify-end'>
+              <div className="flex items-center justify-end gap-2">
                 <Button
                   onPress={close}
-                  className="hover:no-underline hover:bg-opacity-90 border border-solid border-[--hl-md] hover:border-[--hl-sm] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                  className="rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:border-[--hl-sm] hover:bg-opacity-90 hover:no-underline"
                 >
                   Cancel
                 </Button>
-                <Button type="submit" form={formId} className="hover:no-underline gap-2 flex items-center bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] text-[--color-font-surprise] hover:bg-opacity-90 border border-solid border-[--hl-md] hover:border-[--hl-sm] py-2 px-3 transition-colors rounded-sm">
+                <Button
+                  type="submit"
+                  form={formId}
+                  className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-3 py-2 text-[--color-font-surprise] transition-colors hover:border-[--hl-sm] hover:bg-opacity-90 hover:no-underline"
+                >
                   <Icon icon="plus" />
                   <span>Add certificate</span>
                 </Button>
@@ -210,46 +235,54 @@ const AddClientCertificateModal = ({ onClose }: { onClose: () => void }) => {
   );
 };
 
-const ClientCertificateGridListItem = ({ certificate }: {
-  certificate: ClientCertificate;
-}) => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+const ClientCertificateGridListItem = ({ certificate }: { certificate: ClientCertificate }) => {
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const updateClientCertificateFetcher = useFetcher();
   const deleteClientCertificateFetcher = useFetcher();
 
   return (
-    <GridListItem className="outline-none flex flex-col gap-2 items-center justify-between p-4 ring-inset focus:ring-1 focus:ring-[--hl-md]">
-      <div className='flex items-center gap-2 w-full'>
-        {Boolean(certificate.pfx || certificate.cert) && <Icon icon="file-contract" className='w-4' title={certificate.pfx || certificate.cert || ''} />}
+    <GridListItem className="flex flex-col items-center justify-between gap-2 p-4 outline-none ring-inset focus:ring-1 focus:ring-[--hl-md]">
+      <div className="flex w-full items-center gap-2">
+        {Boolean(certificate.pfx || certificate.cert) && (
+          <Icon icon="file-contract" className="w-4" title={certificate.pfx || certificate.cert || ''} />
+        )}
         {certificate.key && <Icon icon="key" title={certificate.key} />}
-        <div className='flex-1 text-sm text-[--color-font] truncate'>{certificate.host}</div>
+        <div className="flex-1 truncate text-sm text-[--color-font]">{certificate.host}</div>
         {certificate.passphrase && (
-          <div className='flex items-center gap-2 truncate'>
-            <span className='text-sm'>{'Password:'}</span>
-            <div className='truncate text-sm'>
+          <div className="flex items-center gap-2 truncate">
+            <span className="text-sm">{'Password:'}</span>
+            <div className="truncate text-sm">
               <PasswordViewer text={certificate.passphrase} />
             </div>
           </div>
         )}
-        <div className='flex items-center gap-2 h-6'>
+        <div className="flex h-6 items-center gap-2">
           <ToggleButton
             data-test-id="client-certificate-toggle"
             onChange={isSelected => {
-              updateClientCertificateFetcher.submit({ ...certificate, disabled: !isSelected }, {
-                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/clientcert/update`,
-                method: 'post',
-                encType: 'application/json',
-              });
+              updateClientCertificateFetcher.submit(
+                { ...certificate, disabled: !isSelected },
+                {
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/clientcert/update`,
+                  method: 'post',
+                  encType: 'application/json',
+                },
+              );
             }}
             isSelected={!certificate.disabled}
-            className="w-[12ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 h-full rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex h-full w-[12ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
           >
             {({ isSelected }) => (
               <Fragment>
-                <Icon icon={isSelected ? 'toggle-on' : 'toggle-off'} className={`${isSelected ? 'text-[--color-success]' : ''}`} />
-                <span>{
-                  isSelected ? 'Enabled' : 'Disabled'
-                }</span>
+                <Icon
+                  icon={isSelected ? 'toggle-on' : 'toggle-off'}
+                  className={`${isSelected ? 'text-[--color-success]' : ''}`}
+                />
+                <span>{isSelected ? 'Enabled' : 'Disabled'}</span>
               </Fragment>
             )}
           </ToggleButton>
@@ -262,7 +295,7 @@ const ClientCertificateGridListItem = ({ certificate }: {
                 encType: 'application/json',
               });
             }}
-            className="flex flex-shrink-0 items-center justify-center aspect-square h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+            className="flex aspect-square h-full flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           >
             <Icon icon="trash" />
           </Button>
@@ -272,14 +305,14 @@ const ClientCertificateGridListItem = ({ certificate }: {
   );
 };
 
-export const CertificatesModal = ({ onClose }: {
-  onClose: () => void;
-}) => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+export const CertificatesModal = ({ onClose }: { onClose: () => void }) => {
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
 
-  const routeData = useRouteLoaderData(
-    ':workspaceId'
-  ) as WorkspaceLoaderData;
+  const routeData = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
 
   const [isAddClientCertificateModalOpen, setIsAddClientCertificateModalOpen] = useState(false);
 
@@ -287,10 +320,7 @@ export const CertificatesModal = ({ onClose }: {
   const deleteCertificateFetcher = useFetcher();
   const updateCertificateFetcher = useFetcher();
 
-  const {
-    caCertificate,
-    clientCertificates,
-  } = routeData;
+  const { caCertificate, clientCertificates } = routeData;
 
   if (!workspaceId) {
     return null;
@@ -303,72 +333,81 @@ export const CertificatesModal = ({ onClose }: {
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-full max-w-3xl h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex h-[calc(100%-var(--padding-xl))] w-full max-w-3xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden h-full'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl flex items-center gap-2'>Manage Certificates</Heading>
+            <div className="flex h-full flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="flex items-center gap-2 text-2xl">
+                  Manage Certificates
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded flex-1 w-full overflow-hidden basis-96 flex flex-col gap-6 select-none overflow-y-auto'>
-                <Heading className='text-xl'>CA Certificate</Heading>
-                <div className='flex flex-col gap-2'>
+              <div className="flex w-full flex-1 basis-96 select-none flex-col gap-6 overflow-hidden overflow-y-auto rounded">
+                <Heading className="text-xl">CA Certificate</Heading>
+                <div className="flex flex-col gap-2">
                   {caCertificate ? (
-                    <div className='flex gap-2 items-center justify-between rounded-sm border border-solid border-[--hl-sm] p-4'>
-                      <Icon icon="file-contract" className='w-4' />
-                      <div className='flex-1 text-sm text-[--color-font] truncate' title={caCertificate.path || ''}>{caCertificate?.path?.split('\\')?.pop()?.split('/')?.pop()}</div>
-                      <div className='flex items-center gap-2 h-6'>
+                    <div className="flex items-center justify-between gap-2 rounded-sm border border-solid border-[--hl-sm] p-4">
+                      <Icon icon="file-contract" className="w-4" />
+                      <div className="flex-1 truncate text-sm text-[--color-font]" title={caCertificate.path || ''}>
+                        {caCertificate?.path?.split('\\')?.pop()?.split('/')?.pop()}
+                      </div>
+                      <div className="flex h-6 items-center gap-2">
                         <ToggleButton
                           onChange={isSelected => {
-                            updateCertificateFetcher.submit({ _id: caCertificate._id, disabled: !isSelected }, {
-                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/cacert/update`,
-                              method: 'post',
-                              encType: 'application/json',
-                            });
+                            updateCertificateFetcher.submit(
+                              { _id: caCertificate._id, disabled: !isSelected },
+                              {
+                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/cacert/update`,
+                                method: 'post',
+                                encType: 'application/json',
+                              },
+                            );
                           }}
                           isSelected={!caCertificate.disabled}
-                          className="w-[12ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 h-full rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                          className="flex h-full w-[12ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                         >
                           {({ isSelected }) => (
                             <Fragment>
-                              <Icon icon={isSelected ? 'toggle-on' : 'toggle-off'} className={`${isSelected ? 'text-[--color-success]' : ''}`} />
-                              <span>{
-                                isSelected ? 'Enabled' : 'Disabled'
-                              }</span>
+                              <Icon
+                                icon={isSelected ? 'toggle-on' : 'toggle-off'}
+                                className={`${isSelected ? 'text-[--color-success]' : ''}`}
+                              />
+                              <span>{isSelected ? 'Enabled' : 'Disabled'}</span>
                             </Fragment>
                           )}
                         </ToggleButton>
                         <Button
                           isDisabled={deleteCertificateFetcher.state !== 'idle'}
                           onPress={() => {
-                            deleteCertificateFetcher.submit({}, {
-                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/cacert/delete`,
-                              method: 'delete',
-                            });
+                            deleteCertificateFetcher.submit(
+                              {},
+                              {
+                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/cacert/delete`,
+                                method: 'delete',
+                              },
+                            );
                           }}
-                          className="flex flex-shrink-0 items-center justify-center aspect-square h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                          className="flex aspect-square h-full flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                         >
                           <Icon icon="trash" />
                         </Button>
                       </div>
                     </div>
                   ) : (
-                    <div className='flex gap-2 items-center justify-between'>
+                    <div className="flex items-center justify-between gap-2">
                       <FileTrigger
                         acceptedFileTypes={['.pem']}
                         allowsMultiple={false}
@@ -379,33 +418,36 @@ export const CertificatesModal = ({ onClose }: {
                           const files = Array.from(fileList);
                           const file = files[0];
 
-                          createCertificateFetcher.submit({ parentId: workspaceId, path: window.webUtils.getPathForFile(file) }, {
-                            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/cacert/new`,
-                            method: 'post',
-                            encType: 'application/json',
-                          });
+                          createCertificateFetcher.submit(
+                            { parentId: workspaceId, path: window.webUtils.getPathForFile(file) },
+                            {
+                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/cacert/new`,
+                              method: 'post',
+                              encType: 'application/json',
+                            },
+                          );
                         }}
                       >
-                        <Button className="flex flex-1 flex-shrink-0 border-solid border border-[--hl-sm] py-1 gap-2 items-center justify-center px-2 h-full aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base">
+                        <Button className="flex h-full flex-1 flex-shrink-0 items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-sm] px-2 py-1 text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm]">
                           <Icon icon="plus" />
                           <span>Add CA Certificate</span>
                         </Button>
                       </FileTrigger>
                     </div>
                   )}
-                  <p className="text-sm text-[--hl] italic max-w-[80ch]">
-                    <Icon icon='info-circle' className='pr-2' />
-                    One or more PEM format certificates in a single file to pass to curl. Overrides the root CA certificate.
-                    On MacOS please upload your local Keychain certificates here.
+                  <p className="max-w-[80ch] text-sm italic text-[--hl]">
+                    <Icon icon="info-circle" className="pr-2" />
+                    One or more PEM format certificates in a single file to pass to curl. Overrides the root CA
+                    certificate. On MacOS please upload your local Keychain certificates here.
                   </p>
                 </div>
-                <div className='flex items-center gap-2 justify-between'>
-                  <Heading className='text-xl'>Client Certificates</Heading>
+                <div className="flex items-center justify-between gap-2">
+                  <Heading className="text-xl">Client Certificates</Heading>
                   <Button
                     onPress={() => {
                       setIsAddClientCertificateModalOpen(true);
                     }}
-                    className="flex flex-shrink-0 gap-2 items-center justify-center px-2 h-full aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
+                    className="flex h-full flex-shrink-0 items-center justify-center gap-2 rounded-sm px-2 text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-sm]"
                   >
                     <Icon icon="plus" />
                     <span>Add client certificate</span>
@@ -419,7 +461,7 @@ export const CertificatesModal = ({ onClose }: {
                   />
                 )}
                 <GridList
-                  className="border border-solid border-[--hl-md] rounded-sm divide-y divide-solid divide-[--hl-md] overflow-y-auto"
+                  className="divide-y divide-solid divide-[--hl-md] overflow-y-auto rounded-sm border border-solid border-[--hl-md]"
                   items={clientCertificates.map(cert => ({
                     cert,
                     id: cert._id,
@@ -429,10 +471,10 @@ export const CertificatesModal = ({ onClose }: {
                   {item => <ClientCertificateGridListItem certificate={item.cert} />}
                 </GridList>
               </div>
-              <div className='flex items-center gap-2 justify-end'>
+              <div className="flex items-center justify-end gap-2">
                 <Button
                   onPress={close}
-                  className="hover:no-underline hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                  className="rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:bg-opacity-90 hover:no-underline"
                 >
                   Done
                 </Button>
diff --git a/packages/insomnia/src/ui/components/modals/workspace-duplicate-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-duplicate-modal.tsx
index d8a9fd4e63..8a07d43cd3 100644
--- a/packages/insomnia/src/ui/components/modals/workspace-duplicate-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/workspace-duplicate-modal.tsx
@@ -45,26 +45,26 @@ export const WorkspaceDuplicateModal: FC<WorkspaceDuplicateModalProps> = ({ work
     modalRef.current?.show();
   }, []);
 
-  const isBtnDisabled = fetcher.state !== 'idle'
-    || !selectedProjectId
-    || !newWorkspaceName;
+  const isBtnDisabled = fetcher.state !== 'idle' || !selectedProjectId || !newWorkspaceName;
 
   return (
     <OverlayContainer onClick={e => e.stopPropagation()}>
       <Modal onHide={onHide} ref={modalRef}>
         <ModalHeader>Duplicate file</ModalHeader>
         <ModalBody className="wide">
-          <p className='mb-6'>You can duplicate the following file to a project:</p>
-          <div className="flex gap-2 px-[--padding-md] items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent">
-            <div className={`${scopeToBgColorMap[workspace.scope]} ${scopeToTextColorMap[workspace.scope]} px-2 flex justify-center items-center h-[20px] w-[20px] rounded-s-sm`}>
+          <p className="mb-6">You can duplicate the following file to a project:</p>
+          <div className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font]">
+            <div
+              className={`${scopeToBgColorMap[workspace.scope]} ${scopeToTextColorMap[workspace.scope]} flex h-[20px] w-[20px] items-center justify-center rounded-s-sm px-2`}
+            >
               <Icon icon={scopeToIconMap[workspace.scope]} />
             </div>
             <span>{workspace.name}</span>
-            <span className='text-[--hl]'>{getWorkspaceLabel(workspace).singular}</span>
+            <span className="text-[--hl]">{getWorkspaceLabel(workspace).singular}</span>
           </div>
           <fetcher.Form
             action={`/organization/${organizationId}/project/${workspace.parentId}/workspace/${workspace._id}/duplicate`}
-            method='post'
+            method="post"
             id="workspace-duplicate-form"
             className="wide pad"
           >
@@ -72,11 +72,7 @@ export const WorkspaceDuplicateModal: FC<WorkspaceDuplicateModalProps> = ({ work
             <div className="form-control form-control--outlined">
               <label>
                 New {getWorkspaceLabel(workspace).singular.toLowerCase()} name:
-                <input
-                  name="name"
-                  value={newWorkspaceName}
-                  onChange={e => setNewWorkspaceName(e.target.value)}
-                />
+                <input name="name" value={newWorkspaceName} onChange={e => setNewWorkspaceName(e.target.value)} />
               </label>
             </div>
             {!newWorkspaceName && (
@@ -107,7 +103,8 @@ export const WorkspaceDuplicateModal: FC<WorkspaceDuplicateModalProps> = ({ work
                 <select name="projectId" value={selectedProjectId} onChange={e => setSelectedProjectId(e.target.value)}>
                   {projectOptions.map(project => (
                     <option key={project._id} value={project._id}>
-                      {project.name}{project._id === currentProjectId && ' (current)'}
+                      {project.name}
+                      {project._id === currentProjectId && ' (current)'}
                     </option>
                   ))}
                 </select>
@@ -123,11 +120,7 @@ export const WorkspaceDuplicateModal: FC<WorkspaceDuplicateModalProps> = ({ work
                 Project is required
               </p>
             )}
-            {fetcher.data?.error && (
-              <p className="notice error margin-bottom-sm mt-6">
-                {fetcher.data.error}
-              </p>
-            )}
+            {fetcher.data?.error && <p className="notice error margin-bottom-sm mt-6">{fetcher.data.error}</p>}
           </fetcher.Form>
         </ModalBody>
         <ModalFooter>
@@ -140,12 +133,8 @@ export const WorkspaceDuplicateModal: FC<WorkspaceDuplicateModalProps> = ({ work
             >
               Cancel
             </button>
-            <button
-              disabled={isBtnDisabled}
-              form="workspace-duplicate-form"
-              className="btn"
-            >
-              {fetcher.state !== 'idle' && <Icon icon='spinner' className='animate-spin' />} Duplicate
+            <button disabled={isBtnDisabled} form="workspace-duplicate-form" className="btn">
+              {fetcher.state !== 'idle' && <Icon icon="spinner" className="animate-spin" />} Duplicate
             </button>
           </div>
         </ModalFooter>
diff --git a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx
index b123f3ce38..7526668ad4 100644
--- a/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx
@@ -1,11 +1,34 @@
 import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useMemo, useRef, useState } from 'react';
-import { Button, Dialog, DropIndicator, GridList, GridListItem, Heading, Label, Menu, MenuItem, MenuTrigger, Modal, ModalOverlay, Popover, Text, ToggleButton, useDragAndDrop } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  DropIndicator,
+  GridList,
+  GridListItem,
+  Heading,
+  Label,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Modal,
+  ModalOverlay,
+  Popover,
+  Text,
+  ToggleButton,
+  useDragAndDrop,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { docsAfterResponseScript, docsTemplateTags } from '../../../common/documentation';
 import { debounce } from '../../../common/misc';
-import { type Environment, type EnvironmentKvPairData, EnvironmentKvPairDataType, EnvironmentType, getDataFromKVPair } from '../../../models/environment';
+import {
+  type Environment,
+  type EnvironmentKvPairData,
+  EnvironmentKvPairDataType,
+  EnvironmentType,
+  getDataFromKVPair,
+} from '../../../models/environment';
 import { isRemoteProject } from '../../../models/project';
 import { responseTagRegex } from '../../../templating/utils';
 import { useOrganizationPermissions } from '../../hooks/use-organization-features';
@@ -17,13 +40,13 @@ import { handleToggleEnvironmentType } from '../editors/environment-utils';
 import { Icon } from '../icon';
 import { showAlert } from '.';
 
-export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
-  onClose: () => void;
-}) => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
-  const routeData = useRouteLoaderData(
-    ':workspaceId'
-  ) as WorkspaceLoaderData;
+export const WorkspaceEnvironmentsEditModal = ({ onClose }: { onClose: () => void }) => {
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
+  const routeData = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
   const environmentEditorRef = useRef<EnvironmentEditorHandle>(null);
 
   const { features } = useOrganizationPermissions();
@@ -33,13 +56,7 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
   const updateEnvironmentFetcher = useFetcher();
   const duplicateEnvironmentFetcher = useFetcher();
 
-  const {
-    baseEnvironment,
-    activeEnvironment,
-    subEnvironments,
-    activeProject,
-    activeWorkspaceMeta,
-  } = routeData;
+  const { baseEnvironment, activeEnvironment, subEnvironments, activeProject, activeWorkspaceMeta } = routeData;
   const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string>(activeEnvironment._id);
   const isUsingInsomniaCloudSync = Boolean(isRemoteProject(activeProject) && !activeWorkspaceMeta?.gitRepositoryId);
   const isUsingGitSync = Boolean(features.gitSync.enabled && activeWorkspaceMeta?.gitRepositoryId);
@@ -52,53 +69,59 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
     return false;
   }, [selectedEnvironment]);
   // Do not allowed to switch to json environment if contains secret item
-  const allowSwitchEnvironment = !selectedEnvironment?.kvPairData?.some(d => d.type === EnvironmentKvPairDataType.SECRET);
+  const allowSwitchEnvironment = !selectedEnvironment?.kvPairData?.some(
+    d => d.type === EnvironmentKvPairDataType.SECRET,
+  );
 
   const environmentActionsList: {
     id: string;
     name: string;
     icon: IconName;
     action: (environment: Environment) => void;
-  }[] = [{
-    id: 'duplicate',
-    name: 'Duplicate',
-    icon: 'copy',
-    action: async (environment: Environment) => {
-      duplicateEnvironmentFetcher.submit({
-        environmentId: environment._id,
+  }[] = [
+    {
+      id: 'duplicate',
+      name: 'Duplicate',
+      icon: 'copy',
+      action: async (environment: Environment) => {
+        duplicateEnvironmentFetcher.submit(
+          {
+            environmentId: environment._id,
+          },
+          {
+            method: 'post',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/duplicate`,
+          },
+        );
       },
-        {
-          method: 'post',
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/duplicate`,
+    },
+    {
+      id: 'delete',
+      name: 'Delete',
+      icon: 'trash',
+      action: async (environment: Environment) => {
+        showAlert({
+          title: 'Delete Environment',
+          message: `Are you sure you want to delete "${environment.name}"?`,
+          addCancel: true,
+          okLabel: 'Delete',
+          onConfirm: async () => {
+            deleteEnvironmentFetcher.submit(
+              {
+                environmentId: environment._id,
+              },
+              {
+                method: 'post',
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/delete`,
+              },
+            );
+
+            setSelectedEnvironmentId(baseEnvironment._id);
+          },
         });
       },
-    }, {
-        id: 'delete',
-        name: 'Delete',
-        icon: 'trash',
-        action: async (environment: Environment) => {
-          showAlert({
-            title: 'Delete Environment',
-            message: `Are you sure you want to delete "${environment.name}"?`,
-            addCancel: true,
-            okLabel: 'Delete',
-            onConfirm: async () => {
-              deleteEnvironmentFetcher.submit(
-                {
-                  environmentId: environment._id,
-                },
-                {
-                  method: 'post',
-                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/delete`,
-                }
-              );
-
-              setSelectedEnvironmentId(baseEnvironment._id);
-            },
-          });
-        },
-      },
-    ];
+    },
+  ];
 
   const createEnvironmentActionsList: {
     id: string;
@@ -107,72 +130,83 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
     icon: IconProp;
     action: (environment: Environment) => void;
   }[] = [
-      {
-        id: 'shared',
-        name: 'Shared environment',
-        description: `${isUsingGitSync ? 'Synced with Git Sync and exportable' : isUsingInsomniaCloudSync ? 'Synced with Insomnia Sync and exportable' : 'Exportable'}`,
-        icon: isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down',
-        action: async () => {
-          createEnvironmentFetcher.submit({
+    {
+      id: 'shared',
+      name: 'Shared environment',
+      description: `${isUsingGitSync ? 'Synced with Git Sync and exportable' : isUsingInsomniaCloudSync ? 'Synced with Insomnia Sync and exportable' : 'Exportable'}`,
+      icon: isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down',
+      action: async () => {
+        createEnvironmentFetcher.submit(
+          {
             isPrivate: false,
           },
-            {
-              method: 'post',
-              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
-              encType: 'application/json',
-            });
-        },
-      }, {
-        id: 'private',
-        name: 'Private environment',
+          {
+            method: 'post',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
+            encType: 'application/json',
+          },
+        );
+      },
+    },
+    {
+      id: 'private',
+      name: 'Private environment',
       description: 'Local and not exportable',
       icon: 'lock',
-        action: async () => {
-          createEnvironmentFetcher.submit({
+      action: async () => {
+        createEnvironmentFetcher.submit(
+          {
             isPrivate: true,
           },
-            {
-              method: 'post',
-              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
-              encType: 'application/json',
-            });
-        },
+          {
+            method: 'post',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
+            encType: 'application/json',
+          },
+        );
       },
-    ];
+    },
+  ];
 
   const debouncedHandleChange = debounce((value: EnvironmentInfo) => {
     if (environmentEditorRef.current?.isValid() && selectedEnvironment) {
       const { object, propertyOrder } = value;
 
-      updateEnvironmentFetcher.submit({
-        patch: {
-          data: object,
-          dataPropertyOrder: propertyOrder,
+      updateEnvironmentFetcher.submit(
+        {
+          patch: {
+            data: object,
+            dataPropertyOrder: propertyOrder,
+          },
+          environmentId: selectedEnvironment._id,
         },
-        environmentId: selectedEnvironment._id,
-      }, {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-        encType: 'application/json',
-      });
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+          encType: 'application/json',
+        },
+      );
     }
   }, 500);
 
   const handleKVPairChange = (kvPairData: EnvironmentKvPairData[]) => {
     if (selectedEnvironment) {
       const environmentData = getDataFromKVPair(kvPairData);
-      updateEnvironmentFetcher.submit(JSON.stringify({
-        patch: {
-          data: environmentData.data,
-          dataPropertyOrder: environmentData.dataPropertyOrder,
-          kvPairData,
+      updateEnvironmentFetcher.submit(
+        JSON.stringify({
+          patch: {
+            data: environmentData.data,
+            dataPropertyOrder: environmentData.dataPropertyOrder,
+            kvPairData,
+          },
+          environmentId: selectedEnvironment._id,
+        }),
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+          encType: 'application/json',
         },
-        environmentId: selectedEnvironment._id,
-      }), {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-        encType: 'application/json',
-      });
+      );
     }
   };
   const environmentsDragAndDrop = useDragAndDrop({
@@ -204,33 +238,27 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
         }
       }
 
-      updateEnvironmentFetcher.submit({
-        patch: { metaSortKey: sourceEnv.metaSortKey },
-        environmentId: sourceEnv._id,
-      }, {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-        encType: 'application/json',
-      });
+      updateEnvironmentFetcher.submit(
+        {
+          patch: { metaSortKey: sourceEnv.metaSortKey },
+          environmentId: sourceEnv._id,
+        },
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+          encType: 'application/json',
+        },
+      );
     },
     renderDropIndicator(target) {
       if (target.type === 'item') {
         if (target.dropPosition === 'before' && target.key === baseEnvironment._id) {
-          return <DropIndicator
-            target={target}
-            className="hidden"
-          />;
+          return <DropIndicator target={target} className="hidden" />;
         }
-        return <DropIndicator
-          target={target}
-          className="outline-[--color-surprise] outline-1 outline"
-        />;
+        return <DropIndicator target={target} className="outline outline-1 outline-[--color-surprise]" />;
       }
 
-      return <DropIndicator
-        target={target}
-        className="outline-[--color-surprise] outline-1 outline"
-      />;
+      return <DropIndicator target={target} className="outline outline-1 outline-[--color-surprise]" />;
     },
   });
 
@@ -240,36 +268,36 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-[calc(100%-var(--padding-xl))] h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex h-[calc(100%-var(--padding-xl))] w-[calc(100%-var(--padding-xl))] flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
-            <div className='flex-1 flex flex-col gap-4 overflow-hidden h-full'>
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl'>Manage Environments</Heading>
+            <div className="flex h-full flex-1 flex-col gap-4 overflow-hidden">
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="text-2xl">
+                  Manage Environments
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded flex-1 w-full overflow-hidden divide-x divide-solid divide-[--hl-md] basis-96 flex border border-solid border-[--hl-sm] select-none overflow-y-auto'>
+              <div className="flex w-full flex-1 basis-96 select-none divide-x divide-solid divide-[--hl-md] overflow-hidden overflow-y-auto rounded border border-solid border-[--hl-sm]">
                 <GridList
                   aria-label="Environments"
                   items={[baseEnvironment, ...subEnvironments]}
-                  className="overflow-y-auto max-w-xs w-full flex-shrink-0 data-[empty]:py-0 py-[--padding-xs]"
+                  className="w-full max-w-xs flex-shrink-0 overflow-y-auto py-[--padding-xs] data-[empty]:py-0"
                   disallowEmptySelection
                   selectionMode="single"
-                  selectionBehavior='replace'
+                  selectionBehavior="replace"
                   selectedKeys={[selectedEnvironmentId]}
                   dragAndDropHooks={environmentsDragAndDrop.dragAndDropHooks}
                   onSelectionChange={keys => {
@@ -285,15 +313,23 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
                         key={item._id}
                         id={item._id}
                         textValue={item.name}
-                        className="group outline-none select-none"
+                        className="group select-none outline-none"
                       >
-                        <div className={`${item.parentId === workspaceId ? 'pl-4' : 'pl-8'} pr-4 flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]`}>
-                          <span className="group-aria-selected:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
+                        <div
+                          className={`${item.parentId === workspaceId ? 'pl-4' : 'pl-8'} relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden pr-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]`}
+                        >
+                          <span className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors group-aria-selected:bg-[--color-surprise]" />
                           <Icon
                             icon={
-                              item.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'
+                              item.isPrivate
+                                ? 'lock'
+                                : isUsingGitSync
+                                  ? ['fab', 'git-alt']
+                                  : isUsingInsomniaCloudSync
+                                    ? 'globe-americas'
+                                    : 'file-arrow-down'
                             }
-                            className='w-5'
+                            className="w-5"
                             style={{
                               color: item.color || undefined,
                             }}
@@ -302,86 +338,88 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
                             value={item.name}
                             name="name"
                             ariaLabel="Environment name"
-                            className="px-1 flex-1 hover:!bg-transparent"
+                            className="flex-1 px-1 hover:!bg-transparent"
                             onSubmit={name => {
-                              name && updateEnvironmentFetcher.submit({
-                                patch: {
-                                  name,
-                                },
-                                environmentId: item._id,
-                              }, {
-                                method: 'post',
-                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                                encType: 'application/json',
-                              });
+                              name &&
+                                updateEnvironmentFetcher.submit(
+                                  {
+                                    patch: {
+                                      name,
+                                    },
+                                    environmentId: item._id,
+                                  },
+                                  {
+                                    method: 'post',
+                                    action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                                    encType: 'application/json',
+                                  },
+                                );
                             }}
                           />
-                          {item.parentId !== workspaceId && <MenuTrigger>
-                            <Button
-                              aria-label="Environment Actions"
-                              className="opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                            >
-                              <Icon icon="caret-down" />
-                            </Button>
-                            <Popover className="min-w-max overflow-y-hidden flex flex-col">
-                              <Menu
-                                aria-label="Environment Actions menu"
-                                selectionMode="single"
-                                onAction={key => {
-                                  environmentActionsList
-                                    .find(({ id }) => key === id)
-                                    ?.action(item);
-                                }}
-                                items={environmentActionsList}
-                                className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
-                              >
-                                {item => (
-                                  <MenuItem
-                                    key={item.id}
-                                    id={item.id}
-                                    className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                                    aria-label={item.name}
-                                  >
-                                    <Icon className='w-5' icon={item.icon} />
-                                    <span>{item.name}</span>
-                                  </MenuItem>
-                                )}
-                              </Menu>
-                            </Popover>
-                          </MenuTrigger>}
-                          {item.parentId === workspaceId && (
+                          {item.parentId !== workspaceId && (
                             <MenuTrigger>
                               <Button
-                                aria-label="Create Environment"
-                                data-testid="CreateEnvironmentDropdown"
-                                className="items-center flex justify-center h-6 aspect-square data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                                aria-label="Environment Actions"
+                                className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 data-[pressed]:bg-[--hl-sm] data-[pressed]:opacity-100"
                               >
-                                <Icon icon="plus-circle" />
+                                <Icon icon="caret-down" />
                               </Button>
-                              <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                              <Popover className="flex min-w-max flex-col overflow-y-hidden">
                                 <Menu
-                                  aria-label="Create Environment menu"
+                                  aria-label="Environment Actions menu"
                                   selectionMode="single"
                                   onAction={key => {
-                                    createEnvironmentActionsList
-                                      .find(({ id }) => key === id)
-                                      ?.action(item);
+                                    environmentActionsList.find(({ id }) => key === id)?.action(item);
                                   }}
-                                  items={createEnvironmentActionsList}
-                                  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                                  items={environmentActionsList}
+                                  className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                                 >
                                   {item => (
                                     <MenuItem
                                       key={item.id}
                                       id={item.id}
-                                      className="flex flex-col gap-1 px-[--padding-md] py-2 aria-selected:font-bold text-[--color-font] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                                       aria-label={item.name}
                                     >
-                                      <div className='flex gap-2 items-center'>
-                                        <Icon className='w-5' icon={item.icon} />
+                                      <Icon className="w-5" icon={item.icon} />
+                                      <span>{item.name}</span>
+                                    </MenuItem>
+                                  )}
+                                </Menu>
+                              </Popover>
+                            </MenuTrigger>
+                          )}
+                          {item.parentId === workspaceId && (
+                            <MenuTrigger>
+                              <Button
+                                aria-label="Create Environment"
+                                data-testid="CreateEnvironmentDropdown"
+                                className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] data-[pressed]:bg-[--hl-sm]"
+                              >
+                                <Icon icon="plus-circle" />
+                              </Button>
+                              <Popover className="flex min-w-max flex-col overflow-y-hidden">
+                                <Menu
+                                  aria-label="Create Environment menu"
+                                  selectionMode="single"
+                                  onAction={key => {
+                                    createEnvironmentActionsList.find(({ id }) => key === id)?.action(item);
+                                  }}
+                                  items={createEnvironmentActionsList}
+                                  className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
+                                >
+                                  {item => (
+                                    <MenuItem
+                                      key={item.id}
+                                      id={item.id}
+                                      className="text-md flex w-full flex-col gap-1 whitespace-nowrap bg-transparent px-[--padding-md] py-2 text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                                      aria-label={item.name}
+                                    >
+                                      <div className="flex items-center gap-2">
+                                        <Icon className="w-5" icon={item.icon} />
                                         <span>{item.name}</span>
                                       </div>
-                                      <Text slot="description" className='text-xs text-[--hl]'>
+                                      <Text slot="description" className="text-xs text-[--hl]">
                                         {item.description}
                                       </Text>
                                     </MenuItem>
@@ -395,45 +433,64 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
                     );
                   }}
                 </GridList>
-                <div className='flex-1 flex flex-col divide-solid divide-y divide-[--hl-md] overflow-hidden'>
-                  <div className='flex items-center justify-between gap-2 w-full px-[--padding-sm] overflow-hidden'>
-                    <Heading className='flex items-center flex-grow gap-2 text-lg py-2 px-4 overflow-hidden'>
-                      <Icon style={{ color: selectedEnvironment?.color || '' }} className='w-4' icon={selectedEnvironment?.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'} />
+                <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+                  <div className="flex w-full items-center justify-between gap-2 overflow-hidden px-[--padding-sm]">
+                    <Heading className="flex flex-grow items-center gap-2 overflow-hidden px-4 py-2 text-lg">
+                      <Icon
+                        style={{ color: selectedEnvironment?.color || '' }}
+                        className="w-4"
+                        icon={
+                          selectedEnvironment?.isPrivate
+                            ? 'lock'
+                            : isUsingGitSync
+                              ? ['fab', 'git-alt']
+                              : isUsingInsomniaCloudSync
+                                ? 'globe-americas'
+                                : 'file-arrow-down'
+                        }
+                      />
                       <EditableInput
                         value={selectedEnvironment?.name || ''}
                         name="name"
                         ariaLabel="Environment name"
-                        className="px-1 flex-1"
+                        className="flex-1 px-1"
                         onSubmit={name => {
-                          name && updateEnvironmentFetcher.submit({
-                            patch: {
-                              name,
-                            },
-                            environmentId: selectedEnvironmentId,
-                          }, {
-                            method: 'post',
-                            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                            encType: 'application/json',
-                          });
+                          name &&
+                            updateEnvironmentFetcher.submit(
+                              {
+                                patch: {
+                                  name,
+                                },
+                                environmentId: selectedEnvironmentId,
+                              },
+                              {
+                                method: 'post',
+                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                                encType: 'application/json',
+                              },
+                            );
                         }}
                       />
                     </Heading>
                     {selectedEnvironment && selectedEnvironment.parentId !== workspaceId && (
-                      <Label className='mr-2 ml-auto flex-shrink-0 flex items-center gap-2 py-1 px-2 bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'>
+                      <Label className="ml-auto mr-2 flex flex-shrink-0 items-center gap-2 rounded-sm bg-[--hl-sm] px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] data-[pressed]:bg-[--hl-sm]">
                         <span>Color:</span>
                         <input
                           onChange={e => {
                             const color = e.target.value;
-                            updateEnvironmentFetcher.submit({
-                              patch: {
-                                color,
+                            updateEnvironmentFetcher.submit(
+                              {
+                                patch: {
+                                  color,
+                                },
+                                environmentId: selectedEnvironment._id,
                               },
-                              environmentId: selectedEnvironment._id,
-                            }, {
-                              method: 'post',
-                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                              encType: 'application/json',
-                            });
+                              {
+                                method: 'post',
+                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                                encType: 'application/json',
+                              },
+                            );
                           }}
                           type="color"
                           value={selectedEnvironment?.color || ''}
@@ -443,29 +500,45 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
                     {selectedEnvironment && allowSwitchEnvironment && (
                       <ToggleButton
                         onChange={isSelected => {
-                          const toggleSwitchEnvironmentType = (newEnvironmentType: EnvironmentType, kvPairData: EnvironmentKvPairData[]) => {
-                            updateEnvironmentFetcher.submit(JSON.stringify({
-                              patch: {
-                                environmentType: newEnvironmentType,
-                                kvPairData: kvPairData,
+                          const toggleSwitchEnvironmentType = (
+                            newEnvironmentType: EnvironmentType,
+                            kvPairData: EnvironmentKvPairData[],
+                          ) => {
+                            updateEnvironmentFetcher.submit(
+                              JSON.stringify({
+                                patch: {
+                                  environmentType: newEnvironmentType,
+                                  kvPairData: kvPairData,
+                                },
+                                environmentId: selectedEnvironment._id,
+                              }),
+                              {
+                                method: 'post',
+                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                                encType: 'application/json',
                               },
-                              environmentId: selectedEnvironment._id,
-                            }), {
-                              method: 'post',
-                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                              encType: 'application/json',
-                            });
+                            );
                           };
                           const isValidJSON = !!environmentEditorRef.current?.isValid();
-                          handleToggleEnvironmentType(isSelected, selectedEnvironment, isValidJSON, toggleSwitchEnvironmentType);
+                          handleToggleEnvironmentType(
+                            isSelected,
+                            selectedEnvironment,
+                            isValidJSON,
+                            toggleSwitchEnvironmentType,
+                          );
                         }}
                         isSelected={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR}
-                        className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
-                        aria-label={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR ? 'Table Edit' : 'Raw Edit'}
+                        className="flex w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
+                        aria-label={
+                          selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR ? 'Table Edit' : 'Raw Edit'
+                        }
                       >
                         {({ isSelected }) => (
                           <Fragment>
-                            <Icon icon={!isSelected ? 'toggle-on' : 'toggle-off'} className={`${!isSelected ? 'text-[--color-success]' : ''}`} />
+                            <Icon
+                              icon={!isSelected ? 'toggle-on' : 'toggle-off'}
+                              className={`${!isSelected ? 'text-[--color-success]' : ''}`}
+                            />
                             <span>Table View</span>
                           </Fragment>
                         )}
@@ -473,41 +546,48 @@ export const WorkspaceEnvironmentsEditModal = ({ onClose }: {
                     )}
                   </div>
                   {/* legacy JSON environment do not have environmentType property*/}
-                  {selectedEnvironment && (selectedEnvironment.environmentType === EnvironmentType.JSON || !selectedEnvironment.environmentType) && (
-                    <EnvironmentEditor
-                      ref={environmentEditorRef}
-                      key={selectedEnvironment._id}
-                      onChange={debouncedHandleChange}
-                      environmentInfo={{
-                        object: selectedEnvironment.data,
-                        propertyOrder: selectedEnvironment.dataPropertyOrder,
-                      }}
-                    />
-                  )}
-                  {selectedEnvironment && selectedEnvironment.environmentType === EnvironmentType.KVPAIR &&
+                  {selectedEnvironment &&
+                    (selectedEnvironment.environmentType === EnvironmentType.JSON ||
+                      !selectedEnvironment.environmentType) && (
+                      <EnvironmentEditor
+                        ref={environmentEditorRef}
+                        key={selectedEnvironment._id}
+                        onChange={debouncedHandleChange}
+                        environmentInfo={{
+                          object: selectedEnvironment.data,
+                          propertyOrder: selectedEnvironment.dataPropertyOrder,
+                        }}
+                      />
+                    )}
+                  {selectedEnvironment && selectedEnvironment.environmentType === EnvironmentType.KVPAIR && (
                     <EnvironmentKVEditor
                       key={selectedEnvironment._id}
                       data={selectedEnvironment.kvPairData || []}
                       onChange={handleKVPairChange}
                     />
-                  }
+                  )}
                 </div>
               </div>
-              <div className='flex items-center gap-2 justify-between'>
-                <div className='flex flex-col gap-1'>
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex flex-col gap-1">
                   {/* Warning message when user uses response tag in environment variable and suggest to user after-response script INS-4243 */}
-                  {hasResponseTagEnvironmentVariable &&
-                    <p className='text-sm italic warning'>
-                      <Icon icon="exclamation-circle" /><a href={docsAfterResponseScript}> We suggest to save your response into an environment variable using after-response script.</a>
+                  {hasResponseTagEnvironmentVariable && (
+                    <p className="warning text-sm italic">
+                      <Icon icon="exclamation-circle" />
+                      <a href={docsAfterResponseScript}>
+                        {' '}
+                        We suggest to save your response into an environment variable using after-response script.
+                      </a>
                     </p>
-                  }
-                  <p className='text-sm italic'>
-                    * Environment data can be used for <a href={docsTemplateTags}>Nunjucks Templating</a> in your requests.
+                  )}
+                  <p className="text-sm italic">
+                    * Environment data can be used for <a href={docsTemplateTags}>Nunjucks Templating</a> in your
+                    requests.
                   </p>
                 </div>
                 <Button
                   onPress={close}
-                  className="hover:no-underline hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                  className="rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:bg-opacity-90 hover:no-underline"
                 >
                   Close
                 </Button>
diff --git a/packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx b/packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx
index 7d4e12bd1a..f1586d1252 100644
--- a/packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/workspace-settings-modal.tsx
@@ -1,5 +1,18 @@
 import React, { useEffect, useState } from 'react';
-import { Button, Dialog, FieldError, Form, Heading, Input, Label, Modal, ModalOverlay, Radio, RadioGroup, TextField } from 'react-aria-components';
+import {
+  Button,
+  Dialog,
+  FieldError,
+  Form,
+  Heading,
+  Input,
+  Label,
+  Modal,
+  ModalOverlay,
+  Radio,
+  RadioGroup,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { database as db } from '../../../common/database';
@@ -11,7 +24,12 @@ import { isRequest } from '../../../models/request';
 import { isEnvironment, isMockServer, isScratchpad, type Workspace } from '../../../models/workspace';
 import { safeToUseInsomniaFileName, safeToUseInsomniaFileNameWithExt } from '../../routes/actions';
 import type { GetRepositoryDirectoryTreeResult } from '../../routes/git-project-actions';
-import { DEFAULT_STORAGE_RULES, fetchAndCacheOrganizationStorageRule, type OrganizationLoaderData, type StorageRules } from '../../routes/organization';
+import {
+  DEFAULT_STORAGE_RULES,
+  fetchAndCacheOrganizationStorageRule,
+  type OrganizationLoaderData,
+  type StorageRules,
+} from '../../routes/organization';
 import { Link } from '../base/link';
 import { PromptButton } from '../base/prompt-button';
 import { Icon } from '../icon';
@@ -26,7 +44,11 @@ interface Props {
 }
 
 export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockServer, onClose }: Props) => {
-  const { organizationId, projectId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
   const { currentPlan } = useRouteLoaderData('/organization') as OrganizationLoaderData;
   const [orgStorageRules, setOrgStorageRules] = useState<StorageRules>(DEFAULT_STORAGE_RULES);
   const [description, setDescription] = useState<string>(workspace.description);
@@ -54,11 +76,14 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
   const workspaceFetcher = useFetcher();
 
   const workspacePatcher = (workspaceId: string, patch: Partial<Workspace>) => {
-    workspaceFetcher.submit({ ...patch, workspaceId }, {
-      action: `/organization/${organizationId}/project/${projectId}/workspace/update`,
-      method: 'post',
-      encType: 'application/json',
-    });
+    workspaceFetcher.submit(
+      { ...patch, workspaceId },
+      {
+        action: `/organization/${organizationId}/project/${projectId}/workspace/update`,
+        method: 'post',
+        encType: 'application/json',
+      },
+    );
   };
 
   useEffect(() => {
@@ -80,20 +105,18 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
       onOpenChange={isOpen => {
         !isOpen && onClose();
       }}
-      className="w-full h-[--visual-viewport-height] fixed z-10 top-0 left-0 flex items-center justify-center bg-black/30"
+      className="fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-full items-center justify-center bg-black/30"
     >
       <Modal
         onOpenChange={isOpen => {
           !isOpen && onClose();
         }}
-        className="flex flex-col w-full max-w-3xl h-max max-h-[calc(100%-var(--padding-xl))] rounded-md border border-solid border-[--hl-sm] p-[--padding-lg] bg-[--color-bg] text-[--color-font]"
+        className="flex h-max max-h-[calc(100%-var(--padding-xl))] w-full max-w-3xl flex-col rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] p-[--padding-lg] text-[--color-font]"
       >
-        <Dialog
-          className="outline-none flex-1 h-full flex flex-col overflow-hidden"
-        >
+        <Dialog className="flex h-full flex-1 flex-col overflow-hidden outline-none">
           {({ close }) => (
             <Form
-              validationBehavior='native'
+              validationBehavior="native"
               onSubmit={event => {
                 event.preventDefault();
 
@@ -102,31 +125,31 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                 const data = Object.fromEntries(formData.entries());
                 workspacePatcher(workspace._id, data);
               }}
-              className='flex-1 flex flex-col gap-4 overflow-hidden h-full'
+              className="flex h-full flex-1 flex-col gap-4 overflow-hidden"
             >
-              <div className='flex gap-2 items-center justify-between'>
-                <Heading slot="title" className='text-2xl flex items-center gap-2'>{getWorkspaceLabel(workspace).singular} Settings{' '}</Heading>
+              <div className="flex items-center justify-between gap-2">
+                <Heading slot="title" className="flex items-center gap-2 text-2xl">
+                  {getWorkspaceLabel(workspace).singular} Settings{' '}
+                </Heading>
                 <Button
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={close}
                 >
                   <Icon icon="x" />
                 </Button>
               </div>
-              <div className='rounded flex-1 w-full overflow-hidden basis-96 flex flex-col gap-2 select-none overflow-y-auto'>
+              <div className="flex w-full flex-1 basis-96 select-none flex-col gap-2 overflow-hidden overflow-y-auto rounded">
                 <TextField
                   name="name"
                   isRequired
                   isReadOnly={isScratchpadWorkspace}
                   defaultValue={activeWorkspaceName}
-                  className="group relative flex-shrink-0 flex flex-col gap-2 overflow-hidden max-w-full"
+                  className="group relative flex max-w-full flex-shrink-0 flex-col gap-2 overflow-hidden"
                 >
-                  <Label className='text-sm text-[--hl]'>
-                    Name
-                  </Label>
+                  <Label className="text-sm text-[--hl]">Name</Label>
                   <Input
-                    placeholder='Awesome API'
-                    className='p-2 w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors'
+                    placeholder="Awesome API"
+                    className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] p-2 text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                   />
                 </TextField>
                 {project && isGitProject(project) && gitRepoTreeFetcher.data && (
@@ -134,35 +157,39 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                     name="fileName"
                     isRequired
                     validate={fileName => {
-                      if (selectedFolderChildren.filter(name => name !== fileName).includes(safeToUseInsomniaFileNameWithExt(fileName))) {
+                      if (
+                        selectedFolderChildren
+                          .filter(name => name !== fileName)
+                          .includes(safeToUseInsomniaFileNameWithExt(fileName))
+                      ) {
                         return 'A file with the same name already exists in the selected folder';
                       }
 
                       return null;
                     }}
                     defaultValue={safeToUseInsomniaFileName(fileName || '')}
-                    className="group relative w-full flex-shrink-0 flex flex-col gap-2 overflow-hidden max-w-full"
+                    className="group relative flex w-full max-w-full flex-shrink-0 flex-col gap-2 overflow-hidden"
                   >
                     <Label className="group relative flex flex-col gap-2 overflow-hidden">
-                      <span className='text-sm text-[--hl]'>
-                        File name
-                      </span>
+                      <span className="text-sm text-[--hl]">File name</span>
 
-                      <div className="overflow-hidden grid [grid-template-columns:min-content_auto] [grid-template-areas:'input_extension'] focus:outline-none py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:ring-1 focus:ring-[--hl-md] transition-colors">
+                      <div className="grid w-full overflow-hidden rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors [grid-template-areas:'input_extension'] [grid-template-columns:min-content_auto] focus:outline-none focus:ring-1 focus:ring-[--hl-md]">
                         <Input
                           placeholder={workspace.name ? safeToUseInsomniaFileName(workspace.name) : 'name'}
-                          className="[grid-area:input] placeholder:italic outline-none focus:outline-none w-full min-w-[3ch]"
+                          className="w-full min-w-[3ch] outline-none [grid-area:input] placeholder:italic focus:outline-none"
                         />
-                        <span className='[grid-area:input] -z-10 opacity-0 truncate w-min'>{safeToUseInsomniaFileName(fileName || workspace.name || 'name')}</span>
-                        <span className='[grid-area:extension] text-[--hl]'>.yaml</span>
+                        <span className="-z-10 w-min truncate opacity-0 [grid-area:input]">
+                          {safeToUseInsomniaFileName(fileName || workspace.name || 'name')}
+                        </span>
+                        <span className="text-[--hl] [grid-area:extension]">.yaml</span>
                       </div>
                     </Label>
-                    <FieldError className='text-red-500 text-xs' />
+                    <FieldError className="text-xs text-red-500" />
                   </TextField>
                 )}
                 {!isMockServer(workspace) && (
                   <>
-                    <Label className='text-sm text-[--hl]' aria-label='Description'>
+                    <Label className="text-sm text-[--hl]" aria-label="Description">
                       Description
                     </Label>
                     <MarkdownEditor
@@ -173,7 +200,7 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                         setDescription(description);
                       }}
                     />
-                    <Input name="description" className='sr-only' value={description} />
+                    <Input name="description" className="sr-only" value={description} />
                     {!isEnvironment(workspace) && (
                       <>
                         <Heading>Actions</Heading>
@@ -186,7 +213,7 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                             }
                             close();
                           }}
-                          className="width-auto btn btn--clicky inline-block space-left"
+                          className="width-auto btn btn--clicky space-left inline-block"
                         >
                           <i className="fa fa-trash-o" /> Clear All Responses
                         </PromptButton>
@@ -208,27 +235,23 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                       }}
                       className="flex flex-col gap-2"
                     >
-                      <Label className="text-sm text-[--hl]">
-                        Mock server type
-                      </Label>
+                      <Label className="text-sm text-[--hl]">Mock server type</Label>
                       <div className="flex gap-2">
                         <Radio
                           value="cloud"
                           isDisabled={isCloudProjectDisabled}
-                          className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                          className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                         >
-                          <div className='flex items-center gap-2'>
+                          <div className="flex items-center gap-2">
                             <Icon icon="globe" />
                             <Heading className="text-lg font-bold">Cloud Mock</Heading>
                           </div>
-                          <p className='pt-2'>
-                            Runs on Insomnia cloud, ideal for collaboration.
-                          </p>
+                          <p className="pt-2">Runs on Insomnia cloud, ideal for collaboration.</p>
                         </Radio>
                         <Radio
                           value="self-hosted"
                           isDisabled={isSelfHostedDisabled}
-                          className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                          className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                         >
                           <div className="flex items-center gap-2">
                             <Icon icon="server" />
@@ -239,12 +262,15 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                           </p>
                         </Radio>
                       </div>
-                      <FieldError className="text-red-500 text-xs" />
+                      <FieldError className="text-xs text-red-500" />
                     </RadioGroup>
                     <div className="flex items-center gap-2 text-sm">
                       <Icon icon="info-circle" />
                       <span>
-                        To learn more about self hosting <Link href="https://docs.insomnia.rest/insomnia/api-mocking" className='underline'>click here</Link>
+                        To learn more about self hosting{' '}
+                        <Link href="https://docs.insomnia.rest/insomnia/api-mocking" className="underline">
+                          click here
+                        </Link>
                       </span>
                     </div>
                     {!isSelfHostedDisabled && (
@@ -252,25 +278,23 @@ export const WorkspaceSettingsModal = ({ workspace, gitFilePath, project, mockSe
                         autoFocus
                         name="mockServerUrl"
                         defaultValue={mockServer?.url || ''}
-                        className={`group relative flex-1 flex flex-col gap-2 ${mockServer?.useInsomniaCloud ? 'disabled' : ''}`}
+                        className={`group relative flex flex-1 flex-col gap-2 ${mockServer?.useInsomniaCloud ? 'disabled' : ''}`}
                       >
-                        <Label className='text-sm text-[--hl]'>
-                          Self-hosted mock server URL
-                        </Label>
+                        <Label className="text-sm text-[--hl]">Self-hosted mock server URL</Label>
                         <Input
                           disabled={mockServer?.useInsomniaCloud}
                           placeholder={mockServer?.useInsomniaCloud ? '' : 'https://example.com'}
-                          className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
+                          className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                         />
                       </TextField>
                     )}
                   </>
                 )}
               </div>
-              <div className='flex items-center gap-2 justify-end'>
+              <div className="flex items-center justify-end gap-2">
                 <Button
-                  type='submit'
-                  className="hover:no-underline hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font] transition-colors rounded-sm"
+                  type="submit"
+                  className="rounded-sm border border-solid border-[--hl-md] px-3 py-2 text-[--color-font] transition-colors hover:bg-opacity-90 hover:no-underline"
                 >
                   Update
                 </Button>
diff --git a/packages/insomnia/src/ui/components/modals/wrapper-modal.tsx b/packages/insomnia/src/ui/components/modals/wrapper-modal.tsx
index 9e32f02e6c..64921c1be4 100644
--- a/packages/insomnia/src/ui/components/modals/wrapper-modal.tsx
+++ b/packages/insomnia/src/ui/components/modals/wrapper-modal.tsx
@@ -25,15 +25,19 @@ export const WrapperModal = forwardRef<WrapperModalHandle, ModalProps>((props, r
     wide: false,
   });
 
-  useImperativeHandle(ref, () => ({
-    hide: () => {
-      modalRef.current?.hide();
-    },
-    show: options => {
-      setState(options);
-      modalRef.current?.show();
-    },
-  }), []);
+  useImperativeHandle(
+    ref,
+    () => ({
+      hide: () => {
+        modalRef.current?.hide();
+      },
+      show: options => {
+        setState(options);
+        modalRef.current?.show();
+      },
+    }),
+    [],
+  );
 
   const { title, body, tall, skinny, wide } = state;
 
@@ -43,6 +47,5 @@ export const WrapperModal = forwardRef<WrapperModalHandle, ModalProps>((props, r
       <ModalBody>{body}</ModalBody>
     </Modal>
   );
-
 });
 WrapperModal.displayName = 'WrapperModal';
diff --git a/packages/insomnia/src/ui/components/organization-avatar.tsx b/packages/insomnia/src/ui/components/organization-avatar.tsx
index b46395d8a5..7406d298f8 100644
--- a/packages/insomnia/src/ui/components/organization-avatar.tsx
+++ b/packages/insomnia/src/ui/components/organization-avatar.tsx
@@ -24,33 +24,22 @@ const getNameInitials = (name: string) => {
 
 const Avatar = ({ src, alt }: { src: string; alt: string }) => {
   const imageUrl = useAvatarImageCache(src);
-  return (
-    <img
-      alt={alt}
-      src={imageUrl}
-      className="h-full w-full aspect-square object-cover"
-      aria-label={alt}
-    />
-  );
+  return <img alt={alt} src={imageUrl} className="aspect-square h-full w-full object-cover" aria-label={alt} />;
 };
 
-export const OrganizationAvatar = ({
-  src,
-  alt,
-}: {
-  src: string;
-  alt: string;
-}) => {
+export const OrganizationAvatar = ({ src, alt }: { src: string; alt: string }) => {
   if (!src) {
     return (
-      <div className="flex items-center justify-center w-full h-full p-[--padding-md]">
-        {getNameInitials(alt)}
-      </div>
+      <div className="flex h-full w-full items-center justify-center p-[--padding-md]">{getNameInitials(alt)}</div>
     );
   }
 
   return (
-    <Suspense fallback={<div className='flex items-center justify-center w-full h-full p-[--padding-md]'>{getNameInitials(alt)}</div>}>
+    <Suspense
+      fallback={
+        <div className="flex h-full w-full items-center justify-center p-[--padding-md]">{getNameInitials(alt)}</div>
+      }
+    >
       <Avatar src={src} alt={alt} />
     </Suspense>
   );
diff --git a/packages/insomnia/src/ui/components/panes/empty-state-pane.tsx b/packages/insomnia/src/ui/components/panes/empty-state-pane.tsx
index ec66275785..70a07f6a60 100644
--- a/packages/insomnia/src/ui/components/panes/empty-state-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/empty-state-pane.tsx
@@ -9,37 +9,25 @@ export const EmptyStatePane: FC<{
     title: string;
     url: string;
   }[];
-}> = ({
-  icon,
-  title,
-  secondaryAction,
-  documentationLinks,
-}) => (
-  <div className="h-full overflow-hidden flex justify-center items-center pointer-events-none">
-    <div className="flex flex-col items-center justify-center p-4 md:p-8 text-center opacity-80">
-      <div className="text-9xl mb-4 opacity-50">{icon}</div>
+}> = ({ icon, title, secondaryAction, documentationLinks }) => (
+  <div className="pointer-events-none flex h-full items-center justify-center overflow-hidden">
+    <div className="flex flex-col items-center justify-center p-4 text-center opacity-80 md:p-8">
+      <div className="mb-4 text-9xl opacity-50">{icon}</div>
       <div className="font-bold">{title}</div>
       {Boolean(secondaryAction) && (
         <>
-          <div className="h-1 bg-font mt-4 mb-4 max-w-500 w-full opacity-20" />
+          <div className="bg-font max-w-500 mb-4 mt-4 h-1 w-full opacity-20" />
           <div>{secondaryAction}</div>
         </>
       )}
-      <div className="mt-8 mb-4 flex flex-col items-center justify-end flex-wrap">
+      <div className="mb-4 mt-8 flex flex-col flex-wrap items-center justify-end">
         {documentationLinks.map(({ title, url }) => (
-            <a
-              key={title}
-              href={url}
-              className="flex mt-4 text-font font-normal pointer-events-auto"
-            >
-              {title}
-              <SvgIcon
-                icon="jump"
-                className="pl-2"
-              />
-            </a>
-          ))}
-        </div>
+          <a key={title} href={url} className="text-font pointer-events-auto mt-4 flex font-normal">
+            {title}
+            <SvgIcon icon="jump" className="pl-2" />
+          </a>
+        ))}
       </div>
     </div>
-  );
+  </div>
+);
diff --git a/packages/insomnia/src/ui/components/panes/grpc-request-pane.tsx b/packages/insomnia/src/ui/components/panes/grpc-request-pane.tsx
index f6aa93ef21..a234b32869 100644
--- a/packages/insomnia/src/ui/components/panes/grpc-request-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/grpc-request-pane.tsx
@@ -54,15 +54,9 @@ export const GrpcMethodTypeName = {
   bidi: 'Bi-directional Streaming',
 } as const;
 
-export const GrpcRequestPane: FunctionComponent<Props> = ({
-  grpcState,
-  setGrpcState,
-  reloadRequests,
-}) => {
+export const GrpcRequestPane: FunctionComponent<Props> = ({ grpcState, setGrpcState, reloadRequests }) => {
   const { activeRequest } = useRouteLoaderData('request/:requestId') as GrpcRequestLoaderData;
-  const {
-    activeEnvironment,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeEnvironment } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
   const environmentId = activeEnvironment._id;
   const { settings } = useRootLoaderData();
   const [isProtoModalOpen, setIsProtoModalOpen] = useState(false);
@@ -73,21 +67,24 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
       const methods = await window.main.grpc.loadMethods(activeRequest.protoFileId);
       setGrpcState({ ...grpcState, methods });
     } else if (activeRequest.url && activeRequest.reflectionApi) {
-      const requestGroups = (await db.withAncestors<GrpcRequest | RequestGroup>(activeRequest, [models.requestGroup.type])).filter(isRequestGroup);
-      const rendered =
-        await tryToInterpolateRequestOrShowRenderErrorModal({
-          request: activeRequest,
-          environmentId,
-          payload: {
-            url: activeRequest.url,
-            metadata: getOrInheritHeaders({ request: { headers: activeRequest.metadata }, requestGroups }),
-            reflectionApi: activeRequest.reflectionApi,
-          },
-        });
+      const requestGroups = (
+        await db.withAncestors<GrpcRequest | RequestGroup>(activeRequest, [models.requestGroup.type])
+      ).filter(isRequestGroup);
+      const rendered = await tryToInterpolateRequestOrShowRenderErrorModal({
+        request: activeRequest,
+        environmentId,
+        payload: {
+          url: activeRequest.url,
+          metadata: getOrInheritHeaders({ request: { headers: activeRequest.metadata }, requestGroups }),
+          reflectionApi: activeRequest.reflectionApi,
+        },
+      });
 
       const workspaceClientCertificates = await models.clientCertificate.findByParentId(workspaceId);
-      const clientCertificate = workspaceClientCertificates.find(c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, 'grpc:'), rendered.url, false));
-      const caCertificate = (await models.caCertificate.findByParentId(workspaceId));
+      const clientCertificate = workspaceClientCertificates.find(
+        c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, 'grpc:'), rendered.url, false),
+      );
+      const caCertificate = await models.caCertificate.findByParentId(workspaceId);
       const caCertificatePath = caCertificate && !caCertificate.disabled ? caCertificate.path : undefined;
       const clientCert = clientCertificate?.cert ? await readFile(clientCertificate?.cert, 'utf8') : undefined;
       const clientKey = clientCertificate?.key ? await readFile(clientCertificate?.key, 'utf8') : undefined;
@@ -95,11 +92,13 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
       const renderedWithCertificates = {
         ...rendered,
         rejectUnauthorized: settings.validateSSL,
-        ...(activeRequest.url.toLowerCase().startsWith('grpcs:') ? {
-          clientCert,
-          clientKey,
-          caCertificate: caCertificatePath ? await readFile(caCertificatePath, 'utf8') : undefined,
-        } : {}),
+        ...(activeRequest.url.toLowerCase().startsWith('grpcs:')
+          ? {
+              clientCert,
+              clientKey,
+              caCertificate: caCertificatePath ? await readFile(caCertificatePath, 'utf8') : undefined,
+            }
+          : {}),
       };
       const methods = await window.main.grpc.loadMethodsFromReflection(renderedWithCertificates);
       setGrpcState({ ...grpcState, methods });
@@ -120,17 +119,24 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
   const handleRequestSend = async () => {
     if (method && !running) {
       try {
-        const requestGroups = (await db.withAncestors<GrpcRequest | RequestGroup>(activeRequest, [models.requestGroup.type])).filter(isRequestGroup);
+        const requestGroups = (
+          await db.withAncestors<GrpcRequest | RequestGroup>(activeRequest, [models.requestGroup.type])
+        ).filter(isRequestGroup);
         const request = await getRenderedGrpcRequest({
           // split off the metadata from the request
-          request: { ...activeRequest, metadata: getOrInheritHeaders({ request: { headers: activeRequest.metadata }, requestGroups }) },
+          request: {
+            ...activeRequest,
+            metadata: getOrInheritHeaders({ request: { headers: activeRequest.metadata }, requestGroups }),
+          },
           environment: environmentId,
           purpose: 'send',
           skipBody: canClientStream(methodType),
         });
         const workspaceClientCertificates = await models.clientCertificate.findByParentId(workspaceId);
-        const clientCertificate = workspaceClientCertificates.find(c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, 'grpc:'), request.url, false));
-        const caCertificate = (await models.caCertificate.findByParentId(workspaceId));
+        const clientCertificate = workspaceClientCertificates.find(
+          c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, 'grpc:'), request.url, false),
+        );
+        const caCertificate = await models.caCertificate.findByParentId(workspaceId);
         const caCertificatePath = caCertificate && !caCertificate.disabled ? caCertificate.path : undefined;
 
         updateTabById?.(requestId, { temporary: false });
@@ -138,11 +144,13 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
         window.main.grpc.start({
           request,
           rejectUnauthorized: settings.validateSSL,
-          ...(request.url.toLowerCase().startsWith('grpcs:') ? {
-            clientCert: clientCertificate?.cert ? await readFile(clientCertificate?.cert || '', 'utf8') : undefined,
-            clientKey: clientCertificate?.key ? await readFile(clientCertificate?.key || '', 'utf8') : undefined,
-            caCertificate: caCertificatePath ? await readFile(caCertificatePath, 'utf8') : undefined,
-          } : {}),
+          ...(request.url.toLowerCase().startsWith('grpcs:')
+            ? {
+                clientCert: clientCertificate?.cert ? await readFile(clientCertificate?.cert || '', 'utf8') : undefined,
+                clientKey: clientCertificate?.key ? await readFile(clientCertificate?.key || '', 'utf8') : undefined,
+                caCertificate: caCertificatePath ? await readFile(caCertificatePath, 'utf8') : undefined,
+              }
+            : {}),
         });
         setGrpcState({
           ...grpcState,
@@ -171,7 +179,6 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
           });
         }
       }
-
     }
   };
 
@@ -179,15 +186,20 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
     request_send: handleRequestSend,
   });
 
-  const messageTabs = [{ id: 'body', name: 'Body', text: activeRequest.body.text }, ...requestMessages.sort((a, b) => a.created - b.created).map((msg, index) => ({ ...msg, name: `Stream ${index + 1}` }))];
+  const messageTabs = [
+    { id: 'body', name: 'Body', text: activeRequest.body.text },
+    ...requestMessages
+      .sort((a, b) => a.created - b.created)
+      .map((msg, index) => ({ ...msg, name: `Stream ${index + 1}` })),
+  ];
 
   return (
     <>
       <Pane type="request">
         <PaneHeader>
-          <div className="w-full h-full flex flex-row justify-between items-stretch">
+          <div className="flex h-full w-full flex-row items-stretch justify-between">
             <div className="method-grpc pad-right pad-left vertically-center">gRPC</div>
-            <div className='flex-1' title={activeRequest.url}>
+            <div className="flex-1" title={activeRequest.url}>
               <OneLineEditor
                 id="grpc-url"
                 key={uniquenessKey}
@@ -198,7 +210,7 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
                 getAutocompleteConstants={() => queryAllWorkspaceUrls(workspaceId, models.grpcRequest.type, requestId)}
               />
             </div>
-            <div className="flex-1 flex items-center pr-[--padding-sm] gap-[--padding-xs]">
+            <div className="flex flex-1 items-center gap-[--padding-xs] pr-[--padding-sm]">
               <GrpcMethodDropdown
                 disabled={running}
                 methods={methods}
@@ -234,31 +246,40 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
                 disabled={!activeRequest.url}
                 onClick={async () => {
                   try {
-                    const requestGroups = (await db.withAncestors<GrpcRequest | RequestGroup>(activeRequest, [models.requestGroup.type])).filter(isRequestGroup);
-                    let rendered =
-                      await tryToInterpolateRequestOrShowRenderErrorModal({
-                        request: activeRequest,
-                        environmentId,
-                        payload: {
-                          url: activeRequest.url,
-                          metadata: getOrInheritHeaders({ request: { headers: activeRequest.metadata }, requestGroups }),
-                          reflectionApi: activeRequest.reflectionApi,
-                        },
-                      });
+                    const requestGroups = (
+                      await db.withAncestors<GrpcRequest | RequestGroup>(activeRequest, [models.requestGroup.type])
+                    ).filter(isRequestGroup);
+                    let rendered = await tryToInterpolateRequestOrShowRenderErrorModal({
+                      request: activeRequest,
+                      environmentId,
+                      payload: {
+                        url: activeRequest.url,
+                        metadata: getOrInheritHeaders({ request: { headers: activeRequest.metadata }, requestGroups }),
+                        reflectionApi: activeRequest.reflectionApi,
+                      },
+                    });
                     const workspaceClientCertificates = await models.clientCertificate.findByParentId(workspaceId);
-                    const clientCertificate = workspaceClientCertificates.find(c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, 'grpc:'), rendered.url, false));
-                    const caCertificate = (await models.caCertificate.findByParentId(workspaceId));
+                    const clientCertificate = workspaceClientCertificates.find(
+                      c => !c.disabled && urlMatchesCertHost(setDefaultProtocol(c.host, 'grpc:'), rendered.url, false),
+                    );
+                    const caCertificate = await models.caCertificate.findByParentId(workspaceId);
                     const caCertificatePath = caCertificate && !caCertificate.disabled ? caCertificate.path : undefined;
-                    const clientCert = clientCertificate?.cert ? await readFile(clientCertificate?.cert, 'utf8') : undefined;
-                    const clientKey = clientCertificate?.key ? await readFile(clientCertificate?.key, 'utf8') : undefined;
+                    const clientCert = clientCertificate?.cert
+                      ? await readFile(clientCertificate?.cert, 'utf8')
+                      : undefined;
+                    const clientKey = clientCertificate?.key
+                      ? await readFile(clientCertificate?.key, 'utf8')
+                      : undefined;
                     rendered = {
                       ...rendered,
                       rejectUnauthorized: settings.validateSSL,
-                      ...(activeRequest.url.toLowerCase().startsWith('grpcs:') ? {
-                        clientCert,
-                        clientKey,
-                        caCertificate: caCertificatePath ? await readFile(caCertificatePath, 'utf8') : undefined,
-                      } : {}),
+                      ...(activeRequest.url.toLowerCase().startsWith('grpcs:')
+                        ? {
+                            clientCert,
+                            clientKey,
+                            caCertificate: caCertificatePath ? await readFile(caCertificatePath, 'utf8') : undefined,
+                          }
+                        : {}),
                     };
                     const methods = await window.main.grpc.loadMethodsFromReflection(rendered);
                     setGrpcState({ ...grpcState, methods });
@@ -272,17 +293,13 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
                   <i className="fa fa-refresh" />
                 </Tooltip>
               </Button>
-              <Button
-                data-testid="button-proto-file"
-                variant="text"
-                onClick={() => setIsProtoModalOpen(true)}
-              >
+              <Button data-testid="button-proto-file" variant="text" onClick={() => setIsProtoModalOpen(true)}>
                 <Tooltip message="Click to change proto file" position="bottom" delay={500}>
                   <i className="fa fa-file-code-o" />
                 </Tooltip>
               </Button>
             </div>
-            <div className='flex p-1'>
+            <div className="flex p-1">
               <GrpcSendButton
                 running={running}
                 methodType={methodType}
@@ -293,27 +310,33 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
           </div>
         </PaneHeader>
         <PaneBody>
-          <Tabs aria-label='Grpc request pane tabs' className="flex-1 w-full h-full flex flex-col">
-            <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+          <Tabs aria-label="Grpc request pane tabs" className="flex h-full w-full flex-1 flex-col">
+            <TabList
+              className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+              aria-label="Request pane tabs"
+            >
               {methodType && (
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='method-type'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="method-type"
                 >
                   {GrpcMethodTypeName[methodType]}
                 </Tab>
               )}
-              <Tab className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300' id='headers'>
+              <Tab
+                className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                id="headers"
+              >
                 Headers
               </Tab>
             </TabList>
             {methodType && (
-              <TabPanel className={'w-full h-full overflow-y-auto'} id='method-type'>
+              <TabPanel className={'h-full w-full overflow-y-auto'} id="method-type">
                 <>
                   {running && canClientStream(methodType) && (
-                    <div className="flex flex-row justify-end box-border h-[var(--line-height-sm)] border-b border-[var(--hl-lg)] p-1">
+                    <div className="box-border flex h-[var(--line-height-sm)] flex-row justify-end border-b border-[var(--hl-lg)] p-1">
                       <button
-                        className='btn btn--compact btn--clicky-small margin-left-sm bg-default'
+                        className="btn btn--compact btn--clicky-small margin-left-sm bg-default"
                         onClick={async () => {
                           const requestBody = await getRenderedGrpcRequestMessage({
                             request: activeRequest,
@@ -326,36 +349,47 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
                           };
                           window.main.grpc.sendMessage(preparedMessage);
                           setGrpcState({
-                            ...grpcState, requestMessages: [...requestMessages, {
-                              id: generateId(),
-                              text: preparedMessage.body.text || '',
-                              created: Date.now(),
-                            }],
+                            ...grpcState,
+                            requestMessages: [
+                              ...requestMessages,
+                              {
+                                id: generateId(),
+                                text: preparedMessage.body.text || '',
+                                created: Date.now(),
+                              },
+                            ],
                           });
                         }}
                       >
-                        Stream <i className='fa fa-plus' />
+                        Stream <i className="fa fa-plus" />
                       </button>
                       <button
-                        className='btn btn--compact btn--clicky-small margin-left-sm bg-surprise'
+                        className="btn btn--compact btn--clicky-small margin-left-sm bg-surprise"
                         onClick={() => window.main.grpc.commit(requestId)}
                       >
-                        Commit <i className='fa fa-arrow-right' />
+                        Commit <i className="fa fa-arrow-right" />
                       </button>
                     </div>
                   )}
-                  <Tabs key={uniquenessKey} aria-label="Grpc tabbed messages tabs" className="flex-1 w-full h-full flex flex-col">
-                    <TabList items={messageTabs} className='w-full flex-shrink-0 overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]'>
+                  <Tabs
+                    key={uniquenessKey}
+                    aria-label="Grpc tabbed messages tabs"
+                    className="flex h-full w-full flex-1 flex-col"
+                  >
+                    <TabList
+                      items={messageTabs}
+                      className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+                    >
                       {item => (
                         <Tab
-                          className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
+                          className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
                           id={item.id}
                         >
                           {item.name}
                         </Tab>
                       )}
                     </TabList>
-                    <TabPanel id="body" className='w-full h-full overflow-y-auto'>
+                    <TabPanel id="body" className="h-full w-full overflow-y-auto">
                       <CodeEditor
                         id="grpc-request-editor"
                         ref={editorRef}
@@ -366,23 +400,25 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
                         showPrettifyButton={true}
                       />
                     </TabPanel>
-                    {messageTabs.filter(msg => msg.id !== 'body').map(m => (
-                      <TabPanel key={m.id} id={m.id} className='w-full h-full overflow-y-auto'>
-                        <CodeEditor
-                          id={'grpc-request-editor-tab' + m.id}
-                          defaultValue={m.text}
-                          mode="application/json"
-                          enableNunjucks
-                          readOnly
-                          autoPrettify
-                        />
-                      </TabPanel>
-                    ))}
+                    {messageTabs
+                      .filter(msg => msg.id !== 'body')
+                      .map(m => (
+                        <TabPanel key={m.id} id={m.id} className="h-full w-full overflow-y-auto">
+                          <CodeEditor
+                            id={'grpc-request-editor-tab' + m.id}
+                            defaultValue={m.text}
+                            mode="application/json"
+                            enableNunjucks
+                            readOnly
+                            autoPrettify
+                          />
+                        </TabPanel>
+                      ))}
                   </Tabs>
                 </>
               </TabPanel>
             )}
-            <TabPanel className={'w-full h-full overflow-y-auto'} id='headers'>
+            <TabPanel className={'h-full w-full overflow-y-auto'} id="headers">
               <ErrorBoundary key={uniquenessKey} errorClassName="font-error pad text-center">
                 <KeyValueEditor
                   namePlaceholder="header"
@@ -399,31 +435,33 @@ export const GrpcRequestPane: FunctionComponent<Props> = ({
           </Tabs>
         </PaneBody>
       </Pane>
-      {isProtoModalOpen && <ProtoFilesModal
-        reloadRequests={reloadRequests}
-        defaultId={activeRequest.protoFileId}
-        onHide={() => setIsProtoModalOpen(false)}
-        onSave={async (protoFileId: string) => {
-          if (!protoFileId) {
-            patchRequest(requestId, { protoFileId: '', protoMethodName: '' });
-            setGrpcState({ ...grpcState, methods: [] });
-            setIsProtoModalOpen(false);
-          } else {
-            try {
-              const methods = await window.main.grpc.loadMethods(protoFileId);
-              patchRequest(requestId, { protoFileId, protoMethodName: '' });
-              setGrpcState({ ...grpcState, methods });
+      {isProtoModalOpen && (
+        <ProtoFilesModal
+          reloadRequests={reloadRequests}
+          defaultId={activeRequest.protoFileId}
+          onHide={() => setIsProtoModalOpen(false)}
+          onSave={async (protoFileId: string) => {
+            if (!protoFileId) {
+              patchRequest(requestId, { protoFileId: '', protoMethodName: '' });
+              setGrpcState({ ...grpcState, methods: [] });
               setIsProtoModalOpen(false);
-            } catch (error) {
-              showError({
-                title: 'Invalid Proto File',
-                message: 'The proto file could not be parsed',
-                error,
-              });
+            } else {
+              try {
+                const methods = await window.main.grpc.loadMethods(protoFileId);
+                patchRequest(requestId, { protoFileId, protoMethodName: '' });
+                setGrpcState({ ...grpcState, methods });
+                setIsProtoModalOpen(false);
+              } catch (error) {
+                showError({
+                  title: 'Invalid Proto File',
+                  message: 'The proto file could not be parsed',
+                  error,
+                });
+              }
             }
-          }
-        }}
-      />}
+          }}
+        />
+      )}
     </>
   );
 };
diff --git a/packages/insomnia/src/ui/components/panes/grpc-response-pane.tsx b/packages/insomnia/src/ui/components/panes/grpc-response-pane.tsx
index 576b6676d8..17ea113159 100644
--- a/packages/insomnia/src/ui/components/panes/grpc-response-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/grpc-response-pane.tsx
@@ -9,33 +9,39 @@ interface Props {
   grpcState: GrpcRequestState;
 }
 
-export const GrpcResponsePane: FunctionComponent<Props> = ({ grpcState: { running, responseMessages, status, error } }) => {
+export const GrpcResponsePane: FunctionComponent<Props> = ({
+  grpcState: { running, responseMessages, status, error },
+}) => {
   const messageTabs = responseMessages.map((m, index) => ({ id: m.id, text: m.text, name: `Response ${index + 1}` }));
   return (
     <Pane type="response">
       <PaneHeader className="row-spaced">
         <div className="no-wrap scrollable scrollable--no-bars pad-left">
-          {running && <i className='fa fa-refresh fa-spin margin-right-sm' />}
+          {running && <i className="fa fa-refresh fa-spin margin-right-sm" />}
           {status && <GrpcStatusTag statusCode={status.code} statusMessage={status.details} />}
           {!status && error && <GrpcStatusTag statusMessage={error.message} />}
         </div>
       </PaneHeader>
-      <PaneBody >
-        {responseMessages.length
-          ? (
-            <Tabs aria-label="Grpc tabbed messages tabs" className="flex-1 w-full h-full flex flex-col">
-              <TabList items={messageTabs} className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]'>
-                {item => (
-                  <Tab
-                    className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                    id={item.id}
-                  >
-                    {item.name}
-                  </Tab>
-                )}
-              </TabList>
-              {messageTabs.filter(msg => msg.id !== 'body').map(m => (
-                <TabPanel key={m.id} id={m.id} className='w-full h-full overflow-y-auto'>
+      <PaneBody>
+        {responseMessages.length ? (
+          <Tabs aria-label="Grpc tabbed messages tabs" className="flex h-full w-full flex-1 flex-col">
+            <TabList
+              items={messageTabs}
+              className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+            >
+              {item => (
+                <Tab
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id={item.id}
+                >
+                  {item.name}
+                </Tab>
+              )}
+            </TabList>
+            {messageTabs
+              .filter(msg => msg.id !== 'body')
+              .map(m => (
+                <TabPanel key={m.id} id={m.id} className="h-full w-full overflow-y-auto">
                   <CodeEditor
                     id={'grpc-request-editor-tab' + m.id}
                     defaultValue={m.text}
@@ -46,10 +52,8 @@ export const GrpcResponsePane: FunctionComponent<Props> = ({ grpcState: { runnin
                   />
                 </TabPanel>
               ))}
-            </Tabs>
-          )
-          : null
-        }
+          </Tabs>
+        ) : null}
       </PaneBody>
     </Pane>
   );
diff --git a/packages/insomnia/src/ui/components/panes/no-project-view.tsx b/packages/insomnia/src/ui/components/panes/no-project-view.tsx
index 6661d95693..477929b5cc 100644
--- a/packages/insomnia/src/ui/components/panes/no-project-view.tsx
+++ b/packages/insomnia/src/ui/components/panes/no-project-view.tsx
@@ -8,15 +8,16 @@ interface Props {
   isGitSyncEnabled: boolean;
 }
 
-export const NoProjectView: FC<Props> = ({
-  storageRules,
-  isGitSyncEnabled,
-}) => {
+export const NoProjectView: FC<Props> = ({ storageRules, isGitSyncEnabled }) => {
   return (
-    <div className='flex flex-col items-center pt-[15%] w-full h-full text-center gap-3'>
-      <span className='font-semibold text-xl'>Welcome to your organization!</span>
-      <span className='text-md'>Create a new project to get started</span>
-      <ProjectSettingsForm storageRules={storageRules} isGitSyncEnabled={isGitSyncEnabled} defaultProjectName="My first project" />
+    <div className="flex h-full w-full flex-col items-center gap-3 pt-[15%] text-center">
+      <span className="text-xl font-semibold">Welcome to your organization!</span>
+      <span className="text-md">Create a new project to get started</span>
+      <ProjectSettingsForm
+        storageRules={storageRules}
+        isGitSyncEnabled={isGitSyncEnabled}
+        defaultProjectName="My first project"
+      />
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/panes/pane.tsx b/packages/insomnia/src/ui/components/panes/pane.tsx
index 4caaf220ba..9f79aac5f7 100644
--- a/packages/insomnia/src/ui/components/panes/pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/pane.tsx
@@ -22,14 +22,10 @@ export const Pane: FC<PropsWithChildren<PaneProps>> = ({ className, type, childr
 );
 
 export const PaneHeader: FC<PropsWithChildren<PaneHeaderProps>> = ({ className, children }) => (
-  <header className={classnames('pane__header', 'theme--pane__header', className)}>
-    {children}
-  </header>
+  <header className={classnames('pane__header', 'theme--pane__header', className)}>{children}</header>
 );
 
 export const paneBodyClasses = 'pane__body theme--pane__body';
 export const PaneBody: FC<PropsWithChildren<PaneBodyProps>> = ({ placeholder, children }) => (
-  <div className={classnames(paneBodyClasses, placeholder && 'pane__body--placeholder')}>
-    {children}
-  </div>
+  <div className={classnames(paneBodyClasses, placeholder && 'pane__body--placeholder')}>{children}</div>
 );
diff --git a/packages/insomnia/src/ui/components/panes/placeholder-request-pane.tsx b/packages/insomnia/src/ui/components/panes/placeholder-request-pane.tsx
index f215cc979e..14dd5702bc 100644
--- a/packages/insomnia/src/ui/components/panes/placeholder-request-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/placeholder-request-pane.tsx
@@ -6,19 +6,26 @@ import { Hotkey } from '../hotkey';
 import { Pane, PaneBody, PaneHeader } from './pane';
 
 export const PlaceholderRequestPane: FC = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const { hotKeyRegistry } = settings;
   const requestFetcher = useFetcher();
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
-  const createHttpRequest = useCallback(() =>
-    requestFetcher.submit({ requestType: 'HTTP', parentId: workspaceId },
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new`,
-        method: 'post',
-        encType: 'application/json',
-      }), [requestFetcher, organizationId, projectId, workspaceId]);
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
+  const createHttpRequest = useCallback(
+    () =>
+      requestFetcher.submit(
+        { requestType: 'HTTP', parentId: workspaceId },
+        {
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new`,
+          method: 'post',
+          encType: 'application/json',
+        },
+      ),
+    [requestFetcher, organizationId, projectId, workspaceId],
+  );
 
   return (
     <Pane type="request">
@@ -31,10 +38,7 @@ export const PlaceholderRequestPane: FC = () => {
                 <td>New Request</td>
                 <td className="text-right">
                   <code>
-                    <Hotkey
-                      keyBindings={hotKeyRegistry.request_createHTTP}
-                      useFallbackMessage
-                    />
+                    <Hotkey keyBindings={hotKeyRegistry.request_createHTTP} useFallbackMessage />
                   </code>
                 </td>
               </tr>
@@ -42,10 +46,7 @@ export const PlaceholderRequestPane: FC = () => {
                 <td>Switch Requests</td>
                 <td className="text-right">
                   <code>
-                    <Hotkey
-                      keyBindings={hotKeyRegistry.request_quickSwitch}
-                      useFallbackMessage
-                    />
+                    <Hotkey keyBindings={hotKeyRegistry.request_quickSwitch} useFallbackMessage />
                   </code>
                 </td>
               </tr>
@@ -53,18 +54,15 @@ export const PlaceholderRequestPane: FC = () => {
                 <td>Edit Environments</td>
                 <td className="text-right">
                   <code>
-                    <Hotkey
-                      keyBindings={hotKeyRegistry.environment_showEditor}
-                      useFallbackMessage
-                    />
+                    <Hotkey keyBindings={hotKeyRegistry.environment_showEditor} useFallbackMessage />
                   </code>
                 </td>
               </tr>
             </tbody>
           </table>
 
-          <div className="text-center pane__body--placeholder__cta">
-            <button className="btn inline-block btn--clicky" onClick={createHttpRequest}>
+          <div className="pane__body--placeholder__cta text-center">
+            <button className="btn btn--clicky inline-block" onClick={createHttpRequest}>
               New HTTP Request
             </button>
           </div>
diff --git a/packages/insomnia/src/ui/components/panes/placeholder-response-pane.tsx b/packages/insomnia/src/ui/components/panes/placeholder-response-pane.tsx
index a2a7dff2d0..04900cf37b 100644
--- a/packages/insomnia/src/ui/components/panes/placeholder-response-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/placeholder-response-pane.tsx
@@ -7,9 +7,7 @@ import { Hotkey } from '../hotkey';
 import { Pane, PaneBody, PaneHeader } from './pane';
 
 export const PlaceholderResponsePane: FC<PropsWithChildren<{}>> = ({ children }) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const { hotKeyRegistry } = settings;
   return (
     <Pane type="response">
@@ -23,15 +21,10 @@ export const PlaceholderResponsePane: FC<PropsWithChildren<{}>> = ({ children })
             'environment_showEditor',
             'preferences_showKeyboardShortcuts',
           ].map(shortcut => (
-            <div key={shortcut} className="flex items-center justify-between w-full m-[--padding-sm]">
-              <div className="mr-8">
-                {keyboardShortcutDescriptions[shortcut as KeyboardShortcut]}
-              </div>
+            <div key={shortcut} className="m-[--padding-sm] flex w-full items-center justify-between">
+              <div className="mr-8">{keyboardShortcutDescriptions[shortcut as KeyboardShortcut]}</div>
               <code>
-                <Hotkey
-                  keyBindings={hotKeyRegistry[shortcut as KeyboardShortcut]}
-                  useFallbackMessage
-                />
+                <Hotkey keyBindings={hotKeyRegistry[shortcut as KeyboardShortcut]} useFallbackMessage />
               </code>
             </div>
           ))}
diff --git a/packages/insomnia/src/ui/components/panes/request-group-pane.tsx b/packages/insomnia/src/ui/components/panes/request-group-pane.tsx
index 8d2a70c961..b9808dc195 100644
--- a/packages/insomnia/src/ui/components/panes/request-group-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/request-group-pane.tsx
@@ -65,111 +65,104 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => {
 
   return (
     <>
-      <Tabs aria-label='Request group tabs' className="flex-1 w-full h-full flex flex-col">
-        <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+      <Tabs aria-label="Request group tabs" className="flex h-full w-full flex-1 flex-col">
+        <TabList
+          className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+          aria-label="Request pane tabs"
+        >
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='auth'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="auth"
           >
             <span>Auth</span>
             {!isNoneOrInherited && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='headers'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="headers"
           >
             <span>Headers</span>
             {headersCount > 0 && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
                 {headersCount}
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='scripts'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="scripts"
           >
             <span>Scripts</span>
             {Boolean(activeRequestGroup.preRequestScript || activeRequestGroup.afterResponseScript) && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='environment'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="environment"
           >
             Environment
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='docs'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="docs"
           >
             Docs
           </Tab>
         </TabList>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='auth'>
-          <ErrorBoundary
-            key={uniqueKey}
-            errorClassName="font-error pad text-center"
-          >
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="auth">
+          <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
             <AuthWrapper authentication={activeRequestGroup.authentication} />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1 overflow-y-auto ' id='headers'>
-          <ErrorBoundary
-            key={uniqueKey}
-            errorClassName="font-error pad text-center"
-          >
-            <RequestHeadersEditor
-              bulk={false}
-              headers={folderHeaders}
-              requestType="RequestGroup"
-            />
+        <TabPanel className="w-full flex-1 overflow-y-auto" id="headers">
+          <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
+            <RequestHeadersEditor bulk={false} headers={folderHeaders} requestType="RequestGroup" />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1' id='scripts'>
-          <Tabs className="w-full h-full flex flex-col overflow-hidden">
-            <TabList className="w-full flex-shrink-0 overflow-x-auto border-solid border-b border-b-[--hl-md] px-2 bg-[--color-bg] flex items-center gap-2 h-[--line-height-sm]" aria-label="Request scripts tabs">
+        <TabPanel className="w-full flex-1" id="scripts">
+          <Tabs className="flex h-full w-full flex-col overflow-hidden">
+            <TabList
+              className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center gap-2 overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg] px-2"
+              aria-label="Request scripts tabs"
+            >
               <Tab
-                className="rounded-md flex-shrink-0 h-[--line-height-xxs] text-sm flex items-center justify-between cursor-pointer w-[10.5rem] outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300"
+                className="flex h-[--line-height-xxs] w-[10.5rem] flex-shrink-0 cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 text-sm text-[--hl] outline-none transition-colors duration-300 hover:bg-[rgba(var(--color-surprise-rgb),50%)] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] aria-selected:text-[--color-font-surprise]"
                 id="pre-request"
               >
-                <div className='flex flex-1 items-center gap-2'>
+                <div className="flex flex-1 items-center gap-2">
                   <Icon icon="arrow-right-to-bracket" />
                   <span>Pre-request</span>
                 </div>
                 {Boolean(activeRequestGroup.preRequestScript) && (
-                  <span className="p-2 rounded-lg">
-                    <span className="flex w-2 h-2 bg-green-500 rounded-full" />
+                  <span className="rounded-lg p-2">
+                    <span className="flex h-2 w-2 rounded-full bg-green-500" />
                   </span>
                 )}
               </Tab>
               <Tab
-                className="rounded-md flex-shrink-0 h-[--line-height-xxs] text-sm flex items-center justify-between cursor-pointer w-[10.5rem] outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300"
+                className="flex h-[--line-height-xxs] w-[10.5rem] flex-shrink-0 cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 text-sm text-[--hl] outline-none transition-colors duration-300 hover:bg-[rgba(var(--color-surprise-rgb),50%)] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] aria-selected:text-[--color-font-surprise]"
                 id="after-response"
               >
-                <div className='flex flex-1 items-center gap-2'>
+                <div className="flex flex-1 items-center gap-2">
                   <Icon icon="arrow-right-from-bracket" />
                   <span>After-response</span>
                 </div>
                 {Boolean(activeRequestGroup.afterResponseScript) && (
-                  <span className="p-2 rounded-lg">
-                    <span className="flex w-2 h-2 bg-green-500 rounded-full" />
+                  <span className="rounded-lg p-2">
+                    <span className="flex h-2 w-2 rounded-full bg-green-500" />
                   </span>
                 )}
               </Tab>
             </TabList>
-            <TabPanel className="w-full flex-1" id='pre-request'>
-              <ErrorBoundary
-                key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center"
-              >
+            <TabPanel className="w-full flex-1" id="pre-request">
+              <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
                 <RequestScriptEditor
                   uniquenessKey={`${activeRequestGroup._id}:pre-request-script`}
                   defaultValue={activeRequestGroup.preRequestScript || ''}
@@ -179,10 +172,7 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => {
               </ErrorBoundary>
             </TabPanel>
             <TabPanel className="w-full flex-1" id="after-response">
-              <ErrorBoundary
-                key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center"
-              >
+              <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
                 <RequestScriptEditor
                   uniquenessKey={`${activeRequestGroup._id}:after-response-script`}
                   defaultValue={activeRequestGroup.afterResponseScript || ''}
@@ -193,13 +183,16 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => {
             </TabPanel>
           </Tabs>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='environment'>
-          <div className='flex items-center justify-between gap-2 w-full overflow-hidden'>
-            <Heading className='flex items-center gap-2 text-lg py-2 px-4 overflow-hidden h-[--line-height-sm]'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="environment">
+          <div className="flex w-full items-center justify-between gap-2 overflow-hidden">
+            <Heading className="flex h-[--line-height-sm] items-center gap-2 overflow-hidden px-4 py-2 text-lg">
               <ToggleButton
                 onChange={isSelected => {
                   if (activeRequestGroup) {
-                    const toggleSwitchEnvironmentType = (newEnvironmentType: EnvironmentType, kvPairData: EnvironmentKvPairData[]) => {
+                    const toggleSwitchEnvironmentType = (
+                      newEnvironmentType: EnvironmentType,
+                      kvPairData: EnvironmentKvPairData[],
+                    ) => {
                       patchGroup(activeRequestGroup._id, {
                         environmentType: newEnvironmentType,
                         kvPairData: kvPairData,
@@ -207,32 +200,38 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => {
                     };
                     const { environment, environmentPropertyOrder, kvPairData } = activeRequestGroup;
                     const isValidJSON = !!environmentEditorRef.current?.isValid();
-                    handleToggleEnvironmentType(isSelected, { data: environment, dataPropertyOrder: environmentPropertyOrder, kvPairData }, isValidJSON, toggleSwitchEnvironmentType);
+                    handleToggleEnvironmentType(
+                      isSelected,
+                      { data: environment, dataPropertyOrder: environmentPropertyOrder, kvPairData },
+                      isValidJSON,
+                      toggleSwitchEnvironmentType,
+                    );
                   }
                 }}
                 isSelected={activeRequestGroup?.environmentType !== EnvironmentType.KVPAIR}
-                className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start ml-2 pl-2 py-1 h-full rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
+                className="ml-2 flex h-full w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm py-1 pl-2 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
               >
                 {({ isSelected }) => (
                   <>
-                    <Icon icon={!isSelected ? 'toggle-on' : 'toggle-off'} className={`${!isSelected ? 'text-[--color-success]' : ''}`} />
+                    <Icon
+                      icon={!isSelected ? 'toggle-on' : 'toggle-off'}
+                      className={`${!isSelected ? 'text-[--color-success]' : ''}`}
+                    />
                     <span>Table View</span>
                   </>
                 )}
               </ToggleButton>
             </Heading>
           </div>
-          <ErrorBoundary
-            key={uniqueKey}
-            errorClassName="font-error pad text-center"
-          >
-            <div className='h-[calc(100%-var(--line-height-md))] flex flex-col'>
-              {activeRequestGroup && activeRequestGroup.environmentType === EnvironmentType.KVPAIR ?
+          <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
+            <div className="flex h-[calc(100%-var(--line-height-md))] flex-col">
+              {activeRequestGroup && activeRequestGroup.environmentType === EnvironmentType.KVPAIR ? (
                 <EnvironmentKVEditor
                   key={activeRequestGroup ? activeRequestGroup._id : 'n/a'}
                   data={activeRequestGroup?.kvPairData || []}
                   onChange={handleKVPairChange}
-                /> :
+                />
+              ) : (
                 <EnvironmentEditor
                   ref={environmentEditorRef}
                   key={activeRequestGroup ? activeRequestGroup._id : 'n/a'}
@@ -242,11 +241,11 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => {
                   }}
                   onBlur={saveChanges}
                 />
-              }
+              )}
             </div>
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1 overflow-y-auto' id='docs'>
+        <TabPanel className="w-full flex-1 overflow-y-auto" id="docs">
           <MarkdownEditor
             key={uniqueKey}
             className="margin-top"
@@ -256,14 +255,12 @@ export const RequestGroupPane: FC<{ settings: Settings }> = ({ settings }) => {
           />
         </TabPanel>
       </Tabs>
-      {
-        isRequestGroupSettingsModalOpen && (
-          <RequestGroupSettingsModal
-            requestGroup={activeRequestGroup}
-            onHide={() => setIsRequestGroupSettingsModalOpen(false)}
-          />
-        )
-      }
+      {isRequestGroupSettingsModalOpen && (
+        <RequestGroupSettingsModal
+          requestGroup={activeRequestGroup}
+          onHide={() => setIsRequestGroupSettingsModalOpen(false)}
+        />
+      )}
     </>
   );
 };
diff --git a/packages/insomnia/src/ui/components/panes/request-pane.tsx b/packages/insomnia/src/ui/components/panes/request-pane.tsx
index f7cea9d2ab..7a6d9694d4 100644
--- a/packages/insomnia/src/ui/components/panes/request-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/request-pane.tsx
@@ -36,11 +36,7 @@ interface Props {
   onPaste: (text: string) => void;
 }
 
-export const RequestPane: FC<Props> = ({
-  environmentId,
-  settings,
-  onPaste,
-}) => {
+export const RequestPane: FC<Props> = ({ environmentId, settings, onPaste }) => {
   const { activeRequest, activeRequestMeta } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
   const { workspaceId, requestId } = useParams() as { workspaceId: string; requestId: string };
 
@@ -61,10 +57,7 @@ export const RequestPane: FC<Props> = ({
 
     // Remove the search string (?foo=bar&...) from the Url
     const url = activeRequest.url.replace(`?${query}`, '');
-    const parameters = [
-      ...activeRequest.parameters,
-      ...deconstructQueryStringToParams(query),
-    ];
+    const parameters = [...activeRequest.parameters, ...deconstructQueryStringToParams(query)];
 
     // Only update if url changed
     if (url !== activeRequest.url) {
@@ -74,9 +67,7 @@ export const RequestPane: FC<Props> = ({
   const gitVersion = useGitVCSVersion();
   const activeRequestSyncVersion = useActiveRequestSyncVCSVersion();
 
-  const { activeEnvironment } = useRouteLoaderData(
-    ':workspaceId',
-  ) as WorkspaceLoaderData;
+  const { activeEnvironment } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
   // Force re-render when we switch requests, the environment gets modified, or the (Git|Sync)VCS version changes
   const uniqueKey = `${activeEnvironment?.modified}::${requestId}::${gitVersion}::${activeRequestSyncVersion}::${activeRequestMeta?.activeResponseId}`;
 
@@ -92,9 +83,7 @@ export const RequestPane: FC<Props> = ({
   const parametersCount = pathParameters.length + activeRequest.parameters.filter(p => !p.disabled).length;
   const headersCount = activeRequest.headers.filter(h => !h.disabled).length + readOnlyHttpPairs.length;
   const urlHasQueryParameters = activeRequest.url.indexOf('?') >= 0;
-  const contentType =
-    getContentTypeFromHeaders(activeRequest.headers) ||
-    activeRequest.body.mimeType;
+  const contentType = getContentTypeFromHeaders(activeRequest.headers) || activeRequest.body.mimeType;
   const isBodyEmpty = Boolean(typeof activeRequest.body.mimeType !== 'string' && !activeRequest.body.text);
   const requestAuth = getAuthObjectOrNull(activeRequest.authentication);
   const isNoneOrInherited = requestAuth?.type === 'none' || requestAuth === null;
@@ -112,98 +101,98 @@ export const RequestPane: FC<Props> = ({
           />
         </ErrorBoundary>
       </PaneHeader>
-      <Tabs aria-label='Request pane tabs' className="flex-1 w-full h-full flex flex-col">
-        <TabList className='scrollbar-thin w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+      <Tabs aria-label="Request pane tabs" className="flex h-full w-full flex-1 flex-col">
+        <TabList
+          className="scrollbar-thin flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+          aria-label="Request pane tabs"
+        >
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='params'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="params"
           >
             <span>Params</span>
             {parametersCount > 0 && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
                 {parametersCount}
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='content-type'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="content-type"
           >
             <span>Body</span>
             {!isBodyEmpty && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='auth'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="auth"
           >
             <span>Auth</span>
 
             {!isNoneOrInherited && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='headers'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="headers"
           >
             <span>Headers</span>
             {headersCount > 0 && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
                 {headersCount}
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='scripts'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="scripts"
           >
             <span>Scripts</span>
             {Boolean(activeRequest.preRequestScript || activeRequest.afterResponseScript) && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='docs'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="docs"
           >
             <span>Docs</span>
             {activeRequest.description && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
         </TabList>
-        <TabPanel className='w-full flex-1 flex flex-col h-full overflow-y-auto' id='params'>
-          <div className="p-4 flex-shrink-0">
-            <div className="text-xs max-h-32 flex flex-col overflow-y-auto min-h-[2em] bg-[--hl-xs] px-2 py-1 border border-solid border-[--hl-sm]">
+        <TabPanel className="flex h-full w-full flex-1 flex-col overflow-y-auto" id="params">
+          <div className="flex-shrink-0 p-4">
+            <div className="flex max-h-32 min-h-[2em] flex-col overflow-y-auto border border-solid border-[--hl-sm] bg-[--hl-xs] px-2 py-1 text-xs">
               <label className="label--small no-pad-top">Url Preview</label>
-              <ErrorBoundary
-                key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center"
-              >
+              <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
                 <RenderedQueryString request={activeRequest} />
               </ErrorBoundary>
             </div>
           </div>
-          <PanelGroup className='flex-1 overflow-hidden' direction={'vertical'}>
+          <PanelGroup className="flex-1 overflow-hidden" direction={'vertical'}>
             <Panel minSize={20}>
-              <div className='h-full flex flex-col'>
-                <div className='flex items-center w-full p-4 h-4 justify-between'>
-                  <Heading className='text-xs font-bold uppercase text-[--hl]'>Query parameters</Heading>
-                  <div className='flex items-center gap-2'>
+              <div className="flex h-full flex-col">
+                <div className="flex h-4 w-full items-center justify-between p-4">
+                  <Heading className="text-xs font-bold uppercase text-[--hl]">Query parameters</Heading>
+                  <div className="flex items-center gap-2">
                     <Button
                       isDisabled={!urlHasQueryParameters}
                       onPress={handleImportQueryFromUrl}
-                      className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 h-full asma-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
+                      className="asma-pressed:bg-[--hl-sm] flex h-full w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:ring-inset focus:ring-[--hl-md] aria-selected:bg-[--hl-xs] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
                     >
                       Import from URL
                     </Button>
@@ -214,50 +203,47 @@ export const RequestPane: FC<Props> = ({
                         });
                       }}
                       isSelected={settings.useBulkParametersEditor}
-                      className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 h-full rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
+                      className="flex h-full w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                     >
                       {({ isSelected }) => (
                         <Fragment>
-                          <Icon icon={isSelected ? 'toggle-on' : 'toggle-off'} className={`${isSelected ? 'text-[--color-success]' : ''}`} />
-                          <span>{
-                            isSelected ? 'Regular Edit' : 'Bulk Edit'
-                          }</span>
+                          <Icon
+                            icon={isSelected ? 'toggle-on' : 'toggle-off'}
+                            className={`${isSelected ? 'text-[--color-success]' : ''}`}
+                          />
+                          <span>{isSelected ? 'Regular Edit' : 'Bulk Edit'}</span>
                         </Fragment>
                       )}
                     </ToggleButton>
                   </div>
                 </div>
-                <ErrorBoundary
-                  key={uniqueKey}
-                  errorClassName="tall wide vertically-align font-error pad text-center"
-                >
-                  <RequestParametersEditor
-                    key={contentType}
-                    bulk={settings.useBulkParametersEditor}
-                  />
+                <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
+                  <RequestParametersEditor key={contentType} bulk={settings.useBulkParametersEditor} />
                 </ErrorBoundary>
               </div>
             </Panel>
-            <PanelResizeHandle className='w-full h-[1px] bg-[--hl-md]' />
+            <PanelResizeHandle className="h-[1px] w-full bg-[--hl-md]" />
             <Panel minSize={20}>
-              <div className='h-full flex flex-col'>
-                <Heading className='text-xs font-bold uppercase text-[--hl] p-4'>Path parameters</Heading>
+              <div className="flex h-full flex-col">
+                <Heading className="p-4 text-xs font-bold uppercase text-[--hl]">Path parameters</Heading>
                 {pathParameters.length > 0 && (
-                  <div className="pr-[72.73px] w-full overflow-y-auto pl-4">
-                    <div className='grid gap-x-[20.8px] grid-cols-2 flex-shrink-0 w-full rounded-sm overflow-hidden'>
+                  <div className="w-full overflow-y-auto pl-4 pr-[72.73px]">
+                    <div className="grid w-full flex-shrink-0 grid-cols-2 gap-x-[20.8px] overflow-hidden rounded-sm">
                       {pathParameters.map(pathParameter => (
                         <Fragment key={pathParameter.name}>
-                          <span className='p-2 select-none border-b border-solid border-[--hl-md] truncate flex items-center justify-end rounded-sm'>
+                          <span className="flex select-none items-center justify-end truncate rounded-sm border-b border-solid border-[--hl-md] p-2">
                             {pathParameter.name}
                           </span>
-                          <div className='px-2 flex items-center h-full border-b border-solid border-[--hl-md]'>
+                          <div className="flex h-full items-center border-b border-solid border-[--hl-md] px-2">
                             <OneLineEditor
                               key={activeRequest._id}
                               id={'key-value-editor__name' + pathParameter.name}
                               placeholder="Parameter value"
                               defaultValue={pathParameter.value || ''}
                               onChange={name => {
-                                onPathParameterChange(pathParameters.map(p => p.name === pathParameter.name ? { ...p, value: name } : p));
+                                onPathParameterChange(
+                                  pathParameters.map(p => (p.name === pathParameter.name ? { ...p, value: name } : p)),
+                                );
                               }}
                             />
                           </div>
@@ -267,14 +253,14 @@ export const RequestPane: FC<Props> = ({
                   </div>
                 )}
                 {pathParameters.length === 0 && !dismissPathParameterTip && (
-                  <div className='text-sm text-[--hl] rounded-sm border border-solid border-[--hl-md] p-2 flex items-center gap-2'>
-                    <Icon icon='info-circle' />
+                  <div className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] p-2 text-sm text-[--hl]">
+                    <Icon icon="info-circle" />
                     <span>Path parameters are url path segments that start with a colon ':' e.g. ':id' </span>
                     <Button
-                      className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] ml-auto"
+                      className="ml-auto flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-[--color-font] hover:bg-[--hl-xs] aria-pressed:bg-[--hl-sm]"
                       onPress={() => setDismissPathParameterTip('true')}
                     >
-                      <Icon icon='close' />
+                      <Icon icon="close" />
                     </Button>
                   </div>
                 )}
@@ -282,27 +268,17 @@ export const RequestPane: FC<Props> = ({
             </Panel>
           </PanelGroup>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col' id='content-type'>
-          <BodyEditor
-            key={uniqueKey}
-            request={activeRequest}
-            environmentId={environmentId}
-          />
+        <TabPanel className="flex w-full flex-1 flex-col" id="content-type">
+          <BodyEditor key={uniqueKey} request={activeRequest} environmentId={environmentId} />
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='auth'>
-          <ErrorBoundary
-            key={uniqueKey}
-            errorClassName="font-error pad text-center"
-          >
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="auth">
+          <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
             <AuthWrapper authentication={activeRequest.authentication} />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col relative overflow-hidden' id='headers'>
-          <ErrorBoundary
-            key={uniqueKey}
-            errorClassName="font-error pad text-center"
-          >
-            <div className='overflow-y-auto flex-1 flex-shrink-0'>
+        <TabPanel className="relative flex w-full flex-1 flex-col overflow-hidden" id="headers">
+          <ErrorBoundary key={uniqueKey} errorClassName="font-error pad text-center">
+            <div className="flex-1 flex-shrink-0 overflow-y-auto">
               <RequestHeadersEditor
                 bulk={settings.useBulkHeaderEditor}
                 headers={activeRequest.headers}
@@ -311,9 +287,9 @@ export const RequestPane: FC<Props> = ({
             </div>
           </ErrorBoundary>
 
-          <div className="flex flex-row border-solid border-t border-[var(--hl-md)] h-[var(--line-height-sm)] text-[var(--font-size-sm)] box-border">
+          <div className="box-border flex h-[var(--line-height-sm)] flex-row border-t border-solid border-[var(--hl-md)] text-[var(--font-size-sm)]">
             <Button
-              className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors"
+              className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               onPress={() =>
                 patchSettings({
                   useBulkHeaderEditor: !settings.useBulkHeaderEditor,
@@ -324,43 +300,43 @@ export const RequestPane: FC<Props> = ({
             </Button>
           </div>
         </TabPanel>
-        <TabPanel className='w-full flex-1' id='scripts'>
-          <Tabs className="w-full h-full flex flex-col overflow-hidden">
-            <TabList className="w-full flex-shrink-0 overflow-x-auto border-solid border-b border-b-[--hl-md] px-2 bg-[--color-bg] flex items-center gap-2 h-[--line-height-sm]" aria-label="Request scripts tabs">
+        <TabPanel className="w-full flex-1" id="scripts">
+          <Tabs className="flex h-full w-full flex-col overflow-hidden">
+            <TabList
+              className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center gap-2 overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg] px-2"
+              aria-label="Request scripts tabs"
+            >
               <Tab
-                className="rounded-md flex-shrink-0 h-[--line-height-xxs] text-sm flex items-center justify-between cursor-pointer w-[10.5rem] outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300"
+                className="flex h-[--line-height-xxs] w-[10.5rem] flex-shrink-0 cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 text-sm text-[--hl] outline-none transition-colors duration-300 hover:bg-[rgba(var(--color-surprise-rgb),50%)] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] aria-selected:text-[--color-font-surprise]"
                 id="pre-request"
               >
-                <div className='flex flex-1 items-center gap-2'>
+                <div className="flex flex-1 items-center gap-2">
                   <Icon icon="arrow-right-to-bracket" />
                   <span>Pre-request</span>
                 </div>
                 {Boolean(activeRequest.preRequestScript) && (
-                  <span className="p-2 rounded-lg">
-                    <span className="flex w-2 h-2 bg-green-500 rounded-full" />
+                  <span className="rounded-lg p-2">
+                    <span className="flex h-2 w-2 rounded-full bg-green-500" />
                   </span>
                 )}
               </Tab>
               <Tab
-                className="rounded-md flex-shrink-0 h-[--line-height-xxs] text-sm flex items-center justify-between cursor-pointer w-[10.5rem] outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300"
+                className="flex h-[--line-height-xxs] w-[10.5rem] flex-shrink-0 cursor-pointer select-none items-center justify-between rounded-md px-2 py-1 text-sm text-[--hl] outline-none transition-colors duration-300 hover:bg-[rgba(var(--color-surprise-rgb),50%)] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] aria-selected:text-[--color-font-surprise]"
                 id="after-response"
               >
-                <div className='flex flex-1 items-center gap-2'>
+                <div className="flex flex-1 items-center gap-2">
                   <Icon icon="arrow-right-from-bracket" />
                   <span>After-response</span>
                 </div>
                 {Boolean(activeRequest.afterResponseScript) && (
-                  <span className="p-2 rounded-lg">
-                    <span className="flex w-2 h-2 bg-green-500 rounded-full" />
+                  <span className="rounded-lg p-2">
+                    <span className="flex h-2 w-2 rounded-full bg-green-500" />
                   </span>
                 )}
               </Tab>
             </TabList>
-            <TabPanel className="w-full flex-1" id='pre-request'>
-              <ErrorBoundary
-                key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center"
-              >
+            <TabPanel className="w-full flex-1" id="pre-request">
+              <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
                 <RequestScriptEditor
                   uniquenessKey={`${activeRequest._id}:pre-request-script`}
                   defaultValue={activeRequest.preRequestScript || ''}
@@ -370,10 +346,7 @@ export const RequestPane: FC<Props> = ({
               </ErrorBoundary>
             </TabPanel>
             <TabPanel className="w-full flex-1" id="after-response">
-              <ErrorBoundary
-                key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center"
-              >
+              <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
                 <RequestScriptEditor
                   uniquenessKey={`${activeRequest._id}:after-response-script`}
                   defaultValue={activeRequest.afterResponseScript || ''}
@@ -384,7 +357,7 @@ export const RequestPane: FC<Props> = ({
             </TabPanel>
           </Tabs>
         </TabPanel>
-        <TabPanel className='w-full flex-1 overflow-y-auto' id='docs'>
+        <TabPanel className="w-full flex-1 overflow-y-auto" id="docs">
           <MarkdownEditor
             key={uniqueKey}
             placeholder="Write a description"
@@ -394,10 +367,7 @@ export const RequestPane: FC<Props> = ({
         </TabPanel>
       </Tabs>
       {isRequestSettingsModalOpen && (
-        <RequestSettingsModal
-          request={activeRequest}
-          onHide={() => setIsRequestSettingsModalOpen(false)}
-        />
+        <RequestSettingsModal request={activeRequest} onHide={() => setIsRequestSettingsModalOpen(false)} />
       )}
     </Pane>
   );
diff --git a/packages/insomnia/src/ui/components/panes/request-test-result-pane.tsx b/packages/insomnia/src/ui/components/panes/request-test-result-pane.tsx
index c33a772638..2ecba7c93d 100644
--- a/packages/insomnia/src/ui/components/panes/request-test-result-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/request-test-result-pane.tsx
@@ -7,8 +7,10 @@ import { fuzzyMatch } from '../../../common/misc';
 
 type TargetTestType = 'all' | 'passed' | 'failed' | 'skipped';
 
-const filterClassnames = 'mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
-const activeFilterClassnames = 'text-white mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
+const filterClassnames =
+  'mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
+const activeFilterClassnames =
+  'text-white mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
 
 export interface RequestTestResultRowsProps {
   requestTestResults: RequestTestResult[];
@@ -22,7 +24,11 @@ export const RequestTestResultRows: FC<RequestTestResultRowsProps> = ({
   targetTests,
 }: RequestTestResultRowsProps) => {
   if (requestTestResults.length === 0) {
-    return <div className="pl-3 text-sm text-neutral-400 w-full my-3">No test was detected, add test cases in scripts to see results.</div>;
+    return (
+      <div className="my-3 w-full pl-3 text-sm text-neutral-400">
+        No test was detected, add test cases in scripts to see results.
+      </div>
+    );
   }
 
   const testResultRows = requestTestResults
@@ -45,17 +51,10 @@ export const RequestTestResultRows: FC<RequestTestResultRowsProps> = ({
         return true;
       }
 
-      return Boolean(fuzzyMatch(
-        resultFilter,
-        result.testCase,
-        { splitSpace: false, loose: true }
-      )?.indexes);
+      return Boolean(fuzzyMatch(resultFilter, result.testCase, { splitSpace: false, loose: true })?.indexes);
     })
     .map((result, i: number) => {
-      const key = crypto
-        .createHash('sha1')
-        .update(`${result.testCase}"-${i}`)
-        .digest('hex');
+      const key = crypto.createHash('sha1').update(`${result.testCase}"-${i}`).digest('hex');
 
       const statusText = {
         passed: 'PASS',
@@ -68,31 +67,48 @@ export const RequestTestResultRows: FC<RequestTestResultRowsProps> = ({
         skipped: 'bg-slate-600',
       }[result.status];
 
-      const executionTime = <span className={result.executionTime < 300 ? 'text-white-500' : 'text-red-500'} >
-        {result.executionTime === 0 ? '< 0.1' : `${result.executionTime.toFixed(1)}`}
-      </span>;
-      const statusTag = <div className={`text-xs rounded p-[2px] inline-block w-16 text-center text-white font-semibold ${statusTagColor}`}>
-        {statusText}
-      </div >;
-      const message = <>
-        <span className='capitalize'>{result.testCase}</span>
-        <span className='text-neutral-400'>{result.errorMessage ? ' | ' + result.errorMessage : ''}</span>
-      </>;
-      const testCategory = result.category === 'pre-request' ? 'Pre-request Test' :
-        result.category === 'after-response' ? 'After-response Test' : 'Unknown';
+      const executionTime = (
+        <span className={result.executionTime < 300 ? 'text-white-500' : 'text-red-500'}>
+          {result.executionTime === 0 ? '< 0.1' : `${result.executionTime.toFixed(1)}`}
+        </span>
+      );
+      const statusTag = (
+        <div
+          className={`inline-block w-16 rounded p-[2px] text-center text-xs font-semibold text-white ${statusTagColor}`}
+        >
+          {statusText}
+        </div>
+      );
+      const message = (
+        <>
+          <span className="capitalize">{result.testCase}</span>
+          <span className="text-neutral-400">{result.errorMessage ? ' | ' + result.errorMessage : ''}</span>
+        </>
+      );
+      const testCategory =
+        result.category === 'pre-request'
+          ? 'Pre-request Test'
+          : result.category === 'after-response'
+            ? 'After-response Test'
+            : 'Unknown';
 
       return (
         <div key={key} data-testid="test-result-row">
-          <div className="flex w-full my-3 text-base">
-            <div className="leading-4 m-auto mx-1">
-              <span className="mr-2 ml-2" >{statusTag}</span>
+          <div className="my-3 flex w-full text-base">
+            <div className="m-auto mx-1 leading-4">
+              <span className="ml-2 mr-2">{statusTag}</span>
             </div>
-            <div className="leading-4 mr-2">
-              <div className='mr-2 my-1 w-auto text-nowrap'>{message}</div>
-              <div className='text-sm text-neutral-400 my-1'>{`${testCategory} (`}{executionTime}{' ms)'}</div>
+            <div className="mr-2 leading-4">
+              <div className="my-1 mr-2 w-auto text-nowrap">{message}</div>
+              <div className="my-1 text-sm text-neutral-400">
+                {`${testCategory} (`}
+                {executionTime}
+                {' ms)'}
+              </div>
             </div>
           </div>
-        </div>);
+        </div>
+      );
     });
 
   return <>{testResultRows}</>;
@@ -102,18 +118,14 @@ interface Props {
   requestTestResults: RequestTestResult[];
 }
 
-export const RequestTestResultPane: FC<Props> = ({
-  requestTestResults,
-}) => {
+export const RequestTestResultPane: FC<Props> = ({ requestTestResults }) => {
   const [targetTests, setTargetTests] = useState<TargetTestType>('all');
   const [resultFilter, setResultFilter] = useState('');
 
   const noTestFoundPage = (
-    <div className="text-center mt-5">
+    <div className="mt-5 text-center">
       <div className="">No test result found</div>
-      <div className="text-sm text-neutral-400">
-        Add test cases in scripts and run them to see results.
-      </div>
+      <div className="text-sm text-neutral-400">Add test cases in scripts and run them to see results.</div>
     </div>
   );
   if (requestTestResults.length === 0) {
@@ -125,36 +137,58 @@ export const RequestTestResultPane: FC<Props> = ({
   const selectFailedTests = () => setTargetTests('failed');
   const selectSkippedTests = () => setTargetTests('skipped');
 
-  return <>
-    <div className='test-result-pane h-full flex flex-col divide-y divide-solid divide-[--hl-md]'>
-      <div className='h-[calc(100%-var(--line-height-sm))]'>
-        <Toolbar className="flex items-center h-[--line-height-sm] flex-row text-[var(--font-size-sm)] box-border overflow-x-auto border-solid border-b border-b-[--hl-md] pl-2">
-          <button className={targetTests === 'all' ? activeFilterClassnames : filterClassnames} onClick={selectAllTests} >All</button>
-          <button className={targetTests === 'passed' ? activeFilterClassnames : filterClassnames} onClick={selectPassedTests} >Passed</button>
-          <button className={targetTests === 'failed' ? activeFilterClassnames : filterClassnames} onClick={selectFailedTests} >Failed</button>
-          <button className={targetTests === 'skipped' ? activeFilterClassnames : filterClassnames} onClick={selectSkippedTests} >Skipped</button>
-        </Toolbar>
-        <div className="overflow-y-auto w-auto overflow-x-auto h-[calc(100%-var(--line-height-sm))]">
-          <RequestTestResultRows
-            requestTestResults={requestTestResults}
-            resultFilter={resultFilter}
-            targetTests={targetTests}
-          />
+  return (
+    <>
+      <div className="test-result-pane flex h-full flex-col divide-y divide-solid divide-[--hl-md]">
+        <div className="h-[calc(100%-var(--line-height-sm))]">
+          <Toolbar className="box-border flex h-[--line-height-sm] flex-row items-center overflow-x-auto border-b border-solid border-b-[--hl-md] pl-2 text-[var(--font-size-sm)]">
+            <button
+              className={targetTests === 'all' ? activeFilterClassnames : filterClassnames}
+              onClick={selectAllTests}
+            >
+              All
+            </button>
+            <button
+              className={targetTests === 'passed' ? activeFilterClassnames : filterClassnames}
+              onClick={selectPassedTests}
+            >
+              Passed
+            </button>
+            <button
+              className={targetTests === 'failed' ? activeFilterClassnames : filterClassnames}
+              onClick={selectFailedTests}
+            >
+              Failed
+            </button>
+            <button
+              className={targetTests === 'skipped' ? activeFilterClassnames : filterClassnames}
+              onClick={selectSkippedTests}
+            >
+              Skipped
+            </button>
+          </Toolbar>
+          <div className="h-[calc(100%-var(--line-height-sm))] w-auto overflow-x-auto overflow-y-auto">
+            <RequestTestResultRows
+              requestTestResults={requestTestResults}
+              resultFilter={resultFilter}
+              targetTests={targetTests}
+            />
+          </div>
         </div>
+        <Toolbar className="box-border flex h-[--line-height-sm] flex-shrink-0 flex-row items-center overflow-x-auto text-[var(--font-size-sm)]">
+          <input
+            key="test-results-filter"
+            type="text"
+            className="flex-1 pl-3"
+            title="Filter test results"
+            defaultValue={resultFilter || ''}
+            placeholder="Filter test results with name"
+            onChange={e => {
+              setResultFilter(e.target.value);
+            }}
+          />
+        </Toolbar>
       </div>
-      <Toolbar className="flex items-center h-[--line-height-sm] flex-shrink-0 flex-row text-[var(--font-size-sm)] box-border overflow-x-auto">
-        <input
-          key="test-results-filter"
-          type="text"
-          className='flex-1 pl-3'
-          title="Filter test results"
-          defaultValue={resultFilter || ''}
-          placeholder='Filter test results with name'
-          onChange={e => {
-            setResultFilter(e.target.value);
-          }}
-        />
-      </Toolbar>
-    </div>
-  </>;
+    </>
+  );
 };
diff --git a/packages/insomnia/src/ui/components/panes/response-pane.tsx b/packages/insomnia/src/ui/components/panes/response-pane.tsx
index f6192454da..74562f1c6f 100644
--- a/packages/insomnia/src/ui/components/panes/response-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/response-pane.tsx
@@ -34,16 +34,14 @@ import { RequestTestResultPane } from './request-test-result-pane';
 interface Props {
   activeRequestId: string;
 }
-export const ResponsePane: FC<Props> = ({
-  activeRequestId,
-}) => {
-  const { activeRequest, activeRequestMeta, activeResponse } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
+export const ResponsePane: FC<Props> = ({ activeRequestId }) => {
+  const { activeRequest, activeRequestMeta, activeResponse } = useRouteLoaderData(
+    'request/:requestId',
+  ) as RequestLoaderData;
   const filterHistory = activeRequestMeta.responseFilterHistory || [];
   const filter = activeRequestMeta.responseFilter || '';
   const patchRequestMeta = useRequestMetaPatcher();
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const previewMode = activeRequestMeta.previewMode || PREVIEW_MODE_SOURCE;
   const handleSetFilter = async (responseFilter: string) => {
     if (!activeResponse) {
@@ -66,52 +64,55 @@ export const ResponsePane: FC<Props> = ({
 
   const { isExecuting, steps } = useExecutionState({ requestId: activeRequest._id });
 
-  const handleDownloadResponseBody = useCallback(async (prettify: boolean) => {
-    if (!activeResponse || !activeRequest) {
-      console.warn('Nothing to download');
-      return;
-    }
+  const handleDownloadResponseBody = useCallback(
+    async (prettify: boolean) => {
+      if (!activeResponse || !activeRequest) {
+        console.warn('Nothing to download');
+        return;
+      }
 
-    const { contentType } = activeResponse;
-    const extension = mimeExtension(contentType) || 'unknown';
-    const { canceled, filePath: outputPath } = await window.dialog.showSaveDialog({
-      title: 'Save Response Body',
-      buttonLabel: 'Save',
-      defaultPath: `${activeRequest.name.replace(/ +/g, '_')}-${Date.now()}.${extension}`,
-    });
-
-    if (canceled) {
-      return;
-    }
-
-    const readStream = models.response.getBodyStream(activeResponse);
-    const dataBuffers: any[] = [];
-
-    if (readStream && outputPath && typeof readStream !== 'string') {
-      readStream.on('data', data => {
-        dataBuffers.push(data);
+      const { contentType } = activeResponse;
+      const extension = mimeExtension(contentType) || 'unknown';
+      const { canceled, filePath: outputPath } = await window.dialog.showSaveDialog({
+        title: 'Save Response Body',
+        buttonLabel: 'Save',
+        defaultPath: `${activeRequest.name.replace(/ +/g, '_')}-${Date.now()}.${extension}`,
       });
-      readStream.on('end', () => {
-        const to = fs.createWriteStream(outputPath);
-        const finalBuffer = Buffer.concat(dataBuffers);
-        to.on('error', err => {
-          showError({
-            title: 'Save Failed',
-            message: 'Failed to save response body',
-            error: err,
-          });
+
+      if (canceled) {
+        return;
+      }
+
+      const readStream = models.response.getBodyStream(activeResponse);
+      const dataBuffers: any[] = [];
+
+      if (readStream && outputPath && typeof readStream !== 'string') {
+        readStream.on('data', data => {
+          dataBuffers.push(data);
         });
+        readStream.on('end', () => {
+          const to = fs.createWriteStream(outputPath);
+          const finalBuffer = Buffer.concat(dataBuffers);
+          to.on('error', err => {
+            showError({
+              title: 'Save Failed',
+              message: 'Failed to save response body',
+              error: err,
+            });
+          });
 
-        if (prettify && contentType.includes('json')) {
-          to.write(jsonPrettify(finalBuffer.toString('utf8')));
-        } else {
-          to.write(finalBuffer);
-        }
+          if (prettify && contentType.includes('json')) {
+            to.write(jsonPrettify(finalBuffer.toString('utf8')));
+          } else {
+            to.write(finalBuffer);
+          }
 
-        to.end();
-      });
-    }
-  }, [activeRequest, activeResponse]);
+          to.end();
+        });
+      }
+    },
+    [activeRequest, activeResponse],
+  );
 
   const { passedTestCount, totalTestCount } = useMemo(() => {
     let passedTestCount = 0;
@@ -124,9 +125,8 @@ export const ResponsePane: FC<Props> = ({
     });
     return { passedTestCount, totalTestCount };
   }, [activeResponse]);
-  const testResultCountTagColor = totalTestCount > 0 ?
-    passedTestCount === totalTestCount ? 'bg-lime-600' : 'bg-red-600' :
-    'bg-[var(--hl-sm)]';
+  const testResultCountTagColor =
+    totalTestCount > 0 ? (passedTestCount === totalTestCount ? 'bg-lime-600' : 'bg-red-600') : 'bg-[var(--hl-sm)]';
 
   if (!activeRequest) {
     return <BlankPane type="response" />;
@@ -136,11 +136,13 @@ export const ResponsePane: FC<Props> = ({
   if (!activeResponse) {
     return (
       <PlaceholderResponsePane>
-        {isExecuting && <ResponseTimer
-          handleCancel={() => cancelRequestById(activeRequest._id)}
-          activeRequestId={activeRequestId}
-          steps={steps}
-        />}
+        {isExecuting && (
+          <ResponseTimer
+            handleCancel={() => cancelRequestById(activeRequest._id)}
+            activeRequestId={activeRequestId}
+            steps={steps}
+          />
+        )}
       </PlaceholderResponsePane>
     );
   }
@@ -157,68 +159,68 @@ export const ResponsePane: FC<Props> = ({
             <TimeTag milliseconds={activeResponse.elapsedTime} steps={steps} />
             <SizeTag bytesRead={activeResponse.bytesRead} bytesContent={activeResponse.bytesContent} />
           </div>
-          <ResponseHistoryDropdown
-            activeResponse={activeResponse}
-          />
+          <ResponseHistoryDropdown activeResponse={activeResponse} />
         </PaneHeader>
       )}
-      <Tabs aria-label='Request group tabs' className="flex-1 w-full h-full flex flex-col">
-        <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+      <Tabs aria-label="Request group tabs" className="flex h-full w-full flex-1 flex-col">
+        <TabList
+          className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+          aria-label="Request pane tabs"
+        >
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='preview'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="preview"
           >
             Preview
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='headers'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="headers"
           >
             Headers
             {activeResponse.headers.length > 0 && (
-              <span className="p-2 aspect-square flex items-center justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{activeResponse.headers.length}</span>
+              <span className="shadow-small flex aspect-square items-center justify-between overflow-hidden rounded-lg border border-solid border-[--hl-md] p-2 text-xs">
+                {activeResponse.headers.length}
+              </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='cookies'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="cookies"
           >
             Cookies
             {cookieHeaders.length > 0 && (
-              <span className="p-2 aspect-square flex items-center justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{cookieHeaders.length}</span>
+              <span className="shadow-small flex aspect-square items-center justify-between overflow-hidden rounded-lg border border-solid border-[--hl-md] p-2 text-xs">
+                {cookieHeaders.length}
+              </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='test-results'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="test-results"
           >
             <div>
-              <span>
-                Tests
-              </span>
-              <span
-                className={`rounded-sm ml-1 px-1 ${testResultCountTagColor}`}
-                style={{ color: 'white' }}
-              >
+              <span>Tests</span>
+              <span className={`ml-1 rounded-sm px-1 ${testResultCountTagColor}`} style={{ color: 'white' }}>
                 {`${passedTestCount} / ${totalTestCount}`}
               </span>
             </div>
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='mock-response'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="mock-response"
           >
             → Mock
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='timeline'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="timeline"
           >
             Console
           </Tab>
         </TabList>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='preview'>
-          <Toolbar className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="preview">
+          <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
             <PreviewModeDropdown
               download={handleDownloadResponseBody}
               copyToClipboard={async () => {
@@ -248,12 +250,12 @@ export const ResponsePane: FC<Props> = ({
             url={activeResponse.url}
           />
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='headers'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="headers">
           <ErrorBoundary key={activeResponse._id} errorClassName="font-error pad text-center">
             <ResponseHeadersViewer headers={activeResponse.headers} />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='cookies'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="cookies">
           <ErrorBoundary key={activeResponse._id} errorClassName="font-error pad text-center">
             <ResponseCookiesViewer
               cookiesSent={activeResponse.settingSendCookies}
@@ -262,33 +264,26 @@ export const ResponsePane: FC<Props> = ({
             />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel
-          className='w-full flex-1 flex flex-col overflow-y-auto'
-          id='test-results'
-        >
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="test-results">
           <RequestTestResultPane requestTestResults={activeResponse.requestTestResults} />
         </TabPanel>
-        <TabPanel
-          className='w-full flex-1 flex flex-col overflow-y-auto'
-          id='mock-response'
-        >
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="mock-response">
           <MockResponseExtractor />
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='timeline'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="timeline">
           <ErrorBoundary key={activeResponse._id} errorClassName="font-error pad text-center">
-            <ResponseTimelineViewer
-              key={activeResponse._id}
-              timeline={timeline}
-            />
+            <ResponseTimelineViewer key={activeResponse._id} timeline={timeline} />
           </ErrorBoundary>
         </TabPanel>
       </Tabs>
       <ErrorBoundary errorClassName="font-error pad text-center">
-        {isExecuting && <ResponseTimer
-          handleCancel={() => cancelRequestById(activeRequest._id)}
-          activeRequestId={activeRequestId}
-          steps={steps}
-        />}
+        {isExecuting && (
+          <ResponseTimer
+            handleCancel={() => cancelRequestById(activeRequest._id)}
+            activeRequestId={activeRequestId}
+            steps={steps}
+          />
+        )}
       </ErrorBoundary>
     </Pane>
   );
diff --git a/packages/insomnia/src/ui/components/panes/runner-result-history-pane.tsx b/packages/insomnia/src/ui/components/panes/runner-result-history-pane.tsx
index a07d2abe64..580aa5ee5c 100644
--- a/packages/insomnia/src/ui/components/panes/runner-result-history-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/runner-result-history-pane.tsx
@@ -1,6 +1,16 @@
 import { format } from 'date-fns';
 import React, { type FC } from 'react';
-import { Cell, Column, ColumnResizer, ResizableTableContainer, Row, Table, TableBody, TableHeader, TooltipTrigger } from 'react-aria-components';
+import {
+  Cell,
+  Column,
+  ColumnResizer,
+  ResizableTableContainer,
+  Row,
+  Table,
+  TableBody,
+  TableHeader,
+  TooltipTrigger,
+} from 'react-aria-components';
 
 import type { RunnerTestResult } from '../../..//models/runner-test-result';
 import { PromptButton } from '../base/prompt-button';
@@ -46,26 +56,22 @@ export const RunnerResultHistoryPane: FC<Props> = ({
     const createdAt = format(runnerResult.created, 'yyyy-MM-dd HH:mm:ss');
 
     return (
-      <Row
-        key={runnerResult._id}
-        className="leading-9 hover:bg-[--hl-sm]"
-        style={{ 'outline': 'none' }}
-      >
+      <Row key={runnerResult._id} className="leading-9 hover:bg-[--hl-sm]" style={{ outline: 'none' }}>
         <Cell className="capitalize hover:underline">
           <div
             onClick={() => {
               gotoExecutionResult(runnerResult._id);
               gotoTestResultsTab();
             }}
-            className='cursor-pointer'
+            className="cursor-pointer"
           >
-            {failedCount === 0 ?
-              <i className="fa fa-circle-check fa-1x mr-2 text-green-500" /> :
-              <i className="fa fa-circle-xmark fa-1x mr-2 text-red-500" />}
-            <TooltipTrigger key={`parent-folder-${runnerResult.created}`} >
-              <Tooltip message={createdAt}>
-                {runnerResult.source}
-              </Tooltip>
+            {failedCount === 0 ? (
+              <i className="fa fa-circle-check fa-1x mr-2 text-green-500" />
+            ) : (
+              <i className="fa fa-circle-xmark fa-1x mr-2 text-red-500" />
+            )}
+            <TooltipTrigger key={`parent-folder-${runnerResult.created}`}>
+              <Tooltip message={createdAt}>{runnerResult.source}</Tooltip>
             </TooltipTrigger>
           </div>
         </Cell>
@@ -79,8 +85,8 @@ export const RunnerResultHistoryPane: FC<Props> = ({
         <Cell>
           <PromptButton
             disabled={false}
-            confirmMessage=''
-            doneMessage=''
+            confirmMessage=""
+            doneMessage=""
             onClick={() => deleteHistoryItem(runnerResult)}
           >
             <Icon icon="trash-can" />
@@ -90,27 +96,33 @@ export const RunnerResultHistoryPane: FC<Props> = ({
     );
   });
 
-  return <>
-    <div className='h-full flex flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto mb-12'>
-      <ResizableTableContainer className='mt-3'>
-        <Table aria-label="Results" selectionMode="multiple" className="w-full text-center">
-          <TableHeader>
-            {/* <Column className="leading-9" isRowHeader>Start Time</Column> */}
-            <Column className="leading-9" isRowHeader>Source<ColumnResizer /></Column>
-            <Column className="leading-9">Iterations<ColumnResizer /></Column>
-            <Column className="leading-9">Duration</Column>
-            {/* <Column className="leading-9">Avg. Resp. Time</Column> */}
-            <Column className="leading-9">Total</Column>
-            <Column className="leading-9">Passed</Column>
-            <Column className="leading-9">Failed</Column>
-            <Column className="leading-9">Skipped</Column>
-            <Column className="leading-9">Delete</Column>
-          </TableHeader>
-          <TableBody >
-            {rows}
-          </TableBody>
-        </Table>
-      </ResizableTableContainer>
-    </div>
-  </>;
+  return (
+    <>
+      <div className="mb-12 flex h-full flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto">
+        <ResizableTableContainer className="mt-3">
+          <Table aria-label="Results" selectionMode="multiple" className="w-full text-center">
+            <TableHeader>
+              {/* <Column className="leading-9" isRowHeader>Start Time</Column> */}
+              <Column className="leading-9" isRowHeader>
+                Source
+                <ColumnResizer />
+              </Column>
+              <Column className="leading-9">
+                Iterations
+                <ColumnResizer />
+              </Column>
+              <Column className="leading-9">Duration</Column>
+              {/* <Column className="leading-9">Avg. Resp. Time</Column> */}
+              <Column className="leading-9">Total</Column>
+              <Column className="leading-9">Passed</Column>
+              <Column className="leading-9">Failed</Column>
+              <Column className="leading-9">Skipped</Column>
+              <Column className="leading-9">Delete</Column>
+            </TableHeader>
+            <TableBody>{rows}</TableBody>
+          </Table>
+        </ResizableTableContainer>
+      </div>
+    </>
+  );
 };
diff --git a/packages/insomnia/src/ui/components/panes/runner-test-result-pane.tsx b/packages/insomnia/src/ui/components/panes/runner-test-result-pane.tsx
index 3accc678c4..442affb794 100644
--- a/packages/insomnia/src/ui/components/panes/runner-test-result-pane.tsx
+++ b/packages/insomnia/src/ui/components/panes/runner-test-result-pane.tsx
@@ -6,25 +6,23 @@ import { RequestTestResultRows } from './request-test-result-pane';
 
 type TargetTestType = 'all' | 'passed' | 'failed' | 'skipped';
 
-const filterClassnames = 'mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
-const activeFilterClassnames = 'text-white mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
+const filterClassnames =
+  'mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 hover:bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] hover:text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
+const activeFilterClassnames =
+  'text-white mx-1 w-[6rem] text-center rounded-md h-[--line-height-xxs] text-sm cursor-pointer outline-none select-none px-2 py-1 bg-[rgba(var(--color-surprise-rgb),50%)] text-[--hl] aria-selected:text-[--color-font-surprise] text-[--color-font-surprise] aria-selected:bg-[rgba(var(--color-surprise-rgb),40%)] transition-colors duration-300';
 
 interface Props {
   result: BaseRunnerTestResult | null;
 }
 
-export const RunnerTestResultPane: FC<Props> = ({
-  result,
-}) => {
+export const RunnerTestResultPane: FC<Props> = ({ result }) => {
   const [targetTests, setTargetTests] = useState<TargetTestType>('all');
   const [resultFilter, setResultFilter] = useState('');
 
   const noTestFoundPage = (
-    <div className="text-center mt-5">
+    <div className="mt-5 text-center">
       <div className="">No test result found</div>
-      <div className="text-sm text-neutral-400">
-        Add test cases in scripts and run them to see results.
-      </div>
+      <div className="text-sm text-neutral-400">Add test cases in scripts and run them to see results.</div>
     </div>
   );
   if (!result || result.iterationResults.length === 0) {
@@ -42,59 +40,80 @@ export const RunnerTestResultPane: FC<Props> = ({
     if (Array.isArray(iterationResults)) {
       const resultByRequest = iterationResults.map((requestTestResult: RunnerResultPerRequest, i: number) => {
         const key = `request-test-result-${i}`;
-        return <div key={key}>
-          <div className="pl-3">
-            <span>
-              {requestTestResult.requestName}
-            </span>
-            <span className="text-sm text-neutral-400">
-              {` - ${requestTestResult.requestUrl}`}
-            </span>
+        return (
+          <div key={key}>
+            <div className="pl-3">
+              <span>{requestTestResult.requestName}</span>
+              <span className="text-sm text-neutral-400">{` - ${requestTestResult.requestUrl}`}</span>
+            </div>
+            <RequestTestResultRows
+              requestTestResults={requestTestResult.results}
+              resultFilter={resultFilter}
+              targetTests={targetTests}
+            />
           </div>
-          <RequestTestResultRows
-            requestTestResults={requestTestResult.results}
-            resultFilter={resultFilter}
-            targetTests={targetTests}
-          />
-        </div>;
+        );
       });
 
-      return <div key={key} data-testid={key} className="pt-6 pb-6 border-dashed border-b border-b-[--hl-md]">
-        <div className="uppercase font-bold pl-3 mb-3 leading-10"> Iteration {i + 1} </div>
-        <div className='border-solid border-1 border-gray-600' />
-        {resultByRequest}
-      </div>;
+      return (
+        <div key={key} data-testid={key} className="border-b border-dashed border-b-[--hl-md] pb-6 pt-6">
+          <div className="mb-3 pl-3 font-bold uppercase leading-10"> Iteration {i + 1} </div>
+          <div className="border-1 border-solid border-gray-600" />
+          {resultByRequest}
+        </div>
+      );
     }
-      return <div key={key}>Invalid test result format</div>;
-
+    return <div key={key}>Invalid test result format</div>;
   });
 
-  return <>
-    <div className='h-full flex flex-col divide-y divide-solid divide-[--hl-md]'>
-      <div className='h-[calc(100%-var(--line-height-sm))]'>
-        <Toolbar className="flex items-center h-[--line-height-sm] flex-row text-[var(--font-size-sm)] box-border overflow-x-auto border-solid border-b border-b-[--hl-md] pl-2">
-          <button className={targetTests === 'all' ? activeFilterClassnames : filterClassnames} onClick={selectAllTests} >All</button>
-          <button className={targetTests === 'passed' ? activeFilterClassnames : filterClassnames} onClick={selectPassedTests} >Passed</button>
-          <button className={targetTests === 'failed' ? activeFilterClassnames : filterClassnames} onClick={selectFailedTests} >Failed</button>
-          <button className={targetTests === 'skipped' ? activeFilterClassnames : filterClassnames} onClick={selectSkippedTests} >Skipped</button>
-        </Toolbar>
-        <div className="overflow-y-auto w-auto overflow-x-auto h-[calc(100%-var(--line-height-sm))]">
-          {resultsByIteration}
+  return (
+    <>
+      <div className="flex h-full flex-col divide-y divide-solid divide-[--hl-md]">
+        <div className="h-[calc(100%-var(--line-height-sm))]">
+          <Toolbar className="box-border flex h-[--line-height-sm] flex-row items-center overflow-x-auto border-b border-solid border-b-[--hl-md] pl-2 text-[var(--font-size-sm)]">
+            <button
+              className={targetTests === 'all' ? activeFilterClassnames : filterClassnames}
+              onClick={selectAllTests}
+            >
+              All
+            </button>
+            <button
+              className={targetTests === 'passed' ? activeFilterClassnames : filterClassnames}
+              onClick={selectPassedTests}
+            >
+              Passed
+            </button>
+            <button
+              className={targetTests === 'failed' ? activeFilterClassnames : filterClassnames}
+              onClick={selectFailedTests}
+            >
+              Failed
+            </button>
+            <button
+              className={targetTests === 'skipped' ? activeFilterClassnames : filterClassnames}
+              onClick={selectSkippedTests}
+            >
+              Skipped
+            </button>
+          </Toolbar>
+          <div className="h-[calc(100%-var(--line-height-sm))] w-auto overflow-x-auto overflow-y-auto">
+            {resultsByIteration}
+          </div>
         </div>
+        <Toolbar className="box-border flex h-[--line-height-sm] flex-shrink-0 flex-row items-center overflow-x-auto text-[var(--font-size-sm)]">
+          <input
+            key="test-results-filter"
+            type="text"
+            className="flex-1 pl-3"
+            title="Filter test results"
+            defaultValue={resultFilter || ''}
+            placeholder="Filter test results with name"
+            onChange={e => {
+              setResultFilter(e.target.value);
+            }}
+          />
+        </Toolbar>
       </div>
-      <Toolbar className="flex items-center h-[--line-height-sm] flex-shrink-0 flex-row text-[var(--font-size-sm)] box-border overflow-x-auto">
-        <input
-          key="test-results-filter"
-          type="text"
-          className='flex-1 pl-3'
-          title="Filter test results"
-          defaultValue={resultFilter || ''}
-          placeholder='Filter test results with name'
-          onChange={e => {
-            setResultFilter(e.target.value);
-          }}
-        />
-      </Toolbar>
-    </div>
-  </>;
+    </>
+  );
 };
diff --git a/packages/insomnia/src/ui/components/password-input.tsx b/packages/insomnia/src/ui/components/password-input.tsx
index 268dd1d851..283be5a26f 100644
--- a/packages/insomnia/src/ui/components/password-input.tsx
+++ b/packages/insomnia/src/ui/components/password-input.tsx
@@ -25,18 +25,15 @@ export const PasswordInput = (props: PasswordInputProps) => {
 
   return (
     <div className={className}>
-      <div className='relative'>
+      <div className="relative">
         <input
           value={value}
-          className='placeholder-[--hl-lg]'
+          className="placeholder-[--hl-lg]"
           onChange={event => onChange(event.target.value)}
           placeholder={placeholder}
           type={isHidden ? 'password' : 'text'}
         />
-        <button
-          className='absolute right-0 top-1 h-f flex m-0 px-[--padding-sm]'
-          onClick={handleShowHidePassword}
-        >
+        <button className="h-f absolute right-0 top-1 m-0 flex px-[--padding-sm]" onClick={handleShowHidePassword}>
           {isHidden ? <i className="fa fa-eye-slash" /> : <i className="fa fa-eye" />}
         </button>
       </div>
diff --git a/packages/insomnia/src/ui/components/present-users.tsx b/packages/insomnia/src/ui/components/present-users.tsx
index 6e807e31c9..dc1a88eb38 100644
--- a/packages/insomnia/src/ui/components/present-users.tsx
+++ b/packages/insomnia/src/ui/components/present-users.tsx
@@ -27,10 +27,7 @@ export const PresentUsers = () => {
     .map(user => {
       return {
         key: user.acct,
-        alt:
-          user.firstName || user.lastName
-            ? `${user.firstName} ${user.lastName}`
-            : user.acct,
+        alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
         src: user.avatar,
       };
     });
diff --git a/packages/insomnia/src/ui/components/project/project-empty-view.tsx b/packages/insomnia/src/ui/components/project/project-empty-view.tsx
index 0e488ee6e7..98299fb6a4 100644
--- a/packages/insomnia/src/ui/components/project/project-empty-view.tsx
+++ b/packages/insomnia/src/ui/components/project/project-empty-view.tsx
@@ -9,34 +9,38 @@ interface Props {
   onImportFrom: () => void;
 }
 
-export const ProjectEmptyView: FC<Props> = ({ onCreateRequestCollectionWithRequest, onCreateDesignDocument, onImportFrom }) => {
+export const ProjectEmptyView: FC<Props> = ({
+  onCreateRequestCollectionWithRequest,
+  onCreateDesignDocument,
+  onImportFrom,
+}) => {
   return (
-    <div className='flex flex-col items-center pt-[15%] w-full h-full text-center gap-3'>
-      <span className='font-semibold text-xl'>Welcome to your project!</span>
-      <span className='text-md'>Start fresh or bring in existing work</span>
-      <div className='flex flex-wrap justify-center w-full gap-[var(--padding-md)] mt-[var(--padding-lg)]'>
+    <div className="flex h-full w-full flex-col items-center gap-3 pt-[15%] text-center">
+      <span className="text-xl font-semibold">Welcome to your project!</span>
+      <span className="text-md">Start fresh or bring in existing work</span>
+      <div className="mt-[var(--padding-lg)] flex w-full flex-wrap justify-center gap-[var(--padding-md)]">
         <Button
-          aria-label='Create request collection'
-          className='w-full max-w-[180px] py-8 px-12 flex flex-col items-center justify-center border border-solid border-[--hl-sm] shadow-sm hover:bg-[--color-bg] gap-[var(--padding-xs)] sm:gap-[var(--padding-sm)] text-[var(--font-size-sm)] transition-all duration-100 rounded-md'
+          aria-label="Create request collection"
+          className="flex w-full max-w-[180px] flex-col items-center justify-center gap-[var(--padding-xs)] rounded-md border border-solid border-[--hl-sm] px-12 py-8 text-[var(--font-size-sm)] shadow-sm transition-all duration-100 hover:bg-[--color-bg] sm:gap-[var(--padding-sm)]"
           onPress={onCreateRequestCollectionWithRequest}
         >
-          <Icon icon="plus" className='text-xl' />
+          <Icon icon="plus" className="text-xl" />
           Send a request
         </Button>
         <Button
-          aria-label='Create document'
-          className='w-full max-w-[180px] py-8 px-12 flex flex-col items-center justify-center border border-solid border-[--hl-sm] shadow-sm hover:bg-[--color-bg] gap-[var(--padding-xs)] sm:gap-[var(--padding-sm)] text-[var(--font-size-sm)] transition-all duration-100 rounded-md'
+          aria-label="Create document"
+          className="flex w-full max-w-[180px] flex-col items-center justify-center gap-[var(--padding-xs)] rounded-md border border-solid border-[--hl-sm] px-12 py-8 text-[var(--font-size-sm)] shadow-sm transition-all duration-100 hover:bg-[--color-bg] sm:gap-[var(--padding-sm)]"
           onPress={onCreateDesignDocument}
         >
-          <Icon icon="file" className='text-[var(--font-size-xl)]' />
+          <Icon icon="file" className="text-[var(--font-size-xl)]" />
           Create document
         </Button>
         <Button
-          aria-label='Import'
-          className='w-full max-w-[180px] py-8 px-12 flex flex-col items-center justify-center border border-solid border-[--hl-sm] shadow-sm hover:bg-[--color-bg] gap-[var(--padding-xs)] sm:gap-[var(--padding-sm)] text-[var(--font-size-sm)] transition-all duration-100 rounded-md'
+          aria-label="Import"
+          className="flex w-full max-w-[180px] flex-col items-center justify-center gap-[var(--padding-xs)] rounded-md border border-solid border-[--hl-sm] px-12 py-8 text-[var(--font-size-sm)] shadow-sm transition-all duration-100 hover:bg-[--color-bg] sm:gap-[var(--padding-sm)]"
           onPress={onImportFrom}
         >
-          <Icon icon="file-import" className='text-[var(--font-size-xl)]' />
+          <Icon icon="file-import" className="text-[var(--font-size-xl)]" />
           Import
         </Button>
       </div>
diff --git a/packages/insomnia/src/ui/components/project/project-settings-form.tsx b/packages/insomnia/src/ui/components/project/project-settings-form.tsx
index ce3b4afd1c..615575a67a 100644
--- a/packages/insomnia/src/ui/components/project/project-settings-form.tsx
+++ b/packages/insomnia/src/ui/components/project/project-settings-form.tsx
@@ -1,11 +1,35 @@
 import type { FC } from 'react';
 import React, { useEffect, useState } from 'react';
-import { Button, Cell, Column, Heading, Input, Label, Radio, RadioGroup, Row, Tab, Table, TableBody, TableHeader, TabList, TabPanel, Tabs, TextField } from 'react-aria-components';
+import {
+  Button,
+  Cell,
+  Column,
+  Heading,
+  Input,
+  Label,
+  Radio,
+  RadioGroup,
+  Row,
+  Tab,
+  Table,
+  TableBody,
+  TableHeader,
+  TabList,
+  TabPanel,
+  Tabs,
+  TextField,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { OauthProviderName } from '../../../models/git-credentials';
 import type { GitRepository } from '../../../models/git-repository';
-import { getDefaultProjectStorageType, getProjectStorageTypeLabel, isGitProject, isRemoteProject, type Project } from '../../../models/project';
+import {
+  getDefaultProjectStorageType,
+  getProjectStorageTypeLabel,
+  isGitProject,
+  isRemoteProject,
+  type Project,
+} from '../../../models/project';
 import type { UpdateProjectActionResult } from '../../routes/actions';
 import type { InitGitCloneResult } from '../../routes/git-project-actions';
 import type { StorageRules } from '../../routes/organization';
@@ -54,8 +78,12 @@ export const ProjectSettingsForm: FC<Props> = ({
 }) => {
   const { organizationId } = useParams() as { organizationId: string };
 
-  const [storageType, setStorageType] = useState<'local' | 'remote' | 'git'>(getDefaultProjectStorageType(storageRules, project));
-  const [activeView, setActiveView] = useState<'project' | 'git-clone' | 'git-results' | 'switch-storage-type'>('project');
+  const [storageType, setStorageType] = useState<'local' | 'remote' | 'git'>(
+    getDefaultProjectStorageType(storageRules, project),
+  );
+  const [activeView, setActiveView] = useState<'project' | 'git-clone' | 'git-results' | 'switch-storage-type'>(
+    'project',
+  );
   const [selectedTab, setTab] = useState<OauthProviderName>('github');
   const [error, setError] = useState<string | null>(null);
 
@@ -74,16 +102,24 @@ export const ProjectSettingsForm: FC<Props> = ({
     authorEmail: gitRepository?.author?.email || '',
     uri: gitRepository?.uri || '',
     username: gitRepository?.credentials?.username || '',
-    password: gitRepository?.credentials && 'password' in gitRepository.credentials ? gitRepository?.credentials?.password : '',
+    password:
+      gitRepository?.credentials && 'password' in gitRepository.credentials ? gitRepository?.credentials?.password : '',
     token: gitRepository?.credentials && 'token' in gitRepository.credentials ? gitRepository?.credentials?.token : '',
-    oauth2format: gitRepository?.credentials && 'oauth2format' in gitRepository.credentials ? gitRepository?.credentials?.oauth2format ?? 'github' : undefined,
+    oauth2format:
+      gitRepository?.credentials && 'oauth2format' in gitRepository.credentials
+        ? (gitRepository?.credentials?.oauth2format ?? 'github')
+        : undefined,
   });
 
   const initCloneGitRepositoryFetcher = useFetcher<InitGitCloneResult>();
   const upsertProjectFetcher = useFetcher<UpdateProjectActionResult>();
 
-  const showStorageRestrictionMessage = !storageRules.enableCloudSync || !storageRules.enableLocalVault || !storageRules.enableGitSync;
-  const insomniaFiles = initCloneGitRepositoryFetcher.data && 'files' in initCloneGitRepositoryFetcher.data ? initCloneGitRepositoryFetcher.data.files : [];
+  const showStorageRestrictionMessage =
+    !storageRules.enableCloudSync || !storageRules.enableLocalVault || !storageRules.enableGitSync;
+  const insomniaFiles =
+    initCloneGitRepositoryFetcher.data && 'files' in initCloneGitRepositoryFetcher.data
+      ? initCloneGitRepositoryFetcher.data.files
+      : [];
 
   useEffect(() => {
     if (upsertProjectFetcher.data && upsertProjectFetcher.data.success && onSuccessUpdate) {
@@ -104,16 +140,8 @@ export const ProjectSettingsForm: FC<Props> = ({
   }, [storageRules, project]);
 
   const onGitRepoFormSubmit = (gitRepositoryPatch: Partial<GitRepository>) => {
-    const {
-      author,
-      credentials,
-      created,
-      modified,
-      isPrivate,
-      needsFullClone,
-      uriNeedsMigration,
-      ...repoPatch
-    } = gitRepositoryPatch;
+    const { author, credentials, created, modified, isPrivate, needsFullClone, uriNeedsMigration, ...repoPatch } =
+      gitRepositoryPatch;
 
     setProjectData({
       ...projectData,
@@ -133,7 +161,7 @@ export const ProjectSettingsForm: FC<Props> = ({
       {
         action: `/organization/${organizationId}/git/init-clone`,
         method: 'POST',
-      }
+      },
     );
 
     setActiveView('git-results');
@@ -145,23 +173,27 @@ export const ProjectSettingsForm: FC<Props> = ({
       return;
     }
 
-    const action = project ? `/organization/${organizationId}/project/${project._id}/update` : `/organization/${organizationId}/project/new`;
+    const action = project
+      ? `/organization/${organizationId}/project/${project._id}/update`
+      : `/organization/${organizationId}/project/new`;
 
-    upsertProjectFetcher.submit({
-      ...projectData,
-      storageType,
-    }, {
-      action,
-      method: 'POST',
-      encType: 'application/json',
-    }
+    upsertProjectFetcher.submit(
+      {
+        ...projectData,
+        storageType,
+      },
+      {
+        action,
+        method: 'POST',
+        encType: 'application/json',
+      },
     );
   };
 
   return (
-    <div className='flex flex-col gap-4 max-w-[600px]'>
+    <div className="flex max-w-[600px] flex-col gap-4">
       {error && (
-        <div className="flex items-center px-2 py-1 gap-2 text-sm rounded-sm text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]">
+        <div className="flex items-center gap-2 rounded-sm bg-[rgba(var(--color-danger-rgb),0.5)] px-2 py-1 text-sm text-[--color-font-danger]">
           <Icon icon="triangle-exclamation" />
           <span>{error}</span>
         </div>
@@ -169,7 +201,7 @@ export const ProjectSettingsForm: FC<Props> = ({
 
       {activeView === 'project' && (
         <>
-          <div className='flex flex-col justify-start gap-8 overflow-y-auto mt-4 w-full pb-2 text-left'>
+          <div className="mt-4 flex w-full flex-col justify-start gap-8 overflow-y-auto pb-2 text-left">
             <TextField
               autoFocus
               name="name"
@@ -177,12 +209,10 @@ export const ProjectSettingsForm: FC<Props> = ({
               onChange={name => setProjectData({ ...projectData, name })}
               className="group relative flex flex-col gap-2 px-0.5"
             >
-              <Label className='text-sm text-[--hl]'>
-                Project name
-              </Label>
+              <Label className="text-sm text-[--hl]">Project name</Label>
               <Input
                 placeholder="My project"
-                className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
+                className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
               />
             </TextField>
             <RadioGroup
@@ -194,73 +224,72 @@ export const ProjectSettingsForm: FC<Props> = ({
               }}
               value={storageType}
             >
-              <Label className="text-sm text-[--hl]">
-                Project type
-              </Label>
+              <Label className="text-sm text-[--hl]">Project type</Label>
               <div className="flex gap-2">
                 <Radio
                   isDisabled={!storageRules.enableLocalVault}
                   value="local"
-                  className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                  className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                 >
                   <div className="flex items-center gap-2">
                     <Icon icon="laptop" />
                     <Heading className="text-lg font-bold">Local Vault</Heading>
                   </div>
-                  <p className="pt-2">
-                    Stored locally only, with no cloud. Ideal when collaboration is not needed.
-                  </p>
+                  <p className="pt-2">Stored locally only, with no cloud. Ideal when collaboration is not needed.</p>
                 </Radio>
 
                 <Radio
                   isDisabled={!storageRules.enableCloudSync}
                   value="remote"
-                  className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                  className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                 >
-                  <div className='flex items-center gap-2'>
+                  <div className="flex items-center gap-2">
                     <Icon icon="globe" />
                     <Heading className="text-lg font-bold">Cloud Sync</Heading>
                   </div>
-                  <p className='pt-2'>
+                  <p className="pt-2">
                     Encrypted and synced securely to the cloud, ideal for out of the box collaboration.
                   </p>
                 </Radio>
                 <Radio
                   isDisabled={!isGitSyncEnabled || !storageRules.enableGitSync}
                   value="git"
-                  className="flex-1 data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] data-[disabled]:opacity-25 hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                  className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                 >
-                  <div className='flex items-center gap-2'>
+                  <div className="flex items-center gap-2">
                     <Icon icon={['fab', 'git-alt']} />
                     <Heading className="text-lg font-bold">Git Sync</Heading>
                   </div>
-                  <p className='pt-2'>
+                  <p className="pt-2">
                     Stored locally and synced to a Git repository. Ideal for version control and collaboration.
                   </p>
                 </Radio>
               </div>
             </RadioGroup>
             {showStorageRestrictionMessage && (
-              <div className="flex items-center px-2 py-1 gap-2 text-sm rounded-sm text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]">
+              <div className="flex items-center gap-2 rounded-sm bg-[rgba(var(--color-warning-rgb),0.5)] px-2 py-1 text-sm text-[--color-font-warning]">
                 <Icon icon="triangle-exclamation" />
                 <span>
-                  The organization owner mandates that projects must be created and stored using {getProjectStorageTypeLabel(storageRules)}.
+                  The organization owner mandates that projects must be created and stored using{' '}
+                  {getProjectStorageTypeLabel(storageRules)}.
                 </span>
               </div>
             )}
           </div>
-          <div className="flex w-full justify-end gap-2 items-center px-0.5 mt-4 pb-10">
-            <div className='flex items-center gap-2'>
-              {onCancel && <Button
-                onPress={onCancel}
-                className="hover:bg-[--hl-xs] border border-solid border-[--hl-md] px-4 py-2 text-[--color-font] transition-colors rounded-md h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-xs] text-sm"
-              >
-                Cancel
-              </Button>}
+          <div className="mt-4 flex w-full items-center justify-end gap-2 px-0.5 pb-10">
+            <div className="flex items-center gap-2">
+              {onCancel && (
+                <Button
+                  onPress={onCancel}
+                  className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] px-4 py-2 text-sm text-[--color-font] transition-colors hover:bg-[--hl-xs] aria-pressed:bg-[--hl-xs]"
+                >
+                  Cancel
+                </Button>
+              )}
               {storageType === 'git' && (
                 <Button
                   onPress={() => setActiveView('git-clone')}
-                  className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
                 >
                   Next
                 </Button>
@@ -269,15 +298,16 @@ export const ProjectSettingsForm: FC<Props> = ({
                 <Button
                   onPress={onUpsertProject}
                   isDisabled={upsertProjectFetcher.state !== 'idle'}
-                  className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
                 >
-                  {upsertProjectFetcher.state !== 'idle' && <Icon icon="spinner" className='animate-spin' />}
+                  {upsertProjectFetcher.state !== 'idle' && <Icon icon="spinner" className="animate-spin" />}
                   <span>{project ? 'Update' : 'Create'}</span>
                 </Button>
               )}
             </div>
           </div>
-        </>)}
+        </>
+      )}
 
       {activeView === 'git-clone' && (
         <>
@@ -287,57 +317,60 @@ export const ProjectSettingsForm: FC<Props> = ({
               onSelectionChange={key => {
                 setTab(key as OauthProviderName);
               }}
-              aria-label='Git repository settings tabs'
-              className="w-full min-w-[600px] h-full flex flex-col mt-4"
+              aria-label="Git repository settings tabs"
+              className="mt-4 flex h-full w-full min-w-[600px] flex-col"
             >
-              <TabList className='w-full flex-shrink-0 overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+              <TabList
+                className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+                aria-label="Request pane tabs"
+              >
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='github'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="github"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-github" /> GitHub</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-github" /> GitHub
+                  </div>
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='gitlab'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="gitlab"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-gitlab" /> GitLab</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-gitlab" /> GitLab
+                  </div>
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='custom'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="custom"
                 >
-                  <div className="flex gap-2 items-center"><i className="fa fa-code-fork" /> Git</div>
+                  <div className="flex items-center gap-2">
+                    <i className="fa fa-code-fork" /> Git
+                  </div>
                 </Tab>
               </TabList>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='github'>
-                <GitHubRepositorySetupFormGroup
-                  onSubmit={onGitRepoFormSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="github">
+                <GitHubRepositorySetupFormGroup onSubmit={onGitRepoFormSubmit} />
               </TabPanel>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='gitlab'>
-                <GitLabRepositorySetupFormGroup
-                  onSubmit={onGitRepoFormSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="gitlab">
+                <GitLabRepositorySetupFormGroup onSubmit={onGitRepoFormSubmit} />
               </TabPanel>
-              <TabPanel className='w-full h-full overflow-y-auto py-2' id='custom'>
-                <CustomRepositorySettingsFormGroup
-                  onSubmit={onGitRepoFormSubmit}
-                />
+              <TabPanel className="h-full w-full overflow-y-auto py-2" id="custom">
+                <CustomRepositorySettingsFormGroup onSubmit={onGitRepoFormSubmit} />
               </TabPanel>
             </Tabs>
           </ErrorBoundary>
-          <div className='flex items-center justify-end gap-2 pb-10'>
+          <div className="flex items-center justify-end gap-2 pb-10">
             <Button
               onPress={() => setActiveView('project')}
-              className="hover:bg-[--hl-xs] border border-solid border-[--hl-md] px-4 py-2 text-[--color-font] transition-colors rounded-md h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-xs] text-sm"
+              className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] px-4 py-2 text-sm text-[--color-font] transition-colors hover:bg-[--hl-xs] aria-pressed:bg-[--hl-xs]"
             >
               Back
             </Button>
             <Button
-              type='submit'
+              type="submit"
               form={selectedTab}
-              className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
             >
               Clone
             </Button>
@@ -348,72 +381,81 @@ export const ProjectSettingsForm: FC<Props> = ({
       {activeView === 'git-results' && (
         <>
           {initCloneGitRepositoryFetcher.state !== 'idle' && (
-            <div className='w-full flex flex-col gap-2 pt-4 items-center justify-center'>
-              <div className="flex flex-col w-full items-center p-4 gap-2 text-sm rounded-sm text-[--color-font-success] bg-[--hl-xs]">
-                <span className='flex items-center justify-center relative'>
-                  <InsomniaLogo className='w-12 h-12' />
+            <div className="flex w-full flex-col items-center justify-center gap-2 pt-4">
+              <div className="flex w-full flex-col items-center gap-2 rounded-sm bg-[--hl-xs] p-4 text-sm text-[--color-font-success]">
+                <span className="relative flex items-center justify-center">
+                  <InsomniaLogo className="h-12 w-12" />
                 </span>
-                <p className='p-2 text-center font-bold text-[--color-font]'>Loading Insomnia files from repository</p>
+                <p className="p-2 text-center font-bold text-[--color-font]">Loading Insomnia files from repository</p>
               </div>
             </div>
           )}
-          {(insomniaFiles.length === 0 && initCloneGitRepositoryFetcher.state === 'idle') && (
-            <div className='w-full flex flex-col gap-2 pt-4 items-center justify-center'>
-              <div className="flex flex-col w-full items-center p-4 gap-2 text-sm rounded-sm text-[--color-font-success] bg-[--hl-xs]">
-                <span className='flex items-center justify-center relative'>
-                  <InsomniaLogo className='w-12 h-12' />
+          {insomniaFiles.length === 0 && initCloneGitRepositoryFetcher.state === 'idle' && (
+            <div className="flex w-full flex-col items-center justify-center gap-2 pt-4">
+              <div className="flex w-full flex-col items-center gap-2 rounded-sm bg-[--hl-xs] p-4 text-sm text-[--color-font-success]">
+                <span className="relative flex items-center justify-center">
+                  <InsomniaLogo className="h-12 w-12" />
                 </span>
-                <p className='p-2 text-center font-bold text-[--color-font]'>We didn't find any Insomnia files in this repository.</p>
-                <p className='p-2 text-center font-bold text-[--color-font]'>Clone this repository to start a new project.</p>
-                <p className='p-2 text-center text-[--color-font]'>Add your collections, documents, environments and mock servers, and share them using Git.</p>
+                <p className="p-2 text-center font-bold text-[--color-font]">
+                  We didn't find any Insomnia files in this repository.
+                </p>
+                <p className="p-2 text-center font-bold text-[--color-font]">
+                  Clone this repository to start a new project.
+                </p>
+                <p className="p-2 text-center text-[--color-font]">
+                  Add your collections, documents, environments and mock servers, and share them using Git.
+                </p>
               </div>
             </div>
           )}
           {insomniaFiles.length > 0 && (
-            <div className='flex flex-col gap-2'>
-              <Heading className='text-base'>We found {insomniaFiles.length} Insomnia files in your repository</Heading>
-              <div className='rounded w-full border border-solid border-[--hl-sm] select-none overflow-x-hidden overflow-y-auto max-h-96'>
+            <div className="flex flex-col gap-2">
+              <Heading className="text-base">We found {insomniaFiles.length} Insomnia files in your repository</Heading>
+              <div className="max-h-96 w-full select-none overflow-y-auto overflow-x-hidden rounded border border-solid border-[--hl-sm]">
                 <Table
-                  selectionMode='none'
-                  aria-label='Insomnia files'
-                  className="border-separate border-spacing-0 w-full table-fixed"
+                  selectionMode="none"
+                  aria-label="Insomnia files"
+                  className="w-full table-fixed border-separate border-spacing-0"
                 >
                   <TableHeader>
-                    <Column isRowHeader className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column
+                      isRowHeader
+                      className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none"
+                    >
                       Name
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       Type
                     </Column>
-                    <Column className="sticky px-2 py-2 top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
+                    <Column className="sticky top-0 z-10 border-b border-[--hl-sm] bg-[--hl-xs] px-2 py-2 text-left text-xs font-semibold backdrop-blur backdrop-filter focus:outline-none">
                       File path
                     </Column>
                   </TableHeader>
                   <TableBody
-                    className="divide divide-[--hl-sm] divide-solid"
+                    className="divide divide-solid divide-[--hl-sm]"
                     items={insomniaFiles.map(file => ({ id: file.path, ...file }))}
                   >
                     {file => (
-                      <Row className="group focus:outline-none focus-within:bg-[--hl-xxs] transition-colors">
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <div className='flex items-center gap-2 py-2 px-2'>
-                            <span className={`${scopeToBgColorMap[file.scope]} ${scopeToTextColorMap[file.scope]} rounded aspect-square h-6 flex items-center justify-center`}>
+                      <Row className="group transition-colors focus-within:bg-[--hl-xxs] focus:outline-none">
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <div className="flex items-center gap-2 px-2 py-2">
+                            <span
+                              className={`${scopeToBgColorMap[file.scope]} ${scopeToTextColorMap[file.scope]} flex aspect-square h-6 items-center justify-center rounded`}
+                            >
                               <Icon icon={scopeToIconMap[file.scope]} className="w-4" />
                             </span>
-                            <span className='truncate'>{file.name}</span>
+                            <span className="truncate">{file.name}</span>
                           </div>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <span className='flex items-center px-2 text-[--hl] gap-1'>
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <span className="flex items-center gap-1 px-2 text-[--hl]">
                             {scopeToLabelMap[file.scope]}
                           </span>
                         </Cell>
-                        <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
-                          <span className='flex items-center italic gap-1 text-[--hl]'>
-                            <Icon icon="file" className='text-[--hl]' />
-                            <span className='px-2 text-[--hl] truncate'>
-                              {file.path}
-                            </span>
+                        <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
+                          <span className="flex items-center gap-1 italic text-[--hl]">
+                            <Icon icon="file" className="text-[--hl]" />
+                            <span className="truncate px-2 text-[--hl]">{file.path}</span>
                           </span>
                         </Cell>
                       </Row>
@@ -423,21 +465,21 @@ export const ProjectSettingsForm: FC<Props> = ({
               </div>
             </div>
           )}
-          <div className='flex items-center justify-end gap-2 pb-10'>
+          <div className="flex items-center justify-end gap-2 pb-10">
             <Button
               isDisabled={upsertProjectFetcher.state !== 'idle'}
               onPress={() => {
                 setTab('github');
                 setActiveView('git-clone');
               }}
-              className="hover:bg-[--hl-xs] border border-solid border-[--hl-md] px-4 py-2 text-[--color-font] transition-colors rounded-md h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-xs] text-sm"
+              className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] px-4 py-2 text-sm text-[--color-font] transition-colors hover:bg-[--hl-xs] aria-pressed:bg-[--hl-xs]"
             >
               Back
             </Button>
             <Button
               isDisabled={upsertProjectFetcher.state !== 'idle'}
               onPress={onUpsertProject}
-              className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
             >
               {upsertProjectFetcher.state !== 'idle' ? (
                 <>
@@ -457,92 +499,125 @@ export const ProjectSettingsForm: FC<Props> = ({
 
       {activeView === 'switch-storage-type' && (
         <>
-          <div className='flex flex-col justify-start gap-2 overflow-y-auto px-10'>
+          <div className="flex flex-col justify-start gap-2 overflow-y-auto px-10">
             {storageType === 'git' && (
-              <div className='text-[--color-font] flex flex-col gap-4'>
-                <div className='flex flex-col gap-4'>
+              <div className="flex flex-col gap-4 text-[--color-font]">
+                <div className="flex flex-col gap-4">
                   <p>
-                    {project && isRemoteProject(project) ?
-                      'We will be converting your Cloud Sync project into a Git project, and permanently remove all cloud data for this project from the cloud.'
+                    {project && isRemoteProject(project)
+                      ? 'We will be converting your Cloud Sync project into a Git project, and permanently remove all cloud data for this project from the cloud.'
                       : 'We will be converting your project into a Git project.'}
                   </p>
-                  <ul className='text-left flex flex-col gap-2'>
-                    <li><i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.</li>
-                    <li><i className="fa fa-check text-emerald-600" /> Your collaborators can synchronize files using Git.</li>
-                    <li><i className="fa fa-check text-emerald-600" /> The project will be stored locally also for every existing collaborator.</li>
+                  <ul className="flex flex-col gap-2 text-left">
+                    <li>
+                      <i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.
+                    </li>
+                    <li>
+                      <i className="fa fa-check text-emerald-600" /> Your collaborators can synchronize files using Git.
+                    </li>
+                    <li>
+                      <i className="fa fa-check text-emerald-600" /> The project will be stored locally also for every
+                      existing collaborator.
+                    </li>
                   </ul>
-                  <p>
-                    You can synchronize a local project back to the cloud if you decide to do so.
-                  </p>
-                  {project && isRemoteProject(project) && <p className='flex gap-2 items-center'>
-                    <Icon icon="triangle-exclamation" className='text-[--color-warning]' />
-                    Remember to pull your latest project updates before this operation
-                  </p>}
+                  <p>You can synchronize a local project back to the cloud if you decide to do so.</p>
+                  {project && isRemoteProject(project) && (
+                    <p className="flex items-center gap-2">
+                      <Icon icon="triangle-exclamation" className="text-[--color-warning]" />
+                      Remember to pull your latest project updates before this operation
+                    </p>
+                  )}
                 </div>
               </div>
             )}
             {storageType === 'local' && (
-              <div className='text-[--color-font] flex flex-col gap-4'>
-                <div className='flex flex-col gap-4'>
+              <div className="flex flex-col gap-4 text-[--color-font]">
+                <div className="flex flex-col gap-4">
                   <p>
-                    {project && isGitProject(project) ? 'We will be converting your Git project into a local project.' : 'We will be converting your Cloud Sync project into a local project, and permanently remove all cloud data for this project from the cloud.'}
+                    {project && isGitProject(project)
+                      ? 'We will be converting your Git project into a local project.'
+                      : 'We will be converting your Cloud Sync project into a local project, and permanently remove all cloud data for this project from the cloud.'}
                   </p>
                   {project && isGitProject(project) && (
-                    <ul className='text-left flex flex-col gap-2'>
-                      <li><i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.</li>
-                      <li><i className="fa fa-check text-emerald-600" /> You will not be able to synchronize this project using Git anymore.</li>
-                      <li><i className="fa fa-check text-emerald-600" /> This action will not delete your remote repository.</li>
+                    <ul className="flex flex-col gap-2 text-left">
+                      <li>
+                        <i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.
+                      </li>
+                      <li>
+                        <i className="fa fa-check text-emerald-600" /> You will not be able to synchronize this project
+                        using Git anymore.
+                      </li>
+                      <li>
+                        <i className="fa fa-check text-emerald-600" /> This action will not delete your remote
+                        repository.
+                      </li>
                     </ul>
                   )}
                   {project && isRemoteProject(project) && (
                     <>
-                      <ul className='text-left flex flex-col gap-2'>
-                        <li><i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.</li>
-                        <li><i className="fa fa-check text-emerald-600" /> Your collaborators will not be able to push and pull files anymore.</li>
-                        <li><i className="fa fa-check text-emerald-600" /> The project will become local also for every existing collaborator.</li>
+                      <ul className="flex flex-col gap-2 text-left">
+                        <li>
+                          <i className="fa fa-check text-emerald-600" /> The project will be 100% stored locally.
+                        </li>
+                        <li>
+                          <i className="fa fa-check text-emerald-600" /> Your collaborators will not be able to push and
+                          pull files anymore.
+                        </li>
+                        <li>
+                          <i className="fa fa-check text-emerald-600" /> The project will become local also for every
+                          existing collaborator.
+                        </li>
                       </ul>
                       <p>
-                        You can still use Git Sync for local projects without using the cloud, and you can synchronize a local project back to the cloud if you decide to do so.
+                        You can still use Git Sync for local projects without using the cloud, and you can synchronize a
+                        local project back to the cloud if you decide to do so.
                       </p>
                     </>
                   )}
-                  <p className='flex gap-2 items-center'>
-                    <Icon icon="triangle-exclamation" className='text-[--color-warning]' />
+                  <p className="flex items-center gap-2">
+                    <Icon icon="triangle-exclamation" className="text-[--color-warning]" />
                     Remember to pull your latest project updates before this operation
                   </p>
                 </div>
               </div>
             )}
             {storageType === 'remote' && (
-              <div className='text-[--color-font] flex flex-col gap-4'>
-                <div className='flex flex-col gap-4'>
+              <div className="flex flex-col gap-4 text-[--color-font]">
+                <div className="flex flex-col gap-4">
                   <p>
-                    We will be synchronizing your local project to Insomnia's Cloud in a secure encrypted format which will enable cloud collaboration.
+                    We will be synchronizing your local project to Insomnia's Cloud in a secure encrypted format which
+                    will enable cloud collaboration.
                   </p>
-                  <ul className='text-left flex flex-col gap-2'>
-                    <li><i className="fa fa-check text-emerald-600" /> Your data in the cloud is encrypted and secure.</li>
-                    <li><i className="fa fa-check text-emerald-600" /> You can now collaborate with any amount of users and use cloud features.</li>
-                    <li><i className="fa fa-check text-emerald-600" /> Your project will be always available on any client after logging in.</li>
+                  <ul className="flex flex-col gap-2 text-left">
+                    <li>
+                      <i className="fa fa-check text-emerald-600" /> Your data in the cloud is encrypted and secure.
+                    </li>
+                    <li>
+                      <i className="fa fa-check text-emerald-600" /> You can now collaborate with any amount of users
+                      and use cloud features.
+                    </li>
+                    <li>
+                      <i className="fa fa-check text-emerald-600" /> Your project will be always available on any client
+                      after logging in.
+                    </li>
                   </ul>
-                  <p>
-                    You can still use Git Sync for cloud projects.
-                  </p>
+                  <p>You can still use Git Sync for cloud projects.</p>
                 </div>
               </div>
             )}
           </div>
-          <div className="flex justify-end gap-2 items-center px-10 pb-10">
-            <div className='flex items-center gap-2'>
+          <div className="flex items-center justify-end gap-2 px-10 pb-10">
+            <div className="flex items-center gap-2">
               <Button
                 onPress={() => setActiveView('project')}
-                className="hover:bg-[--hl-xs] border border-solid border-[--hl-md] px-4 py-2 text-[--color-font] transition-colors rounded-md h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-xs] text-sm"
+                className="flex h-full items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] px-4 py-2 text-sm text-[--color-font] transition-colors hover:bg-[--hl-xs] aria-pressed:bg-[--hl-xs]"
               >
                 Back
               </Button>
               <Button
                 onPress={onUpsertProject}
                 isDisabled={upsertProjectFetcher.state !== 'idle'}
-                className="w-[10ch] text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] px-4 py-2 h-full flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-md hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex h-full w-[10ch] items-center justify-center gap-2 rounded-md border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-2 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
               >
                 {upsertProjectFetcher.state !== 'idle' && <Icon icon="spinner" className="animate-spin" />}
                 <span>Update</span>
diff --git a/packages/insomnia/src/ui/components/proto-file/proto-file-list.tsx b/packages/insomnia/src/ui/components/proto-file/proto-file-list.tsx
index eb2d0e3e8b..772b7e5ec4 100644
--- a/packages/insomnia/src/ui/components/proto-file/proto-file-list.tsx
+++ b/packages/insomnia/src/ui/components/proto-file/proto-file-list.tsx
@@ -34,11 +34,11 @@ const recursiveRender = (
   handleUpdate: UpdateProtoFileHandler,
   handleDelete: DeleteProtoFileHandler,
   handleDeleteDirectory: DeleteProtoDirectoryHandler,
-  selectedId?: string
+  selectedId?: string,
 ): React.ReactNode => [
   dir && (
     <li
-      className='row-spaced'
+      className="row-spaced"
       style={{
         paddingLeft: `${indent * 1}rem`,
       }}
@@ -65,11 +65,7 @@ const recursiveRender = (
     </li>
   ),
   ...files.map(f => (
-    <li
-      className='row-spaced cursor-pointer'
-      key={f._id}
-      onClick={() => handleSelect(f._id)}
-    >
+    <li className="row-spaced cursor-pointer" key={f._id} onClick={() => handleSelect(f._id)}>
       <>
         <Checkbox
           className="py-0"
@@ -83,12 +79,15 @@ const recursiveRender = (
           }}
         >
           {({ isSelected }) => {
-            return <>
-              {isSelected ?
-                <i className="fa fa-square-check fa-1x h-4 mr-2" style={{ color: 'rgb(74 222 128)' }} /> :
-                <i className="fa fa-square fa-1x h-4 mr-2" />
-              }
-            </>;
+            return (
+              <>
+                {isSelected ? (
+                  <i className="fa fa-square-check fa-1x mr-2 h-4" style={{ color: 'rgb(74 222 128)' }} />
+                ) : (
+                  <i className="fa fa-square fa-1x mr-2 h-4" />
+                )}
+              </>
+            );
           }}
         </Checkbox>
         <span className="wide">
@@ -131,16 +130,14 @@ const recursiveRender = (
       handleUpdate,
       handleDelete,
       handleDeleteDirectory,
-      selectedId
-    )
+      selectedId,
+    ),
   ),
 ];
 
 export const ProtoFileList: FunctionComponent<Props> = props => (
   <ul className="divide-y divide-solid divide-[--hl]">
-    {!props.protoDirectories.length && (
-      <li>No proto files exist for this workspace</li>
-    )}
+    {!props.protoDirectories.length && <li>No proto files exist for this workspace</li>}
     {props.protoDirectories.map(dir =>
       recursiveRender(
         0,
@@ -150,8 +147,8 @@ export const ProtoFileList: FunctionComponent<Props> = props => (
         props.handleUpdate,
         props.handleDelete,
         props.handleDeleteDirectory,
-        props.selectedId
-      )
+        props.selectedId,
+      ),
     )}
   </ul>
 );
diff --git a/packages/insomnia/src/ui/components/rendered-query-string.tsx b/packages/insomnia/src/ui/components/rendered-query-string.tsx
index f83f9e3e39..eb29bbef44 100644
--- a/packages/insomnia/src/ui/components/rendered-query-string.tsx
+++ b/packages/insomnia/src/ui/components/rendered-query-string.tsx
@@ -3,7 +3,12 @@ import React, { type FC, useEffect, useState } from 'react';
 
 import { database as db } from '../../common/database';
 import * as models from '../../models';
-import { PATH_PARAMETER_REGEX, type Request, type RequestAuthentication, type RequestParameter } from '../../models/request';
+import {
+  PATH_PARAMETER_REGEX,
+  type Request,
+  type RequestAuthentication,
+  type RequestParameter,
+} from '../../models/request';
 import { isRequestGroup, type RequestGroup } from '../../models/request-group';
 import type { WebSocketRequest } from '../../models/websocket-request';
 import { getAuthObjectOrNull, isAuthEnabled } from '../../network/authentication';
@@ -20,8 +25,9 @@ const defaultPreview = '...';
 
 const addApiKeyToParams = (requestAuth: RequestAuthentication) => {
   const shouldAddAuthParamsToQuery = requestAuth.type === 'apikey' && requestAuth.addTo === 'queryParams';
-  return shouldAddAuthParamsToQuery && requestAuth.key && requestAuth.value ?
-    [{ name: requestAuth.key, value: requestAuth.value }] : [];
+  return shouldAddAuthParamsToQuery && requestAuth.key && requestAuth.value
+    ? [{ name: requestAuth.key, value: requestAuth.value }]
+    : [];
 };
 
 async function getQueryParamsFromAuth(request: Request | WebSocketRequest): Promise<RequestParameter[]> {
@@ -93,13 +99,20 @@ export const RenderedQueryString: FC<Props> = ({ request }) => {
       }
     };
     fn();
-
-  }, [request.parameters, request.url, request.pathParameters, request.settingEncodeUrl, handleRender, request.authentication, request]);
+  }, [
+    request.parameters,
+    request.url,
+    request.pathParameters,
+    request.settingEncodeUrl,
+    handleRender,
+    request.authentication,
+    request,
+  ]);
 
   const className = previewString === defaultPreview ? 'super-duper-faint' : 'selectable force-wrap';
 
   return (
-    <div className="flex justify-between overflow-auto relative h-full gap-[var(--padding-sm)] w-full">
+    <div className="relative flex h-full w-full justify-between gap-[var(--padding-sm)] overflow-auto">
       <span className={classNames('my-auto', className)}>{previewString}</span>
 
       <CopyButton
@@ -108,7 +121,7 @@ export const RenderedQueryString: FC<Props> = ({ request }) => {
         disabled={previewString === defaultPreview}
         title="Copy URL"
         confirmMessage=""
-        className='self-start sticky top-0'
+        className="sticky top-0 self-start"
       >
         <i className="fa fa-copy" />
       </CopyButton>
diff --git a/packages/insomnia/src/ui/components/rendered-text.tsx b/packages/insomnia/src/ui/components/rendered-text.tsx
index 82d62148fc..5620222f64 100644
--- a/packages/insomnia/src/ui/components/rendered-text.tsx
+++ b/packages/insomnia/src/ui/components/rendered-text.tsx
@@ -60,8 +60,7 @@ class RenderedTextInternal extends PureComponent<Props, State> {
         </span>
       );
     }
-      return this.state.renderedText || '';
-
+    return this.state.renderedText || '';
   }
 }
 
diff --git a/packages/insomnia/src/ui/components/request-url-bar.tsx b/packages/insomnia/src/ui/components/request-url-bar.tsx
index 115a29e3a3..a36a5eec91 100644
--- a/packages/insomnia/src/ui/components/request-url-bar.tsx
+++ b/packages/insomnia/src/ui/components/request-url-bar.tsx
@@ -41,392 +41,450 @@ export interface RequestUrlBarHandle {
   focusInput: () => void;
 }
 
-export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(({
-  handleAutocompleteUrls,
-  uniquenessKey,
-  onPaste,
-}, ref) => {
-  const [searchParams, setSearchParams] = useSearchParams();
-  const { userSession } = useRootLoaderData();
-  const { vaultKey } = userSession;
-  const [showEnvVariableMissingModal, setShowEnvVariableMissingModal] = useState(false);
-  const [showInputVaultKeyModal, setShowInputVaultKeyModal] = useState(false);
-  const [undefinedEnvironmentVariables, setUndefinedEnvironmentVariables] = useState('');
-  const undefinedEnvironmentVariableList = undefinedEnvironmentVariables?.split(',');
-  if (searchParams.has('error')) {
-    if (searchParams.has('envVariableMissing') && searchParams.get('undefinedEnvironmentVariables')) {
-      setShowEnvVariableMissingModal(true);
-      setUndefinedEnvironmentVariables(searchParams.get('undefinedEnvironmentVariables')!);
-    } else {
-      // only for request render error
-      showAlert({
-        title: 'Unexpected Request Failure',
-        message: (
-          <div>
-            <p>The request failed due to an unhandled error:</p>
-            <code className="wide selectable">
-              <pre>{searchParams.get('error')}</pre>
-            </code>
-          </div>
-        ),
-      });
+export const RequestUrlBar = forwardRef<RequestUrlBarHandle, Props>(
+  ({ handleAutocompleteUrls, uniquenessKey, onPaste }, ref) => {
+    const [searchParams, setSearchParams] = useSearchParams();
+    const { userSession } = useRootLoaderData();
+    const { vaultKey } = userSession;
+    const [showEnvVariableMissingModal, setShowEnvVariableMissingModal] = useState(false);
+    const [showInputVaultKeyModal, setShowInputVaultKeyModal] = useState(false);
+    const [undefinedEnvironmentVariables, setUndefinedEnvironmentVariables] = useState('');
+    const undefinedEnvironmentVariableList = undefinedEnvironmentVariables?.split(',');
+    if (searchParams.has('error')) {
+      if (searchParams.has('envVariableMissing') && searchParams.get('undefinedEnvironmentVariables')) {
+        setShowEnvVariableMissingModal(true);
+        setUndefinedEnvironmentVariables(searchParams.get('undefinedEnvironmentVariables')!);
+      } else {
+        // only for request render error
+        showAlert({
+          title: 'Unexpected Request Failure',
+          message: (
+            <div>
+              <p>The request failed due to an unhandled error:</p>
+              <code className="wide selectable">
+                <pre>{searchParams.get('error')}</pre>
+              </code>
+            </div>
+          ),
+        });
+      }
+
+      // clean up params
+      searchParams.delete('error');
+      setSearchParams({});
     }
 
-    // clean up params
-    searchParams.delete('error');
-    setSearchParams({});
-  }
+    const { activeWorkspace, activeEnvironment } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+    const { settings } = useRootLoaderData();
+    const { hotKeyRegistry } = settings;
+    const {
+      activeRequest,
+      activeRequestMeta: { downloadPath },
+    } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
+    const patchRequestMeta = useRequestMetaPatcher();
+    const methodDropdownRef = useRef<DropdownHandle>(null);
+    const dropdownRef = useRef<DropdownHandle>(null);
+    const inputRef = useRef<OneLineEditorHandle>(null);
+    const isRealtimeRequest =
+      activeRequest && (isEventStreamRequest(activeRequest) || isGraphqlSubscriptionRequest(activeRequest));
 
-  const {
-    activeWorkspace,
-    activeEnvironment,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
-  const { settings } = useRootLoaderData();
-  const { hotKeyRegistry } = settings;
-  const { activeRequest, activeRequestMeta: { downloadPath } } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
-  const patchRequestMeta = useRequestMetaPatcher();
-  const methodDropdownRef = useRef<DropdownHandle>(null);
-  const dropdownRef = useRef<DropdownHandle>(null);
-  const inputRef = useRef<OneLineEditorHandle>(null);
-  const isRealtimeRequest = activeRequest && (isEventStreamRequest(activeRequest) || isGraphqlSubscriptionRequest(activeRequest));
+    const focusInput = useCallback(() => {
+      if (inputRef.current) {
+        inputRef.current.focusEnd();
+      }
+    }, [inputRef]);
 
-  const focusInput = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focusEnd();
-    }
-  }, [inputRef]);
+    useImperativeHandle(ref, () => ({ focusInput }), [focusInput]);
 
-  useImperativeHandle(ref, () => ({ focusInput }), [focusInput]);
+    const [currentInterval, setCurrentInterval] = useState<number | null>(null);
+    const [currentTimeout, setCurrentTimeout] = useState<number | undefined>(undefined);
+    const fetcher = useFetcher();
 
-  const [currentInterval, setCurrentInterval] = useState<number | null>(null);
-  const [currentTimeout, setCurrentTimeout] = useState<number | undefined>(undefined);
-  const fetcher = useFetcher();
+    const { updateTabById } = useInsomniaTabContext();
 
-  const { updateTabById } = useInsomniaTabContext();
-
-  const { organizationId, projectId, workspaceId, requestId } = useParams() as { organizationId: string; projectId: string; workspaceId: string; requestId: string };
-  const connect = useCallback((connectParams: ConnectActionParams) => {
-    fetcher.submit(JSON.stringify(connectParams),
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/connect`,
-        method: 'post',
-        encType: 'application/json',
-      });
-  }, [fetcher, organizationId, projectId, requestId, workspaceId]);
-  const send = useCallback((sendParams: SendActionParams) => {
-    // file://./../routes/request.tsx#sendAction
-    fetcher.submit(JSON.stringify(sendParams),
-      {
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/send`,
-        method: 'post',
-        encType: 'application/json',
-      });
-  }, [fetcher, organizationId, projectId, requestId, workspaceId]);
-
-  const sendOrConnect = useCallback(async (shouldPromptForPathAfterResponse?: boolean, ignoreUndefinedEnvVariable?: boolean) => {
-    updateTabById?.(requestId, { temporary: false });
-    models.stats.incrementExecutedRequests();
-    window.main.trackSegmentEvent({
-      event: SegmentEvent.requestExecute,
-      properties: {
-        preferredHttpVersion: settings.preferredHttpVersion,
-        // @ts-expect-error -- who cares
-        authenticationType: activeRequest.authentication?.type,
-        mimeType: activeRequest.body.mimeType,
+    const { organizationId, projectId, workspaceId, requestId } = useParams() as {
+      organizationId: string;
+      projectId: string;
+      workspaceId: string;
+      requestId: string;
+    };
+    const connect = useCallback(
+      (connectParams: ConnectActionParams) => {
+        fetcher.submit(JSON.stringify(connectParams), {
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/connect`,
+          method: 'post',
+          encType: 'application/json',
+        });
       },
-    });
-    // reset timeout
-    setCurrentTimeout(undefined);
+      [fetcher, organizationId, projectId, requestId, workspaceId],
+    );
+    const send = useCallback(
+      (sendParams: SendActionParams) => {
+        // file://./../routes/request.tsx#sendAction
+        fetcher.submit(JSON.stringify(sendParams), {
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/send`,
+          method: 'post',
+          encType: 'application/json',
+        });
+      },
+      [fetcher, organizationId, projectId, requestId, workspaceId],
+    );
 
-    if (isEventStreamRequest(activeRequest) || isGraphqlSubscriptionRequest(activeRequest)) {
-      const startListening = async () => {
-        const environmentId = activeEnvironment._id;
-        const workspaceId = activeWorkspace._id;
-        // Render any nunjucks tags in the url/headers/authentication settings/cookies
-        const workspaceCookieJar = await models.cookieJar.getOrCreateForParentId(workspaceId);
-
-        const ancestors = await db.withAncestors<Request | RequestGroup>(activeRequest, [
-          models.requestGroup.type,
-        ]);
-        // check for authentication overrides in parent folders
-        const requestGroups = ancestors.filter(isRequestGroup) as RequestGroup[];
-        activeRequest.authentication = getOrInheritAuthentication({ request: activeRequest, requestGroups });
-        activeRequest.headers = getOrInheritHeaders({ request: activeRequest, requestGroups });
-        const rendered = await tryToInterpolateRequestOrShowRenderErrorModal({
-          request: activeRequest,
-          environmentId,
-          payload: {
-            url: activeRequest.url,
-            headers: activeRequest.headers,
-            authentication: activeRequest.authentication,
-            parameters: activeRequest.parameters.filter(p => !p.disabled),
-            workspaceCookieJar,
+    const sendOrConnect = useCallback(
+      async (shouldPromptForPathAfterResponse?: boolean, ignoreUndefinedEnvVariable?: boolean) => {
+        updateTabById?.(requestId, { temporary: false });
+        models.stats.incrementExecutedRequests();
+        window.main.trackSegmentEvent({
+          event: SegmentEvent.requestExecute,
+          properties: {
+            preferredHttpVersion: settings.preferredHttpVersion,
+            // @ts-expect-error -- who cares
+            authenticationType: activeRequest.authentication?.type,
+            mimeType: activeRequest.body.mimeType,
           },
         });
-        rendered && connect({
-          url: joinUrlAndQueryString(rendered.url, buildQueryStringFromParams(rendered.parameters)),
-          headers: rendered.headers,
-          authentication: rendered.authentication,
-          cookieJar: rendered.workspaceCookieJar,
-          suppressUserAgent: rendered.suppressUserAgent,
-        });
+        // reset timeout
+        setCurrentTimeout(undefined);
+
+        if (isEventStreamRequest(activeRequest) || isGraphqlSubscriptionRequest(activeRequest)) {
+          const startListening = async () => {
+            const environmentId = activeEnvironment._id;
+            const workspaceId = activeWorkspace._id;
+            // Render any nunjucks tags in the url/headers/authentication settings/cookies
+            const workspaceCookieJar = await models.cookieJar.getOrCreateForParentId(workspaceId);
+
+            const ancestors = await db.withAncestors<Request | RequestGroup>(activeRequest, [models.requestGroup.type]);
+            // check for authentication overrides in parent folders
+            const requestGroups = ancestors.filter(isRequestGroup) as RequestGroup[];
+            activeRequest.authentication = getOrInheritAuthentication({ request: activeRequest, requestGroups });
+            activeRequest.headers = getOrInheritHeaders({ request: activeRequest, requestGroups });
+            const rendered = await tryToInterpolateRequestOrShowRenderErrorModal({
+              request: activeRequest,
+              environmentId,
+              payload: {
+                url: activeRequest.url,
+                headers: activeRequest.headers,
+                authentication: activeRequest.authentication,
+                parameters: activeRequest.parameters.filter(p => !p.disabled),
+                workspaceCookieJar,
+              },
+            });
+            rendered &&
+              connect({
+                url: joinUrlAndQueryString(rendered.url, buildQueryStringFromParams(rendered.parameters)),
+                headers: rendered.headers,
+                authentication: rendered.authentication,
+                cookieJar: rendered.workspaceCookieJar,
+                suppressUserAgent: rendered.suppressUserAgent,
+              });
+          };
+          startListening();
+          return;
+        }
+
+        try {
+          send({ requestId, shouldPromptForPathAfterResponse, ignoreUndefinedEnvVariable });
+        } catch (err) {
+          showAlert({
+            title: 'Unexpected Request Failure',
+            message: (
+              <div>
+                <p>The request failed due to an unhandled error:</p>
+                <code className="wide selectable">
+                  <pre>{err.message}</pre>
+                </code>
+              </div>
+            ),
+          });
+        }
+      },
+      [
+        activeEnvironment._id,
+        activeRequest,
+        activeWorkspace._id,
+        connect,
+        requestId,
+        send,
+        settings.preferredHttpVersion,
+        updateTabById,
+      ],
+    );
+
+    useEffect(() => {
+      const sendOnMetaEnter = (event: KeyboardEvent) => {
+        if (event.metaKey && event.key === 'Enter') {
+          sendOrConnect();
+        }
       };
-      startListening();
-      return;
-    }
+      document
+        .getElementById('sidebar-request-gridlist')
+        ?.addEventListener('keydown', sendOnMetaEnter, { capture: true });
+      return () => {
+        document
+          .getElementById('sidebar-request-gridlist')
+          ?.removeEventListener('keydown', sendOnMetaEnter, { capture: true });
+      };
+    }, [sendOrConnect]);
 
-    try {
-      send({ requestId, shouldPromptForPathAfterResponse, ignoreUndefinedEnvVariable });
-    } catch (err) {
-      showAlert({
-        title: 'Unexpected Request Failure',
-        message: (
-          <div>
-            <p>The request failed due to an unhandled error:</p>
-            <code className="wide selectable">
-              <pre>{err.message}</pre>
-            </code>
-          </div>
-        ),
-      });
-    }
-  }, [activeEnvironment._id, activeRequest, activeWorkspace._id, connect, requestId, send, settings.preferredHttpVersion, updateTabById]);
+    useInterval(sendOrConnect, currentInterval && fetcher.state === 'idle' ? currentInterval : null);
+    useTimeoutWhen(sendOrConnect, currentTimeout, !!currentTimeout);
+    const patchRequest = useRequestPatcher();
 
-  useEffect(() => {
-    const sendOnMetaEnter = (event: KeyboardEvent) => {
-      if (event.metaKey && event.key === 'Enter') {
-        sendOrConnect();
-      }
-    };
-    document.getElementById('sidebar-request-gridlist')?.addEventListener('keydown', sendOnMetaEnter, { capture: true });
-    return () => {
-      document.getElementById('sidebar-request-gridlist')?.removeEventListener('keydown', sendOnMetaEnter, { capture: true });
-    };
-  }, [sendOrConnect]);
+    useDocBodyKeyboardShortcuts({
+      request_focusUrl: () => {
+        inputRef.current?.focusEnd();
+        inputRef.current?.selectAll();
+      },
+      request_send: () => {
+        if (activeRequest.url) {
+          sendOrConnect();
+        }
+      },
+      request_toggleHttpMethodMenu: () => {
+        methodDropdownRef.current?.toggle();
+      },
+      request_showOptions: () => {
+        dropdownRef.current?.toggle(true);
+      },
+    });
 
-  useInterval(sendOrConnect, currentInterval && fetcher.state === 'idle' ? currentInterval : null);
-  useTimeoutWhen(sendOrConnect, currentTimeout, !!currentTimeout);
-  const patchRequest = useRequestPatcher();
-
-  useDocBodyKeyboardShortcuts({
-    request_focusUrl: () => {
-      inputRef.current?.focusEnd();
-      inputRef.current?.selectAll();
-    },
-    request_send: () => {
-      if (activeRequest.url) {
-        sendOrConnect();
-      }
-    },
-    request_toggleHttpMethodMenu: () => {
-      methodDropdownRef.current?.toggle();
-    },
-    request_showOptions: () => {
-      dropdownRef.current?.toggle(true);
-    },
-  });
-
-  const buttonText = isRealtimeRequest ? 'Connect' : (downloadPath ? 'Download' : 'Send');
-  const borderRadius = isRealtimeRequest ? 'rounded-sm' : 'rounded-l-sm';
-  const { url, method } = activeRequest;
-  const isEventStreamOpen = useReadyState({ requestId: activeRequest._id, protocol: 'curl' });
-  const isGraphQLSubscriptionOpen = useReadyState({ requestId: activeRequest._id, protocol: 'webSocket' });
-  const isCancellable = currentInterval || currentTimeout || isEventStreamOpen || isGraphQLSubscriptionOpen;
-  return (
-    <div className="w-full flex justify-between self-stretch items-stretch">
-      <div className="flex items-center">
-        <MethodDropdown
-          ref={methodDropdownRef}
-          onChange={method => patchRequest(requestId, { method })}
-          method={method}
-        />
-      </div>
-      <div className="flex flex-1 p-1 items-center">
-        <OneLineEditor
-          id="request-url-bar"
-          key={uniquenessKey}
-          ref={inputRef}
-          type="text"
-          getAutocompleteConstants={handleAutocompleteUrls}
-          placeholder="https://api.myproduct.com/v1/users"
-          defaultValue={url}
-          onChange={url => patchRequest(requestId, { url })}
-          onKeyDown={createKeybindingsHandler({
-            'Enter': () => sendOrConnect(),
-          })}
-          onPaste={onPaste}
-        />
-        <div className='flex self-stretch'>
-          {isCancellable ? (
-            <button
-              type="button"
-              className="px-[--padding-md] bg-[--color-surprise] text-[--color-font-surprise] rounded-sm"
-              onClick={() => {
-                if (isEventStreamRequest(activeRequest)) {
-                  window.main.curl.close({ requestId: activeRequest._id });
-                  return;
-                }
-                if (isGraphqlSubscriptionRequest(activeRequest)) {
-                  window.main.webSocket.close({ requestId: activeRequest._id });
-                }
-                setCurrentInterval(null);
-                setCurrentTimeout(undefined);
-              }}
-            >
-              {isRealtimeRequest ? 'Disconnect' : 'Cancel'}
-            </button>
-          ) : (
-            <>
-              <button onClick={() => sendOrConnect()} className={`px-[--padding-md] bg-[--color-surprise] text-[--color-font-surprise] ${borderRadius}`} type="button">{buttonText}</button>
-              {isRealtimeRequest ? null : (
-                <Dropdown
-                  key="dropdown"
-                  className="flex"
-                  ref={dropdownRef}
-                  aria-label="Request Options"
-                  closeOnSelect={false}
-                  triggerButton={
-                    <Button
-                      className="px-1 bg-[--color-surprise] text-[--color-font-surprise] rounded-r-sm"
-                      style={{
-                        borderTopRightRadius: '0.125rem',
-                        borderBottomRightRadius: '0.125rem',
-                      }}
-                    >
-                      <i className="fa fa-caret-down" />
-                    </Button>
-                  }
-                >
-                  <DropdownSection
-                    aria-label="Basic Section"
-                    title="Basic"
-                  >
-                    <DropdownItem aria-label="send-now">
-                      <ItemContent icon="arrow-circle-o-right" label="Send Now" hint={hotKeyRegistry.request_send} onClick={sendOrConnect} />
-                    </DropdownItem>
-                    <DropdownItem aria-label='Generate Client Code'>
-                      <ItemContent
-                        icon="code"
-                        label="Generate Client Code"
-                        onClick={() => showModal(GenerateCodeModal, { request: activeRequest })}
-                      />
-                    </DropdownItem>
-                  </DropdownSection>
-                  <DropdownSection
-                    aria-label="Advanced Section"
-                    title="Advanced"
-                  >
-                    <DropdownItem aria-label='Send After Delay'>
-                      <ItemContent
-                        icon="clock-o"
-                        label="Send After Delay"
-                        onClick={() => showPrompt({
-                          inputType: 'decimal',
-                          title: 'Send After Delay',
-                          label: 'Delay in seconds',
-                          defaultValue: '3',
-                          onComplete: seconds => {
-                            setCurrentTimeout(+seconds * 1000);
-                          },
-                        })}
-                      />
-                    </DropdownItem>
-                    <DropdownItem aria-label='Repeat on Interval'>
-                      <ItemContent
-                        icon="repeat"
-                        label="Repeat on Interval"
-                        onClick={() => showPrompt({
-                          inputType: 'decimal',
-                          title: 'Send on Interval',
-                          label: 'Interval in seconds',
-                          defaultValue: '3',
-                          submitName: 'Start',
-                          onComplete: seconds => {
-                            sendOrConnect();
-                            setCurrentInterval(+seconds * 1000);
-                          },
-                        })}
-                      />
-                    </DropdownItem>
-                    {downloadPath
-                      ? (<DropdownItem aria-label='Stop Auto-Download'>
-                        <ItemContent
-                          icon="stop-circle"
-                          label="Stop Auto-Download"
-                          withPrompt
-                          onClick={() => patchRequestMeta(activeRequest._id, { downloadPath: null })}
-                        />
-                      </DropdownItem>)
-                      : (<DropdownItem aria-label='Download After Send'>
-                        <ItemContent
-                          icon="download"
-                          label="Download After Send"
-                          onClick={async () => {
-                            const { canceled, filePaths } = await window.dialog.showOpenDialog({
-                              title: 'Select Download Location',
-                              buttonLabel: 'Select',
-                              properties: ['openDirectory'],
-                            });
-                            if (canceled) {
-                              return;
-                            }
-                            patchRequestMeta(activeRequest._id, { downloadPath: filePaths[0] });
-                          }}
-                        />
-                      </DropdownItem>)}
-                    <DropdownItem aria-label='Send And Download'>
-                      <ItemContent icon="download" label="Send And Download" onClick={() => sendOrConnect(true)} />
-                    </DropdownItem>
-                  </DropdownSection>
-                </Dropdown>
-              )}
-            </>
-          )}
+    const buttonText = isRealtimeRequest ? 'Connect' : downloadPath ? 'Download' : 'Send';
+    const borderRadius = isRealtimeRequest ? 'rounded-sm' : 'rounded-l-sm';
+    const { url, method } = activeRequest;
+    const isEventStreamOpen = useReadyState({ requestId: activeRequest._id, protocol: 'curl' });
+    const isGraphQLSubscriptionOpen = useReadyState({ requestId: activeRequest._id, protocol: 'webSocket' });
+    const isCancellable = currentInterval || currentTimeout || isEventStreamOpen || isGraphQLSubscriptionOpen;
+    return (
+      <div className="flex w-full items-stretch justify-between self-stretch">
+        <div className="flex items-center">
+          <MethodDropdown
+            ref={methodDropdownRef}
+            onChange={method => patchRequest(requestId, { method })}
+            method={method}
+          />
         </div>
-      </div>
-      <VariableMissingErrorModal
-        isOpen={showEnvVariableMissingModal}
-        title={undefinedEnvironmentVariableList?.length === 1 ? '1 environment variable is missing' : `${undefinedEnvironmentVariableList?.length} environment variables are missing`}
-        okText='Execute anyways'
-        onOk={() => {
-          setShowEnvVariableMissingModal(false);
-          sendOrConnect(false, true);
-        }}
-        onCancel={() => setShowEnvVariableMissingModal(false)}
-      >
-        <div>
-          These environment variables have been defined, but have not been valued with in the currently active environment:
-          <div className='flex gap-2 flex-wrap max-h-80 overflow-y-auto'>
-            {undefinedEnvironmentVariableList?.map(item => {
-              return <div key={item} className="bg-[--color-surprise] text-[--color-font-surprise] mt-3 px-3 py-1 mr-3 rounded-sm">{item}</div>;
+        <div className="flex flex-1 items-center p-1">
+          <OneLineEditor
+            id="request-url-bar"
+            key={uniquenessKey}
+            ref={inputRef}
+            type="text"
+            getAutocompleteConstants={handleAutocompleteUrls}
+            placeholder="https://api.myproduct.com/v1/users"
+            defaultValue={url}
+            onChange={url => patchRequest(requestId, { url })}
+            onKeyDown={createKeybindingsHandler({
+              Enter: () => sendOrConnect(),
             })}
+            onPaste={onPaste}
+          />
+          <div className="flex self-stretch">
+            {isCancellable ? (
+              <button
+                type="button"
+                className="rounded-sm bg-[--color-surprise] px-[--padding-md] text-[--color-font-surprise]"
+                onClick={() => {
+                  if (isEventStreamRequest(activeRequest)) {
+                    window.main.curl.close({ requestId: activeRequest._id });
+                    return;
+                  }
+                  if (isGraphqlSubscriptionRequest(activeRequest)) {
+                    window.main.webSocket.close({ requestId: activeRequest._id });
+                  }
+                  setCurrentInterval(null);
+                  setCurrentTimeout(undefined);
+                }}
+              >
+                {isRealtimeRequest ? 'Disconnect' : 'Cancel'}
+              </button>
+            ) : (
+              <>
+                <button
+                  onClick={() => sendOrConnect()}
+                  className={`bg-[--color-surprise] px-[--padding-md] text-[--color-font-surprise] ${borderRadius}`}
+                  type="button"
+                >
+                  {buttonText}
+                </button>
+                {isRealtimeRequest ? null : (
+                  <Dropdown
+                    key="dropdown"
+                    className="flex"
+                    ref={dropdownRef}
+                    aria-label="Request Options"
+                    closeOnSelect={false}
+                    triggerButton={
+                      <Button
+                        className="rounded-r-sm bg-[--color-surprise] px-1 text-[--color-font-surprise]"
+                        style={{
+                          borderTopRightRadius: '0.125rem',
+                          borderBottomRightRadius: '0.125rem',
+                        }}
+                      >
+                        <i className="fa fa-caret-down" />
+                      </Button>
+                    }
+                  >
+                    <DropdownSection aria-label="Basic Section" title="Basic">
+                      <DropdownItem aria-label="send-now">
+                        <ItemContent
+                          icon="arrow-circle-o-right"
+                          label="Send Now"
+                          hint={hotKeyRegistry.request_send}
+                          onClick={sendOrConnect}
+                        />
+                      </DropdownItem>
+                      <DropdownItem aria-label="Generate Client Code">
+                        <ItemContent
+                          icon="code"
+                          label="Generate Client Code"
+                          onClick={() => showModal(GenerateCodeModal, { request: activeRequest })}
+                        />
+                      </DropdownItem>
+                    </DropdownSection>
+                    <DropdownSection aria-label="Advanced Section" title="Advanced">
+                      <DropdownItem aria-label="Send After Delay">
+                        <ItemContent
+                          icon="clock-o"
+                          label="Send After Delay"
+                          onClick={() =>
+                            showPrompt({
+                              inputType: 'decimal',
+                              title: 'Send After Delay',
+                              label: 'Delay in seconds',
+                              defaultValue: '3',
+                              onComplete: seconds => {
+                                setCurrentTimeout(+seconds * 1000);
+                              },
+                            })
+                          }
+                        />
+                      </DropdownItem>
+                      <DropdownItem aria-label="Repeat on Interval">
+                        <ItemContent
+                          icon="repeat"
+                          label="Repeat on Interval"
+                          onClick={() =>
+                            showPrompt({
+                              inputType: 'decimal',
+                              title: 'Send on Interval',
+                              label: 'Interval in seconds',
+                              defaultValue: '3',
+                              submitName: 'Start',
+                              onComplete: seconds => {
+                                sendOrConnect();
+                                setCurrentInterval(+seconds * 1000);
+                              },
+                            })
+                          }
+                        />
+                      </DropdownItem>
+                      {downloadPath ? (
+                        <DropdownItem aria-label="Stop Auto-Download">
+                          <ItemContent
+                            icon="stop-circle"
+                            label="Stop Auto-Download"
+                            withPrompt
+                            onClick={() => patchRequestMeta(activeRequest._id, { downloadPath: null })}
+                          />
+                        </DropdownItem>
+                      ) : (
+                        <DropdownItem aria-label="Download After Send">
+                          <ItemContent
+                            icon="download"
+                            label="Download After Send"
+                            onClick={async () => {
+                              const { canceled, filePaths } = await window.dialog.showOpenDialog({
+                                title: 'Select Download Location',
+                                buttonLabel: 'Select',
+                                properties: ['openDirectory'],
+                              });
+                              if (canceled) {
+                                return;
+                              }
+                              patchRequestMeta(activeRequest._id, { downloadPath: filePaths[0] });
+                            }}
+                          />
+                        </DropdownItem>
+                      )}
+                      <DropdownItem aria-label="Send And Download">
+                        <ItemContent icon="download" label="Send And Download" onClick={() => sendOrConnect(true)} />
+                      </DropdownItem>
+                    </DropdownSection>
+                  </Dropdown>
+                )}
+              </>
+            )}
           </div>
         </div>
-        {!vaultKey && undefinedEnvironmentVariableList.some(variableName => variableName.startsWith(`${vaultEnvironmentRuntimePath}.`)) &&
-          <div className='mt-4'>
-            <p>These are secret environment variables. However, the required vault key has not been provided yet.</p>
-            <Button
-              className="py-1 aria-pressed:bg-[--hl-sm] underline text-[--color-info] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] cursor-"
-              onPress={() => {
-                setShowInputVaultKeyModal(true);
-                setShowEnvVariableMissingModal(false);
-              }}
-            >
-              Click to input vault key
-            </Button>
-            <div className='flex gap-2 flex-wrap max-h-80 overflow-y-auto'>
-              {undefinedEnvironmentVariableList?.filter(variableName => variableName.startsWith(`${vaultEnvironmentRuntimePath}.`)).map(item => {
-                return <div key={item} className="bg-[--color-surprise] text-[--color-font-surprise] mt-3 px-3 py-1 mr-3 rounded-sm">{item}</div>;
+        <VariableMissingErrorModal
+          isOpen={showEnvVariableMissingModal}
+          title={
+            undefinedEnvironmentVariableList?.length === 1
+              ? '1 environment variable is missing'
+              : `${undefinedEnvironmentVariableList?.length} environment variables are missing`
+          }
+          okText="Execute anyways"
+          onOk={() => {
+            setShowEnvVariableMissingModal(false);
+            sendOrConnect(false, true);
+          }}
+          onCancel={() => setShowEnvVariableMissingModal(false)}
+        >
+          <div>
+            These environment variables have been defined, but have not been valued with in the currently active
+            environment:
+            <div className="flex max-h-80 flex-wrap gap-2 overflow-y-auto">
+              {undefinedEnvironmentVariableList?.map(item => {
+                return (
+                  <div
+                    key={item}
+                    className="mr-3 mt-3 rounded-sm bg-[--color-surprise] px-3 py-1 text-[--color-font-surprise]"
+                  >
+                    {item}
+                  </div>
+                );
               })}
             </div>
           </div>
-        }
-      </VariableMissingErrorModal>
-      {showInputVaultKeyModal &&
-        <InputVaultKeyModal onClose={() => setShowInputVaultKeyModal(false)} />
-      }
-    </div>
-  );
-});
+          {!vaultKey &&
+            undefinedEnvironmentVariableList.some(variableName =>
+              variableName.startsWith(`${vaultEnvironmentRuntimePath}.`),
+            ) && (
+              <div className="mt-4">
+                <p>
+                  These are secret environment variables. However, the required vault key has not been provided yet.
+                </p>
+                <Button
+                  className="cursor- py-1 text-[--color-info] underline ring-1 ring-transparent focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                  onPress={() => {
+                    setShowInputVaultKeyModal(true);
+                    setShowEnvVariableMissingModal(false);
+                  }}
+                >
+                  Click to input vault key
+                </Button>
+                <div className="flex max-h-80 flex-wrap gap-2 overflow-y-auto">
+                  {undefinedEnvironmentVariableList
+                    ?.filter(variableName => variableName.startsWith(`${vaultEnvironmentRuntimePath}.`))
+                    .map(item => {
+                      return (
+                        <div
+                          key={item}
+                          className="mr-3 mt-3 rounded-sm bg-[--color-surprise] px-3 py-1 text-[--color-font-surprise]"
+                        >
+                          {item}
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+            )}
+        </VariableMissingErrorModal>
+        {showInputVaultKeyModal && <InputVaultKeyModal onClose={() => setShowInputVaultKeyModal(false)} />}
+      </div>
+    );
+  },
+);
 
 RequestUrlBar.displayName = 'RequestUrlBar';
diff --git a/packages/insomnia/src/ui/components/response-timer.tsx b/packages/insomnia/src/ui/components/response-timer.tsx
index 55d7eb97e0..6a6cee7ed2 100644
--- a/packages/insomnia/src/ui/components/response-timer.tsx
+++ b/packages/insomnia/src/ui/components/response-timer.tsx
@@ -24,44 +24,40 @@ const MillisecondTimer = ({ startedAt }: { startedAt: number }) => {
       }
     };
   }, [startedAt]);
-  const ms = (milliseconds / 1000);
+  const ms = milliseconds / 1000;
   return ms > 0 ? `${ms.toFixed(1)} s` : '0 s';
 };
 
 export const ResponseTimer: FunctionComponent<Props> = ({ handleCancel, activeRequestId, steps }) => {
   return (
-    <div className="flex overlay theme--transparent-overlay-darker w-full h-full">
+    <div className="overlay theme--transparent-overlay-darker flex h-full w-full">
       <div className="m-auto w-[60%] min-w-[400px]">
         <div className="timer-list mx-auto">
           {steps.map((record: TimingStep) => (
-            <div
-              key={`${activeRequestId}-${record.stepName}`}
-              className='flex w-full leading-8'
-            >
-              <div className='w-3/4 ml-1 text-left text-md content-center leading-8'>
-                <span className="leading-8 w-1/5">
-                  {
-                    record.duration !== undefined ?
-                      (<i className="fa fa-circle-check fa-1x mr-2 text-green-500" />) :
-                      (<i className="fa fa-spinner fa-spin fa-1x mr-2" />)
-                  }
-                </span>
-                <span className="inline-block align-top text-clip w-4/5">
-                  {record.stepName}
+            <div key={`${activeRequestId}-${record.stepName}`} className="flex w-full leading-8">
+              <div className="text-md ml-1 w-3/4 content-center text-left leading-8">
+                <span className="w-1/5 leading-8">
+                  {record.duration !== undefined ? (
+                    <i className="fa fa-circle-check fa-1x mr-2 text-green-500" />
+                  ) : (
+                    <i className="fa fa-spinner fa-spin fa-1x mr-2" />
+                  )}
                 </span>
+                <span className="inline-block w-4/5 text-clip align-top">{record.stepName}</span>
               </div>
-              <div className='w-1/4 mr-1 text-right leading-8'>
-                {record.duration !== undefined ? `${((record.duration) / 1000).toFixed(1)} s` : (<MillisecondTimer startedAt={record.startedAt} />)}
+              <div className="mr-1 w-1/4 text-right leading-8">
+                {record.duration !== undefined ? (
+                  `${(record.duration / 1000).toFixed(1)} s`
+                ) : (
+                  <MillisecondTimer startedAt={record.startedAt} />
+                )}
               </div>
             </div>
           ))}
         </div>
 
         <div className="pad text-center">
-          <button
-            className="btn btn--clicky"
-            onClick={handleCancel}
-          >
+          <button className="btn btn--clicky" onClick={handleCancel}>
             Cancel Request
           </button>
         </div>
diff --git a/packages/insomnia/src/ui/components/settings/ai.tsx b/packages/insomnia/src/ui/components/settings/ai.tsx
index 4036ec49ae..6153e00c9b 100644
--- a/packages/insomnia/src/ui/components/settings/ai.tsx
+++ b/packages/insomnia/src/ui/components/settings/ai.tsx
@@ -5,12 +5,8 @@ import { Link } from '../base/link';
 import { InsomniaAI } from '../insomnia-ai-icon';
 
 export const AI = () => {
-
   const {
-    access: {
-      enabled,
-      loading,
-    },
+    access: { enabled, loading },
   } = useAIContext();
 
   if (loading) {
@@ -18,56 +14,63 @@ export const AI = () => {
   }
 
   if (enabled) {
-    return <Fragment>
-      <div
-        className="notice pad success"
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <h1
-          className="no-margin-top"
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 'var(--padding-xs)',
-          }}
-        >Insomnia AI is enabled
-          <InsomniaAI /> </h1>
-        <p
-          style={{
-            textAlign: 'center',
-            width: '100%',
-            maxWidth: '66ch',
-          }}
-        >
-          The Insomnia AI add-on is currently available on your account. The pay as-you-go consumption of this capability will be automatically added to your account and invoiced accordingly.
-        </p>
-        <br />
+    return (
+      <Fragment>
         <div
-          className="pad"
+          className="notice pad success"
           style={{
             display: 'flex',
+            flexDirection: 'column',
             alignItems: 'center',
-            gap: 'var(--padding-xs)',
           }}
         >
-          <i className='fa fa-info-circle' /> Beware that too many requests of Insomnia AI could generate an unpredictable spend.
+          <h1
+            className="no-margin-top"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--padding-xs)',
+            }}
+          >
+            Insomnia AI is enabled
+            <InsomniaAI />{' '}
+          </h1>
+          <p
+            style={{
+              textAlign: 'center',
+              width: '100%',
+              maxWidth: '66ch',
+            }}
+          >
+            The Insomnia AI add-on is currently available on your account. The pay as-you-go consumption of this
+            capability will be automatically added to your account and invoiced accordingly.
+          </p>
+          <br />
+          <div
+            className="pad"
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 'var(--padding-xs)',
+            }}
+          >
+            <i className="fa fa-info-circle" /> Beware that too many requests of Insomnia AI could generate an
+            unpredictable spend.
+          </div>
         </div>
-      </div>
-    </Fragment >;
+      </Fragment>
+    );
   }
 
   return (
     <Fragment>
-      <div
-        className="notice pad surprise flex flex-col items-center gap-2"
-      >
-        <h1 className="mt-0 flex items-center gap-2 text-xl">Try Insomnia AI <InsomniaAI /></h1>
+      <div className="notice pad surprise flex flex-col items-center gap-2">
+        <h1 className="mt-0 flex items-center gap-2 text-xl">
+          Try Insomnia AI <InsomniaAI />
+        </h1>
         <p>
-          Improve your productivity with Insomnia AI and perform complex operations in 1-click, like auto-generating API tests for your documents and collections.
+          Improve your productivity with Insomnia AI and perform complex operations in 1-click, like auto-generating API
+          tests for your documents and collections.
           <br />
           <br />
           This capability is an add-on to Enterprise customers only.
@@ -79,6 +82,6 @@ export const AI = () => {
           </Link>
         </div>
       </div>
-    </Fragment >
+    </Fragment>
   );
 };
diff --git a/packages/insomnia/src/ui/components/settings/boolean-setting.tsx b/packages/insomnia/src/ui/components/settings/boolean-setting.tsx
index b5bbaed838..4725c6dc3a 100644
--- a/packages/insomnia/src/ui/components/settings/boolean-setting.tsx
+++ b/packages/insomnia/src/ui/components/settings/boolean-setting.tsx
@@ -14,53 +14,45 @@ export const BooleanSetting: FC<{
   confirmBeforeToggle?: boolean;
   confirmMessage?: (isChecked: boolean) => string;
   disabled?: boolean;
-}> = ({
-  help,
-  label,
-  setting,
-  confirmBeforeToggle = false,
-  confirmMessage,
-  disabled = false,
-}) => {
-    const {
-      settings,
-    } = useRootLoaderData();
-    if (!(setting in settings)) {
-      throw new Error(`Invalid boolean setting name ${setting}`);
-    }
-    const patchSettings = useSettingsPatcher();
+}> = ({ help, label, setting, confirmBeforeToggle = false, confirmMessage, disabled = false }) => {
+  const { settings } = useRootLoaderData();
+  if (!(setting in settings)) {
+    throw new Error(`Invalid boolean setting name ${setting}`);
+  }
+  const patchSettings = useSettingsPatcher();
 
-    return (
-      <>
-        <div className="">
-          <label className="flex items-center gap-2">
-            <input
-              checked={Boolean(settings[setting])}
-              name={setting}
-              onChange={event => {
-                const isChecked = event.currentTarget.checked;
-                if (confirmBeforeToggle) {
-                  const confirmMsg = typeof confirmMessage === 'function' ? confirmMessage(isChecked) : null;
-                  showModal(AskModal, {
-                    title: `${isChecked ? 'Enable' : 'Disable'} Preference`,
-                    message: confirmMsg || `Are you sure to ${isChecked ? 'enable' : 'disable'} the preference: ${label}?`,
-                    onDone: async (isYes: boolean) => {
-                      if (isYes) {
-                        patchSettings({ [setting]: isChecked });
-                      }
-                    },
-                  });
-                } else {
-                  patchSettings({ [setting]: isChecked });
-                }
-              }}
-              type="checkbox"
-              disabled={disabled}
-            />
-            {label}
-            {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
-          </label>
-        </div>
-      </>
-    );
-  };
+  return (
+    <>
+      <div className="">
+        <label className="flex items-center gap-2">
+          <input
+            checked={Boolean(settings[setting])}
+            name={setting}
+            onChange={event => {
+              const isChecked = event.currentTarget.checked;
+              if (confirmBeforeToggle) {
+                const confirmMsg = typeof confirmMessage === 'function' ? confirmMessage(isChecked) : null;
+                showModal(AskModal, {
+                  title: `${isChecked ? 'Enable' : 'Disable'} Preference`,
+                  message:
+                    confirmMsg || `Are you sure to ${isChecked ? 'enable' : 'disable'} the preference: ${label}?`,
+                  onDone: async (isYes: boolean) => {
+                    if (isYes) {
+                      patchSettings({ [setting]: isChecked });
+                    }
+                  },
+                });
+              } else {
+                patchSettings({ [setting]: isChecked });
+              }
+            }}
+            type="checkbox"
+            disabled={disabled}
+          />
+          {label}
+          {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
+        </label>
+      </div>
+    </>
+  );
+};
diff --git a/packages/insomnia/src/ui/components/settings/enum-setting.tsx b/packages/insomnia/src/ui/components/settings/enum-setting.tsx
index be0d0464a4..29bbae98e3 100644
--- a/packages/insomnia/src/ui/components/settings/enum-setting.tsx
+++ b/packages/insomnia/src/ui/components/settings/enum-setting.tsx
@@ -20,9 +20,7 @@ export const EnumSetting = <T extends string | number>({
   setting,
   values,
 }: PropsWithChildren<Props<T>>) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
 
   const patchSettings = useSettingsPatcher();
 
@@ -35,7 +33,6 @@ export const EnumSetting = <T extends string | number>({
           value={String(settings[setting]) || '__NULL__'}
           name={setting}
           onChange={event => patchSettings({ [setting]: event.currentTarget.value })}
-
         >
           {values.map(({ name, value }) => (
             <option key={value} value={value}>
diff --git a/packages/insomnia/src/ui/components/settings/general.tsx b/packages/insomnia/src/ui/components/settings/general.tsx
index 261d0dfcc9..a0eb3435c9 100644
--- a/packages/insomnia/src/ui/components/settings/general.tsx
+++ b/packages/insomnia/src/ui/components/settings/general.tsx
@@ -23,22 +23,16 @@ import { TextSetting } from './text-setting';
 import { VaultKeyPanel } from './vault-key-panel';
 
 export const General: FC = () => {
-  const {
-    settings,
-    userSession,
-  } = useRootLoaderData();
+  const { settings, userSession } = useRootLoaderData();
   const isLoggedIn = Boolean(userSession.id);
 
   return (
     <div className="relative p-4">
-      <h2 className='font-bold pt-2 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Application</h2>
+      <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-2 text-lg font-bold">Application</h2>
 
       <div className="">
         <div>
-          <BooleanSetting
-            label="Use bulk header editor"
-            setting="useBulkHeaderEditor"
-          />
+          <BooleanSetting label="Use bulk header editor" setting="useBulkHeaderEditor" />
           <BooleanSetting
             label="Use vertical layout"
             setting="forceVerticalLayout"
@@ -51,20 +45,9 @@ export const General: FC = () => {
           />
         </div>
         <div>
-          <BooleanSetting
-            label="Reveal passwords"
-            setting="showPasswords"
-          />
-          {!isMac() && (
-            <BooleanSetting
-              label="Hide menu bar"
-              setting="autoHideMenuBar"
-            />
-          )}
-          <BooleanSetting
-            label="Raw template syntax"
-            setting="nunjucksPowerUserMode"
-          />
+          <BooleanSetting label="Reveal passwords" setting="showPasswords" />
+          {!isMac() && <BooleanSetting label="Hide menu bar" setting="autoHideMenuBar" />}
+          <BooleanSetting label="Raw template syntax" setting="nunjucksPowerUserMode" />
         </div>
       </div>
 
@@ -79,24 +62,15 @@ export const General: FC = () => {
         />
       </div>
 
-      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Font</h2>
+      <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-5 text-lg font-bold">Font</h2>
 
       <div className="row-fill row-fill--top">
         <div>
-          <BooleanSetting
-            label="Indent with tabs"
-            setting="editorIndentWithTabs"
-          />
-          <BooleanSetting
-            label="Wrap text editor lines"
-            setting="editorLineWrapping"
-          />
+          <BooleanSetting label="Indent with tabs" setting="editorIndentWithTabs" />
+          <BooleanSetting label="Wrap text editor lines" setting="editorLineWrapping" />
         </div>
         <div>
-          <BooleanSetting
-            label="Font ligatures"
-            setting="fontVariantLigatures"
-          />
+          <BooleanSetting label="Font ligatures" setting="fontVariantLigatures" />
         </div>
       </div>
 
@@ -133,23 +107,22 @@ export const General: FC = () => {
       </div>
 
       <div className="form-row">
-        <NumberSetting
-          label="Editor Indent Size"
-          setting="editorIndentSize"
-          help=""
-          min={1}
-          max={16}
-        />
+        <NumberSetting label="Editor Indent Size" setting="editorIndentSize" help="" min={1} max={16} />
 
         <EnumSetting<EditorKeyMap>
           label="Text Editor Key Map"
           setting="editorKeyMap"
-          help={isMac() && settings.editorKeyMap === EditorKeyMap.vim && (
-            <Fragment>
-              To enable key-repeating with Vim on macOS, see <Link href={docsKeyMaps}>
-                documentation <i className="fa fa-external-link-square" /></Link>
-            </Fragment>
-          )}
+          help={
+            isMac() &&
+            settings.editorKeyMap === EditorKeyMap.vim && (
+              <Fragment>
+                To enable key-repeating with Vim on macOS, see{' '}
+                <Link href={docsKeyMaps}>
+                  documentation <i className="fa fa-external-link-square" />
+                </Link>
+              </Fragment>
+            )
+          }
           values={[
             { value: EditorKeyMap.default, name: 'Default' },
             { value: EditorKeyMap.vim, name: 'Vim' },
@@ -165,7 +138,7 @@ export const General: FC = () => {
         />
       </div>
 
-      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Request / Response</h2>
+      <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-5 text-lg font-bold">Request / Response</h2>
 
       <div className="row-fill row-fill--top">
         <div>
@@ -174,10 +147,7 @@ export const General: FC = () => {
             setting="validateSSL"
             help="If checked, validate SSL certificates for API requests. This does not affect SSL certificate validation during authentication."
           />
-          <BooleanSetting
-            label="Follow redirects"
-            setting="followRedirects"
-          />
+          <BooleanSetting label="Follow redirects" setting="followRedirects" />
           <BooleanSetting
             label="Filter responses by environment"
             setting="filterResponsesByEnv"
@@ -185,14 +155,8 @@ export const General: FC = () => {
           />
         </div>
         <div>
-          <BooleanSetting
-            label="Disable JS in HTML preview"
-            setting="disableHtmlPreviewJs"
-          />
-          <BooleanSetting
-            label="Disable links in response viewer"
-            setting="disableResponsePreviewLinks"
-          />
+          <BooleanSetting label="Disable JS in HTML preview" setting="disableHtmlPreviewJs" />
+          <BooleanSetting label="Disable links in response viewer" setting="disableResponsePreviewLinks" />
 
           <BooleanSetting
             label="Disable default User-Agent on new requests"
@@ -251,7 +215,7 @@ export const General: FC = () => {
         />
       </div>
 
-      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Security</h2>
+      <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-5 text-lg font-bold">Security</h2>
       <div className="form-row pad-top-sm">
         <BooleanSetting
           label="Clear OAuth 2 session on start"
@@ -259,7 +223,7 @@ export const General: FC = () => {
           help="If checked, clears the OAuth session every time Insomnia is relaunched."
         />
         <button
-          className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs] pointer"
+          className="pointer h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]"
           style={{
             padding: 0,
           }}
@@ -279,8 +243,8 @@ export const General: FC = () => {
 
       {updatesSupported() && (
         <Fragment>
-          <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Software Updates</h2>
-          <div className="w-full flex gap-2 justify-between">
+          <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-5 text-lg font-bold">Software Updates</h2>
+          <div className="flex w-full justify-between gap-2">
             <BooleanSetting
               label="Automatically download and install updates"
               setting="updateAutomatically"
@@ -303,15 +267,14 @@ export const General: FC = () => {
       )}
 
       {!updatesSupported() && (
-        <><hr className="pad-top" />
+        <>
+          <hr className="pad-top" />
           <h2>Notifications</h2>
-          <BooleanSetting
-            label="Do not notify of new releases"
-            setting="disableUpdateNotification"
-          /></>
+          <BooleanSetting label="Do not notify of new releases" setting="disableUpdateNotification" />
+        </>
       )}
 
-      <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Plugins</h2>
+      <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-5 text-lg font-bold">Plugins</h2>
       <TextSetting
         label="Additional Plugin Path"
         setting="pluginPath"
@@ -321,21 +284,19 @@ export const General: FC = () => {
 
       {!isLoggedIn && (
         <>
-          <h2 className='font-bold pt-5 pb-2 text-lg sticky top-0 left-0 bg-[--color-bg] z-10'>Network Activity</h2>
-          <BooleanSetting
-            label="Send Anonymous Usage Statistics"
-            setting="enableAnalytics"
-            disabled={isLoggedIn}
-          />
-          <div className="text-sm opacity-50 pl-5 py-2">
-            Help Kong improve its products by sending anonymous data about features and plugins used, hardware and software configuration, statistics on number of requests, {strings.collection.plural.toLowerCase()}, {strings.document.plural.toLowerCase()}, etc.
+          <h2 className="sticky left-0 top-0 z-10 bg-[--color-bg] pb-2 pt-5 text-lg font-bold">Network Activity</h2>
+          <BooleanSetting label="Send Anonymous Usage Statistics" setting="enableAnalytics" disabled={isLoggedIn} />
+          <div className="py-2 pl-5 text-sm opacity-50">
+            Help Kong improve its products by sending anonymous data about features and plugins used, hardware and
+            software configuration, statistics on number of requests, {strings.collection.plural.toLowerCase()},{' '}
+            {strings.document.plural.toLowerCase()}, etc.
           </div>
-          <div className="text-sm opacity-50 pl-5 py-2">
-            Please note that this will not include personal data or any sensitive information, such as request data, names, etc.
+          <div className="py-2 pl-5 text-sm opacity-50">
+            Please note that this will not include personal data or any sensitive information, such as request data,
+            names, etc.
           </div>
         </>
-      )
-      }
+      )}
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/settings/import-export.tsx b/packages/insomnia/src/ui/components/settings/import-export.tsx
index e11e64f7b6..498174af61 100644
--- a/packages/insomnia/src/ui/components/settings/import-export.tsx
+++ b/packages/insomnia/src/ui/components/settings/import-export.tsx
@@ -35,22 +35,20 @@ const UntrackedProject = ({
   const [selectedOrganizationId, setSelectedOrganizationId] = useState<string | null>(null);
 
   return (
-    <div key={project._id} className="flex items-center gap-2 justify-between py-2">
-      <div className='flex flex-col gap-1'>
-        <Heading className='text-base font-semibold flex items-center gap-2'>
+    <div key={project._id} className="flex items-center justify-between gap-2 py-2">
+      <div className="flex flex-col gap-1">
+        <Heading className="flex items-center gap-2 text-base font-semibold">
           {project.name}
-          <span className='text-xs text-[--hl]'>
-            Id: {project._id}
-          </span>
+          <span className="text-xs text-[--hl]">Id: {project._id}</span>
         </Heading>
-        <p className='text-sm'>
+        <p className="text-sm">
           This project contains {project.workspacesCount} {project.workspacesCount === 1 ? 'file' : 'files'}.
         </p>
       </div>
       <moveProjectFetcher.Form
         action={`/organization/${organizationId}/project/${project._id}/move`}
-        method='POST'
-        className='group flex items-center gap-2'
+        method="POST"
+        className="group flex items-center gap-2"
       >
         <Select
           aria-label="Select an organization"
@@ -61,38 +59,32 @@ const UntrackedProject = ({
           selectedKey={selectedOrganizationId}
           isDisabled={organizations.length === 0}
         >
-          <Button className="px-4 py-1 disabled:bg-[--hl-xs] disabled:cursor-not-allowed font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-            <SelectValue<Organization> className="flex truncate items-center justify-center gap-2">
+          <Button className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:cursor-not-allowed disabled:bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-xs]">
+            <SelectValue<Organization> className="flex items-center justify-center gap-2 truncate">
               {({ selectedItem }) => {
                 if (!selectedItem) {
                   return (
                     <Fragment>
-                      <span>
-                        Select an organization
-                      </span>
+                      <span>Select an organization</span>
                     </Fragment>
                   );
                 }
 
-                return (
-                  <Fragment>
-                    {selectedItem.display_name}
-                  </Fragment>
-                );
+                return <Fragment>{selectedItem.display_name}</Fragment>;
               }}
             </SelectValue>
             <Icon icon="caret-down" />
           </Button>
-          <Popover className="min-w-max overflow-y-hidden flex flex-col">
+          <Popover className="flex min-w-max flex-col overflow-y-hidden">
             <ListBox
               items={organizations}
-              className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+              className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
             >
               {item => (
                 <ListBoxItem
                   id={item.id}
                   key={item.id}
-                  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                  className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                   aria-label={item.name}
                   textValue={item.name}
                   value={item}
@@ -100,12 +92,7 @@ const UntrackedProject = ({
                   {({ isSelected }) => (
                     <Fragment>
                       {item.display_name}
-                      {isSelected && (
-                        <Icon
-                          icon="check"
-                          className="text-[--color-success] justify-self-end"
-                        />
-                      )}
+                      {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                     </Fragment>
                   )}
                 </ListBoxItem>
@@ -113,7 +100,11 @@ const UntrackedProject = ({
             </ListBox>
           </Popover>
         </Select>
-        <Button isDisabled={organizations.length === 0 || !selectedOrganizationId || moveProjectFetcher.state !== 'idle'} type="submit" className="px-4 py-1 group-invalid:opacity-30 disabled:bg-[--hl-xs] disabled:cursor-not-allowed font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+        <Button
+          isDisabled={organizations.length === 0 || !selectedOrganizationId || moveProjectFetcher.state !== 'idle'}
+          type="submit"
+          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:cursor-not-allowed disabled:bg-[--hl-xs] group-invalid:opacity-30 aria-pressed:bg-[--hl-sm]"
+        >
           Move
         </Button>
       </moveProjectFetcher.Form>
@@ -134,19 +125,17 @@ const UntrackedWorkspace = ({
   const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
 
   return (
-    <div key={workspace._id} className="flex items-center gap-2 justify-between py-2">
-      <div className='flex flex-col gap-1'>
-        <Heading className='text-base font-semibold flex items-center gap-2'>
+    <div key={workspace._id} className="flex items-center justify-between gap-2 py-2">
+      <div className="flex flex-col gap-1">
+        <Heading className="flex items-center gap-2 text-base font-semibold">
           {workspace.name}
-          <span className='text-xs text-[--hl]'>
-            Id: {workspace._id}
-          </span>
+          <span className="text-xs text-[--hl]">Id: {workspace._id}</span>
         </Heading>
       </div>
       <moveWorkspaceFetcher.Form
         action={`/organization/${organizationId}/project/${selectedProjectId}/move-workspace`}
-        method='POST'
-        className='group flex items-center gap-2'
+        method="POST"
+        className="group flex items-center gap-2"
       >
         <input type="hidden" name="workspaceId" value={workspace._id} />
         <Select
@@ -158,31 +147,25 @@ const UntrackedWorkspace = ({
           selectedKey={selectedProjectId}
           isDisabled={projects.length === 0}
         >
-          <Button className="px-4 py-1 disabled:bg-[--hl-xs] disabled:cursor-not-allowed font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] data-[pressed]:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-            <SelectValue<Project> className="flex truncate items-center justify-center gap-2">
+          <Button className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:cursor-not-allowed disabled:bg-[--hl-xs] aria-pressed:bg-[--hl-sm] data-[pressed]:bg-[--hl-xs]">
+            <SelectValue<Project> className="flex items-center justify-center gap-2 truncate">
               {({ selectedItem }) => {
                 if (!selectedItem) {
                   return (
                     <Fragment>
-                      <span>
-                        Select a project
-                      </span>
+                      <span>Select a project</span>
                     </Fragment>
                   );
                 }
 
-                return (
-                  <Fragment>
-                    {selectedItem.name}
-                  </Fragment>
-                );
+                return <Fragment>{selectedItem.name}</Fragment>;
               }}
             </SelectValue>
             <Icon icon="caret-down" />
           </Button>
-          <Popover className="min-w-max overflow-y-hidden flex flex-col">
+          <Popover className="flex min-w-max flex-col overflow-y-hidden">
             <ListBox
-              className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+              className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
               items={projects.map(project => ({
                 ...project,
                 id: project._id,
@@ -192,7 +175,7 @@ const UntrackedWorkspace = ({
                 <ListBoxItem
                   id={item.id}
                   key={item.id}
-                  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                  className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                   aria-label={item.name}
                   textValue={item.name}
                   value={item}
@@ -200,12 +183,7 @@ const UntrackedWorkspace = ({
                   {({ isSelected }) => (
                     <Fragment>
                       {item.name}
-                      {isSelected && (
-                        <Icon
-                          icon="check"
-                          className="text-[--color-success] justify-self-end"
-                        />
-                      )}
+                      {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                     </Fragment>
                   )}
                 </ListBoxItem>
@@ -213,7 +191,11 @@ const UntrackedWorkspace = ({
             </ListBox>
           </Popover>
         </Select>
-        <Button isDisabled={projects.length === 0 || !selectedProjectId || moveWorkspaceFetcher.state !== 'idle'} type="submit" className="px-4 py-1 group-invalid:opacity-30 disabled:bg-[--hl-xs] disabled:cursor-not-allowed font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+        <Button
+          isDisabled={projects.length === 0 || !selectedProjectId || moveWorkspaceFetcher.state !== 'idle'}
+          type="submit"
+          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] disabled:cursor-not-allowed disabled:bg-[--hl-xs] group-invalid:opacity-30 aria-pressed:bg-[--hl-sm]"
+        >
           Move
         </Button>
       </moveWorkspaceFetcher.Form>
@@ -226,11 +208,11 @@ interface Props {
 }
 
 export const ImportExport: FC<Props> = ({ hideSettingsModal }) => {
-  const {
-    organizationId,
-    projectId,
-    workspaceId,
-  } = useParams() as { organizationId: string; projectId: string; workspaceId?: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId?: string;
+  };
   const organizationData = useOrganizationLoaderData();
   const organizations = organizationData?.organizations || [];
 
@@ -274,69 +256,76 @@ export const ImportExport: FC<Props> = ({ hideSettingsModal }) => {
   const hasUntrackedProjects = untrackedProjects.length > 0;
   const showImportToProject = !isScratchPadWorkspace;
   if (!isScratchPadWorkspace && !isLoggedIn) {
-    return <Button
-      className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-      onPress={async () => {
-        const { filePaths, canceled } = await window.dialog.showOpenDialog({
-          properties: ['openDirectory', 'createDirectory', 'promptToCreate'],
-          buttonLabel: 'Select',
-          title: 'Export All Insomnia Data',
-        });
-
-        if (canceled) {
-          return;
-        }
-
-        const [dirPath] = filePaths;
-
-        try {
-          dirPath && await exportAllData({
-            dirPath,
+    return (
+      <Button
+        className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+        onPress={async () => {
+          const { filePaths, canceled } = await window.dialog.showOpenDialog({
+            properties: ['openDirectory', 'createDirectory', 'promptToCreate'],
+            buttonLabel: 'Select',
+            title: 'Export All Insomnia Data',
           });
-        } catch (e) {
+
+          if (canceled) {
+            return;
+          }
+
+          const [dirPath] = filePaths;
+
+          try {
+            dirPath &&
+              (await exportAllData({
+                dirPath,
+              }));
+          } catch (e) {
+            showAlert({
+              title: 'Export Failed',
+              message: 'An error occurred while exporting data. Please try again.',
+            });
+            console.error(e);
+          }
+
           showAlert({
-            title: 'Export Failed',
-            message: 'An error occurred while exporting data. Please try again.',
+            title: 'Export Complete',
+            message: 'All your data have been successfully exported',
           });
-          console.error(e);
-        }
-
-        showAlert({
-          title: 'Export Complete',
-          message: 'All your data have been successfully exported',
-        });
-        window.main.trackSegmentEvent({
-          event: SegmentEvent.exportAllCollections,
-        });
-      }}
-      aria-label='Export all data'
-    >
-      <Icon icon="file-export" />
-      <span>Export all data {`(${workspaceCount} files)`}</span>
-    </Button>;
+          window.main.trackSegmentEvent({
+            event: SegmentEvent.exportAllCollections,
+          });
+        }}
+        aria-label="Export all data"
+      >
+        <Icon icon="file-export" />
+        <span>Export all data {`(${workspaceCount} files)`}</span>
+      </Button>
+    );
   }
 
   return (
     <Fragment>
-      <div data-testid="import-export-tab" className='flex flex-col gap-4'>
-        <div className='rounded-md border border-solid border-[--hl-md] p-4 flex flex-col gap-2'>
-          <Heading className='text-lg font-bold flex items-center gap-2'><Icon icon="file-export" /> Export</Heading>
-          <div className="flex gap-2 flex-wrap">
+      <div data-testid="import-export-tab" className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2 rounded-md border border-solid border-[--hl-md] p-4">
+          <Heading className="flex items-center gap-2 text-lg font-bold">
+            <Icon icon="file-export" /> Export
+          </Heading>
+          <div className="flex flex-wrap gap-2">
             {workspaceData?.activeWorkspace ? (
               <ExportSection
                 workspace={workspaceData.activeWorkspace}
                 projectName={projectName}
                 setIsExportModalOpen={setIsExportModalOpen}
                 handleExportProjectToFile={handleExportProjectToFile}
-              />) : (
+              />
+            ) : (
               <Button
-                className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 onPress={handleExportProjectToFile}
               >
                 {`Export files from the "${projectName}" ${strings.project.singular}`}
-              </Button>)}
+              </Button>
+            )}
             <Button
-              className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               onPress={async () => {
                 const { filePaths, canceled } = await window.dialog.showOpenDialog({
                   properties: ['openDirectory', 'createDirectory', 'promptToCreate'],
@@ -351,9 +340,10 @@ export const ImportExport: FC<Props> = ({ hideSettingsModal }) => {
                 const [dirPath] = filePaths;
 
                 try {
-                  dirPath && await exportAllData({
-                    dirPath,
-                  });
+                  dirPath &&
+                    (await exportAllData({
+                      dirPath,
+                    }));
                 } catch (e) {
                   showAlert({
                     title: 'Export Failed',
@@ -370,14 +360,14 @@ export const ImportExport: FC<Props> = ({ hideSettingsModal }) => {
                   event: SegmentEvent.exportAllCollections,
                 });
               }}
-              aria-label='Export all data'
+              aria-label="Export all data"
             >
               <Icon icon="file-export" />
               <span>Export all data {`(${workspaceCount} files)`}</span>
             </Button>
 
             <Button
-              className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               isDisabled={!userSession.id}
               onPress={() => window.main.openInBrowser('https://insomnia.rest/create-run-button')}
             >
@@ -386,55 +376,69 @@ export const ImportExport: FC<Props> = ({ hideSettingsModal }) => {
             </Button>
           </div>
         </div>
-        {showImportToProject && <div className='rounded-md border border-solid border-[--hl-md] p-4 flex flex-col gap-2'>
-          <Heading className='text-lg font-bold flex items-center gap-2'><Icon icon="file-import" /> Import</Heading>
-          <div className="flex gap-2 flex-wrap">
-            <Button
-              className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-              isDisabled={workspaceData?.activeWorkspace && isScratchpad(workspaceData?.activeWorkspace)}
-              onPress={() => setIsImportModalOpen(true)}
-            >
-              <Icon icon="file-import" />
-              {`Import to the "${projectName}" ${strings.project.singular}`}
-            </Button>
+        {showImportToProject && (
+          <div className="flex flex-col gap-2 rounded-md border border-solid border-[--hl-md] p-4">
+            <Heading className="flex items-center gap-2 text-lg font-bold">
+              <Icon icon="file-import" /> Import
+            </Heading>
+            <div className="flex flex-wrap gap-2">
+              <Button
+                className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                isDisabled={workspaceData?.activeWorkspace && isScratchpad(workspaceData?.activeWorkspace)}
+                onPress={() => setIsImportModalOpen(true)}
+              >
+                <Icon icon="file-import" />
+                {`Import to the "${projectName}" ${strings.project.singular}`}
+              </Button>
+            </div>
           </div>
-        </div>}
-        {hasUntrackedProjects && <div className='rounded-md border border-solid border-[--hl-md] p-4 flex flex-col gap-2'>
-          <div className='flex flex-col gap-1'>
-            <Heading className='text-lg font-bold flex items-center gap-2'><Icon icon="cancel" /> Orphaned projects ({untrackedProjects.length})</Heading>
-            <p className='text-[--hl] text-sm'>
-              <Icon icon="info-circle" /> These projects are not associated to your current logged-in account. You can move them to an organization below.
-            </p>
+        )}
+        {hasUntrackedProjects && (
+          <div className="flex flex-col gap-2 rounded-md border border-solid border-[--hl-md] p-4">
+            <div className="flex flex-col gap-1">
+              <Heading className="flex items-center gap-2 text-lg font-bold">
+                <Icon icon="cancel" /> Orphaned projects ({untrackedProjects.length})
+              </Heading>
+              <p className="text-sm text-[--hl]">
+                <Icon icon="info-circle" /> These projects are not associated to your current logged-in account. You can
+                move them to an organization below.
+              </p>
+            </div>
+            <div className="flex flex-col gap-1 divide-y divide-solid divide-[--hl-md] overflow-y-auto">
+              {untrackedProjects.map(project => (
+                <UntrackedProject
+                  key={project._id}
+                  project={project}
+                  organizationId={organizationId}
+                  organizations={organizations}
+                />
+              ))}
+            </div>
           </div>
-          <div className='flex flex-col gap-1 overflow-y-auto divide-y divide-solid divide-[--hl-md]'>
-            {untrackedProjects.map(project => (
-              <UntrackedProject
-                key={project._id}
-                project={project}
-                organizationId={organizationId}
-                organizations={organizations}
-              />
-            ))}
+        )}
+        {hasUntrackedWorkspaces && projects.length > 0 && (
+          <div className="flex flex-col gap-2 rounded-md border border-solid border-[--hl-md] p-4">
+            <div className="flex flex-col gap-1">
+              <Heading className="flex items-center gap-2 text-lg font-bold">
+                <Icon icon="cancel" /> Untracked files ({untrackedWorkspaces.length})
+              </Heading>
+              <p className="text-sm text-[--hl]">
+                <Icon icon="info-circle" /> These files are not associated with any project in your account. You can
+                move them to a project in your current organization bellow.
+              </p>
+            </div>
+            <div className="flex flex-col gap-1 divide-y divide-solid divide-[--hl-md] overflow-y-auto">
+              {untrackedWorkspaces.map(workspace => (
+                <UntrackedWorkspace
+                  key={workspace._id}
+                  workspace={workspace}
+                  organizationId={organizationId}
+                  projects={projects}
+                />
+              ))}
+            </div>
           </div>
-        </div>}
-        {hasUntrackedWorkspaces && projects.length > 0 && <div className='rounded-md border border-solid border-[--hl-md] p-4 flex flex-col gap-2'>
-          <div className='flex flex-col gap-1'>
-            <Heading className='text-lg font-bold flex items-center gap-2'><Icon icon="cancel" /> Untracked files ({untrackedWorkspaces.length})</Heading>
-            <p className='text-[--hl] text-sm'>
-              <Icon icon="info-circle" /> These files are not associated with any project in your account. You can move them to a project in your current organization bellow.
-            </p>
-          </div>
-          <div className='flex flex-col gap-1 overflow-y-auto divide-y divide-solid divide-[--hl-md]'>
-            {untrackedWorkspaces.map(workspace => (
-              <UntrackedWorkspace
-                key={workspace._id}
-                workspace={workspace}
-                organizationId={organizationId}
-                projects={projects}
-              />
-            ))}
-          </div>
-        </div>}
+        )}
       </div>
       {isImportModalOpen && (
         <ImportModal
@@ -468,11 +472,10 @@ const ExportSection = ({
   setIsExportModalOpen: (value: boolean) => void;
   handleExportProjectToFile: () => void;
 }) => {
-
   if (isScratchpad(workspace)) {
     return (
       <Button
-        className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+        className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         onPress={() => setIsExportModalOpen(true)}
       >
         Export the "{workspace.name}" {getWorkspaceLabel(workspace).singular}
@@ -483,18 +486,17 @@ const ExportSection = ({
   return (
     <>
       <Button
-        className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+        className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         onPress={() => setIsExportModalOpen(true)}
       >
         Export the "{workspace.name}" {getWorkspaceLabel(workspace).singular}
       </Button>
       <Button
-        className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+        className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         onPress={handleExportProjectToFile}
       >
         Export the "{projectName}" ${strings.project.singular}
       </Button>
     </>
   );
-
 };
diff --git a/packages/insomnia/src/ui/components/settings/masked-setting.tsx b/packages/insomnia/src/ui/components/settings/masked-setting.tsx
index cf26b5d07e..edecc337c7 100644
--- a/packages/insomnia/src/ui/components/settings/masked-setting.tsx
+++ b/packages/insomnia/src/ui/components/settings/masked-setting.tsx
@@ -12,45 +12,37 @@ export const MaskedSetting: FC<{
   label: string;
   placeholder?: React.HTMLProps<HTMLInputElement>['placeholder'];
   setting: SettingsOfType<string>;
-}> = ({
-  disabled,
-  help,
-  label,
-  placeholder,
-  setting,
-}) => {
-    const [isHidden, setHidden] = useToggle(true);
+}> = ({ disabled, help, label, placeholder, setting }) => {
+  const [isHidden, setHidden] = useToggle(true);
 
-    const {
-      settings,
-    } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
 
-    if (!(setting in settings)) {
-      throw new Error(`Invalid setting name ${setting}`);
-    }
-    const patchSettings = useSettingsPatcher();
+  if (!(setting in settings)) {
+    throw new Error(`Invalid setting name ${setting}`);
+  }
+  const patchSettings = useSettingsPatcher();
 
-    return (
-      <div>
-        <label>
-          {label}
-          {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
-        </label>
-        <div className="form-control form-control--outlined form-control--btn-right">
-          <input
-            defaultValue={String(settings[setting])}
-            disabled={disabled}
-            name={setting}
-            onChange={event => patchSettings({ [setting]: event.currentTarget.value })}
-            placeholder={placeholder}
-            type={!settings.showPasswords && isHidden ? 'password' : 'text'}
-          />
-          {!settings.showPasswords && (
-            <button className={'form-control__right'} onClick={setHidden}>
-              {isHidden ? <i className="fa fa-eye-slash" /> : <i className="fa fa-eye" />}
-            </button>
-          )}
-        </div>
+  return (
+    <div>
+      <label>
+        {label}
+        {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
+      </label>
+      <div className="form-control form-control--outlined form-control--btn-right">
+        <input
+          defaultValue={String(settings[setting])}
+          disabled={disabled}
+          name={setting}
+          onChange={event => patchSettings({ [setting]: event.currentTarget.value })}
+          placeholder={placeholder}
+          type={!settings.showPasswords && isHidden ? 'password' : 'text'}
+        />
+        {!settings.showPasswords && (
+          <button className={'form-control__right'} onClick={setHidden}>
+            {isHidden ? <i className="fa fa-eye-slash" /> : <i className="fa fa-eye" />}
+          </button>
+        )}
       </div>
-    );
-  };
+    </div>
+  );
+};
diff --git a/packages/insomnia/src/ui/components/settings/number-setting.tsx b/packages/insomnia/src/ui/components/settings/number-setting.tsx
index f5a24583b2..ef2a4a5651 100644
--- a/packages/insomnia/src/ui/components/settings/number-setting.tsx
+++ b/packages/insomnia/src/ui/components/settings/number-setting.tsx
@@ -24,31 +24,21 @@ export function snapNumberToLimits(value: number, min?: number, max?: number) {
   }
   return value;
 }
-export const NumberSetting: FC<Props> = ({
-  help,
-  label,
-  max,
-  min,
-  setting,
-  step = 1,
-}) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+export const NumberSetting: FC<Props> = ({ help, label, max, min, setting, step = 1 }) => {
+  const { settings } = useRootLoaderData();
 
   if (!Object.prototype.hasOwnProperty.call(settings, setting)) {
     throw new Error(`Invalid setting name ${setting}`);
   }
   const patchSettings = useSettingsPatcher();
 
-  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(async ({ currentTarget: { value, min, max } }) => {
-    const updatedValue = snapNumberToLimits(
-      parseInt(value, 10) || 0,
-      parseInt(min, 10),
-      parseInt(max, 10),
-    );
-    patchSettings({ [setting]: updatedValue });
-  }, [patchSettings, setting]);
+  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    async ({ currentTarget: { value, min, max } }) => {
+      const updatedValue = snapNumberToLimits(parseInt(value, 10) || 0, parseInt(min, 10), parseInt(max, 10));
+      patchSettings({ [setting]: updatedValue });
+    },
+    [patchSettings, setting],
+  );
 
   let defaultValue: string | number = settings[setting];
   if (typeof defaultValue !== 'number') {
diff --git a/packages/insomnia/src/ui/components/settings/plugins.tsx b/packages/insomnia/src/ui/components/settings/plugins.tsx
index 0635c44346..3fdf72c78f 100644
--- a/packages/insomnia/src/ui/components/settings/plugins.tsx
+++ b/packages/insomnia/src/ui/components/settings/plugins.tsx
@@ -2,11 +2,7 @@ import * as path from 'path';
 import React, { type FC, useEffect, useState } from 'react';
 import { Button, FileTrigger } from 'react-aria-components';
 
-import {
-  ACCEPTED_NODE_CA_FILE_EXTS,
-  NPM_PACKAGE_BASE,
-  PLUGIN_HUB_BASE,
-} from '../../../common/constants';
+import { ACCEPTED_NODE_CA_FILE_EXTS, NPM_PACKAGE_BASE, PLUGIN_HUB_BASE } from '../../../common/constants';
 import { docsPlugins } from '../../../common/documentation';
 import { createPlugin } from '../../../plugins/create';
 import type { Plugin } from '../../../plugins/index';
@@ -33,9 +29,7 @@ interface State {
 }
 
 export const Plugins: FC = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const [state, setState] = useState<State>({
     plugins: [],
     npmPluginValue: '',
@@ -45,14 +39,7 @@ export const Plugins: FC = () => {
     isRefreshingPlugins: false,
     pluginNodeExtraCerts: settings.pluginNodeExtraCerts,
   });
-  const {
-    plugins,
-    error,
-    installPluginErrMsg,
-    isInstallingFromNpm,
-    isRefreshingPlugins,
-    npmPluginValue,
-  } = state;
+  const { plugins, error, installPluginErrMsg, isInstallingFromNpm, isRefreshingPlugins, npmPluginValue } = state;
 
   useEffect(() => {
     refreshPlugins();
@@ -75,24 +62,21 @@ export const Plugins: FC = () => {
   return (
     <div>
       <p className="notice info no-margin-top">
-        Plugins is still an experimental feature. See{' '}
-        <Link href={docsPlugins}>Documentation</Link> for more info.
+        Plugins is still an experimental feature. See <Link href={docsPlugins}>Documentation</Link> for more info.
       </p>
 
-      <div className="notice warning text-left margin-bottom">
+      <div className="notice warning margin-bottom text-left">
         <div className="selectable force-pre-wrap">
           <p>
-            Plugins with elevated access can access anything Insomnia can. It's recommended that elevated access remain disabled.
+            Plugins with elevated access can access anything Insomnia can. It's recommended that elevated access remain
+            disabled.
           </p>
-          <BooleanSetting
-            label="Allow elevated access for plugins"
-            setting="pluginsAllowElevatedAccess"
-          />
+          <BooleanSetting label="Allow elevated access for plugins" setting="pluginsAllowElevatedAccess" />
         </div>
       </div>
 
       {plugins.length === 0 ? (
-        <div className="text-center faint italic pad">No Plugins Added</div>
+        <div className="faint pad text-center italic">No Plugins Added</div>
       ) : (
         <table className="table--fancy table--striped table--valign-middle margin-top margin-bottom">
           <thead>
@@ -105,7 +89,10 @@ export const Plugins: FC = () => {
           </thead>
           <tbody>
             {plugins.map(plugin => {
-              const link = path.join(/^insomnia-plugin-/.test(plugin.name) ? PLUGIN_HUB_BASE : NPM_PACKAGE_BASE, plugin.name);
+              const link = path.join(
+                /^insomnia-plugin-/.test(plugin.name) ? PLUGIN_HUB_BASE : NPM_PACKAGE_BASE,
+                plugin.name,
+              );
               return !plugin.directory ? null : (
                 <tr key={plugin.name}>
                   <td style={{ width: '4rem' }}>
@@ -141,30 +128,20 @@ export const Plugins: FC = () => {
                       width: '10rem',
                     }}
                   >
-                    <CopyButton
-                      size="small"
-                      variant="contained"
-                      title={plugin.directory}
-                      content={plugin.directory}
-                    >
+                    <CopyButton size="small" variant="contained" title={plugin.directory} content={plugin.directory}>
                       Copy Path
                     </CopyButton>{' '}
-                    <Button
-                      onPress={() => window.shell.showItemInFolder(plugin.directory)}
-                    >
-                      Reveal Folder
-                    </Button>
+                    <Button onPress={() => window.shell.showItemInFolder(plugin.directory)}>Reveal Folder</Button>
                   </td>
                 </tr>
               );
-            }
-            )}
+            })}
           </tbody>
         </table>
       )}
 
       {error && (
-        <div className="notice error text-left margin-bottom">
+        <div className="notice error margin-bottom text-left">
           <button className="pull-right icon" onClick={() => setState(state => ({ ...state, error: null }))}>
             <i className="fa fa-times" />
           </button>
@@ -210,7 +187,7 @@ export const Plugins: FC = () => {
       >
         <div className="form-row">
           <div className="form-control">
-            <Icon icon='info-circle' className='px-2' />
+            <Icon icon="info-circle" className="px-2" />
             <span>Enter the full name of an npm package beginning with insomnia-plugin-*</span>
           </div>
         </div>
@@ -230,7 +207,7 @@ export const Plugins: FC = () => {
           </div>
           <div className="form-control width-auto">
             <Button
-              className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
+              className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               isDisabled={isInstallingFromNpm}
               type="submit"
             >
@@ -239,59 +216,67 @@ export const Plugins: FC = () => {
             </Button>
           </div>
         </div>
-      </form >
-      <div className="w-full flex flex-row justify-center mt-2">
+      </form>
+      <div className="mt-2 flex w-full flex-row justify-center">
         <Button
-          className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
+          className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() => window.main.openInBrowser(PLUGIN_HUB_BASE)}
         >
           Browse Plugin Hub
         </Button>
         <Button
-          className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
-          onPress={() => showPrompt({
-            title: 'New Plugin',
-            defaultValue: 'demo-example',
-            placeholder: 'example-name',
-            submitName: 'Generate',
-            label: 'Plugin Name',
-            selectText: true,
-            validate: name =>
-              name.match(/^[a-z][a-z-]*[a-z]$/) ? '' : 'Plugin name must be of format my-plugin-name',
-            onComplete: async name => {
-              // Remove insomnia-plugin- prefix if they accidentally typed it
-              name = name.replace(/^insomnia-plugin-/, '');
-              try {
-                await createPlugin(
-                  `insomnia-plugin-${name}`,
-                  '0.0.1',
-                  [
-                    '// For help writing plugins, visit the documentation to get started:',
-                    `//   ${docsPlugins}`,
-                    '',
-                    '// TODO: Add plugin code here...',
-                  ].join('\n'),
-                );
-              } catch (err) {
-                console.error(err);
-                showAlert({
-                  title: 'Failed to Create Plugin',
-                  message: err.message,
-                });
-              }
-              refreshPlugins();
-            },
-          })}
-        >Generate New Plugin</Button>
+          className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() =>
+            showPrompt({
+              title: 'New Plugin',
+              defaultValue: 'demo-example',
+              placeholder: 'example-name',
+              submitName: 'Generate',
+              label: 'Plugin Name',
+              selectText: true,
+              validate: name =>
+                name.match(/^[a-z][a-z-]*[a-z]$/) ? '' : 'Plugin name must be of format my-plugin-name',
+              onComplete: async name => {
+                // Remove insomnia-plugin- prefix if they accidentally typed it
+                name = name.replace(/^insomnia-plugin-/, '');
+                try {
+                  await createPlugin(
+                    `insomnia-plugin-${name}`,
+                    '0.0.1',
+                    [
+                      '// For help writing plugins, visit the documentation to get started:',
+                      `//   ${docsPlugins}`,
+                      '',
+                      '// TODO: Add plugin code here...',
+                    ].join('\n'),
+                  );
+                } catch (err) {
+                  console.error(err);
+                  showAlert({
+                    title: 'Failed to Create Plugin',
+                    message: err.message,
+                  });
+                }
+                refreshPlugins();
+              },
+            })
+          }
+        >
+          Generate New Plugin
+        </Button>
         <Button
-          className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
-          onPress={() => window.shell.showItemInFolder(path.join(process.env['INSOMNIA_DATA_PATH'] || window.app.getPath('userData'), 'plugins'))}
+          className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() =>
+            window.shell.showItemInFolder(
+              path.join(process.env['INSOMNIA_DATA_PATH'] || window.app.getPath('userData'), 'plugins'),
+            )
+          }
         >
           Reveal Plugins Folder
         </Button>
         <Button
           isDisabled={isRefreshingPlugins}
-          className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
+          className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() => refreshPlugins()}
         >
           Reload Plugins
@@ -301,11 +286,21 @@ export const Plugins: FC = () => {
 
       <div className="form-row mt-6">
         <div className="form-control">
-          <span className="mr-2">Plugin Installation Trusted Certificates File ({ACCEPTED_NODE_CA_FILE_EXTS.join(', ')})</span>
+          <span className="mr-2">
+            Plugin Installation Trusted Certificates File ({ACCEPTED_NODE_CA_FILE_EXTS.join(', ')})
+          </span>
           <Tooltip
             className="cursor-pointer"
             message={
-              <span>You can bundle multiple root certificates into a single file. <a className="underline" href="https://github.com/Kong/insomnia/wiki/Combining-Multiple-Root-CAs-into-a-single-file">See instructions <i className="fa fa-external-link" /></a></span>
+              <span>
+                You can bundle multiple root certificates into a single file.{' '}
+                <a
+                  className="underline"
+                  href="https://github.com/Kong/insomnia/wiki/Combining-Multiple-Root-CAs-into-a-single-file"
+                >
+                  See instructions <i className="fa fa-external-link" />
+                </a>
+              </span>
             }
           >
             <i className="fa fa-info-circle" />
@@ -314,11 +309,7 @@ export const Plugins: FC = () => {
       </div>
       <div className="form-row">
         <div className="form-control form-control--outlined">
-          <input
-            disabled={true}
-            type="text"
-            value={state.pluginNodeExtraCerts}
-          />
+          <input disabled={true} type="text" value={state.pluginNodeExtraCerts} />
         </div>
         <div className="form-control width-auto">
           <FileTrigger
@@ -335,23 +326,23 @@ export const Plugins: FC = () => {
               patchSettings({ pluginNodeExtraCerts: window.webUtils.getPathForFile(files[0]) });
             }}
           >
-            <Button
-              className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
-            >
+            <Button className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
               Browse...
             </Button>
           </FileTrigger>
         </div>
         <div className="form-control width-auto">
           <Button
-            className="m-1 px-[--padding-md] h-[--line-height-xs] py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all border border-solid border-[--hl-lg] rounded-[--radius-md]"
+            className="m-1 flex h-[--line-height-xs] items-center justify-center gap-2 rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] py-1 text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             onPress={() => {
               patchSettings({ pluginNodeExtraCerts: '' });
             }}
             isDisabled={state.pluginNodeExtraCerts === ''}
-          >Clear</Button>
+          >
+            Clear
+          </Button>
         </div>
       </div>
-    </div >
+    </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/settings/shortcuts.tsx b/packages/insomnia/src/ui/components/settings/shortcuts.tsx
index c115d7a93c..9ddac0036c 100644
--- a/packages/insomnia/src/ui/components/settings/shortcuts.tsx
+++ b/packages/insomnia/src/ui/components/settings/shortcuts.tsx
@@ -18,15 +18,16 @@ import { Hotkey } from '../hotkey';
 import { showModal } from '../modals';
 import { AddKeyCombinationModal } from '../modals/add-key-combination-modal';
 
-export const isKeyCombinationInRegistry = (pressedKeyComb: KeyCombination, hotKeyRegistry: Partial<HotKeyRegistry>): boolean =>
+export const isKeyCombinationInRegistry = (
+  pressedKeyComb: KeyCombination,
+  hotKeyRegistry: Partial<HotKeyRegistry>,
+): boolean =>
   !!Object.values(hotKeyRegistry).find(bindings =>
-    getPlatformKeyCombinations(bindings)
-      .find(keyComb => areSameKeyCombinations(pressedKeyComb, keyComb)));
+    getPlatformKeyCombinations(bindings).find(keyComb => areSameKeyCombinations(pressedKeyComb, keyComb)),
+  );
 
 export const Shortcuts: FC = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const { hotKeyRegistry } = settings;
   const patchSettings = useSettingsPatcher();
 
@@ -34,7 +35,10 @@ export const Shortcuts: FC = () => {
     <div className="shortcuts">
       <div className="row-spaced margin-bottom-xs">
         <div>
-          <PromptButton className="btn btn--clicky" onClick={() => patchSettings({ hotKeyRegistry: newDefaultRegistry() })}>
+          <PromptButton
+            className="btn btn--clicky"
+            onClick={() => patchSettings({ hotKeyRegistry: newDefaultRegistry() })}
+          >
             Reset all
           </PromptButton>
         </div>
@@ -44,8 +48,10 @@ export const Shortcuts: FC = () => {
           {Object.entries(hotKeyRegistry).map(([key, platformCombinations]) => {
             const keyboardShortcut = key as KeyboardShortcut;
             // smelly
-            const keyCombosForThisPlatform = getPlatformKeyCombinations(platformCombinations)
-              .map(k => ({ ...k, id: generateId('key') }));
+            const keyCombosForThisPlatform = getPlatformKeyCombinations(platformCombinations).map(k => ({
+              ...k,
+              id: generateId('key'),
+            }));
 
             return (
               <tr key={keyboardShortcut}>
@@ -59,48 +65,41 @@ export const Shortcuts: FC = () => {
                     );
                   })}
                 </td>
-                <td className="text-right options" style={{ verticalAlign: 'middle' }}>
+                <td className="options text-right" style={{ verticalAlign: 'middle' }}>
                   <Dropdown
-                    aria-label='Select a mode'
+                    aria-label="Select a mode"
                     closeOnSelect={false}
                     triggerButton={
-                      <Button >
+                      <Button>
                         <i className="fa fa-gear" />
                       </Button>
                     }
                   >
-                    <DropdownItem aria-label='Add keyboard shortcut'>
+                    <DropdownItem aria-label="Add keyboard shortcut">
                       <ItemContent
                         icon="plus-circle"
                         label="Add keyboard shortcut"
                         onClick={() =>
-                          showModal(
-                            AddKeyCombinationModal,
-                            {
-                              keyboardShortcut,
-                              checkKeyCombinationDuplicate: (pressed: KeyCombination) => isKeyCombinationInRegistry(pressed, hotKeyRegistry),
-                              addKeyCombination: (keyboardShortcut: KeyboardShortcut, keyComb: KeyCombination) => {
-                                const keyCombs = getPlatformKeyCombinations(hotKeyRegistry[keyboardShortcut]);
-                                keyCombs.push(keyComb);
-                                patchSettings({ hotKeyRegistry });
-                              },
-                            }
-                          )}
+                          showModal(AddKeyCombinationModal, {
+                            keyboardShortcut,
+                            checkKeyCombinationDuplicate: (pressed: KeyCombination) =>
+                              isKeyCombinationInRegistry(pressed, hotKeyRegistry),
+                            addKeyCombination: (keyboardShortcut: KeyboardShortcut, keyComb: KeyCombination) => {
+                              const keyCombs = getPlatformKeyCombinations(hotKeyRegistry[keyboardShortcut]);
+                              keyCombs.push(keyComb);
+                              patchSettings({ hotKeyRegistry });
+                            },
+                          })
+                        }
                       />
                     </DropdownItem>
-                    <DropdownSection
-                      aria-label='Remove existing section'
-                      title='Remove existing'
-                    >
+                    <DropdownSection aria-label="Remove existing section" title="Remove existing">
                       {
-                      /* Dropdown items to remove key combinations. */
+                        /* Dropdown items to remove key combinations. */
                         keyCombosForThisPlatform.map((keyComb: KeyCombination) => {
                           const display = constructKeyCombinationDisplay(keyComb, false);
                           return (
-                            <DropdownItem
-                              key={display}
-                              aria-label={display}
-                            >
+                            <DropdownItem key={display} aria-label={display}>
                               <ItemContent
                                 icon="trash-o"
                                 label={display}
@@ -126,8 +125,8 @@ export const Shortcuts: FC = () => {
                       }
                     </DropdownSection>
 
-                    <DropdownSection aria-label='Reset keyboard shortcuts section'>
-                      <DropdownItem aria-label='Reset keyboard shortcuts'>
+                    <DropdownSection aria-label="Reset keyboard shortcuts section">
+                      <DropdownItem aria-label="Reset keyboard shortcuts">
                         <ItemContent
                           icon="empty"
                           label="Reset keyboard shortcuts"
diff --git a/packages/insomnia/src/ui/components/settings/text-setting.tsx b/packages/insomnia/src/ui/components/settings/text-setting.tsx
index 1649700cd0..5df3a4d455 100644
--- a/packages/insomnia/src/ui/components/settings/text-setting.tsx
+++ b/packages/insomnia/src/ui/components/settings/text-setting.tsx
@@ -11,25 +11,20 @@ export const TextSetting: FC<{
   label: string;
   placeholder?: InputHTMLAttributes<HTMLInputElement>['placeholder'];
   setting: SettingsOfType<string | null>;
-}> = ({
-  disabled,
-  help,
-  label,
-  placeholder,
-  setting,
-}) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+}> = ({ disabled, help, label, placeholder, setting }) => {
+  const { settings } = useRootLoaderData();
   if (!Object.prototype.hasOwnProperty.call(settings, setting)) {
     throw new Error(`Invalid setting name ${setting}`);
   }
   const patchSettings = useSettingsPatcher();
 
-  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(async ({ currentTarget: { value } }) => {
-    const updatedValue = value === null ? '__NULL__' : value;
-    patchSettings({ [setting]: updatedValue });
-  }, [patchSettings, setting]);
+  const handleOnChange = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    async ({ currentTarget: { value } }) => {
+      const updatedValue = value === null ? '__NULL__' : value;
+      patchSettings({ [setting]: updatedValue });
+    },
+    [patchSettings, setting],
+  );
 
   let defaultValue = settings[setting];
   if (typeof defaultValue !== 'string') {
diff --git a/packages/insomnia/src/ui/components/settings/theme-panel.tsx b/packages/insomnia/src/ui/components/settings/theme-panel.tsx
index 41af9cafa3..f941d03ff6 100644
--- a/packages/insomnia/src/ui/components/settings/theme-panel.tsx
+++ b/packages/insomnia/src/ui/components/settings/theme-panel.tsx
@@ -9,7 +9,7 @@ import { Icon } from '../icon';
 const ThemePreview: FC<{ theme: PluginTheme }> = ({ theme: { name: themeName } }) => (
   <svg
     // @ts-expect-error -- something about themes
-     
+
     theme={themeName}
     className="theme-preview"
     width="100%"
@@ -26,7 +26,7 @@ const ThemePreview: FC<{ theme: PluginTheme }> = ({ theme: { name: themeName } }
 
     <g
       // @ts-expect-error -- something about themes
-       
+
       subtheme={themeName}
     >
       {/* App Header */}
@@ -77,49 +77,53 @@ const ThemePreview: FC<{ theme: PluginTheme }> = ({ theme: { name: themeName } }
 );
 
 export const ThemePanel: FC = () => {
-  const {
-    themes,
-    activate,
-    changeAutoDetect,
-    isActive,
-    isActiveDark,
-    isActiveLight,
-    autoDetectColorScheme,
-  } = useThemes();
+  const { themes, activate, changeAutoDetect, isActive, isActiveDark, isActiveLight, autoDetectColorScheme } =
+    useThemes();
 
   return (
-    <div className='flex flex-col gap-2'>
+    <div className="flex flex-col gap-2">
       <Label className="flex items-center gap-2">
-        <Checkbox slot={null} isSelected={autoDetectColorScheme} onChange={isSelected => changeAutoDetect(isSelected)} className="group p-0 flex items-center h-full">
-          <div className="w-4 h-4 rounded flex items-center justify-center transition-colors group-data-[selected]:bg-[--hl-xs] group-focus:ring-2 ring-1 ring-[--hl-sm]">
-            <Icon icon={'check'} className='opacity-0 group-data-[selected]:opacity-100 group-data-[indeterminate]:opacity-100 group-data-[selected]:text-[--color-success] w-3 h-3' />
+        <Checkbox
+          slot={null}
+          isSelected={autoDetectColorScheme}
+          onChange={isSelected => changeAutoDetect(isSelected)}
+          className="group flex h-full items-center p-0"
+        >
+          <div className="flex h-4 w-4 items-center justify-center rounded ring-1 ring-[--hl-sm] transition-colors group-focus:ring-2 group-data-[selected]:bg-[--hl-xs]">
+            <Icon
+              icon={'check'}
+              className="h-3 w-3 opacity-0 group-data-[selected]:text-[--color-success] group-data-[indeterminate]:opacity-100 group-data-[selected]:opacity-100"
+            />
           </div>
         </Checkbox>
         Use OS color scheme
         <HelpTooltip className="space-left">
-          Select different themes for when you’re using light versus dark color schemes on your OS. Check this box, then hover over a theme and select either light (sun) or dark (moon).
+          Select different themes for when you’re using light versus dark color schemes on your OS. Check this box, then
+          hover over a theme and select either light (sun) or dark (moon).
         </HelpTooltip>
       </Label>
 
-      <ul className='grid grid-flow-row grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5'>
+      <ul className="grid grid-flow-row grid-cols-3 gap-4 sm:grid-cols-4 md:grid-cols-5">
         {themes.map(theme => (
-          <div key={theme.name} className='flex flex-col gap-1'>
-            <div className='text-center text-sm truncate select-none'>{theme.displayName}</div>
+          <div key={theme.name} className="flex flex-col gap-1">
+            <div className="select-none truncate text-center text-sm">{theme.displayName}</div>
             <div
               data-active-dark-theme={isActiveDark(theme) || undefined}
               data-active-light-theme={isActiveLight(theme) || undefined}
               data-active-theme={isActive(theme) || undefined}
-              className='group flex relative rounded overflow-hidden shadow-md transition-colors data-[active-theme]:ring-2 data-[active-theme]:ring-[--color-surprise]'
+              className="group relative flex overflow-hidden rounded shadow-md transition-colors data-[active-theme]:ring-2 data-[active-theme]:ring-[--color-surprise]"
             >
               {autoDetectColorScheme && (
-                <div className='group-hover:grid group-focus:grid group-data-[active-theme]:grid absolute top-0 left-0 w-full h-full hidden grid-cols-2'>
+                <div className="absolute left-0 top-0 hidden h-full w-full grid-cols-2 group-hover:grid group-focus:grid group-data-[active-theme]:grid">
                   <Button
                     onPress={() => {
                       activate(theme.name, 'light');
                     }}
-                    style={{
-                      '--color-surprise': theme.theme.background?.surprise,
-                    } as React.CSSProperties}
+                    style={
+                      {
+                        '--color-surprise': theme.theme.background?.surprise,
+                      } as React.CSSProperties
+                    }
                     className="flex items-center justify-center hover:bg-[--hl-md] focus:bg-[--hl-md] group-data-[active-light-theme]:bg-[--hl-lg] group-data-[active-light-theme]:text-[--color-surprise]"
                   >
                     <Icon icon="sun" />
@@ -128,9 +132,11 @@ export const ThemePanel: FC = () => {
                     onPress={() => {
                       activate(theme.name, 'dark');
                     }}
-                    style={{
-                      '--color-surprise': theme.theme.background?.surprise,
-                    } as React.CSSProperties}
+                    style={
+                      {
+                        '--color-surprise': theme.theme.background?.surprise,
+                      } as React.CSSProperties
+                    }
                     className="flex items-center justify-center hover:bg-[--hl-md] focus:bg-[--hl-md] group-data-[active-dark-theme]:bg-[--hl-md] group-data-[active-dark-theme]:text-[--color-surprise]"
                   >
                     <Icon icon="moon" />
diff --git a/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx b/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
index 59bb298ccc..bb96b1bab9 100644
--- a/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
+++ b/packages/insomnia/src/ui/components/settings/vault-key-panel.tsx
@@ -39,7 +39,7 @@ export const VaultKeyDisplayInput = ({ vaultKey }: { vaultKey: string }) => {
   };
 
   return (
-    <div className="flex items-center gap-3 bg-[--hl-xs] px-2 py-1 border border-solid border-[--hl-sm] w-full">
+    <div className="flex w-full items-center gap-3 border border-solid border-[--hl-sm] bg-[--hl-xs] px-2 py-1">
       <div
         className="w-[calc(100%-50px)] truncate"
         data-testid="VaultKeyDisplayPanel"
@@ -67,7 +67,6 @@ export const VaultKeyDisplayInput = ({ vaultKey }: { vaultKey: string }) => {
         <i className="fa-solid fa-download" />
       </Button>
     </div>
-
   );
 };
 
@@ -159,23 +158,26 @@ export const VaultKeyPanel = () => {
   return (
     <div>
       {/* Show Gen Vault button when vault salt does not exist */}
-      {!vaultSaltExists &&
+      {!vaultSaltExists && (
         <div className="form-row pad-top-sm justify-start">
           <Button
-            className={`flex items-center btn btn--outlined btn--super-compact ${isGenerating ? 'w-56' : 'w-48'}`}
+            className={`btn btn--outlined btn--super-compact flex items-center ${isGenerating ? 'w-56' : 'w-48'}`}
             onPress={generateVaultKey}
             isDisabled={isGenerating}
-            aria-label='Generate Vault Key'
+            aria-label="Generate Vault Key"
           >
-            {isGenerating && <Icon icon="spinner" className="text-[--color-font] animate-spin m-auto inline-block mr-2" />}
+            {isGenerating && (
+              <Icon icon="spinner" className="m-auto mr-2 inline-block animate-spin text-[--color-font]" />
+            )}
             Generate Vault Key
             <HelpTooltip className="space-left">
-              Generate an encryption key to save secrets in private environment. This ensures all secrets are securely stored and encrypted locally.
+              Generate an encryption key to save secrets in private environment. This ensures all secrets are securely
+              stored and encrypted locally.
             </HelpTooltip>
           </Button>
         </div>
-      }
-      {vaultSaltExists && vaultKeyExists && vaultKeyValue !== '' &&
+      )}
+      {vaultSaltExists && vaultKeyExists && vaultKeyValue !== '' && (
         <>
           <div className="form-row pad-top-sm flex-col">
             <div className="mb-[var(--padding-xs)]">
@@ -188,9 +190,10 @@ export const VaultKeyPanel = () => {
             <BooleanSetting
               label="Save encrypted vault key locally"
               setting="saveVaultKeyLocally"
-              confirmMessage={isChecked => isChecked ?
-                'Are you sure to save the vault key locally? The vault key will be encrypted and saved locally.' :
-                'Are you sure to remove the local vault key? You will need to input it when you login again.'
+              confirmMessage={isChecked =>
+                isChecked
+                  ? 'Are you sure to save the vault key locally? The vault key will be encrypted and saved locally.'
+                  : 'Are you sure to remove the local vault key? You will need to input it when you login again.'
               }
               confirmBeforeToggle
             />
@@ -199,28 +202,24 @@ export const VaultKeyPanel = () => {
             <BooleanSetting
               label="Enable vault in scripts"
               help="Allow pre-request and after-response script to access vault secrets."
-              setting='enableVaultInScripts'
+              setting="enableVaultInScripts"
             />
           </div>
         </>
-      }
+      )}
       {/* User has not input vault key after re-login */}
-      {vaultSaltExists && !vaultKeyExists &&
+      {vaultSaltExists && !vaultKeyExists && (
         <div className="form-row pad-top-sm justify-start">
           <Button
-            className="flex items-center w-48 btn btn--outlined btn--super-compact"
+            className="btn btn--outlined btn--super-compact flex w-48 items-center"
             onPress={() => setShowModal(true)}
           >
             Enter Vault Key
-            <HelpTooltip className="space-left">
-              Enter your vault key to unlock all local secrets.
-            </HelpTooltip>
+            <HelpTooltip className="space-left">Enter your vault key to unlock all local secrets.</HelpTooltip>
           </Button>
         </div>
-      }
-      {showInputVaultKeyModal &&
-        <InputVaultKeyModal onClose={handleModalClose} />
-      }
+      )}
+      {showInputVaultKeyModal && <InputVaultKeyModal onClose={handleModalClose} />}
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/tabs/tab-list.tsx b/packages/insomnia/src/ui/components/tabs/tab-list.tsx
index 937745aa9c..3eb67c242e 100644
--- a/packages/insomnia/src/ui/components/tabs/tab-list.tsx
+++ b/packages/insomnia/src/ui/components/tabs/tab-list.tsx
@@ -1,5 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Button, DropIndicator, GridList, Menu, MenuItem, MenuTrigger, Popover, type Selection, useDragAndDrop } from 'react-aria-components';
+import {
+  Button,
+  DropIndicator,
+  GridList,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  type Selection,
+  useDragAndDrop,
+} from 'react-aria-components';
 import { useFetcher, useParams } from 'react-router-dom';
 
 import { type ChangeBufferEvent, type ChangeType, database } from '../../../common/database';
@@ -34,13 +44,13 @@ export const TAB_ROUTER_PATH: Record<TabType, string> = {
   mockServer: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/mock-server',
   runner: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/debug/runner',
   document: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/spec',
-  mockRoute: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/mock-server/mock-route/:mockRouteId',
+  mockRoute:
+    '/organization/:organizationId/project/:projectId/workspace/:workspaceId/mock-server/mock-route/:mockRouteId',
   test: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/test',
   testSuite: '/organization/:organizationId/project/:projectId/workspace/:workspaceId/test/test-suite/*',
 };
 
 export const OrganizationTabList = ({ showActiveStatus = true, currentPage = '' }) => {
-
   const [showAddRequestModal, setShowAddRequestModal] = useState(false);
   const [isOverFlow, setIsOverFlow] = useState(false);
   const [leftScrollDisable, setLeftScrollDisable] = useState(false);
@@ -95,95 +105,107 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
     return list.includes(docType);
   };
 
-  const handleDelete = useCallback((docId: string, docType: string) => {
-    if (docType === models.project.type) {
-      // delete all tabs of this project
-      closeAllTabsUnderProject?.(docId);
-    }
-    if (docType === models.workspace.type) {
-      // delete all tabs of this workspace
-      closeAllTabsUnderWorkspace?.(docId);
-    } else if (docType === models.requestGroup.type) {
-      // when delete a folder, we need also delete the corresponding folder runner tab(if exists)
-      batchCloseTabs?.([docId, `runner_${docId}`]);
-    } else {
-      // delete tab by id
-      closeTabById(docId);
-    }
-  }, [batchCloseTabs, closeAllTabsUnderProject, closeAllTabsUnderWorkspace, closeTabById]);
-
-  const handleUpdate = useCallback(async (doc: models.BaseModel, patches: Partial<models.BaseModel>[] = []) => {
-    const patchObj: Record<string, any> = {};
-    patches.forEach(patch => {
-      Object.assign(patchObj, patch);
-    });
-    // only need to handle name, method, parentId change
-    if (!patchObj.name && !patchObj.method && !patchObj.parentId) {
-      return;
-    }
-    if (patchObj.name) {
-      if (doc.type === models.project.type) {
-        // update project name(for tooltip)
-        updateProjectName?.(doc._id, doc.name);
-      } else if (doc.type === models.workspace.type) {
-        // update workspace name(for tooltip) & update name for workspace tab
-        updateWorkspaceName?.(doc._id, doc.name);
+  const handleDelete = useCallback(
+    (docId: string, docType: string) => {
+      if (docType === models.project.type) {
+        // delete all tabs of this project
+        closeAllTabsUnderProject?.(docId);
+      }
+      if (docType === models.workspace.type) {
+        // delete all tabs of this workspace
+        closeAllTabsUnderWorkspace?.(docId);
+      } else if (docType === models.requestGroup.type) {
+        // when delete a folder, we need also delete the corresponding folder runner tab(if exists)
+        batchCloseTabs?.([docId, `runner_${docId}`]);
       } else {
-        updateTabById?.(doc._id, {
-          name: doc.name,
-        });
+        // delete tab by id
+        closeTabById(docId);
       }
-    }
+    },
+    [batchCloseTabs, closeAllTabsUnderProject, closeAllTabsUnderWorkspace, closeTabById],
+  );
 
-    if (patchObj.method) {
-      if (doc.type === models.request.type || doc.type === models.grpcRequest.type || doc.type === models.webSocketRequest.type) {
-        const tag = getRequestMethodShortHand(doc as Request);
-        const method = (doc as Request).method;
-        updateTabById?.(doc._id, {
-          method,
-          tag,
-        });
-      } else if (doc.type === models.mockRoute.type) {
-        const method = (doc as MockRoute).method;
-        const tag = formatMethodName(method);
-        updateTabById?.(doc._id, {
-          method,
-          tag,
-        });
+  const handleUpdate = useCallback(
+    async (doc: models.BaseModel, patches: Partial<models.BaseModel>[] = []) => {
+      const patchObj: Record<string, any> = {};
+      patches.forEach(patch => {
+        Object.assign(patchObj, patch);
+      });
+      // only need to handle name, method, parentId change
+      if (!patchObj.name && !patchObj.method && !patchObj.parentId) {
+        return;
       }
-    }
-
-    // move request or requestGroup to another collection
-    if (patchObj.parentId && !patchObj.metaSortKey && (patchObj.parentId as string).startsWith('wrk_')) {
-      const workspace = await models.workspace.getById(patchObj.parentId);
-      if (workspace) {
-        if (isRequest(doc)) {
+      if (patchObj.name) {
+        if (doc.type === models.project.type) {
+          // update project name(for tooltip)
+          updateProjectName?.(doc._id, doc.name);
+        } else if (doc.type === models.workspace.type) {
+          // update workspace name(for tooltip) & update name for workspace tab
+          updateWorkspaceName?.(doc._id, doc.name);
+        } else {
           updateTabById?.(doc._id, {
-            workspaceId: workspace._id,
-            workspaceName: workspace.name,
-            url: `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request/${doc._id}`,
+            name: doc.name,
           });
-        } else if (isRequestGroup(doc)) {
-          const folderEntities = await database.withDescendants(doc, models.request.type, [models.request.type, models.requestGroup.type]);
-          console.log('folderEntities:', folderEntities);
-          const batchUpdates = [doc, ...folderEntities].map(entity => {
-            return {
-              id: entity._id,
-              fields: {
-                workspaceId: workspace._id,
-                workspaceName: workspace.name,
-                url: isRequestGroup(entity)
-                  ? `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request-group/${entity._id}`
-                  : `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request/${entity._id}`,
-              },
-            };
-          });
-          batchUpdateTabs?.(batchUpdates);
         }
       }
-    }
 
-  }, [organizationId, projectId, updateProjectName, updateTabById, updateWorkspaceName, batchUpdateTabs]);
+      if (patchObj.method) {
+        if (
+          doc.type === models.request.type ||
+          doc.type === models.grpcRequest.type ||
+          doc.type === models.webSocketRequest.type
+        ) {
+          const tag = getRequestMethodShortHand(doc as Request);
+          const method = (doc as Request).method;
+          updateTabById?.(doc._id, {
+            method,
+            tag,
+          });
+        } else if (doc.type === models.mockRoute.type) {
+          const method = (doc as MockRoute).method;
+          const tag = formatMethodName(method);
+          updateTabById?.(doc._id, {
+            method,
+            tag,
+          });
+        }
+      }
+
+      // move request or requestGroup to another collection
+      if (patchObj.parentId && !patchObj.metaSortKey && (patchObj.parentId as string).startsWith('wrk_')) {
+        const workspace = await models.workspace.getById(patchObj.parentId);
+        if (workspace) {
+          if (isRequest(doc)) {
+            updateTabById?.(doc._id, {
+              workspaceId: workspace._id,
+              workspaceName: workspace.name,
+              url: `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request/${doc._id}`,
+            });
+          } else if (isRequestGroup(doc)) {
+            const folderEntities = await database.withDescendants(doc, models.request.type, [
+              models.request.type,
+              models.requestGroup.type,
+            ]);
+            console.log('folderEntities:', folderEntities);
+            const batchUpdates = [doc, ...folderEntities].map(entity => {
+              return {
+                id: entity._id,
+                fields: {
+                  workspaceId: workspace._id,
+                  workspaceName: workspace.name,
+                  url: isRequestGroup(entity)
+                    ? `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request-group/${entity._id}`
+                    : `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request/${entity._id}`,
+                },
+              };
+            });
+            batchUpdateTabs?.(batchUpdates);
+          }
+        }
+      }
+    },
+    [organizationId, projectId, updateProjectName, updateTabById, updateWorkspaceName, batchUpdateTabs],
+  );
 
   useEffect(() => {
     // sync tabList with database
@@ -320,12 +342,7 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
       }
     },
     renderDropIndicator(target) {
-      return (
-        <DropIndicator
-          target={target}
-          className="outline-[--color-surprise] outline-1 outline !border-none"
-        />
-      );
+      return <DropIndicator target={target} className="!border-none outline outline-1 outline-[--color-surprise]" />;
     },
   });
 
@@ -334,18 +351,26 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
   }
 
   return (
-    <div className="flex box-content bg-[--color-bg]" style={{ height: `${INSOMNIA_TAB_HEIGHT + 1}px` }} >
-      <Button onPress={scrollLeft} isDisabled={leftScrollDisable} className={`${leftScrollDisable && 'cursor-not-allowed'} border-b border-solid border-[--hl-sm]`}>
+    <div className="box-content flex bg-[--color-bg]" style={{ height: `${INSOMNIA_TAB_HEIGHT + 1}px` }}>
+      <Button
+        onPress={scrollLeft}
+        isDisabled={leftScrollDisable}
+        className={`${leftScrollDisable && 'cursor-not-allowed'} border-b border-solid border-[--hl-sm]`}
+      >
         <Icon icon="chevron-left" className={`w-[30px] ${isOverFlow ? 'block' : 'hidden'}`} />
       </Button>
-      <div className='max-w-[calc(100%-40px)] overflow-x-scroll hide-scrollbars' ref={tabListWrapperRef} onScroll={handleScroll}>
+      <div
+        className="hide-scrollbars max-w-[calc(100%-40px)] overflow-x-scroll"
+        ref={tabListWrapperRef}
+        onScroll={handleScroll}
+      >
         <GridList
           aria-label="Insomnia Tabs"
           onSelectionChange={handleSelectionChange}
           selectedKeys={showActiveStatus && activeTabId ? [activeTabId] : []}
           disallowEmptySelection
           selectionMode="single"
-          selectionBehavior='replace'
+          selectionBehavior="replace"
           className="flex h-[41px] w-fit"
           dragAndDropHooks={dragAndDropHooks}
           items={tabList}
@@ -354,22 +379,35 @@ export const OrganizationTabList = ({ showActiveStatus = true, currentPage = ''
           {item => <InsomniaTab tab={item} />}
         </GridList>
       </div>
-      <Button onPress={scrollRight} isDisabled={rightScrollDisable} className={`${rightScrollDisable && 'cursor-not-allowed'} border-b border-solid border-[--hl-sm]`} >
+      <Button
+        onPress={scrollRight}
+        isDisabled={rightScrollDisable}
+        className={`${rightScrollDisable && 'cursor-not-allowed'} border-b border-solid border-[--hl-sm]`}
+      >
         <Icon icon="chevron-right" className={`w-[30px] ${isOverFlow ? 'block' : 'hidden'}`} />
       </Button>
-      <div className='flex items-center justify-start flex-shrink-0 flex-grow border-b border-solid border-[--hl-sm]'>
+      <div className="flex flex-shrink-0 flex-grow items-center justify-start border-b border-solid border-[--hl-sm]">
         <MenuTrigger>
-          <Button aria-label="Tab Plus" className="w-[20px] h-[20px] mx-[10px] text-center hover:bg-[--hl-xs] data-[pressed]:bg-[--hl-sm]">
-            <Icon icon="plus" className='cursor-pointer' />
+          <Button
+            aria-label="Tab Plus"
+            className="mx-[10px] h-[20px] w-[20px] text-center hover:bg-[--hl-xs] data-[pressed]:bg-[--hl-sm]"
+          >
+            <Icon icon="plus" className="cursor-pointer" />
           </Button>
           <Popover>
-            <Menu className='border max-w-lg select-none text-sm border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none'>
+            <Menu className="max-h-[85vh] max-w-lg select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none">
               {currentPage === 'debug' && (
-                <MenuItem className="aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors" onAction={addRequest}>
+                <MenuItem
+                  className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold"
+                  onAction={addRequest}
+                >
                   Add request to current collection
                 </MenuItem>
               )}
-              <MenuItem className="aria-disabled:opacity-30 aria-disabled:cursor-not-allowed flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors" onAction={addRequestToCollection}>
+              <MenuItem
+                className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:opacity-30 aria-selected:font-bold"
+                onAction={addRequestToCollection}
+              >
                 Add request to other collection
               </MenuItem>
             </Menu>
diff --git a/packages/insomnia/src/ui/components/tabs/tab.tsx b/packages/insomnia/src/ui/components/tabs/tab.tsx
index 1fdca80243..6f87517a38 100644
--- a/packages/insomnia/src/ui/components/tabs/tab.tsx
+++ b/packages/insomnia/src/ui/components/tabs/tab.tsx
@@ -8,7 +8,17 @@ import { Icon } from '../icon';
 import { Tooltip } from '../tooltip';
 import { TAB_CONTEXT_MENU_COMMAND } from './tab-list';
 
-export type TabType = 'request' | 'folder' | 'environment' | 'mockServer' | 'mockRoute' | 'document' | 'collection' | 'runner' | 'test' | 'testSuite';
+export type TabType =
+  | 'request'
+  | 'folder'
+  | 'environment'
+  | 'mockServer'
+  | 'mockRoute'
+  | 'document'
+  | 'collection'
+  | 'runner'
+  | 'test'
+  | 'testSuite';
 export interface BaseTab {
   type: TabType;
   name: string;
@@ -27,16 +37,16 @@ export interface BaseTab {
 }
 
 const REQUEST_METHOD_STYLE_MAP: Record<string, string> = {
-  'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-  'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-  'GQL': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-  'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-  'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-  'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-  'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-  'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-  'WS': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-  'gRPC': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
+  GET: 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
+  POST: 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
+  GQL: 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
+  HEAD: 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
+  OPTIONS: 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
+  DELETE: 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
+  PUT: 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
+  PATCH: 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
+  WS: 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
+  gRPC: 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
 };
 
 const WORKSPACE_TAB_UI_MAP: Partial<Record<TabType, any>> = {
@@ -63,13 +73,14 @@ const WORKSPACE_TAB_UI_MAP: Partial<Record<TabType, any>> = {
 };
 
 export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {
-
   const { closeTabById, currentOrgTabs } = useInsomniaTabContext();
 
   const renderTabIcon = (type: TabType) => {
     if (WORKSPACE_TAB_UI_MAP[type]) {
       return (
-        <div className={`${WORKSPACE_TAB_UI_MAP[type].bgColor} ${WORKSPACE_TAB_UI_MAP[type].textColor} px-2 flex justify-center items-center h-[20px] w-[20px] rounded-s-sm`}>
+        <div
+          className={`${WORKSPACE_TAB_UI_MAP[type].bgColor} ${WORKSPACE_TAB_UI_MAP[type].textColor} flex h-[20px] w-[20px] items-center justify-center rounded-s-sm px-2`}
+        >
           <Icon icon={WORKSPACE_TAB_UI_MAP[type].icon} />
         </div>
       );
@@ -77,7 +88,12 @@ export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {
 
     if (type === 'request' || type === 'mockRoute') {
       return (
-        <span aria-label='Tab Tag' className={`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center ${REQUEST_METHOD_STYLE_MAP[tab?.method || tab?.tag || '']}`}>{tab.tag}</span>
+        <span
+          aria-label="Tab Tag"
+          className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${REQUEST_METHOD_STYLE_MAP[tab?.method || tab?.tag || '']}`}
+        >
+          {tab.tag}
+        </span>
       );
     }
 
@@ -124,11 +140,14 @@ export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {
     });
   };
 
-  const scrollIntoView = useCallback((node: HTMLDivElement) => {
-    if (node && currentOrgTabs.activeTabId === tab.id) {
-      scrollElementIntoView(node, { behavior: 'instant' });
-    }
-  }, [currentOrgTabs.activeTabId, tab.id]);
+  const scrollIntoView = useCallback(
+    (node: HTMLDivElement) => {
+      if (node && currentOrgTabs.activeTabId === tab.id) {
+        scrollElementIntoView(node, { behavior: 'instant' });
+      }
+    },
+    [currentOrgTabs.activeTabId, tab.id],
+  );
 
   const { updateTabById } = useInsomniaTabContext();
 
@@ -142,33 +161,39 @@ export const InsomniaTab = ({ tab }: { tab: BaseTab }) => {
     <GridListItem
       textValue={`tab-${tab.name}`}
       id={tab.id}
-      className="outline-none aria-selected:text-[--color-font] aria-selected:bg-[--hl-sm] hover:bg-[--hl-xs]"
+      className="outline-none hover:bg-[--hl-xs] aria-selected:bg-[--hl-sm] aria-selected:text-[--color-font]"
       ref={scrollIntoView}
     >
       {({ isSelected, isHovered }) => (
-        <Tooltip delay={1000} message={`${tab.projectName} / ${tab.workspaceName}`} className='h-full'>
+        <Tooltip delay={1000} message={`${tab.projectName} / ${tab.workspaceName}`} className="h-full">
           <div
             onDoubleClick={handleDoubleClick}
             onAuxClick={e => handleAuxClick(e, tab.id)}
             onContextMenu={handleContextMenu}
-            className={`relative flex items-center h-full px-[10px] flex-nowrap border-solid border-r border-[--hl-sm] hover:text-[--color-font] outline-none max-w-[200px] cursor-pointer ${(!isSelected && !isHovered) && 'opacity-[0.7]'}`}
+            className={`relative flex h-full max-w-[200px] cursor-pointer flex-nowrap items-center border-r border-solid border-[--hl-sm] px-[10px] outline-none hover:text-[--color-font] ${!isSelected && !isHovered && 'opacity-[0.7]'}`}
           >
             {renderTabIcon(tab.type)}
             <span
-              className={classNames('mx-[8px] text-nowrap overflow-hidden text-ellipsis', {
-                'italic': tab.temporary,
+              className={classNames('mx-[8px] overflow-hidden text-ellipsis text-nowrap', {
+                italic: tab.temporary,
               })}
-            >{tab.name}</span>
+            >
+              {tab.name}
+            </span>
             <Button
               aria-label="Close Tab"
               data-testid="tab-close-button"
-              className='hover:bg-[--hl-md] h-[15px] w-[15px] flex justify-center items-center'
+              className="flex h-[15px] w-[15px] items-center justify-center hover:bg-[--hl-md]"
               onPress={() => handleClose(tab.id)}
             >
               <Icon icon="close" />
             </Button>
-            <span className={`block absolute bottom-[0px] left-0 right-0 h-[1px] bg-[--color-bg] ${isSelected ? 'opacity-100' : 'opacity-0'}`} />
-            <span className={`block absolute bottom-[0px] left-0 right-0 h-[1px] bg-[--hl-sm] ${!isSelected ? 'opacity-100' : 'opacity-0'}`} />
+            <span
+              className={`absolute bottom-[0px] left-0 right-0 block h-[1px] bg-[--color-bg] ${isSelected ? 'opacity-100' : 'opacity-0'}`}
+            />
+            <span
+              className={`absolute bottom-[0px] left-0 right-0 block h-[1px] bg-[--hl-sm] ${!isSelected ? 'opacity-100' : 'opacity-0'}`}
+            />
           </div>
           <Button slot="drag" className="hidden" />
         </Tooltip>
diff --git a/packages/insomnia/src/ui/components/tags/method-tag.tsx b/packages/insomnia/src/ui/components/tags/method-tag.tsx
index 51983a8f20..e559cf1de1 100644
--- a/packages/insomnia/src/ui/components/tags/method-tag.tsx
+++ b/packages/insomnia/src/ui/components/tags/method-tag.tsx
@@ -75,9 +75,7 @@ export const MethodTag: FC<Props> = memo(({ method, override, fullNames }) => {
           <span>{methodName}</span>
         </div>
       )}
-      <div
-        className={'tag tag--no-bg tag--small http-method-' + (overrideName ? override : method)}
-      >
+      <div className={'tag tag--no-bg tag--small http-method-' + (overrideName ? override : method)}>
         <span className="tag__inner">{overrideName || methodName}</span>
       </div>
     </div>
diff --git a/packages/insomnia/src/ui/components/tags/size-tag.tsx b/packages/insomnia/src/ui/components/tags/size-tag.tsx
index e04e705589..d0c529ffed 100644
--- a/packages/insomnia/src/ui/components/tags/size-tag.tsx
+++ b/packages/insomnia/src/ui/components/tags/size-tag.tsx
@@ -20,13 +20,13 @@ export const SizeTag: FC<Props> = memo(({ bytesRead, bytesContent, small, classN
     <table>
       <tbody>
         <tr>
-          <td className="text-left pad-right">Read</td>
-          <td className="text-right selectable no-wrap">{responseSizeReadString}</td>
+          <td className="pad-right text-left">Read</td>
+          <td className="selectable no-wrap text-right">{responseSizeReadString}</td>
         </tr>
         {bytesContent >= 0 && (
           <tr>
-            <td className="text-left pad-right">Content</td>
-            <td className="text-right selectable no-wrap">{responseSizeRawString}</td>
+            <td className="pad-right text-left">Content</td>
+            <td className="selectable no-wrap text-right">{responseSizeRawString}</td>
           </tr>
         )}
       </tbody>
diff --git a/packages/insomnia/src/ui/components/tags/status-tag.tsx b/packages/insomnia/src/ui/components/tags/status-tag.tsx
index 6f19dbddb7..3d5172ae09 100644
--- a/packages/insomnia/src/ui/components/tags/status-tag.tsx
+++ b/packages/insomnia/src/ui/components/tags/status-tag.tsx
@@ -15,14 +15,15 @@ export const StatusTag: FC<Props> = memo(({ statusMessage, statusCode, small, to
   let statusCodeToDisplay: string | number = statusCode;
   const firstChar = (statusCode + '')[0] || '';
 
-  const colorClass = {
-    '1': 'bg-info',
-    '2': 'bg-success',
-    '3': 'bg-surprise',
-    '4': 'bg-warning',
-    '5': 'bg-danger',
-    '0': 'bg-danger',
-  }[firstChar] || 'bg-surprise';
+  const colorClass =
+    {
+      '1': 'bg-info',
+      '2': 'bg-success',
+      '3': 'bg-surprise',
+      '4': 'bg-warning',
+      '5': 'bg-danger',
+      '0': 'bg-danger',
+    }[firstChar] || 'bg-surprise';
 
   if (firstChar === '0') {
     statusCodeToDisplay = '';
@@ -35,13 +36,9 @@ export const StatusTag: FC<Props> = memo(({ statusMessage, statusCode, small, to
     statusMessageToShow = RESPONSE_CODE_REASONS[statusCode] || statusMessage;
   }
   return (
-    <div
-      className={classnames('tag', colorClass, { 'tag--small': small })}
-      data-testid="response-status-tag"
-    >
+    <div className={classnames('tag', colorClass, { 'tag--small': small })} data-testid="response-status-tag">
       <Tooltip message={description} position="bottom" delay={tooltipDelay}>
-        <strong>{statusCodeToDisplay}</strong>{' '}
-        {statusMessageToShow}
+        <strong>{statusCodeToDisplay}</strong> {statusMessageToShow}
       </Tooltip>
     </div>
   );
diff --git a/packages/insomnia/src/ui/components/tags/time-tag.tsx b/packages/insomnia/src/ui/components/tags/time-tag.tsx
index c8f0937ad2..f548cd1a66 100644
--- a/packages/insomnia/src/ui/components/tags/time-tag.tsx
+++ b/packages/insomnia/src/ui/components/tags/time-tag.tsx
@@ -52,17 +52,24 @@ export const TimeTag: FC<Props> = memo(({ milliseconds, small, className, toolti
       )}
     >
       <Tooltip
-        message={(
+        message={
           <div>
-            {timesandunits?.map(step =>
-            (<div key={step.stepName} className='flex justify-between'>
-              <div className='mr-5'>{step.stepName} </div><div>{step.number} {step.unit}</div>
-            </div>)
-            )}
-            <div key="total" className='flex justify-between'>
-              <div className='mr-5'>Total </div><div>{number} {unit}</div>
+            {timesandunits?.map(step => (
+              <div key={step.stepName} className="flex justify-between">
+                <div className="mr-5">{step.stepName} </div>
+                <div>
+                  {step.number} {step.unit}
+                </div>
+              </div>
+            ))}
+            <div key="total" className="flex justify-between">
+              <div className="mr-5">Total </div>
+              <div>
+                {number} {unit}
+              </div>
             </div>
-          </div>)}
+          </div>
+        }
         position="bottom"
         delay={tooltipDelay}
       >
diff --git a/packages/insomnia/src/ui/components/tags/url-tag.tsx b/packages/insomnia/src/ui/components/tags/url-tag.tsx
index d182fe51ed..073ac21b8d 100644
--- a/packages/insomnia/src/ui/components/tags/url-tag.tsx
+++ b/packages/insomnia/src/ui/components/tags/url-tag.tsx
@@ -12,14 +12,7 @@ interface Props {
   tooltipDelay?: number;
 }
 
-export const URLTag: FC<Props> = memo(({
-  url,
-  small,
-  className,
-  maxLength,
-  method,
-  tooltipDelay,
-}) => {
+export const URLTag: FC<Props> = memo(({ url, small, className, maxLength, method, tooltipDelay }) => {
   const max = maxLength || 30;
   let shortUrl = url;
 
diff --git a/packages/insomnia/src/ui/components/tags/websocket-tag.tsx b/packages/insomnia/src/ui/components/tags/websocket-tag.tsx
index a465cc9cf0..a81f066738 100644
--- a/packages/insomnia/src/ui/components/tags/websocket-tag.tsx
+++ b/packages/insomnia/src/ui/components/tags/websocket-tag.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 
 export const WebSocketTag = () => (
   <div className="tag tag--no-bg tag--small">
-    <span className="tag__inner" style={{ color: 'var(--color-notice)' }}>WS</span>
+    <span className="tag__inner" style={{ color: 'var(--color-notice)' }}>
+      WS
+    </span>
   </div>
 );
diff --git a/packages/insomnia/src/ui/components/templating/__tests__/local-template-tags.test.ts b/packages/insomnia/src/ui/components/templating/__tests__/local-template-tags.test.ts
index 2253822bfa..1662dfd9ec 100644
--- a/packages/insomnia/src/ui/components/templating/__tests__/local-template-tags.test.ts
+++ b/packages/insomnia/src/ui/components/templating/__tests__/local-template-tags.test.ts
@@ -22,5 +22,4 @@ describe('base64 tag', () => {
       expect(() => base64EncoderTag.run({} as PluginTemplateTagContext, 'encode', 'klingon', 'hello')).toThrowError();
     });
   });
-
 });
diff --git a/packages/insomnia/src/ui/components/templating/faker-functions.ts b/packages/insomnia/src/ui/components/templating/faker-functions.ts
index f1d31e4b8b..b6ce210837 100644
--- a/packages/insomnia/src/ui/components/templating/faker-functions.ts
+++ b/packages/insomnia/src/ui/components/templating/faker-functions.ts
@@ -1,122 +1,122 @@
 import { faker } from '@faker-js/faker';
 
 export const fakerFunctions = {
-  'guid': () => faker.string.uuid(),
-  'timestamp': () => faker.date.anytime().getTime().toString(),
-  'isoTimestamp': () => faker.date.anytime().toISOString(),
-  'randomUUID': () => faker.string.uuid(),
-  'randomAlphaNumeric': () => faker.string.alphanumeric(),
-  'randomBoolean': () => faker.datatype.boolean(),
-  'randomInt': () => faker.number.int(),
-  'randomColor': () => faker.color.human(),
-  'randomHexColor': () => faker.internet.color(),
-  'randomAbbreviation': () => faker.hacker.abbreviation(),
-  'randomIP': () => faker.internet.ip(),
-  'randomIPV6': () => faker.internet.ipv6(),
-  'randomMACAddress': () => faker.internet.mac(),
-  'randomPassword': () => faker.internet.password(),
-  'randomLocale': () => faker.location.countryCode(),
-  'randomUserAgent': () => faker.internet.userAgent(),
-  'randomProtocol': () => faker.internet.protocol(),
-  'randomSemver': () => faker.system.semver(),
-  'randomFirstName': () => faker.person.firstName(),
-  'randomLastName': () => faker.person.lastName(),
-  'randomFullName': () => faker.person.fullName(),
-  'randomNamePrefix': () => faker.person.prefix(),
-  'randomNameSuffix': () => faker.person.suffix(),
-  'randomJobArea': () => faker.person.jobArea(),
-  'randomJobDescriptor': () => faker.person.jobDescriptor(),
-  'randomJobTitle': () => faker.person.jobTitle(),
-  'randomJobType': () => faker.person.jobType(),
-  'randomPhoneNumber': () => faker.phone.number(),
-  'randomPhoneNumberExt': () => faker.phone.number(),
-  'randomCity': () => faker.location.city(),
-  'randomStreetName': () => faker.location.street(),
-  'randomStreetAddress': () => faker.location.streetAddress(),
-  'randomCountry': () => faker.location.country(),
-  'randomCountryCode': () => faker.location.countryCode(),
-  'randomLatitude': () => faker.location.latitude(),
-  'randomLongitude': () => faker.location.longitude(),
-  'randomAvatarImage': () => faker.image.avatar(),
-  'randomImageUrl': () => faker.image.url(),
-  'randomAbstractImage': () => faker.image.urlLoremFlickr({ category: 'abstract' }),
-  'randomAnimalsImage': () => faker.image.urlLoremFlickr({ category: 'animals' }),
-  'randomBusinessImage': () => faker.image.urlLoremFlickr({ category: 'business' }),
-  'randomCatsImage': () => faker.image.urlLoremFlickr({ category: 'cats' }),
-  'randomCityImage': () => faker.image.urlLoremFlickr({ category: 'city' }),
-  'randomFoodImage': () => faker.image.urlLoremFlickr({ category: 'food' }),
-  'randomNightlifeImage': () => faker.image.urlLoremFlickr({ category: 'nightlife' }),
-  'randomFashionImage': () => faker.image.urlLoremFlickr({ category: 'fashion' }),
-  'randomPeopleImage': () => faker.image.urlLoremFlickr({ category: 'people' }),
-  'randomNatureImage': () => faker.image.urlLoremFlickr({ category: 'nature' }),
-  'randomSportsImage': () => faker.image.urlLoremFlickr({ category: 'sports' }),
-  'randomTransportImage': () => faker.image.urlLoremFlickr({ category: 'transport' }),
-  'randomImageDataUri': () => faker.image.dataUri(),
-  'randomBankAccount': () => faker.finance.accountNumber(),
-  'randomBankAccountName': () => faker.finance.accountName(),
-  'randomCreditCardMask': () => faker.finance.maskedNumber(),
-  'randomBankAccountBic': () => faker.finance.bic(),
-  'randomBankAccountIban': () => faker.finance.iban(),
-  'randomTransactionType': () => faker.finance.transactionType(),
-  'randomCurrencyCode': () => faker.finance.currencyCode(),
-  'randomCurrencyName': () => faker.finance.currencyName(),
-  'randomCurrencySymbol': () => faker.finance.currencySymbol(),
-  'randomBitcoin': () => faker.finance.bitcoinAddress(),
-  'randomCompanyName': () => faker.company.name(),
-  'randomCompanySuffix': () => faker.company.name(),
-  'randomBs': () => faker.company.buzzPhrase(),
-  'randomBsAdjective': () => faker.company.buzzAdjective(),
-  'randomBsBuzz': () => faker.company.buzzVerb(),
-  'randomBsNoun': () => faker.company.buzzNoun(),
-  'randomCatchPhrase': () => faker.company.catchPhrase(),
-  'randomCatchPhraseAdjective': () => faker.company.catchPhraseAdjective(),
-  'randomCatchPhraseDescriptor': () => faker.company.catchPhraseDescriptor(),
-  'randomCatchPhraseNoun': () => faker.company.catchPhraseNoun(),
-  'randomDatabaseColumn': () => faker.database.column(),
-  'randomDatabaseType': () => faker.database.type(),
-  'randomDatabaseCollation': () => faker.database.collation(),
-  'randomDatabaseEngine': () => faker.database.engine(),
-  'randomDateFuture': () => faker.date.future().toISOString(),
-  'randomDatePast': () => faker.date.past().toISOString(),
-  'randomDateRecent': () => faker.date.recent().toISOString(),
-  'randomWeekday': () => faker.date.weekday(),
-  'randomMonth': () => faker.date.month(),
-  'randomDomainName': () => faker.internet.domainName(),
-  'randomDomainSuffix': () => faker.internet.domainSuffix(),
-  'randomDomainWord': () => faker.internet.domainWord(),
-  'randomEmail': () => faker.internet.email(),
-  'randomExampleEmail': () => faker.internet.exampleEmail(),
-  'randomUserName': () => faker.internet.userName(),
-  'randomUrl': () => faker.internet.url(),
-  'randomFileName': () => faker.system.fileName(),
-  'randomFileType': () => faker.system.fileType(),
-  'randomFileExt': () => faker.system.fileExt(),
-  'randomCommonFileName': () => faker.system.commonFileName(),
-  'randomCommonFileType': () => faker.system.commonFileType(),
-  'randomCommonFileExt': () => faker.system.commonFileExt(),
-  'randomFilePath': () => faker.system.filePath(),
-  'randomDirectoryPath': () => faker.system.directoryPath(),
-  'randomMimeType': () => faker.system.mimeType(),
-  'randomPrice': () => faker.commerce.price(),
-  'randomProduct': () => faker.commerce.product(),
-  'randomProductAdjective': () => faker.commerce.productAdjective(),
-  'randomProductMaterial': () => faker.commerce.productMaterial(),
-  'randomProductName': () => faker.commerce.productName(),
-  'randomDepartment': () => faker.commerce.department(),
-  'randomNoun': () => faker.hacker.noun(),
-  'randomVerb': () => faker.hacker.verb(),
-  'randomIngverb': () => faker.hacker.ingverb(),
-  'randomAdjective': () => faker.hacker.adjective(),
-  'randomWord': () => faker.hacker.noun(),
-  'randomWords': () => faker.lorem.words(),
-  'randomPhrase': () => faker.hacker.phrase(),
-  'randomLoremWord': () => faker.lorem.word(),
-  'randomLoremWords': () => faker.lorem.words(),
-  'randomLoremSentence': () => faker.lorem.sentence(),
-  'randomLoremSentences': () => faker.lorem.sentences(),
-  'randomLoremParagraph': () => faker.lorem.paragraph(),
-  'randomLoremParagraphs': () => faker.lorem.paragraphs(),
-  'randomLoremText': () => faker.lorem.text(),
-  'randomLoremSlug': () => faker.lorem.slug(),
-  'randomLoremLines': () => faker.lorem.lines(),
+  guid: () => faker.string.uuid(),
+  timestamp: () => faker.date.anytime().getTime().toString(),
+  isoTimestamp: () => faker.date.anytime().toISOString(),
+  randomUUID: () => faker.string.uuid(),
+  randomAlphaNumeric: () => faker.string.alphanumeric(),
+  randomBoolean: () => faker.datatype.boolean(),
+  randomInt: () => faker.number.int(),
+  randomColor: () => faker.color.human(),
+  randomHexColor: () => faker.internet.color(),
+  randomAbbreviation: () => faker.hacker.abbreviation(),
+  randomIP: () => faker.internet.ip(),
+  randomIPV6: () => faker.internet.ipv6(),
+  randomMACAddress: () => faker.internet.mac(),
+  randomPassword: () => faker.internet.password(),
+  randomLocale: () => faker.location.countryCode(),
+  randomUserAgent: () => faker.internet.userAgent(),
+  randomProtocol: () => faker.internet.protocol(),
+  randomSemver: () => faker.system.semver(),
+  randomFirstName: () => faker.person.firstName(),
+  randomLastName: () => faker.person.lastName(),
+  randomFullName: () => faker.person.fullName(),
+  randomNamePrefix: () => faker.person.prefix(),
+  randomNameSuffix: () => faker.person.suffix(),
+  randomJobArea: () => faker.person.jobArea(),
+  randomJobDescriptor: () => faker.person.jobDescriptor(),
+  randomJobTitle: () => faker.person.jobTitle(),
+  randomJobType: () => faker.person.jobType(),
+  randomPhoneNumber: () => faker.phone.number(),
+  randomPhoneNumberExt: () => faker.phone.number(),
+  randomCity: () => faker.location.city(),
+  randomStreetName: () => faker.location.street(),
+  randomStreetAddress: () => faker.location.streetAddress(),
+  randomCountry: () => faker.location.country(),
+  randomCountryCode: () => faker.location.countryCode(),
+  randomLatitude: () => faker.location.latitude(),
+  randomLongitude: () => faker.location.longitude(),
+  randomAvatarImage: () => faker.image.avatar(),
+  randomImageUrl: () => faker.image.url(),
+  randomAbstractImage: () => faker.image.urlLoremFlickr({ category: 'abstract' }),
+  randomAnimalsImage: () => faker.image.urlLoremFlickr({ category: 'animals' }),
+  randomBusinessImage: () => faker.image.urlLoremFlickr({ category: 'business' }),
+  randomCatsImage: () => faker.image.urlLoremFlickr({ category: 'cats' }),
+  randomCityImage: () => faker.image.urlLoremFlickr({ category: 'city' }),
+  randomFoodImage: () => faker.image.urlLoremFlickr({ category: 'food' }),
+  randomNightlifeImage: () => faker.image.urlLoremFlickr({ category: 'nightlife' }),
+  randomFashionImage: () => faker.image.urlLoremFlickr({ category: 'fashion' }),
+  randomPeopleImage: () => faker.image.urlLoremFlickr({ category: 'people' }),
+  randomNatureImage: () => faker.image.urlLoremFlickr({ category: 'nature' }),
+  randomSportsImage: () => faker.image.urlLoremFlickr({ category: 'sports' }),
+  randomTransportImage: () => faker.image.urlLoremFlickr({ category: 'transport' }),
+  randomImageDataUri: () => faker.image.dataUri(),
+  randomBankAccount: () => faker.finance.accountNumber(),
+  randomBankAccountName: () => faker.finance.accountName(),
+  randomCreditCardMask: () => faker.finance.maskedNumber(),
+  randomBankAccountBic: () => faker.finance.bic(),
+  randomBankAccountIban: () => faker.finance.iban(),
+  randomTransactionType: () => faker.finance.transactionType(),
+  randomCurrencyCode: () => faker.finance.currencyCode(),
+  randomCurrencyName: () => faker.finance.currencyName(),
+  randomCurrencySymbol: () => faker.finance.currencySymbol(),
+  randomBitcoin: () => faker.finance.bitcoinAddress(),
+  randomCompanyName: () => faker.company.name(),
+  randomCompanySuffix: () => faker.company.name(),
+  randomBs: () => faker.company.buzzPhrase(),
+  randomBsAdjective: () => faker.company.buzzAdjective(),
+  randomBsBuzz: () => faker.company.buzzVerb(),
+  randomBsNoun: () => faker.company.buzzNoun(),
+  randomCatchPhrase: () => faker.company.catchPhrase(),
+  randomCatchPhraseAdjective: () => faker.company.catchPhraseAdjective(),
+  randomCatchPhraseDescriptor: () => faker.company.catchPhraseDescriptor(),
+  randomCatchPhraseNoun: () => faker.company.catchPhraseNoun(),
+  randomDatabaseColumn: () => faker.database.column(),
+  randomDatabaseType: () => faker.database.type(),
+  randomDatabaseCollation: () => faker.database.collation(),
+  randomDatabaseEngine: () => faker.database.engine(),
+  randomDateFuture: () => faker.date.future().toISOString(),
+  randomDatePast: () => faker.date.past().toISOString(),
+  randomDateRecent: () => faker.date.recent().toISOString(),
+  randomWeekday: () => faker.date.weekday(),
+  randomMonth: () => faker.date.month(),
+  randomDomainName: () => faker.internet.domainName(),
+  randomDomainSuffix: () => faker.internet.domainSuffix(),
+  randomDomainWord: () => faker.internet.domainWord(),
+  randomEmail: () => faker.internet.email(),
+  randomExampleEmail: () => faker.internet.exampleEmail(),
+  randomUserName: () => faker.internet.userName(),
+  randomUrl: () => faker.internet.url(),
+  randomFileName: () => faker.system.fileName(),
+  randomFileType: () => faker.system.fileType(),
+  randomFileExt: () => faker.system.fileExt(),
+  randomCommonFileName: () => faker.system.commonFileName(),
+  randomCommonFileType: () => faker.system.commonFileType(),
+  randomCommonFileExt: () => faker.system.commonFileExt(),
+  randomFilePath: () => faker.system.filePath(),
+  randomDirectoryPath: () => faker.system.directoryPath(),
+  randomMimeType: () => faker.system.mimeType(),
+  randomPrice: () => faker.commerce.price(),
+  randomProduct: () => faker.commerce.product(),
+  randomProductAdjective: () => faker.commerce.productAdjective(),
+  randomProductMaterial: () => faker.commerce.productMaterial(),
+  randomProductName: () => faker.commerce.productName(),
+  randomDepartment: () => faker.commerce.department(),
+  randomNoun: () => faker.hacker.noun(),
+  randomVerb: () => faker.hacker.verb(),
+  randomIngverb: () => faker.hacker.ingverb(),
+  randomAdjective: () => faker.hacker.adjective(),
+  randomWord: () => faker.hacker.noun(),
+  randomWords: () => faker.lorem.words(),
+  randomPhrase: () => faker.hacker.phrase(),
+  randomLoremWord: () => faker.lorem.word(),
+  randomLoremWords: () => faker.lorem.words(),
+  randomLoremSentence: () => faker.lorem.sentence(),
+  randomLoremSentences: () => faker.lorem.sentences(),
+  randomLoremParagraph: () => faker.lorem.paragraph(),
+  randomLoremParagraphs: () => faker.lorem.paragraphs(),
+  randomLoremText: () => faker.lorem.text(),
+  randomLoremSlug: () => faker.lorem.slug(),
+  randomLoremLines: () => faker.lorem.lines(),
 };
diff --git a/packages/insomnia/src/ui/components/templating/local-template-tags.ts b/packages/insomnia/src/ui/components/templating/local-template-tags.ts
index c7b9bc7bcc..11ac53f24f 100644
--- a/packages/insomnia/src/ui/components/templating/local-template-tags.ts
+++ b/packages/insomnia/src/ui/components/templating/local-template-tags.ts
@@ -198,14 +198,13 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           try {
             const results = JSONPath({ json: value, path: filter });
             value = Array.isArray(results) ? results[0] : results;
-          } catch (err) { }
+          } catch (err) {}
         }
 
         if (typeof value !== 'string') {
           return JSON.stringify(value);
         }
-          return value;
-
+        return value;
       },
     },
   },
@@ -376,9 +375,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
             const cookie = cookies.find(cookie => cookie.key === name);
             if (!cookie) {
               const names = cookies.map(c => `"${c.key}"`).join(',\n\t');
-              throw new Error(
-                `No cookie with name "${name}".\nChoices are [\n\t${names}\n] for url "${url}"`,
-              );
+              throw new Error(`No cookie with name "${name}".\nChoices are [\n\t${names}\n] for url "${url}"`);
             } else {
               resolve(cookie ? cookie.value : null);
             }
@@ -454,10 +451,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
         // We do this because we may render the prompt multiple times per request.
         // We cache it under the requestId so it only prompts once. We then clear
         // the cache in a response hook when the request is sent.
-        const titleHash = crypto
-          .createHash('md5')
-          .update(title)
-          .digest('hex');
+        const titleHash = crypto.createHash('md5').update(title).digest('hex');
         const storageKey = explicitStorageKey || `${context.meta.requestId}.${titleHash}`;
         const cachedValue = await context.store.getItem(storageKey);
 
@@ -478,8 +472,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           if (cachedValue !== null) {
             return cachedValue;
           }
-            return defaultValue || '';
-
+          return defaultValue || '';
         }
 
         const value = await context.app.prompt(title || 'Enter Value', {
@@ -617,14 +610,18 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
               shouldResend = true;
             } else {
               // if either global environment or collection environment changed, resend the request
-              shouldResend = response.environmentId !== environmentId || response.globalEnvironmentId !== globalEnvironmentId;
+              shouldResend =
+                response.environmentId !== environmentId || response.globalEnvironmentId !== globalEnvironmentId;
             }
             break;
 
           case 'when-expired':
             if (!response) {
               shouldResend = true;
-            } else if (response.environmentId !== environmentId || response.globalEnvironmentId !== globalEnvironmentId) {
+            } else if (
+              response.environmentId !== environmentId ||
+              response.globalEnvironmentId !== globalEnvironmentId
+            ) {
               // if either global environment or collection environment changed, resend the request
               shouldResend = true;
             } else {
@@ -641,7 +638,6 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           default:
             shouldResend = false;
             break;
-
         }
 
         // Make sure we only send the request once per render so we don't have infinite recursion
@@ -672,7 +668,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           throw new Error('No successful responses for request');
         }
 
-        if ((field !== 'raw' && field !== 'url') && !filter) {
+        if (field !== 'raw' && field !== 'url' && !filter) {
           throw new Error(`No ${field} filter specified`);
         }
 
@@ -750,53 +746,54 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
             if (typeof results[0] !== 'string') {
               return JSON.stringify(results[0]);
             }
-              return results[0];
-
+            return results[0];
           }
-            const DOMParser = (await import('@xmldom/xmldom')).DOMParser;
-            const dom = new DOMParser().parseFromString(body);
-            if (sanitizedFilter === undefined) {
-              throw new Error('Must pass an XPath query.');
-            }
-            try {
-              const selectedValues = (await import('xpath')).select(sanitizedFilter, dom);
+          const DOMParser = (await import('@xmldom/xmldom')).DOMParser;
+          const dom = new DOMParser().parseFromString(body);
+          if (sanitizedFilter === undefined) {
+            throw new Error('Must pass an XPath query.');
+          }
+          try {
+            const selectedValues = (await import('xpath')).select(sanitizedFilter, dom);
 
-              let results: { outer: string; inner: string | null }[] = [];
+            let results: { outer: string; inner: string | null }[] = [];
 
-              // Functions return plain strings
-              if (typeof selectedValues === 'string') {
-                results = [{ outer: selectedValues, inner: selectedValues }];
-              }
-
-              results = (selectedValues as Node[])
-                .filter(sv => sv.nodeType === Node.ATTRIBUTE_NODE
-                  || sv.nodeType === Node.ELEMENT_NODE
-                  || sv.nodeType === Node.TEXT_NODE)
-                .map(selectedValue => {
-                  const outer = selectedValue.toString().trim();
-                  if (selectedValue.nodeType === Node.ATTRIBUTE_NODE) {
-                    return { outer, inner: selectedValue.nodeValue };
-                  }
-                  if (selectedValue.nodeType === Node.ELEMENT_NODE) {
-                    return { outer, inner: selectedValue.childNodes.toString() };
-                  }
-                  if (selectedValue.nodeType === Node.TEXT_NODE) {
-                    return { outer, inner: selectedValue.toString().trim() };
-                  }
-                  return { outer, inner: null };
-                });
-
-              if (results.length === 0) {
-                throw new Error(`Returned no results: ${sanitizedFilter}`);
-              } else if (results.length > 1) {
-                throw new Error(`Returned more than one result: ${sanitizedFilter}`);
-              }
-
-              return results[0].inner;
-            } catch (err) {
-              throw new Error(`Invalid XPath query: ${sanitizedFilter}`);
+            // Functions return plain strings
+            if (typeof selectedValues === 'string') {
+              results = [{ outer: selectedValues, inner: selectedValues }];
             }
 
+            results = (selectedValues as Node[])
+              .filter(
+                sv =>
+                  sv.nodeType === Node.ATTRIBUTE_NODE ||
+                  sv.nodeType === Node.ELEMENT_NODE ||
+                  sv.nodeType === Node.TEXT_NODE,
+              )
+              .map(selectedValue => {
+                const outer = selectedValue.toString().trim();
+                if (selectedValue.nodeType === Node.ATTRIBUTE_NODE) {
+                  return { outer, inner: selectedValue.nodeValue };
+                }
+                if (selectedValue.nodeType === Node.ELEMENT_NODE) {
+                  return { outer, inner: selectedValue.childNodes.toString() };
+                }
+                if (selectedValue.nodeType === Node.TEXT_NODE) {
+                  return { outer, inner: selectedValue.toString().trim() };
+                }
+                return { outer, inner: null };
+              });
+
+            if (results.length === 0) {
+              throw new Error(`Returned no results: ${sanitizedFilter}`);
+            } else if (results.length > 1) {
+              throw new Error(`Returned more than one result: ${sanitizedFilter}`);
+            }
+
+            return results[0].inner;
+          } catch (err) {
+            throw new Error(`Invalid XPath query: ${sanitizedFilter}`);
+          }
         }
         throw new Error('Oops');
       },
@@ -863,9 +860,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
         {
           type: 'string',
           hide: args =>
-            ['url', 'oauth2', 'oauth2-identity', 'oauth2-refresh', 'name', 'folder'].includes(
-              args[0].value + '',
-            ),
+            ['url', 'oauth2', 'oauth2-identity', 'oauth2-refresh', 'name', 'folder'].includes(args[0].value + ''),
           displayName: args => {
             switch (args[0].value) {
               case 'cookie':
@@ -908,12 +903,17 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
         if (attribute === 'url') {
           for (const p of request.parameters) {
             params.push({
-              name: await context.util.render(p.name) || '',
-              value: await context.util.render(p.value) || '',
+              name: (await context.util.render(p.name)) || '',
+              value: (await context.util.render(p.value)) || '',
             });
           }
           const rendered = await context.util.render(request.url);
-          return rendered ? smartEncodeUrl(joinUrlAndQueryString(rendered, buildQueryStringFromParams(params)), request.settingEncodeUrl) : '';
+          return rendered
+            ? smartEncodeUrl(
+                joinUrlAndQueryString(rendered, buildQueryStringFromParams(params)),
+                request.settingEncodeUrl,
+              )
+            : '';
         }
         if (attribute === 'cookie') {
           if (!name) {
@@ -923,12 +923,17 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           const cookieJar = await context.util.models.cookieJar.getOrCreateForWorkspace(workspace);
           for (const p of request.parameters) {
             params.push({
-              name: await context.util.render(p.name) || '',
-              value: await context.util.render(p.value) || '',
+              name: (await context.util.render(p.name)) || '',
+              value: (await context.util.render(p.value)) || '',
             });
           }
           const rendered = await context.util.render(request.url);
-          const url = rendered ? smartEncodeUrl(joinUrlAndQueryString(rendered, buildQueryStringFromParams(params)), request.settingEncodeUrl) : '';
+          const url = rendered
+            ? smartEncodeUrl(
+                joinUrlAndQueryString(rendered, buildQueryStringFromParams(params)),
+                request.settingEncodeUrl,
+              )
+            : '';
           return new Promise((resolve, reject) => {
             let jar;
             try {
@@ -955,9 +960,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
               const cookie = cookies.find(cookie => cookie.key === name);
               if (!cookie) {
                 const names = cookies.map(c => `"${c.key}"`).join(',\n\t');
-                throw new Error(
-                  `No cookie with name "${name}".\nChoices are [\n\t${names}\n] for url "${url}"`,
-                );
+                throw new Error(`No cookie with name "${name}".\nChoices are [\n\t${names}\n] for url "${url}"`);
               } else {
                 resolve(cookie ? cookie.value : null);
               }
@@ -984,9 +987,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           }
 
           const parameterNamesStr = parameterNames.map(n => `"${n}"`).join(',\n\t');
-          throw new Error(
-            `No query parameter with name "${name}".\nChoices are [\n\t${parameterNamesStr}\n]`,
-          );
+          throw new Error(`No query parameter with name "${name}".\nChoices are [\n\t${parameterNamesStr}\n]`);
         }
         if (attribute === 'header') {
           if (!name) {
@@ -1032,10 +1033,7 @@ const localTemplatePlugins: { templateTag: PluginTemplateTag }[] = [
           const ancestors = await context.util.models.request.getAncestors(request);
           const doc = ancestors[folderIndex || 0];
           if (!doc) {
-            throw new Error(
-              `Could not get folder by index ${folderIndex}. Must be between 0-${ancestors.length -
-              1}`,
-            );
+            throw new Error(`Could not get folder by index ${folderIndex}. Must be between 0-${ancestors.length - 1}`);
           }
           return doc ? doc.name : null;
         }
diff --git a/packages/insomnia/src/ui/components/templating/tag-editor.tsx b/packages/insomnia/src/ui/components/templating/tag-editor.tsx
index 410a86c09a..66d01e96f8 100644
--- a/packages/insomnia/src/ui/components/templating/tag-editor.tsx
+++ b/packages/insomnia/src/ui/components/templating/tag-editor.tsx
@@ -85,8 +85,11 @@ export const TagEditor: FC<Props> = props => {
     for (const doc of await db.withDescendants(props.workspace, models.request.type)) {
       allDocs[doc.type].push(doc);
     }
-    // @ts-expect-error -- type unsoundness
-    allDocs[models.request.type] = sortRequests((allDocs[models.request.type] || []).concat(allDocs[models.requestGroup.type] || []), props.workspace._id);
+    allDocs[models.request.type] = sortRequests(
+      // @ts-expect-error -- type unsoundness
+      (allDocs[models.request.type] || []).concat(allDocs[models.requestGroup.type] || []),
+      props.workspace._id,
+    );
     setState(state => ({ ...state, allDocs, loadingDocs: false }));
   }, [props.workspace]);
 
@@ -105,10 +108,7 @@ export const TagEditor: FC<Props> = props => {
         arg.value = sanitizeStrForWin32(arg.value);
       }
     }
-    await Promise.all([
-      refreshModels(),
-      update(tagDefinitions, activeTagDefinition, activeTagData, true),
-    ]);
+    await Promise.all([refreshModels(), update(tagDefinitions, activeTagDefinition, activeTagData, true)]);
     const context = await handleGetRenderContext();
     const variables = context.keys;
     setState(state => ({ ...state, variables }));
@@ -138,10 +138,9 @@ export const TagEditor: FC<Props> = props => {
       argValue = sanitizeStrForWin32(argValue);
     }
     // Ensure all arguments exist
-    const defaultArgs = templateUtils.tokenizeTag(templateUtils.getDefaultFill(
-      activeTagDefinition.name,
-      activeTagDefinition.args,
-    )).args;
+    const defaultArgs = templateUtils.tokenizeTag(
+      templateUtils.getDefaultFill(activeTagDefinition.name, activeTagDefinition.args),
+    ).args;
     for (let i = 0; i < defaultArgs.length; i++) {
       if (activeTagData.args[i]) {
         continue;
@@ -185,7 +184,6 @@ export const TagEditor: FC<Props> = props => {
       return updateArg((event.currentTarget as HTMLInputElement).checked, argIndex);
     }
     return updateArg(event.currentTarget.value, argIndex);
-
   }
   async function update(
     tagDefinitions: NunjucksParsedTag[],
@@ -200,10 +198,7 @@ export const TagEditor: FC<Props> = props => {
     let activeTagData: NunjucksParsedTag | null = tagData;
 
     if (!activeTagData && tagDefinition) {
-      activeTagData = templateUtils.tokenizeTag(templateUtils.getDefaultFill(
-        tagDefinition.name,
-        tagDefinition.args,
-      ));
+      activeTagData = templateUtils.tokenizeTag(templateUtils.getDefaultFill(tagDefinition.name, tagDefinition.args));
     } else if (!activeTagData && !tagDefinition && state.activeTagData) {
       activeTagData = {
         name: 'custom',
@@ -281,11 +276,15 @@ export const TagEditor: FC<Props> = props => {
           </select>
         </label>
         {/* Warning message when user uses response tag in environment variable and suggest to user after-response script INS-4243 */}
-        {activeTagDefinition?.name === 'response' && props.editorId?.includes('environment') &&
-          <p className='text-sm warning mt-2'>
-            <Icon icon="exclamation-circle" /><a href={docsAfterResponseScript}> We suggest to save your response into an environment variable using after-response script.</a>
+        {activeTagDefinition?.name === 'response' && props.editorId?.includes('environment') && (
+          <p className="warning mt-2 text-sm">
+            <Icon icon="exclamation-circle" />
+            <a href={docsAfterResponseScript}>
+              {' '}
+              We suggest to save your response into an environment variable using after-response script.
+            </a>
           </p>
-        }
+        )}
       </div>
       {activeTagDefinition?.args.map((argDefinition: NunjucksParsedTagArg, index) => {
         // Decide whether or not to show it
@@ -296,10 +295,9 @@ export const TagEditor: FC<Props> = props => {
         if (index < activeTagData.args.length) {
           argData = activeTagData.args[index];
         } else if (state.activeTagDefinition) {
-          const defaultTagData = templateUtils.tokenizeTag(templateUtils.getDefaultFill(
-            state.activeTagDefinition.name,
-            state.activeTagDefinition.args,
-          ));
+          const defaultTagData = templateUtils.tokenizeTag(
+            templateUtils.getDefaultFill(state.activeTagDefinition.name, state.activeTagDefinition.args),
+          );
           argData = defaultTagData.args[index];
         } else {
           return null;
@@ -319,37 +317,44 @@ export const TagEditor: FC<Props> = props => {
         const isVariableAllowed = argDefinition.type !== 'model';
         if (!isVariable) {
           if (argDefinition.type === 'string') {
-            const placeholder =
-              typeof argDefinition.placeholder === 'string' ? argDefinition.placeholder : '';
+            const placeholder = typeof argDefinition.placeholder === 'string' ? argDefinition.placeholder : '';
             const encoding = argDefinition.encoding || 'utf8';
-            argInput = (<input
-              type="text"
-              defaultValue={sanitizeStrForWin32(strValue)}
-              placeholder={placeholder}
-              onChange={handleChange}
-              data-encoding={encoding}
-            />);
+            argInput = (
+              <input
+                type="text"
+                defaultValue={sanitizeStrForWin32(strValue)}
+                placeholder={placeholder}
+                onChange={handleChange}
+                data-encoding={encoding}
+              />
+            );
           } else if (argDefinition.type === 'enum') {
             argInput = (
               <select value={strValue} onChange={handleChange}>
-                {!argDefinition.options?.find(o => o.value === strValue) ? <option value="">-- Select Option --</option> : null}
+                {!argDefinition.options?.find(o => o.value === strValue) ? (
+                  <option value="">-- Select Option --</option>
+                ) : null}
                 {argDefinition.options?.map(option => (
                   <option key={option.value.toString()} value={option.value + ''}>
-                    {option.description ? `${fnOrString(option.displayName, state.activeTagData?.args || [])} – ${option.description}` : fnOrString(option.displayName, state.activeTagData?.args || [])}
+                    {option.description
+                      ? `${fnOrString(option.displayName, state.activeTagData?.args || [])} – ${option.description}`
+                      : fnOrString(option.displayName, state.activeTagData?.args || [])}
                   </option>
                 ))}
               </select>
             );
           } else if (argDefinition.type === 'file') {
-            argInput = (<FileInputButton
-              showFileIcon
-              showFileName
-              className="btn btn--clicky btn--super-compact"
-              onChange={path => updateArg(path, index)}
-              path={sanitizeStrForWin32(strValue)}
-              itemtypes={argDefinition.itemTypes}
-              extensions={argDefinition.extensions}
-            />);
+            argInput = (
+              <FileInputButton
+                showFileIcon
+                showFileName
+                className="btn btn--clicky btn--super-compact"
+                onChange={path => updateArg(path, index)}
+                path={sanitizeStrForWin32(strValue)}
+                itemtypes={argDefinition.itemTypes}
+                extensions={argDefinition.extensions}
+              />
+            );
           } else if (argDefinition.type === 'model') {
             argInput = state.loadingDocs ? (
               <select disabled={state.loadingDocs}>
@@ -358,37 +363,41 @@ export const TagEditor: FC<Props> = props => {
             ) : (
               <select value={typeof strValue === 'string' ? strValue : 'unknown'} onChange={handleChange}>
                 <option value="n/a">-- Select Item --</option>
-                {state.allDocs[typeof argDefinition.model === 'string' ? argDefinition.model : 'unknown']?.map((doc: any) => {
-                  let namePrefix: string | null = null;
-                  // Show parent folder with name if it's a request
-                  if (isRequest(doc)) {
-                    const requests = state.allDocs[models.request.type] || [];
-                    const request = requests.find(r => r._id === doc._id) as Request;
-                    const method = request && typeof request.method === 'string' ? request.method : 'GET';
-                    const parentId = request ? request.parentId : 'n/a';
-                    const allRequestGroups = state.allDocs[models.requestGroup.type] || [];
-                    const reqGroup = allRequestGroups.find(rg => rg._id === parentId) as RequestGroup | undefined;
-                    const folderName = reqGroup ? `[${typeof reqGroup.name === 'string' ? reqGroup.name : ''}] ` : ''
-                    namePrefix = `${folderName + method} `;
-                  }
-                  return (
-                    <option key={doc._id} value={doc._id}>
-                      {namePrefix}
-                      {typeof doc.name === 'string' ? doc.name : 'Unknown Request'}
-                    </option>
-                  );
-                })}
+                {state.allDocs[typeof argDefinition.model === 'string' ? argDefinition.model : 'unknown']?.map(
+                  (doc: any) => {
+                    let namePrefix: string | null = null;
+                    // Show parent folder with name if it's a request
+                    if (isRequest(doc)) {
+                      const requests = state.allDocs[models.request.type] || [];
+                      const request = requests.find(r => r._id === doc._id) as Request;
+                      const method = request && typeof request.method === 'string' ? request.method : 'GET';
+                      const parentId = request ? request.parentId : 'n/a';
+                      const allRequestGroups = state.allDocs[models.requestGroup.type] || [];
+                      const reqGroup = allRequestGroups.find(rg => rg._id === parentId) as RequestGroup | undefined;
+                      const folderName = reqGroup ? `[${typeof reqGroup.name === 'string' ? reqGroup.name : ''}] ` : '';
+                      namePrefix = `${folderName + method} `;
+                    }
+                    return (
+                      <option key={doc._id} value={doc._id}>
+                        {namePrefix}
+                        {typeof doc.name === 'string' ? doc.name : 'Unknown Request'}
+                      </option>
+                    );
+                  },
+                )}
               </select>
             );
           } else if (argDefinition.type === 'boolean') {
             argInput = <input type="checkbox" checked={strValue.toLowerCase() === 'true'} onChange={handleChange} />;
           } else if (argDefinition.type === 'number') {
-            argInput = (<input
-              type="number"
-              defaultValue={strValue || '0'}
-              placeholder={typeof argDefinition.placeholder === 'string' ? argDefinition.placeholder : ''}
-              onChange={handleChange}
-            />);
+            argInput = (
+              <input
+                type="number"
+                defaultValue={strValue || '0'}
+                placeholder={typeof argDefinition.placeholder === 'string' ? argDefinition.placeholder : ''}
+                onChange={handleChange}
+              />
+            );
           } else {
             return null;
           }
@@ -398,8 +407,7 @@ export const TagEditor: FC<Props> = props => {
             ? fnOrString(argDefinition.help, activeTagData.args)
             : '';
         const displayName =
-          typeof argDefinition.displayName === 'string' ||
-            typeof argDefinition.displayName === 'function'
+          typeof argDefinition.displayName === 'string' || typeof argDefinition.displayName === 'function'
             ? fnOrString(argDefinition.displayName, activeTagData.args)
             : '';
         let validationError = '';
@@ -421,22 +429,26 @@ export const TagEditor: FC<Props> = props => {
                 {isVariable && <span className="faded space-left">(Variable)</span>}
                 {help && <HelpTooltip className="space-left">{help}</HelpTooltip>}
                 {validationError && <span className="font-error space-left">{validationError}</span>}
-                {isVariable ? state.variables.length === 0 ? (
-                  <select disabled>
-                    <option>-- No Environment Variables Found --</option>
-                  </select>
-                ) : (
-                  <select value={strValue || ''} onChange={handleChange}>
-                    <option key="n/a" value="NO_VARIABLE">
-                      -- Select Variable --
-                    </option>
-                    {state.variables.map(v => (
-                      <option key={v.name} value={v.name}>
-                        {v.name}
+                {isVariable ? (
+                  state.variables.length === 0 ? (
+                    <select disabled>
+                      <option>-- No Environment Variables Found --</option>
+                    </select>
+                  ) : (
+                    <select value={strValue || ''} onChange={handleChange}>
+                      <option key="n/a" value="NO_VARIABLE">
+                        -- Select Variable --
                       </option>
-                    ))}
-                  </select>
-                ) : argInput}
+                      {state.variables.map(v => (
+                        <option key={v.name} value={v.name}>
+                          {v.name}
+                        </option>
+                      ))}
+                    </select>
+                  )
+                ) : (
+                  argInput
+                )}
               </label>
             </div>
             {isVariableAllowed ? (
@@ -446,18 +458,15 @@ export const TagEditor: FC<Props> = props => {
                 })}
               >
                 <Dropdown
-                  aria-label='Variable Dropdown'
+                  aria-label="Variable Dropdown"
                   triggerButton={
                     <Button className="btn btn--clicky">
                       <i className="fa fa-gear" />
                     </Button>
                   }
                 >
-                  <DropdownSection
-                    aria-label="Input Type Section"
-                    title="Input Type"
-                  >
-                    <DropdownItem aria-label='Static Value'>
+                  <DropdownSection aria-label="Input Type Section" title="Input Type">
+                    <DropdownItem aria-label="Static Value">
                       <ItemContent
                         icon={isVariable ? 'check' : ''}
                         label="Static Value"
@@ -477,7 +486,7 @@ export const TagEditor: FC<Props> = props => {
                         }}
                       />
                     </DropdownItem>
-                    <DropdownItem aria-label='Environment Variable'>
+                    <DropdownItem aria-label="Environment Variable">
                       <ItemContent
                         icon={isVariable ? '' : 'check'}
                         label="Environment Variable"
@@ -502,38 +511,34 @@ export const TagEditor: FC<Props> = props => {
             ) : null}
           </div>
         );
-      }
-      )}
+      })}
       {activeTagDefinition?.actions && activeTagDefinition?.actions?.length > 0 ? (
         <div className="form-row">
           <div className="form-control">
             <label>Actions</label>
-            <div className="form-row">{activeTagDefinition.actions.map(action => (
-              <button
-                key={action.name}
-                className="btn btn--clicky btn--largest"
-                type="button"
-                onClick={async () => {
-                  const pluginTemplateTags = await plugins.getTemplateTags();
-                  const templateTags = [...pluginTemplateTags, ...localTemplateTags] as plugins.TemplateTag[];
-                  const activeTemplateTag = templateTags.find(({ templateTag }) => {
-                    return templateTag.name === state.activeTagData?.name;
-                  });
-                  if (activeTemplateTag) {
-                    await action.run(pluginContexts.store.init(activeTemplateTag.plugin));
-                  }
-                  update(
-                    state.tagDefinitions,
-                    state.activeTagDefinition,
-                    state.activeTagData,
-                    true,
-                  );
-                }}
-              >
-                {action.icon ? <i className={action.icon} /> : undefined}
-                {action.name}
-              </button>
-            ))}</div>
+            <div className="form-row">
+              {activeTagDefinition.actions.map(action => (
+                <button
+                  key={action.name}
+                  className="btn btn--clicky btn--largest"
+                  type="button"
+                  onClick={async () => {
+                    const pluginTemplateTags = await plugins.getTemplateTags();
+                    const templateTags = [...pluginTemplateTags, ...localTemplateTags] as plugins.TemplateTag[];
+                    const activeTemplateTag = templateTags.find(({ templateTag }) => {
+                      return templateTag.name === state.activeTagData?.name;
+                    });
+                    if (activeTemplateTag) {
+                      await action.run(pluginContexts.store.init(activeTemplateTag.plugin));
+                    }
+                    update(state.tagDefinitions, state.activeTagDefinition, state.activeTagData, true);
+                  }}
+                >
+                  {action.icon ? <i className={action.icon} /> : undefined}
+                  {action.name}
+                </button>
+              ))}
+            </div>
           </div>
         </div>
       ) : null}
@@ -567,12 +572,7 @@ export const TagEditor: FC<Props> = props => {
               position: 'relative',
             }}
             className="txt-sm pull-right icon inline-block"
-            onClick={() => update(
-              state.tagDefinitions,
-              state.activeTagDefinition,
-              state.activeTagData,
-              true,
-            )}
+            onClick={() => update(state.tagDefinitions, state.activeTagDefinition, state.activeTagData, true)}
           >
             refresh{' '}
             <i
@@ -589,5 +589,4 @@ export const TagEditor: FC<Props> = props => {
       </div>
     </div>
   );
-
 };
diff --git a/packages/insomnia/src/ui/components/templating/variable-editor.tsx b/packages/insomnia/src/ui/components/templating/variable-editor.tsx
index 5b9e1bb306..418d271163 100644
--- a/packages/insomnia/src/ui/components/templating/variable-editor.tsx
+++ b/packages/insomnia/src/ui/components/templating/variable-editor.tsx
@@ -21,9 +21,14 @@ export const VariableEditor: FC<Props> = ({ onChange, defaultValue }) => {
   const [options, setOptions] = useState<{ name: string; value: any }[]>([]);
   const [preview, setPreview] = useState('');
   const [error, setError] = useState('');
-  const isVaultVariable = selected
-    && selected.replace('{{', '').replace('}}', '').trim().startsWith(`${NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME}.${vaultEnvironmentRuntimePath}`)
-    && preview === vaultEnvironmentMaskValue;
+  const isVaultVariable =
+    selected &&
+    selected
+      .replace('{{', '')
+      .replace('}}', '')
+      .trim()
+      .startsWith(`${NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME}.${vaultEnvironmentRuntimePath}`) &&
+    preview === vaultEnvironmentMaskValue;
 
   useEffect(() => {
     let isMounted = true;
@@ -80,7 +85,7 @@ export const VariableEditor: FC<Props> = ({ onChange, defaultValue }) => {
         </div>
       )}
       <div className="form-control form-control--outlined">
-        {isVaultVariable &&
+        {isVaultVariable && (
           <button
             type="button"
             style={{
@@ -88,14 +93,11 @@ export const VariableEditor: FC<Props> = ({ onChange, defaultValue }) => {
               position: 'relative',
             }}
             className="txt-sm pull-right icon inline-block"
-            onClick={() => setPurpose(prevPurpose => prevPurpose === '' ? 'preview' : '')}
+            onClick={() => setPurpose(prevPurpose => (prevPurpose === '' ? 'preview' : ''))}
           >
-            {purpose === '' ?
-              <i className="fa-regular fa-eye" /> :
-              <i className="fa-regular fa-eye-slash" />
-            }
+            {purpose === '' ? <i className="fa-regular fa-eye" /> : <i className="fa-regular fa-eye-slash" />}
           </button>
-        }
+        )}
         <label>
           Live Preview
           <textarea className={`${error ? 'danger' : ''}`} value={preview || error} readOnly />
diff --git a/packages/insomnia/src/ui/components/themed-button/async-button.tsx b/packages/insomnia/src/ui/components/themed-button/async-button.tsx
index a3b314a29d..8544f03912 100644
--- a/packages/insomnia/src/ui/components/themed-button/async-button.tsx
+++ b/packages/insomnia/src/ui/components/themed-button/async-button.tsx
@@ -18,33 +18,26 @@ export interface AsyncButtonProps<T> extends ButtonProps {
   loadingNode?: ReactNode;
 }
 
-export const AsyncButton = <T, >({
-  onClick,
-  disabled,
-  loadingNode,
-  children,
-  ...props
-}: AsyncButtonProps<T>) => {
+export const AsyncButton = <T,>({ onClick, disabled, loadingNode, children, ...props }: AsyncButtonProps<T>) => {
   const [loading, setLoading] = useState(false);
-  const asyncHandler = useCallback(async (event: MouseEvent<HTMLButtonElement>) => {
-    const result = onClick(event);
+  const asyncHandler = useCallback(
+    async (event: MouseEvent<HTMLButtonElement>) => {
+      const result = onClick(event);
 
-    if (isPromise(result)) {
-      try {
-        setLoading(true);
-        await result;
-      } finally {
-        setLoading(false);
+      if (isPromise(result)) {
+        try {
+          setLoading(true);
+          await result;
+        } finally {
+          setLoading(false);
+        }
       }
-    }
-  }, [onClick]);
+    },
+    [onClick],
+  );
 
   return (
-    <Button
-      {...props}
-      onClick={asyncHandler}
-      disabled={loading || disabled}
-    >
+    <Button {...props} onClick={asyncHandler} disabled={loading || disabled}>
       {(loading && loadingNode) || children}
     </Button>
   );
diff --git a/packages/insomnia/src/ui/components/time-from-now.tsx b/packages/insomnia/src/ui/components/time-from-now.tsx
index 6bea3e855f..9bbac98f64 100644
--- a/packages/insomnia/src/ui/components/time-from-now.tsx
+++ b/packages/insomnia/src/ui/components/time-from-now.tsx
@@ -9,13 +9,12 @@ interface Props {
   titleCase?: boolean;
   title?: (text: string) => string;
 }
-const toTitleCase = (value: string) => (
+const toTitleCase = (value: string) =>
   value
     .toLowerCase()
     .split(' ')
     .map(value => value.charAt(0).toUpperCase() + value.slice(1))
-    .join(' ')
-);
+    .join(' ');
 
 export function getTimeFromNow(timestamp: string | number | Date, titleCase: boolean): string {
   const date = new Date(timestamp);
@@ -36,28 +35,21 @@ export function getTimeFromNow(timestamp: string | number | Date, titleCase: boo
   return text;
 }
 
-function useTimeNowLabel(
-  timestamp: number | Date | string,
-  titleCase?: boolean,
-  intervalSeconds?: number
-): string {
+function useTimeNowLabel(timestamp: number | Date | string, titleCase?: boolean, intervalSeconds?: number): string {
   const [text, setText] = useState(getTimeFromNow(timestamp, Boolean(titleCase)));
 
-  useInterval(() => {
-    const newText = getTimeFromNow(timestamp, Boolean(titleCase));
-    setText(newText);
-  }, (intervalSeconds || 5) * 1000);
+  useInterval(
+    () => {
+      const newText = getTimeFromNow(timestamp, Boolean(titleCase));
+      setText(newText);
+    },
+    (intervalSeconds || 5) * 1000,
+  );
 
   return text;
 }
 
-export const TimeFromNow: FC<Props> = ({
-  className,
-  timestamp,
-  titleCase,
-  title,
-  intervalSeconds,
-}) => {
+export const TimeFromNow: FC<Props> = ({ className, timestamp, titleCase, title, intervalSeconds }) => {
   const text = useTimeNowLabel(timestamp, titleCase, intervalSeconds);
   return (
     <span title={title ? title(text) : new Date(timestamp).toLocaleString()} className={className}>
diff --git a/packages/insomnia/src/ui/components/toast.tsx b/packages/insomnia/src/ui/components/toast.tsx
index 02da671f0b..eb777b8005 100644
--- a/packages/insomnia/src/ui/components/toast.tsx
+++ b/packages/insomnia/src/ui/components/toast.tsx
@@ -2,13 +2,7 @@ import classnames from 'classnames';
 import type { IpcRendererEvent } from 'electron';
 import React, { type FC, useEffect, useState } from 'react';
 
-import {
-  getAppId,
-  getAppPlatform,
-  getAppVersion,
-  getProductName,
-  updatesSupported,
-} from '../../common/constants';
+import { getAppId, getAppPlatform, getAppVersion, getProductName, updatesSupported } from '../../common/constants';
 import * as models from '../../models/index';
 import { insomniaFetch } from '../../ui/insomniaFetch';
 import imgSrcCore from '../images/insomnia-logo.svg';
@@ -38,9 +32,9 @@ export const Toast: FC = () => {
     try {
       const storedKeys = window.localStorage.getItem(INSOMNIA_NOTIFICATIONS_SEEN);
       if (storedKeys) {
-        seenNotifications = JSON.parse(storedKeys) as SeenNotifications || {};
+        seenNotifications = (JSON.parse(storedKeys) as SeenNotifications) || {};
       }
-    } catch (e) { }
+    } catch (e) {}
     console.log(`[toast] Received notification ${notification.key}`);
     if (seenNotifications[notification.key]) {
       console.log(`[toast] Not showing notification ${notification.key} because has already been seen`);
@@ -61,11 +55,7 @@ export const Toast: FC = () => {
       return;
     }
     const stats = await models.stats.get();
-    const {
-      disableUpdateNotification,
-      updateAutomatically,
-      updateChannel,
-    } = await models.settings.get();
+    const { disableUpdateNotification, updateAutomatically, updateChannel } = await models.settings.get();
     let updatedNotification: ToastNotification | null = null;
     // Try fetching user notification
     try {
@@ -96,7 +86,9 @@ export const Toast: FC = () => {
   };
 
   useEffect(() => {
-    const unsubscribe = window.main.on('show-notification', (_: IpcRendererEvent, notification: ToastNotification) => handleNotification(notification));
+    const unsubscribe = window.main.on('show-notification', (_: IpcRendererEvent, notification: ToastNotification) =>
+      handleNotification(notification),
+    );
     return () => unsubscribe();
   }, []);
 
@@ -110,11 +102,9 @@ export const Toast: FC = () => {
       <div className="m-[var(--padding-xs)] mr-[var(--padding-sm)] flex items-center justify-center">
         <img className="max-w-[5rem]" src={imgSrcCore} alt={productName} />
       </div>
-      <div className="flex items-center justify-center flex-col px-[var(--padding-xs)] max-w-[20rem]">
-
+      <div className="flex max-w-[20rem] flex-col items-center justify-center px-[var(--padding-xs)]">
         <p>{notification?.message || 'Unknown'}</p>
-        <footer className="pt-[var(--padding-sm)] flex flex-row justify-between w-full">
-
+        <footer className="flex w-full flex-row justify-between pt-[var(--padding-sm)]">
           <button
             className="btn btn--super-super-compact btn--outlined"
             onClick={() => {
@@ -132,7 +122,7 @@ export const Toast: FC = () => {
             Dismiss
           </button>
           &nbsp;&nbsp;
-          {notification.url && notification.cta &&
+          {notification.url && notification.cta && (
             <Link
               button
               className="btn btn--super-super-compact btn--outlined no-wrap"
@@ -151,7 +141,7 @@ export const Toast: FC = () => {
             >
               {notification.cta}
             </Link>
-          }
+          )}
         </footer>
       </div>
     </div>
diff --git a/packages/insomnia/src/ui/components/tooltip.tsx b/packages/insomnia/src/ui/components/tooltip.tsx
index f7a0419472..7569c7391a 100644
--- a/packages/insomnia/src/ui/components/tooltip.tsx
+++ b/packages/insomnia/src/ui/components/tooltip.tsx
@@ -1,15 +1,6 @@
 import classnames from 'classnames';
-import React, {
-  type CSSProperties,
-  type ReactNode,
-} from 'react';
-import {
-  mergeProps,
-  OverlayContainer,
-  useOverlayPosition,
-  useTooltip,
-  useTooltipTrigger,
-} from 'react-aria';
+import React, { type CSSProperties, type ReactNode } from 'react';
+import { mergeProps, OverlayContainer, useOverlayPosition, useTooltip, useTooltipTrigger } from 'react-aria';
 import { useTooltipTriggerState } from 'react-stately';
 
 interface Props {
diff --git a/packages/insomnia/src/ui/components/trail-lines-animation.ts b/packages/insomnia/src/ui/components/trail-lines-animation.ts
index 14ce35f34b..e2e84780c8 100644
--- a/packages/insomnia/src/ui/components/trail-lines-animation.ts
+++ b/packages/insomnia/src/ui/components/trail-lines-animation.ts
@@ -46,7 +46,7 @@ gsap.registerEffect({
             rect.x.baseVal.value = x - rect?.width?.baseVal?.value;
           },
         },
-        '<'
+        '<',
       )
       .to(rect, { attr: { x: '100%' } }, '>');
   },
diff --git a/packages/insomnia/src/ui/components/trail-lines-container.tsx b/packages/insomnia/src/ui/components/trail-lines-container.tsx
index 4bcabf7161..dae08cb35e 100644
--- a/packages/insomnia/src/ui/components/trail-lines-container.tsx
+++ b/packages/insomnia/src/ui/components/trail-lines-container.tsx
@@ -56,14 +56,11 @@ export const TrailLinesContainer = ({ children }: PropsWithChildren) => {
   };
 
   return (
-    <div
-      ref={containerRef}
-      className='z-0 flex justify-center items-center m-0 auto w-full overflow-hidden'
-    >
+    <div ref={containerRef} className="auto z-0 m-0 flex w-full items-center justify-center overflow-hidden">
       <div>
         {dimensions && <TrailLines id="start" ref={startTailRef} width={dimensions.width} height={dimensions.height} />}
       </div>
-      <div className='flex w-min' ref={childrenContainerRef}>
+      <div className="flex w-min" ref={childrenContainerRef}>
         {children}
       </div>
       <div>
diff --git a/packages/insomnia/src/ui/components/trail-lines.tsx b/packages/insomnia/src/ui/components/trail-lines.tsx
index e5cb0e30e5..00f27fd5a4 100644
--- a/packages/insomnia/src/ui/components/trail-lines.tsx
+++ b/packages/insomnia/src/ui/components/trail-lines.tsx
@@ -58,7 +58,7 @@ function renderPaths({
               clipPath={`url(#${id}-clip-path-${i})`}
               x={`-${internals.TRIAL_SIZE_PERCENTAGE}`}
             />
-            { }
+            {}
             <g id="${id}-circles-${i}" className="dot" style={{ opacity: 0 }}>
               <circle r={internals.LINE_WIDTH * 20} fill={`url(#${id}-rgradient-dot-back)`} />
               <circle r={internals.LINE_WIDTH * 10} fill={`url(#${id}-rgradient-dot-front)`} />
@@ -95,7 +95,7 @@ const TrailLines = forwardRef<TrailsLineHandle, Props>(
           setShowPaths(show);
         },
       }),
-      []
+      [],
     );
 
     useEffect(() => {
@@ -114,7 +114,7 @@ const TrailLines = forwardRef<TrailsLineHandle, Props>(
     return (
       <svg
         ref={refRoot}
-        className={`pointer-events-none ${reverse ? 'transform scale-x-[-1]' : ''}`}
+        className={`pointer-events-none ${reverse ? 'scale-x-[-1] transform' : ''}`}
         viewBox={`0 0 ${width} ${height}`}
         width={width}
         height={height}
@@ -165,7 +165,7 @@ const TrailLines = forwardRef<TrailsLineHandle, Props>(
         {showPaths && renderPaths({ id, width, height, totalLines })}
       </svg>
     );
-  }
+  },
 );
 
 TrailLines.displayName = 'TrailLines';
diff --git a/packages/insomnia/src/ui/components/upgrade-notice.tsx b/packages/insomnia/src/ui/components/upgrade-notice.tsx
index 0d38c701f8..03ed6a8cb6 100644
--- a/packages/insomnia/src/ui/components/upgrade-notice.tsx
+++ b/packages/insomnia/src/ui/components/upgrade-notice.tsx
@@ -14,29 +14,25 @@ export interface UpgradeNoticeProps {
 export const UpgradeNotice = (props: UpgradeNoticeProps) => {
   const { newPlan, featureName, isOwner } = props;
   const planDetail = newPlan === 'team' ? 'Team plan or above' : 'Enterprise plan';
-  const upgradeDetail = isOwner ? 'Please upgrade your plan.' : 'Please contact the organization owner to upgrade the plan.';
+  const upgradeDetail = isOwner
+    ? 'Please upgrade your plan.'
+    : 'Please contact the organization owner to upgrade the plan.';
   const message = `${featureName} is only enbaled for ${planDetail}.`;
   const handleUpgradePlan = () => {
     window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/subscription/update?plan=team`);
   };
 
   return (
-    <div className='flex flex-col gap-3 justify-center items-center notice pad surprise'>
-      <InsomniaLogo className='h-16 w-full' />
-      <Heading className="text-2xl">
-        Upgrade Plan
-      </Heading>
+    <div className="notice pad surprise flex flex-col items-center justify-center gap-3">
+      <InsomniaLogo className="h-16 w-full" />
+      <Heading className="text-2xl">Upgrade Plan</Heading>
       <p>{message}</p>
       <p>{upgradeDetail}</p>
-      {isOwner &&
-        <Button
-          aria-label="Upgrade Plan"
-          className="btn btn--clicky mt-[--padding-md]"
-          onPress={handleUpgradePlan}
-        >
+      {isOwner && (
+        <Button aria-label="Upgrade Plan" className="btn btn--clicky mt-[--padding-md]" onPress={handleUpgradePlan}>
           Upgrade <i className="fa fa-external-link" />
         </Button>
-      }
+      )}
     </div>
   );
 };
diff --git a/packages/insomnia/src/ui/components/viewers/password-viewer.tsx b/packages/insomnia/src/ui/components/viewers/password-viewer.tsx
index b8bd2d7afd..e38975b2c4 100644
--- a/packages/insomnia/src/ui/components/viewers/password-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/password-viewer.tsx
@@ -4,7 +4,7 @@ import { useRootLoaderData } from '../../routes/root';
 
 const MASK_CHARACTER = '•';
 /** randomly get anywhere between 4 and 11 mask characters on each invocation */
-const getMask = () => MASK_CHARACTER.repeat(4 + (Math.random() * 7));
+const getMask = () => MASK_CHARACTER.repeat(4 + Math.random() * 7);
 
 export const PasswordViewer: FC<{
   onShow?: () => void;
@@ -19,15 +19,8 @@ export const PasswordViewer: FC<{
    * @note the number is random to avoid exposing the length of the password.
    */
   maskText?: boolean;
-}> = ({
-  onShow,
-  initiallyHidden = true,
-  text,
-  maskText = true,
-}) => {
-  const {
-    settings,
-  } = useRootLoaderData();
+}> = ({ onShow, initiallyHidden = true, text, maskText = true }) => {
+  const { settings } = useRootLoaderData();
   const { showPasswords } = settings;
   const [mask, setMask] = useState<string | null>(null);
   useEffect(() => {
@@ -44,7 +37,10 @@ export const PasswordViewer: FC<{
 
   return (
     <span className="monospace">
-      <i className={`fa ${textVisible ? 'fa-eye' : 'fa-eye-slash'} cursor-pointer pr-[--padding-xs]`} onClick={toggleVisible} />
+      <i
+        className={`fa ${textVisible ? 'fa-eye' : 'fa-eye-slash'} cursor-pointer pr-[--padding-xs]`}
+        onClick={toggleVisible}
+      />
       {textVisible ? <span className="selectable">{text}</span> : mask}
     </span>
   );
diff --git a/packages/insomnia/src/ui/components/viewers/response-cookies-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-cookies-viewer.tsx
index 8e957d8937..7a47c7ed50 100644
--- a/packages/insomnia/src/ui/components/viewers/response-cookies-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-cookies-viewer.tsx
@@ -21,17 +21,15 @@ export const ResponseCookiesViewer: FC<Props> = props => {
     }
 
     const blank = <span className="super-duper-faint italic">--</span>;
-    return <tr className="selectable" key={i}>
-      <td>{cookie ? cookie.key : blank}</td>
-      <td className="force-wrap">{cookie ? cookie.value : blank}</td>
-    </tr>;
+    return (
+      <tr className="selectable" key={i}>
+        <td>{cookie ? cookie.key : blank}</td>
+        <td className="force-wrap">{cookie ? cookie.value : blank}</td>
+      </tr>
+    );
   };
 
-  const {
-    headers,
-    cookiesSent,
-    cookiesStored,
-  } = props;
+  const { headers, cookiesSent, cookiesStored } = props;
   const notifyNotStored = !cookiesStored && headers.length;
   let noticeMessage: string | null = null;
 
@@ -43,29 +41,29 @@ export const ResponseCookiesViewer: FC<Props> = props => {
     noticeMessage = 'storing';
   }
 
-  return <div>
-    {noticeMessage && <div className="notice info margin-bottom no-margin-top">
-      <p>
-        Automatic {noticeMessage} of cookies was disabled at the time this request was made
-      </p>
-    </div>}
+  return (
+    <div>
+      {noticeMessage && (
+        <div className="notice info margin-bottom no-margin-top">
+          <p>Automatic {noticeMessage} of cookies was disabled at the time this request was made</p>
+        </div>
+      )}
 
-    <table className="table--fancy table--striped table--compact">
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th>Value</th>
-        </tr>
-      </thead>
-      <tbody>{!headers.length ? renderRow(null, -1) : headers.map(renderRow)}</tbody>
-    </table>
-    <p className="pad-top">
-      <button className="pull-right btn btn--clicky" onClick={() => setIsCookieModalOpen(true)}>
-        Manage Cookies
-      </button>
-    </p>
-    {isCookieModalOpen && (
-      <CookiesModal setIsOpen={setIsCookieModalOpen} />
-    )}
-  </div>;
+      <table className="table--fancy table--striped table--compact">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>{!headers.length ? renderRow(null, -1) : headers.map(renderRow)}</tbody>
+      </table>
+      <p className="pad-top">
+        <button className="pull-right btn btn--clicky" onClick={() => setIsCookieModalOpen(true)}>
+          Manage Cookies
+        </button>
+      </p>
+      {isCookieModalOpen && <CookiesModal setIsOpen={setIsCookieModalOpen} />}
+    </div>
+  );
 };
diff --git a/packages/insomnia/src/ui/components/viewers/response-csv-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-csv-viewer.tsx
index fbeaf4b32c..8335caf198 100644
--- a/packages/insomnia/src/ui/components/viewers/response-csv-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-csv-viewer.tsx
@@ -43,11 +43,11 @@ export const ResponseCSVViewer: FC<Props> = ({ body }) => {
 
   return (
     <div className="pad-sm">
-      {csv ?
+      {csv ? (
         <table ref={tableRef} className="table--fancy table--striped table--compact selectable">
           <tbody>
             {csv.data.map((row, index) => (
-            // eslint-disable-next-line react/no-array-index-key -- data structure is unknown, cannot compute a valid key
+              // eslint-disable-next-line react/no-array-index-key -- data structure is unknown, cannot compute a valid key
               <tr key={index}>
                 {row.map(c => (
                   <td key={c}>{c}</td>
@@ -56,6 +56,9 @@ export const ResponseCSVViewer: FC<Props> = ({ body }) => {
             ))}
           </tbody>
         </table>
-        : 'Parsing CSV...'}
-    </div>);
+      ) : (
+        'Parsing CSV...'
+      )}
+    </div>
+  );
 };
diff --git a/packages/insomnia/src/ui/components/viewers/response-error-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-error-viewer.tsx
index 805738d348..1aa05bb451 100644
--- a/packages/insomnia/src/ui/components/viewers/response-error-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-error-viewer.tsx
@@ -11,9 +11,7 @@ interface Props {
 }
 export const ResponseErrorViewer: FC<Props> = memo(({ error }) => {
   let msg: React.ReactNode = null;
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const { editorFontSize } = settings;
 
   if (error?.toLowerCase().indexOf('certificate') !== -1) {
@@ -47,15 +45,11 @@ export const ResponseErrorViewer: FC<Props> = memo(({ error }) => {
         {error}
       </pre>
       <hr />
-      <div className="text-center pad">
+      <div className="pad text-center">
         <p className="faint pad-left pad-right">Here are some additional things that may help.</p>
         {msg}
-          &nbsp;&nbsp;
-        <Link
-          button
-          className="btn btn--clicky margin-top-sm"
-          href="https://insomnia.rest/support"
-        >
+        &nbsp;&nbsp;
+        <Link button className="btn btn--clicky margin-top-sm" href="https://insomnia.rest/support">
           Contact Support
         </Link>
       </div>
diff --git a/packages/insomnia/src/ui/components/viewers/response-headers-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-headers-viewer.tsx
index 205171b3fd..da54055383 100644
--- a/packages/insomnia/src/ui/components/viewers/response-headers-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-headers-viewer.tsx
@@ -35,10 +35,8 @@ export const ResponseHeadersViewer: FC<Props> = ({ headers }) => {
         <tbody>
           {headers.map(header => (
             <tr className="selectable" key={headerAsString(header)}>
-              <td className='force-wrap w-1/2'>
-                {header.name}
-              </td>
-              <td className='force-wrap w-1/2'>
+              <td className="force-wrap w-1/2">{header.name}</td>
+              <td className="force-wrap w-1/2">
                 {validateURL(header) ? <Link href={header.value}>{header.value}</Link> : header.value}
               </td>
             </tr>
diff --git a/packages/insomnia/src/ui/components/viewers/response-multipart-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-multipart-viewer.tsx
index a770f6a1ad..07f9daeae0 100644
--- a/packages/insomnia/src/ui/components/viewers/response-multipart-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-multipart-viewer.tsx
@@ -8,10 +8,7 @@ import React, { type FC, useCallback, useEffect, useState } from 'react';
 import { Button } from 'react-aria-components';
 import { PassThrough } from 'stream';
 
-import {
-  getContentTypeFromHeaders,
-  PREVIEW_MODE_FRIENDLY,
-} from '../../../common/constants';
+import { getContentTypeFromHeaders, PREVIEW_MODE_FRIENDLY } from '../../../common/constants';
 import type { ResponseHeader } from '../../../models/response';
 import { Dropdown, DropdownItem, ItemContent } from '../base/dropdown';
 import { showModal } from '../modals/index';
@@ -156,9 +153,9 @@ export const ResponseMultipartViewer: FC<Props> = ({
       >
         <div>
           <Dropdown
-            aria-label='Select Part Dropdown'
+            aria-label="Select Part Dropdown"
             triggerButton={
-              <Button className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]">
+              <Button className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]">
                 <div
                   style={{
                     minWidth: '200px',
@@ -172,10 +169,7 @@ export const ResponseMultipartViewer: FC<Props> = ({
             }
           >
             {parts.map(part => (
-              <DropdownItem
-                aria-label={part.title}
-                key={part.id}
-              >
+              <DropdownItem aria-label={part.title} key={part.id}>
                 <ItemContent
                   icon={selectedPart?.id === part.id ? 'check' : 'empty'}
                   label={part.title}
@@ -186,26 +180,18 @@ export const ResponseMultipartViewer: FC<Props> = ({
           </Dropdown>
         </div>
         <Dropdown
-          aria-label='Part Actions Dropdown'
+          aria-label="Part Actions Dropdown"
           triggerButton={
-            <Button className="border border-solid border-[--hl-lg] px-[--padding-md] h-[--line-height-xs] rounded-[--radius-md] hover:bg-[--hl-xs]">
+            <Button className="h-[--line-height-xs] rounded-[--radius-md] border border-solid border-[--hl-lg] px-[--padding-md] hover:bg-[--hl-xs]">
               <i className="fa fa-bars" />
             </Button>
           }
         >
-          <DropdownItem aria-label='View Headers'>
-            <ItemContent
-              icon="list"
-              label="View Headers"
-              onClick={viewHeaders}
-            />
+          <DropdownItem aria-label="View Headers">
+            <ItemContent icon="list" label="View Headers" onClick={viewHeaders} />
           </DropdownItem>
-          <DropdownItem aria-label='Save as File'>
-            <ItemContent
-              icon="save"
-              label="Save as File"
-              onClick={saveAsFile}
-            />
+          <DropdownItem aria-label="Save as File">
+            <ItemContent icon="save" label="Save as File" onClick={saveAsFile} />
           </DropdownItem>
         </Dropdown>
       </div>
@@ -227,12 +213,17 @@ export const ResponseMultipartViewer: FC<Props> = ({
           url={url}
         />
       </div>
-
     </div>
   );
 };
 
-function multipartBufferToArray({ bodyBuffer, contentType }: { bodyBuffer: Buffer | null; contentType: string }): Promise<Part[]> {
+function multipartBufferToArray({
+  bodyBuffer,
+  contentType,
+}: {
+  bodyBuffer: Buffer | null;
+  contentType: string;
+}): Promise<Part[]> {
   return new Promise((resolve, reject) => {
     const parts: Part[] = [];
 
diff --git a/packages/insomnia/src/ui/components/viewers/response-pdf-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-pdf-viewer.tsx
index 39d9280f14..f0f57f0211 100644
--- a/packages/insomnia/src/ui/components/viewers/response-pdf-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-pdf-viewer.tsx
@@ -5,12 +5,7 @@ interface Props {
 }
 
 export const ResponsePDFViewer = (props: Props) => {
-  const url = (`data:application/pdf;base64,${props.body.toString('base64')}`);
+  const url = `data:application/pdf;base64,${props.body.toString('base64')}`;
 
-  return (
-    <webview
-      data-testid="ResponsePDFView"
-      src={url}
-    />
-  );
+  return <webview data-testid="ResponsePDFView" src={url} />;
 };
diff --git a/packages/insomnia/src/ui/components/viewers/response-viewer.tsx b/packages/insomnia/src/ui/components/viewers/response-viewer.tsx
index 553851aed8..66e1b1ae54 100644
--- a/packages/insomnia/src/ui/components/viewers/response-viewer.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-viewer.tsx
@@ -1,10 +1,5 @@
 import iconv from 'iconv-lite';
-import React, {
-  Fragment,
-  useCallback,
-  useRef,
-  useState,
-} from 'react';
+import React, { Fragment, useCallback, useRef, useState } from 'react';
 
 import {
   HUGE_RESPONSE_MB,
@@ -33,8 +28,9 @@ export function xmlDecode(input: string) {
     '&gt;': '>',
   };
 
-  return input.replace(/(&quot;|&lt;|&gt;|&amp;)/g, (_: string, item: keyof typeof ESCAPED_CHARACTERS_MAP) => (
-    ESCAPED_CHARACTERS_MAP[item])
+  return input.replace(
+    /(&quot;|&lt;|&gt;|&amp;)/g,
+    (_: string, item: keyof typeof ESCAPED_CHARACTERS_MAP) => ESCAPED_CHARACTERS_MAP[item],
   );
 }
 export interface ResponseViewerProps {
@@ -127,7 +123,7 @@ export const ResponseViewer = ({
         JSON.parse(overSizedBody.toString('utf8'));
         return 'application/json';
       }
-    } catch (error) { }
+    } catch (error) {}
     // Try to detect HTML in all cases (even if header is set).
     // It is fairly common for webservers to send errors in HTML by default.
     // NOTE: This will probably never throw but I'm not 100% so wrap anyway
@@ -138,13 +134,10 @@ export const ResponseViewer = ({
         .trim()
         .match(/^<!doctype html.*>/i);
 
-      if (
-        lowercasedOriginalContentType.indexOf('text/html') !== 0 &&
-        isProbablyHTML
-      ) {
+      if (lowercasedOriginalContentType.indexOf('text/html') !== 0 && isProbablyHTML) {
         return 'text/html';
       }
-    } catch (error) { }
+    } catch (error) {}
 
     return lowercasedOriginalContentType;
   }, [originalContentType, overSizedBody]);
@@ -178,38 +171,28 @@ export const ResponseViewer = ({
       <div className="response-pane__notify">
         {hugeResponse ? (
           <Fragment>
-            <p className="pad faint">
-              Responses over {HUGE_RESPONSE_MB}MB cannot be shown
-            </p>
-            <button onClick={download} className="inline-block btn btn--clicky">
+            <p className="pad faint">Responses over {HUGE_RESPONSE_MB}MB cannot be shown</p>
+            <button onClick={download} className="btn btn--clicky inline-block">
               Save Response To File
             </button>
           </Fragment>
         ) : (
           <Fragment>
-            <p className="pad faint">
-              Response over {LARGE_RESPONSE_MB}MB hidden for performance reasons
-            </p>
+            <p className="pad faint">Response over {LARGE_RESPONSE_MB}MB hidden for performance reasons</p>
             <div>
-              <button
-                onClick={download}
-                className="inline-block btn btn--clicky margin-xs"
-              >
+              <button onClick={download} className="btn btn--clicky margin-xs inline-block">
                 Save To File
               </button>
               <button
                 onClick={_handleDismissBlocker}
                 disabled={hugeResponse}
-                className=" inline-block btn btn--clicky margin-xs"
+                className="btn btn--clicky margin-xs inline-block"
               >
                 Show Anyway
               </button>
             </div>
             <div className="pad-top-sm">
-              <button
-                className="faint inline-block btn btn--super-compact"
-                onClick={_handleDisableBlocker}
-              >
+              <button className="faint btn btn--super-compact inline-block" onClick={_handleDisableBlocker}>
                 Always Show
               </button>
             </div>
@@ -220,11 +203,7 @@ export const ResponseViewer = ({
   }
 
   if (!overSizedBody) {
-    return (
-      <div className="pad faint">
-        Failed to read response body from filesystem
-      </div>
-    );
+    return <div className="pad faint">Failed to read response body from filesystem</div>;
   }
 
   if (overSizedBody.length === 0) {
@@ -233,10 +212,7 @@ export const ResponseViewer = ({
 
   const contentType = _getContentType();
 
-  if (
-    previewMode === PREVIEW_MODE_FRIENDLY &&
-    contentType === 'application/json'
-  ) {
+  if (previewMode === PREVIEW_MODE_FRIENDLY && contentType === 'application/json') {
     let bodyStr = getBodyAsString();
     // Although there is a prettifier for json inside the CodeEditor, but it is to prettify json strings that is being edited which may have syntax errors.
     // There are some cases that the prettifier inside the CodeEditor can not handle.
@@ -245,7 +221,7 @@ export const ResponseViewer = ({
     // So we try to use the native JSON.stringify to prettify the json string better. The native way can handle the issue.
     try {
       bodyStr = JSON.stringify(JSON.parse(bodyStr));
-    } catch (err) { }
+    } catch (err) {}
     return (
       <CodeEditor
         id="json-response-viewer"
@@ -257,7 +233,10 @@ export const ResponseViewer = ({
         filterHistory={filterHistory}
         mode={contentType}
         noMatchBrackets
-        onClickLink={url => !disablePreviewLinks && window.main.openInBrowser(getBodyAsString()?.match(/^\s*<\?xml [^?]*\?>/) ? xmlDecode(url) : url)}
+        onClickLink={url =>
+          !disablePreviewLinks &&
+          window.main.openInBrowser(getBodyAsString()?.match(/^\s*<\?xml [^?]*\?>/) ? xmlDecode(url) : url)
+        }
         placeholder="..."
         readOnly
         uniquenessKey={responseId}
@@ -266,10 +245,7 @@ export const ResponseViewer = ({
     );
   }
 
-  if (
-    previewMode === PREVIEW_MODE_FRIENDLY &&
-    contentType.indexOf('image/') === 0
-  ) {
+  if (previewMode === PREVIEW_MODE_FRIENDLY && contentType.indexOf('image/') === 0) {
     const justContentType = contentType.split(';')[0];
     const base64Body = overSizedBody.toString('base64');
     return (
@@ -300,10 +276,7 @@ export const ResponseViewer = ({
     );
   }
 
-  if (
-    previewMode === PREVIEW_MODE_FRIENDLY &&
-    contentType.indexOf('application/pdf') === 0
-  ) {
+  if (previewMode === PREVIEW_MODE_FRIENDLY && contentType.indexOf('application/pdf') === 0) {
     return (
       <div className="tall wide scrollable">
         <ResponsePDFViewer body={overSizedBody} key={responseId} />
@@ -311,10 +284,7 @@ export const ResponseViewer = ({
     );
   }
 
-  if (
-    previewMode === PREVIEW_MODE_FRIENDLY &&
-    contentType.indexOf('text/csv') === 0
-  ) {
+  if (previewMode === PREVIEW_MODE_FRIENDLY && contentType.indexOf('text/csv') === 0) {
     return (
       <div className="tall wide scrollable">
         <ResponseCSVViewer body={overSizedBody} key={responseId} />
@@ -322,10 +292,7 @@ export const ResponseViewer = ({
     );
   }
 
-  if (
-    previewMode === PREVIEW_MODE_FRIENDLY &&
-    contentType.indexOf('multipart/') === 0
-  ) {
+  if (previewMode === PREVIEW_MODE_FRIENDLY && contentType.indexOf('multipart/') === 0) {
     return (
       <ResponseMultipartViewer
         bodyBuffer={overSizedBody}
@@ -343,10 +310,7 @@ export const ResponseViewer = ({
     );
   }
 
-  if (
-    previewMode === PREVIEW_MODE_FRIENDLY &&
-    contentType.indexOf('audio/') === 0
-  ) {
+  if (previewMode === PREVIEW_MODE_FRIENDLY && contentType.indexOf('audio/') === 0) {
     const justContentType = contentType.split(';')[0];
     const base64Body = overSizedBody.toString('base64');
     return (
@@ -388,7 +352,10 @@ export const ResponseViewer = ({
       filterHistory={filterHistory}
       mode={getBodyAsString()?.match(/^\s*<\?xml [^?]*\?>/) ? 'application/xml' : _getContentType()}
       noMatchBrackets
-      onClickLink={url => !disablePreviewLinks && window.main.openInBrowser(getBodyAsString()?.match(/^\s*<\?xml [^?]*\?>/) ? xmlDecode(url) : url)}
+      onClickLink={url =>
+        !disablePreviewLinks &&
+        window.main.openInBrowser(getBodyAsString()?.match(/^\s*<\?xml [^?]*\?>/) ? xmlDecode(url) : url)
+      }
       placeholder="..."
       readOnly
       uniquenessKey={responseId}
diff --git a/packages/insomnia/src/ui/components/viewers/response-web-view.tsx b/packages/insomnia/src/ui/components/viewers/response-web-view.tsx
index 8acf13e90e..9b1bc7ddb4 100644
--- a/packages/insomnia/src/ui/components/viewers/response-web-view.tsx
+++ b/packages/insomnia/src/ui/components/viewers/response-web-view.tsx
@@ -26,13 +26,5 @@ export const ResponseWebView: FC<Props> = ({ webpreferences, body, url }) => {
       }
     };
   }, [body, url]);
-  return (
-    <webview
-      data-testid="ResponseWebView"
-      ref={webviewRef}
-      src="about:blank"
-       
-      webpreferences={webpreferences}
-    />
-  );
+  return <webview data-testid="ResponseWebView" ref={webviewRef} src="about:blank" webpreferences={webpreferences} />;
 };
diff --git a/packages/insomnia/src/ui/components/websockets/action-bar.tsx b/packages/insomnia/src/ui/components/websockets/action-bar.tsx
index e94cd2afaf..6cf04e0094 100644
--- a/packages/insomnia/src/ui/components/websockets/action-bar.tsx
+++ b/packages/insomnia/src/ui/components/websockets/action-bar.tsx
@@ -19,7 +19,13 @@ interface ActionBarProps {
   onChange: (value: string) => void;
 }
 
-export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId, defaultValue, onChange, readyState }) => {
+export const WebSocketActionBar: FC<ActionBarProps> = ({
+  request,
+  environmentId,
+  defaultValue,
+  onChange,
+  readyState,
+}) => {
   const isOpen = readyState;
   const oneLineEditorRef = useRef<OneLineEditorHandle>(null);
   useLayoutEffect(() => {
@@ -27,17 +33,25 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
   }, []);
 
   const fetcher = useFetcher();
-  const { organizationId, projectId, workspaceId, requestId } = useParams() as { organizationId: string; projectId: string; workspaceId: string; requestId: string };
+  const { organizationId, projectId, workspaceId, requestId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+    requestId: string;
+  };
 
   const { updateTabById } = useInsomniaTabContext();
 
-  const connect = useCallback((connectParams: ConnectActionParams) => {
-    fetcher.submit(JSON.stringify(connectParams), {
-      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/connect`,
-      method: 'post',
-      encType: 'application/json',
-    });
-  }, [fetcher, organizationId, projectId, requestId, workspaceId]);
+  const connect = useCallback(
+    (connectParams: ConnectActionParams) => {
+      fetcher.submit(JSON.stringify(connectParams), {
+        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}/connect`,
+        method: 'post',
+        encType: 'application/json',
+      });
+    },
+    [fetcher, organizationId, projectId, requestId, workspaceId],
+  );
 
   const handleSubmit = useCallback(async () => {
     updateTabById?.(request._id, { temporary: false });
@@ -60,13 +74,14 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
         workspaceCookieJar,
       },
     });
-    rendered && connect({
-      url: joinUrlAndQueryString(rendered.url, buildQueryStringFromParams(rendered.parameters)),
-      headers: rendered.headers,
-      authentication: rendered.authentication,
-      cookieJar: rendered.workspaceCookieJar,
-      suppressUserAgent: rendered.suppressUserAgent,
-    });
+    rendered &&
+      connect({
+        url: joinUrlAndQueryString(rendered.url, buildQueryStringFromParams(rendered.parameters)),
+        headers: rendered.headers,
+        authentication: rendered.authentication,
+        cookieJar: rendered.workspaceCookieJar,
+        suppressUserAgent: rendered.suppressUserAgent,
+      });
   }, [connect, environmentId, isOpen, request, updateTabById, workspaceId]);
 
   useEffect(() => {
@@ -75,9 +90,13 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
         handleSubmit();
       }
     };
-    document.getElementById('sidebar-request-gridlist')?.addEventListener('keydown', sendOnMetaEnter, { capture: true });
+    document
+      .getElementById('sidebar-request-gridlist')
+      ?.addEventListener('keydown', sendOnMetaEnter, { capture: true });
     return () => {
-      document.getElementById('sidebar-request-gridlist')?.removeEventListener('keydown', sendOnMetaEnter, { capture: true });
+      document
+        .getElementById('sidebar-request-gridlist')
+        ?.removeEventListener('keydown', sendOnMetaEnter, { capture: true });
     };
   }, [handleSubmit]);
 
@@ -91,24 +110,22 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
   const isConnectingOrClosed = !readyState;
   return (
     <>
-      {!isOpen && (
-        <span className="text-[--color-notice] flex items-center pl-[--padding-md]">WS</span>
-      )}
+      {!isOpen && <span className="flex items-center pl-[--padding-md] text-[--color-notice]">WS</span>}
       {isOpen && (
         <span className="text-success flex items-center pl-[--padding-md]">
-          <span className="bg-[--color-success] mr-[--padding-sm] w-2.5 h-2.5 rounded-[50%]" />
+          <span className="mr-[--padding-sm] h-2.5 w-2.5 rounded-[50%] bg-[--color-success]" />
           CONNECTED
         </span>
       )}
       <form
-        className="flex-1 flex"
+        className="flex flex-1"
         aria-disabled={isOpen}
         onSubmit={event => {
           event.preventDefault();
           handleSubmit();
         }}
       >
-        <div className="box-border w-full h-full px-[--padding-md]">
+        <div className="box-border h-full w-full px-[--padding-md]">
           <OneLineEditor
             id="websocket-url-bar"
             ref={oneLineEditorRef}
@@ -125,7 +142,7 @@ export const WebSocketActionBar: FC<ActionBarProps> = ({ request, environmentId,
         <div className="flex p-1">
           {isConnectingOrClosed ? (
             <button
-              className="hover:brightness-75 rounded-sm px-[--padding-md] text-center bg-[--color-surprise] text-[--color-font-surprise]"
+              className="rounded-sm bg-[--color-surprise] px-[--padding-md] text-center text-[--color-font-surprise] hover:brightness-75"
               type="submit"
             >
               Connect
diff --git a/packages/insomnia/src/ui/components/websockets/disconnect-button.tsx b/packages/insomnia/src/ui/components/websockets/disconnect-button.tsx
index d1486a3d64..eb6e1b7399 100644
--- a/packages/insomnia/src/ui/components/websockets/disconnect-button.tsx
+++ b/packages/insomnia/src/ui/components/websockets/disconnect-button.tsx
@@ -40,7 +40,7 @@ export const DisconnectButton: FC<{ requestId: string }> = ({ requestId }) => {
         }}
         key="dropdown"
         data-testid="DisconnectDropdown__Dropdown"
-        aria-label='Disconnect Dropdown'
+        aria-label="Disconnect Dropdown"
         triggerButton={
           <Button
             style={{
@@ -53,26 +53,22 @@ export const DisconnectButton: FC<{ requestId: string }> = ({ requestId }) => {
           </Button>
         }
       >
-        <DropdownItem aria-label='Disconnect this request'>
+        <DropdownItem aria-label="Disconnect this request">
           <ItemContent onClick={handleCloseThisRequest}>
-            <div className="flex justify-evenly w-[25px]">
-              <div className='rounded-[50%] w-[10px] h-[10px] bg-success' />
-            </div>
-            <div className="text-left w-full pl-[--padding-xs]">
-              Disconnect this request
+            <div className="flex w-[25px] justify-evenly">
+              <div className="bg-success h-[10px] w-[10px] rounded-[50%]" />
             </div>
+            <div className="w-full pl-[--padding-xs] text-left">Disconnect this request</div>
           </ItemContent>
         </DropdownItem>
-        <DropdownItem aria-label='Disconnect all requests'>
+        <DropdownItem aria-label="Disconnect all requests">
           <ItemContent onClick={handleCloseAllRequests}>
-            <div className="flex justify-evenly w-[25px]">
-              <div className='rounded-[50%] w-[5px] h-[5px] bg-success' />
-              <div className='rounded-[50%] w-[5px] h-[5px] bg-success' />
-              <div className='rounded-[50%] w-[5px] h-[5px] bg-success' />
-            </div>
-            <div className="text-left w-full pl-[--padding-xs]">
-              Disconnect all requests
+            <div className="flex w-[25px] justify-evenly">
+              <div className="bg-success h-[5px] w-[5px] rounded-[50%]" />
+              <div className="bg-success h-[5px] w-[5px] rounded-[50%]" />
+              <div className="bg-success h-[5px] w-[5px] rounded-[50%]" />
             </div>
+            <div className="w-full pl-[--padding-xs] text-left">Disconnect all requests</div>
           </ItemContent>
         </DropdownItem>
       </OriginalDropdown>
diff --git a/packages/insomnia/src/ui/components/websockets/event-log-view.tsx b/packages/insomnia/src/ui/components/websockets/event-log-view.tsx
index b19a6bcd63..766b77b017 100644
--- a/packages/insomnia/src/ui/components/websockets/event-log-view.tsx
+++ b/packages/insomnia/src/ui/components/websockets/event-log-view.tsx
@@ -24,8 +24,7 @@ function getIcon(event: WebSocketEvent | CurlEvent): IconId {
       if (event.direction === 'OUTGOING') {
         return 'sent';
       }
-        return 'receive';
-
+      return 'receive';
     }
     case 'open': {
       return 'checkmark-circle';
@@ -77,11 +76,11 @@ export const EventLogView: FC<Props> = ({ events, onSelect, selectionId }) => {
 
   return (
     <>
-      <div className='w-full flex-1 overflow-hidden border border-solid border-[--hl-sm] select-none overflow-y-auto max-h-96'>
+      <div className="max-h-96 w-full flex-1 select-none overflow-hidden overflow-y-auto border border-solid border-[--hl-sm]">
         <Table
-          selectionMode='single'
+          selectionMode="single"
           selectedKeys={selectionId ? [selectionId] : []}
-          selectionBehavior='replace'
+          selectionBehavior="replace"
           onSelectionChange={keys => {
             if (keys !== 'all') {
               const key = keys.values().next().value;
@@ -93,37 +92,33 @@ export const EventLogView: FC<Props> = ({ events, onSelect, selectionId }) => {
               }
             }
           }}
-          aria-label='Modified objects'
-          className="border-separate border-spacing-0 w-full"
+          aria-label="Modified objects"
+          className="w-full border-separate border-spacing-0"
         >
-          <TableHeader className='sticky top-0 z-10 backdrop-blur backdrop-filter bg-[--hl-xs]'>
-            <Column isRowHeader className="p-3 text-left text-xs font-semibold  focus:outline-none">
+          <TableHeader className="sticky top-0 z-10 bg-[--hl-xs] backdrop-blur backdrop-filter">
+            <Column isRowHeader className="p-3 text-left text-xs font-semibold focus:outline-none">
               <span />
             </Column>
-            <Column className="p-3 text-left text-xs font-semibold focus:outline-none">
-              Data
-            </Column>
-            <Column className="p-3 text-left text-xs font-semibold focus:outline-none">
-              Time
-            </Column>
+            <Column className="p-3 text-left text-xs font-semibold focus:outline-none">Data</Column>
+            <Column className="p-3 text-left text-xs font-semibold focus:outline-none">Time</Column>
           </TableHeader>
           <TableBody
             style={{ height: virtualizer.getTotalSize() }}
             ref={parentRef}
-            className="divide divide-[--hl-sm] divide-solid"
+            className="divide divide-solid divide-[--hl-sm]"
             items={virtualizer.getVirtualItems()}
           >
             {item => {
               const event = events[item.index];
               return (
-                <Row className="group focus:outline-none focus-within:bg-[--hl-sm] transition-colors">
-                  <Cell className="p-2 whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                <Row className="group transition-colors focus-within:bg-[--hl-sm] focus:outline-none">
+                  <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] p-2 text-sm font-medium focus:outline-none group-last-of-type:border-none">
                     <SvgIcon icon={getIcon(event)} />
                   </Cell>
-                  <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                  <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
                     {getMessage(event)}
                   </Cell>
-                  <Cell className="whitespace-nowrap text-sm font-medium border-b border-solid border-[--hl-sm] group-last-of-type:border-none focus:outline-none">
+                  <Cell className="whitespace-nowrap border-b border-solid border-[--hl-sm] text-sm font-medium focus:outline-none group-last-of-type:border-none">
                     <Timestamp time={event.timestamp} />
                   </Cell>
                 </Row>
diff --git a/packages/insomnia/src/ui/components/websockets/event-view.tsx b/packages/insomnia/src/ui/components/websockets/event-view.tsx
index b1af0b4e54..f236a01d2e 100644
--- a/packages/insomnia/src/ui/components/websockets/event-view.tsx
+++ b/packages/insomnia/src/ui/components/websockets/event-view.tsx
@@ -69,8 +69,8 @@ export const MessageEventView: FC<Props<CurlMessageEvent | WebSocketMessageEvent
   const { activeRequestMeta } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
   const previewMode = activeRequestMeta.previewMode || PREVIEW_MODE_SOURCE;
   return (
-    <div className="flex flex-col h-full">
-      <div className="flex flex-row box-border h-8 border-b border-gray-300 p-2">
+    <div className="flex h-full flex-col">
+      <div className="box-border flex h-8 flex-row border-b border-gray-300 p-2">
         <WebSocketPreviewModeDropdown
           download={handleDownloadResponseBody}
           copyToClipboard={handleCopyResponseToClipboard}
diff --git a/packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx b/packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx
index 3759bebea4..725d1fcc26 100644
--- a/packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx
+++ b/packages/insomnia/src/ui/components/websockets/realtime-response-pane.tsx
@@ -35,7 +35,7 @@ export const RealtimeResponsePane: FC<{ requestId: string }> = () => {
   if (!activeResponse) {
     return (
       <Pane type="response">
-        <PaneHeader className='!justify-normal' />
+        <PaneHeader className="!justify-normal" />
         <PlaceholderResponsePane />
       </Pane>
     );
@@ -43,9 +43,7 @@ export const RealtimeResponsePane: FC<{ requestId: string }> = () => {
   return <RealtimeActiveResponsePane response={activeResponse} />;
 };
 
-const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }> = ({
-  response,
-}) => {
+const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }> = ({ response }) => {
   const [selectedEvent, setSelectedEvent] = useState<CurlEvent | WebSocketEvent | null>(null);
   const [timeline, setTimeline] = useState<ResponseTimelineEntry[]>([]);
   const [clearEventsBefore, setClearEventsBefore] = useState<number | null>(null);
@@ -54,7 +52,7 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
   const protocol = response.type === 'WebSocketResponse' ? 'webSocket' : 'curl';
   const allEvents = useRealtimeConnectionEvents({ responseId: response._id, protocol });
   const handleSelection = (event: CurlEvent | WebSocketEvent) => {
-    setSelectedEvent((selected: CurlEvent | WebSocketEvent | null) => selected?._id === event._id ? null : event);
+    setSelectedEvent((selected: CurlEvent | WebSocketEvent | null) => (selected?._id === event._id ? null : event));
   };
 
   const events = allEvents.filter(event => {
@@ -126,48 +124,55 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
           <TimeTag milliseconds={response.elapsedTime} steps={[]} />
           <SizeTag bytesRead={0} bytesContent={0} />
         </div>
-        <ResponseHistoryDropdown
-          activeResponse={response}
-        />
+        <ResponseHistoryDropdown activeResponse={response} />
       </PaneHeader>
-      <Tabs aria-label='Request group tabs' className="flex-1 w-full h-full flex flex-col">
-        <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+      <Tabs aria-label="Request group tabs" className="flex h-full w-full flex-1 flex-col">
+        <TabList
+          className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+          aria-label="Request pane tabs"
+        >
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='events'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="events"
           >
             Events
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='headers'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="headers"
           >
             Headers
             {response.headers.length > 0 && (
-              <span className="p-2 aspect-square flex items-center justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{response.headers.length}</span>
+              <span className="shadow-small flex aspect-square items-center justify-between overflow-hidden rounded-lg border border-solid border-[--hl-md] p-2 text-xs">
+                {response.headers.length}
+              </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='cookies'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="cookies"
           >
             Cookies
             {cookieHeaders.length > 0 && (
-              <span className="p-2 aspect-square flex items-center justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{cookieHeaders.length}</span>
+              <span className="shadow-small flex aspect-square items-center justify-between overflow-hidden rounded-lg border border-solid border-[--hl-md] p-2 text-xs">
+                {cookieHeaders.length}
+              </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='timeline'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="timeline"
           >
             Console
           </Tab>
         </TabList>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='events'>
-          <PanelGroup direction='vertical' className='h-full w-full grid grid-rows-[repeat(auto-fit,minmax(0,1fr))]'>
-            {response.error ? <ResponseErrorViewer url={response.url} error={response.error} />
-              : <>
-                <Panel minSize={10} defaultSize={50} className="w-full flex flex-col overflow-hidden box-border flex-1">
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="events">
+          <PanelGroup direction="vertical" className="grid h-full w-full grid-rows-[repeat(auto-fit,minmax(0,1fr))]">
+            {response.error ? (
+              <ResponseErrorViewer url={response.url} error={response.error} />
+            ) : (
+              <>
+                <Panel minSize={10} defaultSize={50} className="box-border flex w-full flex-1 flex-col overflow-hidden">
                   <div
                     style={{
                       display: 'flex',
@@ -176,7 +181,10 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
                       gap: 'var(--padding-sm)',
                     }}
                   >
-                    <select disabled={protocol === 'curl'} onChange={e => setEventType(e.currentTarget.value as CurlEvent['type'])}>
+                    <select
+                      disabled={protocol === 'curl'}
+                      onChange={e => setEventType(e.currentTarget.value as CurlEvent['type'])}
+                    >
                       <option value="">All</option>
                       <option value="message">Message</option>
                       <option value="open">Open</option>
@@ -186,7 +194,7 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
 
                     <SearchField
                       aria-label="Events filter"
-                      className="group relative flex-1 w-full"
+                      className="group relative w-full flex-1"
                       defaultValue={searchQuery}
                       onChange={query => {
                         setSearchQuery(query);
@@ -194,56 +202,50 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
                     >
                       <Input
                         placeholder="Search"
-                        className="py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
+                        className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                       />
-                      <div className="flex items-center px-2 absolute right-0 top-0 h-full">
-                        <Button className="flex group-data-[empty]:hidden items-center justify-center aspect-square w-5 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+                      <div className="absolute right-0 top-0 flex h-full items-center px-2">
+                        <Button className="flex aspect-square w-5 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] group-data-[empty]:hidden">
                           <Icon icon="close" />
                         </Button>
                       </div>
                     </SearchField>
                     <Button
                       aria-label="Create in collection"
-                      className="flex items-center justify-center h-full aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                      className="flex aspect-square h-full items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       onPress={() => {
                         const lastEvent = events[0];
                         setClearEventsBefore(lastEvent.timestamp);
                       }}
                     >
-                      <SvgIcon icon='prohibited' />
+                      <SvgIcon icon="prohibited" />
                     </Button>
                   </div>
 
                   {Boolean(events?.length) && (
-                    <EventLogView
-                      events={events}
-                      onSelect={handleSelection}
-                      selectionId={selectedEvent?._id}
-                    />
+                    <EventLogView events={events} onSelect={handleSelection} selectionId={selectedEvent?._id} />
                   )}
                 </Panel>
                 {selectedEvent && (
                   <>
-                    <PanelResizeHandle className={'w-full h-[1px] bg-[--hl-md]'} />
+                    <PanelResizeHandle className={'h-[1px] w-full bg-[--hl-md]'} />
                     <Panel minSize={10} defaultSize={50}>
-                      <div className="flex-1 border-t border-[var(--hl-md)] h-full">
-                        <EventView
-                          key={selectedEvent._id}
-                          event={selectedEvent}
-                        />
+                      <div className="h-full flex-1 border-t border-[var(--hl-md)]">
+                        <EventView key={selectedEvent._id} event={selectedEvent} />
                       </div>
                     </Panel>
                   </>
                 )}
-              </>}
+              </>
+            )}
           </PanelGroup>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='headers'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="headers">
           <ErrorBoundary key={response._id} errorClassName="font-error pad text-center">
             <ResponseHeadersViewer headers={response.headers} />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='cookies'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="cookies">
           <ErrorBoundary key={response._id} errorClassName="font-error pad text-center">
             <ResponseCookiesViewer
               cookiesSent={response.settingSendCookies}
@@ -252,14 +254,10 @@ const RealtimeActiveResponsePane: FC<{ response: WebSocketResponse | Response }>
             />
           </ErrorBoundary>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='timeline'>
-          <ResponseTimelineViewer
-            key={response._id}
-            timeline={timeline}
-            pinToBottom={true}
-          />
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="timeline">
+          <ResponseTimelineViewer key={response._id} timeline={timeline} pinToBottom={true} />
         </TabPanel>
       </Tabs>
-    </ Pane>
+    </Pane>
   );
 };
diff --git a/packages/insomnia/src/ui/components/websockets/websocket-preview-dropdown.tsx b/packages/insomnia/src/ui/components/websockets/websocket-preview-dropdown.tsx
index 67db7dd9f0..604011b125 100644
--- a/packages/insomnia/src/ui/components/websockets/websocket-preview-dropdown.tsx
+++ b/packages/insomnia/src/ui/components/websockets/websocket-preview-dropdown.tsx
@@ -11,12 +11,7 @@ interface Props {
   setPreviewMode: (mode: PreviewMode) => void;
 }
 
-export const WebSocketPreviewModeDropdown: FC<Props> = ({
-  download,
-  copyToClipboard,
-  previewMode,
-  setPreviewMode,
-}) => {
+export const WebSocketPreviewModeDropdown: FC<Props> = ({ download, copyToClipboard, previewMode, setPreviewMode }) => {
   return (
     <Dropdown
       aria-label="Websocket Preview Mode Dropdown"
@@ -27,40 +22,23 @@ export const WebSocketPreviewModeDropdown: FC<Props> = ({
         </Button>
       }
     >
-      <DropdownSection
-        aria-label="Preview Mode Section"
-        title="Preview Mode"
-      >
-        {PREVIEW_MODES.map(mode =>
-          <DropdownItem
-            aria-label={getPreviewModeName(mode, true)}
-            key={mode}
-          >
+      <DropdownSection aria-label="Preview Mode Section" title="Preview Mode">
+        {PREVIEW_MODES.map(mode => (
+          <DropdownItem aria-label={getPreviewModeName(mode, true)} key={mode}>
             <ItemContent
               icon={previewMode === mode ? 'check' : 'empty'}
               label={getPreviewModeName(mode, true)}
               onClick={() => setPreviewMode(mode)}
             />
           </DropdownItem>
-        )}
+        ))}
       </DropdownSection>
-      <DropdownSection
-        aria-label="Actions Section"
-        title="Actions"
-      >
-        <DropdownItem aria-label='Copy raw response'>
-          <ItemContent
-            icon="copy"
-            label="Copy raw response"
-            onClick={copyToClipboard}
-          />
+      <DropdownSection aria-label="Actions Section" title="Actions">
+        <DropdownItem aria-label="Copy raw response">
+          <ItemContent icon="copy" label="Copy raw response" onClick={copyToClipboard} />
         </DropdownItem>
-        <DropdownItem aria-label='Export raw response'>
-          <ItemContent
-            icon="save"
-            label="Export raw response"
-            onClick={download}
-          />
+        <DropdownItem aria-label="Export raw response">
+          <ItemContent icon="save" label="Export raw response" onClick={download} />
         </DropdownItem>
       </DropdownSection>
     </Dropdown>
diff --git a/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx b/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
index e8301df1c3..69ed76481f 100644
--- a/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
+++ b/packages/insomnia/src/ui/components/websockets/websocket-request-pane.tsx
@@ -12,7 +12,12 @@ import type { WebSocketRequest } from '../../../models/websocket-request';
 import { getAuthObjectOrNull } from '../../../network/authentication';
 import { RenderError } from '../../../templating/render-error';
 import { tryToInterpolateRequestOrShowRenderErrorModal } from '../../../utils/try-interpolate';
-import { buildQueryStringFromParams, deconstructQueryStringToParams, extractQueryStringFromUrl, joinUrlAndQueryString } from '../../../utils/url/querystring';
+import {
+  buildQueryStringFromParams,
+  deconstructQueryStringToParams,
+  extractQueryStringFromUrl,
+  joinUrlAndQueryString,
+} from '../../../utils/url/querystring';
 import { useReadyState } from '../../hooks/use-ready-state';
 import { useRequestPatcher, useSettingsPatcher } from '../../hooks/use-request';
 import { useActiveRequestSyncVCSVersion, useGitVCSVersion } from '../../hooks/use-vcs-version';
@@ -46,7 +51,8 @@ const PaneReadOnlyBanner = () => {
       }}
     >
       <p className="notice info no-margin-top no-margin-bottom">
-        This section is now locked since the connection has already been established. To change these settings, please disconnect first.
+        This section is now locked since the connection has already been established. To change these settings, please
+        disconnect first.
       </p>
     </div>
   );
@@ -59,12 +65,7 @@ interface FormProps {
   workspaceId: string;
 }
 
-const WebSocketRequestForm: FC<FormProps> = ({
-  request,
-  previewMode,
-  environmentId,
-  workspaceId,
-}) => {
+const WebSocketRequestForm: FC<FormProps> = ({ request, previewMode, environmentId, workspaceId }) => {
   const editorRef = useRef<CodeEditorHandle>(null);
 
   useEffect(() => {
@@ -152,7 +153,7 @@ const WebSocketRequestForm: FC<FormProps> = ({
         event.preventDefault();
         interpolateOpenAndSend(editorRef.current?.getValue() || '');
       }}
-      className="w-full h-full relative box-border"
+      className="relative box-border h-full w-full"
     >
       <CodeEditor
         id="websocket-message-editor"
@@ -179,7 +180,12 @@ interface Props {
 export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
   const { activeRequest, activeRequestMeta } = useRouteLoaderData('request/:requestId') as WebSocketRequestLoaderData;
 
-  const { workspaceId, requestId } = useParams() as { organizationId: string; projectId: string; workspaceId: string; requestId: string };
+  const { workspaceId, requestId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+    requestId: string;
+  };
   const readyState = useReadyState({ requestId: activeRequest._id, protocol: 'webSocket' });
   const { settings } = useRootLoaderData();
 
@@ -245,10 +251,7 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
 
     // Remove the search string (?foo=bar&...) from the Url
     const url = activeRequest.url.replace(`?${query}`, '');
-    const parameters = [
-      ...activeRequest.parameters,
-      ...deconstructQueryStringToParams(query),
-    ];
+    const parameters = [...activeRequest.parameters, ...deconstructQueryStringToParams(query)];
 
     // Only update if url changed
     if (url !== activeRequest.url) {
@@ -277,81 +280,81 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
           onChange={url => patchRequest(requestId, { url })}
         />
       </header>
-      <Tabs aria-label='Websocket request pane tabs' className="flex-1 w-full h-full flex flex-col">
-        <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid  border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+      <Tabs aria-label="Websocket request pane tabs" className="flex h-full w-full flex-1 flex-col">
+        <TabList
+          className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+          aria-label="Request pane tabs"
+        >
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='params'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="params"
           >
             <span>Params</span>
             {parametersCount > 0 && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
                 {parametersCount}
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='content-type'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="content-type"
           >
             <span>Body</span>
-            <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-              <span className='w-2 h-2 bg-green-500 rounded-full' />
+            <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+              <span className="h-2 w-2 rounded-full bg-green-500" />
             </span>
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='auth'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="auth"
           >
             <span>Auth</span>
             {!isNoneOrInherited && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
-                <span className='w-2 h-2 bg-green-500 rounded-full' />
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
+                <span className="h-2 w-2 rounded-full bg-green-500" />
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='headers'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="headers"
           >
             <span>Headers</span>
             {headersCount > 0 && (
-              <span className='p-1 min-w-6 h-6 flex items-center justify-center text-xs rounded-lg border border-solid border-[--hl]'>
+              <span className="flex h-6 min-w-6 items-center justify-center rounded-lg border border-solid border-[--hl] p-1 text-xs">
                 {headersCount}
               </span>
             )}
           </Tab>
           <Tab
-            className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-            id='docs'
+            className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+            id="docs"
           >
             Docs
           </Tab>
         </TabList>
-        <TabPanel className='w-full flex-1 flex flex-col h-full overflow-y-auto' id='params'>
+        <TabPanel className="flex h-full w-full flex-1 flex-col overflow-y-auto" id="params">
           {disabled && <PaneReadOnlyBanner />}
 
-          <div className="p-4 flex-shrink-0">
-            <div className="text-xs max-h-32 flex flex-col overflow-y-auto min-h-[2em] bg-[--hl-xs] px-2 py-1 border border-solid border-[--hl-sm]">
+          <div className="flex-shrink-0 p-4">
+            <div className="flex max-h-32 min-h-[2em] flex-col overflow-y-auto border border-solid border-[--hl-sm] bg-[--hl-xs] px-2 py-1 text-xs">
               <label className="label--small no-pad-top">Url Preview</label>
-              <ErrorBoundary
-                key={uniqueKey}
-                errorClassName="tall wide vertically-align font-error pad text-center"
-              >
+              <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
                 <RenderedQueryString request={activeRequest} />
               </ErrorBoundary>
             </div>
           </div>
-          <PanelGroup className='flex-1 overflow-hidden' direction={'vertical'}>
+          <PanelGroup className="flex-1 overflow-hidden" direction={'vertical'}>
             <Panel minSize={20}>
-              <div className='h-full flex flex-col'>
-                <div className='flex items-center w-full p-4 h-4 justify-between'>
-                  <Heading className='text-xs font-bold uppercase text-[--hl]'>Query parameters</Heading>
-                  <div className='flex items-center gap-2'>
+              <div className="flex h-full flex-col">
+                <div className="flex h-4 w-full items-center justify-between p-4">
+                  <Heading className="text-xs font-bold uppercase text-[--hl]">Query parameters</Heading>
+                  <div className="flex items-center gap-2">
                     <Button
                       isDisabled={disabled || !urlHasQueryParameters}
                       onPress={handleImportQueryFromUrl}
-                      className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 h-full asma-pressed:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
+                      className="asma-pressed:bg-[--hl-sm] flex h-full w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:ring-inset focus:ring-[--hl-md] aria-selected:bg-[--hl-xs] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
                     >
                       Import from URL
                     </Button>
@@ -363,43 +366,38 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
                         });
                       }}
                       isSelected={settings.useBulkParametersEditor}
-                      className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 h-full rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
+                      className="flex h-full w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                     >
                       {({ isSelected }) => (
                         <Fragment>
-                          <Icon icon={isSelected ? 'toggle-on' : 'toggle-off'} className={`${isSelected ? 'text-[--color-success]' : ''}`} />
-                          <span>{
-                            isSelected ? 'Regular Edit' : 'Bulk Edit'
-                          }</span>
+                          <Icon
+                            icon={isSelected ? 'toggle-on' : 'toggle-off'}
+                            className={`${isSelected ? 'text-[--color-success]' : ''}`}
+                          />
+                          <span>{isSelected ? 'Regular Edit' : 'Bulk Edit'}</span>
                         </Fragment>
                       )}
                     </ToggleButton>
                   </div>
                 </div>
-                <ErrorBoundary
-                  key={uniqueKey}
-                  errorClassName="tall wide vertically-align font-error pad text-center"
-                >
-                  <RequestParametersEditor
-                    bulk={settings.useBulkParametersEditor}
-                    disabled={disabled}
-                  />
+                <ErrorBoundary key={uniqueKey} errorClassName="tall wide vertically-align font-error pad text-center">
+                  <RequestParametersEditor bulk={settings.useBulkParametersEditor} disabled={disabled} />
                 </ErrorBoundary>
               </div>
             </Panel>
-            <PanelResizeHandle className='w-full h-[1px] bg-[--hl-md]' />
+            <PanelResizeHandle className="h-[1px] w-full bg-[--hl-md]" />
             <Panel minSize={20}>
-              <div className='h-full flex flex-col'>
-                <Heading className='text-xs font-bold uppercase text-[--hl] p-4'>Path parameters</Heading>
+              <div className="flex h-full flex-col">
+                <Heading className="p-4 text-xs font-bold uppercase text-[--hl]">Path parameters</Heading>
                 {pathParameters.length > 0 && (
-                  <div className="pr-[72.73px] w-full overflow-y-auto pl-4">
-                    <div className='grid gap-x-[20.8px] grid-cols-2 flex-shrink-0 w-full rounded-sm overflow-hidden'>
+                  <div className="w-full overflow-y-auto pl-4 pr-[72.73px]">
+                    <div className="grid w-full flex-shrink-0 grid-cols-2 gap-x-[20.8px] overflow-hidden rounded-sm">
                       {pathParameters.map(pathParameter => (
                         <Fragment key={pathParameter.name}>
-                          <span className='p-2 select-none border-b border-solid border-[--hl-md] truncate flex items-center justify-end rounded-sm'>
+                          <span className="flex select-none items-center justify-end truncate rounded-sm border-b border-solid border-[--hl-md] p-2">
                             {pathParameter.name}
                           </span>
-                          <div className='px-2 flex items-center h-full border-b border-solid border-[--hl-md]'>
+                          <div className="flex h-full items-center border-b border-solid border-[--hl-md] px-2">
                             <OneLineEditor
                               readOnly={disabled}
                               key={activeRequest._id}
@@ -407,7 +405,9 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
                               placeholder="Parameter value"
                               defaultValue={pathParameter.value || ''}
                               onChange={name => {
-                                onPathParameterChange(pathParameters.map(p => p.name === pathParameter.name ? { ...p, value: name } : p));
+                                onPathParameterChange(
+                                  pathParameters.map(p => (p.name === pathParameter.name ? { ...p, value: name } : p)),
+                                );
                               }}
                             />
                           </div>
@@ -417,14 +417,14 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
                   </div>
                 )}
                 {pathParameters.length === 0 && !dismissPathParameterTip && (
-                  <div className='text-sm text-[--hl] rounded-sm border border-solid border-[--hl-md] p-2 flex items-center gap-2'>
-                    <Icon icon='info-circle' />
+                  <div className="flex items-center gap-2 rounded-sm border border-solid border-[--hl-md] p-2 text-sm text-[--hl]">
+                    <Icon icon="info-circle" />
                     <span>Path parameters are url path segments that start with a colon ':' e.g. ':id' </span>
                     <Button
-                      className="flex flex-shrink-0 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] ml-auto"
+                      className="ml-auto flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-[--color-font] hover:bg-[--hl-xs] aria-pressed:bg-[--hl-sm]"
                       onPress={() => setDismissPathParameterTip('true')}
                     >
-                      <Icon icon='close' />
+                      <Icon icon="close" />
                     </Button>
                   </div>
                 )}
@@ -432,11 +432,11 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
             </Panel>
           </PanelGroup>
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col' id='content-type'>
-          <Toolbar className="w-full flex-shrink-0 px-2 border-b border-solid border-[--hl-md] py-2 h-[--line-height-sm] flex items-center gap-2 justify-between">
+        <TabPanel className="flex w-full flex-1 flex-col" id="content-type">
+          <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center justify-between gap-2 border-b border-solid border-[--hl-md] px-2 py-2">
             <WebSocketPreviewMode previewMode={previewMode} onSelect={changeMode} />
             <button
-              className='hover:brightness-75'
+              className="hover:brightness-75"
               style={{
                 padding: '0 var(--padding-md)',
                 marginLeft: 'var(--padding-xs)',
@@ -460,7 +460,7 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
             workspaceId={workspaceId}
           />
         </TabPanel>
-        <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='auth'>
+        <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="auth">
           {disabled && <PaneReadOnlyBanner />}
           <AuthWrapper
             key={uniqueKey}
@@ -469,7 +469,7 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
             authTypes={supportedAuthTypes}
           />
         </TabPanel>
-        <TabPanel className='w-full flex-1 overflow-y-auto' id='headers'>
+        <TabPanel className="w-full flex-1 overflow-y-auto" id="headers">
           {disabled && <PaneReadOnlyBanner />}
           <RequestHeadersEditor
             key={uniqueKey}
@@ -479,7 +479,7 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
             requestType="WebSocketRequest"
           />
         </TabPanel>
-        <TabPanel className='w-full flex-1 overflow-y-auto' id='docs'>
+        <TabPanel className="w-full flex-1 overflow-y-auto" id="docs">
           <MarkdownEditor
             key={uniqueKey}
             placeholder="Write a description"
@@ -489,10 +489,7 @@ export const WebSocketRequestPane: FC<Props> = ({ environment }) => {
         </TabPanel>
       </Tabs>
       {isRequestSettingsModalOpen && (
-        <RequestSettingsModal
-          request={activeRequest}
-          onHide={() => setIsRequestSettingsModalOpen(false)}
-        />
+        <RequestSettingsModal request={activeRequest} onHide={() => setIsRequestSettingsModalOpen(false)} />
       )}
     </Pane>
   );
diff --git a/packages/insomnia/src/ui/context/app/ai-context.tsx b/packages/insomnia/src/ui/context/app/ai-context.tsx
index 67b63293f7..2a340ab3a7 100644
--- a/packages/insomnia/src/ui/context/app/ai-context.tsx
+++ b/packages/insomnia/src/ui/context/app/ai-context.tsx
@@ -5,8 +5,8 @@ import { useRootLoaderData } from '../../routes/root';
 
 const AIContext = createContext({
   generating: false,
-  generateTests: () => { },
-  generateTestsFromSpec: () => { },
+  generateTests: () => {},
+  generateTestsFromSpec: () => {},
   access: {
     enabled: false,
     loading: false,
@@ -18,11 +18,7 @@ const AIContext = createContext({
 });
 
 export const AIProvider: FC<PropsWithChildren> = ({ children }) => {
-  const {
-    organizationId,
-    projectId,
-    workspaceId,
-  } = useParams() as {
+  const { organizationId, projectId, workspaceId } = useParams() as {
     organizationId: string;
     projectId: string;
     workspaceId: string;
@@ -36,7 +32,9 @@ export const AIProvider: FC<PropsWithChildren> = ({ children }) => {
   const aiAccessFetcher = useFetcher();
   const aiGenerateTestsFetcher = useFetcher();
   const aiGenerateTestsFromSpecFetcher = useFetcher();
-  const loading = useFetchers().filter(loader => loader.formAction?.includes('/ai/generate/')).some(loader => loader.state !== 'idle');
+  const loading = useFetchers()
+    .filter(loader => loader.formAction?.includes('/ai/generate/'))
+    .some(loader => loader.state !== 'idle');
 
   const previousOrganizationIdRef = useRef(organizationId);
 
@@ -50,10 +48,13 @@ export const AIProvider: FC<PropsWithChildren> = ({ children }) => {
 
     if (fetcherHasNotRun || organizationIdHasChanged) {
       previousOrganizationIdRef.current = organizationId;
-      aiAccessFetcher.submit({}, {
-        method: 'post',
-        action: `/organization/${organizationId}/ai/access`,
-      });
+      aiAccessFetcher.submit(
+        {},
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/ai/access`,
+        },
+      );
     }
   }, [aiAccessFetcher, organizationId, userSession.id]);
 
@@ -65,11 +66,13 @@ export const AIProvider: FC<PropsWithChildren> = ({ children }) => {
     if (aiGenerateTestsProgressStream) {
       const progress = aiGenerateTestsProgressStream.readable;
 
-      progress.pipeTo(new WritableStream({
-        write: (chunk: any) => {
-          setProgress(chunk);
-        },
-      }));
+      progress.pipeTo(
+        new WritableStream({
+          write: (chunk: any) => {
+            setProgress(chunk);
+          },
+        }),
+      );
     }
   }, [aiGenerateTestsProgressStream]);
 
@@ -79,11 +82,13 @@ export const AIProvider: FC<PropsWithChildren> = ({ children }) => {
     if (aiGenerateTestsFromSpecProgressStream) {
       const progress = aiGenerateTestsFromSpecProgressStream.readable;
 
-      progress.pipeTo(new WritableStream({
-        write: (chunk: any) => {
-          setProgress(chunk);
-        },
-      }));
+      progress.pipeTo(
+        new WritableStream({
+          write: (chunk: any) => {
+            setProgress(chunk);
+          },
+        }),
+      );
     }
   }, [aiGenerateTestsFromSpecProgressStream]);
 
@@ -93,16 +98,22 @@ export const AIProvider: FC<PropsWithChildren> = ({ children }) => {
         generating: loading || (progress.total > 0 && progress.progress < progress.total),
         progress,
         generateTests: () => {
-          aiGenerateTestsFetcher.submit({}, {
-            method: 'post',
-            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/ai/generate/tests`,
-          });
+          aiGenerateTestsFetcher.submit(
+            {},
+            {
+              method: 'post',
+              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/ai/generate/tests`,
+            },
+          );
         },
         generateTestsFromSpec: () => {
-          aiGenerateTestsFromSpecFetcher.submit({}, {
-            method: 'post',
-            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/ai/generate/collection-and-tests`,
-          });
+          aiGenerateTestsFromSpecFetcher.submit(
+            {},
+            {
+              method: 'post',
+              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/ai/generate/collection-and-tests`,
+            },
+          );
         },
         access: {
           enabled: isAIEnabled,
diff --git a/packages/insomnia/src/ui/context/app/insomnia-event-stream-context.tsx b/packages/insomnia/src/ui/context/app/insomnia-event-stream-context.tsx
index 8736492e23..d344c47bf8 100644
--- a/packages/insomnia/src/ui/context/app/insomnia-event-stream-context.tsx
+++ b/packages/insomnia/src/ui/context/app/insomnia-event-stream-context.tsx
@@ -28,29 +28,29 @@ interface TeamProjectChangedEvent {
 }
 
 interface FileDeletedEvent {
-  'topic': string;
-  'type': 'FileDeleted';
-  'team': string;
-  'project': string;
-  'file': string;
+  topic: string;
+  type: 'FileDeleted';
+  team: string;
+  project: string;
+  file: string;
 }
 
 interface BranchDeletedEvent {
-  'topic': string;
-  'type': 'BranchDeleted';
-  'team': string;
-  'project': string;
-  'file': string;
-  'branch': string;
+  topic: string;
+  type: 'BranchDeleted';
+  team: string;
+  project: string;
+  file: string;
+  branch: string;
 }
 
 interface FileChangedEvent {
-  'topic': string;
-  'type': 'FileChanged';
-  'team': string;
-  'project': string;
-  'file': string;
-  'branch': string;
+  topic: string;
+  type: 'FileChanged';
+  team: string;
+  project: string;
+  file: string;
+  branch: string;
 }
 
 interface VaultKeyChangeEvent {
@@ -75,14 +75,10 @@ interface UserPresenceEvent extends UserPresence {
 }
 
 export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children }) => {
-  const {
-    organizationId,
-    projectId,
-    workspaceId,
-  } = useParams() as {
+  const { organizationId, projectId, workspaceId } = useParams() as {
     organizationId: string;
-      projectId: string;
-      workspaceId: string;
+    projectId: string;
+    workspaceId: string;
   };
 
   const { userSession } = useRootLoaderData();
@@ -105,15 +101,15 @@ export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children })
         try {
           const response = await insomniaFetch<{
             data?: UserPresence[];
-            }>({
-              path: `/v1/organizations/${sanitizeTeamId(organizationId)}/collaborators`,
-              method: 'POST',
-              sessionId,
-              data: {
-                project: remoteId,
-                file: workspaceId,
-              },
-            });
+          }>({
+            path: `/v1/organizations/${sanitizeTeamId(organizationId)}/collaborators`,
+            method: 'POST',
+            sessionId,
+            data: {
+              project: remoteId,
+              file: workspaceId,
+            },
+          });
 
           const rows = response?.data || [];
           if (rows.length > 0) {
@@ -132,23 +128,33 @@ export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children })
     const sessionId = userSession.id;
     if (sessionId) {
       try {
-        const source = new EventSource(`insomnia-event-source://v1/teams/${sanitizeTeamId(organizationId)}/streams?sessionId=${sessionId}`);
+        const source = new EventSource(
+          `insomnia-event-source://v1/teams/${sanitizeTeamId(organizationId)}/streams?sessionId=${sessionId}`,
+        );
 
         source.addEventListener('message', e => {
           try {
-            const event = JSON.parse(e.data) as UserPresenceEvent | TeamProjectChangedEvent | FileDeletedEvent | BranchDeletedEvent | FileChangedEvent | VaultKeyChangeEvent;
+            const event = JSON.parse(e.data) as
+              | UserPresenceEvent
+              | TeamProjectChangedEvent
+              | FileDeletedEvent
+              | BranchDeletedEvent
+              | FileChangedEvent
+              | VaultKeyChangeEvent;
             if (event.type === 'PresentUserLeave') {
-              setPresence(prev => prev.filter(p => {
-                const isSameUser = p.acct === event.acct;
-                const isSameProjectFile = p.file === event.file && p.project === event.project;
+              setPresence(prev =>
+                prev.filter(p => {
+                  const isSameUser = p.acct === event.acct;
+                  const isSameProjectFile = p.file === event.file && p.project === event.project;
 
-                // Remove any presence events we have for the same user in this project/file
-                if (isSameUser && isSameProjectFile) {
-                  return false;
-                }
+                  // Remove any presence events we have for the same user in this project/file
+                  if (isSameUser && isSameProjectFile) {
+                    return false;
+                  }
 
-                return true;
-              }));
+                  return true;
+                }),
+              );
             } else if (event.type === 'PresentStateChanged') {
               setPresence(prev => {
                 if (!prev.find(p => p.avatar === event.avatar)) {
@@ -161,43 +167,73 @@ export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children })
               if (event.avatar) {
                 window.setTimeout(() => avatarImageCache.invalidate(event.avatar), CDN_INVALIDATION_TTL);
               }
-              syncOrganizationsFetcher.submit({}, {
-                action: '/organization/sync',
-                method: 'POST',
-              });
+              syncOrganizationsFetcher.submit(
+                {},
+                {
+                  action: '/organization/sync',
+                  method: 'POST',
+                },
+              );
             } else if (event.type === 'StorageRuleChanged' && event.team && event.team.includes('org_')) {
               const orgId = event.team;
 
-              syncStorageRuleFetcher.submit({}, {
-                action: `/organization/${orgId}/sync-storage-rule`,
-                method: 'POST',
-              });
+              syncStorageRuleFetcher.submit(
+                {},
+                {
+                  action: `/organization/${orgId}/sync-storage-rule`,
+                  method: 'POST',
+                },
+              );
             } else if (event.type === 'TeamProjectChanged' && event.team === organizationId) {
-              syncProjectsFetcher.submit({}, {
-                action: `/organization/${organizationId}/sync-projects`,
-                method: 'POST',
-              });
-            } else if (event.type === 'FileDeleted' && event.team === organizationId && remoteId && event.project === remoteId) {
-              syncProjectsFetcher.submit({}, {
-                action: `/organization/${organizationId}/sync-projects`,
-                method: 'POST',
-              });
+              syncProjectsFetcher.submit(
+                {},
+                {
+                  action: `/organization/${organizationId}/sync-projects`,
+                  method: 'POST',
+                },
+              );
+            } else if (
+              event.type === 'FileDeleted' &&
+              event.team === organizationId &&
+              remoteId &&
+              event.project === remoteId
+            ) {
+              syncProjectsFetcher.submit(
+                {},
+                {
+                  action: `/organization/${organizationId}/sync-projects`,
+                  method: 'POST',
+                },
+              );
             } else if (event.type === 'VaultKeyChanged') {
               const accountId = userSession.accountId;
-              const organizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
-              clearVaultKeyFetcher.submit({
-                organizations: organizations?.map(org => org.id) || [],
-                sessionId: event.sessionId,
-              }, {
-                action: '/auth/clearVaultKey',
-                method: 'POST',
-                encType: 'application/json',
-              });
-            } else if (['BranchDeleted', 'FileChanged'].includes(event.type) && event.team === organizationId && remoteId && event.project === remoteId) {
-              syncDataFetcher.submit({}, {
-                method: 'POST',
-                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/sync-data`,
-              });
+              const organizations = JSON.parse(
+                localStorage.getItem(`${accountId}:organizations`) || '[]',
+              ) as Organization[];
+              clearVaultKeyFetcher.submit(
+                {
+                  organizations: organizations?.map(org => org.id) || [],
+                  sessionId: event.sessionId,
+                },
+                {
+                  action: '/auth/clearVaultKey',
+                  method: 'POST',
+                  encType: 'application/json',
+                },
+              );
+            } else if (
+              ['BranchDeleted', 'FileChanged'].includes(event.type) &&
+              event.team === organizationId &&
+              remoteId &&
+              event.project === remoteId
+            ) {
+              syncDataFetcher.submit(
+                {},
+                {
+                  method: 'POST',
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/insomnia-sync/sync-data`,
+                },
+              );
             }
           } catch (e) {
             console.log('[sse] Error parsing response from SSE', e);
@@ -212,7 +248,19 @@ export const InsomniaEventStreamProvider: FC<PropsWithChildren> = ({ children })
       }
     }
     return;
-  }, [clearVaultKeyFetcher, organizationId, projectId, remoteId, syncDataFetcher, syncOrganizationsFetcher, syncProjectsFetcher, syncStorageRuleFetcher, userSession.accountId, userSession.id, workspaceId]);
+  }, [
+    clearVaultKeyFetcher,
+    organizationId,
+    projectId,
+    remoteId,
+    syncDataFetcher,
+    syncOrganizationsFetcher,
+    syncProjectsFetcher,
+    syncStorageRuleFetcher,
+    userSession.accountId,
+    userSession.id,
+    workspaceId,
+  ]);
 
   return (
     <InsomniaEventStreamContext.Provider
diff --git a/packages/insomnia/src/ui/context/app/insomnia-tab-context.tsx b/packages/insomnia/src/ui/context/app/insomnia-tab-context.tsx
index 1bee7b70d1..0bbec8f4f9 100644
--- a/packages/insomnia/src/ui/context/app/insomnia-tab-context.tsx
+++ b/packages/insomnia/src/ui/context/app/insomnia-tab-context.tsx
@@ -37,18 +37,15 @@ const InsomniaTabContext = createContext<ContextProps>({
     tabList: [],
     activeTabId: '',
   },
-  closeTabById: () => { },
-  addTab: () => { },
-  changeActiveTab: () => { },
+  closeTabById: () => {},
+  addTab: () => {},
+  changeActiveTab: () => {},
 });
 
 type InsomniaTabs = Record<string, OrganizationTabs>;
 
 export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
-  const {
-    organizationId,
-    projectId,
-  } = useParams() as {
+  const { organizationId, projectId } = useParams() as {
     organizationId: string;
     projectId: string;
     workspaceId: string;
@@ -62,144 +59,165 @@ export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const navigate = useNavigate();
 
-  const updateInsomniaTabs = useCallback(({ organizationId, tabList, activeTabId }: UpdateInsomniaTabParams) => {
-    const newState = {
-      ...appTabsRef.current,
-      [organizationId]: {
-        tabList,
-        activeTabId,
-      },
-    };
-    appTabsRef.current = newState;
-    setAppTabs(newState);
-  }, [setAppTabs]);
+  const updateInsomniaTabs = useCallback(
+    ({ organizationId, tabList, activeTabId }: UpdateInsomniaTabParams) => {
+      const newState = {
+        ...appTabsRef.current,
+        [organizationId]: {
+          tabList,
+          activeTabId,
+        },
+      };
+      appTabsRef.current = newState;
+      setAppTabs(newState);
+    },
+    [setAppTabs],
+  );
 
-  const addTab = useCallback((tab: BaseTab) => {
-    const currentTabs = appTabsRef?.current?.[organizationId] || { tabList: [], activeTabId: '' };
+  const addTab = useCallback(
+    (tab: BaseTab) => {
+      const currentTabs = appTabsRef?.current?.[organizationId] || { tabList: [], activeTabId: '' };
 
-    if (tab.temporary) {
-      // If the tab is temporary, replace the existing temporary tab
-      const temporaryIndex = currentTabs.tabList.findIndex(t => t.temporary);
-      if (temporaryIndex !== -1) {
-        const newTabList = [...currentTabs.tabList];
-        newTabList.splice(temporaryIndex, 1, tab);
-        updateInsomniaTabs({
-          organizationId,
-          tabList: newTabList,
-          activeTabId: tab.id,
-        });
+      if (tab.temporary) {
+        // If the tab is temporary, replace the existing temporary tab
+        const temporaryIndex = currentTabs.tabList.findIndex(t => t.temporary);
+        if (temporaryIndex !== -1) {
+          const newTabList = [...currentTabs.tabList];
+          newTabList.splice(temporaryIndex, 1, tab);
+          updateInsomniaTabs({
+            organizationId,
+            tabList: newTabList,
+            activeTabId: tab.id,
+          });
+          return;
+        }
+      }
+      updateInsomniaTabs({
+        organizationId,
+        tabList: [...currentTabs.tabList, tab],
+        activeTabId: tab.id,
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
+
+  const closeTabById = useCallback(
+    (id: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
         return;
       }
-    }
-    updateInsomniaTabs({
-      organizationId,
-      tabList: [...currentTabs.tabList, tab],
-      activeTabId: tab.id,
-    });
-  }, [organizationId, updateInsomniaTabs]);
 
-  const closeTabById = useCallback((id: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
+      // If the tab being deleted is the only tab and is active, navigate to the project dashboard
+      if (currentTabs.activeTabId === id && currentTabs.tabList.length === 1) {
+        if (!isScratchpadOrganizationId(organizationId)) {
+          navigate(`/organization/${organizationId}/project/${projectId}`);
+        }
+        updateInsomniaTabs({
+          organizationId,
+          tabList: [],
+          activeTabId: '',
+        });
+        uiEventBus.emit('CLOSE_TAB', organizationId, [id]);
+        return;
+      }
 
-    // If the tab being deleted is the only tab and is active, navigate to the project dashboard
-    if (currentTabs.activeTabId === id && currentTabs.tabList.length === 1) {
-      if (!isScratchpadOrganizationId(organizationId)) {
-        navigate(`/organization/${organizationId}/project/${projectId}`);
+      const index = currentTabs.tabList.findIndex(tab => tab.id === id);
+      if (index === -1) {
+        return;
+      }
+      const newTabList = currentTabs.tabList.filter(tab => tab.id !== id);
+      if (currentTabs.activeTabId === id) {
+        const url = newTabList[Math.max(index - 1, 0)]?.url;
+        navigate(url);
       }
       updateInsomniaTabs({
         organizationId,
-        tabList: [],
-        activeTabId: '',
+        tabList: newTabList,
+        activeTabId:
+          currentTabs.activeTabId === id ? newTabList[Math.max(index - 1, 0)]?.id : (currentTabs.activeTabId as string),
       });
       uiEventBus.emit('CLOSE_TAB', organizationId, [id]);
-      return;
-    }
+    },
+    [navigate, organizationId, projectId, updateInsomniaTabs],
+  );
 
-    const index = currentTabs.tabList.findIndex(tab => tab.id === id);
-    if (index === -1) {
-      return;
-    }
-    const newTabList = currentTabs.tabList.filter(tab => tab.id !== id);
-    if (currentTabs.activeTabId === id) {
-      const url = newTabList[Math.max(index - 1, 0)]?.url;
-      navigate(url);
-    }
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId === id ? newTabList[Math.max(index - 1, 0)]?.id : currentTabs.activeTabId as string,
-    });
-    uiEventBus.emit('CLOSE_TAB', organizationId, [id]);
-  }, [navigate, organizationId, projectId, updateInsomniaTabs]);
-
-  const batchCloseTabs = useCallback((deleteIds: string[]) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-
-    if (currentTabs.tabList.every(tab => deleteIds.includes(tab.id))) {
-      if (!isScratchpadOrganizationId(organizationId)) {
-        navigate(`/organization/${organizationId}/project/${projectId}`);
+  const batchCloseTabs = useCallback(
+    (deleteIds: string[]) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
       }
+
+      if (currentTabs.tabList.every(tab => deleteIds.includes(tab.id))) {
+        if (!isScratchpadOrganizationId(organizationId)) {
+          navigate(`/organization/${organizationId}/project/${projectId}`);
+        }
+        updateInsomniaTabs({
+          organizationId,
+          tabList: [],
+          activeTabId: '',
+        });
+        uiEventBus.emit('CLOSE_TAB', organizationId, 'all');
+        return;
+      }
+
+      const index = currentTabs.tabList.findIndex(tab => deleteIds.includes(tab.id));
+      const newTabList = currentTabs.tabList.filter(tab => !deleteIds.includes(tab.id));
+      if (deleteIds.includes(currentTabs.activeTabId || '')) {
+        const url = newTabList[Math.max(index - 1, 0)]?.url;
+        navigate(url);
+      }
+
       updateInsomniaTabs({
         organizationId,
-        tabList: [],
+        tabList: newTabList,
+        activeTabId: deleteIds.includes(currentTabs.activeTabId || '')
+          ? newTabList[Math.max(index - 1, 0)]?.id
+          : (currentTabs.activeTabId as string),
+      });
+      uiEventBus.emit('CLOSE_TAB', organizationId, deleteIds);
+    },
+    [navigate, organizationId, projectId, updateInsomniaTabs],
+  );
+
+  const closeAllTabsUnderWorkspace = useCallback(
+    (workspaceId: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
+      }
+      const closeIds = currentTabs.tabList.filter(tab => tab.workspaceId === workspaceId).map(tab => tab.id);
+      const newTabList = currentTabs.tabList.filter(tab => tab.workspaceId !== workspaceId);
+
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
         activeTabId: '',
       });
-      uiEventBus.emit('CLOSE_TAB', organizationId, 'all');
-      return;
-    }
+      uiEventBus.emit('CLOSE_TAB', organizationId, closeIds);
+    },
+    [organizationId, updateInsomniaTabs],
+  );
 
-    const index = currentTabs.tabList.findIndex(tab => deleteIds.includes(tab.id));
-    const newTabList = currentTabs.tabList.filter(tab => !deleteIds.includes(tab.id));
-    if (deleteIds.includes(currentTabs.activeTabId || '')) {
-      const url = newTabList[Math.max(index - 1, 0)]?.url;
-      navigate(url);
-    }
+  const closeAllTabsUnderProject = useCallback(
+    (projectId: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
+      }
+      const closeIds = currentTabs.tabList.filter(tab => tab.projectId === projectId).map(tab => tab.id);
+      const newTabList = currentTabs.tabList.filter(tab => tab.projectId !== projectId);
 
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: deleteIds.includes(currentTabs.activeTabId || '') ? newTabList[Math.max(index - 1, 0)]?.id : currentTabs.activeTabId as string,
-    });
-    uiEventBus.emit('CLOSE_TAB', organizationId, deleteIds);
-  }, [navigate, organizationId, projectId, updateInsomniaTabs]);
-
-  const closeAllTabsUnderWorkspace = useCallback((workspaceId: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-    const closeIds = currentTabs.tabList.filter(tab => tab.workspaceId === workspaceId).map(tab => tab.id);
-    const newTabList = currentTabs.tabList.filter(tab => tab.workspaceId !== workspaceId);
-
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: '',
-    });
-    uiEventBus.emit('CLOSE_TAB', organizationId, closeIds);
-  }, [organizationId, updateInsomniaTabs]);
-
-  const closeAllTabsUnderProject = useCallback((projectId: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-    const closeIds = currentTabs.tabList.filter(tab => tab.projectId === projectId).map(tab => tab.id);
-    const newTabList = currentTabs.tabList.filter(tab => tab.projectId !== projectId);
-
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: '',
-    });
-    uiEventBus.emit('CLOSE_TAB', organizationId, closeIds);
-  }, [organizationId, updateInsomniaTabs]);
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: '',
+      });
+      uiEventBus.emit('CLOSE_TAB', organizationId, closeIds);
+    },
+    [organizationId, updateInsomniaTabs],
+  );
 
   const closeAllTabs = useCallback(() => {
     if (!isScratchpadOrganizationId(organizationId)) {
@@ -213,171 +231,195 @@ export const InsomniaTabProvider: FC<PropsWithChildren> = ({ children }) => {
     uiEventBus.emit('CLOSE_TAB', organizationId, 'all');
   }, [navigate, organizationId, projectId, updateInsomniaTabs]);
 
-  const closeOtherTabs = useCallback((id: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-    const reservedTab = currentTabs.tabList.find(tab => tab.id === id);
-    if (!reservedTab) {
-      return;
-    }
-
-    if (currentTabs.activeTabId !== id) {
-      navigate(reservedTab.url);
-    }
-    updateInsomniaTabs({
-      organizationId,
-      tabList: [reservedTab],
-      activeTabId: id,
-    });
-    const closeIds = currentTabs.tabList.filter(tab => tab.id !== id).map(tab => tab.id);
-    uiEventBus.emit('CLOSE_TAB', organizationId, closeIds);
-  }, [navigate, organizationId, updateInsomniaTabs]);
-
-  const updateTabById = useCallback((tabId: string, patches: Partial<BaseTab>) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-    const newTabList = currentTabs.tabList.map(tab => {
-      if (tab.id === tabId) {
-        return {
-          ...tab,
-          ...patches,
-        };
+  const closeOtherTabs = useCallback(
+    (id: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
       }
-      return tab;
-    });
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId || '',
-    });
-  }, [organizationId, updateInsomniaTabs]);
-
-  const changeActiveTab = useCallback((id: string, options = { navigate: true }) => {
-    const currentTabs = appTabsRef?.current?.[organizationId] || { tabList: [], activeTabId: '' };
-    if (!currentTabs) {
-      return;
-    }
-    const tab = currentTabs?.tabList.find(tab => tab.id === id);
-    if (options?.navigate && tab?.url) {
-      navigate(tab.url);
-    }
-
-    updateInsomniaTabs({
-      organizationId,
-      tabList: currentTabs.tabList,
-      activeTabId: id,
-    });
-  }, [navigate, organizationId, updateInsomniaTabs]);
-
-  const updateProjectName = useCallback((projectId: string, name: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-
-    if (!currentTabs) {
-      return;
-    }
-    const newTabList = currentTabs.tabList.map(tab => {
-      if (tab.projectId === projectId) {
-        return {
-          ...tab,
-          projectName: name,
-        };
+      const reservedTab = currentTabs.tabList.find(tab => tab.id === id);
+      if (!reservedTab) {
+        return;
       }
-      return tab;
-    });
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId || '',
-    });
-  }, [organizationId, updateInsomniaTabs]);
 
-  const updateWorkspaceName = useCallback((workspaceId: string, name: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-    const newTabList = currentTabs.tabList.map(tab => {
-      if (tab.workspaceId === workspaceId) {
-        return {
-          ...tab,
-          workspaceName: name,
-          name: tab.id === workspaceId ? name : tab.name,
-        };
+      if (currentTabs.activeTabId !== id) {
+        navigate(reservedTab.url);
       }
-      return tab;
-    });
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId || '',
-    });
-  }, [organizationId, updateInsomniaTabs]);
+      updateInsomniaTabs({
+        organizationId,
+        tabList: [reservedTab],
+        activeTabId: id,
+      });
+      const closeIds = currentTabs.tabList.filter(tab => tab.id !== id).map(tab => tab.id);
+      uiEventBus.emit('CLOSE_TAB', organizationId, closeIds);
+    },
+    [navigate, organizationId, updateInsomniaTabs],
+  );
 
-  const batchUpdateTabs = useCallback((updates: { id: string; fields: Partial<BaseTab> }[]) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs) {
-      return;
-    }
-
-    const newTabList = currentTabs.tabList.map(tab => {
-      const update = updates.find(update => update.id === tab.id);
-      if (update) {
-        return {
-          ...tab,
-          ...update.fields,
-        };
+  const updateTabById = useCallback(
+    (tabId: string, patches: Partial<BaseTab>) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
       }
-      return tab;
-    });
+      const newTabList = currentTabs.tabList.map(tab => {
+        if (tab.id === tabId) {
+          return {
+            ...tab,
+            ...patches,
+          };
+        }
+        return tab;
+      });
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: currentTabs.activeTabId || '',
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
 
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId || '',
-    });
-  }, [organizationId, updateInsomniaTabs]);
+  const changeActiveTab = useCallback(
+    (id: string, options = { navigate: true }) => {
+      const currentTabs = appTabsRef?.current?.[organizationId] || { tabList: [], activeTabId: '' };
+      if (!currentTabs) {
+        return;
+      }
+      const tab = currentTabs?.tabList.find(tab => tab.id === id);
+      if (options?.navigate && tab?.url) {
+        navigate(tab.url);
+      }
 
-  const moveBefore = useCallback((targetId: string, movingId: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs || targetId === movingId) {
-      return;
-    }
+      updateInsomniaTabs({
+        organizationId,
+        tabList: currentTabs.tabList,
+        activeTabId: id,
+      });
+    },
+    [navigate, organizationId, updateInsomniaTabs],
+  );
 
-    const newTabList = [...currentTabs.tabList];
-    const movingIndex = newTabList.findIndex(tab => tab.id === movingId);
-    const [movingTab] = newTabList.splice(movingIndex, 1);
-    const targetIndex = newTabList.findIndex(tab => tab.id === targetId);
-    newTabList.splice(targetIndex, 0, movingTab);
+  const updateProjectName = useCallback(
+    (projectId: string, name: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
 
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId || '',
-    });
-  }, [organizationId, updateInsomniaTabs]);
+      if (!currentTabs) {
+        return;
+      }
+      const newTabList = currentTabs.tabList.map(tab => {
+        if (tab.projectId === projectId) {
+          return {
+            ...tab,
+            projectName: name,
+          };
+        }
+        return tab;
+      });
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: currentTabs.activeTabId || '',
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
 
-  const moveAfter = useCallback((targetId: string, movingId: string) => {
-    const currentTabs = appTabsRef?.current?.[organizationId];
-    if (!currentTabs || targetId === movingId) {
-      return;
-    }
+  const updateWorkspaceName = useCallback(
+    (workspaceId: string, name: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
+      }
+      const newTabList = currentTabs.tabList.map(tab => {
+        if (tab.workspaceId === workspaceId) {
+          return {
+            ...tab,
+            workspaceName: name,
+            name: tab.id === workspaceId ? name : tab.name,
+          };
+        }
+        return tab;
+      });
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: currentTabs.activeTabId || '',
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
 
-    const newTabList = [...currentTabs.tabList];
-    const movingIndex = newTabList.findIndex(tab => tab.id === movingId);
-    const [movingTab] = newTabList.splice(movingIndex, 1);
-    const targetIndex = newTabList.findIndex(tab => tab.id === targetId);
-    newTabList.splice(targetIndex + 1, 0, movingTab);
+  const batchUpdateTabs = useCallback(
+    (updates: { id: string; fields: Partial<BaseTab> }[]) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs) {
+        return;
+      }
 
-    updateInsomniaTabs({
-      organizationId,
-      tabList: newTabList,
-      activeTabId: currentTabs.activeTabId || '',
-    });
-  }, [organizationId, updateInsomniaTabs]);
+      const newTabList = currentTabs.tabList.map(tab => {
+        const update = updates.find(update => update.id === tab.id);
+        if (update) {
+          return {
+            ...tab,
+            ...update.fields,
+          };
+        }
+        return tab;
+      });
+
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: currentTabs.activeTabId || '',
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
+
+  const moveBefore = useCallback(
+    (targetId: string, movingId: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs || targetId === movingId) {
+        return;
+      }
+
+      const newTabList = [...currentTabs.tabList];
+      const movingIndex = newTabList.findIndex(tab => tab.id === movingId);
+      const [movingTab] = newTabList.splice(movingIndex, 1);
+      const targetIndex = newTabList.findIndex(tab => tab.id === targetId);
+      newTabList.splice(targetIndex, 0, movingTab);
+
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: currentTabs.activeTabId || '',
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
+
+  const moveAfter = useCallback(
+    (targetId: string, movingId: string) => {
+      const currentTabs = appTabsRef?.current?.[organizationId];
+      if (!currentTabs || targetId === movingId) {
+        return;
+      }
+
+      const newTabList = [...currentTabs.tabList];
+      const movingIndex = newTabList.findIndex(tab => tab.id === movingId);
+      const [movingTab] = newTabList.splice(movingIndex, 1);
+      const targetIndex = newTabList.findIndex(tab => tab.id === targetId);
+      newTabList.splice(targetIndex + 1, 0, movingTab);
+
+      updateInsomniaTabs({
+        organizationId,
+        tabList: newTabList,
+        activeTabId: currentTabs.activeTabId || '',
+      });
+    },
+    [organizationId, updateInsomniaTabs],
+  );
 
   return (
     <InsomniaTabContext.Provider
diff --git a/packages/insomnia/src/ui/context/app/runner-context.tsx b/packages/insomnia/src/ui/context/app/runner-context.tsx
index 2916493f54..c625643fea 100644
--- a/packages/insomnia/src/ui/context/app/runner-context.tsx
+++ b/packages/insomnia/src/ui/context/app/runner-context.tsx
@@ -27,51 +27,56 @@ interface ContextProps {
 }
 const RunnerContext = createContext<ContextProps>({
   runnerStateMap: {},
-  updateRunnerState: () => { },
+  updateRunnerState: () => {},
 });
 
 export const RunnerProvider: FC<PropsWithChildren> = ({ children }) => {
-
   const [runnerState, setRunnerState, runnerStateRef] = useStateRef<RunnerStateMap>({});
 
-  const updateRunnerState = useCallback((organizationId: string, runnerId: string, patch: Partial<RunnerState>) => {
-    setRunnerState(prevState => {
-      const newState = {
-        ...prevState,
-        [organizationId]: {
-          ...prevState[organizationId],
-          [runnerId]: { ...prevState[organizationId]?.[runnerId], ...patch },
-        },
-      };
-      return newState;
-    });
-  }, [setRunnerState]);
-
-  const handleTabClose = useCallback((organizationId: string, ids: 'all' | string[]) => {
-    if (ids === 'all') {
+  const updateRunnerState = useCallback(
+    (organizationId: string, runnerId: string, patch: Partial<RunnerState>) => {
       setRunnerState(prevState => {
-        const newState = { ...prevState };
-        delete newState[organizationId];
+        const newState = {
+          ...prevState,
+          [organizationId]: {
+            ...prevState[organizationId],
+            [runnerId]: { ...prevState[organizationId]?.[runnerId], ...patch },
+          },
+        };
         return newState;
       });
-      return;
-    }
+    },
+    [setRunnerState],
+  );
 
-    setRunnerState(prevState => {
-      const newOrgState = { ...prevState?.[organizationId] };
-      ids.forEach(id => {
-        // runner tab id starts with 'runner' prefix, but the runnerId in this context doesn't have the prefix, so we need to remove it
-        if (id.startsWith('runner')) {
-          const runnerId = id.replace('runner_', '');
-          delete newOrgState[runnerId];
-        }
+  const handleTabClose = useCallback(
+    (organizationId: string, ids: 'all' | string[]) => {
+      if (ids === 'all') {
+        setRunnerState(prevState => {
+          const newState = { ...prevState };
+          delete newState[organizationId];
+          return newState;
+        });
+        return;
+      }
+
+      setRunnerState(prevState => {
+        const newOrgState = { ...prevState?.[organizationId] };
+        ids.forEach(id => {
+          // runner tab id starts with 'runner' prefix, but the runnerId in this context doesn't have the prefix, so we need to remove it
+          if (id.startsWith('runner')) {
+            const runnerId = id.replace('runner_', '');
+            delete newOrgState[runnerId];
+          }
+        });
+        return {
+          ...prevState,
+          [organizationId]: newOrgState,
+        };
       });
-      return {
-        ...prevState,
-        [organizationId]: newOrgState,
-      };
-    });
-  }, [setRunnerState]);
+    },
+    [setRunnerState],
+  );
 
   useEffect(() => {
     uiEventBus.on('CLOSE_TAB', handleTabClose);
diff --git a/packages/insomnia/src/ui/context/nunjucks/nunjucks-enabled-context.tsx b/packages/insomnia/src/ui/context/nunjucks/nunjucks-enabled-context.tsx
index c57e185355..20a2400517 100644
--- a/packages/insomnia/src/ui/context/nunjucks/nunjucks-enabled-context.tsx
+++ b/packages/insomnia/src/ui/context/nunjucks/nunjucks-enabled-context.tsx
@@ -11,11 +11,7 @@ interface NunjucksEnabledState {
 const NunjucksEnabledContext = createContext<NunjucksEnabledState | undefined>(undefined);
 
 export const NunjucksEnabledProvider: FC<PropsWithChildren<Props>> = ({ disable, children }) => {
-  return (
-    <NunjucksEnabledContext.Provider value={{ enabled: !disable }}>
-      {children}
-    </NunjucksEnabledContext.Provider>
-  );
+  return <NunjucksEnabledContext.Provider value={{ enabled: !disable }}>{children}</NunjucksEnabledContext.Provider>;
 };
 
 export const useNunjucksEnabled = () => {
diff --git a/packages/insomnia/src/ui/context/nunjucks/use-nunjucks.ts b/packages/insomnia/src/ui/context/nunjucks/use-nunjucks.ts
index 4f15c43326..df37e542e8 100644
--- a/packages/insomnia/src/ui/context/nunjucks/use-nunjucks.ts
+++ b/packages/insomnia/src/ui/context/nunjucks/use-nunjucks.ts
@@ -33,14 +33,24 @@ export const useNunjucks = (options?: UseNunjucksOptions) => {
       ancestors,
       ...options?.renderContext,
     });
-  }, [requestData?.activeRequest, workspaceData?.activeWorkspace, workspaceData?.activeEnvironment._id, options?.renderContext]);
+  }, [
+    requestData?.activeRequest,
+    workspaceData?.activeWorkspace,
+    workspaceData?.activeEnvironment._id,
+    options?.renderContext,
+  ]);
 
-  const handleGetRenderContext = useCallback(async (contextCacheKey?: string) => {
-    const context = contextCacheKey && getRenderContextPromiseCache[contextCacheKey] ?
-      await getRenderContextPromiseCache[contextCacheKey] : await fetchRenderContext();
-    const keys = getKeys(context, NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME);
-    return { context, keys };
-  }, [fetchRenderContext]);
+  const handleGetRenderContext = useCallback(
+    async (contextCacheKey?: string) => {
+      const context =
+        contextCacheKey && getRenderContextPromiseCache[contextCacheKey]
+          ? await getRenderContextPromiseCache[contextCacheKey]
+          : await fetchRenderContext();
+      const keys = getKeys(context, NUNJUCKS_TEMPLATE_GLOBAL_PROPERTY_NAME);
+      return { context, keys };
+    },
+    [fetchRenderContext],
+  );
   /**
    * Heavily optimized render function
    *
@@ -49,20 +59,23 @@ export const useNunjucks = (options?: UseNunjucksOptions) => {
    * @returns {Promise}
    * @private
    */
-  const handleRender: HandleRender = useCallback(async <T>(obj: T, contextCacheKey: string | null = null) => {
-    if (!contextCacheKey || !getRenderContextPromiseCache[contextCacheKey]) {
-      // NOTE: We're caching promises here to avoid race conditions
-      // @ts-expect-error -- TSCONVERSION contextCacheKey being null used as object index
-      getRenderContextPromiseCache[contextCacheKey] = fetchRenderContext();
-    }
+  const handleRender: HandleRender = useCallback(
+    async <T>(obj: T, contextCacheKey: string | null = null) => {
+      if (!contextCacheKey || !getRenderContextPromiseCache[contextCacheKey]) {
+        // NOTE: We're caching promises here to avoid race conditions
+        // @ts-expect-error -- TSCONVERSION contextCacheKey being null used as object index
+        getRenderContextPromiseCache[contextCacheKey] = fetchRenderContext();
+      }
 
-    // Set timeout to delete the key eventually
-    // @ts-expect-error -- TSCONVERSION contextCacheKey being null used as object index
-    setTimeout(() => delete getRenderContextPromiseCache[contextCacheKey], 5000);
-    // @ts-expect-error -- TSCONVERSION contextCacheKey being null used as object index
-    const context = await getRenderContextPromiseCache[contextCacheKey];
-    return render(obj, context);
-  }, [fetchRenderContext]);
+      // Set timeout to delete the key eventually
+      // @ts-expect-error -- TSCONVERSION contextCacheKey being null used as object index
+      setTimeout(() => delete getRenderContextPromiseCache[contextCacheKey], 5000);
+      // @ts-expect-error -- TSCONVERSION contextCacheKey being null used as object index
+      const context = await getRenderContextPromiseCache[contextCacheKey];
+      return render(obj, context);
+    },
+    [fetchRenderContext],
+  );
 
   return {
     handleRender,
diff --git a/packages/insomnia/src/ui/css/lib/codemirror/codemirror.css b/packages/insomnia/src/ui/css/lib/codemirror/codemirror.css
index ebfe4f697f..2c4fd9c115 100644
--- a/packages/insomnia/src/ui/css/lib/codemirror/codemirror.css
+++ b/packages/insomnia/src/ui/css/lib/codemirror/codemirror.css
@@ -16,7 +16,8 @@
   padding: 0 4px; /* Horizontal padding of content */
 }
 
-.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
   background-color: white; /* The little square between H and V scrollbars */
 }
 
@@ -27,7 +28,8 @@
   background-color: #f7f7f7;
   white-space: nowrap;
 }
-.CodeMirror-linenumbers {}
+.CodeMirror-linenumbers {
+}
 .CodeMirror-linenumber {
   padding: 0 3px 0 5px;
   min-width: 20px;
@@ -36,8 +38,12 @@
   white-space: nowrap;
 }
 
-.CodeMirror-guttermarker { color: black; }
-.CodeMirror-guttermarker-subtle { color: #999; }
+.CodeMirror-guttermarker {
+  color: black;
+}
+.CodeMirror-guttermarker-subtle {
+  color: #999;
+}
 
 /* CURSOR */
 
@@ -68,25 +74,41 @@
   background-color: #7e7;
 }
 @-moz-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
 }
 @-webkit-keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
 }
 @keyframes blink {
-  0% {}
-  50% { background-color: transparent; }
-  100% {}
+  0% {
+  }
+  50% {
+    background-color: transparent;
+  }
+  100% {
+  }
 }
 
 /* Can style cursor different in overwrite (non-insert) mode */
-.CodeMirror-overwrite .CodeMirror-cursor {}
+.CodeMirror-overwrite .CodeMirror-cursor {
+}
 
-.cm-tab { display: inline-block; text-decoration: inherit; }
+.cm-tab {
+  display: inline-block;
+  text-decoration: inherit;
+}
 
 .CodeMirror-ruler {
   border-left: 1px solid #ccc;
@@ -95,48 +117,114 @@
 
 /* DEFAULT THEME */
 
-.cm-s-default .cm-header {color: blue;}
-.cm-s-default .cm-quote {color: #090;}
-.cm-negative {color: #d44;}
-.cm-positive {color: #292;}
-.cm-header, .cm-strong {font-weight: bold;}
-.cm-em {font-style: italic;}
-.cm-link {text-decoration: underline;}
-.cm-strikethrough {text-decoration: line-through;}
+.cm-s-default .cm-header {
+  color: blue;
+}
+.cm-s-default .cm-quote {
+  color: #090;
+}
+.cm-negative {
+  color: #d44;
+}
+.cm-positive {
+  color: #292;
+}
+.cm-header,
+.cm-strong {
+  font-weight: bold;
+}
+.cm-em {
+  font-style: italic;
+}
+.cm-link {
+  text-decoration: underline;
+}
+.cm-strikethrough {
+  text-decoration: line-through;
+}
 
-.cm-s-default .cm-keyword {color: #708;}
-.cm-s-default .cm-atom {color: #219;}
-.cm-s-default .cm-number {color: #164;}
-.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-keyword {
+  color: #708;
+}
+.cm-s-default .cm-atom {
+  color: #219;
+}
+.cm-s-default .cm-number {
+  color: #164;
+}
+.cm-s-default .cm-def {
+  color: #00f;
+}
 .cm-s-default .cm-variable,
 .cm-s-default .cm-punctuation,
 .cm-s-default .cm-property,
-.cm-s-default .cm-operator {}
-.cm-s-default .cm-variable-2 {color: #05a;}
-.cm-s-default .cm-variable-3 {color: #085;}
-.cm-s-default .cm-comment {color: #a50;}
-.cm-s-default .cm-string {color: #a11;}
-.cm-s-default .cm-string-2 {color: #f50;}
-.cm-s-default .cm-meta {color: #555;}
-.cm-s-default .cm-qualifier {color: #555;}
-.cm-s-default .cm-builtin {color: #30a;}
-.cm-s-default .cm-bracket {color: #997;}
-.cm-s-default .cm-tag {color: #170;}
-.cm-s-default .cm-attribute {color: #00c;}
-.cm-s-default .cm-hr {color: #999;}
-.cm-s-default .cm-link {color: #00c;}
+.cm-s-default .cm-operator {
+}
+.cm-s-default .cm-variable-2 {
+  color: #05a;
+}
+.cm-s-default .cm-variable-3 {
+  color: #085;
+}
+.cm-s-default .cm-comment {
+  color: #a50;
+}
+.cm-s-default .cm-string {
+  color: #a11;
+}
+.cm-s-default .cm-string-2 {
+  color: #f50;
+}
+.cm-s-default .cm-meta {
+  color: #555;
+}
+.cm-s-default .cm-qualifier {
+  color: #555;
+}
+.cm-s-default .cm-builtin {
+  color: #30a;
+}
+.cm-s-default .cm-bracket {
+  color: #997;
+}
+.cm-s-default .cm-tag {
+  color: #170;
+}
+.cm-s-default .cm-attribute {
+  color: #00c;
+}
+.cm-s-default .cm-hr {
+  color: #999;
+}
+.cm-s-default .cm-link {
+  color: #00c;
+}
 
-.cm-s-default .cm-error {color: #f00;}
-.cm-invalidchar {color: #f00;}
+.cm-s-default .cm-error {
+  color: #f00;
+}
+.cm-invalidchar {
+  color: #f00;
+}
 
-.CodeMirror-composing { border-bottom: 2px solid; }
+.CodeMirror-composing {
+  border-bottom: 2px solid;
+}
 
 /* Default styles for common addons */
 
-div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
-.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
-.CodeMirror-activeline-background {background: #e8f2ff;}
+div.CodeMirror span.CodeMirror-matchingbracket {
+  color: #0f0;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+  color: #f22;
+}
+.CodeMirror-matchingtag {
+  background: rgba(255, 150, 0, 0.3);
+}
+.CodeMirror-activeline-background {
+  background: #e8f2ff;
+}
 
 /* STOP */
 
@@ -153,7 +241,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: scroll !important; /* Things will break if this is overridden */
   /* 30px is the magic margin used to hide the element's real scrollbars */
   /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -30px; margin-right: -30px;
+  margin-bottom: -30px;
+  margin-right: -30px;
   padding-bottom: 30px;
   height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
@@ -167,30 +256,39 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 /* The fake, visible scrollbars. Used to force redraw during scrolling
    before actual scrolling happens, thus preventing shaking and
    flickering artifacts. */
-.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+.CodeMirror-vscrollbar,
+.CodeMirror-hscrollbar,
+.CodeMirror-scrollbar-filler,
+.CodeMirror-gutter-filler {
   position: absolute;
   z-index: 6;
   display: none;
 }
 .CodeMirror-vscrollbar {
-  right: 0; top: 0;
+  right: 0;
+  top: 0;
   overflow-x: hidden;
   overflow-y: scroll;
 }
 .CodeMirror-hscrollbar {
-  bottom: 0; left: 0;
+  bottom: 0;
+  left: 0;
   overflow-y: hidden;
   overflow-x: scroll;
 }
 .CodeMirror-scrollbar-filler {
-  right: 0; bottom: 0;
+  right: 0;
+  bottom: 0;
 }
 .CodeMirror-gutter-filler {
-  left: 0; bottom: 0;
+  left: 0;
+  bottom: 0;
 }
 
 .CodeMirror-gutters {
-  position: absolute; left: 0; top: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
   z-index: 3;
 }
 .CodeMirror-gutter {
@@ -200,8 +298,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   vertical-align: top;
   margin-bottom: -30px;
   /* Hack to make IE7 behave */
-  *zoom:1;
-  *display:inline;
+  *zoom: 1;
+  *display: inline;
 }
 .CodeMirror-gutter-wrapper {
   position: absolute;
@@ -211,7 +309,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 .CodeMirror-gutter-background {
   position: absolute;
-  top: 0; bottom: 0;
+  top: 0;
+  bottom: 0;
   z-index: 4;
 }
 .CodeMirror-gutter-elt {
@@ -231,7 +330,9 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 }
 .CodeMirror pre {
   /* Reset some styles that the rest of the page might have set */
-  -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
   border-width: 0;
   background: transparent;
   font-family: inherit;
@@ -254,7 +355,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 
 .CodeMirror-linebackground {
   position: absolute;
-  left: 0; right: 0; top: 0; bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
   z-index: 0;
 }
 
@@ -264,7 +368,8 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   overflow: auto;
 }
 
-.CodeMirror-widget {}
+.CodeMirror-widget {
+}
 
 .CodeMirror-code {
   outline: none;
@@ -288,8 +393,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   visibility: hidden;
 }
 
-.CodeMirror-cursor { position: absolute; }
-.CodeMirror-measure pre { position: static; }
+.CodeMirror-cursor {
+  position: absolute;
+}
+.CodeMirror-measure pre {
+  position: static;
+}
 
 div.CodeMirror-cursors {
   visibility: hidden;
@@ -304,22 +413,40 @@ div.CodeMirror-dragcursors {
   visibility: visible;
 }
 
-.CodeMirror-selected { background: #d9d9d9; }
-.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
-.CodeMirror-crosshair { cursor: crosshair; }
-.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
-.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
+.CodeMirror-selected {
+  background: #d9d9d9;
+}
+.CodeMirror-focused .CodeMirror-selected {
+  background: #d7d4f0;
+}
+.CodeMirror-crosshair {
+  cursor: crosshair;
+}
+.CodeMirror-line::selection,
+.CodeMirror-line > span::selection,
+.CodeMirror-line > span > span::selection {
+  background: #d7d4f0;
+}
+.CodeMirror-line::-moz-selection,
+.CodeMirror-line > span::-moz-selection,
+.CodeMirror-line > span > span::-moz-selection {
+  background: #d7d4f0;
+}
 
 .cm-searching {
   background: #ffa;
-  background: rgba(255, 255, 0, .4);
+  background: rgba(255, 255, 0, 0.4);
 }
 
 /* IE7 hack to prevent it from returning funny offsetTops on the spans */
-.CodeMirror span { *vertical-align: text-bottom; }
+.CodeMirror span {
+  *vertical-align: text-bottom;
+}
 
 /* Used to force a border model for a node */
-.cm-force-border { padding-right: .1px; }
+.cm-force-border {
+  padding-right: 0.1px;
+}
 
 @media print {
   /* Hide the cursor when printing */
@@ -329,7 +456,11 @@ div.CodeMirror-dragcursors {
 }
 
 /* See issue #2901 */
-.cm-tab-wrap-hack:after { content: ''; }
+.cm-tab-wrap-hack:after {
+  content: '';
+}
 
 /* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext { background: none; }
+span.CodeMirror-selectedtext {
+  background: none;
+}
diff --git a/packages/insomnia/src/ui/css/lib/codemirror/material.css b/packages/insomnia/src/ui/css/lib/codemirror/material.css
index 91ed6cef29..7d8b58af70 100644
--- a/packages/insomnia/src/ui/css/lib/codemirror/material.css
+++ b/packages/insomnia/src/ui/css/lib/codemirror/material.css
@@ -13,39 +13,97 @@
 }
 .cm-s-material .CodeMirror-gutters {
   background: #263238;
-  color: rgb(83,127,126);
+  color: rgb(83, 127, 126);
   border: none;
 }
-.cm-s-material .CodeMirror-guttermarker, .cm-s-material .CodeMirror-guttermarker-subtle, .cm-s-material .CodeMirror-linenumber { color: rgb(83,127,126); }
-.cm-s-material .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }
-.cm-s-material div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); }
-.cm-s-material.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
-.cm-s-material .CodeMirror-line::selection, .cm-s-material .CodeMirror-line > span::selection, .cm-s-material .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.10); }
-.cm-s-material .CodeMirror-line::-moz-selection, .cm-s-material .CodeMirror-line > span::-moz-selection, .cm-s-material .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
+.cm-s-material .CodeMirror-guttermarker,
+.cm-s-material .CodeMirror-guttermarker-subtle,
+.cm-s-material .CodeMirror-linenumber {
+  color: rgb(83, 127, 126);
+}
+.cm-s-material .CodeMirror-cursor {
+  border-left: 1px solid #f8f8f0;
+}
+.cm-s-material div.CodeMirror-selected {
+  background: rgba(255, 255, 255, 0.15);
+}
+.cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(255, 255, 255, 0.1);
+}
+.cm-s-material .CodeMirror-line::selection,
+.cm-s-material .CodeMirror-line > span::selection,
+.cm-s-material .CodeMirror-line > span > span::selection {
+  background: rgba(255, 255, 255, 0.1);
+}
+.cm-s-material .CodeMirror-line::-moz-selection,
+.cm-s-material .CodeMirror-line > span::-moz-selection,
+.cm-s-material .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(255, 255, 255, 0.1);
+}
 
-.cm-s-material .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0); }
-.cm-s-material .cm-keyword { color: rgba(199, 146, 234, 1); }
-.cm-s-material .cm-operator { color: rgba(233, 237, 237, 1); }
-.cm-s-material .cm-variable-2 { color: #80CBC4; }
-.cm-s-material .cm-variable-3 { color: #82B1FF; }
-.cm-s-material .cm-builtin { color: #DECB6B; }
-.cm-s-material .cm-atom { color: #F77669; }
-.cm-s-material .cm-number { color: #F77669; }
-.cm-s-material .cm-def { color: rgba(233, 237, 237, 1); }
-.cm-s-material .cm-string { color: #C3E88D; }
-.cm-s-material .cm-string-2 { color: #80CBC4; }
-.cm-s-material .cm-comment { color: #546E7A; }
-.cm-s-material .cm-variable { color: #82B1FF; }
-.cm-s-material .cm-tag { color: #80CBC4; }
-.cm-s-material .cm-meta { color: #80CBC4; }
-.cm-s-material .cm-attribute { color: #FFCB6B; }
-.cm-s-material .cm-property { color: #80CBAE; }
-.cm-s-material .cm-qualifier { color: #DECB6B; }
-.cm-s-material .cm-variable-3 { color: #DECB6B; }
-.cm-s-material .cm-tag { color: rgba(255, 83, 112, 1); }
+.cm-s-material .CodeMirror-activeline-background {
+  background: rgba(0, 0, 0, 0);
+}
+.cm-s-material .cm-keyword {
+  color: rgba(199, 146, 234, 1);
+}
+.cm-s-material .cm-operator {
+  color: rgba(233, 237, 237, 1);
+}
+.cm-s-material .cm-variable-2 {
+  color: #80cbc4;
+}
+.cm-s-material .cm-variable-3 {
+  color: #82b1ff;
+}
+.cm-s-material .cm-builtin {
+  color: #decb6b;
+}
+.cm-s-material .cm-atom {
+  color: #f77669;
+}
+.cm-s-material .cm-number {
+  color: #f77669;
+}
+.cm-s-material .cm-def {
+  color: rgba(233, 237, 237, 1);
+}
+.cm-s-material .cm-string {
+  color: #c3e88d;
+}
+.cm-s-material .cm-string-2 {
+  color: #80cbc4;
+}
+.cm-s-material .cm-comment {
+  color: #546e7a;
+}
+.cm-s-material .cm-variable {
+  color: #82b1ff;
+}
+.cm-s-material .cm-tag {
+  color: #80cbc4;
+}
+.cm-s-material .cm-meta {
+  color: #80cbc4;
+}
+.cm-s-material .cm-attribute {
+  color: #ffcb6b;
+}
+.cm-s-material .cm-property {
+  color: #80cbae;
+}
+.cm-s-material .cm-qualifier {
+  color: #decb6b;
+}
+.cm-s-material .cm-variable-3 {
+  color: #decb6b;
+}
+.cm-s-material .cm-tag {
+  color: rgba(255, 83, 112, 1);
+}
 .cm-s-material .cm-error {
-  color: rgba(255, 255, 255, 1.0);
-  background-color: #EC5F67;
+  color: rgba(255, 255, 255, 1);
+  background-color: #ec5f67;
 }
 .cm-s-material .CodeMirror-matchingbracket {
   text-decoration: underline;
diff --git a/packages/insomnia/src/ui/css/lib/fontawesome/css/brands.css b/packages/insomnia/src/ui/css/lib/fontawesome/css/brands.css
index 461edc4274..7cca2ff35a 100644
--- a/packages/insomnia/src/ui/css/lib/fontawesome/css/brands.css
+++ b/packages/insomnia/src/ui/css/lib/fontawesome/css/brands.css
@@ -3,1514 +3,2019 @@
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
  */
-:root, :host {
+:root,
+:host {
   --fa-style-family-brands: 'Font Awesome 6 Brands';
-  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands'; }
+  --fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
+}
 
 @font-face {
   font-family: 'Font Awesome 6 Brands';
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
+  src:
+    url('../webfonts/fa-brands-400.woff2') format('woff2'),
+    url('../webfonts/fa-brands-400.ttf') format('truetype');
+}
 
 .fab,
 .fa-brands {
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa-monero:before {
-  content: "\f3d0"; }
+  content: '\f3d0';
+}
 
 .fa-hooli:before {
-  content: "\f427"; }
+  content: '\f427';
+}
 
 .fa-yelp:before {
-  content: "\f1e9"; }
+  content: '\f1e9';
+}
 
 .fa-cc-visa:before {
-  content: "\f1f0"; }
+  content: '\f1f0';
+}
 
 .fa-lastfm:before {
-  content: "\f202"; }
+  content: '\f202';
+}
 
 .fa-shopware:before {
-  content: "\f5b5"; }
+  content: '\f5b5';
+}
 
 .fa-creative-commons-nc:before {
-  content: "\f4e8"; }
+  content: '\f4e8';
+}
 
 .fa-aws:before {
-  content: "\f375"; }
+  content: '\f375';
+}
 
 .fa-redhat:before {
-  content: "\f7bc"; }
+  content: '\f7bc';
+}
 
 .fa-yoast:before {
-  content: "\f2b1"; }
+  content: '\f2b1';
+}
 
 .fa-cloudflare:before {
-  content: "\e07d"; }
+  content: '\e07d';
+}
 
 .fa-ups:before {
-  content: "\f7e0"; }
+  content: '\f7e0';
+}
 
 .fa-wpexplorer:before {
-  content: "\f2de"; }
+  content: '\f2de';
+}
 
 .fa-dyalog:before {
-  content: "\f399"; }
+  content: '\f399';
+}
 
 .fa-bity:before {
-  content: "\f37a"; }
+  content: '\f37a';
+}
 
 .fa-stackpath:before {
-  content: "\f842"; }
+  content: '\f842';
+}
 
 .fa-buysellads:before {
-  content: "\f20d"; }
+  content: '\f20d';
+}
 
 .fa-first-order:before {
-  content: "\f2b0"; }
+  content: '\f2b0';
+}
 
 .fa-modx:before {
-  content: "\f285"; }
+  content: '\f285';
+}
 
 .fa-guilded:before {
-  content: "\e07e"; }
+  content: '\e07e';
+}
 
 .fa-vnv:before {
-  content: "\f40b"; }
+  content: '\f40b';
+}
 
 .fa-square-js:before {
-  content: "\f3b9"; }
+  content: '\f3b9';
+}
 
 .fa-js-square:before {
-  content: "\f3b9"; }
+  content: '\f3b9';
+}
 
 .fa-microsoft:before {
-  content: "\f3ca"; }
+  content: '\f3ca';
+}
 
 .fa-qq:before {
-  content: "\f1d6"; }
+  content: '\f1d6';
+}
 
 .fa-orcid:before {
-  content: "\f8d2"; }
+  content: '\f8d2';
+}
 
 .fa-java:before {
-  content: "\f4e4"; }
+  content: '\f4e4';
+}
 
 .fa-invision:before {
-  content: "\f7b0"; }
+  content: '\f7b0';
+}
 
 .fa-creative-commons-pd-alt:before {
-  content: "\f4ed"; }
+  content: '\f4ed';
+}
 
 .fa-centercode:before {
-  content: "\f380"; }
+  content: '\f380';
+}
 
 .fa-glide-g:before {
-  content: "\f2a6"; }
+  content: '\f2a6';
+}
 
 .fa-drupal:before {
-  content: "\f1a9"; }
+  content: '\f1a9';
+}
 
 .fa-hire-a-helper:before {
-  content: "\f3b0"; }
+  content: '\f3b0';
+}
 
 .fa-creative-commons-by:before {
-  content: "\f4e7"; }
+  content: '\f4e7';
+}
 
 .fa-unity:before {
-  content: "\e049"; }
+  content: '\e049';
+}
 
 .fa-whmcs:before {
-  content: "\f40d"; }
+  content: '\f40d';
+}
 
 .fa-rocketchat:before {
-  content: "\f3e8"; }
+  content: '\f3e8';
+}
 
 .fa-vk:before {
-  content: "\f189"; }
+  content: '\f189';
+}
 
 .fa-untappd:before {
-  content: "\f405"; }
+  content: '\f405';
+}
 
 .fa-mailchimp:before {
-  content: "\f59e"; }
+  content: '\f59e';
+}
 
 .fa-css3-alt:before {
-  content: "\f38b"; }
+  content: '\f38b';
+}
 
 .fa-square-reddit:before {
-  content: "\f1a2"; }
+  content: '\f1a2';
+}
 
 .fa-reddit-square:before {
-  content: "\f1a2"; }
+  content: '\f1a2';
+}
 
 .fa-vimeo-v:before {
-  content: "\f27d"; }
+  content: '\f27d';
+}
 
 .fa-contao:before {
-  content: "\f26d"; }
+  content: '\f26d';
+}
 
 .fa-square-font-awesome:before {
-  content: "\e5ad"; }
+  content: '\e5ad';
+}
 
 .fa-deskpro:before {
-  content: "\f38f"; }
+  content: '\f38f';
+}
 
 .fa-sistrix:before {
-  content: "\f3ee"; }
+  content: '\f3ee';
+}
 
 .fa-square-instagram:before {
-  content: "\e055"; }
+  content: '\e055';
+}
 
 .fa-instagram-square:before {
-  content: "\e055"; }
+  content: '\e055';
+}
 
 .fa-battle-net:before {
-  content: "\f835"; }
+  content: '\f835';
+}
 
 .fa-the-red-yeti:before {
-  content: "\f69d"; }
+  content: '\f69d';
+}
 
 .fa-square-hacker-news:before {
-  content: "\f3af"; }
+  content: '\f3af';
+}
 
 .fa-hacker-news-square:before {
-  content: "\f3af"; }
+  content: '\f3af';
+}
 
 .fa-edge:before {
-  content: "\f282"; }
+  content: '\f282';
+}
 
 .fa-napster:before {
-  content: "\f3d2"; }
+  content: '\f3d2';
+}
 
 .fa-square-snapchat:before {
-  content: "\f2ad"; }
+  content: '\f2ad';
+}
 
 .fa-snapchat-square:before {
-  content: "\f2ad"; }
+  content: '\f2ad';
+}
 
 .fa-google-plus-g:before {
-  content: "\f0d5"; }
+  content: '\f0d5';
+}
 
 .fa-artstation:before {
-  content: "\f77a"; }
+  content: '\f77a';
+}
 
 .fa-markdown:before {
-  content: "\f60f"; }
+  content: '\f60f';
+}
 
 .fa-sourcetree:before {
-  content: "\f7d3"; }
+  content: '\f7d3';
+}
 
 .fa-google-plus:before {
-  content: "\f2b3"; }
+  content: '\f2b3';
+}
 
 .fa-diaspora:before {
-  content: "\f791"; }
+  content: '\f791';
+}
 
 .fa-foursquare:before {
-  content: "\f180"; }
+  content: '\f180';
+}
 
 .fa-stack-overflow:before {
-  content: "\f16c"; }
+  content: '\f16c';
+}
 
 .fa-github-alt:before {
-  content: "\f113"; }
+  content: '\f113';
+}
 
 .fa-phoenix-squadron:before {
-  content: "\f511"; }
+  content: '\f511';
+}
 
 .fa-pagelines:before {
-  content: "\f18c"; }
+  content: '\f18c';
+}
 
 .fa-algolia:before {
-  content: "\f36c"; }
+  content: '\f36c';
+}
 
 .fa-red-river:before {
-  content: "\f3e3"; }
+  content: '\f3e3';
+}
 
 .fa-creative-commons-sa:before {
-  content: "\f4ef"; }
+  content: '\f4ef';
+}
 
 .fa-safari:before {
-  content: "\f267"; }
+  content: '\f267';
+}
 
 .fa-google:before {
-  content: "\f1a0"; }
+  content: '\f1a0';
+}
 
 .fa-square-font-awesome-stroke:before {
-  content: "\f35c"; }
+  content: '\f35c';
+}
 
 .fa-font-awesome-alt:before {
-  content: "\f35c"; }
+  content: '\f35c';
+}
 
 .fa-atlassian:before {
-  content: "\f77b"; }
+  content: '\f77b';
+}
 
 .fa-linkedin-in:before {
-  content: "\f0e1"; }
+  content: '\f0e1';
+}
 
 .fa-digital-ocean:before {
-  content: "\f391"; }
+  content: '\f391';
+}
 
 .fa-nimblr:before {
-  content: "\f5a8"; }
+  content: '\f5a8';
+}
 
 .fa-chromecast:before {
-  content: "\f838"; }
+  content: '\f838';
+}
 
 .fa-evernote:before {
-  content: "\f839"; }
+  content: '\f839';
+}
 
 .fa-hacker-news:before {
-  content: "\f1d4"; }
+  content: '\f1d4';
+}
 
 .fa-creative-commons-sampling:before {
-  content: "\f4f0"; }
+  content: '\f4f0';
+}
 
 .fa-adversal:before {
-  content: "\f36a"; }
+  content: '\f36a';
+}
 
 .fa-creative-commons:before {
-  content: "\f25e"; }
+  content: '\f25e';
+}
 
 .fa-watchman-monitoring:before {
-  content: "\e087"; }
+  content: '\e087';
+}
 
 .fa-fonticons:before {
-  content: "\f280"; }
+  content: '\f280';
+}
 
 .fa-weixin:before {
-  content: "\f1d7"; }
+  content: '\f1d7';
+}
 
 .fa-shirtsinbulk:before {
-  content: "\f214"; }
+  content: '\f214';
+}
 
 .fa-codepen:before {
-  content: "\f1cb"; }
+  content: '\f1cb';
+}
 
 .fa-git-alt:before {
-  content: "\f841"; }
+  content: '\f841';
+}
 
 .fa-lyft:before {
-  content: "\f3c3"; }
+  content: '\f3c3';
+}
 
 .fa-rev:before {
-  content: "\f5b2"; }
+  content: '\f5b2';
+}
 
 .fa-windows:before {
-  content: "\f17a"; }
+  content: '\f17a';
+}
 
 .fa-wizards-of-the-coast:before {
-  content: "\f730"; }
+  content: '\f730';
+}
 
 .fa-square-viadeo:before {
-  content: "\f2aa"; }
+  content: '\f2aa';
+}
 
 .fa-viadeo-square:before {
-  content: "\f2aa"; }
+  content: '\f2aa';
+}
 
 .fa-meetup:before {
-  content: "\f2e0"; }
+  content: '\f2e0';
+}
 
 .fa-centos:before {
-  content: "\f789"; }
+  content: '\f789';
+}
 
 .fa-adn:before {
-  content: "\f170"; }
+  content: '\f170';
+}
 
 .fa-cloudsmith:before {
-  content: "\f384"; }
+  content: '\f384';
+}
 
 .fa-pied-piper-alt:before {
-  content: "\f1a8"; }
+  content: '\f1a8';
+}
 
 .fa-square-dribbble:before {
-  content: "\f397"; }
+  content: '\f397';
+}
 
 .fa-dribbble-square:before {
-  content: "\f397"; }
+  content: '\f397';
+}
 
 .fa-codiepie:before {
-  content: "\f284"; }
+  content: '\f284';
+}
 
 .fa-node:before {
-  content: "\f419"; }
+  content: '\f419';
+}
 
 .fa-mix:before {
-  content: "\f3cb"; }
+  content: '\f3cb';
+}
 
 .fa-steam:before {
-  content: "\f1b6"; }
+  content: '\f1b6';
+}
 
 .fa-cc-apple-pay:before {
-  content: "\f416"; }
+  content: '\f416';
+}
 
 .fa-scribd:before {
-  content: "\f28a"; }
+  content: '\f28a';
+}
 
 .fa-openid:before {
-  content: "\f19b"; }
+  content: '\f19b';
+}
 
 .fa-instalod:before {
-  content: "\e081"; }
+  content: '\e081';
+}
 
 .fa-expeditedssl:before {
-  content: "\f23e"; }
+  content: '\f23e';
+}
 
 .fa-sellcast:before {
-  content: "\f2da"; }
+  content: '\f2da';
+}
 
 .fa-square-twitter:before {
-  content: "\f081"; }
+  content: '\f081';
+}
 
 .fa-twitter-square:before {
-  content: "\f081"; }
+  content: '\f081';
+}
 
 .fa-r-project:before {
-  content: "\f4f7"; }
+  content: '\f4f7';
+}
 
 .fa-delicious:before {
-  content: "\f1a5"; }
+  content: '\f1a5';
+}
 
 .fa-freebsd:before {
-  content: "\f3a4"; }
+  content: '\f3a4';
+}
 
 .fa-vuejs:before {
-  content: "\f41f"; }
+  content: '\f41f';
+}
 
 .fa-accusoft:before {
-  content: "\f369"; }
+  content: '\f369';
+}
 
 .fa-ioxhost:before {
-  content: "\f208"; }
+  content: '\f208';
+}
 
 .fa-fonticons-fi:before {
-  content: "\f3a2"; }
+  content: '\f3a2';
+}
 
 .fa-app-store:before {
-  content: "\f36f"; }
+  content: '\f36f';
+}
 
 .fa-cc-mastercard:before {
-  content: "\f1f1"; }
+  content: '\f1f1';
+}
 
 .fa-itunes-note:before {
-  content: "\f3b5"; }
+  content: '\f3b5';
+}
 
 .fa-golang:before {
-  content: "\e40f"; }
+  content: '\e40f';
+}
 
 .fa-kickstarter:before {
-  content: "\f3bb"; }
+  content: '\f3bb';
+}
 
 .fa-grav:before {
-  content: "\f2d6"; }
+  content: '\f2d6';
+}
 
 .fa-weibo:before {
-  content: "\f18a"; }
+  content: '\f18a';
+}
 
 .fa-uncharted:before {
-  content: "\e084"; }
+  content: '\e084';
+}
 
 .fa-firstdraft:before {
-  content: "\f3a1"; }
+  content: '\f3a1';
+}
 
 .fa-square-youtube:before {
-  content: "\f431"; }
+  content: '\f431';
+}
 
 .fa-youtube-square:before {
-  content: "\f431"; }
+  content: '\f431';
+}
 
 .fa-wikipedia-w:before {
-  content: "\f266"; }
+  content: '\f266';
+}
 
 .fa-wpressr:before {
-  content: "\f3e4"; }
+  content: '\f3e4';
+}
 
 .fa-rendact:before {
-  content: "\f3e4"; }
+  content: '\f3e4';
+}
 
 .fa-angellist:before {
-  content: "\f209"; }
+  content: '\f209';
+}
 
 .fa-galactic-republic:before {
-  content: "\f50c"; }
+  content: '\f50c';
+}
 
 .fa-nfc-directional:before {
-  content: "\e530"; }
+  content: '\e530';
+}
 
 .fa-skype:before {
-  content: "\f17e"; }
+  content: '\f17e';
+}
 
 .fa-joget:before {
-  content: "\f3b7"; }
+  content: '\f3b7';
+}
 
 .fa-fedora:before {
-  content: "\f798"; }
+  content: '\f798';
+}
 
 .fa-stripe-s:before {
-  content: "\f42a"; }
+  content: '\f42a';
+}
 
 .fa-meta:before {
-  content: "\e49b"; }
+  content: '\e49b';
+}
 
 .fa-laravel:before {
-  content: "\f3bd"; }
+  content: '\f3bd';
+}
 
 .fa-hotjar:before {
-  content: "\f3b1"; }
+  content: '\f3b1';
+}
 
 .fa-bluetooth-b:before {
-  content: "\f294"; }
+  content: '\f294';
+}
 
 .fa-sticker-mule:before {
-  content: "\f3f7"; }
+  content: '\f3f7';
+}
 
 .fa-creative-commons-zero:before {
-  content: "\f4f3"; }
+  content: '\f4f3';
+}
 
 .fa-hips:before {
-  content: "\f452"; }
+  content: '\f452';
+}
 
 .fa-behance:before {
-  content: "\f1b4"; }
+  content: '\f1b4';
+}
 
 .fa-reddit:before {
-  content: "\f1a1"; }
+  content: '\f1a1';
+}
 
 .fa-discord:before {
-  content: "\f392"; }
+  content: '\f392';
+}
 
 .fa-chrome:before {
-  content: "\f268"; }
+  content: '\f268';
+}
 
 .fa-app-store-ios:before {
-  content: "\f370"; }
+  content: '\f370';
+}
 
 .fa-cc-discover:before {
-  content: "\f1f2"; }
+  content: '\f1f2';
+}
 
 .fa-wpbeginner:before {
-  content: "\f297"; }
+  content: '\f297';
+}
 
 .fa-confluence:before {
-  content: "\f78d"; }
+  content: '\f78d';
+}
 
 .fa-mdb:before {
-  content: "\f8ca"; }
+  content: '\f8ca';
+}
 
 .fa-dochub:before {
-  content: "\f394"; }
+  content: '\f394';
+}
 
 .fa-accessible-icon:before {
-  content: "\f368"; }
+  content: '\f368';
+}
 
 .fa-ebay:before {
-  content: "\f4f4"; }
+  content: '\f4f4';
+}
 
 .fa-amazon:before {
-  content: "\f270"; }
+  content: '\f270';
+}
 
 .fa-unsplash:before {
-  content: "\e07c"; }
+  content: '\e07c';
+}
 
 .fa-yarn:before {
-  content: "\f7e3"; }
+  content: '\f7e3';
+}
 
 .fa-square-steam:before {
-  content: "\f1b7"; }
+  content: '\f1b7';
+}
 
 .fa-steam-square:before {
-  content: "\f1b7"; }
+  content: '\f1b7';
+}
 
 .fa-500px:before {
-  content: "\f26e"; }
+  content: '\f26e';
+}
 
 .fa-square-vimeo:before {
-  content: "\f194"; }
+  content: '\f194';
+}
 
 .fa-vimeo-square:before {
-  content: "\f194"; }
+  content: '\f194';
+}
 
 .fa-asymmetrik:before {
-  content: "\f372"; }
+  content: '\f372';
+}
 
 .fa-font-awesome:before {
-  content: "\f2b4"; }
+  content: '\f2b4';
+}
 
 .fa-font-awesome-flag:before {
-  content: "\f2b4"; }
+  content: '\f2b4';
+}
 
 .fa-font-awesome-logo-full:before {
-  content: "\f2b4"; }
+  content: '\f2b4';
+}
 
 .fa-gratipay:before {
-  content: "\f184"; }
+  content: '\f184';
+}
 
 .fa-apple:before {
-  content: "\f179"; }
+  content: '\f179';
+}
 
 .fa-hive:before {
-  content: "\e07f"; }
+  content: '\e07f';
+}
 
 .fa-gitkraken:before {
-  content: "\f3a6"; }
+  content: '\f3a6';
+}
 
 .fa-keybase:before {
-  content: "\f4f5"; }
+  content: '\f4f5';
+}
 
 .fa-apple-pay:before {
-  content: "\f415"; }
+  content: '\f415';
+}
 
 .fa-padlet:before {
-  content: "\e4a0"; }
+  content: '\e4a0';
+}
 
 .fa-amazon-pay:before {
-  content: "\f42c"; }
+  content: '\f42c';
+}
 
 .fa-square-github:before {
-  content: "\f092"; }
+  content: '\f092';
+}
 
 .fa-github-square:before {
-  content: "\f092"; }
+  content: '\f092';
+}
 
 .fa-stumbleupon:before {
-  content: "\f1a4"; }
+  content: '\f1a4';
+}
 
 .fa-fedex:before {
-  content: "\f797"; }
+  content: '\f797';
+}
 
 .fa-phoenix-framework:before {
-  content: "\f3dc"; }
+  content: '\f3dc';
+}
 
 .fa-shopify:before {
-  content: "\e057"; }
+  content: '\e057';
+}
 
 .fa-neos:before {
-  content: "\f612"; }
+  content: '\f612';
+}
 
 .fa-hackerrank:before {
-  content: "\f5f7"; }
+  content: '\f5f7';
+}
 
 .fa-researchgate:before {
-  content: "\f4f8"; }
+  content: '\f4f8';
+}
 
 .fa-swift:before {
-  content: "\f8e1"; }
+  content: '\f8e1';
+}
 
 .fa-angular:before {
-  content: "\f420"; }
+  content: '\f420';
+}
 
 .fa-speakap:before {
-  content: "\f3f3"; }
+  content: '\f3f3';
+}
 
 .fa-angrycreative:before {
-  content: "\f36e"; }
+  content: '\f36e';
+}
 
 .fa-y-combinator:before {
-  content: "\f23b"; }
+  content: '\f23b';
+}
 
 .fa-empire:before {
-  content: "\f1d1"; }
+  content: '\f1d1';
+}
 
 .fa-envira:before {
-  content: "\f299"; }
+  content: '\f299';
+}
 
 .fa-square-gitlab:before {
-  content: "\e5ae"; }
+  content: '\e5ae';
+}
 
 .fa-gitlab-square:before {
-  content: "\e5ae"; }
+  content: '\e5ae';
+}
 
 .fa-studiovinari:before {
-  content: "\f3f8"; }
+  content: '\f3f8';
+}
 
 .fa-pied-piper:before {
-  content: "\f2ae"; }
+  content: '\f2ae';
+}
 
 .fa-wordpress:before {
-  content: "\f19a"; }
+  content: '\f19a';
+}
 
 .fa-product-hunt:before {
-  content: "\f288"; }
+  content: '\f288';
+}
 
 .fa-firefox:before {
-  content: "\f269"; }
+  content: '\f269';
+}
 
 .fa-linode:before {
-  content: "\f2b8"; }
+  content: '\f2b8';
+}
 
 .fa-goodreads:before {
-  content: "\f3a8"; }
+  content: '\f3a8';
+}
 
 .fa-square-odnoklassniki:before {
-  content: "\f264"; }
+  content: '\f264';
+}
 
 .fa-odnoklassniki-square:before {
-  content: "\f264"; }
+  content: '\f264';
+}
 
 .fa-jsfiddle:before {
-  content: "\f1cc"; }
+  content: '\f1cc';
+}
 
 .fa-sith:before {
-  content: "\f512"; }
+  content: '\f512';
+}
 
 .fa-themeisle:before {
-  content: "\f2b2"; }
+  content: '\f2b2';
+}
 
 .fa-page4:before {
-  content: "\f3d7"; }
+  content: '\f3d7';
+}
 
 .fa-hashnode:before {
-  content: "\e499"; }
+  content: '\e499';
+}
 
 .fa-react:before {
-  content: "\f41b"; }
+  content: '\f41b';
+}
 
 .fa-cc-paypal:before {
-  content: "\f1f4"; }
+  content: '\f1f4';
+}
 
 .fa-squarespace:before {
-  content: "\f5be"; }
+  content: '\f5be';
+}
 
 .fa-cc-stripe:before {
-  content: "\f1f5"; }
+  content: '\f1f5';
+}
 
 .fa-creative-commons-share:before {
-  content: "\f4f2"; }
+  content: '\f4f2';
+}
 
 .fa-bitcoin:before {
-  content: "\f379"; }
+  content: '\f379';
+}
 
 .fa-keycdn:before {
-  content: "\f3ba"; }
+  content: '\f3ba';
+}
 
 .fa-opera:before {
-  content: "\f26a"; }
+  content: '\f26a';
+}
 
 .fa-itch-io:before {
-  content: "\f83a"; }
+  content: '\f83a';
+}
 
 .fa-umbraco:before {
-  content: "\f8e8"; }
+  content: '\f8e8';
+}
 
 .fa-galactic-senate:before {
-  content: "\f50d"; }
+  content: '\f50d';
+}
 
 .fa-ubuntu:before {
-  content: "\f7df"; }
+  content: '\f7df';
+}
 
 .fa-draft2digital:before {
-  content: "\f396"; }
+  content: '\f396';
+}
 
 .fa-stripe:before {
-  content: "\f429"; }
+  content: '\f429';
+}
 
 .fa-houzz:before {
-  content: "\f27c"; }
+  content: '\f27c';
+}
 
 .fa-gg:before {
-  content: "\f260"; }
+  content: '\f260';
+}
 
 .fa-dhl:before {
-  content: "\f790"; }
+  content: '\f790';
+}
 
 .fa-square-pinterest:before {
-  content: "\f0d3"; }
+  content: '\f0d3';
+}
 
 .fa-pinterest-square:before {
-  content: "\f0d3"; }
+  content: '\f0d3';
+}
 
 .fa-xing:before {
-  content: "\f168"; }
+  content: '\f168';
+}
 
 .fa-blackberry:before {
-  content: "\f37b"; }
+  content: '\f37b';
+}
 
 .fa-creative-commons-pd:before {
-  content: "\f4ec"; }
+  content: '\f4ec';
+}
 
 .fa-playstation:before {
-  content: "\f3df"; }
+  content: '\f3df';
+}
 
 .fa-quinscape:before {
-  content: "\f459"; }
+  content: '\f459';
+}
 
 .fa-less:before {
-  content: "\f41d"; }
+  content: '\f41d';
+}
 
 .fa-blogger-b:before {
-  content: "\f37d"; }
+  content: '\f37d';
+}
 
 .fa-opencart:before {
-  content: "\f23d"; }
+  content: '\f23d';
+}
 
 .fa-vine:before {
-  content: "\f1ca"; }
+  content: '\f1ca';
+}
 
 .fa-paypal:before {
-  content: "\f1ed"; }
+  content: '\f1ed';
+}
 
 .fa-gitlab:before {
-  content: "\f296"; }
+  content: '\f296';
+}
 
 .fa-typo3:before {
-  content: "\f42b"; }
+  content: '\f42b';
+}
 
 .fa-reddit-alien:before {
-  content: "\f281"; }
+  content: '\f281';
+}
 
 .fa-yahoo:before {
-  content: "\f19e"; }
+  content: '\f19e';
+}
 
 .fa-dailymotion:before {
-  content: "\e052"; }
+  content: '\e052';
+}
 
 .fa-affiliatetheme:before {
-  content: "\f36b"; }
+  content: '\f36b';
+}
 
 .fa-pied-piper-pp:before {
-  content: "\f1a7"; }
+  content: '\f1a7';
+}
 
 .fa-bootstrap:before {
-  content: "\f836"; }
+  content: '\f836';
+}
 
 .fa-odnoklassniki:before {
-  content: "\f263"; }
+  content: '\f263';
+}
 
 .fa-nfc-symbol:before {
-  content: "\e531"; }
+  content: '\e531';
+}
 
 .fa-ethereum:before {
-  content: "\f42e"; }
+  content: '\f42e';
+}
 
 .fa-speaker-deck:before {
-  content: "\f83c"; }
+  content: '\f83c';
+}
 
 .fa-creative-commons-nc-eu:before {
-  content: "\f4e9"; }
+  content: '\f4e9';
+}
 
 .fa-patreon:before {
-  content: "\f3d9"; }
+  content: '\f3d9';
+}
 
 .fa-avianex:before {
-  content: "\f374"; }
+  content: '\f374';
+}
 
 .fa-ello:before {
-  content: "\f5f1"; }
+  content: '\f5f1';
+}
 
 .fa-gofore:before {
-  content: "\f3a7"; }
+  content: '\f3a7';
+}
 
 .fa-bimobject:before {
-  content: "\f378"; }
+  content: '\f378';
+}
 
 .fa-facebook-f:before {
-  content: "\f39e"; }
+  content: '\f39e';
+}
 
 .fa-square-google-plus:before {
-  content: "\f0d4"; }
+  content: '\f0d4';
+}
 
 .fa-google-plus-square:before {
-  content: "\f0d4"; }
+  content: '\f0d4';
+}
 
 .fa-mandalorian:before {
-  content: "\f50f"; }
+  content: '\f50f';
+}
 
 .fa-first-order-alt:before {
-  content: "\f50a"; }
+  content: '\f50a';
+}
 
 .fa-osi:before {
-  content: "\f41a"; }
+  content: '\f41a';
+}
 
 .fa-google-wallet:before {
-  content: "\f1ee"; }
+  content: '\f1ee';
+}
 
 .fa-d-and-d-beyond:before {
-  content: "\f6ca"; }
+  content: '\f6ca';
+}
 
 .fa-periscope:before {
-  content: "\f3da"; }
+  content: '\f3da';
+}
 
 .fa-fulcrum:before {
-  content: "\f50b"; }
+  content: '\f50b';
+}
 
 .fa-cloudscale:before {
-  content: "\f383"; }
+  content: '\f383';
+}
 
 .fa-forumbee:before {
-  content: "\f211"; }
+  content: '\f211';
+}
 
 .fa-mizuni:before {
-  content: "\f3cc"; }
+  content: '\f3cc';
+}
 
 .fa-schlix:before {
-  content: "\f3ea"; }
+  content: '\f3ea';
+}
 
 .fa-square-xing:before {
-  content: "\f169"; }
+  content: '\f169';
+}
 
 .fa-xing-square:before {
-  content: "\f169"; }
+  content: '\f169';
+}
 
 .fa-bandcamp:before {
-  content: "\f2d5"; }
+  content: '\f2d5';
+}
 
 .fa-wpforms:before {
-  content: "\f298"; }
+  content: '\f298';
+}
 
 .fa-cloudversify:before {
-  content: "\f385"; }
+  content: '\f385';
+}
 
 .fa-usps:before {
-  content: "\f7e1"; }
+  content: '\f7e1';
+}
 
 .fa-megaport:before {
-  content: "\f5a3"; }
+  content: '\f5a3';
+}
 
 .fa-magento:before {
-  content: "\f3c4"; }
+  content: '\f3c4';
+}
 
 .fa-spotify:before {
-  content: "\f1bc"; }
+  content: '\f1bc';
+}
 
 .fa-optin-monster:before {
-  content: "\f23c"; }
+  content: '\f23c';
+}
 
 .fa-fly:before {
-  content: "\f417"; }
+  content: '\f417';
+}
 
 .fa-aviato:before {
-  content: "\f421"; }
+  content: '\f421';
+}
 
 .fa-itunes:before {
-  content: "\f3b4"; }
+  content: '\f3b4';
+}
 
 .fa-cuttlefish:before {
-  content: "\f38c"; }
+  content: '\f38c';
+}
 
 .fa-blogger:before {
-  content: "\f37c"; }
+  content: '\f37c';
+}
 
 .fa-flickr:before {
-  content: "\f16e"; }
+  content: '\f16e';
+}
 
 .fa-viber:before {
-  content: "\f409"; }
+  content: '\f409';
+}
 
 .fa-soundcloud:before {
-  content: "\f1be"; }
+  content: '\f1be';
+}
 
 .fa-digg:before {
-  content: "\f1a6"; }
+  content: '\f1a6';
+}
 
 .fa-tencent-weibo:before {
-  content: "\f1d5"; }
+  content: '\f1d5';
+}
 
 .fa-symfony:before {
-  content: "\f83d"; }
+  content: '\f83d';
+}
 
 .fa-maxcdn:before {
-  content: "\f136"; }
+  content: '\f136';
+}
 
 .fa-etsy:before {
-  content: "\f2d7"; }
+  content: '\f2d7';
+}
 
 .fa-facebook-messenger:before {
-  content: "\f39f"; }
+  content: '\f39f';
+}
 
 .fa-audible:before {
-  content: "\f373"; }
+  content: '\f373';
+}
 
 .fa-think-peaks:before {
-  content: "\f731"; }
+  content: '\f731';
+}
 
 .fa-bilibili:before {
-  content: "\e3d9"; }
+  content: '\e3d9';
+}
 
 .fa-erlang:before {
-  content: "\f39d"; }
+  content: '\f39d';
+}
 
 .fa-cotton-bureau:before {
-  content: "\f89e"; }
+  content: '\f89e';
+}
 
 .fa-dashcube:before {
-  content: "\f210"; }
+  content: '\f210';
+}
 
 .fa-42-group:before {
-  content: "\e080"; }
+  content: '\e080';
+}
 
 .fa-innosoft:before {
-  content: "\e080"; }
+  content: '\e080';
+}
 
 .fa-stack-exchange:before {
-  content: "\f18d"; }
+  content: '\f18d';
+}
 
 .fa-elementor:before {
-  content: "\f430"; }
+  content: '\f430';
+}
 
 .fa-square-pied-piper:before {
-  content: "\e01e"; }
+  content: '\e01e';
+}
 
 .fa-pied-piper-square:before {
-  content: "\e01e"; }
+  content: '\e01e';
+}
 
 .fa-creative-commons-nd:before {
-  content: "\f4eb"; }
+  content: '\f4eb';
+}
 
 .fa-palfed:before {
-  content: "\f3d8"; }
+  content: '\f3d8';
+}
 
 .fa-superpowers:before {
-  content: "\f2dd"; }
+  content: '\f2dd';
+}
 
 .fa-resolving:before {
-  content: "\f3e7"; }
+  content: '\f3e7';
+}
 
 .fa-xbox:before {
-  content: "\f412"; }
+  content: '\f412';
+}
 
 .fa-searchengin:before {
-  content: "\f3eb"; }
+  content: '\f3eb';
+}
 
 .fa-tiktok:before {
-  content: "\e07b"; }
+  content: '\e07b';
+}
 
 .fa-square-facebook:before {
-  content: "\f082"; }
+  content: '\f082';
+}
 
 .fa-facebook-square:before {
-  content: "\f082"; }
+  content: '\f082';
+}
 
 .fa-renren:before {
-  content: "\f18b"; }
+  content: '\f18b';
+}
 
 .fa-linux:before {
-  content: "\f17c"; }
+  content: '\f17c';
+}
 
 .fa-glide:before {
-  content: "\f2a5"; }
+  content: '\f2a5';
+}
 
 .fa-linkedin:before {
-  content: "\f08c"; }
+  content: '\f08c';
+}
 
 .fa-hubspot:before {
-  content: "\f3b2"; }
+  content: '\f3b2';
+}
 
 .fa-deploydog:before {
-  content: "\f38e"; }
+  content: '\f38e';
+}
 
 .fa-twitch:before {
-  content: "\f1e8"; }
+  content: '\f1e8';
+}
 
 .fa-ravelry:before {
-  content: "\f2d9"; }
+  content: '\f2d9';
+}
 
 .fa-mixer:before {
-  content: "\e056"; }
+  content: '\e056';
+}
 
 .fa-square-lastfm:before {
-  content: "\f203"; }
+  content: '\f203';
+}
 
 .fa-lastfm-square:before {
-  content: "\f203"; }
+  content: '\f203';
+}
 
 .fa-vimeo:before {
-  content: "\f40a"; }
+  content: '\f40a';
+}
 
 .fa-mendeley:before {
-  content: "\f7b3"; }
+  content: '\f7b3';
+}
 
 .fa-uniregistry:before {
-  content: "\f404"; }
+  content: '\f404';
+}
 
 .fa-figma:before {
-  content: "\f799"; }
+  content: '\f799';
+}
 
 .fa-creative-commons-remix:before {
-  content: "\f4ee"; }
+  content: '\f4ee';
+}
 
 .fa-cc-amazon-pay:before {
-  content: "\f42d"; }
+  content: '\f42d';
+}
 
 .fa-dropbox:before {
-  content: "\f16b"; }
+  content: '\f16b';
+}
 
 .fa-instagram:before {
-  content: "\f16d"; }
+  content: '\f16d';
+}
 
 .fa-cmplid:before {
-  content: "\e360"; }
+  content: '\e360';
+}
 
 .fa-facebook:before {
-  content: "\f09a"; }
+  content: '\f09a';
+}
 
 .fa-gripfire:before {
-  content: "\f3ac"; }
+  content: '\f3ac';
+}
 
 .fa-jedi-order:before {
-  content: "\f50e"; }
+  content: '\f50e';
+}
 
 .fa-uikit:before {
-  content: "\f403"; }
+  content: '\f403';
+}
 
 .fa-fort-awesome-alt:before {
-  content: "\f3a3"; }
+  content: '\f3a3';
+}
 
 .fa-phabricator:before {
-  content: "\f3db"; }
+  content: '\f3db';
+}
 
 .fa-ussunnah:before {
-  content: "\f407"; }
+  content: '\f407';
+}
 
 .fa-earlybirds:before {
-  content: "\f39a"; }
+  content: '\f39a';
+}
 
 .fa-trade-federation:before {
-  content: "\f513"; }
+  content: '\f513';
+}
 
 .fa-autoprefixer:before {
-  content: "\f41c"; }
+  content: '\f41c';
+}
 
 .fa-whatsapp:before {
-  content: "\f232"; }
+  content: '\f232';
+}
 
 .fa-slideshare:before {
-  content: "\f1e7"; }
+  content: '\f1e7';
+}
 
 .fa-google-play:before {
-  content: "\f3ab"; }
+  content: '\f3ab';
+}
 
 .fa-viadeo:before {
-  content: "\f2a9"; }
+  content: '\f2a9';
+}
 
 .fa-line:before {
-  content: "\f3c0"; }
+  content: '\f3c0';
+}
 
 .fa-google-drive:before {
-  content: "\f3aa"; }
+  content: '\f3aa';
+}
 
 .fa-servicestack:before {
-  content: "\f3ec"; }
+  content: '\f3ec';
+}
 
 .fa-simplybuilt:before {
-  content: "\f215"; }
+  content: '\f215';
+}
 
 .fa-bitbucket:before {
-  content: "\f171"; }
+  content: '\f171';
+}
 
 .fa-imdb:before {
-  content: "\f2d8"; }
+  content: '\f2d8';
+}
 
 .fa-deezer:before {
-  content: "\e077"; }
+  content: '\e077';
+}
 
 .fa-raspberry-pi:before {
-  content: "\f7bb"; }
+  content: '\f7bb';
+}
 
 .fa-jira:before {
-  content: "\f7b1"; }
+  content: '\f7b1';
+}
 
 .fa-docker:before {
-  content: "\f395"; }
+  content: '\f395';
+}
 
 .fa-screenpal:before {
-  content: "\e570"; }
+  content: '\e570';
+}
 
 .fa-bluetooth:before {
-  content: "\f293"; }
+  content: '\f293';
+}
 
 .fa-gitter:before {
-  content: "\f426"; }
+  content: '\f426';
+}
 
 .fa-d-and-d:before {
-  content: "\f38d"; }
+  content: '\f38d';
+}
 
 .fa-microblog:before {
-  content: "\e01a"; }
+  content: '\e01a';
+}
 
 .fa-cc-diners-club:before {
-  content: "\f24c"; }
+  content: '\f24c';
+}
 
 .fa-gg-circle:before {
-  content: "\f261"; }
+  content: '\f261';
+}
 
 .fa-pied-piper-hat:before {
-  content: "\f4e5"; }
+  content: '\f4e5';
+}
 
 .fa-kickstarter-k:before {
-  content: "\f3bc"; }
+  content: '\f3bc';
+}
 
 .fa-yandex:before {
-  content: "\f413"; }
+  content: '\f413';
+}
 
 .fa-readme:before {
-  content: "\f4d5"; }
+  content: '\f4d5';
+}
 
 .fa-html5:before {
-  content: "\f13b"; }
+  content: '\f13b';
+}
 
 .fa-sellsy:before {
-  content: "\f213"; }
+  content: '\f213';
+}
 
 .fa-sass:before {
-  content: "\f41e"; }
+  content: '\f41e';
+}
 
 .fa-wirsindhandwerk:before {
-  content: "\e2d0"; }
+  content: '\e2d0';
+}
 
 .fa-wsh:before {
-  content: "\e2d0"; }
+  content: '\e2d0';
+}
 
 .fa-buromobelexperte:before {
-  content: "\f37f"; }
+  content: '\f37f';
+}
 
 .fa-salesforce:before {
-  content: "\f83b"; }
+  content: '\f83b';
+}
 
 .fa-octopus-deploy:before {
-  content: "\e082"; }
+  content: '\e082';
+}
 
 .fa-medapps:before {
-  content: "\f3c6"; }
+  content: '\f3c6';
+}
 
 .fa-ns8:before {
-  content: "\f3d5"; }
+  content: '\f3d5';
+}
 
 .fa-pinterest-p:before {
-  content: "\f231"; }
+  content: '\f231';
+}
 
 .fa-apper:before {
-  content: "\f371"; }
+  content: '\f371';
+}
 
 .fa-fort-awesome:before {
-  content: "\f286"; }
+  content: '\f286';
+}
 
 .fa-waze:before {
-  content: "\f83f"; }
+  content: '\f83f';
+}
 
 .fa-cc-jcb:before {
-  content: "\f24b"; }
+  content: '\f24b';
+}
 
 .fa-snapchat:before {
-  content: "\f2ab"; }
+  content: '\f2ab';
+}
 
 .fa-snapchat-ghost:before {
-  content: "\f2ab"; }
+  content: '\f2ab';
+}
 
 .fa-fantasy-flight-games:before {
-  content: "\f6dc"; }
+  content: '\f6dc';
+}
 
 .fa-rust:before {
-  content: "\e07a"; }
+  content: '\e07a';
+}
 
 .fa-wix:before {
-  content: "\f5cf"; }
+  content: '\f5cf';
+}
 
 .fa-square-behance:before {
-  content: "\f1b5"; }
+  content: '\f1b5';
+}
 
 .fa-behance-square:before {
-  content: "\f1b5"; }
+  content: '\f1b5';
+}
 
 .fa-supple:before {
-  content: "\f3f9"; }
+  content: '\f3f9';
+}
 
 .fa-rebel:before {
-  content: "\f1d0"; }
+  content: '\f1d0';
+}
 
 .fa-css3:before {
-  content: "\f13c"; }
+  content: '\f13c';
+}
 
 .fa-staylinked:before {
-  content: "\f3f5"; }
+  content: '\f3f5';
+}
 
 .fa-kaggle:before {
-  content: "\f5fa"; }
+  content: '\f5fa';
+}
 
 .fa-space-awesome:before {
-  content: "\e5ac"; }
+  content: '\e5ac';
+}
 
 .fa-deviantart:before {
-  content: "\f1bd"; }
+  content: '\f1bd';
+}
 
 .fa-cpanel:before {
-  content: "\f388"; }
+  content: '\f388';
+}
 
 .fa-goodreads-g:before {
-  content: "\f3a9"; }
+  content: '\f3a9';
+}
 
 .fa-square-git:before {
-  content: "\f1d2"; }
+  content: '\f1d2';
+}
 
 .fa-git-square:before {
-  content: "\f1d2"; }
+  content: '\f1d2';
+}
 
 .fa-square-tumblr:before {
-  content: "\f174"; }
+  content: '\f174';
+}
 
 .fa-tumblr-square:before {
-  content: "\f174"; }
+  content: '\f174';
+}
 
 .fa-trello:before {
-  content: "\f181"; }
+  content: '\f181';
+}
 
 .fa-creative-commons-nc-jp:before {
-  content: "\f4ea"; }
+  content: '\f4ea';
+}
 
 .fa-get-pocket:before {
-  content: "\f265"; }
+  content: '\f265';
+}
 
 .fa-perbyte:before {
-  content: "\e083"; }
+  content: '\e083';
+}
 
 .fa-grunt:before {
-  content: "\f3ad"; }
+  content: '\f3ad';
+}
 
 .fa-weebly:before {
-  content: "\f5cc"; }
+  content: '\f5cc';
+}
 
 .fa-connectdevelop:before {
-  content: "\f20e"; }
+  content: '\f20e';
+}
 
 .fa-leanpub:before {
-  content: "\f212"; }
+  content: '\f212';
+}
 
 .fa-black-tie:before {
-  content: "\f27e"; }
+  content: '\f27e';
+}
 
 .fa-themeco:before {
-  content: "\f5c6"; }
+  content: '\f5c6';
+}
 
 .fa-python:before {
-  content: "\f3e2"; }
+  content: '\f3e2';
+}
 
 .fa-android:before {
-  content: "\f17b"; }
+  content: '\f17b';
+}
 
 .fa-bots:before {
-  content: "\e340"; }
+  content: '\e340';
+}
 
 .fa-free-code-camp:before {
-  content: "\f2c5"; }
+  content: '\f2c5';
+}
 
 .fa-hornbill:before {
-  content: "\f592"; }
+  content: '\f592';
+}
 
 .fa-js:before {
-  content: "\f3b8"; }
+  content: '\f3b8';
+}
 
 .fa-ideal:before {
-  content: "\e013"; }
+  content: '\e013';
+}
 
 .fa-git:before {
-  content: "\f1d3"; }
+  content: '\f1d3';
+}
 
 .fa-dev:before {
-  content: "\f6cc"; }
+  content: '\f6cc';
+}
 
 .fa-sketch:before {
-  content: "\f7c6"; }
+  content: '\f7c6';
+}
 
 .fa-yandex-international:before {
-  content: "\f414"; }
+  content: '\f414';
+}
 
 .fa-cc-amex:before {
-  content: "\f1f3"; }
+  content: '\f1f3';
+}
 
 .fa-uber:before {
-  content: "\f402"; }
+  content: '\f402';
+}
 
 .fa-github:before {
-  content: "\f09b"; }
+  content: '\f09b';
+}
 
 .fa-php:before {
-  content: "\f457"; }
+  content: '\f457';
+}
 
 .fa-alipay:before {
-  content: "\f642"; }
+  content: '\f642';
+}
 
 .fa-youtube:before {
-  content: "\f167"; }
+  content: '\f167';
+}
 
 .fa-skyatlas:before {
-  content: "\f216"; }
+  content: '\f216';
+}
 
 .fa-firefox-browser:before {
-  content: "\e007"; }
+  content: '\e007';
+}
 
 .fa-replyd:before {
-  content: "\f3e6"; }
+  content: '\f3e6';
+}
 
 .fa-suse:before {
-  content: "\f7d6"; }
+  content: '\f7d6';
+}
 
 .fa-jenkins:before {
-  content: "\f3b6"; }
+  content: '\f3b6';
+}
 
 .fa-twitter:before {
-  content: "\f099"; }
+  content: '\f099';
+}
 
 .fa-rockrms:before {
-  content: "\f3e9"; }
+  content: '\f3e9';
+}
 
 .fa-pinterest:before {
-  content: "\f0d2"; }
+  content: '\f0d2';
+}
 
 .fa-buffer:before {
-  content: "\f837"; }
+  content: '\f837';
+}
 
 .fa-npm:before {
-  content: "\f3d4"; }
+  content: '\f3d4';
+}
 
 .fa-yammer:before {
-  content: "\f840"; }
+  content: '\f840';
+}
 
 .fa-btc:before {
-  content: "\f15a"; }
+  content: '\f15a';
+}
 
 .fa-dribbble:before {
-  content: "\f17d"; }
+  content: '\f17d';
+}
 
 .fa-stumbleupon-circle:before {
-  content: "\f1a3"; }
+  content: '\f1a3';
+}
 
 .fa-internet-explorer:before {
-  content: "\f26b"; }
+  content: '\f26b';
+}
 
 .fa-telegram:before {
-  content: "\f2c6"; }
+  content: '\f2c6';
+}
 
 .fa-telegram-plane:before {
-  content: "\f2c6"; }
+  content: '\f2c6';
+}
 
 .fa-old-republic:before {
-  content: "\f510"; }
+  content: '\f510';
+}
 
 .fa-square-whatsapp:before {
-  content: "\f40c"; }
+  content: '\f40c';
+}
 
 .fa-whatsapp-square:before {
-  content: "\f40c"; }
+  content: '\f40c';
+}
 
 .fa-node-js:before {
-  content: "\f3d3"; }
+  content: '\f3d3';
+}
 
 .fa-edge-legacy:before {
-  content: "\e078"; }
+  content: '\e078';
+}
 
 .fa-slack:before {
-  content: "\f198"; }
+  content: '\f198';
+}
 
 .fa-slack-hash:before {
-  content: "\f198"; }
+  content: '\f198';
+}
 
 .fa-medrt:before {
-  content: "\f3c8"; }
+  content: '\f3c8';
+}
 
 .fa-usb:before {
-  content: "\f287"; }
+  content: '\f287';
+}
 
 .fa-tumblr:before {
-  content: "\f173"; }
+  content: '\f173';
+}
 
 .fa-vaadin:before {
-  content: "\f408"; }
+  content: '\f408';
+}
 
 .fa-quora:before {
-  content: "\f2c4"; }
+  content: '\f2c4';
+}
 
 .fa-reacteurope:before {
-  content: "\f75d"; }
+  content: '\f75d';
+}
 
 .fa-medium:before {
-  content: "\f23a"; }
+  content: '\f23a';
+}
 
 .fa-medium-m:before {
-  content: "\f23a"; }
+  content: '\f23a';
+}
 
 .fa-amilia:before {
-  content: "\f36d"; }
+  content: '\f36d';
+}
 
 .fa-mixcloud:before {
-  content: "\f289"; }
+  content: '\f289';
+}
 
 .fa-flipboard:before {
-  content: "\f44d"; }
+  content: '\f44d';
+}
 
 .fa-viacoin:before {
-  content: "\f237"; }
+  content: '\f237';
+}
 
 .fa-critical-role:before {
-  content: "\f6c9"; }
+  content: '\f6c9';
+}
 
 .fa-sitrox:before {
-  content: "\e44a"; }
+  content: '\e44a';
+}
 
 .fa-discourse:before {
-  content: "\f393"; }
+  content: '\f393';
+}
 
 .fa-joomla:before {
-  content: "\f1aa"; }
+  content: '\f1aa';
+}
 
 .fa-mastodon:before {
-  content: "\f4f6"; }
+  content: '\f4f6';
+}
 
 .fa-airbnb:before {
-  content: "\f834"; }
+  content: '\f834';
+}
 
 .fa-wolf-pack-battalion:before {
-  content: "\f514"; }
+  content: '\f514';
+}
 
 .fa-buy-n-large:before {
-  content: "\f8a6"; }
+  content: '\f8a6';
+}
 
 .fa-gulp:before {
-  content: "\f3ae"; }
+  content: '\f3ae';
+}
 
 .fa-creative-commons-sampling-plus:before {
-  content: "\f4f1"; }
+  content: '\f4f1';
+}
 
 .fa-strava:before {
-  content: "\f428"; }
+  content: '\f428';
+}
 
 .fa-ember:before {
-  content: "\f423"; }
+  content: '\f423';
+}
 
 .fa-canadian-maple-leaf:before {
-  content: "\f785"; }
+  content: '\f785';
+}
 
 .fa-teamspeak:before {
-  content: "\f4f9"; }
+  content: '\f4f9';
+}
 
 .fa-pushed:before {
-  content: "\f3e1"; }
+  content: '\f3e1';
+}
 
 .fa-wordpress-simple:before {
-  content: "\f411"; }
+  content: '\f411';
+}
 
 .fa-nutritionix:before {
-  content: "\f3d6"; }
+  content: '\f3d6';
+}
 
 .fa-wodu:before {
-  content: "\e088"; }
+  content: '\e088';
+}
 
 .fa-google-pay:before {
-  content: "\e079"; }
+  content: '\e079';
+}
 
 .fa-intercom:before {
-  content: "\f7af"; }
+  content: '\f7af';
+}
 
 .fa-zhihu:before {
-  content: "\f63f"; }
+  content: '\f63f';
+}
 
 .fa-korvue:before {
-  content: "\f42f"; }
+  content: '\f42f';
+}
 
 .fa-pix:before {
-  content: "\e43a"; }
+  content: '\e43a';
+}
 
 .fa-steam-symbol:before {
-  content: "\f3f6"; }
+  content: '\f3f6';
+}
diff --git a/packages/insomnia/src/ui/css/lib/fontawesome/css/fontawesome.css b/packages/insomnia/src/ui/css/lib/fontawesome/css/fontawesome.css
index 970512d59b..30a7dab196 100644
--- a/packages/insomnia/src/ui/css/lib/fontawesome/css/fontawesome.css
+++ b/packages/insomnia/src/ui/css/lib/fontawesome/css/fontawesome.css
@@ -4,8 +4,9 @@
  * Copyright 2022 Fonticons, Inc.
  */
 .fa {
-  font-family: var(--fa-style-family, "Font Awesome 6 Free");
-  font-weight: var(--fa-style, 900); }
+  font-family: var(--fa-style-family, 'Font Awesome 6 Free');
+  font-weight: var(--fa-style, 900);
+}
 
 .fa,
 .fa-classic,
@@ -22,225 +23,260 @@
   font-style: normal;
   font-variant: normal;
   line-height: 1;
-  text-rendering: auto; }
+  text-rendering: auto;
+}
 
 .fas,
 .fa-classic,
 .fa-solid,
 .far,
 .fa-regular {
-  font-family: 'Font Awesome 6 Free'; }
+  font-family: 'Font Awesome 6 Free';
+}
 
 .fab,
 .fa-brands {
-  font-family: 'Font Awesome 6 Brands'; }
+  font-family: 'Font Awesome 6 Brands';
+}
 
 .fa-1x {
-  font-size: 1em; }
+  font-size: 1em;
+}
 
 .fa-2x {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .fa-3x {
-  font-size: 3em; }
+  font-size: 3em;
+}
 
 .fa-4x {
-  font-size: 4em; }
+  font-size: 4em;
+}
 
 .fa-5x {
-  font-size: 5em; }
+  font-size: 5em;
+}
 
 .fa-6x {
-  font-size: 6em; }
+  font-size: 6em;
+}
 
 .fa-7x {
-  font-size: 7em; }
+  font-size: 7em;
+}
 
 .fa-8x {
-  font-size: 8em; }
+  font-size: 8em;
+}
 
 .fa-9x {
-  font-size: 9em; }
+  font-size: 9em;
+}
 
 .fa-10x {
-  font-size: 10em; }
+  font-size: 10em;
+}
 
 .fa-2xs {
   font-size: 0.625em;
   line-height: 0.1em;
-  vertical-align: 0.225em; }
+  vertical-align: 0.225em;
+}
 
 .fa-xs {
   font-size: 0.75em;
   line-height: 0.08333em;
-  vertical-align: 0.125em; }
+  vertical-align: 0.125em;
+}
 
 .fa-sm {
   font-size: 0.875em;
   line-height: 0.07143em;
-  vertical-align: 0.05357em; }
+  vertical-align: 0.05357em;
+}
 
 .fa-lg {
   font-size: 1.25em;
   line-height: 0.05em;
-  vertical-align: -0.075em; }
+  vertical-align: -0.075em;
+}
 
 .fa-xl {
   font-size: 1.5em;
   line-height: 0.04167em;
-  vertical-align: -0.125em; }
+  vertical-align: -0.125em;
+}
 
 .fa-2xl {
   font-size: 2em;
   line-height: 0.03125em;
-  vertical-align: -0.1875em; }
+  vertical-align: -0.1875em;
+}
 
 .fa-fw {
   text-align: center;
-  width: 1.25em; }
+  width: 1.25em;
+}
 
 .fa-ul {
   list-style-type: none;
   margin-left: var(--fa-li-margin, 2.5em);
-  padding-left: 0; }
-  .fa-ul > li {
-    position: relative; }
+  padding-left: 0;
+}
+.fa-ul > li {
+  position: relative;
+}
 
 .fa-li {
   left: calc(var(--fa-li-width, 2em) * -1);
   position: absolute;
   text-align: center;
   width: var(--fa-li-width, 2em);
-  line-height: inherit; }
+  line-height: inherit;
+}
 
 .fa-border {
   border-color: var(--fa-border-color, #eee);
   border-radius: var(--fa-border-radius, 0.1em);
   border-style: var(--fa-border-style, solid);
   border-width: var(--fa-border-width, 0.08em);
-  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em); }
+  padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);
+}
 
 .fa-pull-left {
   float: left;
-  margin-right: var(--fa-pull-margin, 0.3em); }
+  margin-right: var(--fa-pull-margin, 0.3em);
+}
 
 .fa-pull-right {
   float: right;
-  margin-left: var(--fa-pull-margin, 0.3em); }
+  margin-left: var(--fa-pull-margin, 0.3em);
+}
 
 .fa-beat {
   -webkit-animation-name: fa-beat;
-          animation-name: fa-beat;
+  animation-name: fa-beat;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
-          animation-timing-function: var(--fa-animation-timing, ease-in-out); }
+  animation-timing-function: var(--fa-animation-timing, ease-in-out);
+}
 
 .fa-bounce {
   -webkit-animation-name: fa-bounce;
-          animation-name: fa-bounce;
+  animation-name: fa-bounce;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
-          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1)); }
+  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.28, 0.84, 0.42, 1));
+}
 
 .fa-fade {
   -webkit-animation-name: fa-fade;
-          animation-name: fa-fade;
+  animation-name: fa-fade;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
-          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
+  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
+}
 
 .fa-beat-fade {
   -webkit-animation-name: fa-beat-fade;
-          animation-name: fa-beat-fade;
+  animation-name: fa-beat-fade;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
-          animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1)); }
+  animation-timing-function: var(--fa-animation-timing, cubic-bezier(0.4, 0, 0.6, 1));
+}
 
 .fa-flip {
   -webkit-animation-name: fa-flip;
-          animation-name: fa-flip;
+  animation-name: fa-flip;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, ease-in-out);
-          animation-timing-function: var(--fa-animation-timing, ease-in-out); }
+  animation-timing-function: var(--fa-animation-timing, ease-in-out);
+}
 
 .fa-shake {
   -webkit-animation-name: fa-shake;
-          animation-name: fa-shake;
+  animation-name: fa-shake;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, linear);
-          animation-timing-function: var(--fa-animation-timing, linear); }
+  animation-timing-function: var(--fa-animation-timing, linear);
+}
 
 .fa-spin {
   -webkit-animation-name: fa-spin;
-          animation-name: fa-spin;
+  animation-name: fa-spin;
   -webkit-animation-delay: var(--fa-animation-delay, 0s);
-          animation-delay: var(--fa-animation-delay, 0s);
+  animation-delay: var(--fa-animation-delay, 0s);
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 2s);
-          animation-duration: var(--fa-animation-duration, 2s);
+  animation-duration: var(--fa-animation-duration, 2s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, linear);
-          animation-timing-function: var(--fa-animation-timing, linear); }
+  animation-timing-function: var(--fa-animation-timing, linear);
+}
 
 .fa-spin-reverse {
-  --fa-animation-direction: reverse; }
+  --fa-animation-direction: reverse;
+}
 
 .fa-pulse,
 .fa-spin-pulse {
   -webkit-animation-name: fa-spin;
-          animation-name: fa-spin;
+  animation-name: fa-spin;
   -webkit-animation-direction: var(--fa-animation-direction, normal);
-          animation-direction: var(--fa-animation-direction, normal);
+  animation-direction: var(--fa-animation-direction, normal);
   -webkit-animation-duration: var(--fa-animation-duration, 1s);
-          animation-duration: var(--fa-animation-duration, 1s);
+  animation-duration: var(--fa-animation-duration, 1s);
   -webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
-          animation-iteration-count: var(--fa-animation-iteration-count, infinite);
+  animation-iteration-count: var(--fa-animation-iteration-count, infinite);
   -webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
-          animation-timing-function: var(--fa-animation-timing, steps(8)); }
+  animation-timing-function: var(--fa-animation-timing, steps(8));
+}
 
 @media (prefers-reduced-motion: reduce) {
   .fa-beat,
@@ -253,216 +289,311 @@
   .fa-spin,
   .fa-spin-pulse {
     -webkit-animation-delay: -1ms;
-            animation-delay: -1ms;
+    animation-delay: -1ms;
     -webkit-animation-duration: 1ms;
-            animation-duration: 1ms;
+    animation-duration: 1ms;
     -webkit-animation-iteration-count: 1;
-            animation-iteration-count: 1;
+    animation-iteration-count: 1;
     transition-delay: 0s;
-    transition-duration: 0s; } }
+    transition-duration: 0s;
+  }
+}
 
 @-webkit-keyframes fa-beat {
-  0%, 90% {
+  0%,
+  90% {
     -webkit-transform: scale(1);
-            transform: scale(1); }
+    transform: scale(1);
+  }
   45% {
     -webkit-transform: scale(var(--fa-beat-scale, 1.25));
-            transform: scale(var(--fa-beat-scale, 1.25)); } }
+    transform: scale(var(--fa-beat-scale, 1.25));
+  }
+}
 
 @keyframes fa-beat {
-  0%, 90% {
+  0%,
+  90% {
     -webkit-transform: scale(1);
-            transform: scale(1); }
+    transform: scale(1);
+  }
   45% {
     -webkit-transform: scale(var(--fa-beat-scale, 1.25));
-            transform: scale(var(--fa-beat-scale, 1.25)); } }
+    transform: scale(var(--fa-beat-scale, 1.25));
+  }
+}
 
 @-webkit-keyframes fa-bounce {
   0% {
     -webkit-transform: scale(1, 1) translateY(0);
-            transform: scale(1, 1) translateY(0); }
+    transform: scale(1, 1) translateY(0);
+  }
   10% {
     -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
-            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
+    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
+  }
   30% {
-    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
-            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
+    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1))
+      translateY(var(--fa-bounce-height, -0.5em));
+    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1))
+      translateY(var(--fa-bounce-height, -0.5em));
+  }
   50% {
     -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
-            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
+    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
+  }
   57% {
     -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
-            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
+    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
+  }
   64% {
     -webkit-transform: scale(1, 1) translateY(0);
-            transform: scale(1, 1) translateY(0); }
+    transform: scale(1, 1) translateY(0);
+  }
   100% {
     -webkit-transform: scale(1, 1) translateY(0);
-            transform: scale(1, 1) translateY(0); } }
+    transform: scale(1, 1) translateY(0);
+  }
+}
 
 @keyframes fa-bounce {
   0% {
     -webkit-transform: scale(1, 1) translateY(0);
-            transform: scale(1, 1) translateY(0); }
+    transform: scale(1, 1) translateY(0);
+  }
   10% {
     -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
-            transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0); }
+    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
+  }
   30% {
-    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
-            transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em)); }
+    -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1))
+      translateY(var(--fa-bounce-height, -0.5em));
+    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1))
+      translateY(var(--fa-bounce-height, -0.5em));
+  }
   50% {
     -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
-            transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0); }
+    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
+  }
   57% {
     -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
-            transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em)); }
+    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
+  }
   64% {
     -webkit-transform: scale(1, 1) translateY(0);
-            transform: scale(1, 1) translateY(0); }
+    transform: scale(1, 1) translateY(0);
+  }
   100% {
     -webkit-transform: scale(1, 1) translateY(0);
-            transform: scale(1, 1) translateY(0); } }
+    transform: scale(1, 1) translateY(0);
+  }
+}
 
 @-webkit-keyframes fa-fade {
   50% {
-    opacity: var(--fa-fade-opacity, 0.4); } }
+    opacity: var(--fa-fade-opacity, 0.4);
+  }
+}
 
 @keyframes fa-fade {
   50% {
-    opacity: var(--fa-fade-opacity, 0.4); } }
+    opacity: var(--fa-fade-opacity, 0.4);
+  }
+}
 
 @-webkit-keyframes fa-beat-fade {
-  0%, 100% {
+  0%,
+  100% {
     opacity: var(--fa-beat-fade-opacity, 0.4);
     -webkit-transform: scale(1);
-            transform: scale(1); }
+    transform: scale(1);
+  }
   50% {
     opacity: 1;
     -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
-            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
+    transform: scale(var(--fa-beat-fade-scale, 1.125));
+  }
+}
 
 @keyframes fa-beat-fade {
-  0%, 100% {
+  0%,
+  100% {
     opacity: var(--fa-beat-fade-opacity, 0.4);
     -webkit-transform: scale(1);
-            transform: scale(1); }
+    transform: scale(1);
+  }
   50% {
     opacity: 1;
     -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
-            transform: scale(var(--fa-beat-fade-scale, 1.125)); } }
+    transform: scale(var(--fa-beat-fade-scale, 1.125));
+  }
+}
 
 @-webkit-keyframes fa-flip {
   50% {
-    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
-            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
+    -webkit-transform: rotate3d(
+      var(--fa-flip-x, 0),
+      var(--fa-flip-y, 1),
+      var(--fa-flip-z, 0),
+      var(--fa-flip-angle, -180deg)
+    );
+    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
+  }
+}
 
 @keyframes fa-flip {
   50% {
-    -webkit-transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
-            transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg)); } }
+    -webkit-transform: rotate3d(
+      var(--fa-flip-x, 0),
+      var(--fa-flip-y, 1),
+      var(--fa-flip-z, 0),
+      var(--fa-flip-angle, -180deg)
+    );
+    transform: rotate3d(var(--fa-flip-x, 0), var(--fa-flip-y, 1), var(--fa-flip-z, 0), var(--fa-flip-angle, -180deg));
+  }
+}
 
 @-webkit-keyframes fa-shake {
   0% {
     -webkit-transform: rotate(-15deg);
-            transform: rotate(-15deg); }
+    transform: rotate(-15deg);
+  }
   4% {
     -webkit-transform: rotate(15deg);
-            transform: rotate(15deg); }
-  8%, 24% {
+    transform: rotate(15deg);
+  }
+  8%,
+  24% {
     -webkit-transform: rotate(-18deg);
-            transform: rotate(-18deg); }
-  12%, 28% {
+    transform: rotate(-18deg);
+  }
+  12%,
+  28% {
     -webkit-transform: rotate(18deg);
-            transform: rotate(18deg); }
+    transform: rotate(18deg);
+  }
   16% {
     -webkit-transform: rotate(-22deg);
-            transform: rotate(-22deg); }
+    transform: rotate(-22deg);
+  }
   20% {
     -webkit-transform: rotate(22deg);
-            transform: rotate(22deg); }
+    transform: rotate(22deg);
+  }
   32% {
     -webkit-transform: rotate(-12deg);
-            transform: rotate(-12deg); }
+    transform: rotate(-12deg);
+  }
   36% {
     -webkit-transform: rotate(12deg);
-            transform: rotate(12deg); }
-  40%, 100% {
+    transform: rotate(12deg);
+  }
+  40%,
+  100% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg); } }
+    transform: rotate(0deg);
+  }
+}
 
 @keyframes fa-shake {
   0% {
     -webkit-transform: rotate(-15deg);
-            transform: rotate(-15deg); }
+    transform: rotate(-15deg);
+  }
   4% {
     -webkit-transform: rotate(15deg);
-            transform: rotate(15deg); }
-  8%, 24% {
+    transform: rotate(15deg);
+  }
+  8%,
+  24% {
     -webkit-transform: rotate(-18deg);
-            transform: rotate(-18deg); }
-  12%, 28% {
+    transform: rotate(-18deg);
+  }
+  12%,
+  28% {
     -webkit-transform: rotate(18deg);
-            transform: rotate(18deg); }
+    transform: rotate(18deg);
+  }
   16% {
     -webkit-transform: rotate(-22deg);
-            transform: rotate(-22deg); }
+    transform: rotate(-22deg);
+  }
   20% {
     -webkit-transform: rotate(22deg);
-            transform: rotate(22deg); }
+    transform: rotate(22deg);
+  }
   32% {
     -webkit-transform: rotate(-12deg);
-            transform: rotate(-12deg); }
+    transform: rotate(-12deg);
+  }
   36% {
     -webkit-transform: rotate(12deg);
-            transform: rotate(12deg); }
-  40%, 100% {
+    transform: rotate(12deg);
+  }
+  40%,
+  100% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg); } }
+    transform: rotate(0deg);
+  }
+}
 
 @-webkit-keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg); }
+    transform: rotate(0deg);
+  }
   100% {
     -webkit-transform: rotate(360deg);
-            transform: rotate(360deg); } }
+    transform: rotate(360deg);
+  }
+}
 
 @keyframes fa-spin {
   0% {
     -webkit-transform: rotate(0deg);
-            transform: rotate(0deg); }
+    transform: rotate(0deg);
+  }
   100% {
     -webkit-transform: rotate(360deg);
-            transform: rotate(360deg); } }
+    transform: rotate(360deg);
+  }
+}
 
 .fa-rotate-90 {
   -webkit-transform: rotate(90deg);
-          transform: rotate(90deg); }
+  transform: rotate(90deg);
+}
 
 .fa-rotate-180 {
   -webkit-transform: rotate(180deg);
-          transform: rotate(180deg); }
+  transform: rotate(180deg);
+}
 
 .fa-rotate-270 {
   -webkit-transform: rotate(270deg);
-          transform: rotate(270deg); }
+  transform: rotate(270deg);
+}
 
 .fa-flip-horizontal {
   -webkit-transform: scale(-1, 1);
-          transform: scale(-1, 1); }
+  transform: scale(-1, 1);
+}
 
 .fa-flip-vertical {
   -webkit-transform: scale(1, -1);
-          transform: scale(1, -1); }
+  transform: scale(1, -1);
+}
 
 .fa-flip-both,
 .fa-flip-horizontal.fa-flip-vertical {
   -webkit-transform: scale(-1, -1);
-          transform: scale(-1, -1); }
+  transform: scale(-1, -1);
+}
 
 .fa-rotate-by {
   -webkit-transform: rotate(var(--fa-rotate-angle, none));
-          transform: rotate(var(--fa-rotate-angle, none)); }
+  transform: rotate(var(--fa-rotate-angle, none));
+}
 
 .fa-stack {
   display: inline-block;
@@ -470,7 +601,8 @@
   line-height: 2em;
   position: relative;
   vertical-align: middle;
-  width: 2.5em; }
+  width: 2.5em;
+}
 
 .fa-stack-1x,
 .fa-stack-2x {
@@ -478,5862 +610,7814 @@
   position: absolute;
   text-align: center;
   width: 100%;
-  z-index: var(--fa-stack-z-index, auto); }
+  z-index: var(--fa-stack-z-index, auto);
+}
 
 .fa-stack-1x {
-  line-height: inherit; }
+  line-height: inherit;
+}
 
 .fa-stack-2x {
-  font-size: 2em; }
+  font-size: 2em;
+}
 
 .fa-inverse {
-  color: var(--fa-inverse, #fff); }
+  color: var(--fa-inverse, #fff);
+}
 
 /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
 readers do not read off random characters that represent icons */
 .fa-0::before {
-  content: "\30"; }
+  content: '\30';
+}
 
 .fa-1::before {
-  content: "\31"; }
+  content: '\31';
+}
 
 .fa-2::before {
-  content: "\32"; }
+  content: '\32';
+}
 
 .fa-3::before {
-  content: "\33"; }
+  content: '\33';
+}
 
 .fa-4::before {
-  content: "\34"; }
+  content: '\34';
+}
 
 .fa-5::before {
-  content: "\35"; }
+  content: '\35';
+}
 
 .fa-6::before {
-  content: "\36"; }
+  content: '\36';
+}
 
 .fa-7::before {
-  content: "\37"; }
+  content: '\37';
+}
 
 .fa-8::before {
-  content: "\38"; }
+  content: '\38';
+}
 
 .fa-9::before {
-  content: "\39"; }
+  content: '\39';
+}
 
 .fa-fill-drip::before {
-  content: "\f576"; }
+  content: '\f576';
+}
 
 .fa-arrows-to-circle::before {
-  content: "\e4bd"; }
+  content: '\e4bd';
+}
 
 .fa-circle-chevron-right::before {
-  content: "\f138"; }
+  content: '\f138';
+}
 
 .fa-chevron-circle-right::before {
-  content: "\f138"; }
+  content: '\f138';
+}
 
 .fa-at::before {
-  content: "\40"; }
+  content: '\40';
+}
 
 .fa-trash-can::before {
-  content: "\f2ed"; }
+  content: '\f2ed';
+}
 
 .fa-trash-alt::before {
-  content: "\f2ed"; }
+  content: '\f2ed';
+}
 
 .fa-text-height::before {
-  content: "\f034"; }
+  content: '\f034';
+}
 
 .fa-user-xmark::before {
-  content: "\f235"; }
+  content: '\f235';
+}
 
 .fa-user-times::before {
-  content: "\f235"; }
+  content: '\f235';
+}
 
 .fa-stethoscope::before {
-  content: "\f0f1"; }
+  content: '\f0f1';
+}
 
 .fa-message::before {
-  content: "\f27a"; }
+  content: '\f27a';
+}
 
 .fa-comment-alt::before {
-  content: "\f27a"; }
+  content: '\f27a';
+}
 
 .fa-info::before {
-  content: "\f129"; }
+  content: '\f129';
+}
 
 .fa-down-left-and-up-right-to-center::before {
-  content: "\f422"; }
+  content: '\f422';
+}
 
 .fa-compress-alt::before {
-  content: "\f422"; }
+  content: '\f422';
+}
 
 .fa-explosion::before {
-  content: "\e4e9"; }
+  content: '\e4e9';
+}
 
 .fa-file-lines::before {
-  content: "\f15c"; }
+  content: '\f15c';
+}
 
 .fa-file-alt::before {
-  content: "\f15c"; }
+  content: '\f15c';
+}
 
 .fa-file-text::before {
-  content: "\f15c"; }
+  content: '\f15c';
+}
 
 .fa-wave-square::before {
-  content: "\f83e"; }
+  content: '\f83e';
+}
 
 .fa-ring::before {
-  content: "\f70b"; }
+  content: '\f70b';
+}
 
 .fa-building-un::before {
-  content: "\e4d9"; }
+  content: '\e4d9';
+}
 
 .fa-dice-three::before {
-  content: "\f527"; }
+  content: '\f527';
+}
 
 .fa-calendar-days::before {
-  content: "\f073"; }
+  content: '\f073';
+}
 
 .fa-calendar-alt::before {
-  content: "\f073"; }
+  content: '\f073';
+}
 
 .fa-anchor-circle-check::before {
-  content: "\e4aa"; }
+  content: '\e4aa';
+}
 
 .fa-building-circle-arrow-right::before {
-  content: "\e4d1"; }
+  content: '\e4d1';
+}
 
 .fa-volleyball::before {
-  content: "\f45f"; }
+  content: '\f45f';
+}
 
 .fa-volleyball-ball::before {
-  content: "\f45f"; }
+  content: '\f45f';
+}
 
 .fa-arrows-up-to-line::before {
-  content: "\e4c2"; }
+  content: '\e4c2';
+}
 
 .fa-sort-down::before {
-  content: "\f0dd"; }
+  content: '\f0dd';
+}
 
 .fa-sort-desc::before {
-  content: "\f0dd"; }
+  content: '\f0dd';
+}
 
 .fa-circle-minus::before {
-  content: "\f056"; }
+  content: '\f056';
+}
 
 .fa-minus-circle::before {
-  content: "\f056"; }
+  content: '\f056';
+}
 
 .fa-door-open::before {
-  content: "\f52b"; }
+  content: '\f52b';
+}
 
 .fa-right-from-bracket::before {
-  content: "\f2f5"; }
+  content: '\f2f5';
+}
 
 .fa-sign-out-alt::before {
-  content: "\f2f5"; }
+  content: '\f2f5';
+}
 
 .fa-atom::before {
-  content: "\f5d2"; }
+  content: '\f5d2';
+}
 
 .fa-soap::before {
-  content: "\e06e"; }
+  content: '\e06e';
+}
 
 .fa-icons::before {
-  content: "\f86d"; }
+  content: '\f86d';
+}
 
 .fa-heart-music-camera-bolt::before {
-  content: "\f86d"; }
+  content: '\f86d';
+}
 
 .fa-microphone-lines-slash::before {
-  content: "\f539"; }
+  content: '\f539';
+}
 
 .fa-microphone-alt-slash::before {
-  content: "\f539"; }
+  content: '\f539';
+}
 
 .fa-bridge-circle-check::before {
-  content: "\e4c9"; }
+  content: '\e4c9';
+}
 
 .fa-pump-medical::before {
-  content: "\e06a"; }
+  content: '\e06a';
+}
 
 .fa-fingerprint::before {
-  content: "\f577"; }
+  content: '\f577';
+}
 
 .fa-hand-point-right::before {
-  content: "\f0a4"; }
+  content: '\f0a4';
+}
 
 .fa-magnifying-glass-location::before {
-  content: "\f689"; }
+  content: '\f689';
+}
 
 .fa-search-location::before {
-  content: "\f689"; }
+  content: '\f689';
+}
 
 .fa-forward-step::before {
-  content: "\f051"; }
+  content: '\f051';
+}
 
 .fa-step-forward::before {
-  content: "\f051"; }
+  content: '\f051';
+}
 
 .fa-face-smile-beam::before {
-  content: "\f5b8"; }
+  content: '\f5b8';
+}
 
 .fa-smile-beam::before {
-  content: "\f5b8"; }
+  content: '\f5b8';
+}
 
 .fa-flag-checkered::before {
-  content: "\f11e"; }
+  content: '\f11e';
+}
 
 .fa-football::before {
-  content: "\f44e"; }
+  content: '\f44e';
+}
 
 .fa-football-ball::before {
-  content: "\f44e"; }
+  content: '\f44e';
+}
 
 .fa-school-circle-exclamation::before {
-  content: "\e56c"; }
+  content: '\e56c';
+}
 
 .fa-crop::before {
-  content: "\f125"; }
+  content: '\f125';
+}
 
 .fa-angles-down::before {
-  content: "\f103"; }
+  content: '\f103';
+}
 
 .fa-angle-double-down::before {
-  content: "\f103"; }
+  content: '\f103';
+}
 
 .fa-users-rectangle::before {
-  content: "\e594"; }
+  content: '\e594';
+}
 
 .fa-people-roof::before {
-  content: "\e537"; }
+  content: '\e537';
+}
 
 .fa-people-line::before {
-  content: "\e534"; }
+  content: '\e534';
+}
 
 .fa-beer-mug-empty::before {
-  content: "\f0fc"; }
+  content: '\f0fc';
+}
 
 .fa-beer::before {
-  content: "\f0fc"; }
+  content: '\f0fc';
+}
 
 .fa-diagram-predecessor::before {
-  content: "\e477"; }
+  content: '\e477';
+}
 
 .fa-arrow-up-long::before {
-  content: "\f176"; }
+  content: '\f176';
+}
 
 .fa-long-arrow-up::before {
-  content: "\f176"; }
+  content: '\f176';
+}
 
 .fa-fire-flame-simple::before {
-  content: "\f46a"; }
+  content: '\f46a';
+}
 
 .fa-burn::before {
-  content: "\f46a"; }
+  content: '\f46a';
+}
 
 .fa-person::before {
-  content: "\f183"; }
+  content: '\f183';
+}
 
 .fa-male::before {
-  content: "\f183"; }
+  content: '\f183';
+}
 
 .fa-laptop::before {
-  content: "\f109"; }
+  content: '\f109';
+}
 
 .fa-file-csv::before {
-  content: "\f6dd"; }
+  content: '\f6dd';
+}
 
 .fa-menorah::before {
-  content: "\f676"; }
+  content: '\f676';
+}
 
 .fa-truck-plane::before {
-  content: "\e58f"; }
+  content: '\e58f';
+}
 
 .fa-record-vinyl::before {
-  content: "\f8d9"; }
+  content: '\f8d9';
+}
 
 .fa-face-grin-stars::before {
-  content: "\f587"; }
+  content: '\f587';
+}
 
 .fa-grin-stars::before {
-  content: "\f587"; }
+  content: '\f587';
+}
 
 .fa-bong::before {
-  content: "\f55c"; }
+  content: '\f55c';
+}
 
 .fa-spaghetti-monster-flying::before {
-  content: "\f67b"; }
+  content: '\f67b';
+}
 
 .fa-pastafarianism::before {
-  content: "\f67b"; }
+  content: '\f67b';
+}
 
 .fa-arrow-down-up-across-line::before {
-  content: "\e4af"; }
+  content: '\e4af';
+}
 
 .fa-spoon::before {
-  content: "\f2e5"; }
+  content: '\f2e5';
+}
 
 .fa-utensil-spoon::before {
-  content: "\f2e5"; }
+  content: '\f2e5';
+}
 
 .fa-jar-wheat::before {
-  content: "\e517"; }
+  content: '\e517';
+}
 
 .fa-envelopes-bulk::before {
-  content: "\f674"; }
+  content: '\f674';
+}
 
 .fa-mail-bulk::before {
-  content: "\f674"; }
+  content: '\f674';
+}
 
 .fa-file-circle-exclamation::before {
-  content: "\e4eb"; }
+  content: '\e4eb';
+}
 
 .fa-circle-h::before {
-  content: "\f47e"; }
+  content: '\f47e';
+}
 
 .fa-hospital-symbol::before {
-  content: "\f47e"; }
+  content: '\f47e';
+}
 
 .fa-pager::before {
-  content: "\f815"; }
+  content: '\f815';
+}
 
 .fa-address-book::before {
-  content: "\f2b9"; }
+  content: '\f2b9';
+}
 
 .fa-contact-book::before {
-  content: "\f2b9"; }
+  content: '\f2b9';
+}
 
 .fa-strikethrough::before {
-  content: "\f0cc"; }
+  content: '\f0cc';
+}
 
 .fa-k::before {
-  content: "\4b"; }
+  content: '\4b';
+}
 
 .fa-landmark-flag::before {
-  content: "\e51c"; }
+  content: '\e51c';
+}
 
 .fa-pencil::before {
-  content: "\f303"; }
+  content: '\f303';
+}
 
 .fa-pencil-alt::before {
-  content: "\f303"; }
+  content: '\f303';
+}
 
 .fa-backward::before {
-  content: "\f04a"; }
+  content: '\f04a';
+}
 
 .fa-caret-right::before {
-  content: "\f0da"; }
+  content: '\f0da';
+}
 
 .fa-comments::before {
-  content: "\f086"; }
+  content: '\f086';
+}
 
 .fa-paste::before {
-  content: "\f0ea"; }
+  content: '\f0ea';
+}
 
 .fa-file-clipboard::before {
-  content: "\f0ea"; }
+  content: '\f0ea';
+}
 
 .fa-code-pull-request::before {
-  content: "\e13c"; }
+  content: '\e13c';
+}
 
 .fa-clipboard-list::before {
-  content: "\f46d"; }
+  content: '\f46d';
+}
 
 .fa-truck-ramp-box::before {
-  content: "\f4de"; }
+  content: '\f4de';
+}
 
 .fa-truck-loading::before {
-  content: "\f4de"; }
+  content: '\f4de';
+}
 
 .fa-user-check::before {
-  content: "\f4fc"; }
+  content: '\f4fc';
+}
 
 .fa-vial-virus::before {
-  content: "\e597"; }
+  content: '\e597';
+}
 
 .fa-sheet-plastic::before {
-  content: "\e571"; }
+  content: '\e571';
+}
 
 .fa-blog::before {
-  content: "\f781"; }
+  content: '\f781';
+}
 
 .fa-user-ninja::before {
-  content: "\f504"; }
+  content: '\f504';
+}
 
 .fa-person-arrow-up-from-line::before {
-  content: "\e539"; }
+  content: '\e539';
+}
 
 .fa-scroll-torah::before {
-  content: "\f6a0"; }
+  content: '\f6a0';
+}
 
 .fa-torah::before {
-  content: "\f6a0"; }
+  content: '\f6a0';
+}
 
 .fa-broom-ball::before {
-  content: "\f458"; }
+  content: '\f458';
+}
 
 .fa-quidditch::before {
-  content: "\f458"; }
+  content: '\f458';
+}
 
 .fa-quidditch-broom-ball::before {
-  content: "\f458"; }
+  content: '\f458';
+}
 
 .fa-toggle-off::before {
-  content: "\f204"; }
+  content: '\f204';
+}
 
 .fa-box-archive::before {
-  content: "\f187"; }
+  content: '\f187';
+}
 
 .fa-archive::before {
-  content: "\f187"; }
+  content: '\f187';
+}
 
 .fa-person-drowning::before {
-  content: "\e545"; }
+  content: '\e545';
+}
 
 .fa-arrow-down-9-1::before {
-  content: "\f886"; }
+  content: '\f886';
+}
 
 .fa-sort-numeric-desc::before {
-  content: "\f886"; }
+  content: '\f886';
+}
 
 .fa-sort-numeric-down-alt::before {
-  content: "\f886"; }
+  content: '\f886';
+}
 
 .fa-face-grin-tongue-squint::before {
-  content: "\f58a"; }
+  content: '\f58a';
+}
 
 .fa-grin-tongue-squint::before {
-  content: "\f58a"; }
+  content: '\f58a';
+}
 
 .fa-spray-can::before {
-  content: "\f5bd"; }
+  content: '\f5bd';
+}
 
 .fa-truck-monster::before {
-  content: "\f63b"; }
+  content: '\f63b';
+}
 
 .fa-w::before {
-  content: "\57"; }
+  content: '\57';
+}
 
 .fa-earth-africa::before {
-  content: "\f57c"; }
+  content: '\f57c';
+}
 
 .fa-globe-africa::before {
-  content: "\f57c"; }
+  content: '\f57c';
+}
 
 .fa-rainbow::before {
-  content: "\f75b"; }
+  content: '\f75b';
+}
 
 .fa-circle-notch::before {
-  content: "\f1ce"; }
+  content: '\f1ce';
+}
 
 .fa-tablet-screen-button::before {
-  content: "\f3fa"; }
+  content: '\f3fa';
+}
 
 .fa-tablet-alt::before {
-  content: "\f3fa"; }
+  content: '\f3fa';
+}
 
 .fa-paw::before {
-  content: "\f1b0"; }
+  content: '\f1b0';
+}
 
 .fa-cloud::before {
-  content: "\f0c2"; }
+  content: '\f0c2';
+}
 
 .fa-trowel-bricks::before {
-  content: "\e58a"; }
+  content: '\e58a';
+}
 
 .fa-face-flushed::before {
-  content: "\f579"; }
+  content: '\f579';
+}
 
 .fa-flushed::before {
-  content: "\f579"; }
+  content: '\f579';
+}
 
 .fa-hospital-user::before {
-  content: "\f80d"; }
+  content: '\f80d';
+}
 
 .fa-tent-arrow-left-right::before {
-  content: "\e57f"; }
+  content: '\e57f';
+}
 
 .fa-gavel::before {
-  content: "\f0e3"; }
+  content: '\f0e3';
+}
 
 .fa-legal::before {
-  content: "\f0e3"; }
+  content: '\f0e3';
+}
 
 .fa-binoculars::before {
-  content: "\f1e5"; }
+  content: '\f1e5';
+}
 
 .fa-microphone-slash::before {
-  content: "\f131"; }
+  content: '\f131';
+}
 
 .fa-box-tissue::before {
-  content: "\e05b"; }
+  content: '\e05b';
+}
 
 .fa-motorcycle::before {
-  content: "\f21c"; }
+  content: '\f21c';
+}
 
 .fa-bell-concierge::before {
-  content: "\f562"; }
+  content: '\f562';
+}
 
 .fa-concierge-bell::before {
-  content: "\f562"; }
+  content: '\f562';
+}
 
 .fa-pen-ruler::before {
-  content: "\f5ae"; }
+  content: '\f5ae';
+}
 
 .fa-pencil-ruler::before {
-  content: "\f5ae"; }
+  content: '\f5ae';
+}
 
 .fa-people-arrows::before {
-  content: "\e068"; }
+  content: '\e068';
+}
 
 .fa-people-arrows-left-right::before {
-  content: "\e068"; }
+  content: '\e068';
+}
 
 .fa-mars-and-venus-burst::before {
-  content: "\e523"; }
+  content: '\e523';
+}
 
 .fa-square-caret-right::before {
-  content: "\f152"; }
+  content: '\f152';
+}
 
 .fa-caret-square-right::before {
-  content: "\f152"; }
+  content: '\f152';
+}
 
 .fa-scissors::before {
-  content: "\f0c4"; }
+  content: '\f0c4';
+}
 
 .fa-cut::before {
-  content: "\f0c4"; }
+  content: '\f0c4';
+}
 
 .fa-sun-plant-wilt::before {
-  content: "\e57a"; }
+  content: '\e57a';
+}
 
 .fa-toilets-portable::before {
-  content: "\e584"; }
+  content: '\e584';
+}
 
 .fa-hockey-puck::before {
-  content: "\f453"; }
+  content: '\f453';
+}
 
 .fa-table::before {
-  content: "\f0ce"; }
+  content: '\f0ce';
+}
 
 .fa-magnifying-glass-arrow-right::before {
-  content: "\e521"; }
+  content: '\e521';
+}
 
 .fa-tachograph-digital::before {
-  content: "\f566"; }
+  content: '\f566';
+}
 
 .fa-digital-tachograph::before {
-  content: "\f566"; }
+  content: '\f566';
+}
 
 .fa-users-slash::before {
-  content: "\e073"; }
+  content: '\e073';
+}
 
 .fa-clover::before {
-  content: "\e139"; }
+  content: '\e139';
+}
 
 .fa-reply::before {
-  content: "\f3e5"; }
+  content: '\f3e5';
+}
 
 .fa-mail-reply::before {
-  content: "\f3e5"; }
+  content: '\f3e5';
+}
 
 .fa-star-and-crescent::before {
-  content: "\f699"; }
+  content: '\f699';
+}
 
 .fa-house-fire::before {
-  content: "\e50c"; }
+  content: '\e50c';
+}
 
 .fa-square-minus::before {
-  content: "\f146"; }
+  content: '\f146';
+}
 
 .fa-minus-square::before {
-  content: "\f146"; }
+  content: '\f146';
+}
 
 .fa-helicopter::before {
-  content: "\f533"; }
+  content: '\f533';
+}
 
 .fa-compass::before {
-  content: "\f14e"; }
+  content: '\f14e';
+}
 
 .fa-square-caret-down::before {
-  content: "\f150"; }
+  content: '\f150';
+}
 
 .fa-caret-square-down::before {
-  content: "\f150"; }
+  content: '\f150';
+}
 
 .fa-file-circle-question::before {
-  content: "\e4ef"; }
+  content: '\e4ef';
+}
 
 .fa-laptop-code::before {
-  content: "\f5fc"; }
+  content: '\f5fc';
+}
 
 .fa-swatchbook::before {
-  content: "\f5c3"; }
+  content: '\f5c3';
+}
 
 .fa-prescription-bottle::before {
-  content: "\f485"; }
+  content: '\f485';
+}
 
 .fa-bars::before {
-  content: "\f0c9"; }
+  content: '\f0c9';
+}
 
 .fa-navicon::before {
-  content: "\f0c9"; }
+  content: '\f0c9';
+}
 
 .fa-people-group::before {
-  content: "\e533"; }
+  content: '\e533';
+}
 
 .fa-hourglass-end::before {
-  content: "\f253"; }
+  content: '\f253';
+}
 
 .fa-hourglass-3::before {
-  content: "\f253"; }
+  content: '\f253';
+}
 
 .fa-heart-crack::before {
-  content: "\f7a9"; }
+  content: '\f7a9';
+}
 
 .fa-heart-broken::before {
-  content: "\f7a9"; }
+  content: '\f7a9';
+}
 
 .fa-square-up-right::before {
-  content: "\f360"; }
+  content: '\f360';
+}
 
 .fa-external-link-square-alt::before {
-  content: "\f360"; }
+  content: '\f360';
+}
 
 .fa-face-kiss-beam::before {
-  content: "\f597"; }
+  content: '\f597';
+}
 
 .fa-kiss-beam::before {
-  content: "\f597"; }
+  content: '\f597';
+}
 
 .fa-film::before {
-  content: "\f008"; }
+  content: '\f008';
+}
 
 .fa-ruler-horizontal::before {
-  content: "\f547"; }
+  content: '\f547';
+}
 
 .fa-people-robbery::before {
-  content: "\e536"; }
+  content: '\e536';
+}
 
 .fa-lightbulb::before {
-  content: "\f0eb"; }
+  content: '\f0eb';
+}
 
 .fa-caret-left::before {
-  content: "\f0d9"; }
+  content: '\f0d9';
+}
 
 .fa-circle-exclamation::before {
-  content: "\f06a"; }
+  content: '\f06a';
+}
 
 .fa-exclamation-circle::before {
-  content: "\f06a"; }
+  content: '\f06a';
+}
 
 .fa-school-circle-xmark::before {
-  content: "\e56d"; }
+  content: '\e56d';
+}
 
 .fa-arrow-right-from-bracket::before {
-  content: "\f08b"; }
+  content: '\f08b';
+}
 
 .fa-sign-out::before {
-  content: "\f08b"; }
+  content: '\f08b';
+}
 
 .fa-circle-chevron-down::before {
-  content: "\f13a"; }
+  content: '\f13a';
+}
 
 .fa-chevron-circle-down::before {
-  content: "\f13a"; }
+  content: '\f13a';
+}
 
 .fa-unlock-keyhole::before {
-  content: "\f13e"; }
+  content: '\f13e';
+}
 
 .fa-unlock-alt::before {
-  content: "\f13e"; }
+  content: '\f13e';
+}
 
 .fa-cloud-showers-heavy::before {
-  content: "\f740"; }
+  content: '\f740';
+}
 
 .fa-headphones-simple::before {
-  content: "\f58f"; }
+  content: '\f58f';
+}
 
 .fa-headphones-alt::before {
-  content: "\f58f"; }
+  content: '\f58f';
+}
 
 .fa-sitemap::before {
-  content: "\f0e8"; }
+  content: '\f0e8';
+}
 
 .fa-circle-dollar-to-slot::before {
-  content: "\f4b9"; }
+  content: '\f4b9';
+}
 
 .fa-donate::before {
-  content: "\f4b9"; }
+  content: '\f4b9';
+}
 
 .fa-memory::before {
-  content: "\f538"; }
+  content: '\f538';
+}
 
 .fa-road-spikes::before {
-  content: "\e568"; }
+  content: '\e568';
+}
 
 .fa-fire-burner::before {
-  content: "\e4f1"; }
+  content: '\e4f1';
+}
 
 .fa-flag::before {
-  content: "\f024"; }
+  content: '\f024';
+}
 
 .fa-hanukiah::before {
-  content: "\f6e6"; }
+  content: '\f6e6';
+}
 
 .fa-feather::before {
-  content: "\f52d"; }
+  content: '\f52d';
+}
 
 .fa-volume-low::before {
-  content: "\f027"; }
+  content: '\f027';
+}
 
 .fa-volume-down::before {
-  content: "\f027"; }
+  content: '\f027';
+}
 
 .fa-comment-slash::before {
-  content: "\f4b3"; }
+  content: '\f4b3';
+}
 
 .fa-cloud-sun-rain::before {
-  content: "\f743"; }
+  content: '\f743';
+}
 
 .fa-compress::before {
-  content: "\f066"; }
+  content: '\f066';
+}
 
 .fa-wheat-awn::before {
-  content: "\e2cd"; }
+  content: '\e2cd';
+}
 
 .fa-wheat-alt::before {
-  content: "\e2cd"; }
+  content: '\e2cd';
+}
 
 .fa-ankh::before {
-  content: "\f644"; }
+  content: '\f644';
+}
 
 .fa-hands-holding-child::before {
-  content: "\e4fa"; }
+  content: '\e4fa';
+}
 
 .fa-asterisk::before {
-  content: "\2a"; }
+  content: '\2a';
+}
 
 .fa-square-check::before {
-  content: "\f14a"; }
+  content: '\f14a';
+}
 
 .fa-check-square::before {
-  content: "\f14a"; }
+  content: '\f14a';
+}
 
 .fa-peseta-sign::before {
-  content: "\e221"; }
+  content: '\e221';
+}
 
 .fa-heading::before {
-  content: "\f1dc"; }
+  content: '\f1dc';
+}
 
 .fa-header::before {
-  content: "\f1dc"; }
+  content: '\f1dc';
+}
 
 .fa-ghost::before {
-  content: "\f6e2"; }
+  content: '\f6e2';
+}
 
 .fa-list::before {
-  content: "\f03a"; }
+  content: '\f03a';
+}
 
 .fa-list-squares::before {
-  content: "\f03a"; }
+  content: '\f03a';
+}
 
 .fa-square-phone-flip::before {
-  content: "\f87b"; }
+  content: '\f87b';
+}
 
 .fa-phone-square-alt::before {
-  content: "\f87b"; }
+  content: '\f87b';
+}
 
 .fa-cart-plus::before {
-  content: "\f217"; }
+  content: '\f217';
+}
 
 .fa-gamepad::before {
-  content: "\f11b"; }
+  content: '\f11b';
+}
 
 .fa-circle-dot::before {
-  content: "\f192"; }
+  content: '\f192';
+}
 
 .fa-dot-circle::before {
-  content: "\f192"; }
+  content: '\f192';
+}
 
 .fa-face-dizzy::before {
-  content: "\f567"; }
+  content: '\f567';
+}
 
 .fa-dizzy::before {
-  content: "\f567"; }
+  content: '\f567';
+}
 
 .fa-egg::before {
-  content: "\f7fb"; }
+  content: '\f7fb';
+}
 
 .fa-house-medical-circle-xmark::before {
-  content: "\e513"; }
+  content: '\e513';
+}
 
 .fa-campground::before {
-  content: "\f6bb"; }
+  content: '\f6bb';
+}
 
 .fa-folder-plus::before {
-  content: "\f65e"; }
+  content: '\f65e';
+}
 
 .fa-futbol::before {
-  content: "\f1e3"; }
+  content: '\f1e3';
+}
 
 .fa-futbol-ball::before {
-  content: "\f1e3"; }
+  content: '\f1e3';
+}
 
 .fa-soccer-ball::before {
-  content: "\f1e3"; }
+  content: '\f1e3';
+}
 
 .fa-paintbrush::before {
-  content: "\f1fc"; }
+  content: '\f1fc';
+}
 
 .fa-paint-brush::before {
-  content: "\f1fc"; }
+  content: '\f1fc';
+}
 
 .fa-lock::before {
-  content: "\f023"; }
+  content: '\f023';
+}
 
 .fa-gas-pump::before {
-  content: "\f52f"; }
+  content: '\f52f';
+}
 
 .fa-hot-tub-person::before {
-  content: "\f593"; }
+  content: '\f593';
+}
 
 .fa-hot-tub::before {
-  content: "\f593"; }
+  content: '\f593';
+}
 
 .fa-map-location::before {
-  content: "\f59f"; }
+  content: '\f59f';
+}
 
 .fa-map-marked::before {
-  content: "\f59f"; }
+  content: '\f59f';
+}
 
 .fa-house-flood-water::before {
-  content: "\e50e"; }
+  content: '\e50e';
+}
 
 .fa-tree::before {
-  content: "\f1bb"; }
+  content: '\f1bb';
+}
 
 .fa-bridge-lock::before {
-  content: "\e4cc"; }
+  content: '\e4cc';
+}
 
 .fa-sack-dollar::before {
-  content: "\f81d"; }
+  content: '\f81d';
+}
 
 .fa-pen-to-square::before {
-  content: "\f044"; }
+  content: '\f044';
+}
 
 .fa-edit::before {
-  content: "\f044"; }
+  content: '\f044';
+}
 
 .fa-car-side::before {
-  content: "\f5e4"; }
+  content: '\f5e4';
+}
 
 .fa-share-nodes::before {
-  content: "\f1e0"; }
+  content: '\f1e0';
+}
 
 .fa-share-alt::before {
-  content: "\f1e0"; }
+  content: '\f1e0';
+}
 
 .fa-heart-circle-minus::before {
-  content: "\e4ff"; }
+  content: '\e4ff';
+}
 
 .fa-hourglass-half::before {
-  content: "\f252"; }
+  content: '\f252';
+}
 
 .fa-hourglass-2::before {
-  content: "\f252"; }
+  content: '\f252';
+}
 
 .fa-microscope::before {
-  content: "\f610"; }
+  content: '\f610';
+}
 
 .fa-sink::before {
-  content: "\e06d"; }
+  content: '\e06d';
+}
 
 .fa-bag-shopping::before {
-  content: "\f290"; }
+  content: '\f290';
+}
 
 .fa-shopping-bag::before {
-  content: "\f290"; }
+  content: '\f290';
+}
 
 .fa-arrow-down-z-a::before {
-  content: "\f881"; }
+  content: '\f881';
+}
 
 .fa-sort-alpha-desc::before {
-  content: "\f881"; }
+  content: '\f881';
+}
 
 .fa-sort-alpha-down-alt::before {
-  content: "\f881"; }
+  content: '\f881';
+}
 
 .fa-mitten::before {
-  content: "\f7b5"; }
+  content: '\f7b5';
+}
 
 .fa-person-rays::before {
-  content: "\e54d"; }
+  content: '\e54d';
+}
 
 .fa-users::before {
-  content: "\f0c0"; }
+  content: '\f0c0';
+}
 
 .fa-eye-slash::before {
-  content: "\f070"; }
+  content: '\f070';
+}
 
 .fa-flask-vial::before {
-  content: "\e4f3"; }
+  content: '\e4f3';
+}
 
 .fa-hand::before {
-  content: "\f256"; }
+  content: '\f256';
+}
 
 .fa-hand-paper::before {
-  content: "\f256"; }
+  content: '\f256';
+}
 
 .fa-om::before {
-  content: "\f679"; }
+  content: '\f679';
+}
 
 .fa-worm::before {
-  content: "\e599"; }
+  content: '\e599';
+}
 
 .fa-house-circle-xmark::before {
-  content: "\e50b"; }
+  content: '\e50b';
+}
 
 .fa-plug::before {
-  content: "\f1e6"; }
+  content: '\f1e6';
+}
 
 .fa-chevron-up::before {
-  content: "\f077"; }
+  content: '\f077';
+}
 
 .fa-hand-spock::before {
-  content: "\f259"; }
+  content: '\f259';
+}
 
 .fa-stopwatch::before {
-  content: "\f2f2"; }
+  content: '\f2f2';
+}
 
 .fa-face-kiss::before {
-  content: "\f596"; }
+  content: '\f596';
+}
 
 .fa-kiss::before {
-  content: "\f596"; }
+  content: '\f596';
+}
 
 .fa-bridge-circle-xmark::before {
-  content: "\e4cb"; }
+  content: '\e4cb';
+}
 
 .fa-face-grin-tongue::before {
-  content: "\f589"; }
+  content: '\f589';
+}
 
 .fa-grin-tongue::before {
-  content: "\f589"; }
+  content: '\f589';
+}
 
 .fa-chess-bishop::before {
-  content: "\f43a"; }
+  content: '\f43a';
+}
 
 .fa-face-grin-wink::before {
-  content: "\f58c"; }
+  content: '\f58c';
+}
 
 .fa-grin-wink::before {
-  content: "\f58c"; }
+  content: '\f58c';
+}
 
 .fa-ear-deaf::before {
-  content: "\f2a4"; }
+  content: '\f2a4';
+}
 
 .fa-deaf::before {
-  content: "\f2a4"; }
+  content: '\f2a4';
+}
 
 .fa-deafness::before {
-  content: "\f2a4"; }
+  content: '\f2a4';
+}
 
 .fa-hard-of-hearing::before {
-  content: "\f2a4"; }
+  content: '\f2a4';
+}
 
 .fa-road-circle-check::before {
-  content: "\e564"; }
+  content: '\e564';
+}
 
 .fa-dice-five::before {
-  content: "\f523"; }
+  content: '\f523';
+}
 
 .fa-square-rss::before {
-  content: "\f143"; }
+  content: '\f143';
+}
 
 .fa-rss-square::before {
-  content: "\f143"; }
+  content: '\f143';
+}
 
 .fa-land-mine-on::before {
-  content: "\e51b"; }
+  content: '\e51b';
+}
 
 .fa-i-cursor::before {
-  content: "\f246"; }
+  content: '\f246';
+}
 
 .fa-stamp::before {
-  content: "\f5bf"; }
+  content: '\f5bf';
+}
 
 .fa-stairs::before {
-  content: "\e289"; }
+  content: '\e289';
+}
 
 .fa-i::before {
-  content: "\49"; }
+  content: '\49';
+}
 
 .fa-hryvnia-sign::before {
-  content: "\f6f2"; }
+  content: '\f6f2';
+}
 
 .fa-hryvnia::before {
-  content: "\f6f2"; }
+  content: '\f6f2';
+}
 
 .fa-pills::before {
-  content: "\f484"; }
+  content: '\f484';
+}
 
 .fa-face-grin-wide::before {
-  content: "\f581"; }
+  content: '\f581';
+}
 
 .fa-grin-alt::before {
-  content: "\f581"; }
+  content: '\f581';
+}
 
 .fa-tooth::before {
-  content: "\f5c9"; }
+  content: '\f5c9';
+}
 
 .fa-v::before {
-  content: "\56"; }
+  content: '\56';
+}
 
 .fa-bicycle::before {
-  content: "\f206"; }
+  content: '\f206';
+}
 
 .fa-staff-snake::before {
-  content: "\e579"; }
+  content: '\e579';
+}
 
 .fa-rod-asclepius::before {
-  content: "\e579"; }
+  content: '\e579';
+}
 
 .fa-rod-snake::before {
-  content: "\e579"; }
+  content: '\e579';
+}
 
 .fa-staff-aesculapius::before {
-  content: "\e579"; }
+  content: '\e579';
+}
 
 .fa-head-side-cough-slash::before {
-  content: "\e062"; }
+  content: '\e062';
+}
 
 .fa-truck-medical::before {
-  content: "\f0f9"; }
+  content: '\f0f9';
+}
 
 .fa-ambulance::before {
-  content: "\f0f9"; }
+  content: '\f0f9';
+}
 
 .fa-wheat-awn-circle-exclamation::before {
-  content: "\e598"; }
+  content: '\e598';
+}
 
 .fa-snowman::before {
-  content: "\f7d0"; }
+  content: '\f7d0';
+}
 
 .fa-mortar-pestle::before {
-  content: "\f5a7"; }
+  content: '\f5a7';
+}
 
 .fa-road-barrier::before {
-  content: "\e562"; }
+  content: '\e562';
+}
 
 .fa-school::before {
-  content: "\f549"; }
+  content: '\f549';
+}
 
 .fa-igloo::before {
-  content: "\f7ae"; }
+  content: '\f7ae';
+}
 
 .fa-joint::before {
-  content: "\f595"; }
+  content: '\f595';
+}
 
 .fa-angle-right::before {
-  content: "\f105"; }
+  content: '\f105';
+}
 
 .fa-horse::before {
-  content: "\f6f0"; }
+  content: '\f6f0';
+}
 
 .fa-q::before {
-  content: "\51"; }
+  content: '\51';
+}
 
 .fa-g::before {
-  content: "\47"; }
+  content: '\47';
+}
 
 .fa-notes-medical::before {
-  content: "\f481"; }
+  content: '\f481';
+}
 
 .fa-temperature-half::before {
-  content: "\f2c9"; }
+  content: '\f2c9';
+}
 
 .fa-temperature-2::before {
-  content: "\f2c9"; }
+  content: '\f2c9';
+}
 
 .fa-thermometer-2::before {
-  content: "\f2c9"; }
+  content: '\f2c9';
+}
 
 .fa-thermometer-half::before {
-  content: "\f2c9"; }
+  content: '\f2c9';
+}
 
 .fa-dong-sign::before {
-  content: "\e169"; }
+  content: '\e169';
+}
 
 .fa-capsules::before {
-  content: "\f46b"; }
+  content: '\f46b';
+}
 
 .fa-poo-storm::before {
-  content: "\f75a"; }
+  content: '\f75a';
+}
 
 .fa-poo-bolt::before {
-  content: "\f75a"; }
+  content: '\f75a';
+}
 
 .fa-face-frown-open::before {
-  content: "\f57a"; }
+  content: '\f57a';
+}
 
 .fa-frown-open::before {
-  content: "\f57a"; }
+  content: '\f57a';
+}
 
 .fa-hand-point-up::before {
-  content: "\f0a6"; }
+  content: '\f0a6';
+}
 
 .fa-money-bill::before {
-  content: "\f0d6"; }
+  content: '\f0d6';
+}
 
 .fa-bookmark::before {
-  content: "\f02e"; }
+  content: '\f02e';
+}
 
 .fa-align-justify::before {
-  content: "\f039"; }
+  content: '\f039';
+}
 
 .fa-umbrella-beach::before {
-  content: "\f5ca"; }
+  content: '\f5ca';
+}
 
 .fa-helmet-un::before {
-  content: "\e503"; }
+  content: '\e503';
+}
 
 .fa-bullseye::before {
-  content: "\f140"; }
+  content: '\f140';
+}
 
 .fa-bacon::before {
-  content: "\f7e5"; }
+  content: '\f7e5';
+}
 
 .fa-hand-point-down::before {
-  content: "\f0a7"; }
+  content: '\f0a7';
+}
 
 .fa-arrow-up-from-bracket::before {
-  content: "\e09a"; }
+  content: '\e09a';
+}
 
 .fa-folder::before {
-  content: "\f07b"; }
+  content: '\f07b';
+}
 
 .fa-folder-blank::before {
-  content: "\f07b"; }
+  content: '\f07b';
+}
 
 .fa-file-waveform::before {
-  content: "\f478"; }
+  content: '\f478';
+}
 
 .fa-file-medical-alt::before {
-  content: "\f478"; }
+  content: '\f478';
+}
 
 .fa-radiation::before {
-  content: "\f7b9"; }
+  content: '\f7b9';
+}
 
 .fa-chart-simple::before {
-  content: "\e473"; }
+  content: '\e473';
+}
 
 .fa-mars-stroke::before {
-  content: "\f229"; }
+  content: '\f229';
+}
 
 .fa-vial::before {
-  content: "\f492"; }
+  content: '\f492';
+}
 
 .fa-gauge::before {
-  content: "\f624"; }
+  content: '\f624';
+}
 
 .fa-dashboard::before {
-  content: "\f624"; }
+  content: '\f624';
+}
 
 .fa-gauge-med::before {
-  content: "\f624"; }
+  content: '\f624';
+}
 
 .fa-tachometer-alt-average::before {
-  content: "\f624"; }
+  content: '\f624';
+}
 
 .fa-wand-magic-sparkles::before {
-  content: "\e2ca"; }
+  content: '\e2ca';
+}
 
 .fa-magic-wand-sparkles::before {
-  content: "\e2ca"; }
+  content: '\e2ca';
+}
 
 .fa-e::before {
-  content: "\45"; }
+  content: '\45';
+}
 
 .fa-pen-clip::before {
-  content: "\f305"; }
+  content: '\f305';
+}
 
 .fa-pen-alt::before {
-  content: "\f305"; }
+  content: '\f305';
+}
 
 .fa-bridge-circle-exclamation::before {
-  content: "\e4ca"; }
+  content: '\e4ca';
+}
 
 .fa-user::before {
-  content: "\f007"; }
+  content: '\f007';
+}
 
 .fa-school-circle-check::before {
-  content: "\e56b"; }
+  content: '\e56b';
+}
 
 .fa-dumpster::before {
-  content: "\f793"; }
+  content: '\f793';
+}
 
 .fa-van-shuttle::before {
-  content: "\f5b6"; }
+  content: '\f5b6';
+}
 
 .fa-shuttle-van::before {
-  content: "\f5b6"; }
+  content: '\f5b6';
+}
 
 .fa-building-user::before {
-  content: "\e4da"; }
+  content: '\e4da';
+}
 
 .fa-square-caret-left::before {
-  content: "\f191"; }
+  content: '\f191';
+}
 
 .fa-caret-square-left::before {
-  content: "\f191"; }
+  content: '\f191';
+}
 
 .fa-highlighter::before {
-  content: "\f591"; }
+  content: '\f591';
+}
 
 .fa-key::before {
-  content: "\f084"; }
+  content: '\f084';
+}
 
 .fa-bullhorn::before {
-  content: "\f0a1"; }
+  content: '\f0a1';
+}
 
 .fa-globe::before {
-  content: "\f0ac"; }
+  content: '\f0ac';
+}
 
 .fa-synagogue::before {
-  content: "\f69b"; }
+  content: '\f69b';
+}
 
 .fa-person-half-dress::before {
-  content: "\e548"; }
+  content: '\e548';
+}
 
 .fa-road-bridge::before {
-  content: "\e563"; }
+  content: '\e563';
+}
 
 .fa-location-arrow::before {
-  content: "\f124"; }
+  content: '\f124';
+}
 
 .fa-c::before {
-  content: "\43"; }
+  content: '\43';
+}
 
 .fa-tablet-button::before {
-  content: "\f10a"; }
+  content: '\f10a';
+}
 
 .fa-building-lock::before {
-  content: "\e4d6"; }
+  content: '\e4d6';
+}
 
 .fa-pizza-slice::before {
-  content: "\f818"; }
+  content: '\f818';
+}
 
 .fa-money-bill-wave::before {
-  content: "\f53a"; }
+  content: '\f53a';
+}
 
 .fa-chart-area::before {
-  content: "\f1fe"; }
+  content: '\f1fe';
+}
 
 .fa-area-chart::before {
-  content: "\f1fe"; }
+  content: '\f1fe';
+}
 
 .fa-house-flag::before {
-  content: "\e50d"; }
+  content: '\e50d';
+}
 
 .fa-person-circle-minus::before {
-  content: "\e540"; }
+  content: '\e540';
+}
 
 .fa-ban::before {
-  content: "\f05e"; }
+  content: '\f05e';
+}
 
 .fa-cancel::before {
-  content: "\f05e"; }
+  content: '\f05e';
+}
 
 .fa-camera-rotate::before {
-  content: "\e0d8"; }
+  content: '\e0d8';
+}
 
 .fa-spray-can-sparkles::before {
-  content: "\f5d0"; }
+  content: '\f5d0';
+}
 
 .fa-air-freshener::before {
-  content: "\f5d0"; }
+  content: '\f5d0';
+}
 
 .fa-star::before {
-  content: "\f005"; }
+  content: '\f005';
+}
 
 .fa-repeat::before {
-  content: "\f363"; }
+  content: '\f363';
+}
 
 .fa-cross::before {
-  content: "\f654"; }
+  content: '\f654';
+}
 
 .fa-box::before {
-  content: "\f466"; }
+  content: '\f466';
+}
 
 .fa-venus-mars::before {
-  content: "\f228"; }
+  content: '\f228';
+}
 
 .fa-arrow-pointer::before {
-  content: "\f245"; }
+  content: '\f245';
+}
 
 .fa-mouse-pointer::before {
-  content: "\f245"; }
+  content: '\f245';
+}
 
 .fa-maximize::before {
-  content: "\f31e"; }
+  content: '\f31e';
+}
 
 .fa-expand-arrows-alt::before {
-  content: "\f31e"; }
+  content: '\f31e';
+}
 
 .fa-charging-station::before {
-  content: "\f5e7"; }
+  content: '\f5e7';
+}
 
 .fa-shapes::before {
-  content: "\f61f"; }
+  content: '\f61f';
+}
 
 .fa-triangle-circle-square::before {
-  content: "\f61f"; }
+  content: '\f61f';
+}
 
 .fa-shuffle::before {
-  content: "\f074"; }
+  content: '\f074';
+}
 
 .fa-random::before {
-  content: "\f074"; }
+  content: '\f074';
+}
 
 .fa-person-running::before {
-  content: "\f70c"; }
+  content: '\f70c';
+}
 
 .fa-running::before {
-  content: "\f70c"; }
+  content: '\f70c';
+}
 
 .fa-mobile-retro::before {
-  content: "\e527"; }
+  content: '\e527';
+}
 
 .fa-grip-lines-vertical::before {
-  content: "\f7a5"; }
+  content: '\f7a5';
+}
 
 .fa-spider::before {
-  content: "\f717"; }
+  content: '\f717';
+}
 
 .fa-hands-bound::before {
-  content: "\e4f9"; }
+  content: '\e4f9';
+}
 
 .fa-file-invoice-dollar::before {
-  content: "\f571"; }
+  content: '\f571';
+}
 
 .fa-plane-circle-exclamation::before {
-  content: "\e556"; }
+  content: '\e556';
+}
 
 .fa-x-ray::before {
-  content: "\f497"; }
+  content: '\f497';
+}
 
 .fa-spell-check::before {
-  content: "\f891"; }
+  content: '\f891';
+}
 
 .fa-slash::before {
-  content: "\f715"; }
+  content: '\f715';
+}
 
 .fa-computer-mouse::before {
-  content: "\f8cc"; }
+  content: '\f8cc';
+}
 
 .fa-mouse::before {
-  content: "\f8cc"; }
+  content: '\f8cc';
+}
 
 .fa-arrow-right-to-bracket::before {
-  content: "\f090"; }
+  content: '\f090';
+}
 
 .fa-sign-in::before {
-  content: "\f090"; }
+  content: '\f090';
+}
 
 .fa-shop-slash::before {
-  content: "\e070"; }
+  content: '\e070';
+}
 
 .fa-store-alt-slash::before {
-  content: "\e070"; }
+  content: '\e070';
+}
 
 .fa-server::before {
-  content: "\f233"; }
+  content: '\f233';
+}
 
 .fa-virus-covid-slash::before {
-  content: "\e4a9"; }
+  content: '\e4a9';
+}
 
 .fa-shop-lock::before {
-  content: "\e4a5"; }
+  content: '\e4a5';
+}
 
 .fa-hourglass-start::before {
-  content: "\f251"; }
+  content: '\f251';
+}
 
 .fa-hourglass-1::before {
-  content: "\f251"; }
+  content: '\f251';
+}
 
 .fa-blender-phone::before {
-  content: "\f6b6"; }
+  content: '\f6b6';
+}
 
 .fa-building-wheat::before {
-  content: "\e4db"; }
+  content: '\e4db';
+}
 
 .fa-person-breastfeeding::before {
-  content: "\e53a"; }
+  content: '\e53a';
+}
 
 .fa-right-to-bracket::before {
-  content: "\f2f6"; }
+  content: '\f2f6';
+}
 
 .fa-sign-in-alt::before {
-  content: "\f2f6"; }
+  content: '\f2f6';
+}
 
 .fa-venus::before {
-  content: "\f221"; }
+  content: '\f221';
+}
 
 .fa-passport::before {
-  content: "\f5ab"; }
+  content: '\f5ab';
+}
 
 .fa-heart-pulse::before {
-  content: "\f21e"; }
+  content: '\f21e';
+}
 
 .fa-heartbeat::before {
-  content: "\f21e"; }
+  content: '\f21e';
+}
 
 .fa-people-carry-box::before {
-  content: "\f4ce"; }
+  content: '\f4ce';
+}
 
 .fa-people-carry::before {
-  content: "\f4ce"; }
+  content: '\f4ce';
+}
 
 .fa-temperature-high::before {
-  content: "\f769"; }
+  content: '\f769';
+}
 
 .fa-microchip::before {
-  content: "\f2db"; }
+  content: '\f2db';
+}
 
 .fa-crown::before {
-  content: "\f521"; }
+  content: '\f521';
+}
 
 .fa-weight-hanging::before {
-  content: "\f5cd"; }
+  content: '\f5cd';
+}
 
 .fa-xmarks-lines::before {
-  content: "\e59a"; }
+  content: '\e59a';
+}
 
 .fa-file-prescription::before {
-  content: "\f572"; }
+  content: '\f572';
+}
 
 .fa-weight-scale::before {
-  content: "\f496"; }
+  content: '\f496';
+}
 
 .fa-weight::before {
-  content: "\f496"; }
+  content: '\f496';
+}
 
 .fa-user-group::before {
-  content: "\f500"; }
+  content: '\f500';
+}
 
 .fa-user-friends::before {
-  content: "\f500"; }
+  content: '\f500';
+}
 
 .fa-arrow-up-a-z::before {
-  content: "\f15e"; }
+  content: '\f15e';
+}
 
 .fa-sort-alpha-up::before {
-  content: "\f15e"; }
+  content: '\f15e';
+}
 
 .fa-chess-knight::before {
-  content: "\f441"; }
+  content: '\f441';
+}
 
 .fa-face-laugh-squint::before {
-  content: "\f59b"; }
+  content: '\f59b';
+}
 
 .fa-laugh-squint::before {
-  content: "\f59b"; }
+  content: '\f59b';
+}
 
 .fa-wheelchair::before {
-  content: "\f193"; }
+  content: '\f193';
+}
 
 .fa-circle-arrow-up::before {
-  content: "\f0aa"; }
+  content: '\f0aa';
+}
 
 .fa-arrow-circle-up::before {
-  content: "\f0aa"; }
+  content: '\f0aa';
+}
 
 .fa-toggle-on::before {
-  content: "\f205"; }
+  content: '\f205';
+}
 
 .fa-person-walking::before {
-  content: "\f554"; }
+  content: '\f554';
+}
 
 .fa-walking::before {
-  content: "\f554"; }
+  content: '\f554';
+}
 
 .fa-l::before {
-  content: "\4c"; }
+  content: '\4c';
+}
 
 .fa-fire::before {
-  content: "\f06d"; }
+  content: '\f06d';
+}
 
 .fa-bed-pulse::before {
-  content: "\f487"; }
+  content: '\f487';
+}
 
 .fa-procedures::before {
-  content: "\f487"; }
+  content: '\f487';
+}
 
 .fa-shuttle-space::before {
-  content: "\f197"; }
+  content: '\f197';
+}
 
 .fa-space-shuttle::before {
-  content: "\f197"; }
+  content: '\f197';
+}
 
 .fa-face-laugh::before {
-  content: "\f599"; }
+  content: '\f599';
+}
 
 .fa-laugh::before {
-  content: "\f599"; }
+  content: '\f599';
+}
 
 .fa-folder-open::before {
-  content: "\f07c"; }
+  content: '\f07c';
+}
 
 .fa-heart-circle-plus::before {
-  content: "\e500"; }
+  content: '\e500';
+}
 
 .fa-code-fork::before {
-  content: "\e13b"; }
+  content: '\e13b';
+}
 
 .fa-city::before {
-  content: "\f64f"; }
+  content: '\f64f';
+}
 
 .fa-microphone-lines::before {
-  content: "\f3c9"; }
+  content: '\f3c9';
+}
 
 .fa-microphone-alt::before {
-  content: "\f3c9"; }
+  content: '\f3c9';
+}
 
 .fa-pepper-hot::before {
-  content: "\f816"; }
+  content: '\f816';
+}
 
 .fa-unlock::before {
-  content: "\f09c"; }
+  content: '\f09c';
+}
 
 .fa-colon-sign::before {
-  content: "\e140"; }
+  content: '\e140';
+}
 
 .fa-headset::before {
-  content: "\f590"; }
+  content: '\f590';
+}
 
 .fa-store-slash::before {
-  content: "\e071"; }
+  content: '\e071';
+}
 
 .fa-road-circle-xmark::before {
-  content: "\e566"; }
+  content: '\e566';
+}
 
 .fa-user-minus::before {
-  content: "\f503"; }
+  content: '\f503';
+}
 
 .fa-mars-stroke-up::before {
-  content: "\f22a"; }
+  content: '\f22a';
+}
 
 .fa-mars-stroke-v::before {
-  content: "\f22a"; }
+  content: '\f22a';
+}
 
 .fa-champagne-glasses::before {
-  content: "\f79f"; }
+  content: '\f79f';
+}
 
 .fa-glass-cheers::before {
-  content: "\f79f"; }
+  content: '\f79f';
+}
 
 .fa-clipboard::before {
-  content: "\f328"; }
+  content: '\f328';
+}
 
 .fa-house-circle-exclamation::before {
-  content: "\e50a"; }
+  content: '\e50a';
+}
 
 .fa-file-arrow-up::before {
-  content: "\f574"; }
+  content: '\f574';
+}
 
 .fa-file-upload::before {
-  content: "\f574"; }
+  content: '\f574';
+}
 
 .fa-wifi::before {
-  content: "\f1eb"; }
+  content: '\f1eb';
+}
 
 .fa-wifi-3::before {
-  content: "\f1eb"; }
+  content: '\f1eb';
+}
 
 .fa-wifi-strong::before {
-  content: "\f1eb"; }
+  content: '\f1eb';
+}
 
 .fa-bath::before {
-  content: "\f2cd"; }
+  content: '\f2cd';
+}
 
 .fa-bathtub::before {
-  content: "\f2cd"; }
+  content: '\f2cd';
+}
 
 .fa-underline::before {
-  content: "\f0cd"; }
+  content: '\f0cd';
+}
 
 .fa-user-pen::before {
-  content: "\f4ff"; }
+  content: '\f4ff';
+}
 
 .fa-user-edit::before {
-  content: "\f4ff"; }
+  content: '\f4ff';
+}
 
 .fa-signature::before {
-  content: "\f5b7"; }
+  content: '\f5b7';
+}
 
 .fa-stroopwafel::before {
-  content: "\f551"; }
+  content: '\f551';
+}
 
 .fa-bold::before {
-  content: "\f032"; }
+  content: '\f032';
+}
 
 .fa-anchor-lock::before {
-  content: "\e4ad"; }
+  content: '\e4ad';
+}
 
 .fa-building-ngo::before {
-  content: "\e4d7"; }
+  content: '\e4d7';
+}
 
 .fa-manat-sign::before {
-  content: "\e1d5"; }
+  content: '\e1d5';
+}
 
 .fa-not-equal::before {
-  content: "\f53e"; }
+  content: '\f53e';
+}
 
 .fa-border-top-left::before {
-  content: "\f853"; }
+  content: '\f853';
+}
 
 .fa-border-style::before {
-  content: "\f853"; }
+  content: '\f853';
+}
 
 .fa-map-location-dot::before {
-  content: "\f5a0"; }
+  content: '\f5a0';
+}
 
 .fa-map-marked-alt::before {
-  content: "\f5a0"; }
+  content: '\f5a0';
+}
 
 .fa-jedi::before {
-  content: "\f669"; }
+  content: '\f669';
+}
 
 .fa-square-poll-vertical::before {
-  content: "\f681"; }
+  content: '\f681';
+}
 
 .fa-poll::before {
-  content: "\f681"; }
+  content: '\f681';
+}
 
 .fa-mug-hot::before {
-  content: "\f7b6"; }
+  content: '\f7b6';
+}
 
 .fa-car-battery::before {
-  content: "\f5df"; }
+  content: '\f5df';
+}
 
 .fa-battery-car::before {
-  content: "\f5df"; }
+  content: '\f5df';
+}
 
 .fa-gift::before {
-  content: "\f06b"; }
+  content: '\f06b';
+}
 
 .fa-dice-two::before {
-  content: "\f528"; }
+  content: '\f528';
+}
 
 .fa-chess-queen::before {
-  content: "\f445"; }
+  content: '\f445';
+}
 
 .fa-glasses::before {
-  content: "\f530"; }
+  content: '\f530';
+}
 
 .fa-chess-board::before {
-  content: "\f43c"; }
+  content: '\f43c';
+}
 
 .fa-building-circle-check::before {
-  content: "\e4d2"; }
+  content: '\e4d2';
+}
 
 .fa-person-chalkboard::before {
-  content: "\e53d"; }
+  content: '\e53d';
+}
 
 .fa-mars-stroke-right::before {
-  content: "\f22b"; }
+  content: '\f22b';
+}
 
 .fa-mars-stroke-h::before {
-  content: "\f22b"; }
+  content: '\f22b';
+}
 
 .fa-hand-back-fist::before {
-  content: "\f255"; }
+  content: '\f255';
+}
 
 .fa-hand-rock::before {
-  content: "\f255"; }
+  content: '\f255';
+}
 
 .fa-square-caret-up::before {
-  content: "\f151"; }
+  content: '\f151';
+}
 
 .fa-caret-square-up::before {
-  content: "\f151"; }
+  content: '\f151';
+}
 
 .fa-cloud-showers-water::before {
-  content: "\e4e4"; }
+  content: '\e4e4';
+}
 
 .fa-chart-bar::before {
-  content: "\f080"; }
+  content: '\f080';
+}
 
 .fa-bar-chart::before {
-  content: "\f080"; }
+  content: '\f080';
+}
 
 .fa-hands-bubbles::before {
-  content: "\e05e"; }
+  content: '\e05e';
+}
 
 .fa-hands-wash::before {
-  content: "\e05e"; }
+  content: '\e05e';
+}
 
 .fa-less-than-equal::before {
-  content: "\f537"; }
+  content: '\f537';
+}
 
 .fa-train::before {
-  content: "\f238"; }
+  content: '\f238';
+}
 
 .fa-eye-low-vision::before {
-  content: "\f2a8"; }
+  content: '\f2a8';
+}
 
 .fa-low-vision::before {
-  content: "\f2a8"; }
+  content: '\f2a8';
+}
 
 .fa-crow::before {
-  content: "\f520"; }
+  content: '\f520';
+}
 
 .fa-sailboat::before {
-  content: "\e445"; }
+  content: '\e445';
+}
 
 .fa-window-restore::before {
-  content: "\f2d2"; }
+  content: '\f2d2';
+}
 
 .fa-square-plus::before {
-  content: "\f0fe"; }
+  content: '\f0fe';
+}
 
 .fa-plus-square::before {
-  content: "\f0fe"; }
+  content: '\f0fe';
+}
 
 .fa-torii-gate::before {
-  content: "\f6a1"; }
+  content: '\f6a1';
+}
 
 .fa-frog::before {
-  content: "\f52e"; }
+  content: '\f52e';
+}
 
 .fa-bucket::before {
-  content: "\e4cf"; }
+  content: '\e4cf';
+}
 
 .fa-image::before {
-  content: "\f03e"; }
+  content: '\f03e';
+}
 
 .fa-microphone::before {
-  content: "\f130"; }
+  content: '\f130';
+}
 
 .fa-cow::before {
-  content: "\f6c8"; }
+  content: '\f6c8';
+}
 
 .fa-caret-up::before {
-  content: "\f0d8"; }
+  content: '\f0d8';
+}
 
 .fa-screwdriver::before {
-  content: "\f54a"; }
+  content: '\f54a';
+}
 
 .fa-folder-closed::before {
-  content: "\e185"; }
+  content: '\e185';
+}
 
 .fa-house-tsunami::before {
-  content: "\e515"; }
+  content: '\e515';
+}
 
 .fa-square-nfi::before {
-  content: "\e576"; }
+  content: '\e576';
+}
 
 .fa-arrow-up-from-ground-water::before {
-  content: "\e4b5"; }
+  content: '\e4b5';
+}
 
 .fa-martini-glass::before {
-  content: "\f57b"; }
+  content: '\f57b';
+}
 
 .fa-glass-martini-alt::before {
-  content: "\f57b"; }
+  content: '\f57b';
+}
 
 .fa-rotate-left::before {
-  content: "\f2ea"; }
+  content: '\f2ea';
+}
 
 .fa-rotate-back::before {
-  content: "\f2ea"; }
+  content: '\f2ea';
+}
 
 .fa-rotate-backward::before {
-  content: "\f2ea"; }
+  content: '\f2ea';
+}
 
 .fa-undo-alt::before {
-  content: "\f2ea"; }
+  content: '\f2ea';
+}
 
 .fa-table-columns::before {
-  content: "\f0db"; }
+  content: '\f0db';
+}
 
 .fa-columns::before {
-  content: "\f0db"; }
+  content: '\f0db';
+}
 
 .fa-lemon::before {
-  content: "\f094"; }
+  content: '\f094';
+}
 
 .fa-head-side-mask::before {
-  content: "\e063"; }
+  content: '\e063';
+}
 
 .fa-handshake::before {
-  content: "\f2b5"; }
+  content: '\f2b5';
+}
 
 .fa-gem::before {
-  content: "\f3a5"; }
+  content: '\f3a5';
+}
 
 .fa-dolly::before {
-  content: "\f472"; }
+  content: '\f472';
+}
 
 .fa-dolly-box::before {
-  content: "\f472"; }
+  content: '\f472';
+}
 
 .fa-smoking::before {
-  content: "\f48d"; }
+  content: '\f48d';
+}
 
 .fa-minimize::before {
-  content: "\f78c"; }
+  content: '\f78c';
+}
 
 .fa-compress-arrows-alt::before {
-  content: "\f78c"; }
+  content: '\f78c';
+}
 
 .fa-monument::before {
-  content: "\f5a6"; }
+  content: '\f5a6';
+}
 
 .fa-snowplow::before {
-  content: "\f7d2"; }
+  content: '\f7d2';
+}
 
 .fa-angles-right::before {
-  content: "\f101"; }
+  content: '\f101';
+}
 
 .fa-angle-double-right::before {
-  content: "\f101"; }
+  content: '\f101';
+}
 
 .fa-cannabis::before {
-  content: "\f55f"; }
+  content: '\f55f';
+}
 
 .fa-circle-play::before {
-  content: "\f144"; }
+  content: '\f144';
+}
 
 .fa-play-circle::before {
-  content: "\f144"; }
+  content: '\f144';
+}
 
 .fa-tablets::before {
-  content: "\f490"; }
+  content: '\f490';
+}
 
 .fa-ethernet::before {
-  content: "\f796"; }
+  content: '\f796';
+}
 
 .fa-euro-sign::before {
-  content: "\f153"; }
+  content: '\f153';
+}
 
 .fa-eur::before {
-  content: "\f153"; }
+  content: '\f153';
+}
 
 .fa-euro::before {
-  content: "\f153"; }
+  content: '\f153';
+}
 
 .fa-chair::before {
-  content: "\f6c0"; }
+  content: '\f6c0';
+}
 
 .fa-circle-check::before {
-  content: "\f058"; }
+  content: '\f058';
+}
 
 .fa-check-circle::before {
-  content: "\f058"; }
+  content: '\f058';
+}
 
 .fa-circle-stop::before {
-  content: "\f28d"; }
+  content: '\f28d';
+}
 
 .fa-stop-circle::before {
-  content: "\f28d"; }
+  content: '\f28d';
+}
 
 .fa-compass-drafting::before {
-  content: "\f568"; }
+  content: '\f568';
+}
 
 .fa-drafting-compass::before {
-  content: "\f568"; }
+  content: '\f568';
+}
 
 .fa-plate-wheat::before {
-  content: "\e55a"; }
+  content: '\e55a';
+}
 
 .fa-icicles::before {
-  content: "\f7ad"; }
+  content: '\f7ad';
+}
 
 .fa-person-shelter::before {
-  content: "\e54f"; }
+  content: '\e54f';
+}
 
 .fa-neuter::before {
-  content: "\f22c"; }
+  content: '\f22c';
+}
 
 .fa-id-badge::before {
-  content: "\f2c1"; }
+  content: '\f2c1';
+}
 
 .fa-marker::before {
-  content: "\f5a1"; }
+  content: '\f5a1';
+}
 
 .fa-face-laugh-beam::before {
-  content: "\f59a"; }
+  content: '\f59a';
+}
 
 .fa-laugh-beam::before {
-  content: "\f59a"; }
+  content: '\f59a';
+}
 
 .fa-helicopter-symbol::before {
-  content: "\e502"; }
+  content: '\e502';
+}
 
 .fa-universal-access::before {
-  content: "\f29a"; }
+  content: '\f29a';
+}
 
 .fa-circle-chevron-up::before {
-  content: "\f139"; }
+  content: '\f139';
+}
 
 .fa-chevron-circle-up::before {
-  content: "\f139"; }
+  content: '\f139';
+}
 
 .fa-lari-sign::before {
-  content: "\e1c8"; }
+  content: '\e1c8';
+}
 
 .fa-volcano::before {
-  content: "\f770"; }
+  content: '\f770';
+}
 
 .fa-person-walking-dashed-line-arrow-right::before {
-  content: "\e553"; }
+  content: '\e553';
+}
 
 .fa-sterling-sign::before {
-  content: "\f154"; }
+  content: '\f154';
+}
 
 .fa-gbp::before {
-  content: "\f154"; }
+  content: '\f154';
+}
 
 .fa-pound-sign::before {
-  content: "\f154"; }
+  content: '\f154';
+}
 
 .fa-viruses::before {
-  content: "\e076"; }
+  content: '\e076';
+}
 
 .fa-square-person-confined::before {
-  content: "\e577"; }
+  content: '\e577';
+}
 
 .fa-user-tie::before {
-  content: "\f508"; }
+  content: '\f508';
+}
 
 .fa-arrow-down-long::before {
-  content: "\f175"; }
+  content: '\f175';
+}
 
 .fa-long-arrow-down::before {
-  content: "\f175"; }
+  content: '\f175';
+}
 
 .fa-tent-arrow-down-to-line::before {
-  content: "\e57e"; }
+  content: '\e57e';
+}
 
 .fa-certificate::before {
-  content: "\f0a3"; }
+  content: '\f0a3';
+}
 
 .fa-reply-all::before {
-  content: "\f122"; }
+  content: '\f122';
+}
 
 .fa-mail-reply-all::before {
-  content: "\f122"; }
+  content: '\f122';
+}
 
 .fa-suitcase::before {
-  content: "\f0f2"; }
+  content: '\f0f2';
+}
 
 .fa-person-skating::before {
-  content: "\f7c5"; }
+  content: '\f7c5';
+}
 
 .fa-skating::before {
-  content: "\f7c5"; }
+  content: '\f7c5';
+}
 
 .fa-filter-circle-dollar::before {
-  content: "\f662"; }
+  content: '\f662';
+}
 
 .fa-funnel-dollar::before {
-  content: "\f662"; }
+  content: '\f662';
+}
 
 .fa-camera-retro::before {
-  content: "\f083"; }
+  content: '\f083';
+}
 
 .fa-circle-arrow-down::before {
-  content: "\f0ab"; }
+  content: '\f0ab';
+}
 
 .fa-arrow-circle-down::before {
-  content: "\f0ab"; }
+  content: '\f0ab';
+}
 
 .fa-file-import::before {
-  content: "\f56f"; }
+  content: '\f56f';
+}
 
 .fa-arrow-right-to-file::before {
-  content: "\f56f"; }
+  content: '\f56f';
+}
 
 .fa-square-arrow-up-right::before {
-  content: "\f14c"; }
+  content: '\f14c';
+}
 
 .fa-external-link-square::before {
-  content: "\f14c"; }
+  content: '\f14c';
+}
 
 .fa-box-open::before {
-  content: "\f49e"; }
+  content: '\f49e';
+}
 
 .fa-scroll::before {
-  content: "\f70e"; }
+  content: '\f70e';
+}
 
 .fa-spa::before {
-  content: "\f5bb"; }
+  content: '\f5bb';
+}
 
 .fa-location-pin-lock::before {
-  content: "\e51f"; }
+  content: '\e51f';
+}
 
 .fa-pause::before {
-  content: "\f04c"; }
+  content: '\f04c';
+}
 
 .fa-hill-avalanche::before {
-  content: "\e507"; }
+  content: '\e507';
+}
 
 .fa-temperature-empty::before {
-  content: "\f2cb"; }
+  content: '\f2cb';
+}
 
 .fa-temperature-0::before {
-  content: "\f2cb"; }
+  content: '\f2cb';
+}
 
 .fa-thermometer-0::before {
-  content: "\f2cb"; }
+  content: '\f2cb';
+}
 
 .fa-thermometer-empty::before {
-  content: "\f2cb"; }
+  content: '\f2cb';
+}
 
 .fa-bomb::before {
-  content: "\f1e2"; }
+  content: '\f1e2';
+}
 
 .fa-registered::before {
-  content: "\f25d"; }
+  content: '\f25d';
+}
 
 .fa-address-card::before {
-  content: "\f2bb"; }
+  content: '\f2bb';
+}
 
 .fa-contact-card::before {
-  content: "\f2bb"; }
+  content: '\f2bb';
+}
 
 .fa-vcard::before {
-  content: "\f2bb"; }
+  content: '\f2bb';
+}
 
 .fa-scale-unbalanced-flip::before {
-  content: "\f516"; }
+  content: '\f516';
+}
 
 .fa-balance-scale-right::before {
-  content: "\f516"; }
+  content: '\f516';
+}
 
 .fa-subscript::before {
-  content: "\f12c"; }
+  content: '\f12c';
+}
 
 .fa-diamond-turn-right::before {
-  content: "\f5eb"; }
+  content: '\f5eb';
+}
 
 .fa-directions::before {
-  content: "\f5eb"; }
+  content: '\f5eb';
+}
 
 .fa-burst::before {
-  content: "\e4dc"; }
+  content: '\e4dc';
+}
 
 .fa-house-laptop::before {
-  content: "\e066"; }
+  content: '\e066';
+}
 
 .fa-laptop-house::before {
-  content: "\e066"; }
+  content: '\e066';
+}
 
 .fa-face-tired::before {
-  content: "\f5c8"; }
+  content: '\f5c8';
+}
 
 .fa-tired::before {
-  content: "\f5c8"; }
+  content: '\f5c8';
+}
 
 .fa-money-bills::before {
-  content: "\e1f3"; }
+  content: '\e1f3';
+}
 
 .fa-smog::before {
-  content: "\f75f"; }
+  content: '\f75f';
+}
 
 .fa-crutch::before {
-  content: "\f7f7"; }
+  content: '\f7f7';
+}
 
 .fa-cloud-arrow-up::before {
-  content: "\f0ee"; }
+  content: '\f0ee';
+}
 
 .fa-cloud-upload::before {
-  content: "\f0ee"; }
+  content: '\f0ee';
+}
 
 .fa-cloud-upload-alt::before {
-  content: "\f0ee"; }
+  content: '\f0ee';
+}
 
 .fa-palette::before {
-  content: "\f53f"; }
+  content: '\f53f';
+}
 
 .fa-arrows-turn-right::before {
-  content: "\e4c0"; }
+  content: '\e4c0';
+}
 
 .fa-vest::before {
-  content: "\e085"; }
+  content: '\e085';
+}
 
 .fa-ferry::before {
-  content: "\e4ea"; }
+  content: '\e4ea';
+}
 
 .fa-arrows-down-to-people::before {
-  content: "\e4b9"; }
+  content: '\e4b9';
+}
 
 .fa-seedling::before {
-  content: "\f4d8"; }
+  content: '\f4d8';
+}
 
 .fa-sprout::before {
-  content: "\f4d8"; }
+  content: '\f4d8';
+}
 
 .fa-left-right::before {
-  content: "\f337"; }
+  content: '\f337';
+}
 
 .fa-arrows-alt-h::before {
-  content: "\f337"; }
+  content: '\f337';
+}
 
 .fa-boxes-packing::before {
-  content: "\e4c7"; }
+  content: '\e4c7';
+}
 
 .fa-circle-arrow-left::before {
-  content: "\f0a8"; }
+  content: '\f0a8';
+}
 
 .fa-arrow-circle-left::before {
-  content: "\f0a8"; }
+  content: '\f0a8';
+}
 
 .fa-group-arrows-rotate::before {
-  content: "\e4f6"; }
+  content: '\e4f6';
+}
 
 .fa-bowl-food::before {
-  content: "\e4c6"; }
+  content: '\e4c6';
+}
 
 .fa-candy-cane::before {
-  content: "\f786"; }
+  content: '\f786';
+}
 
 .fa-arrow-down-wide-short::before {
-  content: "\f160"; }
+  content: '\f160';
+}
 
 .fa-sort-amount-asc::before {
-  content: "\f160"; }
+  content: '\f160';
+}
 
 .fa-sort-amount-down::before {
-  content: "\f160"; }
+  content: '\f160';
+}
 
 .fa-cloud-bolt::before {
-  content: "\f76c"; }
+  content: '\f76c';
+}
 
 .fa-thunderstorm::before {
-  content: "\f76c"; }
+  content: '\f76c';
+}
 
 .fa-text-slash::before {
-  content: "\f87d"; }
+  content: '\f87d';
+}
 
 .fa-remove-format::before {
-  content: "\f87d"; }
+  content: '\f87d';
+}
 
 .fa-face-smile-wink::before {
-  content: "\f4da"; }
+  content: '\f4da';
+}
 
 .fa-smile-wink::before {
-  content: "\f4da"; }
+  content: '\f4da';
+}
 
 .fa-file-word::before {
-  content: "\f1c2"; }
+  content: '\f1c2';
+}
 
 .fa-file-powerpoint::before {
-  content: "\f1c4"; }
+  content: '\f1c4';
+}
 
 .fa-arrows-left-right::before {
-  content: "\f07e"; }
+  content: '\f07e';
+}
 
 .fa-arrows-h::before {
-  content: "\f07e"; }
+  content: '\f07e';
+}
 
 .fa-house-lock::before {
-  content: "\e510"; }
+  content: '\e510';
+}
 
 .fa-cloud-arrow-down::before {
-  content: "\f0ed"; }
+  content: '\f0ed';
+}
 
 .fa-cloud-download::before {
-  content: "\f0ed"; }
+  content: '\f0ed';
+}
 
 .fa-cloud-download-alt::before {
-  content: "\f0ed"; }
+  content: '\f0ed';
+}
 
 .fa-children::before {
-  content: "\e4e1"; }
+  content: '\e4e1';
+}
 
 .fa-chalkboard::before {
-  content: "\f51b"; }
+  content: '\f51b';
+}
 
 .fa-blackboard::before {
-  content: "\f51b"; }
+  content: '\f51b';
+}
 
 .fa-user-large-slash::before {
-  content: "\f4fa"; }
+  content: '\f4fa';
+}
 
 .fa-user-alt-slash::before {
-  content: "\f4fa"; }
+  content: '\f4fa';
+}
 
 .fa-envelope-open::before {
-  content: "\f2b6"; }
+  content: '\f2b6';
+}
 
 .fa-handshake-simple-slash::before {
-  content: "\e05f"; }
+  content: '\e05f';
+}
 
 .fa-handshake-alt-slash::before {
-  content: "\e05f"; }
+  content: '\e05f';
+}
 
 .fa-mattress-pillow::before {
-  content: "\e525"; }
+  content: '\e525';
+}
 
 .fa-guarani-sign::before {
-  content: "\e19a"; }
+  content: '\e19a';
+}
 
 .fa-arrows-rotate::before {
-  content: "\f021"; }
+  content: '\f021';
+}
 
 .fa-refresh::before {
-  content: "\f021"; }
+  content: '\f021';
+}
 
 .fa-sync::before {
-  content: "\f021"; }
+  content: '\f021';
+}
 
 .fa-fire-extinguisher::before {
-  content: "\f134"; }
+  content: '\f134';
+}
 
 .fa-cruzeiro-sign::before {
-  content: "\e152"; }
+  content: '\e152';
+}
 
 .fa-greater-than-equal::before {
-  content: "\f532"; }
+  content: '\f532';
+}
 
 .fa-shield-halved::before {
-  content: "\f3ed"; }
+  content: '\f3ed';
+}
 
 .fa-shield-alt::before {
-  content: "\f3ed"; }
+  content: '\f3ed';
+}
 
 .fa-book-atlas::before {
-  content: "\f558"; }
+  content: '\f558';
+}
 
 .fa-atlas::before {
-  content: "\f558"; }
+  content: '\f558';
+}
 
 .fa-virus::before {
-  content: "\e074"; }
+  content: '\e074';
+}
 
 .fa-envelope-circle-check::before {
-  content: "\e4e8"; }
+  content: '\e4e8';
+}
 
 .fa-layer-group::before {
-  content: "\f5fd"; }
+  content: '\f5fd';
+}
 
 .fa-arrows-to-dot::before {
-  content: "\e4be"; }
+  content: '\e4be';
+}
 
 .fa-archway::before {
-  content: "\f557"; }
+  content: '\f557';
+}
 
 .fa-heart-circle-check::before {
-  content: "\e4fd"; }
+  content: '\e4fd';
+}
 
 .fa-house-chimney-crack::before {
-  content: "\f6f1"; }
+  content: '\f6f1';
+}
 
 .fa-house-damage::before {
-  content: "\f6f1"; }
+  content: '\f6f1';
+}
 
 .fa-file-zipper::before {
-  content: "\f1c6"; }
+  content: '\f1c6';
+}
 
 .fa-file-archive::before {
-  content: "\f1c6"; }
+  content: '\f1c6';
+}
 
 .fa-square::before {
-  content: "\f0c8"; }
+  content: '\f0c8';
+}
 
 .fa-martini-glass-empty::before {
-  content: "\f000"; }
+  content: '\f000';
+}
 
 .fa-glass-martini::before {
-  content: "\f000"; }
+  content: '\f000';
+}
 
 .fa-couch::before {
-  content: "\f4b8"; }
+  content: '\f4b8';
+}
 
 .fa-cedi-sign::before {
-  content: "\e0df"; }
+  content: '\e0df';
+}
 
 .fa-italic::before {
-  content: "\f033"; }
+  content: '\f033';
+}
 
 .fa-church::before {
-  content: "\f51d"; }
+  content: '\f51d';
+}
 
 .fa-comments-dollar::before {
-  content: "\f653"; }
+  content: '\f653';
+}
 
 .fa-democrat::before {
-  content: "\f747"; }
+  content: '\f747';
+}
 
 .fa-z::before {
-  content: "\5a"; }
+  content: '\5a';
+}
 
 .fa-person-skiing::before {
-  content: "\f7c9"; }
+  content: '\f7c9';
+}
 
 .fa-skiing::before {
-  content: "\f7c9"; }
+  content: '\f7c9';
+}
 
 .fa-road-lock::before {
-  content: "\e567"; }
+  content: '\e567';
+}
 
 .fa-a::before {
-  content: "\41"; }
+  content: '\41';
+}
 
 .fa-temperature-arrow-down::before {
-  content: "\e03f"; }
+  content: '\e03f';
+}
 
 .fa-temperature-down::before {
-  content: "\e03f"; }
+  content: '\e03f';
+}
 
 .fa-feather-pointed::before {
-  content: "\f56b"; }
+  content: '\f56b';
+}
 
 .fa-feather-alt::before {
-  content: "\f56b"; }
+  content: '\f56b';
+}
 
 .fa-p::before {
-  content: "\50"; }
+  content: '\50';
+}
 
 .fa-snowflake::before {
-  content: "\f2dc"; }
+  content: '\f2dc';
+}
 
 .fa-newspaper::before {
-  content: "\f1ea"; }
+  content: '\f1ea';
+}
 
 .fa-rectangle-ad::before {
-  content: "\f641"; }
+  content: '\f641';
+}
 
 .fa-ad::before {
-  content: "\f641"; }
+  content: '\f641';
+}
 
 .fa-circle-arrow-right::before {
-  content: "\f0a9"; }
+  content: '\f0a9';
+}
 
 .fa-arrow-circle-right::before {
-  content: "\f0a9"; }
+  content: '\f0a9';
+}
 
 .fa-filter-circle-xmark::before {
-  content: "\e17b"; }
+  content: '\e17b';
+}
 
 .fa-locust::before {
-  content: "\e520"; }
+  content: '\e520';
+}
 
 .fa-sort::before {
-  content: "\f0dc"; }
+  content: '\f0dc';
+}
 
 .fa-unsorted::before {
-  content: "\f0dc"; }
+  content: '\f0dc';
+}
 
 .fa-list-ol::before {
-  content: "\f0cb"; }
+  content: '\f0cb';
+}
 
 .fa-list-1-2::before {
-  content: "\f0cb"; }
+  content: '\f0cb';
+}
 
 .fa-list-numeric::before {
-  content: "\f0cb"; }
+  content: '\f0cb';
+}
 
 .fa-person-dress-burst::before {
-  content: "\e544"; }
+  content: '\e544';
+}
 
 .fa-money-check-dollar::before {
-  content: "\f53d"; }
+  content: '\f53d';
+}
 
 .fa-money-check-alt::before {
-  content: "\f53d"; }
+  content: '\f53d';
+}
 
 .fa-vector-square::before {
-  content: "\f5cb"; }
+  content: '\f5cb';
+}
 
 .fa-bread-slice::before {
-  content: "\f7ec"; }
+  content: '\f7ec';
+}
 
 .fa-language::before {
-  content: "\f1ab"; }
+  content: '\f1ab';
+}
 
 .fa-face-kiss-wink-heart::before {
-  content: "\f598"; }
+  content: '\f598';
+}
 
 .fa-kiss-wink-heart::before {
-  content: "\f598"; }
+  content: '\f598';
+}
 
 .fa-filter::before {
-  content: "\f0b0"; }
+  content: '\f0b0';
+}
 
 .fa-question::before {
-  content: "\3f"; }
+  content: '\3f';
+}
 
 .fa-file-signature::before {
-  content: "\f573"; }
+  content: '\f573';
+}
 
 .fa-up-down-left-right::before {
-  content: "\f0b2"; }
+  content: '\f0b2';
+}
 
 .fa-arrows-alt::before {
-  content: "\f0b2"; }
+  content: '\f0b2';
+}
 
 .fa-house-chimney-user::before {
-  content: "\e065"; }
+  content: '\e065';
+}
 
 .fa-hand-holding-heart::before {
-  content: "\f4be"; }
+  content: '\f4be';
+}
 
 .fa-puzzle-piece::before {
-  content: "\f12e"; }
+  content: '\f12e';
+}
 
 .fa-money-check::before {
-  content: "\f53c"; }
+  content: '\f53c';
+}
 
 .fa-star-half-stroke::before {
-  content: "\f5c0"; }
+  content: '\f5c0';
+}
 
 .fa-star-half-alt::before {
-  content: "\f5c0"; }
+  content: '\f5c0';
+}
 
 .fa-code::before {
-  content: "\f121"; }
+  content: '\f121';
+}
 
 .fa-whiskey-glass::before {
-  content: "\f7a0"; }
+  content: '\f7a0';
+}
 
 .fa-glass-whiskey::before {
-  content: "\f7a0"; }
+  content: '\f7a0';
+}
 
 .fa-building-circle-exclamation::before {
-  content: "\e4d3"; }
+  content: '\e4d3';
+}
 
 .fa-magnifying-glass-chart::before {
-  content: "\e522"; }
+  content: '\e522';
+}
 
 .fa-arrow-up-right-from-square::before {
-  content: "\f08e"; }
+  content: '\f08e';
+}
 
 .fa-external-link::before {
-  content: "\f08e"; }
+  content: '\f08e';
+}
 
 .fa-cubes-stacked::before {
-  content: "\e4e6"; }
+  content: '\e4e6';
+}
 
 .fa-won-sign::before {
-  content: "\f159"; }
+  content: '\f159';
+}
 
 .fa-krw::before {
-  content: "\f159"; }
+  content: '\f159';
+}
 
 .fa-won::before {
-  content: "\f159"; }
+  content: '\f159';
+}
 
 .fa-virus-covid::before {
-  content: "\e4a8"; }
+  content: '\e4a8';
+}
 
 .fa-austral-sign::before {
-  content: "\e0a9"; }
+  content: '\e0a9';
+}
 
 .fa-f::before {
-  content: "\46"; }
+  content: '\46';
+}
 
 .fa-leaf::before {
-  content: "\f06c"; }
+  content: '\f06c';
+}
 
 .fa-road::before {
-  content: "\f018"; }
+  content: '\f018';
+}
 
 .fa-taxi::before {
-  content: "\f1ba"; }
+  content: '\f1ba';
+}
 
 .fa-cab::before {
-  content: "\f1ba"; }
+  content: '\f1ba';
+}
 
 .fa-person-circle-plus::before {
-  content: "\e541"; }
+  content: '\e541';
+}
 
 .fa-chart-pie::before {
-  content: "\f200"; }
+  content: '\f200';
+}
 
 .fa-pie-chart::before {
-  content: "\f200"; }
+  content: '\f200';
+}
 
 .fa-bolt-lightning::before {
-  content: "\e0b7"; }
+  content: '\e0b7';
+}
 
 .fa-sack-xmark::before {
-  content: "\e56a"; }
+  content: '\e56a';
+}
 
 .fa-file-excel::before {
-  content: "\f1c3"; }
+  content: '\f1c3';
+}
 
 .fa-file-contract::before {
-  content: "\f56c"; }
+  content: '\f56c';
+}
 
 .fa-fish-fins::before {
-  content: "\e4f2"; }
+  content: '\e4f2';
+}
 
 .fa-building-flag::before {
-  content: "\e4d5"; }
+  content: '\e4d5';
+}
 
 .fa-face-grin-beam::before {
-  content: "\f582"; }
+  content: '\f582';
+}
 
 .fa-grin-beam::before {
-  content: "\f582"; }
+  content: '\f582';
+}
 
 .fa-object-ungroup::before {
-  content: "\f248"; }
+  content: '\f248';
+}
 
 .fa-poop::before {
-  content: "\f619"; }
+  content: '\f619';
+}
 
 .fa-location-pin::before {
-  content: "\f041"; }
+  content: '\f041';
+}
 
 .fa-map-marker::before {
-  content: "\f041"; }
+  content: '\f041';
+}
 
 .fa-kaaba::before {
-  content: "\f66b"; }
+  content: '\f66b';
+}
 
 .fa-toilet-paper::before {
-  content: "\f71e"; }
+  content: '\f71e';
+}
 
 .fa-helmet-safety::before {
-  content: "\f807"; }
+  content: '\f807';
+}
 
 .fa-hard-hat::before {
-  content: "\f807"; }
+  content: '\f807';
+}
 
 .fa-hat-hard::before {
-  content: "\f807"; }
+  content: '\f807';
+}
 
 .fa-eject::before {
-  content: "\f052"; }
+  content: '\f052';
+}
 
 .fa-circle-right::before {
-  content: "\f35a"; }
+  content: '\f35a';
+}
 
 .fa-arrow-alt-circle-right::before {
-  content: "\f35a"; }
+  content: '\f35a';
+}
 
 .fa-plane-circle-check::before {
-  content: "\e555"; }
+  content: '\e555';
+}
 
 .fa-face-rolling-eyes::before {
-  content: "\f5a5"; }
+  content: '\f5a5';
+}
 
 .fa-meh-rolling-eyes::before {
-  content: "\f5a5"; }
+  content: '\f5a5';
+}
 
 .fa-object-group::before {
-  content: "\f247"; }
+  content: '\f247';
+}
 
 .fa-chart-line::before {
-  content: "\f201"; }
+  content: '\f201';
+}
 
 .fa-line-chart::before {
-  content: "\f201"; }
+  content: '\f201';
+}
 
 .fa-mask-ventilator::before {
-  content: "\e524"; }
+  content: '\e524';
+}
 
 .fa-arrow-right::before {
-  content: "\f061"; }
+  content: '\f061';
+}
 
 .fa-signs-post::before {
-  content: "\f277"; }
+  content: '\f277';
+}
 
 .fa-map-signs::before {
-  content: "\f277"; }
+  content: '\f277';
+}
 
 .fa-cash-register::before {
-  content: "\f788"; }
+  content: '\f788';
+}
 
 .fa-person-circle-question::before {
-  content: "\e542"; }
+  content: '\e542';
+}
 
 .fa-h::before {
-  content: "\48"; }
+  content: '\48';
+}
 
 .fa-tarp::before {
-  content: "\e57b"; }
+  content: '\e57b';
+}
 
 .fa-screwdriver-wrench::before {
-  content: "\f7d9"; }
+  content: '\f7d9';
+}
 
 .fa-tools::before {
-  content: "\f7d9"; }
+  content: '\f7d9';
+}
 
 .fa-arrows-to-eye::before {
-  content: "\e4bf"; }
+  content: '\e4bf';
+}
 
 .fa-plug-circle-bolt::before {
-  content: "\e55b"; }
+  content: '\e55b';
+}
 
 .fa-heart::before {
-  content: "\f004"; }
+  content: '\f004';
+}
 
 .fa-mars-and-venus::before {
-  content: "\f224"; }
+  content: '\f224';
+}
 
 .fa-house-user::before {
-  content: "\e1b0"; }
+  content: '\e1b0';
+}
 
 .fa-home-user::before {
-  content: "\e1b0"; }
+  content: '\e1b0';
+}
 
 .fa-dumpster-fire::before {
-  content: "\f794"; }
+  content: '\f794';
+}
 
 .fa-house-crack::before {
-  content: "\e3b1"; }
+  content: '\e3b1';
+}
 
 .fa-martini-glass-citrus::before {
-  content: "\f561"; }
+  content: '\f561';
+}
 
 .fa-cocktail::before {
-  content: "\f561"; }
+  content: '\f561';
+}
 
 .fa-face-surprise::before {
-  content: "\f5c2"; }
+  content: '\f5c2';
+}
 
 .fa-surprise::before {
-  content: "\f5c2"; }
+  content: '\f5c2';
+}
 
 .fa-bottle-water::before {
-  content: "\e4c5"; }
+  content: '\e4c5';
+}
 
 .fa-circle-pause::before {
-  content: "\f28b"; }
+  content: '\f28b';
+}
 
 .fa-pause-circle::before {
-  content: "\f28b"; }
+  content: '\f28b';
+}
 
 .fa-toilet-paper-slash::before {
-  content: "\e072"; }
+  content: '\e072';
+}
 
 .fa-apple-whole::before {
-  content: "\f5d1"; }
+  content: '\f5d1';
+}
 
 .fa-apple-alt::before {
-  content: "\f5d1"; }
+  content: '\f5d1';
+}
 
 .fa-kitchen-set::before {
-  content: "\e51a"; }
+  content: '\e51a';
+}
 
 .fa-r::before {
-  content: "\52"; }
+  content: '\52';
+}
 
 .fa-temperature-quarter::before {
-  content: "\f2ca"; }
+  content: '\f2ca';
+}
 
 .fa-temperature-1::before {
-  content: "\f2ca"; }
+  content: '\f2ca';
+}
 
 .fa-thermometer-1::before {
-  content: "\f2ca"; }
+  content: '\f2ca';
+}
 
 .fa-thermometer-quarter::before {
-  content: "\f2ca"; }
+  content: '\f2ca';
+}
 
 .fa-cube::before {
-  content: "\f1b2"; }
+  content: '\f1b2';
+}
 
 .fa-bitcoin-sign::before {
-  content: "\e0b4"; }
+  content: '\e0b4';
+}
 
 .fa-shield-dog::before {
-  content: "\e573"; }
+  content: '\e573';
+}
 
 .fa-solar-panel::before {
-  content: "\f5ba"; }
+  content: '\f5ba';
+}
 
 .fa-lock-open::before {
-  content: "\f3c1"; }
+  content: '\f3c1';
+}
 
 .fa-elevator::before {
-  content: "\e16d"; }
+  content: '\e16d';
+}
 
 .fa-money-bill-transfer::before {
-  content: "\e528"; }
+  content: '\e528';
+}
 
 .fa-money-bill-trend-up::before {
-  content: "\e529"; }
+  content: '\e529';
+}
 
 .fa-house-flood-water-circle-arrow-right::before {
-  content: "\e50f"; }
+  content: '\e50f';
+}
 
 .fa-square-poll-horizontal::before {
-  content: "\f682"; }
+  content: '\f682';
+}
 
 .fa-poll-h::before {
-  content: "\f682"; }
+  content: '\f682';
+}
 
 .fa-circle::before {
-  content: "\f111"; }
+  content: '\f111';
+}
 
 .fa-backward-fast::before {
-  content: "\f049"; }
+  content: '\f049';
+}
 
 .fa-fast-backward::before {
-  content: "\f049"; }
+  content: '\f049';
+}
 
 .fa-recycle::before {
-  content: "\f1b8"; }
+  content: '\f1b8';
+}
 
 .fa-user-astronaut::before {
-  content: "\f4fb"; }
+  content: '\f4fb';
+}
 
 .fa-plane-slash::before {
-  content: "\e069"; }
+  content: '\e069';
+}
 
 .fa-trademark::before {
-  content: "\f25c"; }
+  content: '\f25c';
+}
 
 .fa-basketball::before {
-  content: "\f434"; }
+  content: '\f434';
+}
 
 .fa-basketball-ball::before {
-  content: "\f434"; }
+  content: '\f434';
+}
 
 .fa-satellite-dish::before {
-  content: "\f7c0"; }
+  content: '\f7c0';
+}
 
 .fa-circle-up::before {
-  content: "\f35b"; }
+  content: '\f35b';
+}
 
 .fa-arrow-alt-circle-up::before {
-  content: "\f35b"; }
+  content: '\f35b';
+}
 
 .fa-mobile-screen-button::before {
-  content: "\f3cd"; }
+  content: '\f3cd';
+}
 
 .fa-mobile-alt::before {
-  content: "\f3cd"; }
+  content: '\f3cd';
+}
 
 .fa-volume-high::before {
-  content: "\f028"; }
+  content: '\f028';
+}
 
 .fa-volume-up::before {
-  content: "\f028"; }
+  content: '\f028';
+}
 
 .fa-users-rays::before {
-  content: "\e593"; }
+  content: '\e593';
+}
 
 .fa-wallet::before {
-  content: "\f555"; }
+  content: '\f555';
+}
 
 .fa-clipboard-check::before {
-  content: "\f46c"; }
+  content: '\f46c';
+}
 
 .fa-file-audio::before {
-  content: "\f1c7"; }
+  content: '\f1c7';
+}
 
 .fa-burger::before {
-  content: "\f805"; }
+  content: '\f805';
+}
 
 .fa-hamburger::before {
-  content: "\f805"; }
+  content: '\f805';
+}
 
 .fa-wrench::before {
-  content: "\f0ad"; }
+  content: '\f0ad';
+}
 
 .fa-bugs::before {
-  content: "\e4d0"; }
+  content: '\e4d0';
+}
 
 .fa-rupee-sign::before {
-  content: "\f156"; }
+  content: '\f156';
+}
 
 .fa-rupee::before {
-  content: "\f156"; }
+  content: '\f156';
+}
 
 .fa-file-image::before {
-  content: "\f1c5"; }
+  content: '\f1c5';
+}
 
 .fa-circle-question::before {
-  content: "\f059"; }
+  content: '\f059';
+}
 
 .fa-question-circle::before {
-  content: "\f059"; }
+  content: '\f059';
+}
 
 .fa-plane-departure::before {
-  content: "\f5b0"; }
+  content: '\f5b0';
+}
 
 .fa-handshake-slash::before {
-  content: "\e060"; }
+  content: '\e060';
+}
 
 .fa-book-bookmark::before {
-  content: "\e0bb"; }
+  content: '\e0bb';
+}
 
 .fa-code-branch::before {
-  content: "\f126"; }
+  content: '\f126';
+}
 
 .fa-hat-cowboy::before {
-  content: "\f8c0"; }
+  content: '\f8c0';
+}
 
 .fa-bridge::before {
-  content: "\e4c8"; }
+  content: '\e4c8';
+}
 
 .fa-phone-flip::before {
-  content: "\f879"; }
+  content: '\f879';
+}
 
 .fa-phone-alt::before {
-  content: "\f879"; }
+  content: '\f879';
+}
 
 .fa-truck-front::before {
-  content: "\e2b7"; }
+  content: '\e2b7';
+}
 
 .fa-cat::before {
-  content: "\f6be"; }
+  content: '\f6be';
+}
 
 .fa-anchor-circle-exclamation::before {
-  content: "\e4ab"; }
+  content: '\e4ab';
+}
 
 .fa-truck-field::before {
-  content: "\e58d"; }
+  content: '\e58d';
+}
 
 .fa-route::before {
-  content: "\f4d7"; }
+  content: '\f4d7';
+}
 
 .fa-clipboard-question::before {
-  content: "\e4e3"; }
+  content: '\e4e3';
+}
 
 .fa-panorama::before {
-  content: "\e209"; }
+  content: '\e209';
+}
 
 .fa-comment-medical::before {
-  content: "\f7f5"; }
+  content: '\f7f5';
+}
 
 .fa-teeth-open::before {
-  content: "\f62f"; }
+  content: '\f62f';
+}
 
 .fa-file-circle-minus::before {
-  content: "\e4ed"; }
+  content: '\e4ed';
+}
 
 .fa-tags::before {
-  content: "\f02c"; }
+  content: '\f02c';
+}
 
 .fa-wine-glass::before {
-  content: "\f4e3"; }
+  content: '\f4e3';
+}
 
 .fa-forward-fast::before {
-  content: "\f050"; }
+  content: '\f050';
+}
 
 .fa-fast-forward::before {
-  content: "\f050"; }
+  content: '\f050';
+}
 
 .fa-face-meh-blank::before {
-  content: "\f5a4"; }
+  content: '\f5a4';
+}
 
 .fa-meh-blank::before {
-  content: "\f5a4"; }
+  content: '\f5a4';
+}
 
 .fa-square-parking::before {
-  content: "\f540"; }
+  content: '\f540';
+}
 
 .fa-parking::before {
-  content: "\f540"; }
+  content: '\f540';
+}
 
 .fa-house-signal::before {
-  content: "\e012"; }
+  content: '\e012';
+}
 
 .fa-bars-progress::before {
-  content: "\f828"; }
+  content: '\f828';
+}
 
 .fa-tasks-alt::before {
-  content: "\f828"; }
+  content: '\f828';
+}
 
 .fa-faucet-drip::before {
-  content: "\e006"; }
+  content: '\e006';
+}
 
 .fa-cart-flatbed::before {
-  content: "\f474"; }
+  content: '\f474';
+}
 
 .fa-dolly-flatbed::before {
-  content: "\f474"; }
+  content: '\f474';
+}
 
 .fa-ban-smoking::before {
-  content: "\f54d"; }
+  content: '\f54d';
+}
 
 .fa-smoking-ban::before {
-  content: "\f54d"; }
+  content: '\f54d';
+}
 
 .fa-terminal::before {
-  content: "\f120"; }
+  content: '\f120';
+}
 
 .fa-mobile-button::before {
-  content: "\f10b"; }
+  content: '\f10b';
+}
 
 .fa-house-medical-flag::before {
-  content: "\e514"; }
+  content: '\e514';
+}
 
 .fa-basket-shopping::before {
-  content: "\f291"; }
+  content: '\f291';
+}
 
 .fa-shopping-basket::before {
-  content: "\f291"; }
+  content: '\f291';
+}
 
 .fa-tape::before {
-  content: "\f4db"; }
+  content: '\f4db';
+}
 
 .fa-bus-simple::before {
-  content: "\f55e"; }
+  content: '\f55e';
+}
 
 .fa-bus-alt::before {
-  content: "\f55e"; }
+  content: '\f55e';
+}
 
 .fa-eye::before {
-  content: "\f06e"; }
+  content: '\f06e';
+}
 
 .fa-face-sad-cry::before {
-  content: "\f5b3"; }
+  content: '\f5b3';
+}
 
 .fa-sad-cry::before {
-  content: "\f5b3"; }
+  content: '\f5b3';
+}
 
 .fa-audio-description::before {
-  content: "\f29e"; }
+  content: '\f29e';
+}
 
 .fa-person-military-to-person::before {
-  content: "\e54c"; }
+  content: '\e54c';
+}
 
 .fa-file-shield::before {
-  content: "\e4f0"; }
+  content: '\e4f0';
+}
 
 .fa-user-slash::before {
-  content: "\f506"; }
+  content: '\f506';
+}
 
 .fa-pen::before {
-  content: "\f304"; }
+  content: '\f304';
+}
 
 .fa-tower-observation::before {
-  content: "\e586"; }
+  content: '\e586';
+}
 
 .fa-file-code::before {
-  content: "\f1c9"; }
+  content: '\f1c9';
+}
 
 .fa-signal::before {
-  content: "\f012"; }
+  content: '\f012';
+}
 
 .fa-signal-5::before {
-  content: "\f012"; }
+  content: '\f012';
+}
 
 .fa-signal-perfect::before {
-  content: "\f012"; }
+  content: '\f012';
+}
 
 .fa-bus::before {
-  content: "\f207"; }
+  content: '\f207';
+}
 
 .fa-heart-circle-xmark::before {
-  content: "\e501"; }
+  content: '\e501';
+}
 
 .fa-house-chimney::before {
-  content: "\e3af"; }
+  content: '\e3af';
+}
 
 .fa-home-lg::before {
-  content: "\e3af"; }
+  content: '\e3af';
+}
 
 .fa-window-maximize::before {
-  content: "\f2d0"; }
+  content: '\f2d0';
+}
 
 .fa-face-frown::before {
-  content: "\f119"; }
+  content: '\f119';
+}
 
 .fa-frown::before {
-  content: "\f119"; }
+  content: '\f119';
+}
 
 .fa-prescription::before {
-  content: "\f5b1"; }
+  content: '\f5b1';
+}
 
 .fa-shop::before {
-  content: "\f54f"; }
+  content: '\f54f';
+}
 
 .fa-store-alt::before {
-  content: "\f54f"; }
+  content: '\f54f';
+}
 
 .fa-floppy-disk::before {
-  content: "\f0c7"; }
+  content: '\f0c7';
+}
 
 .fa-save::before {
-  content: "\f0c7"; }
+  content: '\f0c7';
+}
 
 .fa-vihara::before {
-  content: "\f6a7"; }
+  content: '\f6a7';
+}
 
 .fa-scale-unbalanced::before {
-  content: "\f515"; }
+  content: '\f515';
+}
 
 .fa-balance-scale-left::before {
-  content: "\f515"; }
+  content: '\f515';
+}
 
 .fa-sort-up::before {
-  content: "\f0de"; }
+  content: '\f0de';
+}
 
 .fa-sort-asc::before {
-  content: "\f0de"; }
+  content: '\f0de';
+}
 
 .fa-comment-dots::before {
-  content: "\f4ad"; }
+  content: '\f4ad';
+}
 
 .fa-commenting::before {
-  content: "\f4ad"; }
+  content: '\f4ad';
+}
 
 .fa-plant-wilt::before {
-  content: "\e5aa"; }
+  content: '\e5aa';
+}
 
 .fa-diamond::before {
-  content: "\f219"; }
+  content: '\f219';
+}
 
 .fa-face-grin-squint::before {
-  content: "\f585"; }
+  content: '\f585';
+}
 
 .fa-grin-squint::before {
-  content: "\f585"; }
+  content: '\f585';
+}
 
 .fa-hand-holding-dollar::before {
-  content: "\f4c0"; }
+  content: '\f4c0';
+}
 
 .fa-hand-holding-usd::before {
-  content: "\f4c0"; }
+  content: '\f4c0';
+}
 
 .fa-bacterium::before {
-  content: "\e05a"; }
+  content: '\e05a';
+}
 
 .fa-hand-pointer::before {
-  content: "\f25a"; }
+  content: '\f25a';
+}
 
 .fa-drum-steelpan::before {
-  content: "\f56a"; }
+  content: '\f56a';
+}
 
 .fa-hand-scissors::before {
-  content: "\f257"; }
+  content: '\f257';
+}
 
 .fa-hands-praying::before {
-  content: "\f684"; }
+  content: '\f684';
+}
 
 .fa-praying-hands::before {
-  content: "\f684"; }
+  content: '\f684';
+}
 
 .fa-arrow-rotate-right::before {
-  content: "\f01e"; }
+  content: '\f01e';
+}
 
 .fa-arrow-right-rotate::before {
-  content: "\f01e"; }
+  content: '\f01e';
+}
 
 .fa-arrow-rotate-forward::before {
-  content: "\f01e"; }
+  content: '\f01e';
+}
 
 .fa-redo::before {
-  content: "\f01e"; }
+  content: '\f01e';
+}
 
 .fa-biohazard::before {
-  content: "\f780"; }
+  content: '\f780';
+}
 
 .fa-location-crosshairs::before {
-  content: "\f601"; }
+  content: '\f601';
+}
 
 .fa-location::before {
-  content: "\f601"; }
+  content: '\f601';
+}
 
 .fa-mars-double::before {
-  content: "\f227"; }
+  content: '\f227';
+}
 
 .fa-child-dress::before {
-  content: "\e59c"; }
+  content: '\e59c';
+}
 
 .fa-users-between-lines::before {
-  content: "\e591"; }
+  content: '\e591';
+}
 
 .fa-lungs-virus::before {
-  content: "\e067"; }
+  content: '\e067';
+}
 
 .fa-face-grin-tears::before {
-  content: "\f588"; }
+  content: '\f588';
+}
 
 .fa-grin-tears::before {
-  content: "\f588"; }
+  content: '\f588';
+}
 
 .fa-phone::before {
-  content: "\f095"; }
+  content: '\f095';
+}
 
 .fa-calendar-xmark::before {
-  content: "\f273"; }
+  content: '\f273';
+}
 
 .fa-calendar-times::before {
-  content: "\f273"; }
+  content: '\f273';
+}
 
 .fa-child-reaching::before {
-  content: "\e59d"; }
+  content: '\e59d';
+}
 
 .fa-head-side-virus::before {
-  content: "\e064"; }
+  content: '\e064';
+}
 
 .fa-user-gear::before {
-  content: "\f4fe"; }
+  content: '\f4fe';
+}
 
 .fa-user-cog::before {
-  content: "\f4fe"; }
+  content: '\f4fe';
+}
 
 .fa-arrow-up-1-9::before {
-  content: "\f163"; }
+  content: '\f163';
+}
 
 .fa-sort-numeric-up::before {
-  content: "\f163"; }
+  content: '\f163';
+}
 
 .fa-door-closed::before {
-  content: "\f52a"; }
+  content: '\f52a';
+}
 
 .fa-shield-virus::before {
-  content: "\e06c"; }
+  content: '\e06c';
+}
 
 .fa-dice-six::before {
-  content: "\f526"; }
+  content: '\f526';
+}
 
 .fa-mosquito-net::before {
-  content: "\e52c"; }
+  content: '\e52c';
+}
 
 .fa-bridge-water::before {
-  content: "\e4ce"; }
+  content: '\e4ce';
+}
 
 .fa-person-booth::before {
-  content: "\f756"; }
+  content: '\f756';
+}
 
 .fa-text-width::before {
-  content: "\f035"; }
+  content: '\f035';
+}
 
 .fa-hat-wizard::before {
-  content: "\f6e8"; }
+  content: '\f6e8';
+}
 
 .fa-pen-fancy::before {
-  content: "\f5ac"; }
+  content: '\f5ac';
+}
 
 .fa-person-digging::before {
-  content: "\f85e"; }
+  content: '\f85e';
+}
 
 .fa-digging::before {
-  content: "\f85e"; }
+  content: '\f85e';
+}
 
 .fa-trash::before {
-  content: "\f1f8"; }
+  content: '\f1f8';
+}
 
 .fa-gauge-simple::before {
-  content: "\f629"; }
+  content: '\f629';
+}
 
 .fa-gauge-simple-med::before {
-  content: "\f629"; }
+  content: '\f629';
+}
 
 .fa-tachometer-average::before {
-  content: "\f629"; }
+  content: '\f629';
+}
 
 .fa-book-medical::before {
-  content: "\f7e6"; }
+  content: '\f7e6';
+}
 
 .fa-poo::before {
-  content: "\f2fe"; }
+  content: '\f2fe';
+}
 
 .fa-quote-right::before {
-  content: "\f10e"; }
+  content: '\f10e';
+}
 
 .fa-quote-right-alt::before {
-  content: "\f10e"; }
+  content: '\f10e';
+}
 
 .fa-shirt::before {
-  content: "\f553"; }
+  content: '\f553';
+}
 
 .fa-t-shirt::before {
-  content: "\f553"; }
+  content: '\f553';
+}
 
 .fa-tshirt::before {
-  content: "\f553"; }
+  content: '\f553';
+}
 
 .fa-cubes::before {
-  content: "\f1b3"; }
+  content: '\f1b3';
+}
 
 .fa-divide::before {
-  content: "\f529"; }
+  content: '\f529';
+}
 
 .fa-tenge-sign::before {
-  content: "\f7d7"; }
+  content: '\f7d7';
+}
 
 .fa-tenge::before {
-  content: "\f7d7"; }
+  content: '\f7d7';
+}
 
 .fa-headphones::before {
-  content: "\f025"; }
+  content: '\f025';
+}
 
 .fa-hands-holding::before {
-  content: "\f4c2"; }
+  content: '\f4c2';
+}
 
 .fa-hands-clapping::before {
-  content: "\e1a8"; }
+  content: '\e1a8';
+}
 
 .fa-republican::before {
-  content: "\f75e"; }
+  content: '\f75e';
+}
 
 .fa-arrow-left::before {
-  content: "\f060"; }
+  content: '\f060';
+}
 
 .fa-person-circle-xmark::before {
-  content: "\e543"; }
+  content: '\e543';
+}
 
 .fa-ruler::before {
-  content: "\f545"; }
+  content: '\f545';
+}
 
 .fa-align-left::before {
-  content: "\f036"; }
+  content: '\f036';
+}
 
 .fa-dice-d6::before {
-  content: "\f6d1"; }
+  content: '\f6d1';
+}
 
 .fa-restroom::before {
-  content: "\f7bd"; }
+  content: '\f7bd';
+}
 
 .fa-j::before {
-  content: "\4a"; }
+  content: '\4a';
+}
 
 .fa-users-viewfinder::before {
-  content: "\e595"; }
+  content: '\e595';
+}
 
 .fa-file-video::before {
-  content: "\f1c8"; }
+  content: '\f1c8';
+}
 
 .fa-up-right-from-square::before {
-  content: "\f35d"; }
+  content: '\f35d';
+}
 
 .fa-external-link-alt::before {
-  content: "\f35d"; }
+  content: '\f35d';
+}
 
 .fa-table-cells::before {
-  content: "\f00a"; }
+  content: '\f00a';
+}
 
 .fa-th::before {
-  content: "\f00a"; }
+  content: '\f00a';
+}
 
 .fa-file-pdf::before {
-  content: "\f1c1"; }
+  content: '\f1c1';
+}
 
 .fa-book-bible::before {
-  content: "\f647"; }
+  content: '\f647';
+}
 
 .fa-bible::before {
-  content: "\f647"; }
+  content: '\f647';
+}
 
 .fa-o::before {
-  content: "\4f"; }
+  content: '\4f';
+}
 
 .fa-suitcase-medical::before {
-  content: "\f0fa"; }
+  content: '\f0fa';
+}
 
 .fa-medkit::before {
-  content: "\f0fa"; }
+  content: '\f0fa';
+}
 
 .fa-user-secret::before {
-  content: "\f21b"; }
+  content: '\f21b';
+}
 
 .fa-otter::before {
-  content: "\f700"; }
+  content: '\f700';
+}
 
 .fa-person-dress::before {
-  content: "\f182"; }
+  content: '\f182';
+}
 
 .fa-female::before {
-  content: "\f182"; }
+  content: '\f182';
+}
 
 .fa-comment-dollar::before {
-  content: "\f651"; }
+  content: '\f651';
+}
 
 .fa-business-time::before {
-  content: "\f64a"; }
+  content: '\f64a';
+}
 
 .fa-briefcase-clock::before {
-  content: "\f64a"; }
+  content: '\f64a';
+}
 
 .fa-table-cells-large::before {
-  content: "\f009"; }
+  content: '\f009';
+}
 
 .fa-th-large::before {
-  content: "\f009"; }
+  content: '\f009';
+}
 
 .fa-book-tanakh::before {
-  content: "\f827"; }
+  content: '\f827';
+}
 
 .fa-tanakh::before {
-  content: "\f827"; }
+  content: '\f827';
+}
 
 .fa-phone-volume::before {
-  content: "\f2a0"; }
+  content: '\f2a0';
+}
 
 .fa-volume-control-phone::before {
-  content: "\f2a0"; }
+  content: '\f2a0';
+}
 
 .fa-hat-cowboy-side::before {
-  content: "\f8c1"; }
+  content: '\f8c1';
+}
 
 .fa-clipboard-user::before {
-  content: "\f7f3"; }
+  content: '\f7f3';
+}
 
 .fa-child::before {
-  content: "\f1ae"; }
+  content: '\f1ae';
+}
 
 .fa-lira-sign::before {
-  content: "\f195"; }
+  content: '\f195';
+}
 
 .fa-satellite::before {
-  content: "\f7bf"; }
+  content: '\f7bf';
+}
 
 .fa-plane-lock::before {
-  content: "\e558"; }
+  content: '\e558';
+}
 
 .fa-tag::before {
-  content: "\f02b"; }
+  content: '\f02b';
+}
 
 .fa-comment::before {
-  content: "\f075"; }
+  content: '\f075';
+}
 
 .fa-cake-candles::before {
-  content: "\f1fd"; }
+  content: '\f1fd';
+}
 
 .fa-birthday-cake::before {
-  content: "\f1fd"; }
+  content: '\f1fd';
+}
 
 .fa-cake::before {
-  content: "\f1fd"; }
+  content: '\f1fd';
+}
 
 .fa-envelope::before {
-  content: "\f0e0"; }
+  content: '\f0e0';
+}
 
 .fa-angles-up::before {
-  content: "\f102"; }
+  content: '\f102';
+}
 
 .fa-angle-double-up::before {
-  content: "\f102"; }
+  content: '\f102';
+}
 
 .fa-paperclip::before {
-  content: "\f0c6"; }
+  content: '\f0c6';
+}
 
 .fa-arrow-right-to-city::before {
-  content: "\e4b3"; }
+  content: '\e4b3';
+}
 
 .fa-ribbon::before {
-  content: "\f4d6"; }
+  content: '\f4d6';
+}
 
 .fa-lungs::before {
-  content: "\f604"; }
+  content: '\f604';
+}
 
 .fa-arrow-up-9-1::before {
-  content: "\f887"; }
+  content: '\f887';
+}
 
 .fa-sort-numeric-up-alt::before {
-  content: "\f887"; }
+  content: '\f887';
+}
 
 .fa-litecoin-sign::before {
-  content: "\e1d3"; }
+  content: '\e1d3';
+}
 
 .fa-border-none::before {
-  content: "\f850"; }
+  content: '\f850';
+}
 
 .fa-circle-nodes::before {
-  content: "\e4e2"; }
+  content: '\e4e2';
+}
 
 .fa-parachute-box::before {
-  content: "\f4cd"; }
+  content: '\f4cd';
+}
 
 .fa-indent::before {
-  content: "\f03c"; }
+  content: '\f03c';
+}
 
 .fa-truck-field-un::before {
-  content: "\e58e"; }
+  content: '\e58e';
+}
 
 .fa-hourglass::before {
-  content: "\f254"; }
+  content: '\f254';
+}
 
 .fa-hourglass-empty::before {
-  content: "\f254"; }
+  content: '\f254';
+}
 
 .fa-mountain::before {
-  content: "\f6fc"; }
+  content: '\f6fc';
+}
 
 .fa-user-doctor::before {
-  content: "\f0f0"; }
+  content: '\f0f0';
+}
 
 .fa-user-md::before {
-  content: "\f0f0"; }
+  content: '\f0f0';
+}
 
 .fa-circle-info::before {
-  content: "\f05a"; }
+  content: '\f05a';
+}
 
 .fa-info-circle::before {
-  content: "\f05a"; }
+  content: '\f05a';
+}
 
 .fa-cloud-meatball::before {
-  content: "\f73b"; }
+  content: '\f73b';
+}
 
 .fa-camera::before {
-  content: "\f030"; }
+  content: '\f030';
+}
 
 .fa-camera-alt::before {
-  content: "\f030"; }
+  content: '\f030';
+}
 
 .fa-square-virus::before {
-  content: "\e578"; }
+  content: '\e578';
+}
 
 .fa-meteor::before {
-  content: "\f753"; }
+  content: '\f753';
+}
 
 .fa-car-on::before {
-  content: "\e4dd"; }
+  content: '\e4dd';
+}
 
 .fa-sleigh::before {
-  content: "\f7cc"; }
+  content: '\f7cc';
+}
 
 .fa-arrow-down-1-9::before {
-  content: "\f162"; }
+  content: '\f162';
+}
 
 .fa-sort-numeric-asc::before {
-  content: "\f162"; }
+  content: '\f162';
+}
 
 .fa-sort-numeric-down::before {
-  content: "\f162"; }
+  content: '\f162';
+}
 
 .fa-hand-holding-droplet::before {
-  content: "\f4c1"; }
+  content: '\f4c1';
+}
 
 .fa-hand-holding-water::before {
-  content: "\f4c1"; }
+  content: '\f4c1';
+}
 
 .fa-water::before {
-  content: "\f773"; }
+  content: '\f773';
+}
 
 .fa-calendar-check::before {
-  content: "\f274"; }
+  content: '\f274';
+}
 
 .fa-braille::before {
-  content: "\f2a1"; }
+  content: '\f2a1';
+}
 
 .fa-prescription-bottle-medical::before {
-  content: "\f486"; }
+  content: '\f486';
+}
 
 .fa-prescription-bottle-alt::before {
-  content: "\f486"; }
+  content: '\f486';
+}
 
 .fa-landmark::before {
-  content: "\f66f"; }
+  content: '\f66f';
+}
 
 .fa-truck::before {
-  content: "\f0d1"; }
+  content: '\f0d1';
+}
 
 .fa-crosshairs::before {
-  content: "\f05b"; }
+  content: '\f05b';
+}
 
 .fa-person-cane::before {
-  content: "\e53c"; }
+  content: '\e53c';
+}
 
 .fa-tent::before {
-  content: "\e57d"; }
+  content: '\e57d';
+}
 
 .fa-vest-patches::before {
-  content: "\e086"; }
+  content: '\e086';
+}
 
 .fa-check-double::before {
-  content: "\f560"; }
+  content: '\f560';
+}
 
 .fa-arrow-down-a-z::before {
-  content: "\f15d"; }
+  content: '\f15d';
+}
 
 .fa-sort-alpha-asc::before {
-  content: "\f15d"; }
+  content: '\f15d';
+}
 
 .fa-sort-alpha-down::before {
-  content: "\f15d"; }
+  content: '\f15d';
+}
 
 .fa-money-bill-wheat::before {
-  content: "\e52a"; }
+  content: '\e52a';
+}
 
 .fa-cookie::before {
-  content: "\f563"; }
+  content: '\f563';
+}
 
 .fa-arrow-rotate-left::before {
-  content: "\f0e2"; }
+  content: '\f0e2';
+}
 
 .fa-arrow-left-rotate::before {
-  content: "\f0e2"; }
+  content: '\f0e2';
+}
 
 .fa-arrow-rotate-back::before {
-  content: "\f0e2"; }
+  content: '\f0e2';
+}
 
 .fa-arrow-rotate-backward::before {
-  content: "\f0e2"; }
+  content: '\f0e2';
+}
 
 .fa-undo::before {
-  content: "\f0e2"; }
+  content: '\f0e2';
+}
 
 .fa-hard-drive::before {
-  content: "\f0a0"; }
+  content: '\f0a0';
+}
 
 .fa-hdd::before {
-  content: "\f0a0"; }
+  content: '\f0a0';
+}
 
 .fa-face-grin-squint-tears::before {
-  content: "\f586"; }
+  content: '\f586';
+}
 
 .fa-grin-squint-tears::before {
-  content: "\f586"; }
+  content: '\f586';
+}
 
 .fa-dumbbell::before {
-  content: "\f44b"; }
+  content: '\f44b';
+}
 
 .fa-rectangle-list::before {
-  content: "\f022"; }
+  content: '\f022';
+}
 
 .fa-list-alt::before {
-  content: "\f022"; }
+  content: '\f022';
+}
 
 .fa-tarp-droplet::before {
-  content: "\e57c"; }
+  content: '\e57c';
+}
 
 .fa-house-medical-circle-check::before {
-  content: "\e511"; }
+  content: '\e511';
+}
 
 .fa-person-skiing-nordic::before {
-  content: "\f7ca"; }
+  content: '\f7ca';
+}
 
 .fa-skiing-nordic::before {
-  content: "\f7ca"; }
+  content: '\f7ca';
+}
 
 .fa-calendar-plus::before {
-  content: "\f271"; }
+  content: '\f271';
+}
 
 .fa-plane-arrival::before {
-  content: "\f5af"; }
+  content: '\f5af';
+}
 
 .fa-circle-left::before {
-  content: "\f359"; }
+  content: '\f359';
+}
 
 .fa-arrow-alt-circle-left::before {
-  content: "\f359"; }
+  content: '\f359';
+}
 
 .fa-train-subway::before {
-  content: "\f239"; }
+  content: '\f239';
+}
 
 .fa-subway::before {
-  content: "\f239"; }
+  content: '\f239';
+}
 
 .fa-chart-gantt::before {
-  content: "\e0e4"; }
+  content: '\e0e4';
+}
 
 .fa-indian-rupee-sign::before {
-  content: "\e1bc"; }
+  content: '\e1bc';
+}
 
 .fa-indian-rupee::before {
-  content: "\e1bc"; }
+  content: '\e1bc';
+}
 
 .fa-inr::before {
-  content: "\e1bc"; }
+  content: '\e1bc';
+}
 
 .fa-crop-simple::before {
-  content: "\f565"; }
+  content: '\f565';
+}
 
 .fa-crop-alt::before {
-  content: "\f565"; }
+  content: '\f565';
+}
 
 .fa-money-bill-1::before {
-  content: "\f3d1"; }
+  content: '\f3d1';
+}
 
 .fa-money-bill-alt::before {
-  content: "\f3d1"; }
+  content: '\f3d1';
+}
 
 .fa-left-long::before {
-  content: "\f30a"; }
+  content: '\f30a';
+}
 
 .fa-long-arrow-alt-left::before {
-  content: "\f30a"; }
+  content: '\f30a';
+}
 
 .fa-dna::before {
-  content: "\f471"; }
+  content: '\f471';
+}
 
 .fa-virus-slash::before {
-  content: "\e075"; }
+  content: '\e075';
+}
 
 .fa-minus::before {
-  content: "\f068"; }
+  content: '\f068';
+}
 
 .fa-subtract::before {
-  content: "\f068"; }
+  content: '\f068';
+}
 
 .fa-child-rifle::before {
-  content: "\e4e0"; }
+  content: '\e4e0';
+}
 
 .fa-chess::before {
-  content: "\f439"; }
+  content: '\f439';
+}
 
 .fa-arrow-left-long::before {
-  content: "\f177"; }
+  content: '\f177';
+}
 
 .fa-long-arrow-left::before {
-  content: "\f177"; }
+  content: '\f177';
+}
 
 .fa-plug-circle-check::before {
-  content: "\e55c"; }
+  content: '\e55c';
+}
 
 .fa-street-view::before {
-  content: "\f21d"; }
+  content: '\f21d';
+}
 
 .fa-franc-sign::before {
-  content: "\e18f"; }
+  content: '\e18f';
+}
 
 .fa-volume-off::before {
-  content: "\f026"; }
+  content: '\f026';
+}
 
 .fa-hands-asl-interpreting::before {
-  content: "\f2a3"; }
+  content: '\f2a3';
+}
 
 .fa-american-sign-language-interpreting::before {
-  content: "\f2a3"; }
+  content: '\f2a3';
+}
 
 .fa-asl-interpreting::before {
-  content: "\f2a3"; }
+  content: '\f2a3';
+}
 
 .fa-hands-american-sign-language-interpreting::before {
-  content: "\f2a3"; }
+  content: '\f2a3';
+}
 
 .fa-gear::before {
-  content: "\f013"; }
+  content: '\f013';
+}
 
 .fa-cog::before {
-  content: "\f013"; }
+  content: '\f013';
+}
 
 .fa-droplet-slash::before {
-  content: "\f5c7"; }
+  content: '\f5c7';
+}
 
 .fa-tint-slash::before {
-  content: "\f5c7"; }
+  content: '\f5c7';
+}
 
 .fa-mosque::before {
-  content: "\f678"; }
+  content: '\f678';
+}
 
 .fa-mosquito::before {
-  content: "\e52b"; }
+  content: '\e52b';
+}
 
 .fa-star-of-david::before {
-  content: "\f69a"; }
+  content: '\f69a';
+}
 
 .fa-person-military-rifle::before {
-  content: "\e54b"; }
+  content: '\e54b';
+}
 
 .fa-cart-shopping::before {
-  content: "\f07a"; }
+  content: '\f07a';
+}
 
 .fa-shopping-cart::before {
-  content: "\f07a"; }
+  content: '\f07a';
+}
 
 .fa-vials::before {
-  content: "\f493"; }
+  content: '\f493';
+}
 
 .fa-plug-circle-plus::before {
-  content: "\e55f"; }
+  content: '\e55f';
+}
 
 .fa-place-of-worship::before {
-  content: "\f67f"; }
+  content: '\f67f';
+}
 
 .fa-grip-vertical::before {
-  content: "\f58e"; }
+  content: '\f58e';
+}
 
 .fa-arrow-turn-up::before {
-  content: "\f148"; }
+  content: '\f148';
+}
 
 .fa-level-up::before {
-  content: "\f148"; }
+  content: '\f148';
+}
 
 .fa-u::before {
-  content: "\55"; }
+  content: '\55';
+}
 
 .fa-square-root-variable::before {
-  content: "\f698"; }
+  content: '\f698';
+}
 
 .fa-square-root-alt::before {
-  content: "\f698"; }
+  content: '\f698';
+}
 
 .fa-clock::before {
-  content: "\f017"; }
+  content: '\f017';
+}
 
 .fa-clock-four::before {
-  content: "\f017"; }
+  content: '\f017';
+}
 
 .fa-backward-step::before {
-  content: "\f048"; }
+  content: '\f048';
+}
 
 .fa-step-backward::before {
-  content: "\f048"; }
+  content: '\f048';
+}
 
 .fa-pallet::before {
-  content: "\f482"; }
+  content: '\f482';
+}
 
 .fa-faucet::before {
-  content: "\e005"; }
+  content: '\e005';
+}
 
 .fa-baseball-bat-ball::before {
-  content: "\f432"; }
+  content: '\f432';
+}
 
 .fa-s::before {
-  content: "\53"; }
+  content: '\53';
+}
 
 .fa-timeline::before {
-  content: "\e29c"; }
+  content: '\e29c';
+}
 
 .fa-keyboard::before {
-  content: "\f11c"; }
+  content: '\f11c';
+}
 
 .fa-caret-down::before {
-  content: "\f0d7"; }
+  content: '\f0d7';
+}
 
 .fa-house-chimney-medical::before {
-  content: "\f7f2"; }
+  content: '\f7f2';
+}
 
 .fa-clinic-medical::before {
-  content: "\f7f2"; }
+  content: '\f7f2';
+}
 
 .fa-temperature-three-quarters::before {
-  content: "\f2c8"; }
+  content: '\f2c8';
+}
 
 .fa-temperature-3::before {
-  content: "\f2c8"; }
+  content: '\f2c8';
+}
 
 .fa-thermometer-3::before {
-  content: "\f2c8"; }
+  content: '\f2c8';
+}
 
 .fa-thermometer-three-quarters::before {
-  content: "\f2c8"; }
+  content: '\f2c8';
+}
 
 .fa-mobile-screen::before {
-  content: "\f3cf"; }
+  content: '\f3cf';
+}
 
 .fa-mobile-android-alt::before {
-  content: "\f3cf"; }
+  content: '\f3cf';
+}
 
 .fa-plane-up::before {
-  content: "\e22d"; }
+  content: '\e22d';
+}
 
 .fa-piggy-bank::before {
-  content: "\f4d3"; }
+  content: '\f4d3';
+}
 
 .fa-battery-half::before {
-  content: "\f242"; }
+  content: '\f242';
+}
 
 .fa-battery-3::before {
-  content: "\f242"; }
+  content: '\f242';
+}
 
 .fa-mountain-city::before {
-  content: "\e52e"; }
+  content: '\e52e';
+}
 
 .fa-coins::before {
-  content: "\f51e"; }
+  content: '\f51e';
+}
 
 .fa-khanda::before {
-  content: "\f66d"; }
+  content: '\f66d';
+}
 
 .fa-sliders::before {
-  content: "\f1de"; }
+  content: '\f1de';
+}
 
 .fa-sliders-h::before {
-  content: "\f1de"; }
+  content: '\f1de';
+}
 
 .fa-folder-tree::before {
-  content: "\f802"; }
+  content: '\f802';
+}
 
 .fa-network-wired::before {
-  content: "\f6ff"; }
+  content: '\f6ff';
+}
 
 .fa-map-pin::before {
-  content: "\f276"; }
+  content: '\f276';
+}
 
 .fa-hamsa::before {
-  content: "\f665"; }
+  content: '\f665';
+}
 
 .fa-cent-sign::before {
-  content: "\e3f5"; }
+  content: '\e3f5';
+}
 
 .fa-flask::before {
-  content: "\f0c3"; }
+  content: '\f0c3';
+}
 
 .fa-person-pregnant::before {
-  content: "\e31e"; }
+  content: '\e31e';
+}
 
 .fa-wand-sparkles::before {
-  content: "\f72b"; }
+  content: '\f72b';
+}
 
 .fa-ellipsis-vertical::before {
-  content: "\f142"; }
+  content: '\f142';
+}
 
 .fa-ellipsis-v::before {
-  content: "\f142"; }
+  content: '\f142';
+}
 
 .fa-ticket::before {
-  content: "\f145"; }
+  content: '\f145';
+}
 
 .fa-power-off::before {
-  content: "\f011"; }
+  content: '\f011';
+}
 
 .fa-right-long::before {
-  content: "\f30b"; }
+  content: '\f30b';
+}
 
 .fa-long-arrow-alt-right::before {
-  content: "\f30b"; }
+  content: '\f30b';
+}
 
 .fa-flag-usa::before {
-  content: "\f74d"; }
+  content: '\f74d';
+}
 
 .fa-laptop-file::before {
-  content: "\e51d"; }
+  content: '\e51d';
+}
 
 .fa-tty::before {
-  content: "\f1e4"; }
+  content: '\f1e4';
+}
 
 .fa-teletype::before {
-  content: "\f1e4"; }
+  content: '\f1e4';
+}
 
 .fa-diagram-next::before {
-  content: "\e476"; }
+  content: '\e476';
+}
 
 .fa-person-rifle::before {
-  content: "\e54e"; }
+  content: '\e54e';
+}
 
 .fa-house-medical-circle-exclamation::before {
-  content: "\e512"; }
+  content: '\e512';
+}
 
 .fa-closed-captioning::before {
-  content: "\f20a"; }
+  content: '\f20a';
+}
 
 .fa-person-hiking::before {
-  content: "\f6ec"; }
+  content: '\f6ec';
+}
 
 .fa-hiking::before {
-  content: "\f6ec"; }
+  content: '\f6ec';
+}
 
 .fa-venus-double::before {
-  content: "\f226"; }
+  content: '\f226';
+}
 
 .fa-images::before {
-  content: "\f302"; }
+  content: '\f302';
+}
 
 .fa-calculator::before {
-  content: "\f1ec"; }
+  content: '\f1ec';
+}
 
 .fa-people-pulling::before {
-  content: "\e535"; }
+  content: '\e535';
+}
 
 .fa-n::before {
-  content: "\4e"; }
+  content: '\4e';
+}
 
 .fa-cable-car::before {
-  content: "\f7da"; }
+  content: '\f7da';
+}
 
 .fa-tram::before {
-  content: "\f7da"; }
+  content: '\f7da';
+}
 
 .fa-cloud-rain::before {
-  content: "\f73d"; }
+  content: '\f73d';
+}
 
 .fa-building-circle-xmark::before {
-  content: "\e4d4"; }
+  content: '\e4d4';
+}
 
 .fa-ship::before {
-  content: "\f21a"; }
+  content: '\f21a';
+}
 
 .fa-arrows-down-to-line::before {
-  content: "\e4b8"; }
+  content: '\e4b8';
+}
 
 .fa-download::before {
-  content: "\f019"; }
+  content: '\f019';
+}
 
 .fa-face-grin::before {
-  content: "\f580"; }
+  content: '\f580';
+}
 
 .fa-grin::before {
-  content: "\f580"; }
+  content: '\f580';
+}
 
 .fa-delete-left::before {
-  content: "\f55a"; }
+  content: '\f55a';
+}
 
 .fa-backspace::before {
-  content: "\f55a"; }
+  content: '\f55a';
+}
 
 .fa-eye-dropper::before {
-  content: "\f1fb"; }
+  content: '\f1fb';
+}
 
 .fa-eye-dropper-empty::before {
-  content: "\f1fb"; }
+  content: '\f1fb';
+}
 
 .fa-eyedropper::before {
-  content: "\f1fb"; }
+  content: '\f1fb';
+}
 
 .fa-file-circle-check::before {
-  content: "\e5a0"; }
+  content: '\e5a0';
+}
 
 .fa-forward::before {
-  content: "\f04e"; }
+  content: '\f04e';
+}
 
 .fa-mobile::before {
-  content: "\f3ce"; }
+  content: '\f3ce';
+}
 
 .fa-mobile-android::before {
-  content: "\f3ce"; }
+  content: '\f3ce';
+}
 
 .fa-mobile-phone::before {
-  content: "\f3ce"; }
+  content: '\f3ce';
+}
 
 .fa-face-meh::before {
-  content: "\f11a"; }
+  content: '\f11a';
+}
 
 .fa-meh::before {
-  content: "\f11a"; }
+  content: '\f11a';
+}
 
 .fa-align-center::before {
-  content: "\f037"; }
+  content: '\f037';
+}
 
 .fa-book-skull::before {
-  content: "\f6b7"; }
+  content: '\f6b7';
+}
 
 .fa-book-dead::before {
-  content: "\f6b7"; }
+  content: '\f6b7';
+}
 
 .fa-id-card::before {
-  content: "\f2c2"; }
+  content: '\f2c2';
+}
 
 .fa-drivers-license::before {
-  content: "\f2c2"; }
+  content: '\f2c2';
+}
 
 .fa-outdent::before {
-  content: "\f03b"; }
+  content: '\f03b';
+}
 
 .fa-dedent::before {
-  content: "\f03b"; }
+  content: '\f03b';
+}
 
 .fa-heart-circle-exclamation::before {
-  content: "\e4fe"; }
+  content: '\e4fe';
+}
 
 .fa-house::before {
-  content: "\f015"; }
+  content: '\f015';
+}
 
 .fa-home::before {
-  content: "\f015"; }
+  content: '\f015';
+}
 
 .fa-home-alt::before {
-  content: "\f015"; }
+  content: '\f015';
+}
 
 .fa-home-lg-alt::before {
-  content: "\f015"; }
+  content: '\f015';
+}
 
 .fa-calendar-week::before {
-  content: "\f784"; }
+  content: '\f784';
+}
 
 .fa-laptop-medical::before {
-  content: "\f812"; }
+  content: '\f812';
+}
 
 .fa-b::before {
-  content: "\42"; }
+  content: '\42';
+}
 
 .fa-file-medical::before {
-  content: "\f477"; }
+  content: '\f477';
+}
 
 .fa-dice-one::before {
-  content: "\f525"; }
+  content: '\f525';
+}
 
 .fa-kiwi-bird::before {
-  content: "\f535"; }
+  content: '\f535';
+}
 
 .fa-arrow-right-arrow-left::before {
-  content: "\f0ec"; }
+  content: '\f0ec';
+}
 
 .fa-exchange::before {
-  content: "\f0ec"; }
+  content: '\f0ec';
+}
 
 .fa-rotate-right::before {
-  content: "\f2f9"; }
+  content: '\f2f9';
+}
 
 .fa-redo-alt::before {
-  content: "\f2f9"; }
+  content: '\f2f9';
+}
 
 .fa-rotate-forward::before {
-  content: "\f2f9"; }
+  content: '\f2f9';
+}
 
 .fa-utensils::before {
-  content: "\f2e7"; }
+  content: '\f2e7';
+}
 
 .fa-cutlery::before {
-  content: "\f2e7"; }
+  content: '\f2e7';
+}
 
 .fa-arrow-up-wide-short::before {
-  content: "\f161"; }
+  content: '\f161';
+}
 
 .fa-sort-amount-up::before {
-  content: "\f161"; }
+  content: '\f161';
+}
 
 .fa-mill-sign::before {
-  content: "\e1ed"; }
+  content: '\e1ed';
+}
 
 .fa-bowl-rice::before {
-  content: "\e2eb"; }
+  content: '\e2eb';
+}
 
 .fa-skull::before {
-  content: "\f54c"; }
+  content: '\f54c';
+}
 
 .fa-tower-broadcast::before {
-  content: "\f519"; }
+  content: '\f519';
+}
 
 .fa-broadcast-tower::before {
-  content: "\f519"; }
+  content: '\f519';
+}
 
 .fa-truck-pickup::before {
-  content: "\f63c"; }
+  content: '\f63c';
+}
 
 .fa-up-long::before {
-  content: "\f30c"; }
+  content: '\f30c';
+}
 
 .fa-long-arrow-alt-up::before {
-  content: "\f30c"; }
+  content: '\f30c';
+}
 
 .fa-stop::before {
-  content: "\f04d"; }
+  content: '\f04d';
+}
 
 .fa-code-merge::before {
-  content: "\f387"; }
+  content: '\f387';
+}
 
 .fa-upload::before {
-  content: "\f093"; }
+  content: '\f093';
+}
 
 .fa-hurricane::before {
-  content: "\f751"; }
+  content: '\f751';
+}
 
 .fa-mound::before {
-  content: "\e52d"; }
+  content: '\e52d';
+}
 
 .fa-toilet-portable::before {
-  content: "\e583"; }
+  content: '\e583';
+}
 
 .fa-compact-disc::before {
-  content: "\f51f"; }
+  content: '\f51f';
+}
 
 .fa-file-arrow-down::before {
-  content: "\f56d"; }
+  content: '\f56d';
+}
 
 .fa-file-download::before {
-  content: "\f56d"; }
+  content: '\f56d';
+}
 
 .fa-caravan::before {
-  content: "\f8ff"; }
+  content: '\f8ff';
+}
 
 .fa-shield-cat::before {
-  content: "\e572"; }
+  content: '\e572';
+}
 
 .fa-bolt::before {
-  content: "\f0e7"; }
+  content: '\f0e7';
+}
 
 .fa-zap::before {
-  content: "\f0e7"; }
+  content: '\f0e7';
+}
 
 .fa-glass-water::before {
-  content: "\e4f4"; }
+  content: '\e4f4';
+}
 
 .fa-oil-well::before {
-  content: "\e532"; }
+  content: '\e532';
+}
 
 .fa-vault::before {
-  content: "\e2c5"; }
+  content: '\e2c5';
+}
 
 .fa-mars::before {
-  content: "\f222"; }
+  content: '\f222';
+}
 
 .fa-toilet::before {
-  content: "\f7d8"; }
+  content: '\f7d8';
+}
 
 .fa-plane-circle-xmark::before {
-  content: "\e557"; }
+  content: '\e557';
+}
 
 .fa-yen-sign::before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa-cny::before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa-jpy::before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa-rmb::before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa-yen::before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa-ruble-sign::before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa-rouble::before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa-rub::before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa-ruble::before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa-sun::before {
-  content: "\f185"; }
+  content: '\f185';
+}
 
 .fa-guitar::before {
-  content: "\f7a6"; }
+  content: '\f7a6';
+}
 
 .fa-face-laugh-wink::before {
-  content: "\f59c"; }
+  content: '\f59c';
+}
 
 .fa-laugh-wink::before {
-  content: "\f59c"; }
+  content: '\f59c';
+}
 
 .fa-horse-head::before {
-  content: "\f7ab"; }
+  content: '\f7ab';
+}
 
 .fa-bore-hole::before {
-  content: "\e4c3"; }
+  content: '\e4c3';
+}
 
 .fa-industry::before {
-  content: "\f275"; }
+  content: '\f275';
+}
 
 .fa-circle-down::before {
-  content: "\f358"; }
+  content: '\f358';
+}
 
 .fa-arrow-alt-circle-down::before {
-  content: "\f358"; }
+  content: '\f358';
+}
 
 .fa-arrows-turn-to-dots::before {
-  content: "\e4c1"; }
+  content: '\e4c1';
+}
 
 .fa-florin-sign::before {
-  content: "\e184"; }
+  content: '\e184';
+}
 
 .fa-arrow-down-short-wide::before {
-  content: "\f884"; }
+  content: '\f884';
+}
 
 .fa-sort-amount-desc::before {
-  content: "\f884"; }
+  content: '\f884';
+}
 
 .fa-sort-amount-down-alt::before {
-  content: "\f884"; }
+  content: '\f884';
+}
 
 .fa-less-than::before {
-  content: "\3c"; }
+  content: '\3c';
+}
 
 .fa-angle-down::before {
-  content: "\f107"; }
+  content: '\f107';
+}
 
 .fa-car-tunnel::before {
-  content: "\e4de"; }
+  content: '\e4de';
+}
 
 .fa-head-side-cough::before {
-  content: "\e061"; }
+  content: '\e061';
+}
 
 .fa-grip-lines::before {
-  content: "\f7a4"; }
+  content: '\f7a4';
+}
 
 .fa-thumbs-down::before {
-  content: "\f165"; }
+  content: '\f165';
+}
 
 .fa-user-lock::before {
-  content: "\f502"; }
+  content: '\f502';
+}
 
 .fa-arrow-right-long::before {
-  content: "\f178"; }
+  content: '\f178';
+}
 
 .fa-long-arrow-right::before {
-  content: "\f178"; }
+  content: '\f178';
+}
 
 .fa-anchor-circle-xmark::before {
-  content: "\e4ac"; }
+  content: '\e4ac';
+}
 
 .fa-ellipsis::before {
-  content: "\f141"; }
+  content: '\f141';
+}
 
 .fa-ellipsis-h::before {
-  content: "\f141"; }
+  content: '\f141';
+}
 
 .fa-chess-pawn::before {
-  content: "\f443"; }
+  content: '\f443';
+}
 
 .fa-kit-medical::before {
-  content: "\f479"; }
+  content: '\f479';
+}
 
 .fa-first-aid::before {
-  content: "\f479"; }
+  content: '\f479';
+}
 
 .fa-person-through-window::before {
-  content: "\e5a9"; }
+  content: '\e5a9';
+}
 
 .fa-toolbox::before {
-  content: "\f552"; }
+  content: '\f552';
+}
 
 .fa-hands-holding-circle::before {
-  content: "\e4fb"; }
+  content: '\e4fb';
+}
 
 .fa-bug::before {
-  content: "\f188"; }
+  content: '\f188';
+}
 
 .fa-credit-card::before {
-  content: "\f09d"; }
+  content: '\f09d';
+}
 
 .fa-credit-card-alt::before {
-  content: "\f09d"; }
+  content: '\f09d';
+}
 
 .fa-car::before {
-  content: "\f1b9"; }
+  content: '\f1b9';
+}
 
 .fa-automobile::before {
-  content: "\f1b9"; }
+  content: '\f1b9';
+}
 
 .fa-hand-holding-hand::before {
-  content: "\e4f7"; }
+  content: '\e4f7';
+}
 
 .fa-book-open-reader::before {
-  content: "\f5da"; }
+  content: '\f5da';
+}
 
 .fa-book-reader::before {
-  content: "\f5da"; }
+  content: '\f5da';
+}
 
 .fa-mountain-sun::before {
-  content: "\e52f"; }
+  content: '\e52f';
+}
 
 .fa-arrows-left-right-to-line::before {
-  content: "\e4ba"; }
+  content: '\e4ba';
+}
 
 .fa-dice-d20::before {
-  content: "\f6cf"; }
+  content: '\f6cf';
+}
 
 .fa-truck-droplet::before {
-  content: "\e58c"; }
+  content: '\e58c';
+}
 
 .fa-file-circle-xmark::before {
-  content: "\e5a1"; }
+  content: '\e5a1';
+}
 
 .fa-temperature-arrow-up::before {
-  content: "\e040"; }
+  content: '\e040';
+}
 
 .fa-temperature-up::before {
-  content: "\e040"; }
+  content: '\e040';
+}
 
 .fa-medal::before {
-  content: "\f5a2"; }
+  content: '\f5a2';
+}
 
 .fa-bed::before {
-  content: "\f236"; }
+  content: '\f236';
+}
 
 .fa-square-h::before {
-  content: "\f0fd"; }
+  content: '\f0fd';
+}
 
 .fa-h-square::before {
-  content: "\f0fd"; }
+  content: '\f0fd';
+}
 
 .fa-podcast::before {
-  content: "\f2ce"; }
+  content: '\f2ce';
+}
 
 .fa-temperature-full::before {
-  content: "\f2c7"; }
+  content: '\f2c7';
+}
 
 .fa-temperature-4::before {
-  content: "\f2c7"; }
+  content: '\f2c7';
+}
 
 .fa-thermometer-4::before {
-  content: "\f2c7"; }
+  content: '\f2c7';
+}
 
 .fa-thermometer-full::before {
-  content: "\f2c7"; }
+  content: '\f2c7';
+}
 
 .fa-bell::before {
-  content: "\f0f3"; }
+  content: '\f0f3';
+}
 
 .fa-superscript::before {
-  content: "\f12b"; }
+  content: '\f12b';
+}
 
 .fa-plug-circle-xmark::before {
-  content: "\e560"; }
+  content: '\e560';
+}
 
 .fa-star-of-life::before {
-  content: "\f621"; }
+  content: '\f621';
+}
 
 .fa-phone-slash::before {
-  content: "\f3dd"; }
+  content: '\f3dd';
+}
 
 .fa-paint-roller::before {
-  content: "\f5aa"; }
+  content: '\f5aa';
+}
 
 .fa-handshake-angle::before {
-  content: "\f4c4"; }
+  content: '\f4c4';
+}
 
 .fa-hands-helping::before {
-  content: "\f4c4"; }
+  content: '\f4c4';
+}
 
 .fa-location-dot::before {
-  content: "\f3c5"; }
+  content: '\f3c5';
+}
 
 .fa-map-marker-alt::before {
-  content: "\f3c5"; }
+  content: '\f3c5';
+}
 
 .fa-file::before {
-  content: "\f15b"; }
+  content: '\f15b';
+}
 
 .fa-greater-than::before {
-  content: "\3e"; }
+  content: '\3e';
+}
 
 .fa-person-swimming::before {
-  content: "\f5c4"; }
+  content: '\f5c4';
+}
 
 .fa-swimmer::before {
-  content: "\f5c4"; }
+  content: '\f5c4';
+}
 
 .fa-arrow-down::before {
-  content: "\f063"; }
+  content: '\f063';
+}
 
 .fa-droplet::before {
-  content: "\f043"; }
+  content: '\f043';
+}
 
 .fa-tint::before {
-  content: "\f043"; }
+  content: '\f043';
+}
 
 .fa-eraser::before {
-  content: "\f12d"; }
+  content: '\f12d';
+}
 
 .fa-earth-americas::before {
-  content: "\f57d"; }
+  content: '\f57d';
+}
 
 .fa-earth::before {
-  content: "\f57d"; }
+  content: '\f57d';
+}
 
 .fa-earth-america::before {
-  content: "\f57d"; }
+  content: '\f57d';
+}
 
 .fa-globe-americas::before {
-  content: "\f57d"; }
+  content: '\f57d';
+}
 
 .fa-person-burst::before {
-  content: "\e53b"; }
+  content: '\e53b';
+}
 
 .fa-dove::before {
-  content: "\f4ba"; }
+  content: '\f4ba';
+}
 
 .fa-battery-empty::before {
-  content: "\f244"; }
+  content: '\f244';
+}
 
 .fa-battery-0::before {
-  content: "\f244"; }
+  content: '\f244';
+}
 
 .fa-socks::before {
-  content: "\f696"; }
+  content: '\f696';
+}
 
 .fa-inbox::before {
-  content: "\f01c"; }
+  content: '\f01c';
+}
 
 .fa-section::before {
-  content: "\e447"; }
+  content: '\e447';
+}
 
 .fa-gauge-high::before {
-  content: "\f625"; }
+  content: '\f625';
+}
 
 .fa-tachometer-alt::before {
-  content: "\f625"; }
+  content: '\f625';
+}
 
 .fa-tachometer-alt-fast::before {
-  content: "\f625"; }
+  content: '\f625';
+}
 
 .fa-envelope-open-text::before {
-  content: "\f658"; }
+  content: '\f658';
+}
 
 .fa-hospital::before {
-  content: "\f0f8"; }
+  content: '\f0f8';
+}
 
 .fa-hospital-alt::before {
-  content: "\f0f8"; }
+  content: '\f0f8';
+}
 
 .fa-hospital-wide::before {
-  content: "\f0f8"; }
+  content: '\f0f8';
+}
 
 .fa-wine-bottle::before {
-  content: "\f72f"; }
+  content: '\f72f';
+}
 
 .fa-chess-rook::before {
-  content: "\f447"; }
+  content: '\f447';
+}
 
 .fa-bars-staggered::before {
-  content: "\f550"; }
+  content: '\f550';
+}
 
 .fa-reorder::before {
-  content: "\f550"; }
+  content: '\f550';
+}
 
 .fa-stream::before {
-  content: "\f550"; }
+  content: '\f550';
+}
 
 .fa-dharmachakra::before {
-  content: "\f655"; }
+  content: '\f655';
+}
 
 .fa-hotdog::before {
-  content: "\f80f"; }
+  content: '\f80f';
+}
 
 .fa-person-walking-with-cane::before {
-  content: "\f29d"; }
+  content: '\f29d';
+}
 
 .fa-blind::before {
-  content: "\f29d"; }
+  content: '\f29d';
+}
 
 .fa-drum::before {
-  content: "\f569"; }
+  content: '\f569';
+}
 
 .fa-ice-cream::before {
-  content: "\f810"; }
+  content: '\f810';
+}
 
 .fa-heart-circle-bolt::before {
-  content: "\e4fc"; }
+  content: '\e4fc';
+}
 
 .fa-fax::before {
-  content: "\f1ac"; }
+  content: '\f1ac';
+}
 
 .fa-paragraph::before {
-  content: "\f1dd"; }
+  content: '\f1dd';
+}
 
 .fa-check-to-slot::before {
-  content: "\f772"; }
+  content: '\f772';
+}
 
 .fa-vote-yea::before {
-  content: "\f772"; }
+  content: '\f772';
+}
 
 .fa-star-half::before {
-  content: "\f089"; }
+  content: '\f089';
+}
 
 .fa-boxes-stacked::before {
-  content: "\f468"; }
+  content: '\f468';
+}
 
 .fa-boxes::before {
-  content: "\f468"; }
+  content: '\f468';
+}
 
 .fa-boxes-alt::before {
-  content: "\f468"; }
+  content: '\f468';
+}
 
 .fa-link::before {
-  content: "\f0c1"; }
+  content: '\f0c1';
+}
 
 .fa-chain::before {
-  content: "\f0c1"; }
+  content: '\f0c1';
+}
 
 .fa-ear-listen::before {
-  content: "\f2a2"; }
+  content: '\f2a2';
+}
 
 .fa-assistive-listening-systems::before {
-  content: "\f2a2"; }
+  content: '\f2a2';
+}
 
 .fa-tree-city::before {
-  content: "\e587"; }
+  content: '\e587';
+}
 
 .fa-play::before {
-  content: "\f04b"; }
+  content: '\f04b';
+}
 
 .fa-font::before {
-  content: "\f031"; }
+  content: '\f031';
+}
 
 .fa-rupiah-sign::before {
-  content: "\e23d"; }
+  content: '\e23d';
+}
 
 .fa-magnifying-glass::before {
-  content: "\f002"; }
+  content: '\f002';
+}
 
 .fa-search::before {
-  content: "\f002"; }
+  content: '\f002';
+}
 
 .fa-table-tennis-paddle-ball::before {
-  content: "\f45d"; }
+  content: '\f45d';
+}
 
 .fa-ping-pong-paddle-ball::before {
-  content: "\f45d"; }
+  content: '\f45d';
+}
 
 .fa-table-tennis::before {
-  content: "\f45d"; }
+  content: '\f45d';
+}
 
 .fa-person-dots-from-line::before {
-  content: "\f470"; }
+  content: '\f470';
+}
 
 .fa-diagnoses::before {
-  content: "\f470"; }
+  content: '\f470';
+}
 
 .fa-trash-can-arrow-up::before {
-  content: "\f82a"; }
+  content: '\f82a';
+}
 
 .fa-trash-restore-alt::before {
-  content: "\f82a"; }
+  content: '\f82a';
+}
 
 .fa-naira-sign::before {
-  content: "\e1f6"; }
+  content: '\e1f6';
+}
 
 .fa-cart-arrow-down::before {
-  content: "\f218"; }
+  content: '\f218';
+}
 
 .fa-walkie-talkie::before {
-  content: "\f8ef"; }
+  content: '\f8ef';
+}
 
 .fa-file-pen::before {
-  content: "\f31c"; }
+  content: '\f31c';
+}
 
 .fa-file-edit::before {
-  content: "\f31c"; }
+  content: '\f31c';
+}
 
 .fa-receipt::before {
-  content: "\f543"; }
+  content: '\f543';
+}
 
 .fa-square-pen::before {
-  content: "\f14b"; }
+  content: '\f14b';
+}
 
 .fa-pen-square::before {
-  content: "\f14b"; }
+  content: '\f14b';
+}
 
 .fa-pencil-square::before {
-  content: "\f14b"; }
+  content: '\f14b';
+}
 
 .fa-suitcase-rolling::before {
-  content: "\f5c1"; }
+  content: '\f5c1';
+}
 
 .fa-person-circle-exclamation::before {
-  content: "\e53f"; }
+  content: '\e53f';
+}
 
 .fa-chevron-down::before {
-  content: "\f078"; }
+  content: '\f078';
+}
 
 .fa-battery-full::before {
-  content: "\f240"; }
+  content: '\f240';
+}
 
 .fa-battery::before {
-  content: "\f240"; }
+  content: '\f240';
+}
 
 .fa-battery-5::before {
-  content: "\f240"; }
+  content: '\f240';
+}
 
 .fa-skull-crossbones::before {
-  content: "\f714"; }
+  content: '\f714';
+}
 
 .fa-code-compare::before {
-  content: "\e13a"; }
+  content: '\e13a';
+}
 
 .fa-list-ul::before {
-  content: "\f0ca"; }
+  content: '\f0ca';
+}
 
 .fa-list-dots::before {
-  content: "\f0ca"; }
+  content: '\f0ca';
+}
 
 .fa-school-lock::before {
-  content: "\e56f"; }
+  content: '\e56f';
+}
 
 .fa-tower-cell::before {
-  content: "\e585"; }
+  content: '\e585';
+}
 
 .fa-down-long::before {
-  content: "\f309"; }
+  content: '\f309';
+}
 
 .fa-long-arrow-alt-down::before {
-  content: "\f309"; }
+  content: '\f309';
+}
 
 .fa-ranking-star::before {
-  content: "\e561"; }
+  content: '\e561';
+}
 
 .fa-chess-king::before {
-  content: "\f43f"; }
+  content: '\f43f';
+}
 
 .fa-person-harassing::before {
-  content: "\e549"; }
+  content: '\e549';
+}
 
 .fa-brazilian-real-sign::before {
-  content: "\e46c"; }
+  content: '\e46c';
+}
 
 .fa-landmark-dome::before {
-  content: "\f752"; }
+  content: '\f752';
+}
 
 .fa-landmark-alt::before {
-  content: "\f752"; }
+  content: '\f752';
+}
 
 .fa-arrow-up::before {
-  content: "\f062"; }
+  content: '\f062';
+}
 
 .fa-tv::before {
-  content: "\f26c"; }
+  content: '\f26c';
+}
 
 .fa-television::before {
-  content: "\f26c"; }
+  content: '\f26c';
+}
 
 .fa-tv-alt::before {
-  content: "\f26c"; }
+  content: '\f26c';
+}
 
 .fa-shrimp::before {
-  content: "\e448"; }
+  content: '\e448';
+}
 
 .fa-list-check::before {
-  content: "\f0ae"; }
+  content: '\f0ae';
+}
 
 .fa-tasks::before {
-  content: "\f0ae"; }
+  content: '\f0ae';
+}
 
 .fa-jug-detergent::before {
-  content: "\e519"; }
+  content: '\e519';
+}
 
 .fa-circle-user::before {
-  content: "\f2bd"; }
+  content: '\f2bd';
+}
 
 .fa-user-circle::before {
-  content: "\f2bd"; }
+  content: '\f2bd';
+}
 
 .fa-user-shield::before {
-  content: "\f505"; }
+  content: '\f505';
+}
 
 .fa-wind::before {
-  content: "\f72e"; }
+  content: '\f72e';
+}
 
 .fa-car-burst::before {
-  content: "\f5e1"; }
+  content: '\f5e1';
+}
 
 .fa-car-crash::before {
-  content: "\f5e1"; }
+  content: '\f5e1';
+}
 
 .fa-y::before {
-  content: "\59"; }
+  content: '\59';
+}
 
 .fa-person-snowboarding::before {
-  content: "\f7ce"; }
+  content: '\f7ce';
+}
 
 .fa-snowboarding::before {
-  content: "\f7ce"; }
+  content: '\f7ce';
+}
 
 .fa-truck-fast::before {
-  content: "\f48b"; }
+  content: '\f48b';
+}
 
 .fa-shipping-fast::before {
-  content: "\f48b"; }
+  content: '\f48b';
+}
 
 .fa-fish::before {
-  content: "\f578"; }
+  content: '\f578';
+}
 
 .fa-user-graduate::before {
-  content: "\f501"; }
+  content: '\f501';
+}
 
 .fa-circle-half-stroke::before {
-  content: "\f042"; }
+  content: '\f042';
+}
 
 .fa-adjust::before {
-  content: "\f042"; }
+  content: '\f042';
+}
 
 .fa-clapperboard::before {
-  content: "\e131"; }
+  content: '\e131';
+}
 
 .fa-circle-radiation::before {
-  content: "\f7ba"; }
+  content: '\f7ba';
+}
 
 .fa-radiation-alt::before {
-  content: "\f7ba"; }
+  content: '\f7ba';
+}
 
 .fa-baseball::before {
-  content: "\f433"; }
+  content: '\f433';
+}
 
 .fa-baseball-ball::before {
-  content: "\f433"; }
+  content: '\f433';
+}
 
 .fa-jet-fighter-up::before {
-  content: "\e518"; }
+  content: '\e518';
+}
 
 .fa-diagram-project::before {
-  content: "\f542"; }
+  content: '\f542';
+}
 
 .fa-project-diagram::before {
-  content: "\f542"; }
+  content: '\f542';
+}
 
 .fa-copy::before {
-  content: "\f0c5"; }
+  content: '\f0c5';
+}
 
 .fa-volume-xmark::before {
-  content: "\f6a9"; }
+  content: '\f6a9';
+}
 
 .fa-volume-mute::before {
-  content: "\f6a9"; }
+  content: '\f6a9';
+}
 
 .fa-volume-times::before {
-  content: "\f6a9"; }
+  content: '\f6a9';
+}
 
 .fa-hand-sparkles::before {
-  content: "\e05d"; }
+  content: '\e05d';
+}
 
 .fa-grip::before {
-  content: "\f58d"; }
+  content: '\f58d';
+}
 
 .fa-grip-horizontal::before {
-  content: "\f58d"; }
+  content: '\f58d';
+}
 
 .fa-share-from-square::before {
-  content: "\f14d"; }
+  content: '\f14d';
+}
 
 .fa-share-square::before {
-  content: "\f14d"; }
+  content: '\f14d';
+}
 
 .fa-gun::before {
-  content: "\e19b"; }
+  content: '\e19b';
+}
 
 .fa-square-phone::before {
-  content: "\f098"; }
+  content: '\f098';
+}
 
 .fa-phone-square::before {
-  content: "\f098"; }
+  content: '\f098';
+}
 
 .fa-plus::before {
-  content: "\2b"; }
+  content: '\2b';
+}
 
 .fa-add::before {
-  content: "\2b"; }
+  content: '\2b';
+}
 
 .fa-expand::before {
-  content: "\f065"; }
+  content: '\f065';
+}
 
 .fa-computer::before {
-  content: "\e4e5"; }
+  content: '\e4e5';
+}
 
 .fa-xmark::before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa-close::before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa-multiply::before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa-remove::before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa-times::before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa-arrows-up-down-left-right::before {
-  content: "\f047"; }
+  content: '\f047';
+}
 
 .fa-arrows::before {
-  content: "\f047"; }
+  content: '\f047';
+}
 
 .fa-chalkboard-user::before {
-  content: "\f51c"; }
+  content: '\f51c';
+}
 
 .fa-chalkboard-teacher::before {
-  content: "\f51c"; }
+  content: '\f51c';
+}
 
 .fa-peso-sign::before {
-  content: "\e222"; }
+  content: '\e222';
+}
 
 .fa-building-shield::before {
-  content: "\e4d8"; }
+  content: '\e4d8';
+}
 
 .fa-baby::before {
-  content: "\f77c"; }
+  content: '\f77c';
+}
 
 .fa-users-line::before {
-  content: "\e592"; }
+  content: '\e592';
+}
 
 .fa-quote-left::before {
-  content: "\f10d"; }
+  content: '\f10d';
+}
 
 .fa-quote-left-alt::before {
-  content: "\f10d"; }
+  content: '\f10d';
+}
 
 .fa-tractor::before {
-  content: "\f722"; }
+  content: '\f722';
+}
 
 .fa-trash-arrow-up::before {
-  content: "\f829"; }
+  content: '\f829';
+}
 
 .fa-trash-restore::before {
-  content: "\f829"; }
+  content: '\f829';
+}
 
 .fa-arrow-down-up-lock::before {
-  content: "\e4b0"; }
+  content: '\e4b0';
+}
 
 .fa-lines-leaning::before {
-  content: "\e51e"; }
+  content: '\e51e';
+}
 
 .fa-ruler-combined::before {
-  content: "\f546"; }
+  content: '\f546';
+}
 
 .fa-copyright::before {
-  content: "\f1f9"; }
+  content: '\f1f9';
+}
 
 .fa-equals::before {
-  content: "\3d"; }
+  content: '\3d';
+}
 
 .fa-blender::before {
-  content: "\f517"; }
+  content: '\f517';
+}
 
 .fa-teeth::before {
-  content: "\f62e"; }
+  content: '\f62e';
+}
 
 .fa-shekel-sign::before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa-ils::before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa-shekel::before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa-sheqel::before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa-sheqel-sign::before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa-map::before {
-  content: "\f279"; }
+  content: '\f279';
+}
 
 .fa-rocket::before {
-  content: "\f135"; }
+  content: '\f135';
+}
 
 .fa-photo-film::before {
-  content: "\f87c"; }
+  content: '\f87c';
+}
 
 .fa-photo-video::before {
-  content: "\f87c"; }
+  content: '\f87c';
+}
 
 .fa-folder-minus::before {
-  content: "\f65d"; }
+  content: '\f65d';
+}
 
 .fa-store::before {
-  content: "\f54e"; }
+  content: '\f54e';
+}
 
 .fa-arrow-trend-up::before {
-  content: "\e098"; }
+  content: '\e098';
+}
 
 .fa-plug-circle-minus::before {
-  content: "\e55e"; }
+  content: '\e55e';
+}
 
 .fa-sign-hanging::before {
-  content: "\f4d9"; }
+  content: '\f4d9';
+}
 
 .fa-sign::before {
-  content: "\f4d9"; }
+  content: '\f4d9';
+}
 
 .fa-bezier-curve::before {
-  content: "\f55b"; }
+  content: '\f55b';
+}
 
 .fa-bell-slash::before {
-  content: "\f1f6"; }
+  content: '\f1f6';
+}
 
 .fa-tablet::before {
-  content: "\f3fb"; }
+  content: '\f3fb';
+}
 
 .fa-tablet-android::before {
-  content: "\f3fb"; }
+  content: '\f3fb';
+}
 
 .fa-school-flag::before {
-  content: "\e56e"; }
+  content: '\e56e';
+}
 
 .fa-fill::before {
-  content: "\f575"; }
+  content: '\f575';
+}
 
 .fa-angle-up::before {
-  content: "\f106"; }
+  content: '\f106';
+}
 
 .fa-drumstick-bite::before {
-  content: "\f6d7"; }
+  content: '\f6d7';
+}
 
 .fa-holly-berry::before {
-  content: "\f7aa"; }
+  content: '\f7aa';
+}
 
 .fa-chevron-left::before {
-  content: "\f053"; }
+  content: '\f053';
+}
 
 .fa-bacteria::before {
-  content: "\e059"; }
+  content: '\e059';
+}
 
 .fa-hand-lizard::before {
-  content: "\f258"; }
+  content: '\f258';
+}
 
 .fa-disease::before {
-  content: "\f7fa"; }
+  content: '\f7fa';
+}
 
 .fa-briefcase-medical::before {
-  content: "\f469"; }
+  content: '\f469';
+}
 
 .fa-genderless::before {
-  content: "\f22d"; }
+  content: '\f22d';
+}
 
 .fa-chevron-right::before {
-  content: "\f054"; }
+  content: '\f054';
+}
 
 .fa-retweet::before {
-  content: "\f079"; }
+  content: '\f079';
+}
 
 .fa-car-rear::before {
-  content: "\f5de"; }
+  content: '\f5de';
+}
 
 .fa-car-alt::before {
-  content: "\f5de"; }
+  content: '\f5de';
+}
 
 .fa-pump-soap::before {
-  content: "\e06b"; }
+  content: '\e06b';
+}
 
 .fa-video-slash::before {
-  content: "\f4e2"; }
+  content: '\f4e2';
+}
 
 .fa-battery-quarter::before {
-  content: "\f243"; }
+  content: '\f243';
+}
 
 .fa-battery-2::before {
-  content: "\f243"; }
+  content: '\f243';
+}
 
 .fa-radio::before {
-  content: "\f8d7"; }
+  content: '\f8d7';
+}
 
 .fa-baby-carriage::before {
-  content: "\f77d"; }
+  content: '\f77d';
+}
 
 .fa-carriage-baby::before {
-  content: "\f77d"; }
+  content: '\f77d';
+}
 
 .fa-traffic-light::before {
-  content: "\f637"; }
+  content: '\f637';
+}
 
 .fa-thermometer::before {
-  content: "\f491"; }
+  content: '\f491';
+}
 
 .fa-vr-cardboard::before {
-  content: "\f729"; }
+  content: '\f729';
+}
 
 .fa-hand-middle-finger::before {
-  content: "\f806"; }
+  content: '\f806';
+}
 
 .fa-percent::before {
-  content: "\25"; }
+  content: '\25';
+}
 
 .fa-percentage::before {
-  content: "\25"; }
+  content: '\25';
+}
 
 .fa-truck-moving::before {
-  content: "\f4df"; }
+  content: '\f4df';
+}
 
 .fa-glass-water-droplet::before {
-  content: "\e4f5"; }
+  content: '\e4f5';
+}
 
 .fa-display::before {
-  content: "\e163"; }
+  content: '\e163';
+}
 
 .fa-face-smile::before {
-  content: "\f118"; }
+  content: '\f118';
+}
 
 .fa-smile::before {
-  content: "\f118"; }
+  content: '\f118';
+}
 
 .fa-thumbtack::before {
-  content: "\f08d"; }
+  content: '\f08d';
+}
 
 .fa-thumb-tack::before {
-  content: "\f08d"; }
+  content: '\f08d';
+}
 
 .fa-trophy::before {
-  content: "\f091"; }
+  content: '\f091';
+}
 
 .fa-person-praying::before {
-  content: "\f683"; }
+  content: '\f683';
+}
 
 .fa-pray::before {
-  content: "\f683"; }
+  content: '\f683';
+}
 
 .fa-hammer::before {
-  content: "\f6e3"; }
+  content: '\f6e3';
+}
 
 .fa-hand-peace::before {
-  content: "\f25b"; }
+  content: '\f25b';
+}
 
 .fa-rotate::before {
-  content: "\f2f1"; }
+  content: '\f2f1';
+}
 
 .fa-sync-alt::before {
-  content: "\f2f1"; }
+  content: '\f2f1';
+}
 
 .fa-spinner::before {
-  content: "\f110"; }
+  content: '\f110';
+}
 
 .fa-robot::before {
-  content: "\f544"; }
+  content: '\f544';
+}
 
 .fa-peace::before {
-  content: "\f67c"; }
+  content: '\f67c';
+}
 
 .fa-gears::before {
-  content: "\f085"; }
+  content: '\f085';
+}
 
 .fa-cogs::before {
-  content: "\f085"; }
+  content: '\f085';
+}
 
 .fa-warehouse::before {
-  content: "\f494"; }
+  content: '\f494';
+}
 
 .fa-arrow-up-right-dots::before {
-  content: "\e4b7"; }
+  content: '\e4b7';
+}
 
 .fa-splotch::before {
-  content: "\f5bc"; }
+  content: '\f5bc';
+}
 
 .fa-face-grin-hearts::before {
-  content: "\f584"; }
+  content: '\f584';
+}
 
 .fa-grin-hearts::before {
-  content: "\f584"; }
+  content: '\f584';
+}
 
 .fa-dice-four::before {
-  content: "\f524"; }
+  content: '\f524';
+}
 
 .fa-sim-card::before {
-  content: "\f7c4"; }
+  content: '\f7c4';
+}
 
 .fa-transgender::before {
-  content: "\f225"; }
+  content: '\f225';
+}
 
 .fa-transgender-alt::before {
-  content: "\f225"; }
+  content: '\f225';
+}
 
 .fa-mercury::before {
-  content: "\f223"; }
+  content: '\f223';
+}
 
 .fa-arrow-turn-down::before {
-  content: "\f149"; }
+  content: '\f149';
+}
 
 .fa-level-down::before {
-  content: "\f149"; }
+  content: '\f149';
+}
 
 .fa-person-falling-burst::before {
-  content: "\e547"; }
+  content: '\e547';
+}
 
 .fa-award::before {
-  content: "\f559"; }
+  content: '\f559';
+}
 
 .fa-ticket-simple::before {
-  content: "\f3ff"; }
+  content: '\f3ff';
+}
 
 .fa-ticket-alt::before {
-  content: "\f3ff"; }
+  content: '\f3ff';
+}
 
 .fa-building::before {
-  content: "\f1ad"; }
+  content: '\f1ad';
+}
 
 .fa-angles-left::before {
-  content: "\f100"; }
+  content: '\f100';
+}
 
 .fa-angle-double-left::before {
-  content: "\f100"; }
+  content: '\f100';
+}
 
 .fa-qrcode::before {
-  content: "\f029"; }
+  content: '\f029';
+}
 
 .fa-clock-rotate-left::before {
-  content: "\f1da"; }
+  content: '\f1da';
+}
 
 .fa-history::before {
-  content: "\f1da"; }
+  content: '\f1da';
+}
 
 .fa-face-grin-beam-sweat::before {
-  content: "\f583"; }
+  content: '\f583';
+}
 
 .fa-grin-beam-sweat::before {
-  content: "\f583"; }
+  content: '\f583';
+}
 
 .fa-file-export::before {
-  content: "\f56e"; }
+  content: '\f56e';
+}
 
 .fa-arrow-right-from-file::before {
-  content: "\f56e"; }
+  content: '\f56e';
+}
 
 .fa-shield::before {
-  content: "\f132"; }
+  content: '\f132';
+}
 
 .fa-shield-blank::before {
-  content: "\f132"; }
+  content: '\f132';
+}
 
 .fa-arrow-up-short-wide::before {
-  content: "\f885"; }
+  content: '\f885';
+}
 
 .fa-sort-amount-up-alt::before {
-  content: "\f885"; }
+  content: '\f885';
+}
 
 .fa-house-medical::before {
-  content: "\e3b2"; }
+  content: '\e3b2';
+}
 
 .fa-golf-ball-tee::before {
-  content: "\f450"; }
+  content: '\f450';
+}
 
 .fa-golf-ball::before {
-  content: "\f450"; }
+  content: '\f450';
+}
 
 .fa-circle-chevron-left::before {
-  content: "\f137"; }
+  content: '\f137';
+}
 
 .fa-chevron-circle-left::before {
-  content: "\f137"; }
+  content: '\f137';
+}
 
 .fa-house-chimney-window::before {
-  content: "\e00d"; }
+  content: '\e00d';
+}
 
 .fa-pen-nib::before {
-  content: "\f5ad"; }
+  content: '\f5ad';
+}
 
 .fa-tent-arrow-turn-left::before {
-  content: "\e580"; }
+  content: '\e580';
+}
 
 .fa-tents::before {
-  content: "\e582"; }
+  content: '\e582';
+}
 
 .fa-wand-magic::before {
-  content: "\f0d0"; }
+  content: '\f0d0';
+}
 
 .fa-magic::before {
-  content: "\f0d0"; }
+  content: '\f0d0';
+}
 
 .fa-dog::before {
-  content: "\f6d3"; }
+  content: '\f6d3';
+}
 
 .fa-carrot::before {
-  content: "\f787"; }
+  content: '\f787';
+}
 
 .fa-moon::before {
-  content: "\f186"; }
+  content: '\f186';
+}
 
 .fa-wine-glass-empty::before {
-  content: "\f5ce"; }
+  content: '\f5ce';
+}
 
 .fa-wine-glass-alt::before {
-  content: "\f5ce"; }
+  content: '\f5ce';
+}
 
 .fa-cheese::before {
-  content: "\f7ef"; }
+  content: '\f7ef';
+}
 
 .fa-yin-yang::before {
-  content: "\f6ad"; }
+  content: '\f6ad';
+}
 
 .fa-music::before {
-  content: "\f001"; }
+  content: '\f001';
+}
 
 .fa-code-commit::before {
-  content: "\f386"; }
+  content: '\f386';
+}
 
 .fa-temperature-low::before {
-  content: "\f76b"; }
+  content: '\f76b';
+}
 
 .fa-person-biking::before {
-  content: "\f84a"; }
+  content: '\f84a';
+}
 
 .fa-biking::before {
-  content: "\f84a"; }
+  content: '\f84a';
+}
 
 .fa-broom::before {
-  content: "\f51a"; }
+  content: '\f51a';
+}
 
 .fa-shield-heart::before {
-  content: "\e574"; }
+  content: '\e574';
+}
 
 .fa-gopuram::before {
-  content: "\f664"; }
+  content: '\f664';
+}
 
 .fa-earth-oceania::before {
-  content: "\e47b"; }
+  content: '\e47b';
+}
 
 .fa-globe-oceania::before {
-  content: "\e47b"; }
+  content: '\e47b';
+}
 
 .fa-square-xmark::before {
-  content: "\f2d3"; }
+  content: '\f2d3';
+}
 
 .fa-times-square::before {
-  content: "\f2d3"; }
+  content: '\f2d3';
+}
 
 .fa-xmark-square::before {
-  content: "\f2d3"; }
+  content: '\f2d3';
+}
 
 .fa-hashtag::before {
-  content: "\23"; }
+  content: '\23';
+}
 
 .fa-up-right-and-down-left-from-center::before {
-  content: "\f424"; }
+  content: '\f424';
+}
 
 .fa-expand-alt::before {
-  content: "\f424"; }
+  content: '\f424';
+}
 
 .fa-oil-can::before {
-  content: "\f613"; }
+  content: '\f613';
+}
 
 .fa-t::before {
-  content: "\54"; }
+  content: '\54';
+}
 
 .fa-hippo::before {
-  content: "\f6ed"; }
+  content: '\f6ed';
+}
 
 .fa-chart-column::before {
-  content: "\e0e3"; }
+  content: '\e0e3';
+}
 
 .fa-infinity::before {
-  content: "\f534"; }
+  content: '\f534';
+}
 
 .fa-vial-circle-check::before {
-  content: "\e596"; }
+  content: '\e596';
+}
 
 .fa-person-arrow-down-to-line::before {
-  content: "\e538"; }
+  content: '\e538';
+}
 
 .fa-voicemail::before {
-  content: "\f897"; }
+  content: '\f897';
+}
 
 .fa-fan::before {
-  content: "\f863"; }
+  content: '\f863';
+}
 
 .fa-person-walking-luggage::before {
-  content: "\e554"; }
+  content: '\e554';
+}
 
 .fa-up-down::before {
-  content: "\f338"; }
+  content: '\f338';
+}
 
 .fa-arrows-alt-v::before {
-  content: "\f338"; }
+  content: '\f338';
+}
 
 .fa-cloud-moon-rain::before {
-  content: "\f73c"; }
+  content: '\f73c';
+}
 
 .fa-calendar::before {
-  content: "\f133"; }
+  content: '\f133';
+}
 
 .fa-trailer::before {
-  content: "\e041"; }
+  content: '\e041';
+}
 
 .fa-bahai::before {
-  content: "\f666"; }
+  content: '\f666';
+}
 
 .fa-haykal::before {
-  content: "\f666"; }
+  content: '\f666';
+}
 
 .fa-sd-card::before {
-  content: "\f7c2"; }
+  content: '\f7c2';
+}
 
 .fa-dragon::before {
-  content: "\f6d5"; }
+  content: '\f6d5';
+}
 
 .fa-shoe-prints::before {
-  content: "\f54b"; }
+  content: '\f54b';
+}
 
 .fa-circle-plus::before {
-  content: "\f055"; }
+  content: '\f055';
+}
 
 .fa-plus-circle::before {
-  content: "\f055"; }
+  content: '\f055';
+}
 
 .fa-face-grin-tongue-wink::before {
-  content: "\f58b"; }
+  content: '\f58b';
+}
 
 .fa-grin-tongue-wink::before {
-  content: "\f58b"; }
+  content: '\f58b';
+}
 
 .fa-hand-holding::before {
-  content: "\f4bd"; }
+  content: '\f4bd';
+}
 
 .fa-plug-circle-exclamation::before {
-  content: "\e55d"; }
+  content: '\e55d';
+}
 
 .fa-link-slash::before {
-  content: "\f127"; }
+  content: '\f127';
+}
 
 .fa-chain-broken::before {
-  content: "\f127"; }
+  content: '\f127';
+}
 
 .fa-chain-slash::before {
-  content: "\f127"; }
+  content: '\f127';
+}
 
 .fa-unlink::before {
-  content: "\f127"; }
+  content: '\f127';
+}
 
 .fa-clone::before {
-  content: "\f24d"; }
+  content: '\f24d';
+}
 
 .fa-person-walking-arrow-loop-left::before {
-  content: "\e551"; }
+  content: '\e551';
+}
 
 .fa-arrow-up-z-a::before {
-  content: "\f882"; }
+  content: '\f882';
+}
 
 .fa-sort-alpha-up-alt::before {
-  content: "\f882"; }
+  content: '\f882';
+}
 
 .fa-fire-flame-curved::before {
-  content: "\f7e4"; }
+  content: '\f7e4';
+}
 
 .fa-fire-alt::before {
-  content: "\f7e4"; }
+  content: '\f7e4';
+}
 
 .fa-tornado::before {
-  content: "\f76f"; }
+  content: '\f76f';
+}
 
 .fa-file-circle-plus::before {
-  content: "\e494"; }
+  content: '\e494';
+}
 
 .fa-book-quran::before {
-  content: "\f687"; }
+  content: '\f687';
+}
 
 .fa-quran::before {
-  content: "\f687"; }
+  content: '\f687';
+}
 
 .fa-anchor::before {
-  content: "\f13d"; }
+  content: '\f13d';
+}
 
 .fa-border-all::before {
-  content: "\f84c"; }
+  content: '\f84c';
+}
 
 .fa-face-angry::before {
-  content: "\f556"; }
+  content: '\f556';
+}
 
 .fa-angry::before {
-  content: "\f556"; }
+  content: '\f556';
+}
 
 .fa-cookie-bite::before {
-  content: "\f564"; }
+  content: '\f564';
+}
 
 .fa-arrow-trend-down::before {
-  content: "\e097"; }
+  content: '\e097';
+}
 
 .fa-rss::before {
-  content: "\f09e"; }
+  content: '\f09e';
+}
 
 .fa-feed::before {
-  content: "\f09e"; }
+  content: '\f09e';
+}
 
 .fa-draw-polygon::before {
-  content: "\f5ee"; }
+  content: '\f5ee';
+}
 
 .fa-scale-balanced::before {
-  content: "\f24e"; }
+  content: '\f24e';
+}
 
 .fa-balance-scale::before {
-  content: "\f24e"; }
+  content: '\f24e';
+}
 
 .fa-gauge-simple-high::before {
-  content: "\f62a"; }
+  content: '\f62a';
+}
 
 .fa-tachometer::before {
-  content: "\f62a"; }
+  content: '\f62a';
+}
 
 .fa-tachometer-fast::before {
-  content: "\f62a"; }
+  content: '\f62a';
+}
 
 .fa-shower::before {
-  content: "\f2cc"; }
+  content: '\f2cc';
+}
 
 .fa-desktop::before {
-  content: "\f390"; }
+  content: '\f390';
+}
 
 .fa-desktop-alt::before {
-  content: "\f390"; }
+  content: '\f390';
+}
 
 .fa-m::before {
-  content: "\4d"; }
+  content: '\4d';
+}
 
 .fa-table-list::before {
-  content: "\f00b"; }
+  content: '\f00b';
+}
 
 .fa-th-list::before {
-  content: "\f00b"; }
+  content: '\f00b';
+}
 
 .fa-comment-sms::before {
-  content: "\f7cd"; }
+  content: '\f7cd';
+}
 
 .fa-sms::before {
-  content: "\f7cd"; }
+  content: '\f7cd';
+}
 
 .fa-book::before {
-  content: "\f02d"; }
+  content: '\f02d';
+}
 
 .fa-user-plus::before {
-  content: "\f234"; }
+  content: '\f234';
+}
 
 .fa-check::before {
-  content: "\f00c"; }
+  content: '\f00c';
+}
 
 .fa-battery-three-quarters::before {
-  content: "\f241"; }
+  content: '\f241';
+}
 
 .fa-battery-4::before {
-  content: "\f241"; }
+  content: '\f241';
+}
 
 .fa-house-circle-check::before {
-  content: "\e509"; }
+  content: '\e509';
+}
 
 .fa-angle-left::before {
-  content: "\f104"; }
+  content: '\f104';
+}
 
 .fa-diagram-successor::before {
-  content: "\e47a"; }
+  content: '\e47a';
+}
 
 .fa-truck-arrow-right::before {
-  content: "\e58b"; }
+  content: '\e58b';
+}
 
 .fa-arrows-split-up-and-left::before {
-  content: "\e4bc"; }
+  content: '\e4bc';
+}
 
 .fa-hand-fist::before {
-  content: "\f6de"; }
+  content: '\f6de';
+}
 
 .fa-fist-raised::before {
-  content: "\f6de"; }
+  content: '\f6de';
+}
 
 .fa-cloud-moon::before {
-  content: "\f6c3"; }
+  content: '\f6c3';
+}
 
 .fa-briefcase::before {
-  content: "\f0b1"; }
+  content: '\f0b1';
+}
 
 .fa-person-falling::before {
-  content: "\e546"; }
+  content: '\e546';
+}
 
 .fa-image-portrait::before {
-  content: "\f3e0"; }
+  content: '\f3e0';
+}
 
 .fa-portrait::before {
-  content: "\f3e0"; }
+  content: '\f3e0';
+}
 
 .fa-user-tag::before {
-  content: "\f507"; }
+  content: '\f507';
+}
 
 .fa-rug::before {
-  content: "\e569"; }
+  content: '\e569';
+}
 
 .fa-earth-europe::before {
-  content: "\f7a2"; }
+  content: '\f7a2';
+}
 
 .fa-globe-europe::before {
-  content: "\f7a2"; }
+  content: '\f7a2';
+}
 
 .fa-cart-flatbed-suitcase::before {
-  content: "\f59d"; }
+  content: '\f59d';
+}
 
 .fa-luggage-cart::before {
-  content: "\f59d"; }
+  content: '\f59d';
+}
 
 .fa-rectangle-xmark::before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa-rectangle-times::before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa-times-rectangle::before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa-window-close::before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa-baht-sign::before {
-  content: "\e0ac"; }
+  content: '\e0ac';
+}
 
 .fa-book-open::before {
-  content: "\f518"; }
+  content: '\f518';
+}
 
 .fa-book-journal-whills::before {
-  content: "\f66a"; }
+  content: '\f66a';
+}
 
 .fa-journal-whills::before {
-  content: "\f66a"; }
+  content: '\f66a';
+}
 
 .fa-handcuffs::before {
-  content: "\e4f8"; }
+  content: '\e4f8';
+}
 
 .fa-triangle-exclamation::before {
-  content: "\f071"; }
+  content: '\f071';
+}
 
 .fa-exclamation-triangle::before {
-  content: "\f071"; }
+  content: '\f071';
+}
 
 .fa-warning::before {
-  content: "\f071"; }
+  content: '\f071';
+}
 
 .fa-database::before {
-  content: "\f1c0"; }
+  content: '\f1c0';
+}
 
 .fa-share::before {
-  content: "\f064"; }
+  content: '\f064';
+}
 
 .fa-arrow-turn-right::before {
-  content: "\f064"; }
+  content: '\f064';
+}
 
 .fa-mail-forward::before {
-  content: "\f064"; }
+  content: '\f064';
+}
 
 .fa-bottle-droplet::before {
-  content: "\e4c4"; }
+  content: '\e4c4';
+}
 
 .fa-mask-face::before {
-  content: "\e1d7"; }
+  content: '\e1d7';
+}
 
 .fa-hill-rockslide::before {
-  content: "\e508"; }
+  content: '\e508';
+}
 
 .fa-right-left::before {
-  content: "\f362"; }
+  content: '\f362';
+}
 
 .fa-exchange-alt::before {
-  content: "\f362"; }
+  content: '\f362';
+}
 
 .fa-paper-plane::before {
-  content: "\f1d8"; }
+  content: '\f1d8';
+}
 
 .fa-road-circle-exclamation::before {
-  content: "\e565"; }
+  content: '\e565';
+}
 
 .fa-dungeon::before {
-  content: "\f6d9"; }
+  content: '\f6d9';
+}
 
 .fa-align-right::before {
-  content: "\f038"; }
+  content: '\f038';
+}
 
 .fa-money-bill-1-wave::before {
-  content: "\f53b"; }
+  content: '\f53b';
+}
 
 .fa-money-bill-wave-alt::before {
-  content: "\f53b"; }
+  content: '\f53b';
+}
 
 .fa-life-ring::before {
-  content: "\f1cd"; }
+  content: '\f1cd';
+}
 
 .fa-hands::before {
-  content: "\f2a7"; }
+  content: '\f2a7';
+}
 
 .fa-sign-language::before {
-  content: "\f2a7"; }
+  content: '\f2a7';
+}
 
 .fa-signing::before {
-  content: "\f2a7"; }
+  content: '\f2a7';
+}
 
 .fa-calendar-day::before {
-  content: "\f783"; }
+  content: '\f783';
+}
 
 .fa-water-ladder::before {
-  content: "\f5c5"; }
+  content: '\f5c5';
+}
 
 .fa-ladder-water::before {
-  content: "\f5c5"; }
+  content: '\f5c5';
+}
 
 .fa-swimming-pool::before {
-  content: "\f5c5"; }
+  content: '\f5c5';
+}
 
 .fa-arrows-up-down::before {
-  content: "\f07d"; }
+  content: '\f07d';
+}
 
 .fa-arrows-v::before {
-  content: "\f07d"; }
+  content: '\f07d';
+}
 
 .fa-face-grimace::before {
-  content: "\f57f"; }
+  content: '\f57f';
+}
 
 .fa-grimace::before {
-  content: "\f57f"; }
+  content: '\f57f';
+}
 
 .fa-wheelchair-move::before {
-  content: "\e2ce"; }
+  content: '\e2ce';
+}
 
 .fa-wheelchair-alt::before {
-  content: "\e2ce"; }
+  content: '\e2ce';
+}
 
 .fa-turn-down::before {
-  content: "\f3be"; }
+  content: '\f3be';
+}
 
 .fa-level-down-alt::before {
-  content: "\f3be"; }
+  content: '\f3be';
+}
 
 .fa-person-walking-arrow-right::before {
-  content: "\e552"; }
+  content: '\e552';
+}
 
 .fa-square-envelope::before {
-  content: "\f199"; }
+  content: '\f199';
+}
 
 .fa-envelope-square::before {
-  content: "\f199"; }
+  content: '\f199';
+}
 
 .fa-dice::before {
-  content: "\f522"; }
+  content: '\f522';
+}
 
 .fa-bowling-ball::before {
-  content: "\f436"; }
+  content: '\f436';
+}
 
 .fa-brain::before {
-  content: "\f5dc"; }
+  content: '\f5dc';
+}
 
 .fa-bandage::before {
-  content: "\f462"; }
+  content: '\f462';
+}
 
 .fa-band-aid::before {
-  content: "\f462"; }
+  content: '\f462';
+}
 
 .fa-calendar-minus::before {
-  content: "\f272"; }
+  content: '\f272';
+}
 
 .fa-circle-xmark::before {
-  content: "\f057"; }
+  content: '\f057';
+}
 
 .fa-times-circle::before {
-  content: "\f057"; }
+  content: '\f057';
+}
 
 .fa-xmark-circle::before {
-  content: "\f057"; }
+  content: '\f057';
+}
 
 .fa-gifts::before {
-  content: "\f79c"; }
+  content: '\f79c';
+}
 
 .fa-hotel::before {
-  content: "\f594"; }
+  content: '\f594';
+}
 
 .fa-earth-asia::before {
-  content: "\f57e"; }
+  content: '\f57e';
+}
 
 .fa-globe-asia::before {
-  content: "\f57e"; }
+  content: '\f57e';
+}
 
 .fa-id-card-clip::before {
-  content: "\f47f"; }
+  content: '\f47f';
+}
 
 .fa-id-card-alt::before {
-  content: "\f47f"; }
+  content: '\f47f';
+}
 
 .fa-magnifying-glass-plus::before {
-  content: "\f00e"; }
+  content: '\f00e';
+}
 
 .fa-search-plus::before {
-  content: "\f00e"; }
+  content: '\f00e';
+}
 
 .fa-thumbs-up::before {
-  content: "\f164"; }
+  content: '\f164';
+}
 
 .fa-user-clock::before {
-  content: "\f4fd"; }
+  content: '\f4fd';
+}
 
 .fa-hand-dots::before {
-  content: "\f461"; }
+  content: '\f461';
+}
 
 .fa-allergies::before {
-  content: "\f461"; }
+  content: '\f461';
+}
 
 .fa-file-invoice::before {
-  content: "\f570"; }
+  content: '\f570';
+}
 
 .fa-window-minimize::before {
-  content: "\f2d1"; }
+  content: '\f2d1';
+}
 
 .fa-mug-saucer::before {
-  content: "\f0f4"; }
+  content: '\f0f4';
+}
 
 .fa-coffee::before {
-  content: "\f0f4"; }
+  content: '\f0f4';
+}
 
 .fa-brush::before {
-  content: "\f55d"; }
+  content: '\f55d';
+}
 
 .fa-mask::before {
-  content: "\f6fa"; }
+  content: '\f6fa';
+}
 
 .fa-magnifying-glass-minus::before {
-  content: "\f010"; }
+  content: '\f010';
+}
 
 .fa-search-minus::before {
-  content: "\f010"; }
+  content: '\f010';
+}
 
 .fa-ruler-vertical::before {
-  content: "\f548"; }
+  content: '\f548';
+}
 
 .fa-user-large::before {
-  content: "\f406"; }
+  content: '\f406';
+}
 
 .fa-user-alt::before {
-  content: "\f406"; }
+  content: '\f406';
+}
 
 .fa-train-tram::before {
-  content: "\e5b4"; }
+  content: '\e5b4';
+}
 
 .fa-user-nurse::before {
-  content: "\f82f"; }
+  content: '\f82f';
+}
 
 .fa-syringe::before {
-  content: "\f48e"; }
+  content: '\f48e';
+}
 
 .fa-cloud-sun::before {
-  content: "\f6c4"; }
+  content: '\f6c4';
+}
 
 .fa-stopwatch-20::before {
-  content: "\e06f"; }
+  content: '\e06f';
+}
 
 .fa-square-full::before {
-  content: "\f45c"; }
+  content: '\f45c';
+}
 
 .fa-magnet::before {
-  content: "\f076"; }
+  content: '\f076';
+}
 
 .fa-jar::before {
-  content: "\e516"; }
+  content: '\e516';
+}
 
 .fa-note-sticky::before {
-  content: "\f249"; }
+  content: '\f249';
+}
 
 .fa-sticky-note::before {
-  content: "\f249"; }
+  content: '\f249';
+}
 
 .fa-bug-slash::before {
-  content: "\e490"; }
+  content: '\e490';
+}
 
 .fa-arrow-up-from-water-pump::before {
-  content: "\e4b6"; }
+  content: '\e4b6';
+}
 
 .fa-bone::before {
-  content: "\f5d7"; }
+  content: '\f5d7';
+}
 
 .fa-user-injured::before {
-  content: "\f728"; }
+  content: '\f728';
+}
 
 .fa-face-sad-tear::before {
-  content: "\f5b4"; }
+  content: '\f5b4';
+}
 
 .fa-sad-tear::before {
-  content: "\f5b4"; }
+  content: '\f5b4';
+}
 
 .fa-plane::before {
-  content: "\f072"; }
+  content: '\f072';
+}
 
 .fa-tent-arrows-down::before {
-  content: "\e581"; }
+  content: '\e581';
+}
 
 .fa-exclamation::before {
-  content: "\21"; }
+  content: '\21';
+}
 
 .fa-arrows-spin::before {
-  content: "\e4bb"; }
+  content: '\e4bb';
+}
 
 .fa-print::before {
-  content: "\f02f"; }
+  content: '\f02f';
+}
 
 .fa-turkish-lira-sign::before {
-  content: "\e2bb"; }
+  content: '\e2bb';
+}
 
 .fa-try::before {
-  content: "\e2bb"; }
+  content: '\e2bb';
+}
 
 .fa-turkish-lira::before {
-  content: "\e2bb"; }
+  content: '\e2bb';
+}
 
 .fa-dollar-sign::before {
-  content: "\24"; }
+  content: '\24';
+}
 
 .fa-dollar::before {
-  content: "\24"; }
+  content: '\24';
+}
 
 .fa-usd::before {
-  content: "\24"; }
+  content: '\24';
+}
 
 .fa-x::before {
-  content: "\58"; }
+  content: '\58';
+}
 
 .fa-magnifying-glass-dollar::before {
-  content: "\f688"; }
+  content: '\f688';
+}
 
 .fa-search-dollar::before {
-  content: "\f688"; }
+  content: '\f688';
+}
 
 .fa-users-gear::before {
-  content: "\f509"; }
+  content: '\f509';
+}
 
 .fa-users-cog::before {
-  content: "\f509"; }
+  content: '\f509';
+}
 
 .fa-person-military-pointing::before {
-  content: "\e54a"; }
+  content: '\e54a';
+}
 
 .fa-building-columns::before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa-bank::before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa-institution::before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa-museum::before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa-university::before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa-umbrella::before {
-  content: "\f0e9"; }
+  content: '\f0e9';
+}
 
 .fa-trowel::before {
-  content: "\e589"; }
+  content: '\e589';
+}
 
 .fa-d::before {
-  content: "\44"; }
+  content: '\44';
+}
 
 .fa-stapler::before {
-  content: "\e5af"; }
+  content: '\e5af';
+}
 
 .fa-masks-theater::before {
-  content: "\f630"; }
+  content: '\f630';
+}
 
 .fa-theater-masks::before {
-  content: "\f630"; }
+  content: '\f630';
+}
 
 .fa-kip-sign::before {
-  content: "\e1c4"; }
+  content: '\e1c4';
+}
 
 .fa-hand-point-left::before {
-  content: "\f0a5"; }
+  content: '\f0a5';
+}
 
 .fa-handshake-simple::before {
-  content: "\f4c6"; }
+  content: '\f4c6';
+}
 
 .fa-handshake-alt::before {
-  content: "\f4c6"; }
+  content: '\f4c6';
+}
 
 .fa-jet-fighter::before {
-  content: "\f0fb"; }
+  content: '\f0fb';
+}
 
 .fa-fighter-jet::before {
-  content: "\f0fb"; }
+  content: '\f0fb';
+}
 
 .fa-square-share-nodes::before {
-  content: "\f1e1"; }
+  content: '\f1e1';
+}
 
 .fa-share-alt-square::before {
-  content: "\f1e1"; }
+  content: '\f1e1';
+}
 
 .fa-barcode::before {
-  content: "\f02a"; }
+  content: '\f02a';
+}
 
 .fa-plus-minus::before {
-  content: "\e43c"; }
+  content: '\e43c';
+}
 
 .fa-video::before {
-  content: "\f03d"; }
+  content: '\f03d';
+}
 
 .fa-video-camera::before {
-  content: "\f03d"; }
+  content: '\f03d';
+}
 
 .fa-graduation-cap::before {
-  content: "\f19d"; }
+  content: '\f19d';
+}
 
 .fa-mortar-board::before {
-  content: "\f19d"; }
+  content: '\f19d';
+}
 
 .fa-hand-holding-medical::before {
-  content: "\e05c"; }
+  content: '\e05c';
+}
 
 .fa-person-circle-check::before {
-  content: "\e53e"; }
+  content: '\e53e';
+}
 
 .fa-turn-up::before {
-  content: "\f3bf"; }
+  content: '\f3bf';
+}
 
 .fa-level-up-alt::before {
-  content: "\f3bf"; }
+  content: '\f3bf';
+}
 
 .sr-only,
 .fa-sr-only {
@@ -6345,7 +8429,8 @@ readers do not read off random characters that represent icons */
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  border-width: 0; }
+  border-width: 0;
+}
 
 .sr-only-focusable:not(:focus),
 .fa-sr-only-focusable:not(:focus) {
@@ -6357,4 +8442,5 @@ readers do not read off random characters that represent icons */
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  border-width: 0; }
+  border-width: 0;
+}
diff --git a/packages/insomnia/src/ui/css/lib/fontawesome/css/solid.css b/packages/insomnia/src/ui/css/lib/fontawesome/css/solid.css
index f1de273ca7..99169abc7a 100644
--- a/packages/insomnia/src/ui/css/lib/fontawesome/css/solid.css
+++ b/packages/insomnia/src/ui/css/lib/fontawesome/css/solid.css
@@ -3,17 +3,23 @@
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
  * Copyright 2022 Fonticons, Inc.
  */
-:root, :host {
+:root,
+:host {
   --fa-style-family-classic: 'Font Awesome 6 Free';
-  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
+  --fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
+}
 
 @font-face {
   font-family: 'Font Awesome 6 Free';
   font-style: normal;
   font-weight: 900;
   font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+  src:
+    url('../webfonts/fa-solid-900.woff2') format('woff2'),
+    url('../webfonts/fa-solid-900.ttf') format('truetype');
+}
 
 .fas,
 .fa-solid {
-  font-weight: 900; }
+  font-weight: 900;
+}
diff --git a/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-font-face.css b/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-font-face.css
index f5e2c0dfc2..22682f21b9 100644
--- a/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-font-face.css
+++ b/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-font-face.css
@@ -6,21 +6,42 @@
 @font-face {
   font-family: 'FontAwesome';
   font-display: block;
-  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
+  src:
+    url('../webfonts/fa-solid-900.woff2') format('woff2'),
+    url('../webfonts/fa-solid-900.ttf') format('truetype');
+}
 
 @font-face {
   font-family: 'FontAwesome';
   font-display: block;
-  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }
+  src:
+    url('../webfonts/fa-brands-400.woff2') format('woff2'),
+    url('../webfonts/fa-brands-400.ttf') format('truetype');
+}
 
 @font-face {
   font-family: 'FontAwesome';
   font-display: block;
-  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
-  unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }
+  src:
+    url('../webfonts/fa-regular-400.woff2') format('woff2'),
+    url('../webfonts/fa-regular-400.ttf') format('truetype');
+  unicode-range:
+    U+F003, U+F006, U+F014, U+F016-F017, U+F01A-F01B, U+F01D, U+F022, U+F03E, U+F044, U+F046, U+F05C-F05D, U+F06E,
+    U+F070, U+F087-F088, U+F08A, U+F094, U+F096-F097, U+F09D, U+F0A0, U+F0A2, U+F0A4-F0A7, U+F0C5, U+F0C7, U+F0E5-F0E6,
+    U+F0EB, U+F0F6-F0F8, U+F10C, U+F114-F115, U+F118-F11A, U+F11C-F11D, U+F133, U+F147, U+F14E, U+F150-F152,
+    U+F185-F186, U+F18E, U+F190-F192, U+F196, U+F1C1-F1C9, U+F1D9, U+F1DB, U+F1E3, U+F1EA, U+F1F7, U+F1F9, U+F20A,
+    U+F247-F248, U+F24A, U+F24D, U+F255-F25B, U+F25D, U+F271-F274, U+F278, U+F27B, U+F28C, U+F28E, U+F29C, U+F2B5,
+    U+F2B7, U+F2BA, U+F2BC, U+F2BE, U+F2C0-F2C1, U+F2C3, U+F2D0, U+F2D2, U+F2D4, U+F2DC;
+}
 
 @font-face {
   font-family: 'FontAwesome';
   font-display: block;
-  src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
-  unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F27A; }
+  src:
+    url('../webfonts/fa-v4compatibility.woff2') format('woff2'),
+    url('../webfonts/fa-v4compatibility.ttf') format('truetype');
+  unicode-range:
+    U+F041, U+F047, U+F065-F066, U+F07D-F07E, U+F080, U+F08B, U+F08E, U+F090, U+F09A, U+F0AC, U+F0AE, U+F0B2, U+F0D0,
+    U+F0D6, U+F0E4, U+F0EC, U+F10A-F10B, U+F123, U+F13E, U+F148-F149, U+F14C, U+F156, U+F15E, U+F160-F161, U+F163,
+    U+F175-F178, U+F195, U+F1F8, U+F219, U+F27A;
+}
diff --git a/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-shims.css b/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-shims.css
index 980e962599..214c392d7f 100644
--- a/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-shims.css
+++ b/packages/insomnia/src/ui/css/lib/fontawesome/css/v4-shims.css
@@ -4,2191 +4,2815 @@
  * Copyright 2022 Fonticons, Inc.
  */
 .fa.fa-glass:before {
-  content: "\f000"; }
+  content: '\f000';
+}
 
 .fa.fa-envelope-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-envelope-o:before {
-  content: "\f0e0"; }
+  content: '\f0e0';
+}
 
 .fa.fa-star-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-star-o:before {
-  content: "\f005"; }
+  content: '\f005';
+}
 
 .fa.fa-remove:before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa.fa-close:before {
-  content: "\f00d"; }
+  content: '\f00d';
+}
 
 .fa.fa-gear:before {
-  content: "\f013"; }
+  content: '\f013';
+}
 
 .fa.fa-trash-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-trash-o:before {
-  content: "\f2ed"; }
+  content: '\f2ed';
+}
 
 .fa.fa-home:before {
-  content: "\f015"; }
+  content: '\f015';
+}
 
 .fa.fa-file-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-o:before {
-  content: "\f15b"; }
+  content: '\f15b';
+}
 
 .fa.fa-clock-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-clock-o:before {
-  content: "\f017"; }
+  content: '\f017';
+}
 
 .fa.fa-arrow-circle-o-down {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-arrow-circle-o-down:before {
-  content: "\f358"; }
+  content: '\f358';
+}
 
 .fa.fa-arrow-circle-o-up {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-arrow-circle-o-up:before {
-  content: "\f35b"; }
+  content: '\f35b';
+}
 
 .fa.fa-play-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-play-circle-o:before {
-  content: "\f144"; }
+  content: '\f144';
+}
 
 .fa.fa-repeat:before {
-  content: "\f01e"; }
+  content: '\f01e';
+}
 
 .fa.fa-rotate-right:before {
-  content: "\f01e"; }
+  content: '\f01e';
+}
 
 .fa.fa-refresh:before {
-  content: "\f021"; }
+  content: '\f021';
+}
 
 .fa.fa-list-alt {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-list-alt:before {
-  content: "\f022"; }
+  content: '\f022';
+}
 
 .fa.fa-dedent:before {
-  content: "\f03b"; }
+  content: '\f03b';
+}
 
 .fa.fa-video-camera:before {
-  content: "\f03d"; }
+  content: '\f03d';
+}
 
 .fa.fa-picture-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-picture-o:before {
-  content: "\f03e"; }
+  content: '\f03e';
+}
 
 .fa.fa-photo {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-photo:before {
-  content: "\f03e"; }
+  content: '\f03e';
+}
 
 .fa.fa-image {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-image:before {
-  content: "\f03e"; }
+  content: '\f03e';
+}
 
 .fa.fa-map-marker:before {
-  content: "\f3c5"; }
+  content: '\f3c5';
+}
 
 .fa.fa-pencil-square-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pencil-square-o:before {
-  content: "\f044"; }
+  content: '\f044';
+}
 
 .fa.fa-edit {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-edit:before {
-  content: "\f044"; }
+  content: '\f044';
+}
 
 .fa.fa-share-square-o:before {
-  content: "\f14d"; }
+  content: '\f14d';
+}
 
 .fa.fa-check-square-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-check-square-o:before {
-  content: "\f14a"; }
+  content: '\f14a';
+}
 
 .fa.fa-arrows:before {
-  content: "\f0b2"; }
+  content: '\f0b2';
+}
 
 .fa.fa-times-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-times-circle-o:before {
-  content: "\f057"; }
+  content: '\f057';
+}
 
 .fa.fa-check-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-check-circle-o:before {
-  content: "\f058"; }
+  content: '\f058';
+}
 
 .fa.fa-mail-forward:before {
-  content: "\f064"; }
+  content: '\f064';
+}
 
 .fa.fa-expand:before {
-  content: "\f424"; }
+  content: '\f424';
+}
 
 .fa.fa-compress:before {
-  content: "\f422"; }
+  content: '\f422';
+}
 
 .fa.fa-eye {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-eye-slash {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-warning:before {
-  content: "\f071"; }
+  content: '\f071';
+}
 
 .fa.fa-calendar:before {
-  content: "\f073"; }
+  content: '\f073';
+}
 
 .fa.fa-arrows-v:before {
-  content: "\f338"; }
+  content: '\f338';
+}
 
 .fa.fa-arrows-h:before {
-  content: "\f337"; }
+  content: '\f337';
+}
 
 .fa.fa-bar-chart:before {
-  content: "\e0e3"; }
+  content: '\e0e3';
+}
 
 .fa.fa-bar-chart-o:before {
-  content: "\e0e3"; }
+  content: '\e0e3';
+}
 
 .fa.fa-twitter-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-twitter-square:before {
-  content: "\f081"; }
+  content: '\f081';
+}
 
 .fa.fa-facebook-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-facebook-square:before {
-  content: "\f082"; }
+  content: '\f082';
+}
 
 .fa.fa-gears:before {
-  content: "\f085"; }
+  content: '\f085';
+}
 
 .fa.fa-thumbs-o-up {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-thumbs-o-up:before {
-  content: "\f164"; }
+  content: '\f164';
+}
 
 .fa.fa-thumbs-o-down {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-thumbs-o-down:before {
-  content: "\f165"; }
+  content: '\f165';
+}
 
 .fa.fa-heart-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-heart-o:before {
-  content: "\f004"; }
+  content: '\f004';
+}
 
 .fa.fa-sign-out:before {
-  content: "\f2f5"; }
+  content: '\f2f5';
+}
 
 .fa.fa-linkedin-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-linkedin-square:before {
-  content: "\f08c"; }
+  content: '\f08c';
+}
 
 .fa.fa-thumb-tack:before {
-  content: "\f08d"; }
+  content: '\f08d';
+}
 
 .fa.fa-external-link:before {
-  content: "\f35d"; }
+  content: '\f35d';
+}
 
 .fa.fa-sign-in:before {
-  content: "\f2f6"; }
+  content: '\f2f6';
+}
 
 .fa.fa-github-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-github-square:before {
-  content: "\f092"; }
+  content: '\f092';
+}
 
 .fa.fa-lemon-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-lemon-o:before {
-  content: "\f094"; }
+  content: '\f094';
+}
 
 .fa.fa-square-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-square-o:before {
-  content: "\f0c8"; }
+  content: '\f0c8';
+}
 
 .fa.fa-bookmark-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bookmark-o:before {
-  content: "\f02e"; }
+  content: '\f02e';
+}
 
 .fa.fa-twitter {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-facebook {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-facebook:before {
-  content: "\f39e"; }
+  content: '\f39e';
+}
 
 .fa.fa-facebook-f {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-facebook-f:before {
-  content: "\f39e"; }
+  content: '\f39e';
+}
 
 .fa.fa-github {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-credit-card {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-feed:before {
-  content: "\f09e"; }
+  content: '\f09e';
+}
 
 .fa.fa-hdd-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hdd-o:before {
-  content: "\f0a0"; }
+  content: '\f0a0';
+}
 
 .fa.fa-hand-o-right {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-o-right:before {
-  content: "\f0a4"; }
+  content: '\f0a4';
+}
 
 .fa.fa-hand-o-left {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-o-left:before {
-  content: "\f0a5"; }
+  content: '\f0a5';
+}
 
 .fa.fa-hand-o-up {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-o-up:before {
-  content: "\f0a6"; }
+  content: '\f0a6';
+}
 
 .fa.fa-hand-o-down {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-o-down:before {
-  content: "\f0a7"; }
+  content: '\f0a7';
+}
 
 .fa.fa-globe:before {
-  content: "\f57d"; }
+  content: '\f57d';
+}
 
 .fa.fa-tasks:before {
-  content: "\f828"; }
+  content: '\f828';
+}
 
 .fa.fa-arrows-alt:before {
-  content: "\f31e"; }
+  content: '\f31e';
+}
 
 .fa.fa-group:before {
-  content: "\f0c0"; }
+  content: '\f0c0';
+}
 
 .fa.fa-chain:before {
-  content: "\f0c1"; }
+  content: '\f0c1';
+}
 
 .fa.fa-cut:before {
-  content: "\f0c4"; }
+  content: '\f0c4';
+}
 
 .fa.fa-files-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-files-o:before {
-  content: "\f0c5"; }
+  content: '\f0c5';
+}
 
 .fa.fa-floppy-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-floppy-o:before {
-  content: "\f0c7"; }
+  content: '\f0c7';
+}
 
 .fa.fa-save {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-save:before {
-  content: "\f0c7"; }
+  content: '\f0c7';
+}
 
 .fa.fa-navicon:before {
-  content: "\f0c9"; }
+  content: '\f0c9';
+}
 
 .fa.fa-reorder:before {
-  content: "\f0c9"; }
+  content: '\f0c9';
+}
 
 .fa.fa-magic:before {
-  content: "\e2ca"; }
+  content: '\e2ca';
+}
 
 .fa.fa-pinterest {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pinterest-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pinterest-square:before {
-  content: "\f0d3"; }
+  content: '\f0d3';
+}
 
 .fa.fa-google-plus-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google-plus-square:before {
-  content: "\f0d4"; }
+  content: '\f0d4';
+}
 
 .fa.fa-google-plus {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google-plus:before {
-  content: "\f0d5"; }
+  content: '\f0d5';
+}
 
 .fa.fa-money:before {
-  content: "\f3d1"; }
+  content: '\f3d1';
+}
 
 .fa.fa-unsorted:before {
-  content: "\f0dc"; }
+  content: '\f0dc';
+}
 
 .fa.fa-sort-desc:before {
-  content: "\f0dd"; }
+  content: '\f0dd';
+}
 
 .fa.fa-sort-asc:before {
-  content: "\f0de"; }
+  content: '\f0de';
+}
 
 .fa.fa-linkedin {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-linkedin:before {
-  content: "\f0e1"; }
+  content: '\f0e1';
+}
 
 .fa.fa-rotate-left:before {
-  content: "\f0e2"; }
+  content: '\f0e2';
+}
 
 .fa.fa-legal:before {
-  content: "\f0e3"; }
+  content: '\f0e3';
+}
 
 .fa.fa-tachometer:before {
-  content: "\f625"; }
+  content: '\f625';
+}
 
 .fa.fa-dashboard:before {
-  content: "\f625"; }
+  content: '\f625';
+}
 
 .fa.fa-comment-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-comment-o:before {
-  content: "\f075"; }
+  content: '\f075';
+}
 
 .fa.fa-comments-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-comments-o:before {
-  content: "\f086"; }
+  content: '\f086';
+}
 
 .fa.fa-flash:before {
-  content: "\f0e7"; }
+  content: '\f0e7';
+}
 
 .fa.fa-clipboard:before {
-  content: "\f0ea"; }
+  content: '\f0ea';
+}
 
 .fa.fa-lightbulb-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-lightbulb-o:before {
-  content: "\f0eb"; }
+  content: '\f0eb';
+}
 
 .fa.fa-exchange:before {
-  content: "\f362"; }
+  content: '\f362';
+}
 
 .fa.fa-cloud-download:before {
-  content: "\f0ed"; }
+  content: '\f0ed';
+}
 
 .fa.fa-cloud-upload:before {
-  content: "\f0ee"; }
+  content: '\f0ee';
+}
 
 .fa.fa-bell-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bell-o:before {
-  content: "\f0f3"; }
+  content: '\f0f3';
+}
 
 .fa.fa-cutlery:before {
-  content: "\f2e7"; }
+  content: '\f2e7';
+}
 
 .fa.fa-file-text-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-text-o:before {
-  content: "\f15c"; }
+  content: '\f15c';
+}
 
 .fa.fa-building-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-building-o:before {
-  content: "\f1ad"; }
+  content: '\f1ad';
+}
 
 .fa.fa-hospital-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hospital-o:before {
-  content: "\f0f8"; }
+  content: '\f0f8';
+}
 
 .fa.fa-tablet:before {
-  content: "\f3fa"; }
+  content: '\f3fa';
+}
 
 .fa.fa-mobile:before {
-  content: "\f3cd"; }
+  content: '\f3cd';
+}
 
 .fa.fa-mobile-phone:before {
-  content: "\f3cd"; }
+  content: '\f3cd';
+}
 
 .fa.fa-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-circle-o:before {
-  content: "\f111"; }
+  content: '\f111';
+}
 
 .fa.fa-mail-reply:before {
-  content: "\f3e5"; }
+  content: '\f3e5';
+}
 
 .fa.fa-github-alt {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-folder-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-folder-o:before {
-  content: "\f07b"; }
+  content: '\f07b';
+}
 
 .fa.fa-folder-open-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-folder-open-o:before {
-  content: "\f07c"; }
+  content: '\f07c';
+}
 
 .fa.fa-smile-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-smile-o:before {
-  content: "\f118"; }
+  content: '\f118';
+}
 
 .fa.fa-frown-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-frown-o:before {
-  content: "\f119"; }
+  content: '\f119';
+}
 
 .fa.fa-meh-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-meh-o:before {
-  content: "\f11a"; }
+  content: '\f11a';
+}
 
 .fa.fa-keyboard-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-keyboard-o:before {
-  content: "\f11c"; }
+  content: '\f11c';
+}
 
 .fa.fa-flag-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-flag-o:before {
-  content: "\f024"; }
+  content: '\f024';
+}
 
 .fa.fa-mail-reply-all:before {
-  content: "\f122"; }
+  content: '\f122';
+}
 
 .fa.fa-star-half-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-star-half-o:before {
-  content: "\f5c0"; }
+  content: '\f5c0';
+}
 
 .fa.fa-star-half-empty {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-star-half-empty:before {
-  content: "\f5c0"; }
+  content: '\f5c0';
+}
 
 .fa.fa-star-half-full {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-star-half-full:before {
-  content: "\f5c0"; }
+  content: '\f5c0';
+}
 
 .fa.fa-code-fork:before {
-  content: "\f126"; }
+  content: '\f126';
+}
 
 .fa.fa-chain-broken:before {
-  content: "\f127"; }
+  content: '\f127';
+}
 
 .fa.fa-unlink:before {
-  content: "\f127"; }
+  content: '\f127';
+}
 
 .fa.fa-calendar-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-calendar-o:before {
-  content: "\f133"; }
+  content: '\f133';
+}
 
 .fa.fa-maxcdn {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-html5 {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-css3 {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-unlock-alt:before {
-  content: "\f09c"; }
+  content: '\f09c';
+}
 
 .fa.fa-minus-square-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-minus-square-o:before {
-  content: "\f146"; }
+  content: '\f146';
+}
 
 .fa.fa-level-up:before {
-  content: "\f3bf"; }
+  content: '\f3bf';
+}
 
 .fa.fa-level-down:before {
-  content: "\f3be"; }
+  content: '\f3be';
+}
 
 .fa.fa-pencil-square:before {
-  content: "\f14b"; }
+  content: '\f14b';
+}
 
 .fa.fa-external-link-square:before {
-  content: "\f360"; }
+  content: '\f360';
+}
 
 .fa.fa-compass {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-caret-square-o-down {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-caret-square-o-down:before {
-  content: "\f150"; }
+  content: '\f150';
+}
 
 .fa.fa-toggle-down {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-toggle-down:before {
-  content: "\f150"; }
+  content: '\f150';
+}
 
 .fa.fa-caret-square-o-up {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-caret-square-o-up:before {
-  content: "\f151"; }
+  content: '\f151';
+}
 
 .fa.fa-toggle-up {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-toggle-up:before {
-  content: "\f151"; }
+  content: '\f151';
+}
 
 .fa.fa-caret-square-o-right {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-caret-square-o-right:before {
-  content: "\f152"; }
+  content: '\f152';
+}
 
 .fa.fa-toggle-right {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-toggle-right:before {
-  content: "\f152"; }
+  content: '\f152';
+}
 
 .fa.fa-eur:before {
-  content: "\f153"; }
+  content: '\f153';
+}
 
 .fa.fa-euro:before {
-  content: "\f153"; }
+  content: '\f153';
+}
 
 .fa.fa-gbp:before {
-  content: "\f154"; }
+  content: '\f154';
+}
 
 .fa.fa-usd:before {
-  content: "\24"; }
+  content: '\24';
+}
 
 .fa.fa-dollar:before {
-  content: "\24"; }
+  content: '\24';
+}
 
 .fa.fa-inr:before {
-  content: "\e1bc"; }
+  content: '\e1bc';
+}
 
 .fa.fa-rupee:before {
-  content: "\e1bc"; }
+  content: '\e1bc';
+}
 
 .fa.fa-jpy:before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa.fa-cny:before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa.fa-rmb:before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa.fa-yen:before {
-  content: "\f157"; }
+  content: '\f157';
+}
 
 .fa.fa-rub:before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa.fa-ruble:before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa.fa-rouble:before {
-  content: "\f158"; }
+  content: '\f158';
+}
 
 .fa.fa-krw:before {
-  content: "\f159"; }
+  content: '\f159';
+}
 
 .fa.fa-won:before {
-  content: "\f159"; }
+  content: '\f159';
+}
 
 .fa.fa-btc {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bitcoin {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bitcoin:before {
-  content: "\f15a"; }
+  content: '\f15a';
+}
 
 .fa.fa-file-text:before {
-  content: "\f15c"; }
+  content: '\f15c';
+}
 
 .fa.fa-sort-alpha-asc:before {
-  content: "\f15d"; }
+  content: '\f15d';
+}
 
 .fa.fa-sort-alpha-desc:before {
-  content: "\f881"; }
+  content: '\f881';
+}
 
 .fa.fa-sort-amount-asc:before {
-  content: "\f884"; }
+  content: '\f884';
+}
 
 .fa.fa-sort-amount-desc:before {
-  content: "\f160"; }
+  content: '\f160';
+}
 
 .fa.fa-sort-numeric-asc:before {
-  content: "\f162"; }
+  content: '\f162';
+}
 
 .fa.fa-sort-numeric-desc:before {
-  content: "\f886"; }
+  content: '\f886';
+}
 
 .fa.fa-youtube-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-youtube-square:before {
-  content: "\f431"; }
+  content: '\f431';
+}
 
 .fa.fa-youtube {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-xing {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-xing-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-xing-square:before {
-  content: "\f169"; }
+  content: '\f169';
+}
 
 .fa.fa-youtube-play {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-youtube-play:before {
-  content: "\f167"; }
+  content: '\f167';
+}
 
 .fa.fa-dropbox {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-stack-overflow {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-instagram {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-flickr {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-adn {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bitbucket {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bitbucket-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bitbucket-square:before {
-  content: "\f171"; }
+  content: '\f171';
+}
 
 .fa.fa-tumblr {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-tumblr-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-tumblr-square:before {
-  content: "\f174"; }
+  content: '\f174';
+}
 
 .fa.fa-long-arrow-down:before {
-  content: "\f309"; }
+  content: '\f309';
+}
 
 .fa.fa-long-arrow-up:before {
-  content: "\f30c"; }
+  content: '\f30c';
+}
 
 .fa.fa-long-arrow-left:before {
-  content: "\f30a"; }
+  content: '\f30a';
+}
 
 .fa.fa-long-arrow-right:before {
-  content: "\f30b"; }
+  content: '\f30b';
+}
 
 .fa.fa-apple {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-windows {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-android {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-linux {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-dribbble {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-skype {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-foursquare {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-trello {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-gratipay {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-gittip {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-gittip:before {
-  content: "\f184"; }
+  content: '\f184';
+}
 
 .fa.fa-sun-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-sun-o:before {
-  content: "\f185"; }
+  content: '\f185';
+}
 
 .fa.fa-moon-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-moon-o:before {
-  content: "\f186"; }
+  content: '\f186';
+}
 
 .fa.fa-vk {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-weibo {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-renren {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pagelines {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-stack-exchange {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-arrow-circle-o-right {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-arrow-circle-o-right:before {
-  content: "\f35a"; }
+  content: '\f35a';
+}
 
 .fa.fa-arrow-circle-o-left {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-arrow-circle-o-left:before {
-  content: "\f359"; }
+  content: '\f359';
+}
 
 .fa.fa-caret-square-o-left {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-caret-square-o-left:before {
-  content: "\f191"; }
+  content: '\f191';
+}
 
 .fa.fa-toggle-left {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-toggle-left:before {
-  content: "\f191"; }
+  content: '\f191';
+}
 
 .fa.fa-dot-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-dot-circle-o:before {
-  content: "\f192"; }
+  content: '\f192';
+}
 
 .fa.fa-vimeo-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-vimeo-square:before {
-  content: "\f194"; }
+  content: '\f194';
+}
 
 .fa.fa-try:before {
-  content: "\e2bb"; }
+  content: '\e2bb';
+}
 
 .fa.fa-turkish-lira:before {
-  content: "\e2bb"; }
+  content: '\e2bb';
+}
 
 .fa.fa-plus-square-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-plus-square-o:before {
-  content: "\f0fe"; }
+  content: '\f0fe';
+}
 
 .fa.fa-slack {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wordpress {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-openid {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-institution:before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa.fa-bank:before {
-  content: "\f19c"; }
+  content: '\f19c';
+}
 
 .fa.fa-mortar-board:before {
-  content: "\f19d"; }
+  content: '\f19d';
+}
 
 .fa.fa-yahoo {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-reddit {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-reddit-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-reddit-square:before {
-  content: "\f1a2"; }
+  content: '\f1a2';
+}
 
 .fa.fa-stumbleupon-circle {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-stumbleupon {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-delicious {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-digg {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pied-piper-pp {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pied-piper-alt {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-drupal {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-joomla {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-behance {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-behance-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-behance-square:before {
-  content: "\f1b5"; }
+  content: '\f1b5';
+}
 
 .fa.fa-steam {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-steam-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-steam-square:before {
-  content: "\f1b7"; }
+  content: '\f1b7';
+}
 
 .fa.fa-automobile:before {
-  content: "\f1b9"; }
+  content: '\f1b9';
+}
 
 .fa.fa-cab:before {
-  content: "\f1ba"; }
+  content: '\f1ba';
+}
 
 .fa.fa-spotify {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-deviantart {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-soundcloud {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-pdf-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-pdf-o:before {
-  content: "\f1c1"; }
+  content: '\f1c1';
+}
 
 .fa.fa-file-word-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-word-o:before {
-  content: "\f1c2"; }
+  content: '\f1c2';
+}
 
 .fa.fa-file-excel-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-excel-o:before {
-  content: "\f1c3"; }
+  content: '\f1c3';
+}
 
 .fa.fa-file-powerpoint-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-powerpoint-o:before {
-  content: "\f1c4"; }
+  content: '\f1c4';
+}
 
 .fa.fa-file-image-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-image-o:before {
-  content: "\f1c5"; }
+  content: '\f1c5';
+}
 
 .fa.fa-file-photo-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-photo-o:before {
-  content: "\f1c5"; }
+  content: '\f1c5';
+}
 
 .fa.fa-file-picture-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-picture-o:before {
-  content: "\f1c5"; }
+  content: '\f1c5';
+}
 
 .fa.fa-file-archive-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-archive-o:before {
-  content: "\f1c6"; }
+  content: '\f1c6';
+}
 
 .fa.fa-file-zip-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-zip-o:before {
-  content: "\f1c6"; }
+  content: '\f1c6';
+}
 
 .fa.fa-file-audio-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-audio-o:before {
-  content: "\f1c7"; }
+  content: '\f1c7';
+}
 
 .fa.fa-file-sound-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-sound-o:before {
-  content: "\f1c7"; }
+  content: '\f1c7';
+}
 
 .fa.fa-file-video-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-video-o:before {
-  content: "\f1c8"; }
+  content: '\f1c8';
+}
 
 .fa.fa-file-movie-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-movie-o:before {
-  content: "\f1c8"; }
+  content: '\f1c8';
+}
 
 .fa.fa-file-code-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-file-code-o:before {
-  content: "\f1c9"; }
+  content: '\f1c9';
+}
 
 .fa.fa-vine {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-codepen {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-jsfiddle {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-life-bouy:before {
-  content: "\f1cd"; }
+  content: '\f1cd';
+}
 
 .fa.fa-life-buoy:before {
-  content: "\f1cd"; }
+  content: '\f1cd';
+}
 
 .fa.fa-life-saver:before {
-  content: "\f1cd"; }
+  content: '\f1cd';
+}
 
 .fa.fa-support:before {
-  content: "\f1cd"; }
+  content: '\f1cd';
+}
 
 .fa.fa-circle-o-notch:before {
-  content: "\f1ce"; }
+  content: '\f1ce';
+}
 
 .fa.fa-rebel {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-ra {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-ra:before {
-  content: "\f1d0"; }
+  content: '\f1d0';
+}
 
 .fa.fa-resistance {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-resistance:before {
-  content: "\f1d0"; }
+  content: '\f1d0';
+}
 
 .fa.fa-empire {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-ge {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-ge:before {
-  content: "\f1d1"; }
+  content: '\f1d1';
+}
 
 .fa.fa-git-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-git-square:before {
-  content: "\f1d2"; }
+  content: '\f1d2';
+}
 
 .fa.fa-git {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hacker-news {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-y-combinator-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-y-combinator-square:before {
-  content: "\f1d4"; }
+  content: '\f1d4';
+}
 
 .fa.fa-yc-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-yc-square:before {
-  content: "\f1d4"; }
+  content: '\f1d4';
+}
 
 .fa.fa-tencent-weibo {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-qq {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-weixin {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wechat {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wechat:before {
-  content: "\f1d7"; }
+  content: '\f1d7';
+}
 
 .fa.fa-send:before {
-  content: "\f1d8"; }
+  content: '\f1d8';
+}
 
 .fa.fa-paper-plane-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-paper-plane-o:before {
-  content: "\f1d8"; }
+  content: '\f1d8';
+}
 
 .fa.fa-send-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-send-o:before {
-  content: "\f1d8"; }
+  content: '\f1d8';
+}
 
 .fa.fa-circle-thin {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-circle-thin:before {
-  content: "\f111"; }
+  content: '\f111';
+}
 
 .fa.fa-header:before {
-  content: "\f1dc"; }
+  content: '\f1dc';
+}
 
 .fa.fa-futbol-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-futbol-o:before {
-  content: "\f1e3"; }
+  content: '\f1e3';
+}
 
 .fa.fa-soccer-ball-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-soccer-ball-o:before {
-  content: "\f1e3"; }
+  content: '\f1e3';
+}
 
 .fa.fa-slideshare {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-twitch {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-yelp {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-newspaper-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-newspaper-o:before {
-  content: "\f1ea"; }
+  content: '\f1ea';
+}
 
 .fa.fa-paypal {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google-wallet {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-visa {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-mastercard {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-discover {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-amex {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-paypal {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-stripe {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bell-slash-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bell-slash-o:before {
-  content: "\f1f6"; }
+  content: '\f1f6';
+}
 
 .fa.fa-trash:before {
-  content: "\f2ed"; }
+  content: '\f2ed';
+}
 
 .fa.fa-copyright {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-eyedropper:before {
-  content: "\f1fb"; }
+  content: '\f1fb';
+}
 
 .fa.fa-area-chart:before {
-  content: "\f1fe"; }
+  content: '\f1fe';
+}
 
 .fa.fa-pie-chart:before {
-  content: "\f200"; }
+  content: '\f200';
+}
 
 .fa.fa-line-chart:before {
-  content: "\f201"; }
+  content: '\f201';
+}
 
 .fa.fa-lastfm {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-lastfm-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-lastfm-square:before {
-  content: "\f203"; }
+  content: '\f203';
+}
 
 .fa.fa-ioxhost {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-angellist {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc:before {
-  content: "\f20a"; }
+  content: '\f20a';
+}
 
 .fa.fa-ils:before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa.fa-shekel:before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa.fa-sheqel:before {
-  content: "\f20b"; }
+  content: '\f20b';
+}
 
 .fa.fa-buysellads {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-connectdevelop {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-dashcube {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-forumbee {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-leanpub {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-sellsy {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-shirtsinbulk {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-simplybuilt {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-skyatlas {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-diamond {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-diamond:before {
-  content: "\f3a5"; }
+  content: '\f3a5';
+}
 
 .fa.fa-transgender:before {
-  content: "\f224"; }
+  content: '\f224';
+}
 
 .fa.fa-intersex:before {
-  content: "\f224"; }
+  content: '\f224';
+}
 
 .fa.fa-transgender-alt:before {
-  content: "\f225"; }
+  content: '\f225';
+}
 
 .fa.fa-facebook-official {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-facebook-official:before {
-  content: "\f09a"; }
+  content: '\f09a';
+}
 
 .fa.fa-pinterest-p {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-whatsapp {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hotel:before {
-  content: "\f236"; }
+  content: '\f236';
+}
 
 .fa.fa-viacoin {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-medium {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-y-combinator {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-yc {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-yc:before {
-  content: "\f23b"; }
+  content: '\f23b';
+}
 
 .fa.fa-optin-monster {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-opencart {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-expeditedssl {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-battery-4:before {
-  content: "\f240"; }
+  content: '\f240';
+}
 
 .fa.fa-battery:before {
-  content: "\f240"; }
+  content: '\f240';
+}
 
 .fa.fa-battery-3:before {
-  content: "\f241"; }
+  content: '\f241';
+}
 
 .fa.fa-battery-2:before {
-  content: "\f242"; }
+  content: '\f242';
+}
 
 .fa.fa-battery-1:before {
-  content: "\f243"; }
+  content: '\f243';
+}
 
 .fa.fa-battery-0:before {
-  content: "\f244"; }
+  content: '\f244';
+}
 
 .fa.fa-object-group {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-object-ungroup {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-sticky-note-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-sticky-note-o:before {
-  content: "\f249"; }
+  content: '\f249';
+}
 
 .fa.fa-cc-jcb {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-cc-diners-club {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-clone {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hourglass-o:before {
-  content: "\f254"; }
+  content: '\f254';
+}
 
 .fa.fa-hourglass-1:before {
-  content: "\f251"; }
+  content: '\f251';
+}
 
 .fa.fa-hourglass-2:before {
-  content: "\f252"; }
+  content: '\f252';
+}
 
 .fa.fa-hourglass-3:before {
-  content: "\f253"; }
+  content: '\f253';
+}
 
 .fa.fa-hand-rock-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-rock-o:before {
-  content: "\f255"; }
+  content: '\f255';
+}
 
 .fa.fa-hand-grab-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-grab-o:before {
-  content: "\f255"; }
+  content: '\f255';
+}
 
 .fa.fa-hand-paper-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-paper-o:before {
-  content: "\f256"; }
+  content: '\f256';
+}
 
 .fa.fa-hand-stop-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-stop-o:before {
-  content: "\f256"; }
+  content: '\f256';
+}
 
 .fa.fa-hand-scissors-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-scissors-o:before {
-  content: "\f257"; }
+  content: '\f257';
+}
 
 .fa.fa-hand-lizard-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-lizard-o:before {
-  content: "\f258"; }
+  content: '\f258';
+}
 
 .fa.fa-hand-spock-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-spock-o:before {
-  content: "\f259"; }
+  content: '\f259';
+}
 
 .fa.fa-hand-pointer-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-pointer-o:before {
-  content: "\f25a"; }
+  content: '\f25a';
+}
 
 .fa.fa-hand-peace-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-hand-peace-o:before {
-  content: "\f25b"; }
+  content: '\f25b';
+}
 
 .fa.fa-registered {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-creative-commons {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-gg {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-gg-circle {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-odnoklassniki {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-odnoklassniki-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-odnoklassniki-square:before {
-  content: "\f264"; }
+  content: '\f264';
+}
 
 .fa.fa-get-pocket {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wikipedia-w {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-safari {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-chrome {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-firefox {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-opera {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-internet-explorer {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-television:before {
-  content: "\f26c"; }
+  content: '\f26c';
+}
 
 .fa.fa-contao {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-500px {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-amazon {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-calendar-plus-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-calendar-plus-o:before {
-  content: "\f271"; }
+  content: '\f271';
+}
 
 .fa.fa-calendar-minus-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-calendar-minus-o:before {
-  content: "\f272"; }
+  content: '\f272';
+}
 
 .fa.fa-calendar-times-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-calendar-times-o:before {
-  content: "\f273"; }
+  content: '\f273';
+}
 
 .fa.fa-calendar-check-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-calendar-check-o:before {
-  content: "\f274"; }
+  content: '\f274';
+}
 
 .fa.fa-map-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-map-o:before {
-  content: "\f279"; }
+  content: '\f279';
+}
 
 .fa.fa-commenting:before {
-  content: "\f4ad"; }
+  content: '\f4ad';
+}
 
 .fa.fa-commenting-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-commenting-o:before {
-  content: "\f4ad"; }
+  content: '\f4ad';
+}
 
 .fa.fa-houzz {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-vimeo {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-vimeo:before {
-  content: "\f27d"; }
+  content: '\f27d';
+}
 
 .fa.fa-black-tie {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-fonticons {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-reddit-alien {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-edge {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-credit-card-alt:before {
-  content: "\f09d"; }
+  content: '\f09d';
+}
 
 .fa.fa-codiepie {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-modx {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-fort-awesome {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-usb {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-product-hunt {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-mixcloud {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-scribd {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pause-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-pause-circle-o:before {
-  content: "\f28b"; }
+  content: '\f28b';
+}
 
 .fa.fa-stop-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-stop-circle-o:before {
-  content: "\f28d"; }
+  content: '\f28d';
+}
 
 .fa.fa-bluetooth {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-bluetooth-b {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-gitlab {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wpbeginner {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wpforms {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-envira {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wheelchair-alt {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wheelchair-alt:before {
-  content: "\f368"; }
+  content: '\f368';
+}
 
 .fa.fa-question-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-question-circle-o:before {
-  content: "\f059"; }
+  content: '\f059';
+}
 
 .fa.fa-volume-control-phone:before {
-  content: "\f2a0"; }
+  content: '\f2a0';
+}
 
 .fa.fa-asl-interpreting:before {
-  content: "\f2a3"; }
+  content: '\f2a3';
+}
 
 .fa.fa-deafness:before {
-  content: "\f2a4"; }
+  content: '\f2a4';
+}
 
 .fa.fa-hard-of-hearing:before {
-  content: "\f2a4"; }
+  content: '\f2a4';
+}
 
 .fa.fa-glide {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-glide-g {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-signing:before {
-  content: "\f2a7"; }
+  content: '\f2a7';
+}
 
 .fa.fa-viadeo {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-viadeo-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-viadeo-square:before {
-  content: "\f2aa"; }
+  content: '\f2aa';
+}
 
 .fa.fa-snapchat {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-snapchat-ghost {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-snapchat-ghost:before {
-  content: "\f2ab"; }
+  content: '\f2ab';
+}
 
 .fa.fa-snapchat-square {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-snapchat-square:before {
-  content: "\f2ad"; }
+  content: '\f2ad';
+}
 
 .fa.fa-pied-piper {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-first-order {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-yoast {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-themeisle {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google-plus-official {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google-plus-official:before {
-  content: "\f2b3"; }
+  content: '\f2b3';
+}
 
 .fa.fa-google-plus-circle {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-google-plus-circle:before {
-  content: "\f2b3"; }
+  content: '\f2b3';
+}
 
 .fa.fa-font-awesome {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-fa {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-fa:before {
-  content: "\f2b4"; }
+  content: '\f2b4';
+}
 
 .fa.fa-handshake-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-handshake-o:before {
-  content: "\f2b5"; }
+  content: '\f2b5';
+}
 
 .fa.fa-envelope-open-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-envelope-open-o:before {
-  content: "\f2b6"; }
+  content: '\f2b6';
+}
 
 .fa.fa-linode {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-address-book-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-address-book-o:before {
-  content: "\f2b9"; }
+  content: '\f2b9';
+}
 
 .fa.fa-vcard:before {
-  content: "\f2bb"; }
+  content: '\f2bb';
+}
 
 .fa.fa-address-card-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-address-card-o:before {
-  content: "\f2bb"; }
+  content: '\f2bb';
+}
 
 .fa.fa-vcard-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-vcard-o:before {
-  content: "\f2bb"; }
+  content: '\f2bb';
+}
 
 .fa.fa-user-circle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-user-circle-o:before {
-  content: "\f2bd"; }
+  content: '\f2bd';
+}
 
 .fa.fa-user-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-user-o:before {
-  content: "\f007"; }
+  content: '\f007';
+}
 
 .fa.fa-id-badge {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-drivers-license:before {
-  content: "\f2c2"; }
+  content: '\f2c2';
+}
 
 .fa.fa-id-card-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-id-card-o:before {
-  content: "\f2c2"; }
+  content: '\f2c2';
+}
 
 .fa.fa-drivers-license-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-drivers-license-o:before {
-  content: "\f2c2"; }
+  content: '\f2c2';
+}
 
 .fa.fa-quora {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-free-code-camp {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-telegram {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-thermometer-4:before {
-  content: "\f2c7"; }
+  content: '\f2c7';
+}
 
 .fa.fa-thermometer:before {
-  content: "\f2c7"; }
+  content: '\f2c7';
+}
 
 .fa.fa-thermometer-3:before {
-  content: "\f2c8"; }
+  content: '\f2c8';
+}
 
 .fa.fa-thermometer-2:before {
-  content: "\f2c9"; }
+  content: '\f2c9';
+}
 
 .fa.fa-thermometer-1:before {
-  content: "\f2ca"; }
+  content: '\f2ca';
+}
 
 .fa.fa-thermometer-0:before {
-  content: "\f2cb"; }
+  content: '\f2cb';
+}
 
 .fa.fa-bathtub:before {
-  content: "\f2cd"; }
+  content: '\f2cd';
+}
 
 .fa.fa-s15:before {
-  content: "\f2cd"; }
+  content: '\f2cd';
+}
 
 .fa.fa-window-maximize {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-window-restore {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-times-rectangle:before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa.fa-window-close-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-window-close-o:before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa.fa-times-rectangle-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-times-rectangle-o:before {
-  content: "\f410"; }
+  content: '\f410';
+}
 
 .fa.fa-bandcamp {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-grav {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-etsy {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-imdb {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-ravelry {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-eercast {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-eercast:before {
-  content: "\f2da"; }
+  content: '\f2da';
+}
 
 .fa.fa-snowflake-o {
   font-family: 'Font Awesome 6 Free';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-snowflake-o:before {
-  content: "\f2dc"; }
+  content: '\f2dc';
+}
 
 .fa.fa-superpowers {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-wpexplorer {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
 
 .fa.fa-meetup {
   font-family: 'Font Awesome 6 Brands';
-  font-weight: 400; }
+  font-weight: 400;
+}
diff --git a/packages/insomnia/src/ui/css/main.css b/packages/insomnia/src/ui/css/main.css
index 3f6f1b8782..d4259b1a99 100644
--- a/packages/insomnia/src/ui/css/main.css
+++ b/packages/insomnia/src/ui/css/main.css
@@ -1180,7 +1180,7 @@ button {
   color: var(--color-notice) !important;
 }
 .method-grpc {
-  color: #2FA3A3 !important;
+  color: #2fa3a3 !important;
 }
 .warning,
 .http-method-PUT {
@@ -1307,10 +1307,10 @@ html {
   font-size: var(--font-size-xxl) !important;
 }
 html {
-  --font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
-    'Droid Sans Fallback';
-  --font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'HelveticaNeue-Light',
-    'Ubuntu', 'Droid Sans', sans-serif;
+  --font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback';
+  --font-default:
+    -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', 'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans',
+    sans-serif;
   --font-ligatures: normal;
 }
 /* Components */
@@ -1487,7 +1487,7 @@ html {
 
 /* Get the child div element that is inside .Codemirror-scroll, between the elements with class .CodeMirror-sizer and CodeMirror-gutters */
 .editor.editor--single-line .CodeMirror-scroll > div:has(+ .CodeMirror-gutters, + .CodeMirror-sizer) {
-  height: 0!important;
+  height: 0 !important;
 }
 
 .editor.editor--single-line .nunjucks-tag {
@@ -1500,7 +1500,7 @@ html {
 }
 
 .editor.editor--environment-inline .editor--environment-inline-focus {
-  position: absolute!important;
+  position: absolute !important;
   top: 0.25rem;
   background: var(--color-bg);
   z-index: 50;
@@ -1687,7 +1687,7 @@ html {
   border-left: 1px solid var(--color-font);
 }
 
-[theme="default"] .editor .CodeMirror-foldmarker {
+[theme='default'] .editor .CodeMirror-foldmarker {
   color: var(--color-font-surprise);
 }
 .editor .CodeMirror-foldmarker {
@@ -1708,12 +1708,12 @@ html {
 .editor .cm-qualifier {
   color: var(--color-font);
 }
-[theme="default"] .editor .cm-atom,
-[theme="default"] .editor .cm-number,
-[theme="default"] .editor .cm-keyword,
-[theme="default"] .editor .cm-variable-3,
-[theme="default"] .editor .cm-link,
-[theme="default"] .editor .cm-header {
+[theme='default'] .editor .cm-atom,
+[theme='default'] .editor .cm-number,
+[theme='default'] .editor .cm-keyword,
+[theme='default'] .editor .cm-variable-3,
+[theme='default'] .editor .cm-link,
+[theme='default'] .editor .cm-header {
   color: var(--color-font-surprise);
 }
 .editor .cm-atom {
@@ -1902,7 +1902,9 @@ html {
   display: grid;
   height: 100%;
   grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0%, min-content) minmax(50%, 1fr) min-content min-content min-content minmax(0%, min-content) min-content;
+  grid-template-rows:
+    minmax(0%, min-content) minmax(50%, 1fr) min-content min-content min-content minmax(0%, min-content)
+    min-content;
 }
 .graphql-editor > h2 {
   color: var(--hl);
@@ -1971,8 +1973,8 @@ html {
   margin: var(--padding-xs) 0 var(--padding-sm) 0;
 }
 
-[theme="default"] .CodeMirror-info .type-name,
-[theme="default"] .CodeMirror-info .arg-name {
+[theme='default'] .CodeMirror-info .type-name,
+[theme='default'] .CodeMirror-info .arg-name {
   color: var(--color-font-surprise);
 }
 
@@ -2377,13 +2379,13 @@ input.editable {
 .markdown-preview__content .hljs .hljs-tag .hljs-attr {
   color: var(--color-surprise);
 }
-[theme="default"] .markdown-preview__content .hljs .hljs-literal,
-[theme="default"] .markdown-preview__content .hljs .hljs-template-variable,
-[theme="default"] .markdown-preview__content .hljs .hljs-built_in,
-[theme="default"] .markdown-preview__content .hljs .hljs-keyword,
-[theme="default"] .markdown-preview__content .hljs .hljs-builtin-name,
-[theme="default"] .markdown-preview__content .hljs .hljs-type,
-[theme="default"] .markdown-preview__content .hljs .hljs-tag .hljs-attr {
+[theme='default'] .markdown-preview__content .hljs .hljs-literal,
+[theme='default'] .markdown-preview__content .hljs .hljs-template-variable,
+[theme='default'] .markdown-preview__content .hljs .hljs-built_in,
+[theme='default'] .markdown-preview__content .hljs .hljs-keyword,
+[theme='default'] .markdown-preview__content .hljs .hljs-builtin-name,
+[theme='default'] .markdown-preview__content .hljs .hljs-type,
+[theme='default'] .markdown-preview__content .hljs .hljs-tag .hljs-attr {
   color: var(--color-surprise);
 }
 .markdown-preview__content .hljs .hljs-symbol,
@@ -3178,7 +3180,15 @@ input.editable {
 .sidebar .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
   padding-left: calc(var(--padding-sm) + var(--padding-md) * 5);
 }
-.sidebar .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
+.sidebar
+  .sidebar__list
+  .sidebar__list
+  .sidebar__list
+  .sidebar__list
+  .sidebar__list
+  .sidebar__list
+  .sidebar__list
+  .sidebar__clickable {
   padding-left: calc(var(--padding-sm) + var(--padding-md) * 6);
 }
 .sidebar .sidebar__expand {
@@ -3359,7 +3369,11 @@ input.editable {
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: auto;
-  transition: opacity 200ms, right 300ms, bottom 300ms, transform 200ms ease-out;
+  transition:
+    opacity 200ms,
+    right 300ms,
+    bottom 300ms,
+    transform 200ms ease-out;
   padding: var(--padding-sm);
   transform: scale(0.8);
   border-radius: var(--radius-md);
diff --git a/packages/insomnia/src/ui/css/styles.css b/packages/insomnia/src/ui/css/styles.css
index 9acbd5b90b..7cfd7ffc67 100644
--- a/packages/insomnia/src/ui/css/styles.css
+++ b/packages/insomnia/src/ui/css/styles.css
@@ -13,7 +13,6 @@
 @tailwind components;
 @tailwind utilities;
 
-
 html {
   font-size: 11px;
 }
@@ -26,47 +25,47 @@ html {
     / 50px 1fr;
 
   &.with-banner {
-    grid-template: 
-    'Header Header' auto
-    'Banner Banner' 30px
-    'Content Content' 1fr
-    'Statusbar Statusbar' 30px [row-end]
-    / 50px 1fr;
-
-    &.with-navbar {
-      grid-template: 
+    grid-template:
       'Header Header' auto
       'Banner Banner' 30px
-      'Navbar Content' 1fr
+      'Content Content' 1fr
       'Statusbar Statusbar' 30px [row-end]
       / 50px 1fr;
+
+    &.with-navbar {
+      grid-template:
+        'Header Header' auto
+        'Banner Banner' 30px
+        'Navbar Content' 1fr
+        'Statusbar Statusbar' 30px [row-end]
+        / 50px 1fr;
     }
   }
 
   &.with-navbar {
-    grid-template: 
-    'Header Header' auto
-    'Navbar Content' 1fr
-    'Statusbar Statusbar' 30px [row-end]
-    / 50px 1fr;
+    grid-template:
+      'Header Header' auto
+      'Navbar Content' 1fr
+      'Statusbar Statusbar' 30px [row-end]
+      / 50px 1fr;
   }
 }
 
-input[type="search"]::-webkit-search-cancel-button {
+input[type='search']::-webkit-search-cancel-button {
   display: none;
 }
 
-input[type="color"] {
-	-webkit-appearance: none;
-	border: none;
-	width: 12px;
-	height: 12px;
+input[type='color'] {
+  -webkit-appearance: none;
+  border: none;
+  width: 12px;
+  height: 12px;
 }
-input[type="color"]::-webkit-color-swatch-wrapper {
-	padding: 0;
+input[type='color']::-webkit-color-swatch-wrapper {
+  padding: 0;
 }
-input[type="color"]::-webkit-color-swatch {
-	border-radius: 9999px;
+input[type='color']::-webkit-color-swatch {
+  border-radius: 9999px;
   border: none;
 }
 
@@ -88,7 +87,7 @@ table.json-diff-viewer {
     width: 100%;
 
     col {
-      width: 50%
+      width: 50%;
     }
   }
 
@@ -96,13 +95,13 @@ table.json-diff-viewer {
     padding: 1px 4px;
     font-size: 0;
   }
-  
+
   tr {
     vertical-align: top;
 
     .line-remove {
       background: rgba(var(--color-danger-rgb), 0.2);
-      color: var(--color-font)
+      color: var(--color-font);
     }
 
     .line-add {
@@ -143,7 +142,7 @@ table.json-diff-viewer {
     white-space: pre-wrap;
     word-break: break-all;
   }
-} 
+}
 
 @keyframes bounceIn {
   0% {
diff --git a/packages/insomnia/src/ui/hooks/image-cache.tsx b/packages/insomnia/src/ui/hooks/image-cache.tsx
index d8164dd18f..a83554c4ac 100644
--- a/packages/insomnia/src/ui/hooks/image-cache.tsx
+++ b/packages/insomnia/src/ui/hooks/image-cache.tsx
@@ -24,8 +24,7 @@ class ImageCache {
       throw this.__cache[base].value;
     } else if (
       this.__cache[base] &&
-      (this.__cache[base].version === version ||
-        now - this.__cache[base].timestamp < this.ttl)
+      (this.__cache[base].version === version || now - this.__cache[base].timestamp < this.ttl)
     ) {
       // If the value is an HTMLImageElement, the version matches, and hasn't expired, return it
       return this.__cache[base].value;
@@ -86,9 +85,7 @@ class ImageCache {
     }
     return () => {
       if (this.__cache[base] && this.__cache[base].subscribers) {
-        this.__cache[base].subscribers = this.__cache[base].subscribers.filter(
-          cb => cb !== callback
-        );
+        this.__cache[base].subscribers = this.__cache[base].subscribers.filter(cb => cb !== callback);
       }
     };
   }
@@ -114,7 +111,7 @@ export function useImageCache(src: string, cache: ImageCache): string {
     (callback: () => void) => {
       return cache.subscribe(base, callback);
     },
-    [base, cache]
+    [base, cache],
   );
 
   const getSnapshot = () => {
@@ -148,11 +145,7 @@ export function useImageCache(src: string, cache: ImageCache): string {
     });
   }, [cache, base, version]);
 
-  const cacheSrc = useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getServerSnapshot
-  );
+  const cacheSrc = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
   if (typeof cacheSrc === 'string') {
     return cacheSrc;
diff --git a/packages/insomnia/src/ui/hooks/theme.ts b/packages/insomnia/src/ui/hooks/theme.ts
index 745070c0f1..74ddd89940 100644
--- a/packages/insomnia/src/ui/hooks/theme.ts
+++ b/packages/insomnia/src/ui/hooks/theme.ts
@@ -8,71 +8,71 @@ import { useRootLoaderData } from '../routes/root';
 import { useSettingsPatcher } from './use-request';
 
 export const useThemes = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
-  const {
-    lightTheme,
-    darkTheme,
-    autoDetectColorScheme,
-    theme,
-    pluginConfig,
-  } = settings;
+  const { settings } = useRootLoaderData();
+  const { lightTheme, darkTheme, autoDetectColorScheme, theme, pluginConfig } = settings;
 
   const [themes, setThemes] = useState<PluginTheme[]>([]);
 
   useAsync(async () => {
     const pluginThemes = await getThemes();
     setThemes(pluginThemes.map(({ theme }) => theme));
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- Reload themes if pluginConfig changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Reload themes if pluginConfig changes
   }, [pluginConfig]);
 
   // Check if the theme is active
   const isActiveDark = useCallback(({ name }: PluginTheme) => name === darkTheme, [darkTheme]);
   const isActiveLight = useCallback(({ name }: PluginTheme) => name === lightTheme, [lightTheme]);
 
-  const isActive = useCallback((pluginTheme : PluginTheme) => {
-    if (autoDetectColorScheme) {
-      return isActiveLight(pluginTheme) || isActiveDark(pluginTheme);
-    }
-    return pluginTheme.name === theme;
-  }, [autoDetectColorScheme, isActiveDark, isActiveLight, theme]);
+  const isActive = useCallback(
+    (pluginTheme: PluginTheme) => {
+      if (autoDetectColorScheme) {
+        return isActiveLight(pluginTheme) || isActiveDark(pluginTheme);
+      }
+      return pluginTheme.name === theme;
+    },
+    [autoDetectColorScheme, isActiveDark, isActiveLight, theme],
+  );
   const patchSettings = useSettingsPatcher();
 
   // Apply the theme and update settings
-  const apply = useCallback(async (patch: Partial<ThemeSettings>) => {
-    applyColorScheme({
-      theme,
-      autoDetectColorScheme,
-      darkTheme,
-      lightTheme,
-      ...patch,
-    });
-    patchSettings(patch);
-
-  }, [autoDetectColorScheme, darkTheme, lightTheme, patchSettings, theme]);
+  const apply = useCallback(
+    async (patch: Partial<ThemeSettings>) => {
+      applyColorScheme({
+        theme,
+        autoDetectColorScheme,
+        darkTheme,
+        lightTheme,
+        ...patch,
+      });
+      patchSettings(patch);
+    },
+    [autoDetectColorScheme, darkTheme, lightTheme, patchSettings, theme],
+  );
 
   const changeAutoDetect = useCallback((autoDetectColorScheme: boolean) => apply({ autoDetectColorScheme }), [apply]);
 
   // Activate the theme for the selected color scheme
-  const activate = useCallback(async (themeName: string, colorScheme: ColorScheme) => {
-    switch (colorScheme) {
-      case 'light':
-        await apply({ lightTheme: themeName });
-        break;
+  const activate = useCallback(
+    async (themeName: string, colorScheme: ColorScheme) => {
+      switch (colorScheme) {
+        case 'light':
+          await apply({ lightTheme: themeName });
+          break;
 
-      case 'dark':
-        await apply({ darkTheme: themeName });
-        break;
+        case 'dark':
+          await apply({ darkTheme: themeName });
+          break;
 
-      case 'default':
-        await apply({ theme: themeName });
-        break;
+        case 'default':
+          await apply({ theme: themeName });
+          break;
 
-      default:
-        throw new Error(colorScheme);
-    }
-  }, [apply]);
+        default:
+          throw new Error(colorScheme);
+      }
+    },
+    [apply],
+  );
 
   return {
     themes,
diff --git a/packages/insomnia/src/ui/hooks/use-close-connection.ts b/packages/insomnia/src/ui/hooks/use-close-connection.ts
index ce08e153b4..720260cabf 100644
--- a/packages/insomnia/src/ui/hooks/use-close-connection.ts
+++ b/packages/insomnia/src/ui/hooks/use-close-connection.ts
@@ -9,7 +9,6 @@ import uiEventBus from '../eventBus';
 
 // this hook is use for control when to close connections(websocket & SSE & grpc stream & graphql subscription)
 export const useCloseConnection = ({ organizationId }: { organizationId: string }) => {
-
   const closeConnectionById = async (id: string) => {
     if (isGrpcRequestId(id)) {
       window.main.grpc.cancel(id);
@@ -41,14 +40,17 @@ export const useCloseConnection = ({ organizationId }: { organizationId: string
 
   const { currentOrgTabs } = useInsomniaTabContext();
 
-  const handleActiveEnvironmentChange = useCallback((workspaceId: string) => {
-    const { tabList } = currentOrgTabs;
-    const tabs = tabList.filter(tab => tab.workspaceId === workspaceId);
-    tabs.forEach(async tab => {
-      const id = tab.id;
-      await closeConnectionById(id);
-    });
-  }, [currentOrgTabs]);
+  const handleActiveEnvironmentChange = useCallback(
+    (workspaceId: string) => {
+      const { tabList } = currentOrgTabs;
+      const tabs = tabList.filter(tab => tab.workspaceId === workspaceId);
+      tabs.forEach(async tab => {
+        const id = tab.id;
+        await closeConnectionById(id);
+      });
+    },
+    [currentOrgTabs],
+  );
 
   useEffect(() => {
     uiEventBus.on('CLOSE_TAB', handleTabClose);
diff --git a/packages/insomnia/src/ui/hooks/use-document-title.ts b/packages/insomnia/src/ui/hooks/use-document-title.ts
index ed68d8af6c..ac1c0799ca 100644
--- a/packages/insomnia/src/ui/hooks/use-document-title.ts
+++ b/packages/insomnia/src/ui/hooks/use-document-title.ts
@@ -5,11 +5,9 @@ import { getProductName } from '../../common/constants';
 import type { RequestLoaderData } from '../routes/request';
 import type { WorkspaceLoaderData } from '../routes/workspace';
 export const useDocumentTitle = () => {
-  const {
-    activeWorkspace,
-    activeEnvironment,
-    activeProject,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeWorkspace, activeEnvironment, activeProject } = useRouteLoaderData(
+    ':workspaceId',
+  ) as WorkspaceLoaderData;
 
   const { activeRequest } = useRouteLoaderData('request/:requestId') as RequestLoaderData;
 
@@ -28,5 +26,4 @@ export const useDocumentTitle = () => {
     }
     document.title = title || getProductName();
   }, [activeEnvironment, activeProject.name, activeRequest, activeWorkspace]);
-
 };
diff --git a/packages/insomnia/src/ui/hooks/use-editor-refresh.ts b/packages/insomnia/src/ui/hooks/use-editor-refresh.ts
index 10da41a4cc..22e67a6d49 100644
--- a/packages/insomnia/src/ui/hooks/use-editor-refresh.ts
+++ b/packages/insomnia/src/ui/hooks/use-editor-refresh.ts
@@ -14,11 +14,19 @@ export const useEditorRefresh = (callback: () => void) => {
       return;
     }
 
-    if (previousShowVariableSourceAndValue === showVariableSourceAndValue && previousNunjucksPowerUserMode === nunjucksPowerUserMode) {
+    if (
+      previousShowVariableSourceAndValue === showVariableSourceAndValue &&
+      previousNunjucksPowerUserMode === nunjucksPowerUserMode
+    ) {
       return;
     }
 
     callback?.();
-  }, [showVariableSourceAndValue, nunjucksPowerUserMode, previousShowVariableSourceAndValue, previousNunjucksPowerUserMode, callback]);
-
+  }, [
+    showVariableSourceAndValue,
+    nunjucksPowerUserMode,
+    previousShowVariableSourceAndValue,
+    previousNunjucksPowerUserMode,
+    callback,
+  ]);
 };
diff --git a/packages/insomnia/src/ui/hooks/use-execution-state.ts b/packages/insomnia/src/ui/hooks/use-execution-state.ts
index daa758ed0d..4c99bf7778 100644
--- a/packages/insomnia/src/ui/hooks/use-execution-state.ts
+++ b/packages/insomnia/src/ui/hooks/use-execution-state.ts
@@ -27,10 +27,9 @@ export function useExecutionState({ requestId }: { requestId?: string }) {
   useEffect(() => {
     let isMounted = true;
     // @ts-expect-error -- we use a dynamic channel here
-    const unsubscribe = window.main.on(`syncTimers.${requestId}`,
-      (_, { executions }: { executions: TimingStep[] }) => {
-        isMounted && setSteps(executions);
-      });
+    const unsubscribe = window.main.on(`syncTimers.${requestId}`, (_, { executions }: { executions: TimingStep[] }) => {
+      isMounted && setSteps(executions);
+    });
     return () => {
       isMounted = false;
       unsubscribe();
diff --git a/packages/insomnia/src/ui/hooks/use-global-keyboard-shortcuts.ts b/packages/insomnia/src/ui/hooks/use-global-keyboard-shortcuts.ts
index 59e04b8a1a..2ee6f17525 100644
--- a/packages/insomnia/src/ui/hooks/use-global-keyboard-shortcuts.ts
+++ b/packages/insomnia/src/ui/hooks/use-global-keyboard-shortcuts.ts
@@ -6,21 +6,16 @@ import { useRootLoaderData } from '../routes/root';
 import { useSettingsPatcher } from './use-request';
 
 export const useGlobalKeyboardShortcuts = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   const patchSettings = useSettingsPatcher();
 
   useDocBodyKeyboardShortcuts({
-    plugin_reload:
-      () => plugins.reloadPlugins(),
+    plugin_reload: () => plugins.reloadPlugins(),
     // TODO: move this to workspace route
-    environment_showVariableSourceAndValue:
-      () => patchSettings({ showVariableSourceAndValue: !settings.showVariableSourceAndValue }),
+    environment_showVariableSourceAndValue: () =>
+      patchSettings({ showVariableSourceAndValue: !settings.showVariableSourceAndValue }),
     // TODO: move this to organization route
-    preferences_showGeneral:
-      () => showModal(SettingsModal),
-    preferences_showKeyboardShortcuts:
-      () => showModal(SettingsModal, { tab: TAB_INDEX_SHORTCUTS }),
+    preferences_showGeneral: () => showModal(SettingsModal),
+    preferences_showKeyboardShortcuts: () => showModal(SettingsModal, { tab: TAB_INDEX_SHORTCUTS }),
   });
 };
diff --git a/packages/insomnia/src/ui/hooks/use-insomnia-tab.ts b/packages/insomnia/src/ui/hooks/use-insomnia-tab.ts
index 7a7942627f..303aaf342a 100644
--- a/packages/insomnia/src/ui/hooks/use-insomnia-tab.ts
+++ b/packages/insomnia/src/ui/hooks/use-insomnia-tab.ts
@@ -38,60 +38,74 @@ export const useInsomniaTab = ({
   activeMockRoute,
   unitTestSuite,
 }: InsomniaTabProps) => {
-
   const { appTabsRef, addTab, changeActiveTab, closeTabById } = useInsomniaTabContext();
   const location = useLocation();
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const generateTabUrl = useCallback((type: TabType) => {
-    if (type === 'request') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequest?._id}`;
-    }
+  const generateTabUrl = useCallback(
+    (type: TabType) => {
+      if (type === 'request') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequest?._id}`;
+      }
 
-    if (type === 'folder') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${activeRequestGroup?._id}`;
-    }
+      if (type === 'folder') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${activeRequestGroup?._id}`;
+      }
 
-    if (type === 'collection') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug?doNotSkipToActiveRequest=true`;
-    }
+      if (type === 'collection') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug?doNotSkipToActiveRequest=true`;
+      }
 
-    if (type === 'environment') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment`;
-    }
+      if (type === 'environment') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment`;
+      }
 
-    if (type === 'runner') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner${location.search}`;
-    }
+      if (type === 'runner') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner${location.search}`;
+      }
 
-    if (type === 'mockServer') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server`;
-    }
+      if (type === 'mockServer') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server`;
+      }
 
-    if (type === 'mockRoute') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${activeMockRoute?._id}`;
-    }
+      if (type === 'mockRoute') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${activeMockRoute?._id}`;
+      }
 
-    if (type === 'document') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/spec`;
-    }
+      if (type === 'document') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/spec`;
+      }
 
-    if (type === 'test') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test`;
-    }
+      if (type === 'test') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test`;
+      }
 
-    if (type === 'testSuite') {
-      return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite?._id}`;
-    }
-    return '';
-  }, [activeMockRoute?._id, activeRequest?._id, activeRequestGroup?._id, location.search, organizationId, projectId, unitTestSuite?._id, workspaceId]);
+      if (type === 'testSuite') {
+        return `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite?._id}`;
+      }
+      return '';
+    },
+    [
+      activeMockRoute?._id,
+      activeRequest?._id,
+      activeRequestGroup?._id,
+      location.search,
+      organizationId,
+      projectId,
+      unitTestSuite?._id,
+      workspaceId,
+    ],
+  );
 
   const getTabType = (pathname: string): TabType | null => {
     for (const type in TAB_ROUTER_PATH) {
-      const ifMatch = matchPath({
-        path: TAB_ROUTER_PATH[type as TabType],
-        end: true,
-      }, pathname);
+      const ifMatch = matchPath(
+        {
+          path: TAB_ROUTER_PATH[type as TabType],
+          end: true,
+        },
+        pathname,
+      );
       if (ifMatch) {
         return type as TabType;
       }
@@ -108,167 +122,205 @@ export const useInsomniaTab = ({
     return `runner_${workspaceId}`;
   }, [searchParams, workspaceId]);
 
-  const getCurrentTab = useCallback((type: TabType | null) => {
-    if (!type) {
+  const getCurrentTab = useCallback(
+    (type: TabType | null) => {
+      if (!type) {
+        return undefined;
+      }
+      const currentOrgTabs = appTabsRef?.current?.[organizationId];
+      if (type === 'request') {
+        return currentOrgTabs?.tabList.find(tab => tab.id === activeRequest?._id);
+      }
+
+      if (type === 'folder') {
+        return currentOrgTabs?.tabList.find(tab => tab.id === activeRequestGroup?._id);
+      }
+
+      if (type === 'runner') {
+        // collection runner tab id is prefixed with 'runner_'
+        const runnerTabId = getRunnerTabId();
+        return currentOrgTabs?.tabList.find(tab => tab.id === runnerTabId);
+      }
+
+      if (type === 'mockRoute') {
+        return currentOrgTabs?.tabList.find(tab => tab.id === activeMockRoute?._id);
+      }
+
+      if (type === 'testSuite') {
+        return currentOrgTabs?.tabList.find(tab => tab.id === unitTestSuite?._id);
+      }
+
+      const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
+      if (collectionTabTypes.includes(type)) {
+        return currentOrgTabs?.tabList.find(tab => tab.id === workspaceId);
+      }
       return undefined;
-    }
-    const currentOrgTabs = appTabsRef?.current?.[organizationId];
-    if (type === 'request') {
-      return currentOrgTabs?.tabList.find(tab => tab.id === activeRequest?._id);
-    }
+    },
+    [
+      activeMockRoute?._id,
+      activeRequest?._id,
+      activeRequestGroup?._id,
+      appTabsRef,
+      getRunnerTabId,
+      organizationId,
+      unitTestSuite?._id,
+      workspaceId,
+    ],
+  );
 
-    if (type === 'folder') {
-      return currentOrgTabs?.tabList.find(tab => tab.id === activeRequestGroup?._id);
-    }
+  const getTabId = useCallback(
+    (type: TabType | null): string => {
+      if (!type) {
+        return '';
+      }
+      if (type === 'request') {
+        return activeRequest?._id || '';
+      }
 
-    if (type === 'runner') {
-      // collection runner tab id is prefixed with 'runner_'
-      const runnerTabId = getRunnerTabId();
-      return currentOrgTabs?.tabList.find(tab => tab.id === runnerTabId);
-    }
+      if (type === 'folder') {
+        return activeRequestGroup?._id || '';
+      }
 
-    if (type === 'mockRoute') {
-      return currentOrgTabs?.tabList.find(tab => tab.id === activeMockRoute?._id);
-    }
+      if (type === 'runner') {
+        const runnerTabId = getRunnerTabId();
+        return runnerTabId;
+      }
 
-    if (type === 'testSuite') {
-      return currentOrgTabs?.tabList.find(tab => tab.id === unitTestSuite?._id);
-    }
+      if (type === 'mockRoute') {
+        return activeMockRoute?._id || '';
+      }
 
-    const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
-    if (collectionTabTypes.includes(type)) {
-      return currentOrgTabs?.tabList.find(tab => tab.id === workspaceId);
-    }
-    return undefined;
-  }, [activeMockRoute?._id, activeRequest?._id, activeRequestGroup?._id, appTabsRef, getRunnerTabId, organizationId, unitTestSuite?._id, workspaceId]);
+      if (type === 'testSuite') {
+        return unitTestSuite?._id || '';
+      }
+      const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
+      if (collectionTabTypes.includes(type)) {
+        return workspaceId;
+      }
 
-  const getTabId = useCallback((type: TabType | null): string => {
-    if (!type) {
       return '';
-    }
-    if (type === 'request') {
-      return activeRequest?._id || '';
-    }
+    },
+    [
+      activeMockRoute?._id,
+      activeRequest?._id,
+      activeRequestGroup?._id,
+      getRunnerTabId,
+      unitTestSuite?._id,
+      workspaceId,
+    ],
+  );
 
-    if (type === 'folder') {
-      return activeRequestGroup?._id || '';
-    }
+  const packTabInfo = useCallback(
+    (type: TabType): BaseTab | undefined => {
+      if (!type) {
+        return undefined;
+      }
+      if (type === 'request') {
+        return {
+          type,
+          name: activeRequest?.name || 'New Request',
+          url: generateTabUrl(type),
+          organizationId: organizationId,
+          projectId: projectId,
+          workspaceId: workspaceId,
+          id: getTabId(type),
+          projectName: activeProject.name,
+          workspaceName: activeWorkspace.name,
+          tag: getRequestMethodShortHand(activeRequest),
+          method: (activeRequest as Request)?.method || '',
+        };
+      }
 
-    if (type === 'runner') {
-      const runnerTabId = getRunnerTabId();
-      return runnerTabId;
-    }
+      if (type === 'folder') {
+        return {
+          type,
+          name: activeRequestGroup?.name || 'My Folder',
+          url: generateTabUrl(type),
+          organizationId: organizationId,
+          projectId: projectId,
+          workspaceId: workspaceId,
+          id: getTabId(type),
+          projectName: activeProject.name,
+          workspaceName: activeWorkspace.name,
+        };
+      }
 
-    if (type === 'mockRoute') {
-      return activeMockRoute?._id || '';
-    }
+      const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
+      if (collectionTabTypes.includes(type)) {
+        return {
+          type,
+          name: activeWorkspace.name,
+          url: generateTabUrl(type),
+          organizationId: organizationId,
+          projectId: projectId,
+          workspaceId: workspaceId,
+          id: getTabId(type),
+          projectName: activeProject.name,
+          workspaceName: activeWorkspace.name,
+        };
+      }
 
-    if (type === 'testSuite') {
-      return unitTestSuite?._id || '';
-    }
-    const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
-    if (collectionTabTypes.includes(type)) {
-      return workspaceId;
-    }
+      if (type === 'runner') {
+        return {
+          type,
+          name: 'Runner',
+          url: generateTabUrl(type),
+          organizationId: organizationId,
+          projectId: projectId,
+          workspaceId: workspaceId,
+          id: getTabId(type),
+          projectName: activeProject.name,
+          workspaceName: activeWorkspace.name,
+        };
+      }
 
-    return '';
-  }, [activeMockRoute?._id, activeRequest?._id, activeRequestGroup?._id, getRunnerTabId, unitTestSuite?._id, workspaceId]);
+      if (type === 'mockRoute') {
+        return {
+          type,
+          name: activeMockRoute?.name || 'Untitled mock route',
+          url: generateTabUrl(type),
+          organizationId: organizationId,
+          projectId: projectId,
+          workspaceId: workspaceId,
+          id: getTabId(type),
+          tag: formatMethodName(activeMockRoute?.method || ''),
+          projectName: activeProject.name,
+          workspaceName: activeWorkspace.name,
+          method: activeMockRoute?.method || '',
+        };
+      }
 
-  const packTabInfo = useCallback((type: TabType): BaseTab | undefined => {
-    if (!type) {
-      return undefined;
-    }
-    if (type === 'request') {
-      return {
-        type,
-        name: activeRequest?.name || 'New Request',
-        url: generateTabUrl(type),
-        organizationId: organizationId,
-        projectId: projectId,
-        workspaceId: workspaceId,
-        id: getTabId(type),
-        projectName: activeProject.name,
-        workspaceName: activeWorkspace.name,
-        tag: getRequestMethodShortHand(activeRequest),
-        method: (activeRequest as Request)?.method || '',
-      };
-    }
+      if (type === 'testSuite') {
+        return {
+          type,
+          name: unitTestSuite?.name || 'Untitled test suite',
+          url: generateTabUrl(type),
+          organizationId: organizationId,
+          projectId: projectId,
+          workspaceId: workspaceId,
+          id: getTabId(type),
+          projectName: activeProject.name,
+          workspaceName: activeWorkspace.name,
+        };
+      }
 
-    if (type === 'folder') {
-      return {
-        type,
-        name: activeRequestGroup?.name || 'My Folder',
-        url: generateTabUrl(type),
-        organizationId: organizationId,
-        projectId: projectId,
-        workspaceId: workspaceId,
-        id: getTabId(type),
-        projectName: activeProject.name,
-        workspaceName: activeWorkspace.name,
-      };
-    }
-
-    const collectionTabTypes: TabType[] = ['collection', 'document', 'environment', 'mockServer', 'test'];
-    if (collectionTabTypes.includes(type)) {
-      return {
-        type,
-        name: activeWorkspace.name,
-        url: generateTabUrl(type),
-        organizationId: organizationId,
-        projectId: projectId,
-        workspaceId: workspaceId,
-        id: getTabId(type),
-        projectName: activeProject.name,
-        workspaceName: activeWorkspace.name,
-      };
-    }
-
-    if (type === 'runner') {
-      return {
-        type,
-        name: 'Runner',
-        url: generateTabUrl(type),
-        organizationId: organizationId,
-        projectId: projectId,
-        workspaceId: workspaceId,
-        id: getTabId(type),
-        projectName: activeProject.name,
-        workspaceName: activeWorkspace.name,
-      };
-    }
-
-    if (type === 'mockRoute') {
-      return {
-        type,
-        name: activeMockRoute?.name || 'Untitled mock route',
-        url: generateTabUrl(type),
-        organizationId: organizationId,
-        projectId: projectId,
-        workspaceId: workspaceId,
-        id: getTabId(type),
-        tag: formatMethodName(activeMockRoute?.method || ''),
-        projectName: activeProject.name,
-        workspaceName: activeWorkspace.name,
-        method: activeMockRoute?.method || '',
-      };
-    }
-
-    if (type === 'testSuite') {
-      return {
-        type,
-        name: unitTestSuite?.name || 'Untitled test suite',
-        url: generateTabUrl(type),
-        organizationId: organizationId,
-        projectId: projectId,
-        workspaceId: workspaceId,
-        id: getTabId(type),
-        projectName: activeProject.name,
-        workspaceName: activeWorkspace.name,
-      };
-    }
-
-    return;
-  }, [activeMockRoute?.method, activeMockRoute?.name, activeProject.name, activeRequest, activeRequestGroup?.name, activeWorkspace.name, generateTabUrl, getTabId, organizationId, projectId, unitTestSuite?.name, workspaceId]);
+      return;
+    },
+    [
+      activeMockRoute?.method,
+      activeMockRoute?.name,
+      activeProject.name,
+      activeRequest,
+      activeRequestGroup?.name,
+      activeWorkspace.name,
+      generateTabUrl,
+      getTabId,
+      organizationId,
+      projectId,
+      unitTestSuite?.name,
+      workspaceId,
+    ],
+  );
 
   useEffect(() => {
     const type = getTabType(location.pathname);
@@ -303,7 +355,17 @@ export const useInsomniaTab = ({
         changeActiveTab(currentTab.id, { navigate: false });
       }
     }
-  }, [addTab, appTabsRef, changeActiveTab, getCurrentTab, location.pathname, organizationId, packTabInfo, searchParams, setSearchParams]);
+  }, [
+    addTab,
+    appTabsRef,
+    changeActiveTab,
+    getCurrentTab,
+    location.pathname,
+    organizationId,
+    packTabInfo,
+    searchParams,
+    setSearchParams,
+  ]);
 
   useDocBodyKeyboardShortcuts({
     close_tab: event => {
diff --git a/packages/insomnia/src/ui/hooks/use-loader-defer-data.ts b/packages/insomnia/src/ui/hooks/use-loader-defer-data.ts
index 6c1944cec2..14dd0874fe 100644
--- a/packages/insomnia/src/ui/hooks/use-loader-defer-data.ts
+++ b/packages/insomnia/src/ui/hooks/use-loader-defer-data.ts
@@ -1,6 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 
-export const useLoaderDeferData = <T>(deferedDataPromise?: Promise<T>, keepStaleDataKey?: string): [T | undefined, boolean, any] => {
+export const useLoaderDeferData = <T>(
+  deferedDataPromise?: Promise<T>,
+  keepStaleDataKey?: string,
+): [T | undefined, boolean, any] => {
   const [data, setData] = useState<T>();
   const [error, setError] = useState();
   const [isPending, setIsPending] = useState(true);
diff --git a/packages/insomnia/src/ui/hooks/use-local-storage.ts b/packages/insomnia/src/ui/hooks/use-local-storage.ts
index 0ca635c348..b5049a617d 100644
--- a/packages/insomnia/src/ui/hooks/use-local-storage.ts
+++ b/packages/insomnia/src/ui/hooks/use-local-storage.ts
@@ -33,23 +33,14 @@ export default function useLocalStorageState<T>(
   key: string,
   options?: Omit<LocalStorageOptions<T | undefined>, 'defaultValue'>,
 ): LocalStorageState<T | undefined>;
-export default function useLocalStorageState<T>(
-  key: string,
-  options?: LocalStorageOptions<T>,
-): LocalStorageState<T>;
+export default function useLocalStorageState<T>(key: string, options?: LocalStorageOptions<T>): LocalStorageState<T>;
 export default function useLocalStorageState<T = undefined>(
   key: string,
   options?: LocalStorageOptions<T | undefined>,
 ): LocalStorageState<T | undefined> {
   const serializer = options?.serializer;
   const [defaultValue] = useState(options?.defaultValue);
-  return useLocalStorage(
-    key,
-    defaultValue,
-    options?.storageSync,
-    serializer?.parse,
-    serializer?.stringify,
-  );
+  return useLocalStorage(key, defaultValue, options?.storageSync, serializer?.parse, serializer?.stringify);
 }
 
 function useLocalStorage<T>(
@@ -114,7 +105,7 @@ function useLocalStorage<T>(
         //   `localStorage.setItem()` will throw
         // - trying to access localStorage object when cookies are disabled in Safari throws
         //   "SecurityError: The operation is insecure."
-         
+
         goodTry(() => {
           const string = stringify(defaultValue);
           localStorage.setItem(key, string);
@@ -130,8 +121,7 @@ function useLocalStorage<T>(
   );
   const setState = useCallback(
     (newValue: SetStateAction<T | undefined>): void => {
-      const value =
-        newValue instanceof Function ? newValue(storageItem.current.parsed) : newValue;
+      const value = newValue instanceof Function ? newValue(storageItem.current.parsed) : newValue;
 
       // reasons for `localStorage` to throw an error:
       // - maximum quota is exceeded
diff --git a/packages/insomnia/src/ui/hooks/use-organization-features.tsx b/packages/insomnia/src/ui/hooks/use-organization-features.tsx
index 60bfd9e1df..34f040bd03 100644
--- a/packages/insomnia/src/ui/hooks/use-organization-features.tsx
+++ b/packages/insomnia/src/ui/hooks/use-organization-features.tsx
@@ -24,16 +24,20 @@ export function useOrganizationPermissions() {
 
   const { featuresPromise, billingPromise } = permissionsFetcher.data || {};
   // Features and billing return a promise using react-router's defer() so we need to wait for the data to be available.
-  const [features = {
-    gitSync: { enabled: false, reason: 'Insomnia API unreachable' },
-  }] = useLoaderDeferData(featuresPromise);
+  const [
+    features = {
+      gitSync: { enabled: false, reason: 'Insomnia API unreachable' },
+    },
+  ] = useLoaderDeferData(featuresPromise);
 
-  const [billing = {
-    isActive: true,
-    expirationErrorMessage: '',
-    expirationWarningMessage: '',
-    accessDenied: false,
-  }] = useLoaderDeferData(billingPromise);
+  const [
+    billing = {
+      isActive: true,
+      expirationErrorMessage: '',
+      expirationWarningMessage: '',
+      accessDenied: false,
+    },
+  ] = useLoaderDeferData(billingPromise);
 
   return { features, billing };
 }
diff --git a/packages/insomnia/src/ui/hooks/use-plan.tsx b/packages/insomnia/src/ui/hooks/use-plan.tsx
index f92586e6ff..0213c243ce 100644
--- a/packages/insomnia/src/ui/hooks/use-plan.tsx
+++ b/packages/insomnia/src/ui/hooks/use-plan.tsx
@@ -8,7 +8,7 @@ export const usePlanData = () => {
   const { organizationId } = useParams<{ organizationId: string }>();
   const { currentPlan, organizations } = useRouteLoaderData('/organization') as OrganizationLoaderData;
   const { userSession } = useRootLoaderData();
-  const currentOrg = organizations.find(organization => (organization.id === organizationId));
+  const currentOrg = organizations.find(organization => organization.id === organizationId);
   const accountId = userSession.accountId;
   let isOwner = false;
   if (currentOrg && accountId) {
diff --git a/packages/insomnia/src/ui/hooks/use-ready-state.ts b/packages/insomnia/src/ui/hooks/use-ready-state.ts
index ddfdc3e89f..9d05ef093d 100644
--- a/packages/insomnia/src/ui/hooks/use-ready-state.ts
+++ b/packages/insomnia/src/ui/hooks/use-ready-state.ts
@@ -7,10 +7,9 @@ export function useReadyState({ requestId, protocol }: { requestId: string; prot
   useEffect(() => {
     let isMounted = true;
     const fn = async () => {
-      window.main[protocol].readyState.getCurrent({ requestId })
-        .then((currentReadyState: boolean) => {
-          isMounted && setReadyState(currentReadyState);
-        });
+      window.main[protocol].readyState.getCurrent({ requestId }).then((currentReadyState: boolean) => {
+        isMounted && setReadyState(currentReadyState);
+      });
     };
     fn();
     return () => {
@@ -21,10 +20,9 @@ export function useReadyState({ requestId, protocol }: { requestId: string; prot
   useEffect(() => {
     let isMounted = true;
     // @ts-expect-error -- we use a dynamic channel here
-    const unsubscribe = window.main.on(`${protocol}.${requestId}.readyState`,
-      (_, incomingReadyState: boolean) => {
-        isMounted && setReadyState(incomingReadyState);
-      });
+    const unsubscribe = window.main.on(`${protocol}.${requestId}.readyState`, (_, incomingReadyState: boolean) => {
+      isMounted && setReadyState(incomingReadyState);
+    });
     return () => {
       isMounted = false;
       unsubscribe();
diff --git a/packages/insomnia/src/ui/hooks/use-realtime-connection-events.ts b/packages/insomnia/src/ui/hooks/use-realtime-connection-events.ts
index 4d5f0a0c61..7fcb4484f3 100644
--- a/packages/insomnia/src/ui/hooks/use-realtime-connection-events.ts
+++ b/packages/insomnia/src/ui/hooks/use-realtime-connection-events.ts
@@ -4,29 +4,32 @@ import { useInterval } from 'react-use';
 import type { CurlEvent } from '../../main/network/curl';
 import type { WebSocketEvent } from '../../main/network/websocket';
 
-export function useRealtimeConnectionEvents({ responseId, protocol }: { responseId: string; protocol: 'curl' | 'webSocket' }) {
+export function useRealtimeConnectionEvents({
+  responseId,
+  protocol,
+}: {
+  responseId: string;
+  protocol: 'curl' | 'webSocket';
+}) {
   const [events, setEvents] = useState<CurlEvent[] | WebSocketEvent[]>([]);
 
   useEffect(() => {
     setEvents([]);
   }, [responseId]);
 
-  useInterval(
-    () => {
-      let isMounted = true;
-      const fn = async () => {
-        const allEvents = await window.main[protocol].event.findMany({ responseId });
-        if (isMounted) {
-          setEvents(allEvents);
-        }
-      };
-      fn();
-      return () => {
-        isMounted = false;
-      };
-    },
-    500
-  );
+  useInterval(() => {
+    let isMounted = true;
+    const fn = async () => {
+      const allEvents = await window.main[protocol].event.findMany({ responseId });
+      if (isMounted) {
+        setEvents(allEvents);
+      }
+    };
+    fn();
+    return () => {
+      isMounted = false;
+    };
+  }, 500);
 
   return events;
 }
diff --git a/packages/insomnia/src/ui/hooks/use-request.ts b/packages/insomnia/src/ui/hooks/use-request.ts
index a67a70ac27..9500c51c32 100644
--- a/packages/insomnia/src/ui/hooks/use-request.ts
+++ b/packages/insomnia/src/ui/hooks/use-request.ts
@@ -1,4 +1,3 @@
-
 import { useFetcher, useParams } from 'react-router-dom';
 
 import type { GrpcRequest } from '../../models/grpc-request';
@@ -13,7 +12,11 @@ import type { WorkspaceMeta } from '../../models/workspace-meta';
 import { useInsomniaTabContext } from '../context/app/insomnia-tab-context';
 
 export const useRequestPatcher = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const { updateTabById } = useInsomniaTabContext();
   const fetcher = useFetcher();
   return (requestId: string, patch: Partial<GrpcRequest> | Partial<Request> | Partial<WebSocketRequest>) => {
@@ -27,7 +30,11 @@ export const useRequestPatcher = () => {
 };
 
 export const useRequestMetaPatcher = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const { updateTabById } = useInsomniaTabContext();
   const fetcher = useFetcher();
   return (requestId: string, patch: Partial<GrpcRequestMeta> | Partial<RequestMeta>) => {
@@ -41,7 +48,11 @@ export const useRequestMetaPatcher = () => {
 };
 
 export const useRequestGroupPatcher = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const { updateTabById } = useInsomniaTabContext();
   const fetcher = useFetcher();
   return (requestGroupId: string, patch: Partial<RequestGroup>) => {
@@ -55,7 +66,11 @@ export const useRequestGroupPatcher = () => {
 };
 
 export const useRequestGroupMetaPatcher = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const { updateTabById } = useInsomniaTabContext();
   const fetcher = useFetcher();
   return (requestGroupId: string, patch: Partial<RequestGroupMeta>) => {
diff --git a/packages/insomnia/src/ui/hooks/use-runner-request-list.tsx b/packages/insomnia/src/ui/hooks/use-runner-request-list.tsx
index 921e69b488..351c06b21d 100644
--- a/packages/insomnia/src/ui/hooks/use-runner-request-list.tsx
+++ b/packages/insomnia/src/ui/hooks/use-runner-request-list.tsx
@@ -19,12 +19,12 @@ export const useRunnerRequestList = (organizationId: string, targetFolderId: str
         return isRequest(item.doc);
       })
       .map((item: Child) => {
-        const ancestors:{id:string;name:string}[]  = []
+        const ancestors: { id: string; name: string }[] = [];
         if (item.ancestors) {
           item.ancestors.forEach(ancestorId => {
             const ancestor = entityMapRef.current.get(ancestorId);
             if (ancestor && isRequestGroup(ancestor?.doc)) {
-              ancestors.push({id:ancestor?.doc._id,name:ancestor?.doc.name})
+              ancestors.push({ id: ancestor?.doc._id, name: ancestor?.doc.name });
             }
           });
         }
@@ -42,7 +42,7 @@ export const useRunnerRequestList = (organizationId: string, targetFolderId: str
       })
       .filter(item => {
         if (targetFolderId) {
-          return item.ancestors.map(a=>a.id).includes(targetFolderId);
+          return item.ancestors.map(a => a.id).includes(targetFolderId);
         }
         return true;
       });
diff --git a/packages/insomnia/src/ui/hooks/use-safe-reducer-dispatch.ts b/packages/insomnia/src/ui/hooks/use-safe-reducer-dispatch.ts
index ebbe1f1d81..7e3b3e0118 100644
--- a/packages/insomnia/src/ui/hooks/use-safe-reducer-dispatch.ts
+++ b/packages/insomnia/src/ui/hooks/use-safe-reducer-dispatch.ts
@@ -4,11 +4,14 @@ import { useMountedState } from 'react-use';
 export const useSafeReducerDispatch = <A>(dispatch: (action: A) => void) => {
   const isMounted = useMountedState();
 
-  const safeDispatch = useCallback<typeof dispatch>((...args) => {
-    if (isMounted()) {
-      dispatch(...args);
-    }
-  }, [dispatch, isMounted]);
+  const safeDispatch = useCallback<typeof dispatch>(
+    (...args) => {
+      if (isMounted()) {
+        dispatch(...args);
+      }
+    },
+    [dispatch, isMounted],
+  );
 
   return safeDispatch;
 };
diff --git a/packages/insomnia/src/ui/hooks/use-safe-state.ts b/packages/insomnia/src/ui/hooks/use-safe-state.ts
index fe58f53802..63a22c934c 100644
--- a/packages/insomnia/src/ui/hooks/use-safe-state.ts
+++ b/packages/insomnia/src/ui/hooks/use-safe-state.ts
@@ -6,11 +6,14 @@ export const useSafeState = <S>(initialValue: S | (() => S)) => {
 
   const [state, _setState] = useState(initialValue);
 
-  const setState = useCallback<typeof _setState>((...args) => {
-    if (isMounted()) {
-      _setState(...args);
-    }
-  }, [isMounted]);
+  const setState = useCallback<typeof _setState>(
+    (...args) => {
+      if (isMounted()) {
+        _setState(...args);
+      }
+    },
+    [isMounted],
+  );
 
   // This needs to happen to force a tuple return type
   const returnValue: [typeof state, typeof setState] = [state, setState];
diff --git a/packages/insomnia/src/ui/hooks/use-settings-side-effects.ts b/packages/insomnia/src/ui/hooks/use-settings-side-effects.ts
index 34f519101a..338258818d 100644
--- a/packages/insomnia/src/ui/hooks/use-settings-side-effects.ts
+++ b/packages/insomnia/src/ui/hooks/use-settings-side-effects.ts
@@ -2,13 +2,12 @@ import { useEffect, useLayoutEffect } from 'react';
 
 import { useRootLoaderData } from '../routes/root';
 
-const updateFontStyle = (key: string, value: string | null) => document?.querySelector('html')?.style.setProperty(key, value);
+const updateFontStyle = (key: string, value: string | null) =>
+  document?.querySelector('html')?.style.setProperty(key, value);
 
 // as a general rule, if the body effect in this file is more than one line, extract into a separate function.
 export const useSettingsSideEffects = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
 
   useLayoutEffect(() => {
     updateFontStyle('--font-default', settings.fontInterface);
@@ -29,5 +28,4 @@ export const useSettingsSideEffects = () => {
   useEffect(() => {
     window.main.setMenuBarVisibility(!settings.autoHideMenuBar);
   }, [settings.autoHideMenuBar]);
-
 };
diff --git a/packages/insomnia/src/ui/hooks/use-theme-change.ts b/packages/insomnia/src/ui/hooks/use-theme-change.ts
index 3607e1b2ab..9b130aec1c 100644
--- a/packages/insomnia/src/ui/hooks/use-theme-change.ts
+++ b/packages/insomnia/src/ui/hooks/use-theme-change.ts
@@ -4,9 +4,7 @@ import * as themes from '../../plugins/misc';
 import { useRootLoaderData } from '../routes/root';
 
 export const useThemeChange = () => {
-  const {
-    settings,
-  } = useRootLoaderData();
+  const { settings } = useRootLoaderData();
   // Handle System Theme change
   useEffect(() => {
     const matches = window.matchMedia('(prefers-color-scheme: dark)');
diff --git a/packages/insomnia/src/ui/hooks/use-vcs-version.ts b/packages/insomnia/src/ui/hooks/use-vcs-version.ts
index bb0869cdc8..07f2bfa70a 100644
--- a/packages/insomnia/src/ui/hooks/use-vcs-version.ts
+++ b/packages/insomnia/src/ui/hooks/use-vcs-version.ts
@@ -12,7 +12,8 @@ export function useActiveRequestSyncVCSVersion() {
   const { requestId } = useParams() as { requestId: string };
 
   useEffect(() => {
-    const isRequestUpdatedFromSync = (changes: ChangeBufferEvent<BaseModel>[]) => changes.find(([, doc, fromSync]) => requestId === doc._id && fromSync);
+    const isRequestUpdatedFromSync = (changes: ChangeBufferEvent<BaseModel>[]) =>
+      changes.find(([, doc, fromSync]) => requestId === doc._id && fromSync);
     database.onChange(changes => isRequestUpdatedFromSync(changes) && setVersion(v => v + 1));
   }, [requestId]);
 
@@ -23,11 +24,10 @@ export function useActiveRequestSyncVCSVersion() {
 // For example, by pulling a new version from the remote, switching branches, etc.
 export function useActiveApiSpecSyncVCSVersion() {
   const [version, setVersion] = useState(0);
-  const {
-    activeApiSpec,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeApiSpec } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
   useEffect(() => {
-    const isRequestUpdatedFromSync = (changes: ChangeBufferEvent<BaseModel>[]) => changes.find(([, doc, fromSync]) => activeApiSpec?._id === doc._id && fromSync);
+    const isRequestUpdatedFromSync = (changes: ChangeBufferEvent<BaseModel>[]) =>
+      changes.find(([, doc, fromSync]) => activeApiSpec?._id === doc._id && fromSync);
     database.onChange(changes => isRequestUpdatedFromSync(changes) && setVersion(v => v + 1));
   }, [activeApiSpec?._id]);
 
@@ -37,8 +37,6 @@ export function useActiveApiSpecSyncVCSVersion() {
 // We use this hook to determine if the active workspace has been updated from the Git VCS
 // For example, by pulling a new version from the remote, switching branches, etc.
 export function useGitVCSVersion() {
-  const {
-    gitRepository,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
-  return ((gitRepository?.cachedGitLastCommitTime + '') + gitRepository?.cachedGitRepositoryBranch) + '';
+  const { gitRepository } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  return gitRepository?.cachedGitLastCommitTime + '' + gitRepository?.cachedGitRepositoryBranch + '';
 }
diff --git a/packages/insomnia/src/ui/hooks/useTimeoutWhen.ts b/packages/insomnia/src/ui/hooks/useTimeoutWhen.ts
index 413f8b0c68..22ace2c16f 100644
--- a/packages/insomnia/src/ui/hooks/useTimeoutWhen.ts
+++ b/packages/insomnia/src/ui/hooks/useTimeoutWhen.ts
@@ -1,4 +1,3 @@
-
 import { useEffect, useRef } from 'react';
 // https://github.com/imbhargav5/rooks/blob/main/src/hooks/useTimeoutWhen.ts
 /**
@@ -9,11 +8,7 @@ import { useEffect, useRef } from 'react';
  * @param timeoutDelayMs Amount of time in ms after which to invoke
  * @param when The condition which when true, sets the timeout
  */
-function useTimeoutWhen(
-  callback_: () => void,
-  timeoutDelayMs = 0,
-  when = true
-): void {
+function useTimeoutWhen(callback_: () => void, timeoutDelayMs = 0, when = true): void {
   const savedRefCallback = useRef<() => any>();
 
   useEffect(() => {
@@ -33,8 +28,7 @@ function useTimeoutWhen(
           window.clearTimeout(timeout);
         };
       }
-        console.warn('useTimeoutWhen: window is undefined.');
-
+      console.warn('useTimeoutWhen: window is undefined.');
     }
     return;
   }, [timeoutDelayMs, when]);
diff --git a/packages/insomnia/src/ui/index.tsx b/packages/insomnia/src/ui/index.tsx
index 01414436c2..804db5787c 100644
--- a/packages/insomnia/src/ui/index.tsx
+++ b/packages/insomnia/src/ui/index.tsx
@@ -2,12 +2,7 @@ import './rendererListeners';
 
 import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
-import {
-  createMemoryRouter,
-  matchPath,
-  Outlet,
-  RouterProvider,
-} from 'react-router-dom';
+import { createMemoryRouter, matchPath, Outlet, RouterProvider } from 'react-router-dom';
 
 import { migrateFromLocalStorage, type SessionData, setSessionData, setVaultSessionData } from '../account/session';
 import {
@@ -86,7 +81,7 @@ async function renderApp() {
         session.email,
         session.symmetricKey,
         session.publicKey,
-        session.encPrivateKey
+        session.encPrivateKey,
       );
       if (insomniaVaultSalt || insomniaVaultKey) {
         await setVaultSessionData(insomniaVaultSalt, insomniaVaultKey);
@@ -140,7 +135,7 @@ async function renderApp() {
             loader: async (...args) => (await import('./routes/git-actions')).loadGitCredentials(...args),
             children: [
               {
-                'path': 'github',
+                path: 'github',
                 loader: async (...args) => (await import('./routes/git-actions')).loadGitHubCredentials(...args),
                 children: [
                   {
@@ -158,7 +153,7 @@ async function renderApp() {
                 ],
               },
               {
-                'path': 'gitlab',
+                path: 'gitlab',
                 loader: async (...args) => (await import('./routes/git-actions')).loadGitLabCredentials(...args),
                 children: [
                   {
@@ -186,24 +181,17 @@ async function renderApp() {
             children: [
               {
                 path: 'scan',
-                action: async (...args) =>
-                  (await import('./routes/import')).scanForResourcesAction(
-                    ...args,
-                  ),
+                action: async (...args) => (await import('./routes/import')).scanForResourcesAction(...args),
               },
               {
                 path: 'resources',
-                action: async (...args) =>
-                  (await import('./routes/import')).importResourcesAction(
-                    ...args,
-                  ),
+                action: async (...args) => (await import('./routes/import')).importResourcesAction(...args),
               },
             ],
           },
           {
             path: 'settings/update',
-            action: async (...args) =>
-              (await import('./routes/actions')).updateSettingsAction(...args),
+            action: async (...args) => (await import('./routes/actions')).updateSettingsAction(...args),
           },
           {
             path: 'untracked-projects',
@@ -213,8 +201,14 @@ async function renderApp() {
             path: 'organization',
             id: '/organization',
             loader: async (...args) => (await import('./routes/organization')).loader(...args),
-            element: <Suspense fallback={<AppLoadingIndicator />}><Organization /></Suspense>,
-            errorElement: <ErrorRoute defaultMessage='A temporarily unexpected error occurred, please reload to try again' />,
+            element: (
+              <Suspense fallback={<AppLoadingIndicator />}>
+                <Organization />
+              </Suspense>
+            ),
+            errorElement: (
+              <ErrorRoute defaultMessage="A temporarily unexpected error occurred, please reload to try again" />
+            ),
             children: [
               {
                 index: true,
@@ -234,8 +228,7 @@ async function renderApp() {
                 children: [
                   {
                     index: true,
-                    loader: async (...args) =>
-                      (await import('./routes/project')).indexLoader(...args),
+                    loader: async (...args) => (await import('./routes/project')).indexLoader(...args),
                   },
                   {
                     path: 'git',
@@ -243,68 +236,46 @@ async function renderApp() {
                       {
                         path: 'init-clone',
                         action: async (...args) =>
-                          (
-                            await import('./routes/git-project-actions')
-                          ).initGitCloneAction(...args),
+                          (await import('./routes/git-project-actions')).initGitCloneAction(...args),
                       },
                       {
                         path: 'clone',
                         action: async (...args) =>
-                          (
-                            await import('./routes/git-project-actions')
-                          ).cloneGitRepoAction(...args),
+                          (await import('./routes/git-project-actions')).cloneGitRepoAction(...args),
                       },
                     ],
                   },
                   {
                     path: 'permissions',
                     loader: async (...args) =>
-                      (
-                        await import('./routes/organization')
-                      ).organizationPermissionsLoader(...args),
+                      (await import('./routes/organization')).organizationPermissionsLoader(...args),
                     shouldRevalidate: data => data.currentParams.organizationId !== data.nextParams.organizationId,
                   },
                   {
                     path: 'storage-rule',
                     loader: async (...args) =>
-                      (
-                        await import('./routes/organization')
-                      ).organizationStorageLoader(...args),
+                      (await import('./routes/organization')).organizationStorageLoader(...args),
                   },
                   {
                     path: 'sync-storage-rule',
                     action: async (...args) =>
-                      (
-                        await import('./routes/organization')
-                      ).syncOrganizationStorageRuleAction(...args),
+                      (await import('./routes/organization')).syncOrganizationStorageRuleAction(...args),
                   },
                   {
                     path: 'sync-projects',
-                    action: async (...args) =>
-                      (
-                        await import('./routes/project')
-                      ).syncProjectsAction(...args),
+                    action: async (...args) => (await import('./routes/project')).syncProjectsAction(...args),
                   },
                   {
                     path: 'ai/access',
-                    action: async (...args) =>
-                      (
-                        await import('./routes/actions')
-                      ).accessAIApiAction(...args),
+                    action: async (...args) => (await import('./routes/actions')).accessAIApiAction(...args),
                   },
                   {
                     path: 'collaborators',
-                    loader: async (...args) =>
-                      (
-                        await import('./routes/invite')
-                      ).collaboratorsListLoader(...args),
+                    loader: async (...args) => (await import('./routes/invite')).collaboratorsListLoader(...args),
                   },
                   {
                     path: 'collaborators-search',
-                    loader: async (...args) =>
-                      (
-                        await import('./routes/invite')
-                      ).collaboratorSearchLoader(...args),
+                    loader: async (...args) => (await import('./routes/invite')).collaboratorSearchLoader(...args),
                   },
                   {
                     path: 'invites',
@@ -313,16 +284,12 @@ async function renderApp() {
                         path: ':invitationId',
                         id: ':invitationId',
                         action: async (...args) =>
-                          (
-                            await import('./routes/invite')
-                          ).updateInvitationRoleAction(...args),
+                          (await import('./routes/invite')).updateInvitationRoleAction(...args),
                         children: [
                           {
                             path: 'reinvite',
                             action: async (...args) =>
-                              (
-                                await import('./routes/invite')
-                              ).reinviteCollaboratorAction(...args),
+                              (await import('./routes/invite')).reinviteCollaboratorAction(...args),
                           },
                         ],
                       },
@@ -338,9 +305,7 @@ async function renderApp() {
                           {
                             path: 'roles',
                             action: async (...args) =>
-                              (
-                                await import('./routes/invite')
-                              ).updateMemberRoleAction(...args),
+                              (await import('./routes/invite')).updateMemberRoleAction(...args),
                           },
                         ],
                       },
@@ -352,8 +317,7 @@ async function renderApp() {
                     children: [
                       {
                         index: true,
-                        loader: async (...args) =>
-                          (await import('./routes/project')).loader(...args),
+                        loader: async (...args) => (await import('./routes/project')).loader(...args),
                         element: (
                           <Suspense fallback={<AppLoadingIndicator />}>
                             <Project />
@@ -362,21 +326,16 @@ async function renderApp() {
                       },
                       {
                         path: 'new',
-                        action: async (...args) =>
-                          (
-                            await import('./routes/actions')
-                          ).createNewProjectAction(...args),
+                        action: async (...args) => (await import('./routes/actions')).createNewProjectAction(...args),
                       },
                       {
                         path: ':projectId',
                         id: '/project/:projectId',
-                        loader: async (...args) =>
-                          (await import('./routes/project')).projectIdLoader(...args),
+                        loader: async (...args) => (await import('./routes/project')).projectIdLoader(...args),
                         children: [
                           {
                             index: true,
-                            loader: async (...args) =>
-                              (await import('./routes/project')).loader(...args),
+                            loader: async (...args) => (await import('./routes/project')).loader(...args),
                             element: (
                               <Suspense fallback={<AppLoadingIndicator />}>
                                 <Project />
@@ -385,38 +344,24 @@ async function renderApp() {
                           },
                           {
                             path: 'list-workspaces',
-                            loader: async (...args) =>
-                              (
-                                await import('./routes/project')
-                              ).listWorkspacesLoader(...args),
+                            loader: async (...args) => (await import('./routes/project')).listWorkspacesLoader(...args),
                           },
                           {
                             path: 'delete',
-                            action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).deleteProjectAction(...args),
+                            action: async (...args) => (await import('./routes/actions')).deleteProjectAction(...args),
                           },
                           {
                             path: 'move',
-                            action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).moveProjectAction(...args),
+                            action: async (...args) => (await import('./routes/actions')).moveProjectAction(...args),
                           },
                           {
                             path: 'move-workspace',
                             action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).moveWorkspaceIntoProjectAction(...args),
+                              (await import('./routes/actions')).moveWorkspaceIntoProjectAction(...args),
                           },
                           {
                             path: 'update',
-                            action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).updateProjectAction(...args),
+                            action: async (...args) => (await import('./routes/actions')).updateProjectAction(...args),
                           },
                           {
                             path: 'git',
@@ -424,9 +369,7 @@ async function renderApp() {
                               {
                                 path: 'clone',
                                 action: async (...args) =>
-                                  (
-                                    await import('./routes/git-actions')
-                                  ).cloneGitRepoAction(...args),
+                                  (await import('./routes/git-actions')).cloneGitRepoAction(...args),
                               },
                               {
                                 path: 'repo',
@@ -538,10 +481,7 @@ async function renderApp() {
                           {
                             path: ':workspaceId',
                             id: ':workspaceId',
-                            loader: async (...args) =>
-                              (
-                                await import('./routes/workspace')
-                              ).workspaceLoader(...args),
+                            loader: async (...args) => (await import('./routes/workspace')).workspaceLoader(...args),
                             element: (
                               <Suspense fallback={<AppLoadingIndicator />}>
                                 <Workspace />
@@ -550,10 +490,7 @@ async function renderApp() {
                             children: [
                               {
                                 path: `${ACTIVITY_DEBUG}/*`,
-                                loader: async (...args) =>
-                                  (await import('./routes/debug')).loader(
-                                    ...args,
-                                  ),
+                                loader: async (...args) => (await import('./routes/debug')).loader(...args),
                                 element: (
                                   <Suspense fallback={<AppLoadingIndicator />}>
                                     <Debug />
@@ -563,147 +500,109 @@ async function renderApp() {
                                   {
                                     path: 'reorder',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).reorderCollectionAction(...args),
+                                      (await import('./routes/actions')).reorderCollectionAction(...args),
                                   },
                                   {
                                     path: 'request-group/:requestGroupId',
                                     id: 'request-group/:requestGroupId',
-                                    loader: async (...args) =>
-                                      (await import('./routes/request-group')).loader(
-                                        ...args,
-                                      ),
+                                    loader: async (...args) => (await import('./routes/request-group')).loader(...args),
                                     element: <Outlet />,
                                   },
                                   {
                                     path: 'request/:requestId',
                                     id: 'request/:requestId',
-                                    loader: async (...args) =>
-                                      (await import('./routes/request')).loader(
-                                        ...args,
-                                      ),
+                                    loader: async (...args) => (await import('./routes/request')).loader(...args),
                                     element: <Outlet />,
                                     children: [
                                       {
                                         path: 'send',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).sendAction(...args),
+                                          (await import('./routes/request')).sendAction(...args),
                                       },
                                       {
                                         path: 'connect',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).connectAction(...args),
+                                          (await import('./routes/request')).connectAction(...args),
                                       },
                                       {
                                         path: 'duplicate',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).duplicateRequestAction(...args),
+                                          (await import('./routes/request')).duplicateRequestAction(...args),
                                       },
                                       {
                                         path: 'update',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).updateRequestAction(...args),
+                                          (await import('./routes/request')).updateRequestAction(...args),
                                       },
                                       {
                                         path: 'update-meta',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).updateRequestMetaAction(...args),
+                                          (await import('./routes/request')).updateRequestMetaAction(...args),
                                       },
                                       {
                                         path: 'response/delete-all',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).deleteAllResponsesAction(...args),
+                                          (await import('./routes/request')).deleteAllResponsesAction(...args),
                                       },
                                       {
                                         path: 'response/delete',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/request')
-                                          ).deleteResponseAction(...args),
+                                          (await import('./routes/request')).deleteResponseAction(...args),
                                       },
                                     ],
                                   },
                                   {
                                     path: 'request/new',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/request')
-                                      ).createRequestAction(...args),
+                                      (await import('./routes/request')).createRequestAction(...args),
                                   },
                                   {
                                     path: 'request/new-mock-send',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/request')
-                                      ).createAndSendToMockbinAction(...args),
+                                      (await import('./routes/request')).createAndSendToMockbinAction(...args),
                                   },
                                   {
                                     path: 'request/delete',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/request')
-                                      ).deleteRequestAction(...args),
+                                      (await import('./routes/request')).deleteRequestAction(...args),
                                   },
                                   {
                                     path: 'request-group/new',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/request-group')
-                                      ).createRequestGroupAction(...args),
+                                      (await import('./routes/request-group')).createRequestGroupAction(...args),
                                   },
                                   {
                                     path: 'request-group/delete',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/request-group')
-                                      ).deleteRequestGroupAction(...args),
+                                      (await import('./routes/request-group')).deleteRequestGroupAction(...args),
                                   },
                                   {
                                     path: 'request-group/:requestGroupId/update',
-                                    action: async (...args) => (await import('./routes/request-group')).updateRequestGroupAction(...args),
+                                    action: async (...args) =>
+                                      (await import('./routes/request-group')).updateRequestGroupAction(...args),
                                   },
                                   {
                                     path: 'request-group/duplicate',
-                                    action: async (...args) => (await import('./routes/request-group')).duplicateRequestGroupAction(...args),
+                                    action: async (...args) =>
+                                      (await import('./routes/request-group')).duplicateRequestGroupAction(...args),
                                   },
                                   {
                                     path: 'request-group/:requestGroupId/update-meta',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/request-group')
-                                      ).updateRequestGroupMetaAction(...args),
+                                      (await import('./routes/request-group')).updateRequestGroupMetaAction(...args),
                                   },
                                   {
                                     path: 'runner',
                                     loader: async (...args) =>
-                                      (
-                                        await import('./routes/runner')
-                                      ).collectionRunnerStatusLoader(...args),
+                                      (await import('./routes/runner')).collectionRunnerStatusLoader(...args),
                                     element: <Outlet />,
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/runner')
-                                      ).runCollectionAction(...args),
+                                      (await import('./routes/runner')).runCollectionAction(...args),
                                     children: [
                                       {
                                         path: 'run',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/runner')
-                                          ).runCollectionAction(...args),
+                                          (await import('./routes/runner')).runCollectionAction(...args),
                                       },
                                     ],
                                   },
@@ -711,10 +610,7 @@ async function renderApp() {
                               },
                               {
                                 path: `${ACTIVITY_SPEC}`,
-                                loader: async (...args) =>
-                                  (await import('./routes/design')).loader(
-                                    ...args,
-                                  ),
+                                loader: async (...args) => (await import('./routes/design')).loader(...args),
                                 element: (
                                   <Suspense fallback={<AppLoadingIndicator />}>
                                     <Design />
@@ -724,28 +620,19 @@ async function renderApp() {
                                   {
                                     path: 'update',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).updateApiSpecAction(...args),
+                                      (await import('./routes/actions')).updateApiSpecAction(...args),
                                   },
                                   {
                                     path: 'generate-request-collection',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).generateCollectionFromApiSpecAction(
-                                        ...args,
-                                      ),
+                                      (await import('./routes/actions')).generateCollectionFromApiSpecAction(...args),
                                   },
                                 ],
                               },
                               {
                                 path: 'mock-server/*',
                                 id: 'mock-server',
-                                loader: async (...args) =>
-                                  (await import('./routes/mock-server')).loader(
-                                    ...args,
-                                  ),
+                                loader: async (...args) => (await import('./routes/mock-server')).loader(...args),
                                 element: (
                                   <Suspense fallback={<AppLoadingIndicator />}>
                                     <MockServer />
@@ -755,9 +642,7 @@ async function renderApp() {
                                   {
                                     path: 'update',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).updateMockServerAction(...args),
+                                      (await import('./routes/actions')).updateMockServerAction(...args),
                                   },
                                   {
                                     path: 'mock-route',
@@ -767,31 +652,23 @@ async function renderApp() {
                                         path: ':mockRouteId',
                                         id: ':mockRouteId',
                                         loader: async (...args) =>
-                                          (
-                                            await import('./routes/mock-route')
-                                          ).loader(...args),
+                                          (await import('./routes/mock-route')).loader(...args),
                                         element: <Outlet />,
                                       },
                                       {
                                         path: 'new',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/actions')
-                                          ).createMockRouteAction(...args),
+                                          (await import('./routes/actions')).createMockRouteAction(...args),
                                       },
                                       {
                                         path: ':mockRouteId/update',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/actions')
-                                          ).updateMockRouteAction(...args),
+                                          (await import('./routes/actions')).updateMockRouteAction(...args),
                                       },
                                       {
                                         path: ':mockRouteId/delete',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/actions')
-                                          ).deleteMockRouteAction(...args),
+                                          (await import('./routes/actions')).deleteMockRouteAction(...args),
                                       },
                                     ],
                                   },
@@ -811,23 +688,17 @@ async function renderApp() {
                                   {
                                     path: 'new',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).createNewCaCertificateAction(...args),
+                                      (await import('./routes/actions')).createNewCaCertificateAction(...args),
                                   },
                                   {
                                     path: 'update',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).updateCaCertificateAction(...args),
+                                      (await import('./routes/actions')).updateCaCertificateAction(...args),
                                   },
                                   {
                                     path: 'delete',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).deleteCaCertificateAction(...args),
+                                      (await import('./routes/actions')).deleteCaCertificateAction(...args),
                                   },
                                 ],
                               },
@@ -837,23 +708,17 @@ async function renderApp() {
                                   {
                                     path: 'new',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).createNewClientCertificateAction(...args),
+                                      (await import('./routes/actions')).createNewClientCertificateAction(...args),
                                   },
                                   {
                                     path: 'update',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).updateClientCertificateAction(...args),
+                                      (await import('./routes/actions')).updateClientCertificateAction(...args),
                                   },
                                   {
                                     path: 'delete',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).deleteClientCertificateAction(...args),
+                                      (await import('./routes/actions')).deleteClientCertificateAction(...args),
                                   },
                                 ],
                               },
@@ -863,44 +728,32 @@ async function renderApp() {
                                   {
                                     path: 'update',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).updateEnvironment(...args),
+                                      (await import('./routes/actions')).updateEnvironment(...args),
                                   },
                                   {
                                     path: 'delete',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).deleteEnvironmentAction(...args),
+                                      (await import('./routes/actions')).deleteEnvironmentAction(...args),
                                   },
                                   {
                                     path: 'create',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).createEnvironmentAction(...args),
+                                      (await import('./routes/actions')).createEnvironmentAction(...args),
                                   },
                                   {
                                     path: 'duplicate',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).duplicateEnvironmentAction(...args),
+                                      (await import('./routes/actions')).duplicateEnvironmentAction(...args),
                                   },
                                   {
                                     path: 'set-active',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).setActiveEnvironmentAction(...args),
+                                      (await import('./routes/actions')).setActiveEnvironmentAction(...args),
                                   },
                                   {
                                     path: 'set-active-global',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).setActiveGlobalEnvironmentAction(...args),
+                                      (await import('./routes/actions')).setActiveGlobalEnvironmentAction(...args),
                                   },
                                 ],
                               },
@@ -910,18 +763,13 @@ async function renderApp() {
                                   {
                                     path: 'update',
                                     action: async (...args) =>
-                                      (
-                                        await import('./routes/actions')
-                                      ).updateCookieJarAction(...args),
+                                      (await import('./routes/actions')).updateCookieJarAction(...args),
                                   },
                                 ],
                               },
                               {
                                 path: 'test/*',
-                                loader: async (...args) =>
-                                  (await import('./routes/unit-test')).loader(
-                                    ...args,
-                                  ),
+                                loader: async (...args) => (await import('./routes/unit-test')).loader(...args),
                                 element: (
                                   <Suspense fallback={<AppLoadingIndicator />}>
                                     <UnitTest />
@@ -932,9 +780,7 @@ async function renderApp() {
                                     index: true,
                                     element: <Outlet />,
                                     loader: async (...args) =>
-                                      (
-                                        await import('./routes/test-suite')
-                                      ).indexLoader(...args),
+                                      (await import('./routes/test-suite')).indexLoader(...args),
                                   },
                                   {
                                     path: 'test-suite',
@@ -943,35 +789,25 @@ async function renderApp() {
                                         index: true,
                                         element: <Outlet />,
                                         loader: async (...args) =>
-                                          (
-                                            await import('./routes/test-suite')
-                                          ).indexLoader(...args),
+                                          (await import('./routes/test-suite')).indexLoader(...args),
                                       },
                                       {
                                         path: 'new',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/actions')
-                                          ).createNewTestSuiteAction(...args),
+                                          (await import('./routes/actions')).createNewTestSuiteAction(...args),
                                       },
                                       {
                                         path: ':testSuiteId',
                                         id: ':testSuiteId',
                                         element: <Outlet />,
                                         loader: async (...args) =>
-                                          (
-                                            await import('./routes/test-suite')
-                                          ).loader(...args),
+                                          (await import('./routes/test-suite')).loader(...args),
                                         children: [
                                           {
                                             index: true,
                                             element: <Outlet />,
                                             loader: async (...args) =>
-                                              (
-                                                await import(
-                                                  './routes/test-results'
-                                                )
-                                              ).indexLoader(...args),
+                                              (await import('./routes/test-results')).indexLoader(...args),
                                           },
                                           {
                                             path: 'test-result',
@@ -980,34 +816,24 @@ async function renderApp() {
                                                 path: ':testResultId',
                                                 id: ':testResultId',
                                                 loader: async (...args) =>
-                                                  (
-                                                    await import(
-                                                      './routes/test-results'
-                                                    )
-                                                  ).loader(...args),
+                                                  (await import('./routes/test-results')).loader(...args),
                                               },
                                             ],
                                           },
                                           {
                                             path: 'delete',
                                             action: async (...args) =>
-                                              (
-                                                await import('./routes/actions')
-                                              ).deleteTestSuiteAction(...args),
+                                              (await import('./routes/actions')).deleteTestSuiteAction(...args),
                                           },
                                           {
                                             path: 'update',
                                             action: async (...args) =>
-                                              (
-                                                await import('./routes/actions')
-                                              ).updateTestSuiteAction(...args),
+                                              (await import('./routes/actions')).updateTestSuiteAction(...args),
                                           },
                                           {
                                             path: 'run-all-tests',
                                             action: async (...args) =>
-                                              (
-                                                await import('./routes/actions')
-                                              ).runAllTestsAction(...args),
+                                              (await import('./routes/actions')).runAllTestsAction(...args),
                                           },
                                           {
                                             path: 'test',
@@ -1015,11 +841,7 @@ async function renderApp() {
                                               {
                                                 path: 'new',
                                                 action: async (...args) =>
-                                                  (
-                                                    await import(
-                                                      './routes/actions'
-                                                    )
-                                                  ).createNewTestAction(...args),
+                                                  (await import('./routes/actions')).createNewTestAction(...args),
                                               },
                                               {
                                                 path: ':testId',
@@ -1027,29 +849,17 @@ async function renderApp() {
                                                   {
                                                     path: 'delete',
                                                     action: async (...args) =>
-                                                      (
-                                                        await import(
-                                                          './routes/actions'
-                                                        )
-                                                      ).deleteTestAction(...args),
+                                                      (await import('./routes/actions')).deleteTestAction(...args),
                                                   },
                                                   {
                                                     path: 'update',
                                                     action: async (...args) =>
-                                                      (
-                                                        await import(
-                                                          './routes/actions'
-                                                        )
-                                                      ).updateTestAction(...args),
+                                                      (await import('./routes/actions')).updateTestAction(...args),
                                                   },
                                                   {
                                                     path: 'run',
                                                     action: async (...args) =>
-                                                      (
-                                                        await import(
-                                                          './routes/actions'
-                                                        )
-                                                      ).runTestAction(...args),
+                                                      (await import('./routes/actions')).runTestAction(...args),
                                                   },
                                                 ],
                                               },
@@ -1070,18 +880,12 @@ async function renderApp() {
                                       {
                                         path: 'collection-and-tests',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/actions')
-                                          ).generateCollectionAndTestsAction(
-                                            ...args,
-                                          ),
+                                          (await import('./routes/actions')).generateCollectionAndTestsAction(...args),
                                       },
                                       {
                                         path: 'tests',
                                         action: async (...args) =>
-                                          (
-                                            await import('./routes/actions')
-                                          ).generateTestsAction(...args),
+                                          (await import('./routes/actions')).generateTestsAction(...args),
                                       },
                                     ],
                                   },
@@ -1090,9 +894,7 @@ async function renderApp() {
                               {
                                 path: 'duplicate',
                                 action: async (...args) =>
-                                  (
-                                    await import('./routes/actions')
-                                  ).duplicateWorkspaceAction(...args),
+                                  (await import('./routes/actions')).duplicateWorkspaceAction(...args),
                               },
                               {
                                 path: 'git',
@@ -1206,11 +1008,13 @@ async function renderApp() {
                                   },
                                   {
                                     path: 'stage',
-                                    action: async (...args) => (await import('./routes/remote-collections')).stageChangesAction(...args),
+                                    action: async (...args) =>
+                                      (await import('./routes/remote-collections')).stageChangesAction(...args),
                                   },
                                   {
                                     path: 'unstage',
-                                    action: async (...args) => (await import('./routes/remote-collections')).unstageChangesAction(...args),
+                                    action: async (...args) =>
+                                      (await import('./routes/remote-collections')).unstageChangesAction(...args),
                                   },
                                   {
                                     path: 'pull',
@@ -1248,7 +1052,9 @@ async function renderApp() {
                                       {
                                         path: 'fetch',
                                         action: async (...args) =>
-                                          (await import('./routes/remote-collections')).fetchRemoteBranchAction(...args),
+                                          (await import('./routes/remote-collections')).fetchRemoteBranchAction(
+                                            ...args,
+                                          ),
                                       },
                                       {
                                         path: 'delete',
@@ -1268,7 +1074,9 @@ async function renderApp() {
                                       {
                                         path: 'create-snapshot-and-push',
                                         action: async (...args) =>
-                                          (await import('./routes/remote-collections')).createSnapshotAndPushAction(...args),
+                                          (await import('./routes/remote-collections')).createSnapshotAndPushAction(
+                                            ...args,
+                                          ),
                                       },
                                       {
                                         path: 'rollback',
@@ -1281,53 +1089,41 @@ async function renderApp() {
                               },
                               {
                                 path: 'toggle-expand-all',
-                                action: async (...args) => (await import('./routes/actions')).toggleExpandAllRequestGroupsAction(...args),
+                                action: async (...args) =>
+                                  (await import('./routes/actions')).toggleExpandAllRequestGroupsAction(...args),
                               },
                             ],
                           },
                           {
                             path: 'new',
                             action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).createNewWorkspaceAction(...args),
+                              (await import('./routes/actions')).createNewWorkspaceAction(...args),
                           },
                           {
                             path: 'delete',
                             action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).deleteWorkspaceAction(...args),
+                              (await import('./routes/actions')).deleteWorkspaceAction(...args),
                           },
                           {
                             path: 'update',
                             action: async (...args) =>
-                              (
-                                await import('./routes/actions')
-                              ).updateWorkspaceAction(...args),
+                              (await import('./routes/actions')).updateWorkspaceAction(...args),
                           },
                           {
                             path: ':workspaceId/update-meta',
                             action: async (...args) =>
-                              (await import('./routes/actions')).updateWorkspaceMetaAction(
-                                ...args
-                              ),
+                              (await import('./routes/actions')).updateWorkspaceMetaAction(...args),
                           },
                         ],
                       },
                       {
                         path: ':projectId/remote-collections',
-                        loader: async (...args) =>
-                          (
-                            await import('./routes/remote-collections')
-                          ).remoteLoader(...args),
+                        loader: async (...args) => (await import('./routes/remote-collections')).remoteLoader(...args),
                         children: [
                           {
                             path: 'pull',
                             action: async (...args) =>
-                              (
-                                await import('./routes/remote-collections')
-                              ).pullRemoteCollectionAction(...args),
+                              (await import('./routes/remote-collections')).pullRemoteCollectionAction(...args),
                           },
                         ],
                       },
@@ -1339,10 +1135,14 @@ async function renderApp() {
           },
           {
             path: 'auth',
-            element: <Suspense fallback={<AppLoadingIndicator />}>
-              <Auth />
-            </Suspense>,
-            errorElement: <ErrorRoute defaultMessage='A temporarily unexpected error occurred, please reload to try again' />,
+            element: (
+              <Suspense fallback={<AppLoadingIndicator />}>
+                <Auth />
+              </Suspense>
+            ),
+            errorElement: (
+              <ErrorRoute defaultMessage="A temporarily unexpected error occurred, please reload to try again" />
+            ),
             children: [
               {
                 path: 'login',
@@ -1385,7 +1185,7 @@ async function renderApp() {
     ],
     {
       initialEntries: [initialEntry],
-    }
+    },
   );
 
   // Store the last location in local storage
@@ -1395,7 +1195,7 @@ async function renderApp() {
         path: '/organization/:organizationId',
         end: false,
       },
-      location.pathname
+      location.pathname,
     );
     const nextRoute = navigation.location?.pathname;
     const currentRoute = location.pathname;
@@ -1407,13 +1207,12 @@ async function renderApp() {
       window.main.trackPageView({ name: routeWithoutUUID });
     }
 
-    match?.params.organizationId && localStorage.setItem(`locationHistoryEntry:${match.params.organizationId}`, currentRoute);
+    match?.params.organizationId &&
+      localStorage.setItem(`locationHistoryEntry:${match.params.organizationId}`, currentRoute);
     match?.params.organizationId && localStorage.setItem('lastVisitedOrganizationId', match.params.organizationId);
   });
 
-  ReactDOM.createRoot(root).render(
-    <RouterProvider router={router} />
-  );
+  ReactDOM.createRoot(root).render(<RouterProvider router={router} />);
 }
 
 renderApp();
diff --git a/packages/insomnia/src/ui/insomniaFetch.ts b/packages/insomnia/src/ui/insomniaFetch.ts
index 4c9ac789b9..ab72c8cb2e 100644
--- a/packages/insomnia/src/ui/insomniaFetch.ts
+++ b/packages/insomnia/src/ui/insomniaFetch.ts
@@ -1,4 +1,3 @@
-
 import { getApiBaseURL, getClientString, INSOMNIA_FETCH_TIME_OUT, PLAYWRIGHT } from '../common/constants';
 import { generateId } from '../common/misc';
 
@@ -61,9 +60,7 @@ export async function insomniaFetch<T = void>({
     if (uri) {
       window.main.openDeepLink(uri);
     }
-    const isJson =
-      response.headers.get('content-type')?.includes('application/json') ||
-      path.match(/\.json$/);
+    const isJson = response.headers.get('content-type')?.includes('application/json') || path.match(/\.json$/);
     if (onlyResolveOnSuccess && !response.ok) {
       let errMsg = '';
       if (isJson) {
diff --git a/packages/insomnia/src/ui/rendererListeners.ts b/packages/insomnia/src/ui/rendererListeners.ts
index 59488dd771..bb10c40f64 100644
--- a/packages/insomnia/src/ui/rendererListeners.ts
+++ b/packages/insomnia/src/ui/rendererListeners.ts
@@ -1,4 +1,3 @@
-
 import { isDevelopment } from '../common/constants';
 import { database } from '../common/database';
 import * as models from '../models';
@@ -50,7 +49,8 @@ if (isDevelopment()) {
           const promises = models
             .types()
             .filter(t => t !== models.settings.type) // don't clear settings
-            .reverse().map(async type => {
+            .reverse()
+            .map(async type => {
               console.log(`[developer] clearing all "${type}" entities`);
               const allEntities = await database.all(type);
               await database.batchModifyDocs({ remove: allEntities });
diff --git a/packages/insomnia/src/ui/routes/actions.tsx b/packages/insomnia/src/ui/routes/actions.tsx
index 1ade44fb76..3061f48ff1 100644
--- a/packages/insomnia/src/ui/routes/actions.tsx
+++ b/packages/insomnia/src/ui/routes/actions.tsx
@@ -25,7 +25,10 @@ import type { UnitTestSuite } from '../../models/unit-test-suite';
 import { isCollection, isEnvironment, scopeToActivity, type Workspace } from '../../models/workspace';
 import type { WorkspaceMeta } from '../../models/workspace-meta';
 import { getSendRequestCallback } from '../../network/unit-test-feature';
-import { initializeLocalBackendProjectAndMarkForSync, pushSnapshotOnInitialize } from '../../sync/vcs/initialize-backend-project';
+import {
+  initializeLocalBackendProjectAndMarkForSync,
+  pushSnapshotOnInitialize,
+} from '../../sync/vcs/initialize-backend-project';
 import { VCSInstance } from '../../sync/vcs/insomnia-sync';
 import { insomniaFetch } from '../../ui/insomniaFetch';
 import { invariant } from '../../utils/invariant';
@@ -36,7 +39,7 @@ import { SpectralRunner } from '../worker/spectral-handler';
 export const createNewProjectAction: ActionFunction = async ({ request, params }) => {
   const { organizationId } = params;
   invariant(organizationId, 'Organization ID is required');
-  const newProjectData = await request.json() as {
+  const newProjectData = (await request.json()) as {
     name: string;
     storageType: 'local' | 'remote' | 'git';
     authorName: string;
@@ -77,13 +80,16 @@ export const createNewProjectAction: ActionFunction = async ({ request, params }
   }
 
   try {
-    const newCloudProject = await insomniaFetch<{
-      id: string;
-      name: string;
-    } | {
-      error: string;
-      message?: string;
-    }>({
+    const newCloudProject = await insomniaFetch<
+      | {
+          id: string;
+          name: string;
+        }
+      | {
+          error: string;
+          message?: string;
+        }
+    >({
       path: `/v1/organizations/${organizationId}/team-projects`,
       method: 'POST',
       data: {
@@ -122,7 +128,10 @@ export const createNewProjectAction: ActionFunction = async ({ request, params }
   } catch (err) {
     console.log(err);
     return {
-      error: err instanceof Error ? err.message : `An unexpected error occurred while creating the project. Please try again. ${err}`,
+      error:
+        err instanceof Error
+          ? err.message
+          : `An unexpected error occurred while creating the project. Please try again. ${err}`,
     };
   }
 };
@@ -132,10 +141,7 @@ export interface UpdateProjectActionResult {
   success?: boolean;
 }
 
-export const updateProjectAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const updateProjectAction: ActionFunction = async ({ request, params }) => {
   const { name, storageType, ...projectData } = await request.json();
 
   invariant(typeof name === 'string', 'Name is required');
@@ -225,13 +231,16 @@ export const updateProjectAction: ActionFunction = async ({
     }
     // convert from local/git to cloud
     if (storageType === 'remote' && !project.remoteId) {
-      const newCloudProject = await insomniaFetch<{
-        id: string;
-        name: string;
-      } | {
-        error: string;
-        message?: string;
-      }>({
+      const newCloudProject = await insomniaFetch<
+        | {
+            id: string;
+            name: string;
+          }
+        | {
+            error: string;
+            message?: string;
+          }
+      >({
         path: `/v1/organizations/${organizationId}/team-projects`,
         method: 'POST',
         data: {
@@ -262,7 +271,7 @@ export const updateProjectAction: ActionFunction = async ({
       if (project.gitRepositoryId) {
         const gitRepository = await models.gitRepository.getById(project.gitRepositoryId);
 
-        gitRepository && await models.gitRepository.remove(gitRepository);
+        gitRepository && (await models.gitRepository.remove(gitRepository));
       }
 
       await models.project.update(project, { name, remoteId: newCloudProject.id, gitRepositoryId: null });
@@ -337,7 +346,7 @@ export const updateProjectAction: ActionFunction = async ({
     if (storageType === 'local' && project.gitRepositoryId) {
       const gitRepository = await models.gitRepository.getById(project.gitRepositoryId);
 
-      gitRepository && await models.gitRepository.remove(gitRepository);
+      gitRepository && (await models.gitRepository.remove(gitRepository));
       await models.project.update(project, { name, gitRepositoryId: null });
 
       return {
@@ -351,11 +360,13 @@ export const updateProjectAction: ActionFunction = async ({
     return {
       success: true,
     };
-
   } catch (err) {
     console.log(err);
     return {
-      error: err instanceof Error ? err.message : `An unexpected error occurred while renaming the project. Please try again. ${err}`,
+      error:
+        err instanceof Error
+          ? err.message
+          : `An unexpected error occurred while renaming the project. Please try again. ${err}`,
     };
   }
 };
@@ -385,14 +396,17 @@ export const deleteProjectAction: ActionFunction = async ({ params }) => {
 
       if (response && 'error' in response) {
         return {
-          error: response.error === 'FORBIDDEN' ? 'You do not have permission to delete this project.' : 'An unexpected error occurred while deleting the project. Please try again.',
+          error:
+            response.error === 'FORBIDDEN'
+              ? 'You do not have permission to delete this project.'
+              : 'An unexpected error occurred while deleting the project. Please try again.',
         };
       }
     }
 
     if (project.gitRepositoryId) {
       const gitRepository = await models.gitRepository.getById(project.gitRepositoryId);
-      gitRepository && await models.gitRepository.remove(gitRepository);
+      gitRepository && (await models.gitRepository.remove(gitRepository));
     }
 
     await models.stats.incrementDeletedRequestsForDescendents(project);
@@ -403,7 +417,10 @@ export const deleteProjectAction: ActionFunction = async ({ params }) => {
   } catch (err) {
     console.log(err);
     return {
-      error: err instanceof Error ? err.message : `An unexpected error occurred while deleting the project. Please try again. ${err}`,
+      error:
+        err instanceof Error
+          ? err.message
+          : `An unexpected error occurred while deleting the project. Please try again. ${err}`,
     };
   }
 };
@@ -445,10 +462,7 @@ export function safeToUseInsomniaFileNameWithExt(fileName: string) {
 }
 
 // Workspace
-export const createNewWorkspaceAction: ActionFunction = async ({
-  params,
-  request,
-}) => {
+export const createNewWorkspaceAction: ActionFunction = async ({ params, request }) => {
   const { organizationId, projectId } = params;
   invariant(organizationId, 'Organization ID is required');
   invariant(projectId, 'Project ID is required');
@@ -464,7 +478,10 @@ export const createNewWorkspaceAction: ActionFunction = async ({
   invariant(typeof name === 'string', 'Name is required');
 
   const scope = formData.get('scope');
-  invariant(scope === 'design' || scope === 'collection' || scope === 'mock-server' || scope === 'environment', 'Scope is required');
+  invariant(
+    scope === 'design' || scope === 'collection' || scope === 'mock-server' || scope === 'environment',
+    'Scope is required',
+  );
 
   const flushId = await database.bufferChanges();
 
@@ -523,7 +540,9 @@ export const createNewWorkspaceAction: ActionFunction = async ({
     window.main.trackSegmentEvent({
       event: SegmentEvent.mockCreate,
     });
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/${scopeToActivity(workspace.scope)}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/${scopeToActivity(workspace.scope)}`,
+    );
   }
 
   if (scope === 'design') {
@@ -566,21 +585,29 @@ export const createNewWorkspaceAction: ActionFunction = async ({
 
   if (withRequest) {
     const settings = await models.settings.getOrCreate();
-    const defaultHeaders = settings.disableAppVersionUserAgent ? [] : [{ name: 'User-Agent', value: `insomnia/${version}` }];
+    const defaultHeaders = settings.disableAppVersionUserAgent
+      ? []
+      : [{ name: 'User-Agent', value: `insomnia/${version}` }];
 
-    const activeRequestId = (await models.request.create({
-      parentId: workspace._id,
-      method: METHOD_GET,
-      name: 'My first request',
-      headers: defaultHeaders,
-    }))._id;
+    const activeRequestId = (
+      await models.request.create({
+        parentId: workspace._id,
+        method: METHOD_GET,
+        name: 'My first request',
+        headers: defaultHeaders,
+      })
+    )._id;
 
     window.main.trackSegmentEvent({ event: SegmentEvent.requestCreate, properties: { requestType: 'HTTP' } });
 
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request/${activeRequestId}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/debug/request/${activeRequestId}`,
+    );
   }
 
-  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/${scopeToActivity(workspace.scope)}`);
+  return redirect(
+    `/organization/${organizationId}/project/${projectId}/workspace/${workspace._id}/${scopeToActivity(workspace.scope)}`,
+  );
 };
 
 async function deleteWorkspaceFromCloud(workspace: Workspace, project: Project) {
@@ -594,7 +621,10 @@ async function deleteWorkspaceFromCloud(workspace: Workspace, project: Project)
       await vcs.archiveProject();
     } catch (err) {
       return {
-        error: err instanceof Error ? err.message : `An unexpected error occurred while deleting the workspace. Please try again. ${err}`,
+        error:
+          err instanceof Error
+            ? err.message
+            : `An unexpected error occurred while deleting the workspace. Please try again. ${err}`,
       };
     }
   }
@@ -607,10 +637,7 @@ async function deleteWorkspaceFromLocal(workspace: Workspace) {
   await models.workspace.remove(workspace);
 }
 
-async function deleteWorkspace(
-  workspace: Workspace | null,
-  project: Project | null,
-) {
+async function deleteWorkspace(workspace: Workspace | null, project: Project | null) {
   invariant(workspace, 'Workspace not found');
   invariant(project, 'Project not found');
 
@@ -624,10 +651,7 @@ async function deleteWorkspace(
   return null;
 }
 
-export const deleteWorkspaceAction: ActionFunction = async ({
-  params,
-  request,
-}) => {
+export const deleteWorkspaceAction: ActionFunction = async ({ params, request }) => {
   const { organizationId, projectId } = params;
   invariant(projectId, 'projectId is required');
 
@@ -657,10 +681,7 @@ async function duplicateWorkspace(
 ) {
   invariant(workspace, 'Workspace not found');
   invariant(duplicateToProject, 'Project not found');
-  async function duplicate(
-    workspace: Workspace,
-    { name, parentId }: Pick<Workspace, 'name' | 'parentId'>,
-  ) {
+  async function duplicate(workspace: Workspace, { name, parentId }: Pick<Workspace, 'name' | 'parentId'>) {
     const newWorkspace = await db.duplicate(workspace, {
       name,
       parentId,
@@ -729,10 +750,11 @@ export const duplicateWorkspaceAction: ActionFunction = async ({ request }) => {
   invariant(oldWorkspace, 'Workspace not found');
 
   // duplicate the workspace to the new project
-  const newProject = await models.project.getById(newProjectId) as Project;
+  const newProject = (await models.project.getById(newProjectId)) as Project;
   const newWorkspace = await duplicateWorkspace(oldWorkspace, newProject, newWorkspaceName || oldWorkspace.name, true);
-  return redirect(`/organization/${newOrgId}/project/${newProjectId}/workspace/${newWorkspace._id}/${scopeToActivity(newWorkspace.scope)}`);
-
+  return redirect(
+    `/organization/${newOrgId}/project/${newProjectId}/workspace/${newWorkspace._id}/${scopeToActivity(newWorkspace.scope)}`,
+  );
 };
 
 export const updateWorkspaceAction: ActionFunction = async ({ request }) => {
@@ -800,9 +822,7 @@ export const updateWorkspaceAction: ActionFunction = async ({ request }) => {
 };
 
 export const moveWorkspaceIntoProjectAction: ActionFunction = async ({ request, params }) => {
-  const {
-    organizationId,
-  } = params;
+  const { organizationId } = params;
 
   invariant(typeof organizationId === 'string', 'Organization ID is required');
 
@@ -827,16 +847,13 @@ export const moveWorkspaceIntoProjectAction: ActionFunction = async ({ request,
 export const updateWorkspaceMetaAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
-  const patch = await request.json() as Partial<WorkspaceMeta>;
+  const patch = (await request.json()) as Partial<WorkspaceMeta>;
   await models.workspaceMeta.updateByParentId(workspaceId, patch);
   return null;
 };
 
 // Test Suite
-export const createNewTestSuiteAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const createNewTestSuiteAction: ActionFunction = async ({ request, params }) => {
   const { organizationId, workspaceId, projectId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
   const formData = await request.formData();
@@ -850,7 +867,9 @@ export const createNewTestSuiteAction: ActionFunction = async ({
 
   window.main.trackSegmentEvent({ event: SegmentEvent.testSuiteCreate });
 
-  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}`);
+  return redirect(
+    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}`,
+  );
 };
 
 export const deleteTestSuiteAction: ActionFunction = async ({ params }) => {
@@ -870,19 +889,13 @@ export const deleteTestSuiteAction: ActionFunction = async ({ params }) => {
   return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test`);
 };
 
-export const runAllTestsAction: ActionFunction = async ({
-  params,
-}) => {
+export const runAllTestsAction: ActionFunction = async ({ params }) => {
   const { organizationId, projectId, workspaceId, testSuiteId } = params;
   invariant(typeof projectId === 'string', 'Project ID is required');
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
   invariant(typeof testSuiteId === 'string', 'Test Suite ID is required');
 
-  const unitTests = await database.find<UnitTest>(
-    models.unitTest.type,
-    { parentId: testSuiteId },
-    { metaSortKey: 1 }
-  );
+  const unitTests = await database.find<UnitTest>(models.unitTest.type, { parentId: testSuiteId }, { metaSortKey: 1 });
   invariant(unitTests, 'No unit tests found');
 
   const tests: Test[] = unitTests
@@ -922,37 +935,39 @@ export const runAllTestsAction: ActionFunction = async ({
     });
     window.main.trackSegmentEvent({ event: SegmentEvent.unitTestRun });
 
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`,
+    );
   } catch (err) {
     // create a result manually so that it can be displayed in the UI
     results.stats.failures = 1;
     results.stats.tests = 1;
-    results.tests.push(
-      {
-        currentRetry: 0,
-        duration: 0,
-        err: {
-          actual: undefined,
-          expected: undefined,
-          message: err.toString(),
-          multiple: [],
-          operator: undefined,
-          showDiff: false,
-          stack: '',
-        },
-        file: '',
-        fullTitle: 'Test Error',
-        id: '',
-        title: 'Test Error',
+    results.tests.push({
+      currentRetry: 0,
+      duration: 0,
+      err: {
+        actual: undefined,
+        expected: undefined,
+        message: err.toString(),
+        multiple: [],
+        operator: undefined,
+        showDiff: false,
+        stack: '',
       },
-    );
+      file: '',
+      fullTitle: 'Test Error',
+      id: '',
+      title: 'Test Error',
+    });
     const testResult = await models.unitTestResult.create({
       results,
       parentId: workspaceId,
     });
     window.main.trackSegmentEvent({ event: SegmentEvent.unitTestRun });
 
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`,
+    );
   }
 };
 
@@ -962,7 +977,7 @@ export const updateTestSuiteAction: ActionFunction = async ({ request, params })
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
   invariant(typeof projectId === 'string', 'Project ID is required');
 
-  const data = await request.json() as Partial<UnitTestSuite>;
+  const data = (await request.json()) as Partial<UnitTestSuite>;
 
   const unitTestSuite = await database.getWhere<UnitTestSuite>(models.unitTestSuite.type, {
     _id: testSuiteId,
@@ -1014,7 +1029,7 @@ export const deleteTestAction: ActionFunction = async ({ params }) => {
 
 export const updateTestAction: ActionFunction = async ({ request, params }) => {
   const { testId } = params;
-  const data = await request.json() as Partial<UnitTest>;
+  const data = (await request.json()) as Partial<UnitTest>;
 
   const unitTest = await database.getWhere<UnitTest>(models.unitTest.type, {
     _id: testId,
@@ -1071,45 +1086,44 @@ export const runTestAction: ActionFunction = async ({ params }) => {
     });
     window.main.trackSegmentEvent({ event: SegmentEvent.unitTestRun });
 
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`,
+    );
   } catch (error) {
     // create a result manually so that it can be displayed in the UI
     results.stats.failures = 1;
     results.stats.tests = 1;
-    results.tests.push(
-      {
-        currentRetry: 0,
-        duration: 0,
-        err: {
-          actual: undefined,
-          expected: undefined,
-          message: error.toString(),
-          multiple: [],
-          operator: undefined,
-          showDiff: false,
-          stack: '',
-        },
-        file: '',
-        fullTitle: unitTest.name,
-        id: '',
-        title: unitTest.name,
+    results.tests.push({
+      currentRetry: 0,
+      duration: 0,
+      err: {
+        actual: undefined,
+        expected: undefined,
+        message: error.toString(),
+        multiple: [],
+        operator: undefined,
+        showDiff: false,
+        stack: '',
       },
-    );
+      file: '',
+      fullTitle: unitTest.name,
+      id: '',
+      title: unitTest.name,
+    });
     const testResult = await models.unitTestResult.create({
       results,
       parentId: unitTest.parentId,
     });
     window.main.trackSegmentEvent({ event: SegmentEvent.unitTestRun });
 
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`,
+    );
   }
 };
 
 // Api Spec
-export const updateApiSpecAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const updateApiSpecAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
   const formData = await request.formData();
@@ -1121,19 +1135,20 @@ export const updateApiSpecAction: ActionFunction = async ({
   const apiSpec = await models.apiSpec.getByParentId(workspaceId);
 
   invariant(apiSpec, 'API Spec not found');
-  await database.update({
-    ...apiSpec,
-    modified: Date.now(),
-    created: fromSync ? Date.now() : apiSpec.created,
-    contents,
-  }, fromSync);
+  await database.update(
+    {
+      ...apiSpec,
+      modified: Date.now(),
+      created: fromSync ? Date.now() : apiSpec.created,
+      contents,
+    },
+    fromSync,
+  );
 
   return null;
 };
 
-export const generateCollectionFromApiSpecAction: ActionFunction = async ({
-  params,
-}) => {
+export const generateCollectionFromApiSpecAction: ActionFunction = async ({ params }) => {
   const { organizationId, projectId, workspaceId } = params;
 
   invariant(typeof projectId === 'string', 'Project ID is required');
@@ -1162,7 +1177,9 @@ export const generateCollectionFromApiSpecAction: ActionFunction = async ({
 
   const spectralRunner = new SpectralRunner();
 
-  const results = (await spectralRunner.runDiagnostics({ contents: apiSpec.contents, rulesetPath })).filter(isLintError);
+  const results = (await spectralRunner.runDiagnostics({ contents: apiSpec.contents, rulesetPath })).filter(
+    isLintError,
+  );
   spectralRunner.terminate();
   if (apiSpec.contents && results && results.length) {
     throw new Error('Error Generating Configuration');
@@ -1202,7 +1219,9 @@ export const generateCollectionAndTestsAction: ActionFunction = async ({ params
 
   const spectralRunner = new SpectralRunner();
 
-  const results = (await spectralRunner.runDiagnostics({ contents: apiSpec.contents, rulesetPath })).filter(isLintError);
+  const results = (await spectralRunner.runDiagnostics({ contents: apiSpec.contents, rulesetPath })).filter(
+    isLintError,
+  );
   spectralRunner.terminate();
   if (apiSpec.contents && results && results.length) {
     throw new Error('Error Generating Configuration');
@@ -1210,20 +1229,24 @@ export const generateCollectionAndTestsAction: ActionFunction = async ({ params
 
   const resources = await scanResources([apiSpec.contents]);
 
-  const allRequestsFromResources = resources.reduce((accumulator, scanResult) => accumulator.concat(scanResult.requests ?? []), [] as NonNullable<ScanResult['requests']>);
+  const allRequestsFromResources = resources.reduce(
+    (accumulator, scanResult) => accumulator.concat(scanResult.requests ?? []),
+    [] as NonNullable<ScanResult['requests']>,
+  );
 
   const aiGeneratedRequestGroup = await models.requestGroup.create({
     name: 'AI Generated Requests',
     parentId: workspaceId,
   });
 
-  const requests = allRequestsFromResources.filter(isRequest).map(request => {
-    return {
-      ...request,
-      _id: generateId(models.request.prefix),
-      parentId: aiGeneratedRequestGroup._id,
-    };
-  }) || [];
+  const requests =
+    allRequestsFromResources.filter(isRequest).map(request => {
+      return {
+        ...request,
+        _id: generateId(models.request.prefix),
+        parentId: aiGeneratedRequestGroup._id,
+      };
+    }) || [];
 
   await Promise.all(requests.map(request => models.request.create(request)));
 
@@ -1305,7 +1328,6 @@ export const generateCollectionAndTestsAction: ActionFunction = async ({ params
           progress: ++progress,
           total,
         });
-
       } catch (err) {
         console.log(err);
         writer.write({
@@ -1432,10 +1454,7 @@ export const accessAIApiAction: ActionFunction = async ({ params }) => {
   }
 };
 
-export const createEnvironmentAction: ActionFunction = async ({
-  params,
-  request,
-}) => {
+export const createEnvironmentAction: ActionFunction = async ({ params, request }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
@@ -1475,9 +1494,7 @@ export const updateEnvironment: ActionFunction = async ({ request, params }) =>
   return updatedEnvironment;
 };
 
-export const deleteEnvironmentAction: ActionFunction = async ({
-  request, params,
-}) => {
+export const deleteEnvironmentAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
@@ -1499,9 +1516,7 @@ export const deleteEnvironmentAction: ActionFunction = async ({
   return null;
 };
 
-export const duplicateEnvironmentAction: ActionFunction = async ({
-  request, params,
-}) => {
+export const duplicateEnvironmentAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
@@ -1519,9 +1534,7 @@ export const duplicateEnvironmentAction: ActionFunction = async ({
   return newEnvironment;
 };
 
-export const setActiveEnvironmentAction: ActionFunction = async ({
-  request, params,
-}) => {
+export const setActiveEnvironmentAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
@@ -1540,9 +1553,7 @@ export const setActiveEnvironmentAction: ActionFunction = async ({
   return null;
 };
 
-export const setActiveGlobalEnvironmentAction: ActionFunction = async ({
-  request, params,
-}) => {
+export const setActiveGlobalEnvironmentAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
@@ -1561,9 +1572,7 @@ export const setActiveGlobalEnvironmentAction: ActionFunction = async ({
   return null;
 };
 
-export const updateCookieJarAction: ActionFunction = async ({
-  request, params,
-}) => {
+export const updateCookieJarAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
@@ -1693,15 +1702,21 @@ export const createMockRouteAction: ActionFunction = async ({ request, params })
       parentId: projectId,
     });
     invariant(mockWorkspace, 'Workspace not found');
-    const newMockServer = await models.mockServer.getOrCreateForParentId(mockWorkspace._id, { name: collectionWorkspace.name });
+    const newMockServer = await models.mockServer.getOrCreateForParentId(mockWorkspace._id, {
+      name: collectionWorkspace.name,
+    });
     delete patch.mockServerName;
     const mockRoute = await models.mockRoute.create({ ...patch, parentId: newMockServer._id });
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${newMockServer.parentId}/mock-server/mock-route/${mockRoute._id}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${newMockServer.parentId}/mock-server/mock-route/${mockRoute._id}`,
+    );
   }
   const mockServer = await models.mockServer.getById(patch.parentId);
   invariant(mockServer, 'Mock server not found');
   const mockRoute = await models.mockRoute.create(patch);
-  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${mockServer.parentId}/mock-server/mock-route/${mockRoute._id}`);
+  return redirect(
+    `/organization/${organizationId}/project/${projectId}/workspace/${mockServer.parentId}/mock-server/mock-route/${mockRoute._id}`,
+  );
 };
 export const updateMockRouteAction: ActionFunction = async ({ request, params }) => {
   const { mockRouteId } = params;
@@ -1742,7 +1757,7 @@ export const toggleExpandAllRequestGroupsAction: ActionFunction = async ({ param
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
   const workspace = await models.workspace.getById(workspaceId);
   invariant(workspace, 'Workspace not found');
-  const data = await request.json() as {
+  const data = (await request.json()) as {
     toggle: 'collapse-all' | 'expand-all';
   };
   const isCollapsed = data.toggle === 'collapse-all';
@@ -1750,13 +1765,15 @@ export const toggleExpandAllRequestGroupsAction: ActionFunction = async ({ param
   const descendants = await database.withDescendants(workspace);
   const requestGroups = descendants.filter(isRequestGroup);
   const requestGroupMetas = descendants.filter(isRequestGroupMeta);
-  await Promise.all(requestGroups.map(requestGroup => {
-    const requestGroupMeta = requestGroupMetas.find(meta => meta.parentId === requestGroup._id);
+  await Promise.all(
+    requestGroups.map(requestGroup => {
+      const requestGroupMeta = requestGroupMetas.find(meta => meta.parentId === requestGroup._id);
 
-    if (requestGroupMeta) {
-      return models.requestGroupMeta.update(requestGroupMeta, { collapsed: isCollapsed });
-    }
-    return models.requestGroupMeta.create({ parentId: requestGroup._id, collapsed: isCollapsed });
-  }));
+      if (requestGroupMeta) {
+        return models.requestGroupMeta.update(requestGroupMeta, { collapsed: isCollapsed });
+      }
+      return models.requestGroupMeta.create({ parentId: requestGroup._id, collapsed: isCollapsed });
+    }),
+  );
   return null;
 };
diff --git a/packages/insomnia/src/ui/routes/auth.authorize.tsx b/packages/insomnia/src/ui/routes/auth.authorize.tsx
index 143941ca1d..8e1c8cc916 100644
--- a/packages/insomnia/src/ui/routes/auth.authorize.tsx
+++ b/packages/insomnia/src/ui/routes/auth.authorize.tsx
@@ -11,15 +11,16 @@ import { Icon } from '../components/icon';
 import { insomniaFetch } from '../insomniaFetch';
 import { validateVaultKey } from './auth.vaultKey';
 
-export const action: ActionFunction = async ({
-  request,
-}) => {
+export const action: ActionFunction = async ({ request }) => {
   const data = await request.json();
 
   invariant(typeof data?.code === 'string', 'Expected code to be a string');
   const error = await submitAuthCode(data.code);
   if (error) {
-    const humanReadableError = error?.message === 'Failed to fetch' ? 'Network failed, please try again. If the problem persists, check your network and proxy settings.' : error?.message;
+    const humanReadableError =
+      error?.message === 'Failed to fetch'
+        ? 'Network failed, please try again. If the problem persists, check your network and proxy settings.'
+        : error?.message;
     return {
       errors: {
         message: humanReadableError,
@@ -83,14 +84,12 @@ const Authorize = () => {
   // 3 login and redirect back with token
   return (
     <div className="flex flex-col gap-[--padding-md] text-[--color-font]">
-      <Heading className="text-2xl font-bold text-center px-3">
-        Authorizing Insomnia
-      </Heading>
-      {(
+      <Heading className="px-3 text-center text-2xl font-bold">Authorizing Insomnia</Heading>
+      {
         <Fragment>
           <p>
-            A new page should have opened in your default web browser. Please log in.
-            If you choose to login with SSO and it uses a different email to your previous login your teams will not be migrated.
+            A new page should have opened in your default web browser. Please log in. If you choose to login with SSO
+            and it uses a different email to your previous login your teams will not be migrated.
           </p>
           <div className="flex flex-col gap-3 rounded-md bg-[--hl-sm] p-[--padding-md]">
             <p className="text-[rgba(var(--color-font-rgb),0.8))] text-start">
@@ -98,12 +97,7 @@ const Authorize = () => {
               into your browser to complete login.
             </p>
             <div className="form-control form-control--outlined no-pad-top flex">
-              <input
-                type="text"
-                value={url}
-                style={{ marginRight: 'var(--padding-sm)' }}
-                readOnly
-              />
+              <input type="text" value={url} style={{ marginRight: 'var(--padding-sm)' }} readOnly />
               <button
                 className="btn btn--super-compact btn--outlined"
                 onClick={copyUrl}
@@ -118,8 +112,8 @@ const Authorize = () => {
               </button>
             </div>
             <p className="text-[rgba(var(--color-font-rgb),0.8))] text-start">
-              If your browser does not open the Insomnia app automatically you
-              can manually add the generated token here.
+              If your browser does not open the Insomnia app automatically you can manually add the generated token
+              here.
             </p>
 
             <form
@@ -129,10 +123,7 @@ const Authorize = () => {
                 const data = new FormData(form);
 
                 const code = data.get('code');
-                invariant(
-                  typeof code === 'string',
-                  'Expected code to be a string',
-                );
+                invariant(typeof code === 'string', 'Expected code to be a string');
                 authorizeFetcher.submit(
                   {
                     code,
@@ -144,15 +135,8 @@ const Authorize = () => {
                 );
               }}
             >
-              <div
-                className="form-control form-control--outlined no-pad-top"
-                style={{ display: 'flex' }}
-              >
-                <input
-                  type="text"
-                  name="code"
-                  style={{ marginRight: 'var(--padding-sm)' }}
-                />
+              <div className="form-control form-control--outlined no-pad-top" style={{ display: 'flex' }}>
+                <input type="text" name="code" style={{ marginRight: 'var(--padding-sm)' }} />
                 <button
                   className="btn btn--super-compact btn--outlined"
                   type="submit"
@@ -163,7 +147,10 @@ const Authorize = () => {
                   }}
                   disabled={isAuthenticating}
                 >
-                  <Icon icon={isAuthenticating ? 'spinner' : 'sign-in'} className={isAuthenticating ? 'animate-spin' : ''} />
+                  <Icon
+                    icon={isAuthenticating ? 'spinner' : 'sign-in'}
+                    className={isAuthenticating ? 'animate-spin' : ''}
+                  />
                   Log in
                 </button>
               </div>
@@ -171,8 +158,8 @@ const Authorize = () => {
             </form>
           </div>
         </Fragment>
-      )}
-      <div className='flex justify-center w-full'>
+      }
+      <div className="flex w-full justify-center">
         <Button
           className="flex items-center gap-2"
           onPress={() => {
diff --git a/packages/insomnia/src/ui/routes/auth.login.tsx b/packages/insomnia/src/ui/routes/auth.login.tsx
index 3f3dd180de..280bd180ed 100644
--- a/packages/insomnia/src/ui/routes/auth.login.tsx
+++ b/packages/insomnia/src/ui/routes/auth.login.tsx
@@ -30,9 +30,7 @@ const GoogleIcon = (props: React.ReactSVGElement['props']) => {
   );
 };
 
-export const action: ActionFunction = async ({
-  request,
-}) => {
+export const action: ActionFunction = async ({ request }) => {
   const data = await request.formData();
   const provider = data.get('provider');
   const url = new URL(getLoginUrl());
@@ -52,12 +50,15 @@ const Login = () => {
   const [message, setMessage] = useState<string | null>(null);
 
   const login = (provider: string) => {
-    loginFetcher.submit({
-      provider,
-    }, {
-      action: '/auth/login',
-      method: 'POST',
-    });
+    loginFetcher.submit(
+      {
+        provider,
+      },
+      {
+        action: '/auth/login',
+        method: 'POST',
+      },
+    );
   };
 
   useEffect(() => {
@@ -73,16 +74,12 @@ const Login = () => {
   }, [logoutMessage]);
 
   return (
-    <div
-      className='flex flex-col gap-[--padding-lg]'
-    >
-      <div className='flex flex-col gap-[--padding-md]'>
-        <p className='text-center text-[--color-font] text-2xl py-[--padding-md]'>
-          Get started for free
-        </p>
-        <div className="font-extrabold text-sm [text-wrap:balance]">
-          <span className="text-indigo-300 inline-flex flex-col h-[calc(theme(fontSize.sm)*theme(lineHeight.tight))] overflow-hidden">
-            <ul className="block animate-text-slide-4 text-right leading-tight [&_li]:block">
+    <div className="flex flex-col gap-[--padding-lg]">
+      <div className="flex flex-col gap-[--padding-md]">
+        <p className="py-[--padding-md] text-center text-2xl text-[--color-font]">Get started for free</p>
+        <div className="text-sm font-extrabold [text-wrap:balance]">
+          <span className="inline-flex h-[calc(theme(fontSize.sm)*theme(lineHeight.tight))] flex-col overflow-hidden text-indigo-300">
+            <ul className="animate-text-slide-4 block text-right leading-tight [&_li]:block">
               <li>Debug</li>
               <li>Design</li>
               <li>Test</li>
@@ -90,71 +87,62 @@ const Login = () => {
               <li aria-hidden="true">Debug</li>
             </ul>
           </span>
-          <span className='ml-1 text-[--color-font]'>APIs locally, on Git or in the Cloud.</span>
+          <span className="ml-1 text-[--color-font]">APIs locally, on Git or in the Cloud.</span>
         </div>
-        {message && <div className="font-bold text-sm text-red-300">{message}</div>}
+        {message && <div className="text-sm font-bold text-red-300">{message}</div>}
         <Button
-          aria-label='Continue with Google'
+          aria-label="Continue with Google"
           onPress={() => {
             login('google');
           }}
-          className="w-full items-center border border-solid border-[--hl-md] flex justify-center gap-[--padding-md] aria-pressed:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
+          className="flex w-full items-center justify-center gap-[--padding-md] rounded-md border border-solid border-[--hl-md] text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
-          <div className='w-[40px] h-[35px] border-r border-solid border-[--hl-sm] flex items-center justify-center bg-[--hl-xs]'>
+          <div className="flex h-[35px] w-[40px] items-center justify-center border-r border-solid border-[--hl-sm] bg-[--hl-xs]">
             <GoogleIcon width="1em" />
           </div>
-          <span className='flex-1 items'>
-            Continue with Google
-
-          </span>
+          <span className="items flex-1">Continue with Google</span>
         </Button>
         <Button
-          aria-label='Continue with GitHub'
+          aria-label="Continue with GitHub"
           onPress={() => {
             login('github');
           }}
-          className="w-full items-center border border-solid border-[--hl-md] flex justify-center gap-[--padding-md] aria-pressed:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
+          className="flex w-full items-center justify-center gap-[--padding-md] rounded-md border border-solid border-[--hl-md] text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
-          <div className='w-[40px] h-[35px] border-r border-solid border-[--hl-sm] flex items-center justify-center bg-[--hl-xs]'>
+          <div className="flex h-[35px] w-[40px] items-center justify-center border-r border-solid border-[--hl-sm] bg-[--hl-xs]">
             <Icon icon={['fab', 'github']} />
           </div>
-          <span className='flex-1 items'>
-            Continue with GitHub
-          </span>
+          <span className="items flex-1">Continue with GitHub</span>
         </Button>
         <Button
-          aria-label='Continue with Email'
+          aria-label="Continue with Email"
           onPress={() => {
             login('email');
           }}
-          className="w-full items-center border border-solid border-[--hl-md] flex justify-center gap-[--padding-md] aria-pressed:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
+          className="flex w-full items-center justify-center gap-[--padding-md] rounded-md border border-solid border-[--hl-md] text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
-          <div className='w-[40px] h-[35px] border-r border-solid border-[--hl-sm] flex items-center justify-center bg-[--hl-xs]'>
+          <div className="flex h-[35px] w-[40px] items-center justify-center border-r border-solid border-[--hl-sm] bg-[--hl-xs]">
             <Icon icon="envelope" />
           </div>
-          <span className='flex-1 items'>
-            Continue with Email
-          </span>
+          <span className="items flex-1">Continue with Email</span>
         </Button>
         <Button
-          aria-label='Continue with SSO'
+          aria-label="Continue with SSO"
           onPress={() => {
             login('sso');
           }}
-          className="w-full items-center border border-solid border-[--hl-md] flex justify-center gap-[--padding-md] aria-pressed:bg-[--hl-sm] rounded-md text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
+          className="flex w-full items-center justify-center gap-[--padding-md] rounded-md border border-solid border-[--hl-md] text-base text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
         >
-          <div className='w-[40px] h-[35px] border-r border-solid border-[--hl-sm] flex items-center justify-center bg-[--hl-xs]'>
+          <div className="flex h-[35px] w-[40px] items-center justify-center border-r border-solid border-[--hl-sm] bg-[--hl-xs]">
             <Icon icon="key" />
           </div>
-          <span className='flex-1 items'>
-            Continue with SSO
-          </span>
+          <span className="items flex-1">Continue with SSO</span>
         </Button>
 
-        <p className='text-[rgba(var(--color-font-rgb),0.8)] text-xs text-center'>
+        <p className="text-center text-xs text-[rgba(var(--color-font-rgb),0.8)]">
           By signing up or using Insomnia, you agree to the{' '}
           <a
-            className='font-bold outline-none transition-colors hover:text-[--color-font] focus:text-[--color-font]'
+            className="font-bold outline-none transition-colors hover:text-[--color-font] focus:text-[--color-font]"
             href="https://insomnia.rest/terms"
             rel="noreferrer"
           >
@@ -162,7 +150,7 @@ const Login = () => {
           </a>{' '}
           and{' '}
           <a
-            className='font-bold outline-none transition-colors hover:text-[--color-font] focus:text-[--color-font]'
+            className="font-bold outline-none transition-colors hover:text-[--color-font] focus:text-[--color-font]"
             href="https://insomnia.rest/privacy"
             rel="noreferrer"
           >
@@ -172,7 +160,7 @@ const Login = () => {
         </p>
       </div>
 
-      <div className='flex justify-center'>
+      <div className="flex justify-center">
         <Button
           onPress={() => {
             window.main.trackSegmentEvent({
@@ -180,15 +168,13 @@ const Login = () => {
             });
             navigate('/organization/org_scratchpad/project/proj_scratchpad/workspace/wrk_scratchpad/debug');
           }}
-          aria-label='Use the Scratch Pad'
-          className='flex outline-none transition-colors justify-center text-[rgba(var(--color-font-rgb),0.8)] text-sm gap-[--padding-xs] hover:text-[--color-font] focus:text-[--color-font]'
+          aria-label="Use the Scratch Pad"
+          className="flex justify-center gap-[--padding-xs] text-sm text-[rgba(var(--color-font-rgb),0.8)] outline-none transition-colors hover:text-[--color-font] focus:text-[--color-font]"
         >
           <div>
-            <i className='fa fa-edit' />
+            <i className="fa fa-edit" />
           </div>
-          <span>
-            Use the local Scratch Pad
-          </span>
+          <span>Use the local Scratch Pad</span>
         </Button>
       </div>
     </div>
diff --git a/packages/insomnia/src/ui/routes/auth.tsx b/packages/insomnia/src/ui/routes/auth.tsx
index d2e95fad89..ecfa8d9708 100644
--- a/packages/insomnia/src/ui/routes/auth.tsx
+++ b/packages/insomnia/src/ui/routes/auth.tsx
@@ -25,33 +25,33 @@ const Auth = () => {
   }, []);
 
   return (
-    <div className='grid [grid-template-rows:1fr_30px] w-full h-full'>
-    <div className='relative h-full w-full text-center flex bg-[--color-bg]'>
-      <TrailLinesContainer>
-        <div className='flex flex-col justify-center items-center h-full min-h-[450px]'>
-          <div className='flex flex-col items-center justify-center gap-[--padding-sm] p-[--padding-lg] pt-[32px] min-w-[400px] max-w-lg rounded-md relative bg-[--hl-sm] m-0'>
-            <InsomniaLogo
-              width={64}
-              height={64}
-              style={{
-                transform: 'translate(-50%, -50%)',
-                position: 'absolute',
-                top: 0,
-                left: '50%',
-              }}
-            />
-            <Outlet />
+    <div className="grid h-full w-full [grid-template-rows:1fr_30px]">
+      <div className="relative flex h-full w-full bg-[--color-bg] text-center">
+        <TrailLinesContainer>
+          <div className="flex h-full min-h-[450px] flex-col items-center justify-center">
+            <div className="relative m-0 flex min-w-[400px] max-w-lg flex-col items-center justify-center gap-[--padding-sm] rounded-md bg-[--hl-sm] p-[--padding-lg] pt-[32px]">
+              <InsomniaLogo
+                width={64}
+                height={64}
+                style={{
+                  transform: 'translate(-50%, -50%)',
+                  position: 'absolute',
+                  top: 0,
+                  left: '50%',
+                }}
+              />
+              <Outlet />
+            </div>
           </div>
-        </div>
-      </TrailLinesContainer>
-    </div>
+        </TrailLinesContainer>
+      </div>
       <div className="relative flex items-center overflow-hidden">
-        <div className='flex w-full h-full items-center justify-between'>
+        <div className="flex h-full w-full items-center justify-between">
           <div className="flex h-full">
             <TooltipTrigger>
               <Button
                 data-testid="settings-button"
-                className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+                className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 onPress={() => showSettingsModal()}
               >
                 <Icon icon="gear" /> Preferences
@@ -59,23 +59,17 @@ const Auth = () => {
               <Tooltip
                 placement="top"
                 offset={8}
-                className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
               >
                 Preferences
-                <Hotkey
-                  keyBindings={
-                    settings.hotKeyRegistry.preferences_showGeneral
-                  }
-                />
+                <Hotkey keyBindings={settings.hotKeyRegistry.preferences_showGeneral} />
               </Tooltip>
             </TooltipTrigger>
-
           </div>
-          <div className='flex items-center gap-2 divide divide-y-[--hl-sm]'>
-
+          <div className="divide flex items-center gap-2 divide-y-[--hl-sm]">
             <TooltipTrigger>
               <Button
-                className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+                className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 onPress={() => {
                   if (settings.proxyEnabled) {
                     showSettingsModal({
@@ -87,38 +81,34 @@ const Auth = () => {
                 <Icon
                   icon="circle"
                   className={
-                    userSession
-                      ? status === 'online'
-                        ? 'text-[--color-success]'
-                        : 'text-[--color-danger]'
-                      : ''
+                    userSession ? (status === 'online' ? 'text-[--color-success]' : 'text-[--color-danger]') : ''
                   }
                 />{' '}
-                {userSession
-                  ? status.charAt(0).toUpperCase() + status.slice(1)
-                  : 'Log in to see your projects'}
+                {userSession ? status.charAt(0).toUpperCase() + status.slice(1) : 'Log in to see your projects'}
                 {settings.proxyEnabled ? ' via proxy' : ''}
               </Button>
               <Tooltip
                 placement="top"
                 offset={8}
-                className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
               >
                 {userSession
-                  ? status === 'online' ? 'You have connectivity to the Internet' + (settings.proxyEnabled ? ' via the configured proxy' : '') + '.'
+                  ? status === 'online'
+                    ? 'You have connectivity to the Internet' +
+                      (settings.proxyEnabled ? ' via the configured proxy' : '') +
+                      '.'
                     : 'You are offline. Connect to sync your data.'
                   : 'Login to Insomnia to unlock the full product experience.'}
               </Tooltip>
             </TooltipTrigger>
-            <span className='w-[1px] h-full bg-[--hl-sm]' />
+            <span className="h-full w-[1px] bg-[--hl-sm]" />
             <Link>
               <a
-                className="flex focus:outline-none focus:underline gap-1 items-center text-xs text-[--color-font] px-[--padding-md]"
+                className="flex items-center gap-1 px-[--padding-md] text-xs text-[--color-font] focus:underline focus:outline-none"
                 href="https://konghq.com/"
               >
                 Made with
-                <Icon className="text-[--color-surprise-font]" icon="heart" /> by
-                Kong
+                <Icon className="text-[--color-surprise-font]" icon="heart" /> by Kong
               </a>
             </Link>
           </div>
diff --git a/packages/insomnia/src/ui/routes/auth.vaultKey.ts b/packages/insomnia/src/ui/routes/auth.vaultKey.ts
index 6186ebcdc7..14598f3256 100644
--- a/packages/insomnia/src/ui/routes/auth.vaultKey.ts
+++ b/packages/insomnia/src/ui/routes/auth.vaultKey.ts
@@ -9,14 +9,7 @@ import { base64encode, saveVaultKeyIfNecessary } from '../../utils/vault';
 import type { ToastNotification } from '../components/toast';
 import { insomniaFetch } from '../insomniaFetch';
 
-const {
-  Buffer,
-  Client,
-  generateAES256Key,
-  getRandomHex,
-  params,
-  srpGenKey,
-} = srp;
+const { Buffer, Client, generateAES256Key, getRandomHex, params, srpGenKey } = srp;
 interface FetchError {
   error?: string;
   message?: string;
@@ -107,7 +100,11 @@ export const validateVaultKey = async (session: UserSession, vaultKey: string, v
   // Compute and Submit A  //
   // ~~~~~~~~~~~~~~~~~~~~~ //
   const srpA = srpClient.computeA().toString('hex');
-  const { sessionStarterId, srpB, error: verifyAError } = await insomniaFetch<{
+  const {
+    sessionStarterId,
+    srpB,
+    error: verifyAError,
+  } = await insomniaFetch<{
     sessionStarterId: string;
     srpB: string;
     error?: string;
@@ -174,16 +171,17 @@ export const clearVaultKeyAction: ActionFunction = async ({ request }) => {
 
   const userSession = await sessionModel.getOrCreate();
   const { id: sessionId } = userSession;
-  const { salt: newVaultSalt } = await insomniaFetch<{
-    salt?: string;
-    error?: string;
-  }>({
-    method: 'GET',
-    path: '/v1/user/vault',
-    sessionId,
-  }).catch(error => {
-    console.error(`failed to get vault salt ${error.toString()}`);
-  }) || {};
+  const { salt: newVaultSalt } =
+    (await insomniaFetch<{
+      salt?: string;
+      error?: string;
+    }>({
+      method: 'GET',
+      path: '/v1/user/vault',
+      sessionId,
+    }).catch(error => {
+      console.error(`failed to get vault salt ${error.toString()}`);
+    })) || {};
   // User on other device has reset the vault key.
   if (resetVaultClientSessionId !== sessionId) {
     // remove all secret environment variables
diff --git a/packages/insomnia/src/ui/routes/commands.tsx b/packages/insomnia/src/ui/routes/commands.tsx
index 982ef97031..3e44ce01a9 100644
--- a/packages/insomnia/src/ui/routes/commands.tsx
+++ b/packages/insomnia/src/ui/routes/commands.tsx
@@ -2,7 +2,16 @@ import type { LoaderFunction } from 'react-router-dom';
 
 import { database } from '../../common/database';
 import { fuzzyMatch } from '../../common/misc';
-import { environment, grpcRequest, project, request, requestGroup, userSession, webSocketRequest, workspace } from '../../models';
+import {
+  environment,
+  grpcRequest,
+  project,
+  request,
+  requestGroup,
+  userSession,
+  webSocketRequest,
+  workspace,
+} from '../../models';
 import type { Environment } from '../../models/environment';
 import type { GrpcRequest } from '../../models/grpc-request';
 import { isScratchpadOrganizationId, type Organization } from '../../models/organization';
@@ -26,12 +35,12 @@ export interface CommandItem<TItem> {
 
 export interface LoaderResult {
   current: {
-    requests: CommandItem<(Request | GrpcRequest | WebSocketRequest)>[];
+    requests: CommandItem<Request | GrpcRequest | WebSocketRequest>[];
     files: CommandItem<Workspace & { teamProjectId: string }>[];
     environments: Environment[];
   };
   other: {
-    requests: CommandItem<(Request | GrpcRequest | WebSocketRequest)>[];
+    requests: CommandItem<Request | GrpcRequest | WebSocketRequest>[];
     files: CommandItem<Workspace & { teamProjectId: string }>[];
   };
 }
@@ -48,18 +57,21 @@ export const loader: LoaderFunction = async args => {
     if (!filter) {
       return true;
     }
-    return Boolean(fuzzyMatch(
-      filter || '',
-      [request.name, request.url, request.description].join(' '),
-      { splitSpace: false, loose: true }
-    )?.indexes);
+    return Boolean(
+      fuzzyMatch(filter || '', [request.name, request.url, request.description].join(' '), {
+        splitSpace: false,
+        loose: true,
+      })?.indexes,
+    );
   };
 
   const { accountId } = await userSession.getOrCreate();
 
   const allOrganizations = JSON.parse(localStorage.getItem(`${accountId}:organizations`) || '[]') as Organization[];
 
-  const allOrganizationsIds = isScratchpadOrganizationId(organizationId) ? [organizationId] : allOrganizations.map(org => org.id);
+  const allOrganizationsIds = isScratchpadOrganizationId(organizationId)
+    ? [organizationId]
+    : allOrganizations.map(org => org.id);
 
   const allProjects = await database.find<Project>(project.type, {
     parentId: { $in: allOrganizationsIds },
@@ -73,12 +85,15 @@ export const loader: LoaderFunction = async args => {
 
   const workspaceIds = allOrganizationWorkspaces.map(workspace => workspace._id);
 
-  const parentReferences = new Map<string, {
-    type: 'Project' | 'Workspace' | 'RequestGroup' | 'Request' | 'GrpcRequest' | 'WebSocketRequest';
-    organizationId: string;
-    projectId?: string;
-    workspaceId?: string;
-  }>();
+  const parentReferences = new Map<
+    string,
+    {
+      type: 'Project' | 'Workspace' | 'RequestGroup' | 'Request' | 'GrpcRequest' | 'WebSocketRequest';
+      organizationId: string;
+      projectId?: string;
+      workspaceId?: string;
+    }
+  >();
 
   allProjects.forEach(project => {
     parentReferences.set(project._id, {
@@ -115,9 +130,12 @@ export const loader: LoaderFunction = async args => {
 
     const requestGroupIds = requestGroups.map(requestGroup => requestGroup._id);
 
-    const childRequestGroups = requestGroupIds.length > 0 ? await getRequestGroups({
-      $in: requestGroupIds,
-    }) : [];
+    const childRequestGroups =
+      requestGroupIds.length > 0
+        ? await getRequestGroups({
+            $in: requestGroupIds,
+          })
+        : [];
 
     for (const requestGroup of childRequestGroups) {
       parentReferences.set(requestGroup._id, {
@@ -128,10 +146,7 @@ export const loader: LoaderFunction = async args => {
       });
     }
 
-    return [
-      ...requestGroups,
-      ...childRequestGroups,
-    ];
+    return [...requestGroups, ...childRequestGroups];
   };
 
   const allRequestGroups = await getRequestGroups({
@@ -140,10 +155,7 @@ export const loader: LoaderFunction = async args => {
 
   const requests = await database.find<Request>(request.type, {
     parentId: {
-      $in: [
-        ...workspaceIds,
-        ...allRequestGroups.map(requestGroup => requestGroup._id),
-      ],
+      $in: [...workspaceIds, ...allRequestGroups.map(requestGroup => requestGroup._id)],
     },
   });
 
@@ -158,10 +170,7 @@ export const loader: LoaderFunction = async args => {
 
   const grpcRequests = await database.find<GrpcRequest>(grpcRequest.type, {
     parentId: {
-      $in: [
-        ...workspaceIds,
-        ...allRequestGroups.map(requestGroup => requestGroup._id),
-      ],
+      $in: [...workspaceIds, ...allRequestGroups.map(requestGroup => requestGroup._id)],
     },
   });
 
@@ -176,10 +185,7 @@ export const loader: LoaderFunction = async args => {
 
   const webSocketRequests = await database.find<WebSocketRequest>(webSocketRequest.type, {
     parentId: {
-      $in: [
-        ...workspaceIds,
-        ...allRequestGroups.map(requestGroup => requestGroup._id),
-      ],
+      $in: [...workspaceIds, ...allRequestGroups.map(requestGroup => requestGroup._id)],
     },
   });
 
@@ -202,10 +208,7 @@ export const loader: LoaderFunction = async args => {
     parentId: baseEnvironment?._id,
   });
 
-  const environments = baseEnvironment ? [
-    baseEnvironment,
-    ...subEnvironments,
-  ] : [];
+  const environments = baseEnvironment ? [baseEnvironment, ...subEnvironments] : [];
 
   const currentRequests = allRequests.filter(request => {
     return parentReferences.get(request.parentId)!.workspaceId === workspaceId;
@@ -225,48 +228,80 @@ export const loader: LoaderFunction = async args => {
 
   return {
     current: {
-      requests: currentRequests.filter(requestFilter).slice(0, 100).map(item => ({
-        id: item._id,
-        url: `/organization/${parentReferences.get(item.parentId)?.organizationId}/project/${parentReferences.get(item.parentId)!.projectId}/workspace/${parentReferences.get(item.parentId)?.workspaceId}/debug/request/${item._id}`,
-        name: item.name,
-        item,
-        organizationName: allOrganizations.find(org => org.id === parentReferences.get(item.parentId)?.organizationId)?.display_name || '',
-        projectName: allProjects.find(project => project._id === parentReferences.get(item.parentId)?.projectId)?.name || '',
-        workspaceName: allOrganizationWorkspaces.find(workspace => workspace._id === parentReferences.get(item.parentId)?.workspaceId)?.name || '',
-      })),
+      requests: currentRequests
+        .filter(requestFilter)
+        .slice(0, 100)
+        .map(item => ({
+          id: item._id,
+          url: `/organization/${parentReferences.get(item.parentId)?.organizationId}/project/${parentReferences.get(item.parentId)!.projectId}/workspace/${parentReferences.get(item.parentId)?.workspaceId}/debug/request/${item._id}`,
+          name: item.name,
+          item,
+          organizationName:
+            allOrganizations.find(org => org.id === parentReferences.get(item.parentId)?.organizationId)
+              ?.display_name || '',
+          projectName:
+            allProjects.find(project => project._id === parentReferences.get(item.parentId)?.projectId)?.name || '',
+          workspaceName:
+            allOrganizationWorkspaces.find(
+              workspace => workspace._id === parentReferences.get(item.parentId)?.workspaceId,
+            )?.name || '',
+        })),
       files: currentFiles.map(workspace => {
         const parentProject = allProjects.find(project => project._id === workspace.parentId);
-        return ({
+        return {
           id: workspace._id,
           url: `/organization/${parentReferences.get(workspace.parentId)?.organizationId}/project/${parentReferences.get(workspace.parentId)?.projectId}/workspace/${workspace._id}/${scopeToActivity(workspace.scope)}`,
           name: workspace.name,
-          item: { ...workspace, teamProjectId: parentProject && isRemoteProject(parentProject) ? parentProject.remoteId : '' },
-          organizationName: allOrganizations.find(org => org.id === parentReferences.get(workspace.parentId)?.organizationId)?.display_name || '',
-          projectName: allProjects.find(project => project._id === parentReferences.get(workspace.parentId)?.projectId)?.name || '',
-        });
+          item: {
+            ...workspace,
+            teamProjectId: parentProject && isRemoteProject(parentProject) ? parentProject.remoteId : '',
+          },
+          organizationName:
+            allOrganizations.find(org => org.id === parentReferences.get(workspace.parentId)?.organizationId)
+              ?.display_name || '',
+          projectName:
+            allProjects.find(project => project._id === parentReferences.get(workspace.parentId)?.projectId)?.name ||
+            '',
+        };
       }),
       environments,
     },
     other: {
-      requests: otherRequests.filter(requestFilter).slice(0, 100).map(item => ({
-        id: item._id,
-        url: `/organization/${parentReferences.get(item.parentId)?.organizationId}/project/${parentReferences.get(item.parentId)?.projectId}/workspace/${parentReferences.get(item.parentId)!.workspaceId}/debug/request/${item._id}`,
-        name: item.name,
-        item,
-        organizationName: allOrganizations.find(org => org.id === parentReferences.get(item.parentId)?.organizationId)?.display_name || '',
-        projectName: allProjects.find(project => project._id === parentReferences.get(item.parentId)?.projectId)?.name || '',
-        workspaceName: allOrganizationWorkspaces.find(workspace => workspace._id === parentReferences.get(item.parentId)?.workspaceId)?.name || '',
-      })),
+      requests: otherRequests
+        .filter(requestFilter)
+        .slice(0, 100)
+        .map(item => ({
+          id: item._id,
+          url: `/organization/${parentReferences.get(item.parentId)?.organizationId}/project/${parentReferences.get(item.parentId)?.projectId}/workspace/${parentReferences.get(item.parentId)!.workspaceId}/debug/request/${item._id}`,
+          name: item.name,
+          item,
+          organizationName:
+            allOrganizations.find(org => org.id === parentReferences.get(item.parentId)?.organizationId)
+              ?.display_name || '',
+          projectName:
+            allProjects.find(project => project._id === parentReferences.get(item.parentId)?.projectId)?.name || '',
+          workspaceName:
+            allOrganizationWorkspaces.find(
+              workspace => workspace._id === parentReferences.get(item.parentId)?.workspaceId,
+            )?.name || '',
+        })),
       files: otherFiles.map(workspace => {
         const parentProject = allProjects.find(project => project._id === workspace.parentId);
-        return ({
+        return {
           id: workspace._id,
           url: `/organization/${parentReferences.get(workspace.parentId)?.organizationId}/project/${parentReferences.get(workspace.parentId)?.projectId}/workspace/${workspace._id}/${scopeToActivity(workspace.scope)}`,
           name: workspace.name,
-          item: { ...workspace, teamProjectId: parentProject && isRemoteProject(parentProject) ? parentProject.remoteId : '' },
-          organizationName: allOrganizations.find(org => org.id === parentReferences.get(workspace.parentId)?.organizationId)?.display_name || '',
-          projectName: allProjects.find(project => project._id === parentReferences.get(workspace.parentId)?.projectId)?.name || '',
-        });
+          item: {
+            ...workspace,
+            teamProjectId: parentProject && isRemoteProject(parentProject) ? parentProject.remoteId : '',
+          },
+          organizationName:
+            allOrganizations.find(org => org.id === parentReferences.get(workspace.parentId)?.organizationId)
+              ?.display_name || '',
+          projectName:
+            allProjects.find(project => project._id === parentReferences.get(workspace.parentId)?.projectId)?.name ||
+            '',
+        };
       }),
     },
   };
@@ -329,7 +364,9 @@ export const remoteFilesLoader: LoaderFunction = async (): Promise<RemoteFilesLo
       return {
         id: file.id,
         url: `/organization/${file.organizationId}`,
-        pullUrl: parentProject ? `/organization/${file.organizationId}/project/${file.teamProjectId}/remote-collections/pull` : '',
+        pullUrl: parentProject
+          ? `/organization/${file.organizationId}/project/${file.teamProjectId}/remote-collections/pull`
+          : '',
         name: file.name,
         item: { ...file, teamProjectLocalId: parentProject?._id || '', scope: 'unsynced' as const },
         organizationName: organizations.find(org => org.id === file.organizationId)?.display_name || '',
diff --git a/packages/insomnia/src/ui/routes/debug.tsx b/packages/insomnia/src/ui/routes/debug.tsx
index 2c35ec94c9..19413505ab 100644
--- a/packages/insomnia/src/ui/routes/debug.tsx
+++ b/packages/insomnia/src/ui/routes/debug.tsx
@@ -42,7 +42,13 @@ import {
   useSearchParams,
 } from 'react-router-dom';
 
-import { DEFAULT_SIDEBAR_SIZE, getProductName, SORT_ORDERS, type SortOrder, sortOrderName } from '../../common/constants';
+import {
+  DEFAULT_SIDEBAR_SIZE,
+  getProductName,
+  SORT_ORDERS,
+  type SortOrder,
+  sortOrderName,
+} from '../../common/constants';
 import { type ChangeBufferEvent, database as db } from '../../common/database';
 import { generateId, isNotNullOrUndefined } from '../../common/misc';
 import { LandingPage } from '../../common/sentry';
@@ -63,11 +69,7 @@ import {
 import { isRequestGroup, isRequestGroupId, type RequestGroup } from '../../models/request-group';
 import type { RequestGroupMeta } from '../../models/request-group-meta';
 import { getByParentId as getRequestMetaByParentId } from '../../models/request-meta';
-import {
-  isWebSocketRequest,
-  isWebSocketRequestId,
-  type WebSocketRequest,
-} from '../../models/websocket-request';
+import { isWebSocketRequest, isWebSocketRequestId, type WebSocketRequest } from '../../models/websocket-request';
 import { isDesign, isScratchpad } from '../../models/workspace';
 import { scrollElementIntoView } from '../../utils';
 import { getGrpcConnectionErrorDetails, isGrpcConnectionError } from '../../utils/grpc';
@@ -116,11 +118,7 @@ import {
   useRequestMetaPatcher,
   useRequestPatcher,
 } from '../hooks/use-request';
-import type {
-  GrpcRequestLoaderData,
-  RequestLoaderData,
-  WebSocketRequestLoaderData,
-} from './request';
+import type { GrpcRequestLoaderData, RequestLoaderData, WebSocketRequestLoaderData } from './request';
 import type { RequestGroupLoaderData } from './request-group';
 import { useRootLoaderData } from './root';
 import Runner from './runner';
@@ -157,8 +155,7 @@ export const loader: LoaderFunction = async ({ params, request }) => {
     invariant(projectId, 'Project ID is required');
     const activeWorkspace = await models.workspace.getById(workspaceId);
     invariant(activeWorkspace, 'Workspace not found');
-    const activeWorkspaceMeta =
-      await models.workspaceMeta.getOrCreateByParentId(workspaceId);
+    const activeWorkspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspaceId);
     invariant(activeWorkspaceMeta, 'Workspace meta not found');
     const activeRequestId = activeWorkspaceMeta.activeRequestId;
     const activeRequest = activeRequestId ? await models.request.getById(activeRequestId) : null;
@@ -168,7 +165,9 @@ export const loader: LoaderFunction = async ({ params, request }) => {
     const isDisplayingRunner = urlWithoutQuery.includes('/runner');
     const doNotSkipToActiveRequest = request.url.includes('doNotSkipToActiveRequest=true');
     if (activeRequest && !isDisplayingRunner && !doNotSkipToActiveRequest) {
-      return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequestId}`);
+      return redirect(
+        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequestId}`,
+      );
     }
   }
   return null;
@@ -176,12 +175,22 @@ export const loader: LoaderFunction = async ({ params, request }) => {
 
 const WebSocketSpinner = ({ requestId }: { requestId: string }) => {
   const readyState = useReadyState({ requestId, protocol: 'webSocket' });
-  return readyState ? <div className='flex-shrink-0 bg-[--color-success] mr-[--padding-sm] w-2.5 h-2.5 rounded-full' data-testid="WebSocketSpinner__Connected" /> : null;
+  return readyState ? (
+    <div
+      className="mr-[--padding-sm] h-2.5 w-2.5 flex-shrink-0 rounded-full bg-[--color-success]"
+      data-testid="WebSocketSpinner__Connected"
+    />
+  ) : null;
 };
 
 const EventStreamSpinner = ({ requestId }: { requestId: string }) => {
   const readyState = useReadyState({ requestId, protocol: 'curl' });
-  return readyState ? <div className='flex-shrink-0 bg-[--color-success] mr-[--padding-sm] w-2.5 h-2.5 rounded-full' data-testid="EventStreamSpinner__Connected" /> : null;
+  return readyState ? (
+    <div
+      className="mr-[--padding-sm] h-2.5 w-2.5 flex-shrink-0 rounded-full bg-[--color-success]"
+      data-testid="EventStreamSpinner__Connected"
+    />
+  ) : null;
 };
 
 const getRequestNameOrFallback = (doc: Request | RequestGroup | GrpcRequest | WebSocketRequest): string => {
@@ -190,7 +199,12 @@ const getRequestNameOrFallback = (doc: Request | RequestGroup | GrpcRequest | We
 
 const RequestTiming = ({ requestId }: { requestId: string }) => {
   const { isExecuting } = useExecutionState({ requestId });
-  return isExecuting ? <div className='flex-shrink-0 bg-[--color-success] mr-[--padding-sm] w-2.5 h-2.5 rounded-full' data-testid="WebSocketSpinner__Connected" /> : null;
+  return isExecuting ? (
+    <div
+      className="mr-[--padding-sm] h-2.5 w-2.5 flex-shrink-0 rounded-full bg-[--color-success]"
+      data-testid="WebSocketSpinner__Connected"
+    />
+  ) : null;
 };
 
 export const Debug: FC = () => {
@@ -223,7 +237,7 @@ export const Debug: FC = () => {
     requestGroupId?: string;
   };
 
-  const { activeRequestGroup } = useRouteLoaderData('request-group/:requestGroupId') as RequestGroupLoaderData || {};
+  const { activeRequestGroup } = (useRouteLoaderData('request-group/:requestGroupId') as RequestGroupLoaderData) || {};
 
   const [grpcStates, setGrpcStates] = useState<GrpcRequestState[]>(
     grpcRequests.map(r => ({
@@ -232,8 +246,7 @@ export const Debug: FC = () => {
     })),
   );
   const [isCookieModalOpen, setIsCookieModalOpen] = useState(false);
-  const [isRequestSettingsModalOpen, setIsRequestSettingsModalOpen] =
-    useState(false);
+  const [isRequestSettingsModalOpen, setIsRequestSettingsModalOpen] = useState(false);
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportModalOpen] = useState(false);
   const [isEnvironmentPickerOpen, setIsEnvironmentPickerOpen] = useState(false);
@@ -247,10 +260,7 @@ export const Debug: FC = () => {
       for (const change of changes) {
         const [event, doc] = change;
         if (isGrpcRequest(doc) && event === 'insert') {
-          setGrpcStates(grpcStates => [
-            ...grpcStates,
-            { requestId: doc._id, ...INITIAL_GRPC_REQUEST_STATE },
-          ]);
+          setGrpcStates(grpcStates => [...grpcStates, { requestId: doc._id, ...INITIAL_GRPC_REQUEST_STATE }]);
         }
       }
     });
@@ -260,31 +270,21 @@ export const Debug: FC = () => {
 
   const grpcState = grpcStates.find(s => s.requestId === requestId);
   const setGrpcState = (newState: GrpcRequestState) =>
-    setGrpcStates(state =>
-      state.map(s => (s.requestId === requestId ? newState : s)),
-    );
+    setGrpcStates(state => state.map(s => (s.requestId === requestId ? newState : s)));
   const reloadRequests = (requestIds: string[]) => {
-    setGrpcStates(state =>
-      state.map(s =>
-        requestIds.includes(s.requestId) ? { ...s, methods: [] } : s,
-      ),
-    );
+    setGrpcStates(state => state.map(s => (requestIds.includes(s.requestId) ? { ...s, methods: [] } : s)));
   };
   useEffect(
     () =>
       window.main.on('grpc.start', (_, id) => {
-        setGrpcStates(state =>
-          state.map(s => (s.requestId === id ? { ...s, running: true } : s)),
-        );
+        setGrpcStates(state => state.map(s => (s.requestId === id ? { ...s, running: true } : s)));
       }),
     [],
   );
   useEffect(
     () =>
       window.main.on('grpc.end', (_, id) => {
-        setGrpcStates(state =>
-          state.map(s => (s.requestId === id ? { ...s, running: false } : s)),
-        );
+        setGrpcStates(state => state.map(s => (s.requestId === id ? { ...s, running: false } : s)));
       }),
     [],
   );
@@ -295,16 +295,16 @@ export const Debug: FC = () => {
           state.map(s =>
             s.requestId === id
               ? {
-                ...s,
-                responseMessages: [
-                  ...s.responseMessages,
-                  {
-                    id: generateId(),
-                    text: JSON.stringify(value),
-                    created: Date.now(),
-                  },
-                ],
-              }
+                  ...s,
+                  responseMessages: [
+                    ...s.responseMessages,
+                    {
+                      id: generateId(),
+                      text: JSON.stringify(value),
+                      created: Date.now(),
+                    },
+                  ],
+                }
               : s,
           ),
         );
@@ -317,18 +317,14 @@ export const Debug: FC = () => {
         if (isGrpcConnectionError(error)) {
           showModal(ErrorModal, { error, ...getGrpcConnectionErrorDetails(error) });
         }
-        setGrpcStates(state =>
-          state.map(s => (s.requestId === id ? { ...s, error } : s)),
-        );
+        setGrpcStates(state => state.map(s => (s.requestId === id ? { ...s, error } : s)));
       }),
     [],
   );
   useEffect(
     () =>
       window.main.on('grpc.status', (_, id, status) => {
-        setGrpcStates(state =>
-          state.map(s => (s.requestId === id ? { ...s, status } : s)),
-        );
+        setGrpcStates(state => state.map(s => (s.requestId === id ? { ...s, status } : s)));
       }),
     [],
   );
@@ -414,9 +410,7 @@ export const Debug: FC = () => {
       }
     },
     request_createHTTP: async () => {
-      const parentId = activeRequest
-        ? activeRequest.parentId
-        : activeWorkspace._id;
+      const parentId = activeRequest ? activeRequest.parentId : activeWorkspace._id;
       requestFetcher.submit(
         { requestType: 'HTTP', parentId },
         {
@@ -460,20 +454,29 @@ export const Debug: FC = () => {
 
   const isRealtimeRequest =
     activeRequest &&
-    (isWebSocketRequest(activeRequest) || isEventStreamRequest(activeRequest) || isGraphqlSubscriptionRequest(activeRequest));
+    (isWebSocketRequest(activeRequest) ||
+      isEventStreamRequest(activeRequest) ||
+      isGraphqlSubscriptionRequest(activeRequest));
 
   const [searchParams, setSearchParams] = useSearchParams();
 
-  const sortOrder = searchParams.get('sortOrder') as SortOrder || 'type-manual';
+  const sortOrder = (searchParams.get('sortOrder') as SortOrder) || 'type-manual';
   const { hotKeyRegistry } = settings;
 
-  const createRequest = ({ requestType, parentId, req }: { requestType: CreateRequestType; parentId: string; req?: Partial<Request> }) =>
-    requestFetcher.submit(JSON.stringify({ requestType, parentId, req }),
-      {
-        encType: 'application/json',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new`,
-        method: 'post',
-      });
+  const createRequest = ({
+    requestType,
+    parentId,
+    req,
+  }: {
+    requestType: CreateRequestType;
+    parentId: string;
+    req?: Partial<Request>;
+  }) =>
+    requestFetcher.submit(JSON.stringify({ requestType, parentId, req }), {
+      encType: 'application/json',
+      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new`,
+      method: 'post',
+    });
 
   const groupMetaPatcher = useRequestGroupMetaPatcher();
   const reorderFetcher = useFetcher();
@@ -481,8 +484,7 @@ export const Debug: FC = () => {
   const navigate = useNavigate();
 
   const collectionDragAndDrop = useDragAndDrop({
-    getItems: keys =>
-      [...keys].map(key => ({ 'text/plain': key.toString() })),
+    getItems: keys => [...keys].map(key => ({ 'text/plain': key.toString() })),
     onReorder(event) {
       const [firstKey] = event.keys.values();
       const id = firstKey.toString();
@@ -496,7 +498,8 @@ export const Debug: FC = () => {
       }
 
       // If the item we move is a folder we cannot move it inside it's ancestor folders so we must check the ancestry
-      const isMovingFolderInsideItsChildren = isRequestGroup(dropItem.doc) && targetItem.ancestors?.includes(dropItem.doc._id);
+      const isMovingFolderInsideItsChildren =
+        isRequestGroup(dropItem.doc) && targetItem.ancestors?.includes(dropItem.doc._id);
       if (isMovingFolderInsideItsChildren) {
         return;
       }
@@ -560,7 +563,7 @@ export const Debug: FC = () => {
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/reorder`,
             method: 'POST',
             encType: 'application/json',
-          }
+          },
         );
       }
     },
@@ -571,7 +574,7 @@ export const Debug: FC = () => {
           return (
             <DropIndicator
               target={target}
-              className="absolute w-full z-10 outline-[--color-surprise] left-0 top-0 outline-1 outline"
+              className="absolute left-0 top-0 z-10 w-full outline outline-1 outline-[--color-surprise]"
               style={{
                 transform: `translateY(${target.dropPosition === 'before' ? item?.start : item.end}px)`,
               }}
@@ -580,10 +583,9 @@ export const Debug: FC = () => {
         }
       }
 
-      return <DropIndicator
-        target={target}
-        className="absolute outline-[--color-surprise] left-0 top-0 outline-1 outline"
-      />;
+      return (
+        <DropIndicator target={target} className="absolute left-0 top-0 outline outline-1 outline-[--color-surprise]" />
+      );
     },
   });
 
@@ -598,19 +600,19 @@ export const Debug: FC = () => {
       hint?: PlatformKeyCombinations;
       action: () => void;
     }[];
-  }[] =
-    [
-      {
-        name: 'Create',
-        id: 'create',
-        icon: 'plus',
-        items: [
-          {
-            id: 'New Folder',
-            name: 'New Folder',
-            icon: 'folder',
-            hint: hotKeyRegistry.request_showCreateFolder,
-            action: () => showPrompt({
+  }[] = [
+    {
+      name: 'Create',
+      id: 'create',
+      icon: 'plus',
+      items: [
+        {
+          id: 'New Folder',
+          name: 'New Folder',
+          icon: 'folder',
+          hint: hotKeyRegistry.request_showCreateFolder,
+          action: () =>
+            showPrompt({
               title: 'New Folder',
               defaultValue: 'My Folder',
               submitName: 'Create',
@@ -622,67 +624,69 @@ export const Debug: FC = () => {
                   {
                     action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/new`,
                     method: 'post',
-                  }
+                  },
                 ),
             }),
-          },
-          {
-            id: 'HTTP',
-            name: 'HTTP Request',
-            icon: 'plus-circle',
-            hint: hotKeyRegistry.request_createHTTP,
-            action: () =>
-              createRequest({
-                requestType: 'HTTP',
-                parentId: workspaceId,
-              }),
-          },
-          {
-            id: 'Event Stream',
-            name: 'Event Stream Request (SSE)',
-            icon: 'plus-circle',
-            action: () =>
-              createRequest({
-                requestType: 'Event Stream',
-                parentId: workspaceId,
-              }),
-          },
-          {
-            id: 'GraphQL Request',
-            name: 'GraphQL Request',
-            icon: 'plus-circle',
-            action: () =>
-              createRequest({
-                requestType: 'GraphQL',
-                parentId: workspaceId,
-              }),
-          },
-          {
-            id: 'gRPC Request',
-            name: 'gRPC Request',
-            icon: 'plus-circle',
-            action: () =>
-              createRequest({
-                requestType: 'gRPC',
-                parentId: workspaceId,
-              }),
-          },
-          {
-            id: 'WebSocket Request',
-            name: 'WebSocket Request',
-            icon: 'plus-circle',
-            action: () =>
-              createRequest({
-                requestType: 'WebSocket',
-                parentId: workspaceId,
-              }),
-          }],
-      },
-      {
-        name: 'Import',
-        id: 'import',
-        icon: 'file-import',
-        items: [{
+        },
+        {
+          id: 'HTTP',
+          name: 'HTTP Request',
+          icon: 'plus-circle',
+          hint: hotKeyRegistry.request_createHTTP,
+          action: () =>
+            createRequest({
+              requestType: 'HTTP',
+              parentId: workspaceId,
+            }),
+        },
+        {
+          id: 'Event Stream',
+          name: 'Event Stream Request (SSE)',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
+              requestType: 'Event Stream',
+              parentId: workspaceId,
+            }),
+        },
+        {
+          id: 'GraphQL Request',
+          name: 'GraphQL Request',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
+              requestType: 'GraphQL',
+              parentId: workspaceId,
+            }),
+        },
+        {
+          id: 'gRPC Request',
+          name: 'gRPC Request',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
+              requestType: 'gRPC',
+              parentId: workspaceId,
+            }),
+        },
+        {
+          id: 'WebSocket Request',
+          name: 'WebSocket Request',
+          icon: 'plus-circle',
+          action: () =>
+            createRequest({
+              requestType: 'WebSocket',
+              parentId: workspaceId,
+            }),
+        },
+      ],
+    },
+    {
+      name: 'Import',
+      id: 'import',
+      icon: 'file-import',
+      items: [
+        {
           id: 'From Curl',
           name: 'From Curl',
           icon: 'terminal',
@@ -693,8 +697,10 @@ export const Debug: FC = () => {
           name: 'From File',
           icon: 'file-import',
           action: () => setIsImportModalOpen(true),
-        }],
-      }];
+        },
+      ],
+    },
+  ];
 
   // const allCollapsed = collection.every(item => item.hidden);
   const [allExpanded, setAllExpanded] = useState(false);
@@ -723,26 +729,27 @@ export const Debug: FC = () => {
     }
   }, [collection, expandAllForRequestFetcher.data, expandAllForRequestFetcher.state, requestId, virtualizer]);
 
-  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
+  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
+    settings.forceVerticalLayout ? 'vertical' : 'horizontal',
+  );
   useEffect(() => {
     if (settings.forceVerticalLayout) {
       setDirection('vertical');
-      return () => { };
+      return () => {};
     }
-      // Listen on media query changes
-      const mediaQuery = window.matchMedia('(max-width: 880px)');
-      setDirection(mediaQuery.matches ? 'vertical' : 'horizontal');
+    // Listen on media query changes
+    const mediaQuery = window.matchMedia('(max-width: 880px)');
+    setDirection(mediaQuery.matches ? 'vertical' : 'horizontal');
 
-      const handleChange = (e: MediaQueryListEvent) => {
-        setDirection(e.matches ? 'vertical' : 'horizontal');
-      };
+    const handleChange = (e: MediaQueryListEvent) => {
+      setDirection(e.matches ? 'vertical' : 'horizontal');
+    };
 
-      mediaQuery.addEventListener('change', handleChange);
-
-      return () => {
-        mediaQuery.removeEventListener('change', handleChange);
-      };
+    mediaQuery.addEventListener('change', handleChange);
 
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
   }, [settings.forceVerticalLayout, direction]);
 
   useEffect(() => {
@@ -763,46 +770,48 @@ export const Debug: FC = () => {
   });
 
   return (
-    <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' maxSize={40} minSize={10} collapsible>
-        <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
-          <div className="flex flex-col items-start divide-solid divide-y divide-[--hl-md]">
+    <PanelGroup
+      ref={sidebarPanelRef}
+      autoSaveId="insomnia-sidebar"
+      id="wrapper"
+      className="new-sidebar h-full w-full text-[--color-font]"
+      direction="horizontal"
+    >
+      <Panel id="sidebar" className="sidebar theme--sidebar" maxSize={40} minSize={10} collapsible>
+        <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+          <div className="flex flex-col items-start divide-y divide-solid divide-[--hl-md]">
             <div className={`flex w-full h-[${INSOMNIA_TAB_HEIGHT}px]`}>
-              <Breadcrumbs className='flex h-[--line-height-sm] list-none items-center m-0 gap-2 px-[--padding-sm] font-bold w-full'>
-                <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+              <Breadcrumbs className="m-0 flex h-[--line-height-sm] w-full list-none items-center gap-2 px-[--padding-sm] font-bold">
+                <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
                   <NavLink
                     data-testid="project"
-                    className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
                     to={`/organization/${organizationId}/project/${activeProject._id}`}
                   >
-                    <Icon className='text-xs' icon="chevron-left" />
+                    <Icon className="text-xs" icon="chevron-left" />
                   </NavLink>
-                  <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
+                  <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
                 </Breadcrumb>
-                <Breadcrumb className="flex truncate select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+                <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
                   <WorkspaceDropdown />
                 </Breadcrumb>
-                <Breadcrumb className="flex text-sm truncate select-none items-center justify-self-end ml-auto mr-2.5 gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+                <Breadcrumb className="ml-auto mr-2.5 flex h-full select-none items-center gap-2 justify-self-end truncate text-sm text-[--color-font] outline-none data-[focused]:outline-none">
                   <NavLink
                     data-testid="run-collection-btn-quick"
-                    className="px-2 aria-[current]:hidden py-1 h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] aria-[current]:hidden data-[focused]:outline-none"
                     to={`/organization/${organizationId}/project/${activeWorkspace.parentId}/workspace/${activeWorkspace._id}/debug/runner?folder=`}
                   >
                     <Icon icon="play" />
-                    <span className='truncate'>Run</span>
+                    <span className="truncate">Run</span>
                   </NavLink>
                 </Breadcrumb>
               </Breadcrumbs>
             </div>
             {isDesign(activeWorkspace) && (
-              <DocumentTab
-                organizationId={organizationId}
-                projectId={projectId}
-                workspaceId={workspaceId}
-              />
+              <DocumentTab organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
             )}
-            <div className='flex flex-col items-start gap-2 p-[--padding-sm] w-full'>
-              <div className="flex w-full items-center gap-2 justify-between">
+            <div className="flex w-full flex-col items-start gap-2 p-[--padding-sm]">
+              <div className="flex w-full items-center justify-between gap-2">
                 <EnvironmentPicker
                   isOpen={isEnvironmentPickerOpen}
                   onOpenChange={setIsEnvironmentPickerOpen}
@@ -811,22 +820,31 @@ export const Debug: FC = () => {
               </div>
               <Button
                 onPress={() => setIsCookieModalOpen(true)}
-                className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex max-w-full flex-1 items-center justify-center gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               >
-                <Icon icon="cookie-bite" className='w-5 flex-shrink-0' />
-                <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}</span>
+                <Icon icon="cookie-bite" className="w-5 flex-shrink-0" />
+                <span className="truncate">
+                  {activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies{' '}
+                  {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}
+                </span>
               </Button>
               <Button
                 onPress={() => setCertificatesModalOpen(true)}
-                className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex max-w-full flex-1 items-center justify-center gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               >
-                <Icon icon="file-contract" className='w-5 flex-shrink-0' />
-                <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length > 0 ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})` : ''}</span>
+                <Icon icon="file-contract" className="w-5 flex-shrink-0" />
+                <span className="truncate">
+                  {clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates{' '}
+                  {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined)
+                    .length > 0
+                    ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})`
+                    : ''}
+                </span>
               </Button>
             </div>
           </div>
 
-          <div className="flex flex-col flex-1 overflow-hidden">
+          <div className="flex flex-1 flex-col overflow-hidden">
             <div className="flex justify-between gap-1 p-[--padding-sm]">
               <SearchField
                 aria-label="Request filter"
@@ -841,17 +859,17 @@ export const Debug: FC = () => {
               >
                 <Input
                   placeholder="Filter"
-                  className="py-1 w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
+                  className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                 />
-                <div className="flex items-center px-2 absolute right-0 top-0 h-full">
-                  <Button className="flex group-data-[empty]:hidden items-center justify-center aspect-square w-5 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+                <div className="absolute right-0 top-0 flex h-full items-center px-2">
+                  <Button className="flex aspect-square w-5 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] group-data-[empty]:hidden">
                     <Icon icon="close" />
                   </Button>
                 </div>
               </SearchField>
               <Select
                 aria-label="Sort order"
-                className="h-full aspect-square"
+                className="aspect-square h-full"
                 selectedKey={sortOrder}
                 onSelectionChange={order =>
                   setSearchParams({
@@ -862,11 +880,11 @@ export const Debug: FC = () => {
               >
                 <Button
                   aria-label="Select sort order"
-                  className="flex flex-shrink-0 items-center justify-center aspect-square h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-full flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 >
                   <Icon icon="sort" />
                 </Button>
-                <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                <Popover className="flex min-w-max flex-col overflow-y-hidden">
                   <ListBox
                     items={SORT_ORDERS.map(order => {
                       return {
@@ -874,13 +892,13 @@ export const Debug: FC = () => {
                         name: sortOrderName[order],
                       };
                     })}
-                    className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                    className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                   >
                     {item => (
                       <ListBoxItem
                         id={item.id}
                         key={item.id}
-                        className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                        className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                         aria-label={item.name}
                         textValue={item.name}
                         value={item}
@@ -888,12 +906,7 @@ export const Debug: FC = () => {
                         {({ isSelected }) => (
                           <Fragment>
                             <span>{item.name}</span>
-                            {isSelected && (
-                              <Icon
-                                icon="check"
-                                className="text-[--color-success] justify-self-end"
-                              />
-                            )}
+                            {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                           </Fragment>
                         )}
                       </ListBoxItem>
@@ -908,23 +921,28 @@ export const Debug: FC = () => {
                   defaultSelected={allExpanded}
                   onChange={() => {
                     setAllExpanded(!allExpanded);
-                    toggleExpandAllFetcher.submit({
-                      toggle: allExpanded ? 'collapse-all' : 'expand-all',
-                    }, {
-                      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/toggle-expand-all`,
-                      method: 'POST',
-                      encType: 'application/json',
-                    });
+                    toggleExpandAllFetcher.submit(
+                      {
+                        toggle: allExpanded ? 'collapse-all' : 'expand-all',
+                      },
+                      {
+                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/toggle-expand-all`,
+                        method: 'POST',
+                        encType: 'application/json',
+                      },
+                    );
                   }}
-                  className="flex items-center justify-center h-full aspect-square rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-full items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                 >
                   {({ isSelected }) => (
-                    <Icon icon={isSelected ? 'down-left-and-up-right-to-center' : 'up-right-and-down-left-from-center'} />
+                    <Icon
+                      icon={isSelected ? 'down-left-and-up-right-to-center' : 'up-right-and-down-left-from-center'}
+                    />
                   )}
                 </ToggleButton>
                 <Tooltip
                   offset={8}
-                  className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                  className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                 >
                   <span>{allExpanded ? 'Collapse all' : 'Expand all'}</span>
                 </Tooltip>
@@ -933,21 +951,26 @@ export const Debug: FC = () => {
               <MenuTrigger>
                 <Button
                   aria-label="Create in collection"
-                  className="flex items-center justify-center h-full aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex aspect-square h-full items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 >
                   <Icon icon="plus-circle" />
                 </Button>
-                <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                <Popover className="flex min-w-max flex-col overflow-y-hidden">
                   <Menu
                     aria-label="Create a new request"
                     selectionMode="single"
-                    onAction={key => createInCollectionActionList.find(i => i.items.find(a => a.id === key))?.items.find(a => a.id === key)?.action()}
+                    onAction={key =>
+                      createInCollectionActionList
+                        .find(i => i.items.find(a => a.id === key))
+                        ?.items.find(a => a.id === key)
+                        ?.action()
+                    }
                     items={createInCollectionActionList}
-                    className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                    className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                   >
                     {section => (
-                      <Section className='flex-1 flex flex-col'>
-                        <Header className='pl-2 py-1 flex items-center gap-2 text-[--hl] text-xs uppercase'>
+                      <Section className="flex flex-1 flex-col">
+                        <Header className="flex items-center gap-2 py-1 pl-2 text-xs uppercase text-[--hl]">
                           <Icon icon={section.icon} /> <span>{section.name}</span>
                         </Header>
                         <Collection items={section.items}>
@@ -955,12 +978,12 @@ export const Debug: FC = () => {
                             <MenuItem
                               key={item.id}
                               id={item.id}
-                              className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                               aria-label={item.name}
                             >
                               <Icon icon={item.icon} />
                               <span>{item.name}</span>
-                              {item.hint && (<DropdownHint keyBindings={item.hint} />)}
+                              {item.hint && <DropdownHint keyBindings={item.hint} />}
                             </MenuItem>
                           )}
                         </Collection>
@@ -973,7 +996,7 @@ export const Debug: FC = () => {
 
             <GridList
               id="sidebar-pinned-request-gridlist"
-              className="overflow-y-auto border-b border-t data-[empty]:py-0 py-[--padding-sm] data-[empty]:border-none border-solid border-[--hl-sm] max-h-[50%]"
+              className="max-h-[50%] overflow-y-auto border-b border-t border-solid border-[--hl-sm] py-[--padding-sm] data-[empty]:border-none data-[empty]:py-0"
               items={collection.filter(item => item.pinned)}
               aria-label="Pinned Requests"
               disallowEmptySelection
@@ -983,50 +1006,46 @@ export const Debug: FC = () => {
                 if (keys !== 'all') {
                   const value = keys.values().next().value;
                   navigate(
-                    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${value}?${searchParams.toString()}`
+                    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${value}?${searchParams.toString()}`,
                   );
                 }
               }}
             >
               {item => {
-
                 return (
                   <GridListItem
                     key={item.doc._id}
                     id={item.doc._id}
-                    className="group outline-none select-none"
+                    className="group select-none outline-none"
                     textValue={item.doc.name}
                     data-testid={item.doc.name}
                   >
-                    <div
-                      className="flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
-                    >
-                      <span className="group-aria-selected:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
+                    <div className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]">
+                      <span className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors group-aria-selected:bg-[--color-surprise]" />
                       {isRequest(item.doc) && (
                         <span
-                          className={
-                            `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-                            ${{
-                              'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-                              'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-                              'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                              'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                              'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-                              'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-                              'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-                            }[item.doc.method] || 'text-[--color-font] bg-[--hl-md]'}`
-                          }
+                          className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+                            {
+                              GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                              POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                              HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                              OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                              DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                              PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                              PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+                            }[item.doc.method] || 'bg-[--hl-md] text-[--color-font]'
+                          }`}
                         >
                           {getMethodShortHand(item.doc)}
                         </span>
                       )}
                       {isWebSocketRequest(item.doc) && (
-                        <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
+                        <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]">
                           WS
                         </span>
                       )}
                       {isGrpcRequest(item.doc) && (
-                        <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
+                        <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]">
                           gRPC
                         </span>
                       )}
@@ -1034,7 +1053,7 @@ export const Debug: FC = () => {
                         value={getRequestNameOrFallback(item.doc)}
                         name="request name"
                         ariaLabel="request name"
-                        className="px-1 flex-1"
+                        className="flex-1 px-1"
                         onSubmit={name => {
                           if (isRequestGroup(item.doc)) {
                             patchGroup(item.doc._id, { name });
@@ -1043,16 +1062,14 @@ export const Debug: FC = () => {
                           }
                         }}
                       />
-                      {item.pinned && (
-                        <Icon className='text-[--font-size-sm]' icon="thumb-tack" />
-                      )}
+                      {item.pinned && <Icon className="text-[--font-size-sm]" icon="thumb-tack" />}
                     </div>
                   </GridListItem>
                 );
               }}
             </GridList>
 
-            <div className='flex-1 overflow-y-auto' ref={parentRef} >
+            <div className="flex-1 overflow-y-auto" ref={parentRef}>
               <GridList
                 id="sidebar-request-gridlist"
                 style={{ height: virtualizer.getTotalSize() }}
@@ -1067,11 +1084,15 @@ export const Debug: FC = () => {
                     const item = collection.find(i => i.doc._id === id);
                     if (item) {
                       groupMetaPatcher(item.doc._id, { collapsed: !item.collapsed });
-                      navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${id}?${searchParams.toString()}`);
+                      navigate(
+                        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${id}?${searchParams.toString()}`,
+                      );
                       return;
                     }
                   }
-                  navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${id}?${searchParams.toString()}`);
+                  navigate(
+                    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${id}?${searchParams.toString()}`,
+                  );
                 }}
               >
                 {virtualItem => {
@@ -1085,26 +1106,28 @@ export const Debug: FC = () => {
                     label = `gRPC ${label}`;
                   }
 
-                  return <CollectionGridListItem
-                    {...{
-                      label,
-                      style: {
-                        height: `${virtualItem.size}`,
-                        transform: `translateY(${virtualItem.start}px)`,
-                      },
-                      item,
-                      navigate,
-                      organizationId,
-                      projectId,
-                      workspaceId,
-                      searchParams,
-                      groupMetaPatcher,
-                      patchGroup,
-                      patchRequest,
-                      activeEnvironment,
-                      activeProject,
-                    }}
-                  />;
+                  return (
+                    <CollectionGridListItem
+                      {...{
+                        label,
+                        style: {
+                          height: `${virtualItem.size}`,
+                          transform: `translateY(${virtualItem.start}px)`,
+                        },
+                        item,
+                        navigate,
+                        organizationId,
+                        projectId,
+                        workspaceId,
+                        searchParams,
+                        groupMetaPatcher,
+                        patchGroup,
+                        patchRequest,
+                        activeEnvironment,
+                        activeProject,
+                      }}
+                    />
+                  );
                 }}
               </GridList>
             </div>
@@ -1112,11 +1135,7 @@ export const Debug: FC = () => {
 
           <WorkspaceSyncDropdown />
 
-          {isEnvironmentModalOpen && (
-            <WorkspaceEnvironmentsEditModal
-              onClose={() => setEnvironmentModalOpen(false)}
-            />
-          )}
+          {isEnvironmentModalOpen && <WorkspaceEnvironmentsEditModal onClose={() => setEnvironmentModalOpen(false)} />}
           {isImportModalOpen && (
             <ImportModal
               onHide={() => setIsImportModalOpen(false)}
@@ -1128,12 +1147,8 @@ export const Debug: FC = () => {
               defaultWorkspaceId={workspaceId}
             />
           )}
-          {isCookieModalOpen && (
-            <CookiesModal setIsOpen={setIsCookieModalOpen} />
-          )}
-          {isCertificatesModalOpen && (
-            <CertificatesModal onClose={() => setCertificatesModalOpen(false)} />
-          )}
+          {isCookieModalOpen && <CookiesModal setIsOpen={setIsCookieModalOpen} />}
+          {isCertificatesModalOpen && <CertificatesModal onClose={() => setCertificatesModalOpen(false)} />}
           {isPasteCurlModalOpen && (
             <PasteCurlModal
               onImport={req => {
@@ -1149,21 +1164,19 @@ export const Debug: FC = () => {
           )}
         </div>
       </Panel>
-      <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
-      <Panel className='flex flex-col'>
-        <OrganizationTabList currentPage='debug' />
+      <PanelResizeHandle className="h-full w-[1px] bg-[--hl-md]" />
+      <Panel className="flex flex-col">
+        <OrganizationTabList currentPage="debug" />
         <PanelGroup autoSaveId="insomnia-panels" id="insomnia-panels" direction={direction}>
           <Routes>
             <Route
               path="*"
               element={
                 <>
-                  <Panel id="pane-one" order={1} minSize={10} className='pane-one theme--pane'>
+                  <Panel id="pane-one" order={1} minSize={10} className="pane-one theme--pane">
                     {workspaceId ? (
                       <ErrorBoundary showAlert>
-                        {isRequestGroupId(requestGroupId) && (
-                          <RequestGroupPane settings={settings} />
-                        )}
+                        {isRequestGroupId(requestGroupId) && <RequestGroupPane settings={settings} />}
                         {isGrpcRequestId(requestId) && grpcState && (
                           <GrpcRequestPane
                             key={grpcState.requestId}
@@ -1172,9 +1185,7 @@ export const Debug: FC = () => {
                             reloadRequests={reloadRequests}
                           />
                         )}
-                        {isWebSocketRequestId(requestId) && (
-                          <WebSocketRequestPane environment={activeEnvironment} />
-                        )}
+                        {isWebSocketRequestId(requestId) && <WebSocketRequestPane environment={activeEnvironment} />}
                         {isRequestId(requestId) && (
                           <RequestPane
                             environmentId={activeEnvironment ? activeEnvironment._id : ''}
@@ -1195,37 +1206,34 @@ export const Debug: FC = () => {
                       </ErrorBoundary>
                     ) : null}
                   </Panel>
-                  {
-                    activeRequest ? (<>
-                      <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
-                      <Panel id="pane-two" order={2} minSize={10} className='pane-two theme--pane'>
+                  {activeRequest ? (
+                    <>
+                      <PanelResizeHandle
+                        className={
+                          direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'h-[1px] w-full bg-[--hl-md]'
+                        }
+                      />
+                      <Panel id="pane-two" order={2} minSize={10} className="pane-two theme--pane">
                         <ErrorBoundary showAlert>
                           {activeRequest && isGrpcRequest(activeRequest) && grpcState && (
                             <GrpcResponsePane grpcState={grpcState} />
                           )}
-                          {isRealtimeRequest && (
-                            <RealtimeResponsePane requestId={activeRequest._id} />
-                          )}
+                          {isRealtimeRequest && <RealtimeResponsePane requestId={activeRequest._id} />}
                           {activeRequest && isRequest(activeRequest) && !isRealtimeRequest && (
                             <ResponsePane activeRequestId={activeRequest._id} />
                           )}
                         </ErrorBoundary>
                       </Panel>
-                    </>) : null
-                  }
+                    </>
+                  ) : null}
                 </>
               }
             />
-            <Route
-              path="runner"
-              element={
-                <Runner />
-              }
-            />
+            <Route path="runner" element={<Runner />} />
           </Routes>
         </PanelGroup>
       </Panel>
-    </PanelGroup >
+    </PanelGroup>
   );
 };
 
@@ -1261,26 +1269,37 @@ const CollectionGridListItem = ({
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
 
-  const action = isRequestGroup(item.doc) ? `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${item.doc._id}/update` : `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${item.doc._id}/update`;
+  const action = isRequestGroup(item.doc)
+    ? `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request-group/${item.doc._id}/update`
+    : `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${item.doc._id}/update`;
 
   const patchFetcher = useFetchers().find(f => f.formAction === action);
 
-  const name = patchFetcher?.json && typeof patchFetcher.json === 'object' && 'name' in patchFetcher.json && typeof patchFetcher.json.name === 'string' ? patchFetcher.json.name : item.doc.name;
+  const name =
+    patchFetcher?.json &&
+    typeof patchFetcher.json === 'object' &&
+    'name' in patchFetcher.json &&
+    typeof patchFetcher.json.name === 'string'
+      ? patchFetcher.json.name
+      : item.doc.name;
 
   const params = useParams() as { requestId?: string; requestGroupId?: string };
 
   const isSelected = item.doc._id === params.requestId || item.doc._id === params.requestGroupId;
 
-  const scrollIntoView = useCallback((node: HTMLDivElement) => {
-    if (isSelected && node) {
-      scrollElementIntoView(node, { behavior: 'instant' });
-    }
-  }, [isSelected]);
+  const scrollIntoView = useCallback(
+    (node: HTMLDivElement) => {
+      if (isSelected && node) {
+        scrollElementIntoView(node, { behavior: 'instant' });
+      }
+    },
+    [isSelected],
+  );
 
   return (
     <GridListItem
       id={item.doc._id}
-      className={`group outline-none absolute top-0 left-0 select-none w-full ${isRequestGroup(item.doc) ? 'data-[drop-target]:bg-[--hl-md]' : 'data-[drop-target]:border-b border-solid data-[drop-target]:border-[--color-surprise]'}`}
+      className={`group absolute left-0 top-0 w-full select-none outline-none ${isRequestGroup(item.doc) ? 'data-[drop-target]:bg-[--hl-md]' : 'border-solid data-[drop-target]:border-b data-[drop-target]:border-[--color-surprise]'}`}
       textValue={label}
       data-testid={item.doc.name}
       style={style}
@@ -1294,47 +1313,56 @@ const CollectionGridListItem = ({
         }}
         onDoubleClick={() => setIsEditable(true)}
         data-selected={isSelected}
-        className="flex select-none outline-none data-[selected=true]:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 pl-4 pr-2 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden pl-4 pr-2 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] data-[selected=true]:text-[--color-font]"
         style={{
           paddingLeft: `${item.level + 1}rem`,
         }}
       >
-        <span data-selected={isSelected} className="data-[selected=true]:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
+        <span
+          data-selected={isSelected}
+          className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors data-[selected=true]:bg-[--color-surprise]"
+        />
         <Button slot="drag" className="hidden" />
         {isRequest(item.doc) && (
           <span
             aria-hidden
             role="presentation"
-            className={`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-                                ${{
-                'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-                'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-                'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-                'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-                'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-              }[item.doc.method] || 'text-[--color-font] bg-[--hl-md]'}`}
+            className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+              {
+                GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+              }[item.doc.method] || 'bg-[--hl-md] text-[--color-font]'
+            }`}
           >
             {getMethodShortHand(item.doc)}
           </span>
         )}
         {isWebSocketRequest(item.doc) && (
-          <span aria-hidden role="presentation" className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
+          <span
+            aria-hidden
+            role="presentation"
+            className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]"
+          >
             WS
           </span>
         )}
         {isGrpcRequest(item.doc) && (
-          <span aria-hidden role="presentation" className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
+          <span
+            aria-hidden
+            role="presentation"
+            className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]"
+          >
             gRPC
           </span>
         )}
         {isRequestGroup(item.doc) && (
           <span>
-            <Icon
-              className="w-6 flex-shrink-0"
-              icon={item.collapsed ? 'folder' : 'folder-open'}
-            />
+            <Icon className="w-6 flex-shrink-0" icon={item.collapsed ? 'folder' : 'folder-open'} />
           </span>
         )}
         <EditableInput
@@ -1356,9 +1384,7 @@ const CollectionGridListItem = ({
         {isGraphqlSubscriptionRequest(item.doc) && <WebSocketSpinner requestId={item.doc._id} />}
         {isRequest(item.doc) && <RequestTiming requestId={item.doc._id} />}
         {isEventStreamRequest(item.doc) && <EventStreamSpinner requestId={item.doc._id} />}
-        {item.pinned && (
-          <Icon className='text-[--font-size-sm]' icon="thumb-tack" />
-        )}
+        {item.pinned && <Icon className="text-[--font-size-sm]" icon="thumb-tack" />}
         {isRequestGroup(item.doc) ? (
           <RequestGroupActionsDropdown
             requestGroup={item.doc}
diff --git a/packages/insomnia/src/ui/routes/design.tsx b/packages/insomnia/src/ui/routes/design.tsx
index 7b8c8852f4..288ea13232 100644
--- a/packages/insomnia/src/ui/routes/design.tsx
+++ b/packages/insomnia/src/ui/routes/design.tsx
@@ -52,10 +52,7 @@ import type { ApiSpec } from '../../models/api-spec';
 import * as models from '../../models/index';
 import { isGitProject } from '../../models/project';
 import { invariant } from '../../utils/invariant';
-import {
-  CodeEditor,
-  type CodeEditorHandle,
-} from '../components/codemirror/code-editor';
+import { CodeEditor, type CodeEditorHandle } from '../components/codemirror/code-editor';
 import { DesignEmptyState } from '../components/design-empty-state';
 import { DocumentTab } from '../components/document-tab';
 import { WorkspaceDropdown } from '../components/dropdowns/workspace-dropdown';
@@ -72,10 +69,7 @@ import { formatMethodName } from '../components/tags/method-tag';
 import { INSOMNIA_TAB_HEIGHT } from '../constant';
 import { useAIContext } from '../context/app/ai-context';
 import { useInsomniaTab } from '../hooks/use-insomnia-tab';
-import {
-  useActiveApiSpecSyncVCSVersion,
-  useGitVCSVersion,
-} from '../hooks/use-vcs-version';
+import { useActiveApiSpecSyncVCSVersion, useGitVCSVersion } from '../hooks/use-vcs-version';
 import { SpectralRunner } from '../worker/spectral-handler';
 import { useRootLoaderData } from './root';
 import type { WorkspaceLoaderData } from './workspace';
@@ -86,9 +80,7 @@ interface LoaderData {
   parsedSpec?: OpenAPIV3.Document;
 }
 
-export const loader: LoaderFunction = async ({
-  params,
-}): Promise<LoaderData> => {
+export const loader: LoaderFunction = async ({ params }): Promise<LoaderData> => {
   const { projectId, workspaceId } = params;
   invariant(projectId, 'Project ID is required');
   invariant(workspaceId, 'Workspace ID is required');
@@ -111,7 +103,7 @@ export const loader: LoaderFunction = async ({
 
     const spectralRulesetPath = path.join(
       process.env['INSOMNIA_DATA_PATH'] || window.app.getPath('userData'),
-      `version-control/git/${gitRepositoryId}/other/.spectral.yaml`
+      `version-control/git/${gitRepositoryId}/other/.spectral.yaml`,
     );
 
     if ((await stat(spectralRulesetPath)).isFile()) {
@@ -124,7 +116,7 @@ export const loader: LoaderFunction = async ({
 
   try {
     parsedSpec = YAML.parse(apiSpec.contents) as OpenAPIV3.Document;
-  } catch { }
+  } catch {}
 
   return {
     apiSpec,
@@ -138,7 +130,7 @@ const SwaggerUIDiv = ({ text }: { text: string }) => {
     let spec = {};
     try {
       spec = parseApiSpec(text).contents || {};
-    } catch (err) { }
+    } catch (err) {}
     SwaggerUIBundle({ spec, dom_id: '#swagger-ui' });
   }, [text]);
   return (
@@ -168,21 +160,12 @@ interface SpecActionItem {
   action: () => void;
 }
 
-const getMethodsFromOpenApiPathItem = (
-  pathItem: OpenAPIV3.PathItemObject
-): string[] => {
-  const methods = [
-    'get',
-    'put',
-    'post',
-    'delete',
-    'options',
-    'head',
-    'patch',
-    'trace',
-  ].filter(method =>
-    // @ts-expect-error -- shrug I don't care what pathItem has in it
-    pathItem[method]);
+const getMethodsFromOpenApiPathItem = (pathItem: OpenAPIV3.PathItemObject): string[] => {
+  const methods = ['get', 'put', 'post', 'delete', 'options', 'head', 'patch', 'trace'].filter(
+    method =>
+      // @ts-expect-error -- shrug I don't care what pathItem has in it
+      pathItem[method],
+  );
 
   return methods;
 };
@@ -197,13 +180,9 @@ const Design: FC = () => {
     projectId: string;
     workspaceId: string;
   };
-  const {
-    activeProject,
-    activeCookieJar,
-    caCertificate,
-    clientCertificates,
-    activeWorkspace,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeProject, activeCookieJar, caCertificate, clientCertificates, activeWorkspace } = useRouteLoaderData(
+    ':workspaceId',
+  ) as WorkspaceLoaderData;
   const { settings } = useRootLoaderData();
 
   const [isCookieModalOpen, setIsCookieModalOpen] = useState(false);
@@ -222,19 +201,10 @@ const Design: FC = () => {
   const [isSpecPaneOpen, setIsSpecPaneOpen] = useState(true);
 
   const { components, info, servers, paths } = parsedSpec || {};
-  const {
-    requestBodies,
-    responses,
-    parameters,
-    headers,
-    schemas,
-    securitySchemes,
-  } = components || {};
+  const { requestBodies, responses, parameters, headers, schemas, securitySchemes } = components || {};
 
   const lintErrors = lintMessages.filter(message => message.type === 'error');
-  const lintWarnings = lintMessages.filter(
-    message => message.type === 'warning'
-  );
+  const lintWarnings = lintMessages.filter(message => message.type === 'warning');
 
   const spectralRunnerRef = useRef<SpectralRunner>();
 
@@ -251,10 +221,7 @@ const Design: FC = () => {
         const diagnostics = await runner.runDiagnostics({ contents, rulesetPath });
         const lintResult = diagnostics.map(({ severity, code, message, range }) => {
           return {
-            from: CodeMirror.Pos(
-              range.start.line,
-              range.start.character
-            ),
+            from: CodeMirror.Pos(range.start.line, range.start.character),
             to: CodeMirror.Pos(range.end.line, range.end.character),
             message: `${code} ${message}`,
             severity: ['error', 'warning'][severity] ?? 'info',
@@ -293,7 +260,7 @@ const Design: FC = () => {
         {
           action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/${ACTIVITY_SPEC}/update`,
           method: 'post',
-        }
+        },
       );
     };
 
@@ -307,7 +274,7 @@ const Design: FC = () => {
       }
       editor.current.scrollToSelection(chStart, chEnd, lineStart, lineEnd);
     },
-    [editor]
+    [editor],
   );
 
   const handleScrollToLintMessage = useCallback(
@@ -319,14 +286,9 @@ const Design: FC = () => {
         return;
       }
       const { start, end } = notice.range;
-      editor.current.scrollToSelection(
-        start.character,
-        end.character,
-        start.line,
-        end.line
-      );
+      editor.current.scrollToSelection(start.character, end.character, start.line, end.line);
     },
-    [editor]
+    [editor],
   );
 
   const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
@@ -342,13 +304,13 @@ const Design: FC = () => {
       JSON.parse(apiSpec.contents);
       // Account for JSON (as string) line number shift
       scrollPosition.start.line = 1;
-    } catch { }
+    } catch {}
 
     const sourceMap = new YAMLSourceMap();
     const specMap = sourceMap.index(
       YAML.parseDocument(apiSpec.contents, {
         keepCstNodes: true,
-      })
+      }),
     );
     const itemMappedPosition = sourceMap.lookup(pathSegments, specMap);
     if (itemMappedPosition) {
@@ -366,7 +328,7 @@ const Design: FC = () => {
       scrollPosition.start.col - 1,
       scrollPosition.end.col - 1,
       scrollPosition.start.line - 1,
-      scrollPosition.end.line - 1
+      scrollPosition.end.line - 1,
     );
   };
 
@@ -407,46 +369,43 @@ const Design: FC = () => {
       name: 'Generate tests',
       action: generateTestsFromSpec,
       isDisabled: !access.enabled || generating,
-      icon: <InsomniaAI className='w-3' />,
+      icon: <InsomniaAI className="w-3" />,
     },
     {
       id: 'generate-request-collection',
       name: 'Generate collection',
-      icon: <Icon className='w-3' icon="file-code" />,
-      isDisabled:
-        !apiSpec.contents ||
-        lintErrors.length > 0 ||
-        generateRequestCollectionFetcher.state !== 'idle',
+      icon: <Icon className="w-3" icon="file-code" />,
+      isDisabled: !apiSpec.contents || lintErrors.length > 0 || generateRequestCollectionFetcher.state !== 'idle',
       action: () =>
         generateRequestCollectionFetcher.submit(
           {},
           {
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/${ACTIVITY_SPEC}/generate-request-collection`,
             method: 'POST',
-          }
+          },
         ),
     },
     {
       id: 'toggle-preview',
       name: 'Toggle preview',
-      icon: <Icon className='w-3' icon={isSpecPaneOpen ? 'eye' : 'eye-slash'} />,
+      icon: <Icon className="w-3" icon={isSpecPaneOpen ? 'eye' : 'eye-slash'} />,
       action: () => setIsSpecPaneOpen(!isSpecPaneOpen),
     },
   ];
 
-  const disabledKeys = specActionList
-    .filter(item => item.isDisabled)
-    .map(item => item.id);
+  const disabledKeys = specActionList.filter(item => item.isDisabled).map(item => item.id);
 
   const gitVersion = useGitVCSVersion();
   const syncVersion = useActiveApiSpecSyncVCSVersion();
   const uniquenessKey = `${apiSpec?._id}::${apiSpec?.created}::${gitVersion}::${syncVersion}`;
 
-  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
+  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
+    settings.forceVerticalLayout ? 'vertical' : 'horizontal',
+  );
   useLayoutEffect(() => {
     if (settings.forceVerticalLayout) {
       setDirection('vertical');
-      return () => { };
+      return () => {};
     }
     // Listen on media query changes
     const mediaQuery = window.matchMedia('(max-width: 880px)');
@@ -461,7 +420,6 @@ const Design: FC = () => {
     return () => {
       mediaQuery.removeEventListener('change', handleChange);
     };
-
   }, [settings.forceVerticalLayout, direction]);
 
   useInsomniaTab({
@@ -473,21 +431,36 @@ const Design: FC = () => {
   });
 
   return (
-    <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
-        <div className='flex h-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden'>
-          <Breadcrumbs className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] px-[--padding-sm] list-none items-center m-0 gap-2 font-bold w-full`}>
-            <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+    <PanelGroup
+      ref={sidebarPanelRef}
+      autoSaveId="insomnia-sidebar"
+      id="wrapper"
+      className="new-sidebar h-full w-full text-[--color-font]"
+      direction="horizontal"
+    >
+      <Panel
+        id="sidebar"
+        className="sidebar theme--sidebar"
+        defaultSize={DEFAULT_SIDEBAR_SIZE}
+        maxSize={40}
+        minSize={10}
+        collapsible
+      >
+        <div className="flex h-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+          <Breadcrumbs
+            className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
+          >
+            <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
               <NavLink
                 data-testid="project"
-                className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
                 to={`/organization/${organizationId}/project/${activeProject._id}`}
               >
-                <Icon className='text-xs' icon="chevron-left" />
+                <Icon className="text-xs" icon="chevron-left" />
               </NavLink>
-              <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
+              <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
             </Breadcrumb>
-            <Breadcrumb className="flex truncate select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+            <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
               <WorkspaceDropdown />
             </Breadcrumb>
           </Breadcrumbs>
@@ -495,10 +468,10 @@ const Design: FC = () => {
             organizationId={organizationId}
             projectId={projectId}
             workspaceId={workspaceId}
-            className='border-solid border-b border-[--hl-sm]'
+            className="border-b border-solid border-[--hl-sm]"
           />
-          <div className='flex flex-col items-start gap-2 p-[--padding-sm] w-full'>
-            <div className="flex w-full items-center gap-2 justify-between">
+          <div className="flex w-full flex-col items-start gap-2 p-[--padding-sm]">
+            <div className="flex w-full items-center justify-between gap-2">
               <EnvironmentPicker
                 isOpen={isEnvironmentPickerOpen}
                 onOpenChange={setIsEnvironmentPickerOpen}
@@ -507,26 +480,35 @@ const Design: FC = () => {
             </div>
             <Button
               onPress={() => setIsCookieModalOpen(true)}
-              className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex max-w-full flex-1 items-center justify-center gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             >
-              <Icon icon="cookie-bite" className='w-5 flex-shrink-0' />
-              <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}</span>
+              <Icon icon="cookie-bite" className="w-5 flex-shrink-0" />
+              <span className="truncate">
+                {activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies{' '}
+                {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}
+              </span>
             </Button>
             <Button
               onPress={() => setCertificatesModalOpen(true)}
-              className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex max-w-full flex-1 items-center justify-center gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             >
-              <Icon icon="file-contract" className='w-5 flex-shrink-0' />
-              <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length > 0 ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})` : ''}</span>
+              <Icon icon="file-contract" className="w-5 flex-shrink-0" />
+              <span className="truncate">
+                {clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates{' '}
+                {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined)
+                  .length > 0
+                  ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})`
+                  : ''}
+              </span>
             </Button>
           </div>
           <div className="flex flex-shrink-0 items-center gap-2 p-[--padding-sm]">
-            <Heading className="text-[--hl] uppercase">Spec</Heading>
+            <Heading className="uppercase text-[--hl]">Spec</Heading>
             <span className="flex-1" />
             <ToggleButton
               aria-label="Toggle preview"
               isSelected={isSpecPaneOpen}
-              className="flex items-center justify-center gap-2 px-2 h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex h-full items-center justify-center gap-2 rounded-sm px-2 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               onChange={setIsSpecPaneOpen}
             >
               {({ isSelected }) => (
@@ -539,29 +521,27 @@ const Design: FC = () => {
             <MenuTrigger>
               <Button
                 aria-label="Spec actions"
-                className="flex items-center justify-center h-full aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex aspect-square h-full items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
               >
                 <Icon icon="gear" />
               </Button>
-              <Popover className="min-w-max overflow-y-hidden flex flex-col">
+              <Popover className="flex min-w-max flex-col overflow-y-hidden">
                 <Menu
                   aria-label="Spec actions menu"
                   selectionMode="single"
                   disabledKeys={disabledKeys}
                   onAction={key => {
-                    const item = specActionList.find(
-                      item => item.id === key
-                    );
+                    const item = specActionList.find(item => item.id === key);
                     if (item) {
                       item.action();
                     }
                   }}
                   items={specActionList}
-                  className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                  className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                 >
                   {item => (
                     <MenuItem
-                      className="flex gap-2 aria-disabled:text-[--hl-md] aria-disabled:cursor-not-allowed px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                      className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed aria-disabled:text-[--hl-md] aria-selected:font-bold"
                       aria-label={item.name}
                     >
                       {item.icon}
@@ -572,56 +552,47 @@ const Design: FC = () => {
               </Popover>
             </MenuTrigger>
           </div>
-          <div className="flex-1 flex flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto">
+          <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto">
             {/* Info */}
             {info && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <Button
-                  className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                  className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                   onPress={() => {
                     expandedKeys.includes('info')
-                      ? setExpandedKeys(
-                        expandedKeys.filter(key => key !== 'info')
-                      )
+                      ? setExpandedKeys(expandedKeys.filter(key => key !== 'info'))
                       : setExpandedKeys([...expandedKeys, 'info']);
                   }}
                 >
-                  <span className='truncate'>Info</span>
-                  <Icon
-                    icon={expandedKeys.includes('info') ? 'minus' : 'plus'}
-                    className='text-xs'
-                  />
+                  <span className="truncate">Info</span>
+                  <Icon icon={expandedKeys.includes('info') ? 'minus' : 'plus'} className="text-xs" />
                 </Button>
                 {/* Info */}
                 {expandedKeys.includes('info') && (
                   <ListBox onAction={key => navigateToPath(key.toString())}>
                     <ListBoxItem
-                      className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                      className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                       id="info.title"
                     >
                       <span className="truncate">Title: {info.title}</span>
                     </ListBoxItem>
                     <ListBoxItem
-                      className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                      className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                       id="info.description"
                     >
-                      <span className="truncate">
-                        Description: {info.description}
-                      </span>
+                      <span className="truncate">Description: {info.description}</span>
                     </ListBoxItem>
                     <ListBoxItem
-                      className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                      className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                       id="info.version"
                     >
                       <span className="truncate">Version: {info.version}</span>
                     </ListBoxItem>
                     <ListBoxItem
-                      className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                      className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                       id="info.license"
                     >
-                      <span className="truncate">
-                        License: {info.license?.name}
-                      </span>
+                      <span className="truncate">License: {info.license?.name}</span>
                     </ListBoxItem>
                   </ListBox>
                 )}
@@ -629,23 +600,18 @@ const Design: FC = () => {
             )}
             {/* Servers */}
             {servers && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('servers')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'servers')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'servers'))
                         : setExpandedKeys([...expandedKeys, 'servers']);
                     }}
                   >
-                    <span className='truncate'>Servers</span>
-                    <Icon
-                      icon={expandedKeys.includes('servers') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Servers</span>
+                    <Icon icon={expandedKeys.includes('servers') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('servers') && (
@@ -658,7 +624,7 @@ const Design: FC = () => {
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`servers.${item.path}`}
                       >
                         {item.url}
@@ -670,23 +636,18 @@ const Design: FC = () => {
             )}
             {/* Paths */}
             {paths && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('paths')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'paths')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'paths'))
                         : setExpandedKeys([...expandedKeys, 'paths']);
                     }}
                   >
-                    <span className='truncate'>Paths</span>
-                    <Icon
-                      icon={expandedKeys.includes('paths') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Paths</span>
+                    <Icon icon={expandedKeys.includes('paths') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('paths') && (
@@ -699,20 +660,15 @@ const Design: FC = () => {
                     onAction={key => navigateToPath(key.toString())}
                   >
                     {item => (
-                      <GridListItem
-                        className="group outline-none select-none"
-                        id={`paths.${item.path}`}
-                      >
-                        <div className="flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]">
+                      <GridListItem className="group select-none outline-none" id={`paths.${item.path}`}>
+                        <div className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]">
                           <span className="truncate">{item.path}</span>
                           <span className="flex-1" />
                           {getMethodsFromOpenApiPathItem(item).map(method => (
                             <Button
                               key={method}
-                              onPress={() =>
-                                navigateToPath(`paths.${item.path}.${method}`)
-                              }
-                              className={`w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center http-method-${method.toUpperCase()}`}
+                              onPress={() => navigateToPath(`paths.${item.path}.${method}`)}
+                              className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] http-method-${method.toUpperCase()}`}
                             >
                               {formatMethodName(method.toUpperCase())}
                             </Button>
@@ -726,41 +682,32 @@ const Design: FC = () => {
             )}
             {/* RequestBodies */}
             {requestBodies && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('requestBodies')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(
-                            key => key !== 'requestBodies'
-                          )
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'requestBodies'))
                         : setExpandedKeys([...expandedKeys, 'requestBodies']);
                     }}
                   >
-                    <span className='truncate'>Request bodies</span>
-                    <Icon
-                      icon={expandedKeys.includes('requestBodies') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Request bodies</span>
+                    <Icon icon={expandedKeys.includes('requestBodies') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('requestBodies') && (
                   <ListBox
-                    items={Object.entries(requestBodies).map(
-                      ([path, item]) => ({
-                        ...item,
-                        id: path,
-                        path,
-                      })
-                    )}
+                    items={Object.entries(requestBodies).map(([path, item]) => ({
+                      ...item,
+                      id: path,
+                      path,
+                    }))}
                     onAction={key => navigateToPath(key.toString())}
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`components.requestBodies.${item.path}`}
                       >
                         <span className="truncate">{item.path}</span>
@@ -772,25 +719,18 @@ const Design: FC = () => {
             )}
             {/* Responses */}
             {responses && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('responses')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'responses')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'responses'))
                         : setExpandedKeys([...expandedKeys, 'responses']);
                     }}
                   >
-                    <span className='truncate'>
-                      Responses
-                    </span>
-                    <Icon
-                      icon={expandedKeys.includes('responses') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Responses</span>
+                    <Icon icon={expandedKeys.includes('responses') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('responses') && (
@@ -804,7 +744,7 @@ const Design: FC = () => {
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`components.responses.${item.path}`}
                       >
                         <span className="truncate">{item.path}</span>
@@ -816,25 +756,18 @@ const Design: FC = () => {
             )}
             {/* Parameters */}
             {parameters && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('parameters')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'parameters')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'parameters'))
                         : setExpandedKeys([...expandedKeys, 'parameters']);
                     }}
                   >
-                    <span className='truncate'>
-                      Parameters
-                    </span>
-                    <Icon
-                      icon={expandedKeys.includes('parameters') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Parameters</span>
+                    <Icon icon={expandedKeys.includes('parameters') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('parameters') && (
@@ -848,7 +781,7 @@ const Design: FC = () => {
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`components.parameters.${item.path}`}
                       >
                         <span className="truncate">{item.path}</span>
@@ -860,25 +793,18 @@ const Design: FC = () => {
             )}
             {/* Headers */}
             {headers && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('headers')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'headers')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'headers'))
                         : setExpandedKeys([...expandedKeys, 'headers']);
                     }}
                   >
-                    <span className='truncate'>
-                      Headers
-                    </span>
-                    <Icon
-                      icon={expandedKeys.includes('headers') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Headers</span>
+                    <Icon icon={expandedKeys.includes('headers') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('headers') && (
@@ -892,7 +818,7 @@ const Design: FC = () => {
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`components.headers.${item.path}`}
                       >
                         <span className="truncate">{item.path}</span>
@@ -904,25 +830,18 @@ const Design: FC = () => {
             )}
             {/* Schemas */}
             {schemas && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('schemas')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'schemas')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'schemas'))
                         : setExpandedKeys([...expandedKeys, 'schemas']);
                     }}
                   >
-                    <span className='truncate'>
-                      Schemas
-                    </span>
-                    <Icon
-                      icon={expandedKeys.includes('schemas') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Schemas</span>
+                    <Icon icon={expandedKeys.includes('schemas') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('schemas') && (
@@ -936,7 +855,7 @@ const Design: FC = () => {
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`components.schemas.${item.path}`}
                       >
                         <span className="truncate">{item.path}</span>
@@ -948,41 +867,32 @@ const Design: FC = () => {
             )}
             {/* Security */}
             {securitySchemes && (
-              <div className='divide-y divide-solid divide-[--hl-md]'>
+              <div className="divide-y divide-solid divide-[--hl-md]">
                 <div>
                   <Button
-                    className="text-[--hl] text-sm uppercase w-full select-none p-[--padding-sm] hover:bg-[--hl-sm] focus:bg-[--hl-sm] flex gap-2 justify-between items-center"
+                    className="flex w-full select-none items-center justify-between gap-2 p-[--padding-sm] text-sm uppercase text-[--hl] hover:bg-[--hl-sm] focus:bg-[--hl-sm]"
                     onPress={() => {
                       expandedKeys.includes('security')
-                        ? setExpandedKeys(
-                          expandedKeys.filter(key => key !== 'security')
-                        )
+                        ? setExpandedKeys(expandedKeys.filter(key => key !== 'security'))
                         : setExpandedKeys([...expandedKeys, 'security']);
                     }}
                   >
-                    <span className='truncate'>
-                      Security
-                    </span>
-                    <Icon
-                      icon={expandedKeys.includes('security') ? 'minus' : 'plus'}
-                      className='text-xs'
-                    />
+                    <span className="truncate">Security</span>
+                    <Icon icon={expandedKeys.includes('security') ? 'minus' : 'plus'} className="text-xs" />
                   </Button>
                 </div>
                 {expandedKeys.includes('security') && (
                   <ListBox
-                    items={Object.entries(securitySchemes).map(
-                      ([path, item]) => ({
-                        ...item,
-                        id: path,
-                        path,
-                      })
-                    )}
+                    items={Object.entries(securitySchemes).map(([path, item]) => ({
+                      ...item,
+                      id: path,
+                      path,
+                    }))}
                     onAction={key => navigateToPath(key.toString())}
                   >
                     {item => (
                       <ListBoxItem
-                        className="flex select-none outline-none relative hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]"
+                        className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm]"
                         id={`components.securitySchemes.${item.path}`}
                       >
                         <span className="truncate">{item.path}</span>
@@ -994,26 +904,18 @@ const Design: FC = () => {
             )}
           </div>
           <WorkspaceSyncDropdown />
-          {isEnvironmentModalOpen && (
-            <WorkspaceEnvironmentsEditModal
-              onClose={() => setEnvironmentModalOpen(false)}
-            />
-          )}
-          {isCookieModalOpen && (
-            <CookiesModal setIsOpen={setIsCookieModalOpen} />
-          )}
-          {isCertificatesModalOpen && (
-            <CertificatesModal onClose={() => setCertificatesModalOpen(false)} />
-          )}
+          {isEnvironmentModalOpen && <WorkspaceEnvironmentsEditModal onClose={() => setEnvironmentModalOpen(false)} />}
+          {isCookieModalOpen && <CookiesModal setIsOpen={setIsCookieModalOpen} />}
+          {isCertificatesModalOpen && <CertificatesModal onClose={() => setCertificatesModalOpen(false)} />}
         </div>
       </Panel>
-      <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
-      <Panel className='flex flex-col'>
+      <PanelResizeHandle className="h-full w-[1px] bg-[--hl-md]" />
+      <Panel className="flex flex-col">
         <OrganizationTabList />
         <PanelGroup autoSaveId="insomnia-panels" direction={direction}>
-          <Panel id="pane-one" minSize={10} className='pane-one theme--pane'>
-            <div className="flex flex-col h-full w-full overflow-hidden divide-y divide-solid divide-[--hl-md]">
-              <div className="relative overflow-hidden flex-shrink-0 flex flex-1 basis-1/2">
+          <Panel id="pane-one" minSize={10} className="pane-one theme--pane">
+            <div className="flex h-full w-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+              <div className="relative flex flex-1 flex-shrink-0 basis-1/2 overflow-hidden">
                 <CodeEditor
                   id="spec-editor"
                   key={uniquenessKey}
@@ -1036,27 +938,25 @@ const Design: FC = () => {
                         {
                           action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/${ACTIVITY_SPEC}/update`,
                           method: 'post',
-                        }
+                        },
                       );
                     }}
                   />
                 )}
               </div>
-              <div className={`flex ${isLintPaneOpen ? '' : 'h-[--line-height-sm]'} box-border flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden`}>
-                <div className="flex gap-2 items-center p-[--padding-sm]">
+              <div
+                className={`flex ${isLintPaneOpen ? '' : 'h-[--line-height-sm]'} box-border flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden`}
+              >
+                <div className="flex items-center gap-2 p-[--padding-sm]">
                   <TooltipTrigger>
-                    <Button className="flex items-center gap-2 cursor-pointer select-none">
-                      <Icon
-                        icon={
-                          rulesetPath ? 'file-circle-check' : 'file-circle-xmark'
-                        }
-                      />
+                    <Button className="flex cursor-pointer select-none items-center gap-2">
+                      <Icon icon={rulesetPath ? 'file-circle-check' : 'file-circle-xmark'} />
                       Ruleset
                     </Button>
                     <Tooltip
                       placement="top end"
                       offset={8}
-                      className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                      className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                     >
                       <div>
                         {rulesetPath ? (
@@ -1068,9 +968,8 @@ const Design: FC = () => {
                           <Fragment>
                             <p>Using default OAS ruleset.</p>
                             <p>
-                              To use a custom ruleset add a{' '}
-                              <code className="p-0">.spectral.yaml</code> file to
-                              the root of your git repository
+                              To use a custom ruleset add a <code className="p-0">.spectral.yaml</code> file to the root
+                              of your git repository
                             </p>
                           </Fragment>
                         )}
@@ -1078,39 +977,33 @@ const Design: FC = () => {
                     </Tooltip>
                   </TooltipTrigger>
                   {lintErrors.length > 0 && (
-                    <div className="flex gap-2 items-center select-none">
+                    <div className="flex select-none items-center gap-2">
                       <Icon icon="circle-xmark" className="text-[--color-danger]" />
                       {lintErrors.length}
                     </div>
                   )}
                   {lintWarnings.length > 0 && (
-                    <div className="flex gap-2 items-center select-none">
-                      <Icon
-                        icon="triangle-exclamation"
-                        className="text-[--color-warning]"
-                      />
+                    <div className="flex select-none items-center gap-2">
+                      <Icon icon="triangle-exclamation" className="text-[--color-warning]" />
                       {lintWarnings.length}
                     </div>
                   )}
                   {lintMessages.length === 0 && apiSpec.contents && (
-                    <div className="flex gap-2 items-center select-none">
-                      <Icon
-                        icon="check-square"
-                        className="text-[--color-success]"
-                      />
+                    <div className="flex select-none items-center gap-2">
+                      <Icon icon="check-square" className="text-[--color-success]" />
                       No lint problems
                     </div>
                   )}
                   <span className="flex-1" />
                   {lintMessages.length > 0 && (
-                    <Button aria-label='Toggle lint panel' onPress={() => setIsLintPaneOpen(!isLintPaneOpen)}>
+                    <Button aria-label="Toggle lint panel" onPress={() => setIsLintPaneOpen(!isLintPaneOpen)}>
                       <Icon icon={isLintPaneOpen ? 'chevron-down' : 'chevron-up'} />
                     </Button>
                   )}
                 </div>
                 {isLintPaneOpen && (
                   <ListBox
-                    className="overflow-y-auto flex-1 select-none"
+                    className="flex-1 select-none overflow-y-auto"
                     onAction={index => {
                       const listIndex = parseInt(index.toString(), 10);
                       const lintMessage = lintMessages[listIndex];
@@ -1123,23 +1016,13 @@ const Design: FC = () => {
                     }))}
                   >
                     {item => (
-                      <ListBoxItem className="even:bg-[--hl-xs] p-[--padding-sm] focus-within:bg-[--hl-md] data-[focused]:bg-[--hl-md] outline-none flex items-center gap-2 text-xs transition-colors">
+                      <ListBoxItem className="flex items-center gap-2 p-[--padding-sm] text-xs outline-none transition-colors even:bg-[--hl-xs] focus-within:bg-[--hl-md] data-[focused]:bg-[--hl-md]">
                         <Icon
-                          className={
-                            item.type === 'error'
-                              ? 'text-[--color-danger]'
-                              : 'text-[--color-warning]'
-                          }
-                          icon={
-                            item.type === 'error'
-                              ? 'circle-xmark'
-                              : 'triangle-exclamation'
-                          }
+                          className={item.type === 'error' ? 'text-[--color-danger]' : 'text-[--color-warning]'}
+                          icon={item.type === 'error' ? 'circle-xmark' : 'triangle-exclamation'}
                         />
                         <span className="truncate">{item.message}</span>
-                        <span className="flex-shrink-0 text-[--hl-lg]">
-                          [Ln {item.line}]
-                        </span>
+                        <span className="flex-shrink-0 text-[--hl-lg]">[Ln {item.line}]</span>
                       </ListBoxItem>
                     )}
                   </ListBox>
@@ -1149,8 +1032,10 @@ const Design: FC = () => {
           </Panel>
           {isSpecPaneOpen && (
             <>
-              <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
-              <Panel id="pane-two" minSize={10} className='pane-two theme--pane'>
+              <PanelResizeHandle
+                className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'h-[1px] w-full bg-[--hl-md]'}
+              />
+              <Panel id="pane-two" minSize={10} className="pane-two theme--pane">
                 <SwaggerUIDiv text={apiSpec.contents} />
               </Panel>
             </>
diff --git a/packages/insomnia/src/ui/routes/environments.tsx b/packages/insomnia/src/ui/routes/environments.tsx
index ac3fe2a450..8496d27972 100644
--- a/packages/insomnia/src/ui/routes/environments.tsx
+++ b/packages/insomnia/src/ui/routes/environments.tsx
@@ -1,18 +1,44 @@
 import type { IconName, IconProp } from '@fortawesome/fontawesome-svg-core';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
-import { Breadcrumb, Breadcrumbs, Button, DropIndicator, GridList, GridListItem, Heading, Label, Menu, MenuItem, MenuTrigger, Popover, Text, ToggleButton, useDragAndDrop } from 'react-aria-components';
+import {
+  Breadcrumb,
+  Breadcrumbs,
+  Button,
+  DropIndicator,
+  GridList,
+  GridListItem,
+  Heading,
+  Label,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+  Text,
+  ToggleButton,
+  useDragAndDrop,
+} from 'react-aria-components';
 import { type ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
 import { NavLink, useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
 import { debounce } from '../../common/misc';
-import { type Environment, type EnvironmentKvPairData, EnvironmentKvPairDataType, EnvironmentType, getDataFromKVPair } from '../../models/environment';
+import {
+  type Environment,
+  type EnvironmentKvPairData,
+  EnvironmentKvPairDataType,
+  EnvironmentType,
+  getDataFromKVPair,
+} from '../../models/environment';
 import { isRemoteProject } from '../../models/project';
 import { decryptVaultKeyFromSession } from '../../utils/vault';
 import { WorkspaceDropdown } from '../components/dropdowns/workspace-dropdown';
 import { WorkspaceSyncDropdown } from '../components/dropdowns/workspace-sync-dropdown';
 import { EditableInput } from '../components/editable-input';
-import { EnvironmentEditor, type EnvironmentEditorHandle, type EnvironmentInfo } from '../components/editors/environment-editor';
+import {
+  EnvironmentEditor,
+  type EnvironmentEditorHandle,
+  type EnvironmentInfo,
+} from '../components/editors/environment-editor';
 import { EnvironmentKVEditor } from '../components/editors/environment-key-value-editor/key-value-editor';
 import { handleToggleEnvironmentType } from '../components/editors/environment-utils';
 import { Icon } from '../components/icon';
@@ -27,10 +53,12 @@ import { useRootLoaderData } from './root';
 import type { WorkspaceLoaderData } from './workspace';
 
 const Environments = () => {
-  const { organizationId = '', projectId = '', workspaceId = '' } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
-  const routeData = useRouteLoaderData(
-    ':workspaceId'
-  ) as WorkspaceLoaderData;
+  const {
+    organizationId = '',
+    projectId = '',
+    workspaceId = '',
+  } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const routeData = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
 
   const environmentEditorRef = useRef<EnvironmentEditorHandle>(null);
   const { features } = useOrganizationPermissions();
@@ -42,26 +70,23 @@ const Environments = () => {
   const updateEnvironmentFetcher = useFetcher();
   const duplicateEnvironmentFetcher = useFetcher();
 
-  const {
-    activeProject,
-    baseEnvironment,
-    activeEnvironment,
-    subEnvironments,
-    activeWorkspaceMeta,
-    activeWorkspace,
-  } = routeData;
+  const { activeProject, baseEnvironment, activeEnvironment, subEnvironments, activeWorkspaceMeta, activeWorkspace } =
+    routeData;
   const [selectedEnvironmentId, setSelectedEnvironmentId] = useState<string>(activeEnvironment._id);
   const [vaultKey, setVaultKey] = useState('');
   const isUsingInsomniaCloudSync = Boolean(isRemoteProject(activeProject) && !activeWorkspaceMeta?.gitRepositoryId);
-  const isUsingGitSync = Boolean(features.gitSync.enabled && (activeWorkspaceMeta?.gitRepositoryId));
+  const isUsingGitSync = Boolean(features.gitSync.enabled && activeWorkspaceMeta?.gitRepositoryId);
 
   const allEnvironment = [baseEnvironment, ...subEnvironments];
   const selectedEnvironment = allEnvironment.find(env => env._id === selectedEnvironmentId);
   // Do not allowed to switch to json environment if contains secret item
-  const allowSwitchEnvironment = !selectedEnvironment?.kvPairData?.some(d => d.type === EnvironmentKvPairDataType.SECRET);
+  const allowSwitchEnvironment = !selectedEnvironment?.kvPairData?.some(
+    d => d.type === EnvironmentKvPairDataType.SECRET,
+  );
   // Check if there's any environment contains secret item
-  const containsSecret = allEnvironment.some(env => env.isPrivate &&
-    env.kvPairData?.some(pairData => pairData.type === EnvironmentKvPairDataType.SECRET));
+  const containsSecret = allEnvironment.some(
+    env => env.isPrivate && env.kvPairData?.some(pairData => pairData.type === EnvironmentKvPairDataType.SECRET),
+  );
   const shouldShowVaultKeyModal = containsSecret && !vaultKeyInSession;
   const [showInputVaultKeyModal, setShowModal] = useState(shouldShowVaultKeyModal);
 
@@ -70,46 +95,50 @@ const Environments = () => {
     name: string;
     icon: IconName;
     action: (environment: Environment) => void;
-  }[] = [{
-    id: 'duplicate',
-    name: 'Duplicate',
-    icon: 'copy',
-    action: async (environment: Environment) => {
-      duplicateEnvironmentFetcher.submit({
-        environmentId: environment._id,
+  }[] = [
+    {
+      id: 'duplicate',
+      name: 'Duplicate',
+      icon: 'copy',
+      action: async (environment: Environment) => {
+        duplicateEnvironmentFetcher.submit(
+          {
+            environmentId: environment._id,
+          },
+          {
+            method: 'post',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/duplicate`,
+          },
+        );
       },
-        {
-          method: 'post',
-          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/duplicate`,
+    },
+    {
+      id: 'delete',
+      name: 'Delete',
+      icon: 'trash',
+      action: async (environment: Environment) => {
+        showAlert({
+          title: 'Delete Environment',
+          message: `Are you sure you want to delete "${environment.name}"?`,
+          addCancel: true,
+          okLabel: 'Delete',
+          onConfirm: async () => {
+            deleteEnvironmentFetcher.submit(
+              {
+                environmentId: environment._id,
+              },
+              {
+                method: 'post',
+                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/delete`,
+              },
+            );
+
+            setSelectedEnvironmentId(baseEnvironment._id);
+          },
         });
       },
-    }, {
-        id: 'delete',
-        name: 'Delete',
-        icon: 'trash',
-        action: async (environment: Environment) => {
-          showAlert({
-            title: 'Delete Environment',
-            message: `Are you sure you want to delete "${environment.name}"?`,
-            addCancel: true,
-            okLabel: 'Delete',
-            onConfirm: async () => {
-              deleteEnvironmentFetcher.submit(
-                {
-                  environmentId: environment._id,
-                },
-                {
-                  method: 'post',
-                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/delete`,
-                }
-              );
-
-              setSelectedEnvironmentId(baseEnvironment._id);
-            },
-          });
-        },
-      },
-    ];
+    },
+  ];
 
   const createEnvironmentActionsList: {
     id: string;
@@ -118,72 +147,83 @@ const Environments = () => {
     icon: IconProp;
     action: (environment: Environment) => void;
   }[] = [
-      {
-        id: 'shared',
-        name: 'Shared environment',
-        description: `${isUsingGitSync ? 'Synced with Git Sync and exportable' : isUsingInsomniaCloudSync ? 'Synced with Insomnia Sync and exportable' : 'Exportable'}`,
-        icon: isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down',
-        action: async () => {
-          createEnvironmentFetcher.submit({
+    {
+      id: 'shared',
+      name: 'Shared environment',
+      description: `${isUsingGitSync ? 'Synced with Git Sync and exportable' : isUsingInsomniaCloudSync ? 'Synced with Insomnia Sync and exportable' : 'Exportable'}`,
+      icon: isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down',
+      action: async () => {
+        createEnvironmentFetcher.submit(
+          {
             isPrivate: false,
           },
-            {
-              method: 'post',
-              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
-              encType: 'application/json',
-            });
-        },
-      }, {
-        id: 'private',
-        name: 'Private environment',
-        description: 'Local and not exportable',
-        icon: 'lock',
-        action: async () => {
-          createEnvironmentFetcher.submit({
+          {
+            method: 'post',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
+            encType: 'application/json',
+          },
+        );
+      },
+    },
+    {
+      id: 'private',
+      name: 'Private environment',
+      description: 'Local and not exportable',
+      icon: 'lock',
+      action: async () => {
+        createEnvironmentFetcher.submit(
+          {
             isPrivate: true,
           },
-            {
-              method: 'post',
-              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
-              encType: 'application/json',
-            });
-        },
+          {
+            method: 'post',
+            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/create`,
+            encType: 'application/json',
+          },
+        );
       },
-    ];
+    },
+  ];
 
   const debouncedHandleChange = debounce((value: EnvironmentInfo) => {
     if (environmentEditorRef.current?.isValid() && selectedEnvironment) {
       const { object, propertyOrder } = value;
 
-      updateEnvironmentFetcher.submit({
-        patch: {
-          data: object,
-          dataPropertyOrder: propertyOrder,
+      updateEnvironmentFetcher.submit(
+        {
+          patch: {
+            data: object,
+            dataPropertyOrder: propertyOrder,
+          },
+          environmentId: selectedEnvironment._id,
         },
-        environmentId: selectedEnvironment._id,
-      }, {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-        encType: 'application/json',
-      });
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+          encType: 'application/json',
+        },
+      );
     }
   }, 500);
 
   const handleKVPairChange = (kvPairData: EnvironmentKvPairData[]) => {
     if (selectedEnvironment) {
       const environmentData = getDataFromKVPair(kvPairData);
-      updateEnvironmentFetcher.submit(JSON.stringify({
-        patch: {
-          data: environmentData.data,
-          dataPropertyOrder: environmentData.dataPropertyOrder,
-          kvPairData,
+      updateEnvironmentFetcher.submit(
+        JSON.stringify({
+          patch: {
+            data: environmentData.data,
+            dataPropertyOrder: environmentData.dataPropertyOrder,
+            kvPairData,
+          },
+          environmentId: selectedEnvironment._id,
+        }),
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+          encType: 'application/json',
         },
-        environmentId: selectedEnvironment._id,
-      }), {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-        encType: 'application/json',
-      });
+      );
     }
   };
 
@@ -216,33 +256,27 @@ const Environments = () => {
         }
       }
 
-      updateEnvironmentFetcher.submit({
-        patch: { metaSortKey: sourceEnv.metaSortKey },
-        environmentId: sourceEnv._id,
-      }, {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-        encType: 'application/json',
-      });
+      updateEnvironmentFetcher.submit(
+        {
+          patch: { metaSortKey: sourceEnv.metaSortKey },
+          environmentId: sourceEnv._id,
+        },
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+          encType: 'application/json',
+        },
+      );
     },
     renderDropIndicator(target) {
       if (target.type === 'item') {
         if (target.dropPosition === 'before' && target.key === baseEnvironment._id) {
-          return <DropIndicator
-            target={target}
-            className="hidden"
-          />;
+          return <DropIndicator target={target} className="hidden" />;
         }
-        return <DropIndicator
-          target={target}
-          className="outline-[--color-surprise] outline-1 outline"
-        />;
+        return <DropIndicator target={target} className="outline outline-1 outline-[--color-surprise]" />;
       }
 
-      return <DropIndicator
-        target={target}
-        className="outline-[--color-surprise] outline-1 outline"
-      />;
+      return <DropIndicator target={target} className="outline outline-1 outline-[--color-surprise]" />;
     },
   });
 
@@ -300,30 +334,44 @@ const Environments = () => {
   });
 
   return (
-    <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar flex flex-col justify-between overflow-hidden divide-solid divide-y divide-[--hl-md]' maxSize={40} minSize={10} collapsible>
-        <Breadcrumbs className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] px-[--padding-sm] list-none items-center m-0 gap-2 font-bold w-full`}>
-          <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+    <PanelGroup
+      ref={sidebarPanelRef}
+      autoSaveId="insomnia-sidebar"
+      id="wrapper"
+      className="new-sidebar h-full w-full text-[--color-font]"
+      direction="horizontal"
+    >
+      <Panel
+        id="sidebar"
+        className="sidebar theme--sidebar flex flex-col justify-between divide-y divide-solid divide-[--hl-md] overflow-hidden"
+        maxSize={40}
+        minSize={10}
+        collapsible
+      >
+        <Breadcrumbs
+          className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
+        >
+          <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
             <NavLink
               data-testid="project"
-              className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
               to={`/organization/${organizationId}/project/${activeProject._id}`}
             >
-              <Icon className='text-xs' icon="chevron-left" />
+              <Icon className="text-xs" icon="chevron-left" />
             </NavLink>
-            <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
+            <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
           </Breadcrumb>
-          <Breadcrumb className="flex truncate select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+          <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
             <WorkspaceDropdown />
           </Breadcrumb>
         </Breadcrumbs>
         <GridList
           aria-label="Environments"
           items={[baseEnvironment, ...subEnvironments]}
-          className="overflow-y-auto flex-1 w-full flex-shrink-0 data-[empty]:py-0 py-[--padding-xs]"
+          className="w-full flex-1 flex-shrink-0 overflow-y-auto py-[--padding-xs] data-[empty]:py-0"
           disallowEmptySelection
           selectionMode="single"
-          selectionBehavior='replace'
+          selectionBehavior="replace"
           selectedKeys={[selectedEnvironmentId]}
           dragAndDropHooks={environmentsDragAndDrop.dragAndDropHooks}
           onSelectionChange={keys => {
@@ -339,15 +387,23 @@ const Environments = () => {
                 key={item._id}
                 id={item._id}
                 textValue={item.name}
-                className="group outline-none select-none"
+                className="group select-none outline-none"
               >
-                <div className={`${item.parentId === workspaceId ? 'pl-4' : 'pl-8'} pr-4 flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]`}>
-                  <span className="group-aria-selected:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
+                <div
+                  className={`${item.parentId === workspaceId ? 'pl-4' : 'pl-8'} relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden pr-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]`}
+                >
+                  <span className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors group-aria-selected:bg-[--color-surprise]" />
                   <Icon
                     icon={
-                      item.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'
+                      item.isPrivate
+                        ? 'lock'
+                        : isUsingGitSync
+                          ? ['fab', 'git-alt']
+                          : isUsingInsomniaCloudSync
+                            ? 'globe-americas'
+                            : 'file-arrow-down'
                     }
-                    className='w-5'
+                    className="w-5"
                     style={{
                       color: item.color || undefined,
                     }}
@@ -356,86 +412,88 @@ const Environments = () => {
                     value={item.name}
                     name="name"
                     ariaLabel="Environment name"
-                    className="px-1 flex-1 hover:!bg-transparent"
+                    className="flex-1 px-1 hover:!bg-transparent"
                     onSubmit={name => {
-                      name && updateEnvironmentFetcher.submit({
-                        patch: {
-                          name,
-                        },
-                        environmentId: item._id,
-                      }, {
-                        method: 'post',
-                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                        encType: 'application/json',
-                      });
+                      name &&
+                        updateEnvironmentFetcher.submit(
+                          {
+                            patch: {
+                              name,
+                            },
+                            environmentId: item._id,
+                          },
+                          {
+                            method: 'post',
+                            action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                            encType: 'application/json',
+                          },
+                        );
                     }}
                   />
-                  {item.parentId !== workspaceId && <MenuTrigger>
-                    <Button
-                      aria-label="Project Actions"
-                      className="opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                    >
-                      <Icon icon="caret-down" />
-                    </Button>
-                    <Popover className="min-w-max overflow-y-hidden flex flex-col">
-                      <Menu
-                        aria-label="Environment Actions"
-                        selectionMode="single"
-                        onAction={key => {
-                          environmentActionsList
-                            .find(({ id }) => key === id)
-                            ?.action(item);
-                        }}
-                        items={environmentActionsList}
-                        className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
-                      >
-                        {item => (
-                          <MenuItem
-                            key={item.id}
-                            id={item.id}
-                            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                            aria-label={item.name}
-                          >
-                            <Icon className='w-5' icon={item.icon} />
-                            <span>{item.name}</span>
-                          </MenuItem>
-                        )}
-                      </Menu>
-                    </Popover>
-                  </MenuTrigger>}
-                  {item.parentId === workspaceId && (
+                  {item.parentId !== workspaceId && (
                     <MenuTrigger>
                       <Button
-                        aria-label="Create Environment"
-                        data-testid="CreateEnvironmentDropdown"
-                        className="items-center flex justify-center h-6 aspect-square data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                        aria-label="Project Actions"
+                        className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 data-[pressed]:bg-[--hl-sm] data-[pressed]:opacity-100"
                       >
-                        <Icon icon="plus-circle" />
+                        <Icon icon="caret-down" />
                       </Button>
-                      <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                      <Popover className="flex min-w-max flex-col overflow-y-hidden">
                         <Menu
-                          aria-label="New Environment"
+                          aria-label="Environment Actions"
                           selectionMode="single"
                           onAction={key => {
-                            createEnvironmentActionsList
-                              .find(({ id }) => key === id)
-                              ?.action(item);
+                            environmentActionsList.find(({ id }) => key === id)?.action(item);
                           }}
-                          items={createEnvironmentActionsList}
-                          className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                          items={environmentActionsList}
+                          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                         >
                           {item => (
                             <MenuItem
                               key={item.id}
                               id={item.id}
-                              className="flex flex-col gap-1 px-[--padding-md] py-2 aria-selected:font-bold text-[--color-font] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                               aria-label={item.name}
                             >
-                              <div className='flex gap-2 items-center'>
-                                <Icon className='w-5' icon={item.icon} />
+                              <Icon className="w-5" icon={item.icon} />
+                              <span>{item.name}</span>
+                            </MenuItem>
+                          )}
+                        </Menu>
+                      </Popover>
+                    </MenuTrigger>
+                  )}
+                  {item.parentId === workspaceId && (
+                    <MenuTrigger>
+                      <Button
+                        aria-label="Create Environment"
+                        data-testid="CreateEnvironmentDropdown"
+                        className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] data-[pressed]:bg-[--hl-sm]"
+                      >
+                        <Icon icon="plus-circle" />
+                      </Button>
+                      <Popover className="flex min-w-max flex-col overflow-y-hidden">
+                        <Menu
+                          aria-label="New Environment"
+                          selectionMode="single"
+                          onAction={key => {
+                            createEnvironmentActionsList.find(({ id }) => key === id)?.action(item);
+                          }}
+                          items={createEnvironmentActionsList}
+                          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
+                        >
+                          {item => (
+                            <MenuItem
+                              key={item.id}
+                              id={item.id}
+                              className="text-md flex w-full flex-col gap-1 whitespace-nowrap bg-transparent px-[--padding-md] py-2 text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                              aria-label={item.name}
+                            >
+                              <div className="flex items-center gap-2">
+                                <Icon className="w-5" icon={item.icon} />
                                 <span>{item.name}</span>
                               </div>
-                              <Text slot="description" className='text-xs text-[--hl]'>
+                              <Text slot="description" className="text-xs text-[--hl]">
                                 {item.description}
                               </Text>
                             </MenuItem>
@@ -451,48 +509,66 @@ const Environments = () => {
         </GridList>
         <WorkspaceSyncDropdown />
       </Panel>
-      <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
-      <Panel id="pane-one" className='pane-one theme--pane flex flex-col'>
+      <PanelResizeHandle className="h-full w-[1px] bg-[--hl-md]" />
+      <Panel id="pane-one" className="pane-one theme--pane flex flex-col">
         <OrganizationTabList />
-        <div className='flex-1 flex flex-col divide-solid divide-y divide-[--hl-md] overflow-hidden'>
-          <div className='flex flex-shrink-0 basis-[--line-height-sm] items-center p-[--padding-sm] justify-between gap-2 w-full overflow-hidden'>
-            <Heading className='flex flex-grow items-center gap-2 text-lg py-2 px-4 overflow-hidden'>
-              <Icon className='w-4' icon={selectedEnvironment?.isPrivate ? 'lock' : isUsingGitSync ? ['fab', 'git-alt'] : isUsingInsomniaCloudSync ? 'globe-americas' : 'file-arrow-down'} />
+        <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+          <div className="flex w-full flex-shrink-0 basis-[--line-height-sm] items-center justify-between gap-2 overflow-hidden p-[--padding-sm]">
+            <Heading className="flex flex-grow items-center gap-2 overflow-hidden px-4 py-2 text-lg">
+              <Icon
+                className="w-4"
+                icon={
+                  selectedEnvironment?.isPrivate
+                    ? 'lock'
+                    : isUsingGitSync
+                      ? ['fab', 'git-alt']
+                      : isUsingInsomniaCloudSync
+                        ? 'globe-americas'
+                        : 'file-arrow-down'
+                }
+              />
               <EditableInput
                 value={selectedEnvironment?.name || ''}
                 name="name"
                 ariaLabel="Environment name"
-                className="px-1 flex-1"
+                className="flex-1 px-1"
                 onSubmit={name => {
-                  name && updateEnvironmentFetcher.submit({
-                    patch: {
-                      name,
-                    },
-                    environmentId: selectedEnvironmentId,
-                  }, {
-                    method: 'post',
-                    action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                    encType: 'application/json',
-                  });
+                  name &&
+                    updateEnvironmentFetcher.submit(
+                      {
+                        patch: {
+                          name,
+                        },
+                        environmentId: selectedEnvironmentId,
+                      },
+                      {
+                        method: 'post',
+                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                        encType: 'application/json',
+                      },
+                    );
                 }}
               />
             </Heading>
             {selectedEnvironment && selectedEnvironment.parentId !== workspaceId && (
-              <Label className='mr-2 flex-shrink-0 flex ml-auto items-center gap-2 py-1 px-2 bg-[--hl-sm] data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm'>
+              <Label className="ml-auto mr-2 flex flex-shrink-0 items-center gap-2 rounded-sm bg-[--hl-sm] px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] data-[pressed]:bg-[--hl-sm]">
                 <span>Color:</span>
                 <input
                   onChange={e => {
                     const color = e.target.value;
-                    updateEnvironmentFetcher.submit({
-                      patch: {
-                        color,
+                    updateEnvironmentFetcher.submit(
+                      {
+                        patch: {
+                          color,
+                        },
+                        environmentId: selectedEnvironment._id,
                       },
-                      environmentId: selectedEnvironment._id,
-                    }, {
-                      method: 'post',
-                      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                      encType: 'application/json',
-                    });
+                      {
+                        method: 'post',
+                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                        encType: 'application/json',
+                      },
+                    );
                   }}
                   type="color"
                   value={selectedEnvironment?.color || ''}
@@ -502,29 +578,43 @@ const Environments = () => {
             {selectedEnvironment && allowSwitchEnvironment && (
               <ToggleButton
                 onChange={isSelected => {
-                  const toggleSwitchEnvironmentType = (newEnvironmentType: EnvironmentType, kvPairData: EnvironmentKvPairData[]) => {
-                    updateEnvironmentFetcher.submit(JSON.stringify({
-                      patch: {
-                        environmentType: newEnvironmentType,
-                        kvPairData: kvPairData,
+                  const toggleSwitchEnvironmentType = (
+                    newEnvironmentType: EnvironmentType,
+                    kvPairData: EnvironmentKvPairData[],
+                  ) => {
+                    updateEnvironmentFetcher.submit(
+                      JSON.stringify({
+                        patch: {
+                          environmentType: newEnvironmentType,
+                          kvPairData: kvPairData,
+                        },
+                        environmentId: selectedEnvironment._id,
+                      }),
+                      {
+                        method: 'post',
+                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
+                        encType: 'application/json',
                       },
-                      environmentId: selectedEnvironment._id,
-                    }), {
-                      method: 'post',
-                      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/update`,
-                      encType: 'application/json',
-                    });
+                    );
                   };
                   const isValidJSON = !!environmentEditorRef.current?.isValid();
-                  handleToggleEnvironmentType(isSelected, selectedEnvironment, isValidJSON, toggleSwitchEnvironmentType);
+                  handleToggleEnvironmentType(
+                    isSelected,
+                    selectedEnvironment,
+                    isValidJSON,
+                    toggleSwitchEnvironmentType,
+                  );
                 }}
                 isSelected={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR}
-                className="w-[14ch] flex flex-shrink-0 gap-2 items-center justify-start px-2 py-1 rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-colors text-sm"
+                className="flex w-[14ch] flex-shrink-0 items-center justify-start gap-2 rounded-sm px-2 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-colors hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                 aria-label={selectedEnvironment?.environmentType !== EnvironmentType.KVPAIR ? 'Table Edit' : 'Raw Edit'}
               >
                 {({ isSelected }) => (
                   <Fragment>
-                    <Icon icon={!isSelected ? 'toggle-on' : 'toggle-off'} className={`${!isSelected ? 'text-[--color-success]' : ''}`} />
+                    <Icon
+                      icon={!isSelected ? 'toggle-on' : 'toggle-off'}
+                      className={`${!isSelected ? 'text-[--color-success]' : ''}`}
+                    />
                     <span>Table View</span>
                   </Fragment>
                 )}
@@ -532,18 +622,19 @@ const Environments = () => {
             )}
           </div>
           {/* legacy JSON environment do not have environmentType property*/}
-          {selectedEnvironment && (selectedEnvironment.environmentType === EnvironmentType.JSON || !selectedEnvironment.environmentType) &&
-            <EnvironmentEditor
-              ref={environmentEditorRef}
-              key={selectedEnvironment._id}
-              onChange={debouncedHandleChange}
-              environmentInfo={{
-                object: selectedEnvironment.data,
-                propertyOrder: selectedEnvironment.dataPropertyOrder,
-              }}
-            />
-          }
-          {selectedEnvironment && selectedEnvironment.environmentType === EnvironmentType.KVPAIR &&
+          {selectedEnvironment &&
+            (selectedEnvironment.environmentType === EnvironmentType.JSON || !selectedEnvironment.environmentType) && (
+              <EnvironmentEditor
+                ref={environmentEditorRef}
+                key={selectedEnvironment._id}
+                onChange={debouncedHandleChange}
+                environmentInfo={{
+                  object: selectedEnvironment.data,
+                  propertyOrder: selectedEnvironment.dataPropertyOrder,
+                }}
+              />
+            )}
+          {selectedEnvironment && selectedEnvironment.environmentType === EnvironmentType.KVPAIR && (
             <EnvironmentKVEditor
               key={selectedEnvironment._id}
               data={selectedEnvironment.kvPairData || []}
@@ -551,10 +642,8 @@ const Environments = () => {
               onChange={handleKVPairChange}
               vaultKey={vaultKey}
             />
-          }
-          {showInputVaultKeyModal &&
-            <InputVaultKeyModal onClose={handleInputVaultKeyModalClose} allowClose={false} />
-          }
+          )}
+          {showInputVaultKeyModal && <InputVaultKeyModal onClose={handleInputVaultKeyModalClose} allowClose={false} />}
         </div>
       </Panel>
     </PanelGroup>
diff --git a/packages/insomnia/src/ui/routes/error.tsx b/packages/insomnia/src/ui/routes/error.tsx
index 0ea28489bf..c260ca3f2e 100644
--- a/packages/insomnia/src/ui/routes/error.tsx
+++ b/packages/insomnia/src/ui/routes/error.tsx
@@ -1,13 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 import { Button } from 'react-aria-components';
-import {
-  isRouteErrorResponse,
-  useFetcher,
-  useNavigate,
-  useNavigation,
-  useRouteError,
-} from 'react-router-dom';
+import { isRouteErrorResponse, useFetcher, useNavigate, useNavigation, useRouteError } from 'react-router-dom';
 
 import { Icon } from '../components/icon';
 
@@ -43,34 +37,44 @@ export const ErrorRoute: FC<{ defaultMessage?: string }> = ({ defaultMessage })
   const logoutFetcher = useFetcher();
 
   return (
-    <div className="flex gap-2 flex-col items-center justify-center h-full w-full overflow-hidden">
-      <h1 className='text-[--color-font] text-2xl flex items-center gap-2'><Icon className='text-[--color-danger]' icon="exclamation-triangle" /> Application Error</h1>
-      <p className='text-[--color-font]'>
-        Failed to render. Please report to <a className='font-bold underline' href="https://github.com/Kong/insomnia/issues">our Github Issues</a>
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 overflow-hidden">
+      <h1 className="flex items-center gap-2 text-2xl text-[--color-font]">
+        <Icon className="text-[--color-danger]" icon="exclamation-triangle" /> Application Error
+      </h1>
+      <p className="text-[--color-font]">
+        Failed to render. Please report to{' '}
+        <a className="font-bold underline" href="https://github.com/Kong/insomnia/issues">
+          our Github Issues
+        </a>
       </p>
-      <div className='text-[--color-font] p-6'>
+      <div className="p-6 text-[--color-font]">
         <code className="break-words p-2">{errorMessage}</code>
       </div>
-      <div className='flex gap-2 items-center'>
-        <Button className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base" onPress={() => navigate('/organization')}>
+      <div className="flex items-center gap-2">
+        <Button
+          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-base font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() => navigate('/organization')}
+        >
           Try to reload the app{' '}
-          <span>{navigation.state === 'loading' ? <Icon icon="spinner" className='animate-spin' /> : null}</span>
+          <span>{navigation.state === 'loading' ? <Icon icon="spinner" className="animate-spin" /> : null}</span>
         </Button>
         <Button
-          className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-base"
-          onPress={() => logoutFetcher.submit(
-            {},
-            {
-              action: '/auth/logout',
-              method: 'POST',
-            },
-          )}
+          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-base font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          onPress={() =>
+            logoutFetcher.submit(
+              {},
+              {
+                action: '/auth/logout',
+                method: 'POST',
+              },
+            )
+          }
         >
           Logout{' '}
-          <span>{logoutFetcher.state === 'loading' ? <Icon icon="spinner" className='animate-spin' /> : null}</span>
+          <span>{logoutFetcher.state === 'loading' ? <Icon icon="spinner" className="animate-spin" /> : null}</span>
         </Button>
       </div>
-      <div className='text-[--color-font] p-6 overflow-y-auto'>
+      <div className="overflow-y-auto p-6 text-[--color-font]">
         <code className="break-all p-2">{getErrorStack(error)}</code>
       </div>
     </div>
diff --git a/packages/insomnia/src/ui/routes/git-actions.tsx b/packages/insomnia/src/ui/routes/git-actions.tsx
index 6931dd7e17..a6935ed07e 100644
--- a/packages/insomnia/src/ui/routes/git-actions.tsx
+++ b/packages/insomnia/src/ui/routes/git-actions.tsx
@@ -3,12 +3,8 @@ import { type ActionFunction, type LoaderFunction, redirect } from 'react-router
 
 import { gitCredentials } from '../../models';
 import type { GitRepository } from '../../models/git-repository';
-import {
-  WorkspaceScopeKeys,
-} from '../../models/workspace';
-import {
-  type GitLogEntry,
-} from '../../sync/git/git-vcs';
+import { WorkspaceScopeKeys } from '../../models/workspace';
+import { type GitLogEntry } from '../../sync/git/git-vcs';
 import type { MergeConflict } from '../../sync/types';
 import { invariant } from '../../utils/invariant';
 
@@ -23,9 +19,7 @@ export type GitRepoLoaderData =
       errors: string[];
     };
 
-export const gitRepoLoader: ActionFunction = async ({
-  params,
-}): Promise<GitRepoLoaderData> => {
+export const gitRepoLoader: ActionFunction = async ({ params }): Promise<GitRepoLoaderData> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -42,9 +36,7 @@ export type GitBranchesLoaderData =
       errors: string[];
     };
 
-export const gitBranchesLoader: LoaderFunction = async ({
-  params,
-}): Promise<GitBranchesLoaderData> => {
+export const gitBranchesLoader: LoaderFunction = async ({ params }): Promise<GitBranchesLoaderData> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -56,9 +48,7 @@ export interface GitFetchLoaderData {
   errors: string[];
 }
 
-export const gitFetchAction: ActionFunction = async ({
-  params,
-}): Promise<GitFetchLoaderData> => {
+export const gitFetchAction: ActionFunction = async ({ params }): Promise<GitFetchLoaderData> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -74,9 +64,7 @@ export type GitLogLoaderData =
       errors: string[];
     };
 
-export const gitLogLoader: LoaderFunction = async ({
-  params,
-}): Promise<GitLogLoaderData> => {
+export const gitLogLoader: LoaderFunction = async ({ params }): Promise<GitLogLoaderData> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -98,9 +86,7 @@ export interface GitChangesLoaderData {
   branch: string;
 }
 
-export const gitChangesLoader: LoaderFunction = async ({
-  params,
-}): Promise<GitChangesLoaderData> => {
+export const gitChangesLoader: LoaderFunction = async ({ params }): Promise<GitChangesLoaderData> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -147,10 +133,7 @@ export function parseGitToHttpsURL(s: string) {
   return parsed;
 }
 
-export const cloneGitRepoAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<CloneGitActionResult> => {
+export const cloneGitRepoAction: ActionFunction = async ({ request, params }): Promise<CloneGitActionResult> => {
   const { organizationId, projectId } = params;
 
   invariant(typeof organizationId === 'string', 'OrganizationId is required.');
@@ -179,24 +162,19 @@ export const cloneGitRepoAction: ActionFunction = async ({
   }
 
   if (result.existingWorkspace) {
-    return redirect(`/organization/${result.existingWorkspace.organizationId}/project/${result.existingWorkspace.projectId}/workspace/${result.existingWorkspace.workspaceId}/debug`);
+    return redirect(
+      `/organization/${result.existingWorkspace.organizationId}/project/${result.existingWorkspace.projectId}/workspace/${result.existingWorkspace.workspaceId}/debug`,
+    );
   }
 
   // Redirect to debug for collection scope initial clone
   if (result.scope === WorkspaceScopeKeys.collection) {
-    return redirect(
-      `/organization/${organizationId}/project/${projectId}/workspace/${result.workspaceId}/debug`
-    );
+    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${result.workspaceId}/debug`);
   }
-  return redirect(
-    `/organization/${organizationId}/project/${projectId}/workspace/${result.workspaceId}/spec`
-  );
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${result.workspaceId}/spec`);
 };
 
-export const updateGitRepoAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const updateGitRepoAction: ActionFunction = async ({ request, params }) => {
   const { projectId, workspaceId } = params;
   invariant(projectId, 'Project ID is required');
   invariant(workspaceId, 'Workspace ID is required');
@@ -232,10 +210,7 @@ export interface CommitToGitRepoResult {
   gitRepository?: GitRepository;
 }
 
-export const commitToGitRepoAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<CommitToGitRepoResult> => {
+export const commitToGitRepoAction: ActionFunction = async ({ request, params }): Promise<CommitToGitRepoResult> => {
   const { projectId, workspaceId } = params;
   invariant(projectId, 'Project ID is required');
   invariant(workspaceId, 'Workspace ID is required');
@@ -316,10 +291,10 @@ export const mergeGitBranch = async ({
   workspaceId,
   allowUncommittedChangesBeforeMerge = false,
 }: {
-    projectId: string;
-    workspaceId: string;
-    theirsBranch: string;
-    allowUncommittedChangesBeforeMerge?: boolean;
+  projectId: string;
+  workspaceId: string;
+  theirsBranch: string;
+  allowUncommittedChangesBeforeMerge?: boolean;
 }) => {
   return await window.main.git.mergeGitBranch({
     projectId,
@@ -333,10 +308,7 @@ export interface DeleteGitBranchResult {
   errors?: string[];
 }
 
-export const deleteGitBranchAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<DeleteGitBranchResult> => {
+export const deleteGitBranchAction: ActionFunction = async ({ request, params }): Promise<DeleteGitBranchResult> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -357,10 +329,7 @@ export interface PushToGitRemoteResult {
   gitRepository?: GitRepository;
 }
 
-export const pushToGitRemoteAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<PushToGitRemoteResult> => {
+export const pushToGitRemoteAction: ActionFunction = async ({ request, params }): Promise<PushToGitRemoteResult> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -374,28 +343,23 @@ export const pushToGitRemoteAction: ActionFunction = async ({
   });
 };
 
-export async function pullFromGitRemote({ projectId, workspaceId }: {
-  projectId: string;
-  workspaceId: string;
-}) {
+export async function pullFromGitRemote({ projectId, workspaceId }: { projectId: string; workspaceId: string }) {
   return window.main.git.pullFromGitRemote({ projectId, workspaceId });
 }
 
-export async function continueMerge(
-  {
-    projectId,
-    workspaceId,
-    handledMergeConflicts,
-    commitMessage,
-    commitParent,
-  }: {
-      projectId: string;
-      workspaceId: string;
-    handledMergeConflicts: MergeConflict[];
-      commitMessage: string;
-      commitParent: string[];
-    }
-) {
+export async function continueMerge({
+  projectId,
+  workspaceId,
+  handledMergeConflicts,
+  commitMessage,
+  commitParent,
+}: {
+  projectId: string;
+  workspaceId: string;
+  handledMergeConflicts: MergeConflict[];
+  commitMessage: string;
+  commitParent: string[];
+}) {
   return window.main.git.continueMerge({
     projectId,
     workspaceId,
@@ -424,7 +388,7 @@ export const discardChangesAction: ActionFunction = async ({
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
 
-  const { paths } = await request.json() as { paths: string[] };
+  const { paths } = (await request.json()) as { paths: string[] };
 
   return window.main.git.discardChanges({ projectId, workspaceId, paths });
 };
@@ -435,9 +399,7 @@ export interface GitStatusResult {
   };
 }
 
-export const gitStatusAction: ActionFunction = async ({
-  params,
-}): Promise<GitStatusResult> => {
+export const gitStatusAction: ActionFunction = async ({ params }): Promise<GitStatusResult> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -445,17 +407,11 @@ export const gitStatusAction: ActionFunction = async ({
   return window.main.git.gitStatus({ projectId, workspaceId });
 };
 
-export async function checkGitChanges({ projectId, workspaceId }: {
-  projectId: string;
-  workspaceId: string;
-}) {
+export async function checkGitChanges({ projectId, workspaceId }: { projectId: string; workspaceId: string }) {
   return window.main.git.gitChangesLoader({ projectId, workspaceId });
 }
 
-export async function checkGitCanPush({ projectId, workspaceId }: {
-  projectId: string;
-  workspaceId: string;
-}) {
+export async function checkGitCanPush({ projectId, workspaceId }: { projectId: string; workspaceId: string }) {
   return window.main.git.canPushLoader({ projectId, workspaceId });
 }
 
@@ -468,7 +424,7 @@ export const stageChangesAction: ActionFunction = async ({
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
-  const { paths } = await request.json() as { paths: string[] };
+  const { paths } = (await request.json()) as { paths: string[] };
 
   return window.main.git.stageChanges({ projectId, workspaceId, paths });
 };
@@ -482,25 +438,24 @@ export const unstageChangesAction: ActionFunction = async ({
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
-  const { paths } = await request.json() as { paths: string[] };
+  const { paths } = (await request.json()) as { paths: string[] };
 
   return window.main.git.unstageChanges({ projectId, workspaceId, paths });
 };
 
-export type GitDiffResult = {
-  name: string;
-  diff?: {
-    before: string;
-    after: string;
-  };
-} | {
-  errors: string[];
-};
+export type GitDiffResult =
+  | {
+      name: string;
+      diff?: {
+        before: string;
+        after: string;
+      };
+    }
+  | {
+      errors: string[];
+    };
 
-export const diffFileLoader: LoaderFunction = async ({
-  request,
-  params,
-}): Promise<GitDiffResult> => {
+export const diffFileLoader: LoaderFunction = async ({ request, params }): Promise<GitDiffResult> => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -527,7 +482,7 @@ export const initSignInToGitHub: ActionFunction = async () => {
 };
 
 export const completeSignInToGitHub: ActionFunction = async ({ request }) => {
-  const { code, state } = await request.json() as { code: string; state: string; path: string };
+  const { code, state } = (await request.json()) as { code: string; state: string; path: string };
   await window.main.git.completeSignInToGitHub({
     code,
     state,
@@ -555,7 +510,7 @@ export const initSignInToGitLab: ActionFunction = async () => {
 };
 
 export const completeSignInToGitLab: ActionFunction = async ({ request }) => {
-  const { code, state } = await request.json() as { code: string; state: string; path: string };
+  const { code, state } = (await request.json()) as { code: string; state: string; path: string };
   await window.main.git.completeSignInToGitLab({
     code,
     state,
diff --git a/packages/insomnia/src/ui/routes/git-project-actions.tsx b/packages/insomnia/src/ui/routes/git-project-actions.tsx
index 98558eee6c..2b39c27dc4 100644
--- a/packages/insomnia/src/ui/routes/git-project-actions.tsx
+++ b/packages/insomnia/src/ui/routes/git-project-actions.tsx
@@ -3,26 +3,22 @@ import { type ActionFunction, type LoaderFunction, redirect } from 'react-router
 import * as models from '../../models';
 import type { GitRepository } from '../../models/git-repository';
 import type { WorkspaceScope } from '../../models/workspace';
-import {
-  type GitLogEntry,
-} from '../../sync/git/git-vcs';
+import { type GitLogEntry } from '../../sync/git/git-vcs';
 import type { MergeConflict } from '../../sync/types';
 import { invariant } from '../../utils/invariant';
 
 // Loaders
 export type GitRepoLoaderData =
   | {
-    branch: string;
-    branches: string[];
-    gitRepository: GitRepository | null;
-  }
+      branch: string;
+      branches: string[];
+      gitRepository: GitRepository | null;
+    }
   | {
-    errors: string[];
-  };
+      errors: string[];
+    };
 
-export const gitRepoLoader: ActionFunction = async ({
-  params,
-}): Promise<GitRepoLoaderData> => {
+export const gitRepoLoader: ActionFunction = async ({ params }): Promise<GitRepoLoaderData> => {
   const { projectId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
 
@@ -31,16 +27,14 @@ export const gitRepoLoader: ActionFunction = async ({
 
 export type GitBranchesLoaderData =
   | {
-    branches: string[];
-    remoteBranches: string[];
-  }
+      branches: string[];
+      remoteBranches: string[];
+    }
   | {
-    errors: string[];
-  };
+      errors: string[];
+    };
 
-export const gitBranchesLoader: LoaderFunction = async ({
-  params,
-}): Promise<GitBranchesLoaderData> => {
+export const gitBranchesLoader: LoaderFunction = async ({ params }): Promise<GitBranchesLoaderData> => {
   const { projectId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
 
@@ -51,9 +45,7 @@ export interface GitFetchLoaderData {
   errors: string[];
 }
 
-export const gitFetchAction: ActionFunction = async ({
-  params,
-}): Promise<GitFetchLoaderData> => {
+export const gitFetchAction: ActionFunction = async ({ params }): Promise<GitFetchLoaderData> => {
   const { projectId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
 
@@ -62,15 +54,13 @@ export const gitFetchAction: ActionFunction = async ({
 
 export type GitLogLoaderData =
   | {
-    log: GitLogEntry[];
-  }
+      log: GitLogEntry[];
+    }
   | {
-    errors: string[];
-  };
+      errors: string[];
+    };
 
-export const gitLogLoader: LoaderFunction = async ({
-  params,
-}): Promise<GitLogLoaderData> => {
+export const gitLogLoader: LoaderFunction = async ({ params }): Promise<GitLogLoaderData> => {
   const { projectId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
 
@@ -91,9 +81,7 @@ export interface GitChangesLoaderData {
   branch: string;
 }
 
-export const gitChangesLoader: LoaderFunction = async ({
-  params,
-}): Promise<GitChangesLoaderData> => {
+export const gitChangesLoader: LoaderFunction = async ({ params }): Promise<GitChangesLoaderData> => {
   const { projectId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
 
@@ -112,15 +100,17 @@ export const canPushLoader: LoaderFunction = async ({ params }): Promise<GitCanP
 };
 
 // Actions
-export type InitGitCloneResult = {
-  files: {
-    scope: WorkspaceScope;
-    name: string;
-    path: string;
-  }[];
-} | {
-  errors: string[];
-};
+export type InitGitCloneResult =
+  | {
+      files: {
+        scope: WorkspaceScope;
+        name: string;
+        path: string;
+      }[];
+    }
+  | {
+      errors: string[];
+    };
 
 export const initGitCloneAction: ActionFunction = async ({ request, params }) => {
   const { organizationId } = params;
@@ -154,12 +144,9 @@ export const initGitCloneAction: ActionFunction = async ({ request, params }) =>
 type CloneGitActionResult =
   | Response
   | {
-    errors?: string[];
-  };
-export const cloneGitRepoAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<CloneGitActionResult> => {
+      errors?: string[];
+    };
+export const cloneGitRepoAction: ActionFunction = async ({ request, params }): Promise<CloneGitActionResult> => {
   const { organizationId } = params;
   invariant(organizationId, 'Organization ID is required');
 
@@ -189,10 +176,7 @@ export const cloneGitRepoAction: ActionFunction = async ({
   return redirect(`/organization/${organizationId}/project/${projectId}`);
 };
 
-export const updateGitRepoAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const updateGitRepoAction: ActionFunction = async ({ request, params }) => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
 
@@ -226,10 +210,7 @@ export interface CommitToGitRepoResult {
   errors?: string[];
 }
 
-export const commitToGitRepoAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<CommitToGitRepoResult> => {
+export const commitToGitRepoAction: ActionFunction = async ({ request, params }): Promise<CommitToGitRepoResult> => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
 
@@ -317,10 +298,7 @@ export interface DeleteGitBranchResult {
   errors?: string[];
 }
 
-export const deleteGitBranchAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<DeleteGitBranchResult> => {
+export const deleteGitBranchAction: ActionFunction = async ({ request, params }): Promise<DeleteGitBranchResult> => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
 
@@ -338,10 +316,7 @@ export interface PushToGitRemoteResult {
   errors?: string[];
 }
 
-export const pushToGitRemoteAction: ActionFunction = async ({
-  request,
-  params,
-}): Promise<PushToGitRemoteResult> => {
+export const pushToGitRemoteAction: ActionFunction = async ({ request, params }): Promise<PushToGitRemoteResult> => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
 
@@ -357,19 +332,17 @@ export const pullFromGitRemote = async ({ projectId }: { projectId: string }) =>
   return window.main.git.pullFromGitRemote({ projectId });
 };
 
-export const continueMerge = async (
-  {
-    projectId,
-    handledMergeConflicts,
-    commitMessage,
-    commitParent,
-  }: {
-    projectId: string;
-    handledMergeConflicts: MergeConflict[];
-    commitMessage: string;
-    commitParent: string[];
-  }
-) => {
+export const continueMerge = async ({
+  projectId,
+  handledMergeConflicts,
+  commitMessage,
+  commitParent,
+}: {
+  projectId: string;
+  handledMergeConflicts: MergeConflict[];
+  commitMessage: string;
+  commitParent: string[];
+}) => {
   return window.main.git.continueMerge({
     projectId,
     handledMergeConflicts,
@@ -396,7 +369,7 @@ export const discardChangesAction: ActionFunction = async ({
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
 
-  const { paths } = await request.json() as { paths: string[] };
+  const { paths } = (await request.json()) as { paths: string[] };
 
   return window.main.git.discardChanges({ projectId, paths });
 };
@@ -429,7 +402,7 @@ export const stageChangesAction: ActionFunction = async ({
 }> => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
-  const { paths } = await request.json() as { paths: string[] };
+  const { paths } = (await request.json()) as { paths: string[] };
 
   return window.main.git.stageChanges({ projectId, paths });
 };
@@ -442,25 +415,24 @@ export const unstageChangesAction: ActionFunction = async ({
 }> => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
-  const { paths } = await request.json() as { paths: string[] };
+  const { paths } = (await request.json()) as { paths: string[] };
 
   return window.main.git.unstageChanges({ projectId, paths });
 };
 
-export type GitDiffResult = {
-  name: string;
-  diff?: {
-    before: string;
-    after: string;
-  };
-} | {
-  errors: string[];
-};
+export type GitDiffResult =
+  | {
+      name: string;
+      diff?: {
+        before: string;
+        after: string;
+      };
+    }
+  | {
+      errors: string[];
+    };
 
-export const diffFileLoader: LoaderFunction = async ({
-  request,
-  params,
-}): Promise<GitDiffResult> => {
+export const diffFileLoader: LoaderFunction = async ({ request, params }): Promise<GitDiffResult> => {
   const { projectId } = params;
   invariant(projectId, 'Project ID is required');
   const urlParams = new URLSearchParams(request.url.split('?')[1]);
diff --git a/packages/insomnia/src/ui/routes/import.tsx b/packages/insomnia/src/ui/routes/import.tsx
index 67643bfa43..2b3b9c76ab 100644
--- a/packages/insomnia/src/ui/routes/import.tsx
+++ b/packages/insomnia/src/ui/routes/import.tsx
@@ -3,11 +3,22 @@ import path from 'node:path';
 import type { ActionFunction } from 'react-router-dom';
 
 import type { PostmanDataDumpRawData } from '../../common/import';
-import { fetchImportContentFromURI, getFilesFromPostmanExportedDataDump, type ImportFileDetail, importResourcesToProject, importResourcesToWorkspace, scanResources, type ScanResult } from '../../common/import';
+import {
+  fetchImportContentFromURI,
+  getFilesFromPostmanExportedDataDump,
+  type ImportFileDetail,
+  importResourcesToProject,
+  importResourcesToWorkspace,
+  scanResources,
+  type ScanResult,
+} from '../../common/import';
 import * as models from '../../models';
 import { isRemoteProject } from '../../models/project';
 import type { Workspace } from '../../models/workspace';
-import { initializeLocalBackendProjectAndMarkForSync, pushSnapshotOnInitialize } from '../../sync/vcs/initialize-backend-project';
+import {
+  initializeLocalBackendProjectAndMarkForSync,
+  pushSnapshotOnInitialize,
+} from '../../sync/vcs/initialize-backend-project';
 import { VCSInstance } from '../../sync/vcs/insomnia-sync';
 import { invariant } from '../../utils/invariant';
 import { fetchAndCacheOrganizationStorageRule } from './organization';
@@ -24,9 +35,11 @@ export const scanForResourcesAction: ActionFunction = async ({ request }): Promi
     if (source === 'uri') {
       const uri = formData.get('uri');
       if (typeof uri !== 'string' || uri === '') {
-        return [{
-          errors: ['URI is required'],
-        }];
+        return [
+          {
+            errors: ['URI is required'],
+          },
+        ];
       }
 
       contentList.push({
@@ -45,9 +58,11 @@ export const scanForResourcesAction: ActionFunction = async ({ request }): Promi
           throw new Error();
         }
       } catch (err) {
-        return [{
-          errors: ['File is required'],
-        }];
+        return [
+          {
+            errors: ['File is required'],
+          },
+        ];
       }
 
       const zipFilePaths = filePaths.filter(filePath => path.extname(filePath) === '.zip');
@@ -59,15 +74,14 @@ export const scanForResourcesAction: ActionFunction = async ({ request }): Promi
         try {
           postmanDataDumpRawData = await getFilesFromPostmanExportedDataDump(zipFilePath);
         } catch (err) {
-          return [{
-            errors: [err.message],
-          }];
+          return [
+            {
+              errors: [err.message],
+            },
+          ];
         }
 
-        function trans({
-          contentStr,
-          oriFileName,
-        }: ImportFileDetail): ImportFileDetail {
+        function trans({ contentStr, oriFileName }: ImportFileDetail): ImportFileDetail {
           return {
             contentStr,
             oriFileName: `${oriFileName} in ${path.basename(zipFilePath)}`,
@@ -76,7 +90,7 @@ export const scanForResourcesAction: ActionFunction = async ({ request }): Promi
 
         contentList.push(
           ...postmanDataDumpRawData.collectionList.map(trans),
-          ...postmanDataDumpRawData.envList.map(trans)
+          ...postmanDataDumpRawData.envList.map(trans),
         );
       }
 
@@ -96,18 +110,22 @@ export const scanForResourcesAction: ActionFunction = async ({ request }): Promi
     }
 
     if (contentList.length === 0) {
-      return [{
-        errors: ['No content to import'],
-      }];
+      return [
+        {
+          errors: ['No content to import'],
+        },
+      ];
     }
 
     const result = await scanResources(contentList);
 
     return result;
   } catch (err) {
-    return [{
-      errors: [err.message],
-    }];
+    return [
+      {
+        errors: [err.message],
+      },
+    ];
   }
 };
 
@@ -171,7 +189,9 @@ async function syncNewWorkspaceIfNeeded(newWorkspace: Workspace) {
           project,
         });
       } catch (e) {
-        console.warn(`Failed to initialize sync to insomnia cloud for workspace ${newWorkspace._id}. This will be retried when the workspace is opened on the app. ${e.message}`);
+        console.warn(
+          `Failed to initialize sync to insomnia cloud for workspace ${newWorkspace._id}. This will be retried when the workspace is opened on the app. ${e.message}`,
+        );
       }
     }
   }
diff --git a/packages/insomnia/src/ui/routes/invite.tsx b/packages/insomnia/src/ui/routes/invite.tsx
index 09dd95e354..dab69a94c4 100644
--- a/packages/insomnia/src/ui/routes/invite.tsx
+++ b/packages/insomnia/src/ui/routes/invite.tsx
@@ -34,11 +34,16 @@ export interface Collaborator {
   metadata: CollaboratorMetadata;
 }
 
-export type CollaboratorsListLoaderResult = PaginatedList & {
-  collaborators: Collaborator[];
-} | Error;
+export type CollaboratorsListLoaderResult =
+  | (PaginatedList & {
+      collaborators: Collaborator[];
+    })
+  | Error;
 
-export const collaboratorsListLoader: LoaderFunction = async ({ params, request }): Promise<CollaboratorsListLoaderResult> => {
+export const collaboratorsListLoader: LoaderFunction = async ({
+  params,
+  request,
+}): Promise<CollaboratorsListLoaderResult> => {
   const { id: sessionId } = await userSession.get();
 
   const { organizationId } = params;
@@ -80,7 +85,10 @@ export interface CollaboratorSearchResultItem {
 
 export type CollaboratorSearchLoaderResult = CollaboratorSearchResultItem[];
 
-export const collaboratorSearchLoader: LoaderFunction = async ({ params, request }): Promise<CollaboratorSearchLoaderResult> => {
+export const collaboratorSearchLoader: LoaderFunction = async ({
+  params,
+  request,
+}): Promise<CollaboratorSearchLoaderResult> => {
   const { id: sessionId } = await userSession.get();
 
   const { organizationId } = params;
diff --git a/packages/insomnia/src/ui/routes/mock-route.tsx b/packages/insomnia/src/ui/routes/mock-route.tsx
index 880ba63ab8..689e2383a0 100644
--- a/packages/insomnia/src/ui/routes/mock-route.tsx
+++ b/packages/insomnia/src/ui/routes/mock-route.tsx
@@ -3,7 +3,17 @@ import React from 'react';
 import { Button, Tab, TabList, TabPanel, Tabs, Toolbar } from 'react-aria-components';
 import { type LoaderFunction, useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
-import { CONTENT_TYPE_JSON, CONTENT_TYPE_OTHER, CONTENT_TYPE_PLAINTEXT, CONTENT_TYPE_XML, CONTENT_TYPE_YAML, contentTypesMap, getMockServiceBinURL, getMockServiceURL, RESPONSE_CODE_REASONS } from '../../common/constants';
+import {
+  CONTENT_TYPE_JSON,
+  CONTENT_TYPE_OTHER,
+  CONTENT_TYPE_PLAINTEXT,
+  CONTENT_TYPE_XML,
+  CONTENT_TYPE_YAML,
+  contentTypesMap,
+  getMockServiceBinURL,
+  getMockServiceURL,
+  RESPONSE_CODE_REASONS,
+} from '../../common/constants';
 import { database as db } from '../../common/database';
 import { getResponseCookiesFromHeaders } from '../../common/har';
 import * as models from '../../models';
@@ -72,10 +82,23 @@ const mockContentTypes = [
   CONTENT_TYPE_YAML,
   CONTENT_TYPE_OTHER,
 ];
-export const isInMockContentTypeList = (contentType: string): boolean => Boolean(contentType && mockContentTypes.includes(contentType));
+export const isInMockContentTypeList = (contentType: string): boolean =>
+  Boolean(contentType && mockContentTypes.includes(contentType));
 
 // mockbin expect a HAR response structure
-export const mockRouteToHar = ({ statusCode, statusText, mimeType, headersArray, body }: { statusCode: number; statusText: string; mimeType: string; headersArray: RequestHeader[]; body: string }): Har.Response => {
+export const mockRouteToHar = ({
+  statusCode,
+  statusText,
+  mimeType,
+  headersArray,
+  body,
+}: {
+  statusCode: number;
+  statusText: string;
+  mimeType: string;
+  headersArray: RequestHeader[];
+  body: string;
+}): Har.Response => {
   const validHeaders = headersArray.filter(({ name }) => !!name);
   return {
     status: +statusCode,
@@ -95,7 +118,11 @@ export const mockRouteToHar = ({ statusCode, statusText, mimeType, headersArray,
   };
 };
 export const useMockRoutePatcher = () => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
+  const { organizationId, projectId, workspaceId } = useParams<{
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  }>();
   const fetcher = useFetcher();
   return (id: string, patch: Partial<MockRoute>) => {
     fetcher.submit(JSON.stringify(patch), {
@@ -115,14 +142,21 @@ export const MockRouteRoute = () => {
   const mockbinUrl = mockServer.useInsomniaCloud ? getMockServiceURL() : mockServer.url;
 
   const requestFetcher = useFetcher({ key: 'mock-request-fetcher' });
-  const { organizationId, projectId, workspaceId } = useParams() as { organizationId: string; projectId: string; workspaceId: string };
+  const { organizationId, projectId, workspaceId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+  };
 
   const upsertBinOnRemoteFromResponse = async (compoundId: string | null): Promise<string> => {
     try {
-      const res = await insomniaFetch<string | {
-        error: string;
-        message: string;
-      }>({
+      const res = await insomniaFetch<
+        | string
+        | {
+            error: string;
+            message: string;
+          }
+      >({
         origin: mockbinUrl,
         path: `/bin/upsert/${compoundId}`,
         method: 'PUT',
@@ -156,14 +190,14 @@ export const MockRouteRoute = () => {
   };
 
   const createAndSendPrivateRequest = (patch: Partial<Request>) =>
-    requestFetcher.submit(JSON.stringify(patch),
-      {
-        encType: 'application/json',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new-mock-send`,
-        method: 'post',
-      });
+    requestFetcher.submit(JSON.stringify(patch), {
+      encType: 'application/json',
+      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/new-mock-send`,
+      method: 'post',
+    });
   const upsertMockbinHar = async (pathInput?: string) => {
-    const hasRouteInServer = mockRoutes.filter(m => m._id !== mockRoute._id)
+    const hasRouteInServer = mockRoutes
+      .filter(m => m._id !== mockRoute._id)
       .find(m => m.name === pathInput && m.method.toUpperCase() === mockRoute.method.toUpperCase());
     if (hasRouteInServer) {
       showModal(AlertModal, {
@@ -199,7 +233,8 @@ export const MockRouteRoute = () => {
     });
   };
   const onSend = async (pathInput: string) => {
-    const hasRouteInServer = mockRoutes.filter(m => m._id !== mockRoute._id)
+    const hasRouteInServer = mockRoutes
+      .filter(m => m._id !== mockRoute._id)
       .find(m => m.name === pathInput && m.method.toUpperCase() === mockRoute.method.toUpperCase());
     if (hasRouteInServer) {
       showModal(AlertModal, {
@@ -232,34 +267,39 @@ export const MockRouteRoute = () => {
         <MockUrlBar key={mockRoute._id + mockRoute.name} onSend={onSend} onPathUpdate={upsertMockbinHar} />
       </PaneHeader>
       <PaneBody>
-        <Tabs aria-label='Mock response config' className="flex-1 w-full h-full flex flex-col">
-          <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+        <Tabs aria-label="Mock response config" className="flex h-full w-full flex-1 flex-col">
+          <TabList
+            className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+            aria-label="Request pane tabs"
+          >
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='content-type'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="content-type"
             >
               Mock Body
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='headers'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="headers"
             >
               Mock Headers{' '}
               {headersCount > 0 && (
-                <span className="p-2 aspect-square flex items-center color-inherit justify-between border-solid border border-[--hl-md] overflow-hidden rounded-lg text-xs shadow-small">{headersCount}</span>
+                <span className="color-inherit shadow-small flex aspect-square items-center justify-between overflow-hidden rounded-lg border border-solid border-[--hl-md] p-2 text-xs">
+                  {headersCount}
+                </span>
               )}
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='status'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="status"
             >
               Mock Status
             </Tab>
           </TabList>
-          <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='content-type'>
-            <Toolbar className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
+          <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="content-type">
+            <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
               <Dropdown
-                aria-label='Change Body Type'
+                aria-label="Change Body Type"
                 triggerButton={
                   <Button>
                     {mockRoute.mimeType ? 'Mock ' + contentTypesMap[mockRoute.mimeType]?.[0] : 'Mock Body'}
@@ -277,8 +317,8 @@ export const MockRouteRoute = () => {
                 ))}
               </Dropdown>
             </Toolbar>
-            {mockRoute.mimeType ?
-              (<CodeEditor
+            {mockRoute.mimeType ? (
+              <CodeEditor
                 id="mock-response-body-editor"
                 key={mockRoute._id}
                 showPrettifyButton
@@ -287,25 +327,23 @@ export const MockRouteRoute = () => {
                 onBlur={onBlurTriggerUpsert}
                 mode={mockRoute.mimeType}
                 placeholder="..."
-              />) :
-              (<EmptyStatePane
+              />
+            ) : (
+              <EmptyStatePane
                 icon={<SvgIcon icon="bug" />}
                 documentationLinks={[]}
                 secondaryAction="Set up the mock body and headers you would like to return"
                 title="Choose a mock body to return as a response"
-              />)}
+              />
+            )}
           </TabPanel>
-          <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='headers'>
-            <MockResponseHeadersEditor
-              key={mockRoute._id + mockRoute.name}
-              onBlur={onBlurTriggerUpsert}
-              bulk={false}
-            />
+          <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="headers">
+            <MockResponseHeadersEditor key={mockRoute._id + mockRoute.name} onBlur={onBlurTriggerUpsert} bulk={false} />
           </TabPanel>
-          <TabPanel className='w-full flex-1 flex flex-col overflow-y-auto' id='status'>
-            <div className='w-full px-4'>
+          <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="status">
+            <div className="w-full px-4">
               <div className="form-row">
-                <div className='form-control form-control--outlined'>
+                <div className="form-control form-control--outlined">
                   <label htmlFor="mock-response-status-code-editor">
                     <small>Status Code</small>
                     <input
@@ -321,7 +359,7 @@ export const MockRouteRoute = () => {
                 </div>
               </div>
               <div className="form-row">
-                <div className='form-control form-control--outlined'>
+                <div className="form-control form-control--outlined">
                   <label htmlFor="mock-response-status-text-editor">
                     <small>Status Text</small>
                     <input
@@ -331,7 +369,6 @@ export const MockRouteRoute = () => {
                       defaultValue={mockRoute.statusText}
                       onChange={e => patchMockRoute(mockRoute._id, { statusText: e.currentTarget.value })}
                       onBlur={onBlurTriggerUpsert}
-
                       placeholder={RESPONSE_CODE_REASONS[mockRoute.statusCode || 200] || 'Unknown'}
                     />
                   </label>
@@ -346,7 +383,5 @@ export const MockRouteRoute = () => {
 };
 
 export const MockRouteResponse = () => {
-  return (
-    <MockResponsePane />
-  );
+  return <MockResponsePane />;
 };
diff --git a/packages/insomnia/src/ui/routes/mock-server.tsx b/packages/insomnia/src/ui/routes/mock-server.tsx
index 4ce98070d1..ef53542ad5 100644
--- a/packages/insomnia/src/ui/routes/mock-server.tsx
+++ b/packages/insomnia/src/ui/routes/mock-server.tsx
@@ -1,8 +1,28 @@
 import type { IconName } from '@fortawesome/fontawesome-svg-core';
 import React, { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Breadcrumb, Breadcrumbs, Button, GridList, GridListItem, Menu, MenuItem, MenuTrigger, Popover } from 'react-aria-components';
+import {
+  Breadcrumb,
+  Breadcrumbs,
+  Button,
+  GridList,
+  GridListItem,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Popover,
+} from 'react-aria-components';
 import { type ImperativePanelGroupHandle, Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
-import { type LoaderFunction, NavLink, Route, Routes, useFetcher, useLoaderData, useNavigate, useParams, useRouteLoaderData } from 'react-router-dom';
+import {
+  type LoaderFunction,
+  NavLink,
+  Route,
+  Routes,
+  useFetcher,
+  useLoaderData,
+  useNavigate,
+  useParams,
+  useRouteLoaderData,
+} from 'react-router-dom';
 
 import { DEFAULT_SIDEBAR_SIZE } from '../../common/constants';
 import * as models from '../../models';
@@ -57,9 +77,7 @@ const MockServerRoute = () => {
   const { settings } = useRootLoaderData();
   const { mockServerId, mockRoutes } = useLoaderData() as MockServerLoaderData;
 
-  const { activeProject, activeWorkspace } = useRouteLoaderData(
-    ':workspaceId'
-  ) as WorkspaceLoaderData;
+  const { activeProject, activeWorkspace } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
 
   const fetcher = useFetcher();
   const navigate = useNavigate();
@@ -70,66 +88,70 @@ const MockServerRoute = () => {
     icon: IconName;
     action: (id: string, name: string) => void;
   }[] = [
-      {
-        id: 'rename',
-        name: 'Rename',
-        icon: 'edit',
-        action: id => {
-          showPrompt({
-            title: 'Rename mock route',
-            defaultValue: mockRoutes.find(s => s._id === id)?.name,
-            submitName: 'Rename',
-            onComplete: name => {
-              const hasRouteInServer = mockRoutes.filter(m => m._id !== id)
-                .find(m => m.name === name && m.method.toUpperCase() === mockRoutes.find(m => m._id !== id)?.method.toUpperCase());
-              if (hasRouteInServer) {
-                showModal(AlertModal, {
-                  title: 'Error',
-                  message: `Path "${name}" and method must be unique. Please enter a different name.`,
-                });
-                return;
-              }
-              if (name[0] !== '/') {
-                showModal(AlertModal, {
-                  title: 'Error',
-                  message: 'Path must begin with a /',
-                });
-                return;
-              }
-              name && patchMockRoute(id, { name });
-            },
-          });
-        },
+    {
+      id: 'rename',
+      name: 'Rename',
+      icon: 'edit',
+      action: id => {
+        showPrompt({
+          title: 'Rename mock route',
+          defaultValue: mockRoutes.find(s => s._id === id)?.name,
+          submitName: 'Rename',
+          onComplete: name => {
+            const hasRouteInServer = mockRoutes
+              .filter(m => m._id !== id)
+              .find(
+                m =>
+                  m.name === name &&
+                  m.method.toUpperCase() === mockRoutes.find(m => m._id !== id)?.method.toUpperCase(),
+              );
+            if (hasRouteInServer) {
+              showModal(AlertModal, {
+                title: 'Error',
+                message: `Path "${name}" and method must be unique. Please enter a different name.`,
+              });
+              return;
+            }
+            if (name[0] !== '/') {
+              showModal(AlertModal, {
+                title: 'Error',
+                message: 'Path must begin with a /',
+              });
+              return;
+            }
+            name && patchMockRoute(id, { name });
+          },
+        });
       },
-      {
-        id: 'delete-route',
-        name: 'Delete mock route',
-        icon: 'trash',
-        action: (id, name) => {
-          showModal(AskModal, {
-            title: 'Delete route',
-            message: `Do you really want to delete "${name}"?`,
-            yesText: 'Delete',
-            noText: 'Cancel',
-            onDone: async (isYes: boolean) => {
-              if (isYes) {
-                fetcher.submit(
-                  {
-                    isSelected: mockRouteId === id,
-                  },
-                  {
-                    encType: 'application/json',
-                    action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${id}/delete`,
-                    method: 'POST',
-                  }
-                );
-              }
-            },
-          });
-        },
+    },
+    {
+      id: 'delete-route',
+      name: 'Delete mock route',
+      icon: 'trash',
+      action: (id, name) => {
+        showModal(AskModal, {
+          title: 'Delete route',
+          message: `Do you really want to delete "${name}"?`,
+          yesText: 'Delete',
+          noText: 'Cancel',
+          onDone: async (isYes: boolean) => {
+            if (isYes) {
+              fetcher.submit(
+                {
+                  isSelected: mockRouteId === id,
+                },
+                {
+                  encType: 'application/json',
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${id}/delete`,
+                  method: 'POST',
+                },
+              );
+            }
+          },
+        });
       },
-
-    ];
+    },
+  ];
 
   const sidebarPanelRef = useRef<ImperativePanelGroupHandle>(null);
 
@@ -159,26 +181,27 @@ const MockServerRoute = () => {
     sidebar_toggle: toggleSidebar,
   });
 
-  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
+  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
+    settings.forceVerticalLayout ? 'vertical' : 'horizontal',
+  );
   useLayoutEffect(() => {
     if (settings.forceVerticalLayout) {
       setDirection('vertical');
-      return () => { };
+      return () => {};
     }
-      // Listen on media query changes
-      const mediaQuery = window.matchMedia('(max-width: 880px)');
-      setDirection(mediaQuery.matches ? 'vertical' : 'horizontal');
+    // Listen on media query changes
+    const mediaQuery = window.matchMedia('(max-width: 880px)');
+    setDirection(mediaQuery.matches ? 'vertical' : 'horizontal');
 
-      const handleChange = (e: MediaQueryListEvent) => {
-        setDirection(e.matches ? 'vertical' : 'horizontal');
-      };
+    const handleChange = (e: MediaQueryListEvent) => {
+      setDirection(e.matches ? 'vertical' : 'horizontal');
+    };
 
-      mediaQuery.addEventListener('change', handleChange);
-
-      return () => {
-        mediaQuery.removeEventListener('change', handleChange);
-      };
+    mediaQuery.addEventListener('change', handleChange);
 
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
   }, [settings.forceVerticalLayout, direction]);
 
   useInsomniaTab({
@@ -191,233 +214,252 @@ const MockServerRoute = () => {
   });
 
   return (
-    <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
-      <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
+    <PanelGroup
+      ref={sidebarPanelRef}
+      autoSaveId="insomnia-sidebar"
+      id="wrapper"
+      className="new-sidebar h-full w-full text-[--color-font]"
+      direction="horizontal"
+    >
+      <Panel
+        id="sidebar"
+        className="sidebar theme--sidebar"
+        defaultSize={DEFAULT_SIDEBAR_SIZE}
+        maxSize={40}
+        minSize={10}
+        collapsible
+      >
+        <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
           <div className={`flex items-center gap-2 h-[${INSOMNIA_TAB_HEIGHT}px] px-[--padding-sm]`}>
-          <Breadcrumbs className='flex list-none items-center m-0 p-0 gap-2 font-bold w-full'>
-            <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
-              <NavLink data-testid="project" className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm" to={`/organization/${organizationId}/project/${projectId}`}>
-                <Icon className='text-xs' icon="chevron-left" />
-              </NavLink>
-              <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
-            </Breadcrumb>
-            <Breadcrumb className="flex truncate select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
-              <WorkspaceDropdown />
-            </Breadcrumb>
-          </Breadcrumbs>
-        </div>
-        <div className="p-[--padding-sm]">
-          <Button
-            className="px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-            onPress={() => {
-              showPrompt({
-                title: 'New mock route',
-                defaultValue: '/',
-                submitName: 'Create',
-                placeholder: '/path/to/resource',
-                onComplete: name => {
-                  const hasRouteInServer = mockRoutes.find(m => m.name === name && m.method.toUpperCase() === 'GET');
-                  if (hasRouteInServer) {
-                    showModal(AlertModal, {
-                      title: 'Error',
-                      message: `Path "${name}" and must be unique. Please enter a different name.`,
-                    });
-                    return;
-                  }
-                  if (name[0] !== '/') {
-                    showModal(AlertModal, {
-                      title: 'Error',
-                      message: 'Path must begin with a /',
-                    });
-                    return;
-                  }
-                  fetcher.submit(
-                    {
-                      name,
-                      parentId: mockServerId,
-                    },
-                    {
-                      encType: 'application/json',
-                      method: 'post',
-                      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/new`,
+            <Breadcrumbs className="m-0 flex w-full list-none items-center gap-2 p-0 font-bold">
+              <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
+                <NavLink
+                  data-testid="project"
+                  className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
+                  to={`/organization/${organizationId}/project/${projectId}`}
+                >
+                  <Icon className="text-xs" icon="chevron-left" />
+                </NavLink>
+                <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
+              </Breadcrumb>
+              <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
+                <WorkspaceDropdown />
+              </Breadcrumb>
+            </Breadcrumbs>
+          </div>
+          <div className="p-[--padding-sm]">
+            <Button
+              className="flex items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+              onPress={() => {
+                showPrompt({
+                  title: 'New mock route',
+                  defaultValue: '/',
+                  submitName: 'Create',
+                  placeholder: '/path/to/resource',
+                  onComplete: name => {
+                    const hasRouteInServer = mockRoutes.find(m => m.name === name && m.method.toUpperCase() === 'GET');
+                    if (hasRouteInServer) {
+                      showModal(AlertModal, {
+                        title: 'Error',
+                        message: `Path "${name}" and must be unique. Please enter a different name.`,
+                      });
+                      return;
                     }
-                  );
-                },
-              });
+                    if (name[0] !== '/') {
+                      showModal(AlertModal, {
+                        title: 'Error',
+                        message: 'Path must begin with a /',
+                      });
+                      return;
+                    }
+                    fetcher.submit(
+                      {
+                        name,
+                        parentId: mockServerId,
+                      },
+                      {
+                        encType: 'application/json',
+                        method: 'post',
+                        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/new`,
+                      },
+                    );
+                  },
+                });
+              }}
+            >
+              <Icon icon="plus" />
+              New Mock Route
+            </Button>
+          </div>
+          <GridList
+            aria-label="Mock Routes"
+            items={mockRoutes.map(route => ({
+              id: route._id,
+              key: route._id,
+              ...route,
+            }))}
+            className="flex-1 overflow-y-auto py-[--padding-sm] data-[empty]:py-0"
+            disallowEmptySelection
+            selectedKeys={[mockRouteId]}
+            selectionMode="single"
+            onSelectionChange={keys => {
+              if (keys !== 'all') {
+                const value = keys.values().next().value;
+                navigate({
+                  pathname: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${value}`,
+                });
+              }
             }}
           >
-            <Icon icon="plus" />
-            New Mock Route
-          </Button>
-        </div>
-        <GridList
-          aria-label="Mock Routes"
-          items={mockRoutes.map(route => ({
-            id: route._id,
-            key: route._id,
-            ...route,
-          }))}
-          className="overflow-y-auto flex-1 data-[empty]:py-0 py-[--padding-sm]"
-          disallowEmptySelection
-          selectedKeys={[mockRouteId]}
-          selectionMode="single"
-          onSelectionChange={keys => {
-            if (keys !== 'all') {
-              const value = keys.values().next().value;
-              navigate({
-                pathname: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${value}`,
-              });
-            }
-          }}
-        >
-          {item => {
-            return (
-              <GridListItem
-                key={item._id}
-                id={item._id}
-                textValue={item.name}
-                className="group outline-none select-none w-full"
-              >
-                <div className="flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]">
-                  <span className="group-aria-selected:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
-                  <span
-                    className={
-                      `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-                            ${{
-                        'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-                        'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-                        'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                        'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                        'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-                        'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-                        'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-                      }[item.method] || 'text-[--color-font] bg-[--hl-md]'}`
-                    }
-                  >
-                    {formatMethodName(item.method)}
-                  </span>
-                  <EditableInput
-                    value={item.name}
-                    name="name"
-                    ariaLabel="Mock route name"
-                    className='hover:!bg-transparent'
-                    onSubmit={name => {
-                      const hasRouteInServer = mockRoutes.filter(m => m._id !== item._id).find(m => m.name === name && m.method.toUpperCase() === item.method.toUpperCase());
-                      if (hasRouteInServer) {
-                        showModal(AlertModal, {
-                          title: 'Error',
-                          message: `Path "${name}" and method must be unique. Please enter a different name.`,
-                        });
-                        return;
-                      }
-                      if (name[0] !== '/') {
-                        showModal(AlertModal, {
-                          title: 'Error',
-                          message: 'Path must begin with a /',
-                        });
-                        return;
-                      }
-                      name && fetcher.submit(
-                        { name },
+            {item => {
+              return (
+                <GridListItem
+                  key={item._id}
+                  id={item._id}
+                  textValue={item.name}
+                  className="group w-full select-none outline-none"
+                >
+                  <div className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]">
+                    <span className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors group-aria-selected:bg-[--color-surprise]" />
+                    <span
+                      className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
                         {
-                          encType: 'application/json',
-                          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${item._id}/update`,
-                          method: 'POST',
-                        }
-                      );
-                    }}
-                  />
-                  <span className="flex-1" />
-                  <MenuTrigger>
-                    <Button
-                      aria-label="Mock Route Actions"
-                      className="opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                          GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                          POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                          HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                          OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                          DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                          PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                          PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+                        }[item.method] || 'bg-[--hl-md] text-[--color-font]'
+                      }`}
                     >
-                      <Icon icon="caret-down" />
-                    </Button>
-                    <Popover className="min-w-max overflow-y-hidden flex flex-col">
-                      <Menu
-                        aria-label="Mock Route Action Menu"
-                        selectionMode="single"
-                        onAction={key => {
-                          mockRouteActionList
-                            .find(({ id }) => key === id)
-                            ?.action(item._id, item.name);
-                        }}
-                        items={mockRouteActionList}
-                        className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                      {formatMethodName(item.method)}
+                    </span>
+                    <EditableInput
+                      value={item.name}
+                      name="name"
+                      ariaLabel="Mock route name"
+                      className="hover:!bg-transparent"
+                      onSubmit={name => {
+                        const hasRouteInServer = mockRoutes
+                          .filter(m => m._id !== item._id)
+                          .find(m => m.name === name && m.method.toUpperCase() === item.method.toUpperCase());
+                        if (hasRouteInServer) {
+                          showModal(AlertModal, {
+                            title: 'Error',
+                            message: `Path "${name}" and method must be unique. Please enter a different name.`,
+                          });
+                          return;
+                        }
+                        if (name[0] !== '/') {
+                          showModal(AlertModal, {
+                            title: 'Error',
+                            message: 'Path must begin with a /',
+                          });
+                          return;
+                        }
+                        name &&
+                          fetcher.submit(
+                            { name },
+                            {
+                              encType: 'application/json',
+                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/mock-server/mock-route/${item._id}/update`,
+                              method: 'POST',
+                            },
+                          );
+                      }}
+                    />
+                    <span className="flex-1" />
+                    <MenuTrigger>
+                      <Button
+                        aria-label="Mock Route Actions"
+                        className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 data-[pressed]:bg-[--hl-sm] data-[pressed]:opacity-100"
                       >
-                        {item => (
-                          <MenuItem
-                            key={item.id}
-                            id={item.id}
-                            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                            aria-label={item.name}
-                          >
-                            <Icon icon={item.icon} />
-                            <span>{item.name}</span>
-                          </MenuItem>
-                        )}
-                      </Menu>
-                    </Popover>
-                  </MenuTrigger>
-                </div>
-              </GridListItem>
-            );
-          }}
-        </GridList>
+                        <Icon icon="caret-down" />
+                      </Button>
+                      <Popover className="flex min-w-max flex-col overflow-y-hidden">
+                        <Menu
+                          aria-label="Mock Route Action Menu"
+                          selectionMode="single"
+                          onAction={key => {
+                            mockRouteActionList.find(({ id }) => key === id)?.action(item._id, item.name);
+                          }}
+                          items={mockRouteActionList}
+                          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
+                        >
+                          {item => (
+                            <MenuItem
+                              key={item.id}
+                              id={item.id}
+                              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                              aria-label={item.name}
+                            >
+                              <Icon icon={item.icon} />
+                              <span>{item.name}</span>
+                            </MenuItem>
+                          )}
+                        </Menu>
+                      </Popover>
+                    </MenuTrigger>
+                  </div>
+                </GridListItem>
+              );
+            }}
+          </GridList>
 
-        <WorkspaceSyncDropdown />
+          <WorkspaceSyncDropdown />
         </div>
       </Panel>
-      <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
-      <Panel className='flex flex-col'>
+      <PanelResizeHandle className="h-full w-[1px] bg-[--hl-md]" />
+      <Panel className="flex flex-col">
         <OrganizationTabList />
         <PanelGroup autoSaveId="insomnia-panels" direction={direction}>
-          <Panel id="pane-one" minSize={10} className='pane-one theme--pane'>
+          <Panel id="pane-one" minSize={10} className="pane-one theme--pane">
             <Routes>
-      <Route
-        path={'mock-route/:mockRouteId/*'}
-        element={
-          <Suspense>
-            <MockRouteRoute />
-          </Suspense>
-        }
-      />
-      <Route
-        path="*"
-        element={
-          <EmptyStatePane
-            icon={<SvgIcon icon="bug" />}
-            documentationLinks={[]}
-            title="Create a route to configure mock response here"
-          />
-        }
-      />
+              <Route
+                path={'mock-route/:mockRouteId/*'}
+                element={
+                  <Suspense>
+                    <MockRouteRoute />
+                  </Suspense>
+                }
+              />
+              <Route
+                path="*"
+                element={
+                  <EmptyStatePane
+                    icon={<SvgIcon icon="bug" />}
+                    documentationLinks={[]}
+                    title="Create a route to configure mock response here"
+                  />
+                }
+              />
             </Routes>
           </Panel>
-          <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
-          <Panel id="pane-two" minSize={10} className='pane-two theme--pane'>
-            <Routes>
-      <Route
-        path={'mock-route/:mockRouteId/*'}
-        element={
-          <Suspense>
-            <MockRouteResponse />
-          </Suspense>
-        }
-      />
-      <Route
-        path="*"
-        element={
-          <EmptyStatePane
-            icon={<SvgIcon icon="bug" />}
-            documentationLinks={[]}
-            title="Create a route to see mock server activity here"
+          <PanelResizeHandle
+            className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'h-[1px] w-full bg-[--hl-md]'}
           />
-        }
-      />
+          <Panel id="pane-two" minSize={10} className="pane-two theme--pane">
+            <Routes>
+              <Route
+                path={'mock-route/:mockRouteId/*'}
+                element={
+                  <Suspense>
+                    <MockRouteResponse />
+                  </Suspense>
+                }
+              />
+              <Route
+                path="*"
+                element={
+                  <EmptyStatePane
+                    icon={<SvgIcon icon="bug" />}
+                    documentationLinks={[]}
+                    title="Create a route to see mock server activity here"
+                  />
+                }
+              />
             </Routes>
           </Panel>
         </PanelGroup>
diff --git a/packages/insomnia/src/ui/routes/modals.tsx b/packages/insomnia/src/ui/routes/modals.tsx
index 883b128b6f..9465cef612 100644
--- a/packages/insomnia/src/ui/routes/modals.tsx
+++ b/packages/insomnia/src/ui/routes/modals.tsx
@@ -30,33 +30,18 @@ const Modals: FC = () => {
       <ErrorBoundary showAlert>
         <AlertModal ref={instance => registerModal(instance, 'AlertModal')} />
         <ErrorModal ref={instance => registerModal(instance, 'ErrorModal')} />
-        <PromptModal
-          ref={instance => registerModal(instance, 'PromptModal')}
-        />
-        <WrapperModal
-          ref={instance => registerModal(instance, 'WrapperModal')}
-        />
+        <PromptModal ref={instance => registerModal(instance, 'PromptModal')} />
+        <WrapperModal ref={instance => registerModal(instance, 'WrapperModal')} />
         <AskModal ref={instance => registerModal(instance, 'AskModal')} />
-        <SelectModal
-          ref={instance => registerModal(instance, 'SelectModal')}
-        />
-        <FilterHelpModal
-          ref={instance => registerModal(instance, 'FilterHelpModal')}
-        />
-        <RequestRenderErrorModal
-          ref={instance => registerModal(instance, 'RequestRenderErrorModal')}
-        />
+        <SelectModal ref={instance => registerModal(instance, 'SelectModal')} />
+        <FilterHelpModal ref={instance => registerModal(instance, 'FilterHelpModal')} />
+        <RequestRenderErrorModal ref={instance => registerModal(instance, 'RequestRenderErrorModal')} />
 
-        <CodePromptModal
-          ref={instance => registerModal(instance, 'CodePromptModal')}
-        />
+        <CodePromptModal ref={instance => registerModal(instance, 'CodePromptModal')} />
 
         {activeWorkspace ? (
           <>
-            <NunjucksModal
-              ref={instance => registerModal(instance, 'NunjucksModal')}
-              workspace={activeWorkspace}
-            />
+            <NunjucksModal ref={instance => registerModal(instance, 'NunjucksModal')} workspace={activeWorkspace} />
           </>
         ) : null}
 
@@ -65,26 +50,15 @@ const Modals: FC = () => {
           environmentId={activeEnvironment ? activeEnvironment._id : 'n/a'}
         />
 
-        <SettingsModal
-          ref={instance => registerModal(instance, 'SettingsModal')}
-        />
+        <SettingsModal ref={instance => registerModal(instance, 'SettingsModal')} />
 
-        <ResponseDebugModal
-          ref={instance => registerModal(instance, 'ResponseDebugModal')}
-        />
+        <ResponseDebugModal ref={instance => registerModal(instance, 'ResponseDebugModal')} />
 
-        <AddKeyCombinationModal
-          ref={instance => registerModal(instance, 'AddKeyCombinationModal')}
-        />
+        <AddKeyCombinationModal ref={instance => registerModal(instance, 'AddKeyCombinationModal')} />
 
-        <SyncMergeModal
-          ref={instance => registerModal(instance, 'SyncMergeModal')}
-        />
-
-        <UpgradeModal
-          ref={instance => registerModal(instance, 'UpgradeModal')}
-        />
+        <SyncMergeModal ref={instance => registerModal(instance, 'SyncMergeModal')} />
 
+        <UpgradeModal ref={instance => registerModal(instance, 'UpgradeModal')} />
       </ErrorBoundary>
     </div>
   );
diff --git a/packages/insomnia/src/ui/routes/onboarding.migrate.tsx b/packages/insomnia/src/ui/routes/onboarding.migrate.tsx
index 2158a0679b..e769c1a704 100644
--- a/packages/insomnia/src/ui/routes/onboarding.migrate.tsx
+++ b/packages/insomnia/src/ui/routes/onboarding.migrate.tsx
@@ -9,7 +9,7 @@ import { InsomniaLogo } from '../components/insomnia-icon';
 import { TrailLinesContainer } from '../components/trail-lines-container';
 
 export const loader: LoaderFunction = async () => {
-  if (!await shouldMigrateProjectUnderOrganization()) {
+  if (!(await shouldMigrateProjectUnderOrganization())) {
     return redirect('/organization');
   }
 
@@ -34,36 +34,33 @@ export const Migrate = () => {
   const { Form, state } = useFetcher<MigrationActionData>();
 
   return (
-    <div className='relative h-full w-full text-left text-base flex bg-[--color-bg]'>
+    <div className="relative flex h-full w-full bg-[--color-bg] text-left text-base">
       <TrailLinesContainer>
-        <div
-          className='flex justify-center items-center flex-col h-full w-[540px] min-h-[min(450px,90%)]'
-        >
-          <div
-            className='flex flex-col gap-[var(--padding-sm)] items-center justify-center p-[--padding-lg] pt-12 w-full h-full bg-[--hl-xs] rounded-[var(--radius-md)] border-solid border border-[--hl-sm] relative'
-          >
-            <InsomniaLogo
-              className='transform translate-x-[-50%] translate-y-[-50%] absolute top-0 left-1/2 w-16 h-16'
-            />
-            <div
-              className='flex justify-center items-center flex-col h-full pt-2'
-            >
-              <div className='text-[--color-font] flex flex-col gap-4'>
-                <h1 className='text-xl font-bold text-center'>Collaboration with Cloud Sync now available</h1>
-                <div className='flex flex-col gap-4'>
+        <div className="flex h-full min-h-[min(450px,90%)] w-[540px] flex-col items-center justify-center">
+          <div className="relative flex h-full w-full flex-col items-center justify-center gap-[var(--padding-sm)] rounded-[var(--radius-md)] border border-solid border-[--hl-sm] bg-[--hl-xs] p-[--padding-lg] pt-12">
+            <InsomniaLogo className="absolute left-1/2 top-0 h-16 w-16 translate-x-[-50%] translate-y-[-50%] transform" />
+            <div className="flex h-full flex-col items-center justify-center pt-2">
+              <div className="flex flex-col gap-4 text-[--color-font]">
+                <h1 className="text-center text-xl font-bold">Collaboration with Cloud Sync now available</h1>
+                <div className="flex flex-col gap-4">
                   <p>
-                    With Cloud Sync your projects will be automatically synchronized to the cloud in an encrypted way and available on every Insomnia client after logging in for ease of use and collaboration.
+                    With Cloud Sync your projects will be automatically synchronized to the cloud in an encrypted way
+                    and available on every Insomnia client after logging in for ease of use and collaboration.
                   </p>
-
                 </div>
-                <Form method='POST' className='gap-4 flex flex-col text-left'>
-                  <RadioGroup aria-label='Project type' name="type" defaultValue={'local'} className="flex flex-col gap-2">
+                <Form method="POST" className="flex flex-col gap-4 text-left">
+                  <RadioGroup
+                    aria-label="Project type"
+                    name="type"
+                    defaultValue={'local'}
+                    className="flex flex-col gap-2"
+                  >
                     <div className="flex gap-2">
                       <Radio
                         value="local"
-                        className="data-[selected]:border-[--color-surprise] flex-1 data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                        className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[disabled]:opacity-25 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                       >
-                        <div className='flex items-center gap-2'>
+                        <div className="flex items-center gap-2">
                           <Icon icon="laptop" />
                           <Heading className="text-lg font-bold">Store in Local Vault</Heading>
                         </div>
@@ -73,24 +70,26 @@ export const Migrate = () => {
                       </Radio>
                       <Radio
                         value="remote"
-                        className="data-[selected]:border-[--color-surprise] flex-1 data-[selected]:ring-2 data-[selected]:ring-[--color-surprise] hover:bg-[--hl-xs] focus:bg-[--hl-sm] border border-solid border-[--hl-md] rounded p-4 focus:outline-none transition-colors"
+                        className="flex-1 rounded border border-solid border-[--hl-md] p-4 transition-colors hover:bg-[--hl-xs] focus:bg-[--hl-sm] focus:outline-none data-[selected]:border-[--color-surprise] data-[selected]:ring-2 data-[selected]:ring-[--color-surprise]"
                       >
-                        <div className='flex items-center gap-2'>
-
-                        <Icon icon="globe" />
+                        <div className="flex items-center gap-2">
+                          <Icon icon="globe" />
                           <Heading className="text-lg font-bold">Enable Cloud Sync</Heading>
                         </div>
-                        <p className='pt-2'>
+                        <p className="pt-2">
                           Encrypted and synced securely to the cloud, ideal for out of the box collaboration.
                         </p>
                       </Radio>
                     </div>
                   </RadioGroup>
-                  <div className='flex justify-end gap-2 items-center'>
+                  <div className="flex items-center justify-end gap-2">
                     <Button
                       type="submit"
                       isDisabled={state !== 'idle'}
-                      className={'hover:no-underline font-bold bg-[--color-surprise] text-sm hover:bg-opacity-90 py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm' + (state !== 'idle' ? 'animate-pulse cursor-not-allowed' : '')}
+                      className={
+                        'rounded-sm bg-[--color-surprise] px-3 py-2 text-sm font-bold text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline' +
+                        (state !== 'idle' ? 'animate-pulse cursor-not-allowed' : '')
+                      }
                     >
                       Continue
                     </Button>
diff --git a/packages/insomnia/src/ui/routes/onboarding.tsx b/packages/insomnia/src/ui/routes/onboarding.tsx
index 2f15cef521..2d7c82637e 100644
--- a/packages/insomnia/src/ui/routes/onboarding.tsx
+++ b/packages/insomnia/src/ui/routes/onboarding.tsx
@@ -50,11 +50,11 @@ const FeatureWizardView = () => {
       <Route
         path="/"
         element={
-          <ul className="grid grid-cols-1 gap-2 justify-center p-4">
+          <ul className="grid grid-cols-1 justify-center gap-2 p-4">
             {features.map(feature => (
               <li key={feature.id}>
                 <Link
-                  className="w-full hover:bg-[--hl-sm] bg-[--hl-xs] transition-colors select-none border-solid flex items-center border border-[--hl-md] rounded-sm px-8 py-4 gap-2 hover:no-underline"
+                  className="flex w-full select-none items-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[--hl-xs] px-8 py-4 transition-colors hover:bg-[--hl-sm] hover:no-underline"
                   to={`/onboarding/${feature.id}`}
                 >
                   <i className={`fa fa-${feature.icon} text-xl`} />
@@ -67,19 +67,15 @@ const FeatureWizardView = () => {
       />
       {[
         features.map((feature, index) => {
-          const nextPath =
-            index === features.length - 1
-              ? ''
-              : `/onboarding/${features[index + 1].id}`;
-          const prevPath =
-            index === 0 ? '' : `/onboarding/${features[index - 1].id}`;
+          const nextPath = index === features.length - 1 ? '' : `/onboarding/${features[index + 1].id}`;
+          const prevPath = index === 0 ? '' : `/onboarding/${features[index - 1].id}`;
 
           return (
             <Route
               key={feature.id}
               path={feature.id}
               element={
-                <div className="flex text-left flex-col h-80 gap-4 bg-[--color-bg] p-4 relative">
+                <div className="relative flex h-80 flex-col gap-4 bg-[--color-bg] p-4 text-left">
                   <h1 className="flex justify-between text-lg">
                     <span>{feature.title}</span>
                     <span>
@@ -87,17 +83,18 @@ const FeatureWizardView = () => {
                       <span className="text-[--hl-xl]">/{features.length}</span>
                     </span>
                   </h1>
-                  <div className="overflow-y-auto max-h-72 flex flex-col items-center gap-3">
-                    <p className="text-[--color-font] text-sm">
+                  <div className="flex max-h-72 flex-col items-center gap-3 overflow-y-auto">
+                    <p className="text-sm text-[--color-font]">
                       <span>{feature.description}</span>
                     </p>
                     <div className="h-32">
                       {feature.rounded ? (
-                        <img className="max-h-32 aspect-auto rounded-md" src={feature.image} />) : (
-                          <img className="max-h-32 aspect-auto" src={feature.image} />
+                        <img className="aspect-auto max-h-32 rounded-md" src={feature.image} />
+                      ) : (
+                        <img className="aspect-auto max-h-32" src={feature.image} />
                       )}
                     </div>
-                    <div className="flex w-full p-4 bottom-0 left-0 sticky justify-between text-sm font-normal bg-gradient-to-t from-[--color-bg] to-[rgba(var(--color-bg-rgb),80%)]">
+                    <div className="sticky bottom-0 left-0 flex w-full justify-between bg-gradient-to-t from-[--color-bg] to-[rgba(var(--color-bg-rgb),80%)] p-4 text-sm font-normal">
                       {prevPath ? (
                         <Link className="hover:no-underline" to={prevPath}>
                           <i className="fa fa-arrow-left" /> Previous feature
@@ -135,29 +132,22 @@ const Onboarding = () => {
   }, []);
 
   return (
-    <div className="relative h-full w-full text-left flex bg-[--color-bg]">
+    <div className="relative flex h-full w-full bg-[--color-bg] text-left">
       <TrailLinesContainer>
-        <div className="flex justify-center items-center flex-col h-full w-[600px] min-h-[465px]">
-          <div className="flex flex-col gap-[var(--padding-sm)] items-center h-[465px] justify-center p-[--padding-lg] pt-12 w-full bg-[--hl-xs] rounded-[var(--radius-md)] border-solid border border-[--hl-sm] relative">
-            <InsomniaLogo className="transform translate-x-[-50%] translate-y-[-50%] absolute top-0 left-1/2 w-16 h-16" />
-            <div className="text-[--color-font] flex flex-col gap-6 h-full">
-              <h1 className="text-xl text-center">
-                🚀 Welcome to Insomnia 11!
-              </h1>
+        <div className="flex h-full min-h-[465px] w-[600px] flex-col items-center justify-center">
+          <div className="relative flex h-[465px] w-full flex-col items-center justify-center gap-[var(--padding-sm)] rounded-[var(--radius-md)] border border-solid border-[--hl-sm] bg-[--hl-xs] p-[--padding-lg] pt-12">
+            <InsomniaLogo className="absolute left-1/2 top-0 h-16 w-16 translate-x-[-50%] translate-y-[-50%] transform" />
+            <div className="flex h-full flex-col gap-6 text-[--color-font]">
+              <h1 className="text-center text-xl">🚀 Welcome to Insomnia 11!</h1>
               <div>
-                <p>
-                  We shipped hundreds of improvements including the following notable features:
-                </p>
+                <p>We shipped hundreds of improvements including the following notable features:</p>
               </div>
-              <div className="w-full relative flex-1">
+              <div className="relative w-full flex-1">
                 <FeatureWizardView />
               </div>
-              <div className="flex justify-between items-center">
+              <div className="flex items-center justify-between">
                 {location.pathname !== '/onboarding' ? (
-                  <Link
-                    className="hover:no-underline flex items-center gap-2 text-sm px-4"
-                    to="/onboarding"
-                  >
+                  <Link className="flex items-center gap-2 px-4 text-sm hover:no-underline" to="/onboarding">
                     <i className="fa fa-border-all" />
                     See all features
                   </Link>
@@ -165,7 +155,7 @@ const Onboarding = () => {
                   <span />
                 )}
                 <Link
-                  className="hover:no-underline bg-[--color-surprise] text-sm hover:bg-opacity-90 border border-solid border-[--hl-md] py-2 px-3 text-[--color-font-surprise] transition-colors rounded-sm"
+                  className="rounded-sm border border-solid border-[--hl-md] bg-[--color-surprise] px-3 py-2 text-sm text-[--color-font-surprise] transition-colors hover:bg-opacity-90 hover:no-underline"
                   to={window.localStorage.getItem('prefers-project-type') ? '/organization' : '/onboarding/migrate'}
                   onClick={() => window.localStorage.setItem('hasSeenOnboardingV11', 'true')}
                 >
diff --git a/packages/insomnia/src/ui/routes/organization.tsx b/packages/insomnia/src/ui/routes/organization.tsx
index 14cab7ee39..4b5e74c1b7 100644
--- a/packages/insomnia/src/ui/routes/organization.tsx
+++ b/packages/insomnia/src/ui/routes/organization.tsx
@@ -33,12 +33,21 @@ import { database } from '../../common/database';
 import { SentryMetrics } from '../../common/sentry';
 import { userSession } from '../../models';
 import { updateLocalProjectToRemote } from '../../models/helpers/project';
-import { findPersonalOrganization, isOwnerOfOrganization, isPersonalOrganization, isScratchpadOrganizationId, type Organization } from '../../models/organization';
+import {
+  findPersonalOrganization,
+  isOwnerOfOrganization,
+  isPersonalOrganization,
+  isScratchpadOrganizationId,
+  type Organization,
+} from '../../models/organization';
 import { type Project, type as ProjectType } from '../../models/project';
 import type { Settings } from '../../models/settings';
 import { isScratchpad } from '../../models/workspace';
 import { VCSInstance } from '../../sync/vcs/insomnia-sync';
-import { migrateProjectsIntoOrganization, shouldMigrateProjectUnderOrganization } from '../../sync/vcs/migrate-projects-into-organization';
+import {
+  migrateProjectsIntoOrganization,
+  shouldMigrateProjectUnderOrganization,
+} from '../../sync/vcs/migrate-projects-into-organization';
 import { insomniaFetch } from '../../ui/insomniaFetch';
 import { invariant } from '../../utils/invariant';
 import { AsyncTask, getInitialRouteForOrganization } from '../../utils/router';
@@ -119,23 +128,34 @@ export interface CurrentPlan {
 }
 
 function sortOrganizations(accountId: string, organizations: Organization[]): Organization[] {
-  const home = organizations.find(organization => isPersonalOrganization(organization) && isOwnerOfOrganization({
-    organization,
-    accountId,
-  }));
-  const myOrgs = organizations.filter(organization => !isPersonalOrganization(organization) && isOwnerOfOrganization({
-    organization,
-    accountId,
-  })).sort((a, b) => a.name.localeCompare(b.name));
-  const notMyOrgs = organizations.filter(organization => !isOwnerOfOrganization({
-    organization,
-    accountId,
-  })).sort((a, b) => a.name.localeCompare(b.name));
-  return [
-    ...(home ? [home] : []),
-    ...myOrgs,
-    ...notMyOrgs,
-  ];
+  const home = organizations.find(
+    organization =>
+      isPersonalOrganization(organization) &&
+      isOwnerOfOrganization({
+        organization,
+        accountId,
+      }),
+  );
+  const myOrgs = organizations
+    .filter(
+      organization =>
+        !isPersonalOrganization(organization) &&
+        isOwnerOfOrganization({
+          organization,
+          accountId,
+        }),
+    )
+    .sort((a, b) => a.name.localeCompare(b.name));
+  const notMyOrgs = organizations
+    .filter(
+      organization =>
+        !isOwnerOfOrganization({
+          organization,
+          accountId,
+        }),
+    )
+    .sort((a, b) => a.name.localeCompare(b.name));
+  return [...(home ? [home] : []), ...myOrgs, ...notMyOrgs];
 }
 
 async function syncOrganizations(sessionId: string, accountId: string) {
@@ -183,7 +203,11 @@ interface SyncOrgsAndProjectsActionRequest {
 // this action is used to run task that we dont want to block the UI
 export const syncOrgsAndProjectsAction: ActionFunction = async ({ request }) => {
   try {
-    const { organizationId, projectId, asyncTaskList = [] } = await request.json() as SyncOrgsAndProjectsActionRequest;
+    const {
+      organizationId,
+      projectId,
+      asyncTaskList = [],
+    } = (await request.json()) as SyncOrgsAndProjectsActionRequest;
     const { id: sessionId, accountId } = await userSession.getOrCreate();
 
     const taskPromiseList = [];
@@ -262,7 +286,10 @@ export const indexLoader: LoaderFunction = async () => {
     invariant(organizations, 'Failed to fetch organizations.');
 
     const personalOrganization = findPersonalOrganization(organizations, accountId);
-    invariant(personalOrganization, 'Failed to find personal organization your account appears to be in an invalid state. Please contact support if this is a recurring issue.');
+    invariant(
+      personalOrganization,
+      'Failed to find personal organization your account appears to be in an invalid state. Please contact support if this is a recurring issue.',
+    );
     const personalOrganizationId = personalOrganization.id;
     await migrateProjectsUnderOrganization(personalOrganizationId, sessionId);
 
@@ -319,7 +346,6 @@ export const loader: LoaderFunction = async () => {
     user: undefined,
     currentPlan: undefined,
   };
-
 };
 
 export interface FeatureStatus {
@@ -416,11 +442,13 @@ export async function fetchAndCacheOrganizationStorageRule(
     err => {
       console.log('[storageRule] Failed to load storage rules', err.message);
       return DEFAULT_STORAGE_RULES;
-    }
+    },
   );
 }
 
-export const organizationPermissionsLoader: LoaderFunction = async ({ params }): Promise<OrganizationFeatureLoaderData> => {
+export const organizationPermissionsLoader: LoaderFunction = async ({
+  params,
+}): Promise<OrganizationFeatureLoaderData> => {
   const { organizationId } = params as { organizationId: string };
   const { id: sessionId, accountId } = await userSession.getOrCreate();
   const fallbackFeatures = {
@@ -502,7 +530,7 @@ const NetworkAndSyncIndicator = ({ user, asyncTaskStatus, settings, sync }: Indi
       {status === 'online' && asyncTaskStatus !== 'idle' ? (
         <TooltipTrigger>
           <Button
-            className="px-4 py-1 h-full flex items-center justify-center gap-1 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+            className="flex h-full items-center justify-center gap-1 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             onPress={() => {
               asyncTaskStatus === 'error' && sync();
             }}
@@ -516,7 +544,7 @@ const NetworkAndSyncIndicator = ({ user, asyncTaskStatus, settings, sync }: Indi
           <Tooltip
             placement="top"
             offset={8}
-            className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
           >
             {asyncTaskStatus !== 'error' ? 'Syncing' : 'Sync error: click to retry'}
           </Tooltip>
@@ -524,7 +552,7 @@ const NetworkAndSyncIndicator = ({ user, asyncTaskStatus, settings, sync }: Indi
       ) : (
         <TooltipTrigger>
           <Button
-            className="px-4 py-1 h-full flex items-center justify-center gap-1 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+            className="flex h-full items-center justify-center gap-1 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
             onPress={() => {
               !user && navigate('/auth/login');
               if (settings.proxyEnabled) {
@@ -536,26 +564,21 @@ const NetworkAndSyncIndicator = ({ user, asyncTaskStatus, settings, sync }: Indi
           >
             <Icon
               icon="circle"
-              className={
-                user
-                  ? status === 'online'
-                    ? 'text-[--color-success]'
-                    : 'text-[--color-danger]'
-                  : ''
-              }
+              className={user ? (status === 'online' ? 'text-[--color-success]' : 'text-[--color-danger]') : ''}
             />{' '}
-            {user
-              ? status.charAt(0).toUpperCase() + status.slice(1)
-              : 'Log in to see your projects'}
+            {user ? status.charAt(0).toUpperCase() + status.slice(1) : 'Log in to see your projects'}
             {status === 'online' && settings.proxyEnabled ? ' via proxy' : ''}
           </Button>
           <Tooltip
             placement="top"
             offset={8}
-            className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+            className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
           >
             {user
-              ? status === 'online' ? 'You have connectivity to the Internet' + (settings.proxyEnabled ? ' via the configured proxy' : '') + '.'
+              ? status === 'online'
+                ? 'You have connectivity to the Internet' +
+                  (settings.proxyEnabled ? ' via the configured proxy' : '') +
+                  '.'
                 : 'You are offline. Connect to sync your data.'
               : 'Log in to Insomnia to unlock the full product experience.'}
           </Tooltip>
@@ -569,17 +592,15 @@ const OrganizationRoute = () => {
   const { userSession, settings } = useRootLoaderData();
   const { billing } = useOrganizationPermissions();
 
-  const { organizations, user, currentPlan } =
-    useLoaderData() as OrganizationLoaderData;
-  const workspaceData = useRouteLoaderData(
-    ':workspaceId',
-  ) as WorkspaceLoaderData | null;
+  const { organizations, user, currentPlan } = useLoaderData() as OrganizationLoaderData;
+  const workspaceData = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData | null;
 
   const navigate = useNavigate();
-  const [isScratchPadBannerDismissed, setIsScratchPadBannerDismissed] = useLocalStorage('scratchpad-banner-dismissed', '');
-  const isScratchpadWorkspace =
-    workspaceData?.activeWorkspace &&
-    isScratchpad(workspaceData.activeWorkspace);
+  const [isScratchPadBannerDismissed, setIsScratchPadBannerDismissed] = useLocalStorage(
+    'scratchpad-banner-dismissed',
+    '',
+  );
+  const isScratchpadWorkspace = workspaceData?.activeWorkspace && isScratchpad(workspaceData.activeWorkspace);
   const isScratchPadBannerVisible = !isScratchPadBannerDismissed && isScratchpadWorkspace;
   const untrackedProjectsFetcher = useFetcher<UntrackedProjectsLoaderData>();
   const { organizationId, projectId } = useParams() as {
@@ -598,15 +619,18 @@ const OrganizationRoute = () => {
   const syncOrgsAndProjects = useCallback(() => {
     const submit = syncOrgsAndProjectsFetcher.submit;
 
-    submit({
-      organizationId,
-      projectId: projectId || '',
-      asyncTaskList,
-    }, {
-      action: '/organization/sync-orgs-and-projects',
-      method: 'POST',
-      encType: 'application/json',
-    });
+    submit(
+      {
+        organizationId,
+        projectId: projectId || '',
+        asyncTaskList,
+      },
+      {
+        action: '/organization/sync-orgs-and-projects',
+        method: 'POST',
+        encType: 'application/json',
+      },
+    );
   }, [asyncTaskList, organizationId, syncOrgsAndProjectsFetcher.submit, projectId]);
 
   useEffect(() => {
@@ -633,16 +657,17 @@ const OrganizationRoute = () => {
   const [isOrganizationSidebarOpen, setIsOganizationSidebarOpen] = useLocalStorage('organizationSidebarOpen', true);
   const [isMinimal, setIsMinimal] = useLocalStorage('isMinimal', false);
 
-  const {
-    generating: loadingAI,
-    progress: loadingAIProgress,
-  } = useAIContext();
+  const { generating: loadingAI, progress: loadingAIProgress } = useAIContext();
 
   const nextOrganizationId = useRef<string>();
   const startSwitchOrganizationTime = useRef<number>();
 
   useEffect(() => {
-    if (nextOrganizationId.current && startSwitchOrganizationTime.current && nextOrganizationId.current === organizationId) {
+    if (
+      nextOrganizationId.current &&
+      startSwitchOrganizationTime.current &&
+      nextOrganizationId.current === organizationId
+    ) {
       const duration = performance.now() - startSwitchOrganizationTime.current;
       Sentry.metrics.distribution(SentryMetrics.ORGANIZATION_SWITCH_DURATION, duration, {
         unit: 'millisecond',
@@ -655,63 +680,63 @@ const OrganizationRoute = () => {
   return (
     <InsomniaEventStreamProvider>
       <InsomniaTabProvider>
-        <div className="w-full h-full">
-          <div className={`w-full h-full divide-x divide-solid divide-[--hl-md] ${isOrganizationSidebarOpen ? 'with-navbar' : ''} ${isScratchPadBannerVisible ? 'with-banner' : ''} grid-template-app-layout grid relative bg-[--color-bg]`}>
-            {!isMinimal && <header className="[grid-area:Header] grid grid-cols-3 items-center border-b border-solid border-[--hl-md]">
-              <div className="flex items-center gap-2">
-                <div className="flex shrink-0 w-[50px] justify-center py-2">
-                  <InsomniaLogo loading={loadingAI} />
+        <div className="h-full w-full">
+          <div
+            className={`h-full w-full divide-x divide-solid divide-[--hl-md] ${isOrganizationSidebarOpen ? 'with-navbar' : ''} ${isScratchPadBannerVisible ? 'with-banner' : ''} grid-template-app-layout relative grid bg-[--color-bg]`}
+          >
+            {!isMinimal && (
+              <header className="grid grid-cols-3 items-center border-b border-solid border-[--hl-md] [grid-area:Header]">
+                <div className="flex items-center gap-2">
+                  <div className="flex w-[50px] shrink-0 justify-center py-2">
+                    <InsomniaLogo loading={loadingAI} />
+                  </div>
+                  {!user ? <GitHubStarsButton /> : null}
                 </div>
-                {!user ? <GitHubStarsButton /> : null}
-              </div>
-              <CommandPalette />
-              <div className="flex gap-[--padding-sm] items-center justify-end p-2">
-                {user ? (
-                  <Fragment>
-                    <PresentUsers />
-                    <HeaderInviteButton className="text-[--color-font-surprise] font-semibold border border-solid border-[--hl-md] bg-opacity-100 bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))]" />
-                    <HeaderUserButton user={user} currentPlan={currentPlan} isMinimal={isMinimal} />
-                  </Fragment>
-                ) : (
-                  <Fragment>
-                    <NavLink
-                      to="/auth/login"
-                      className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                    >
-                      Login
-                    </NavLink>
-                    <NavLink
-                      className="px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[rgba(var(--color-surprise-rgb),0.8)] focus:bg-[rgba(var(--color-surprise-rgb),0.9)] bg-[--color-surprise] font-semibold rounded-sm text-[--color-font-surprise] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                      to="/auth/login"
-                    >
-                      Sign up for free
-                    </NavLink>
-                  </Fragment>
-                )}
-              </div>
-            </header>}
+                <CommandPalette />
+                <div className="flex items-center justify-end gap-[--padding-sm] p-2">
+                  {user ? (
+                    <Fragment>
+                      <PresentUsers />
+                      <HeaderInviteButton className="border border-solid border-[--hl-md] bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100 font-semibold text-[--color-font-surprise]" />
+                      <HeaderUserButton user={user} currentPlan={currentPlan} isMinimal={isMinimal} />
+                    </Fragment>
+                  ) : (
+                    <Fragment>
+                      <NavLink
+                        to="/auth/login"
+                        className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                      >
+                        Login
+                      </NavLink>
+                      <NavLink
+                        className="flex items-center justify-center gap-2 rounded-sm bg-[--color-surprise] px-4 py-1 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all focus:bg-[rgba(var(--color-surprise-rgb),0.9)] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[rgba(var(--color-surprise-rgb),0.8)]"
+                        to="/auth/login"
+                      >
+                        Sign up for free
+                      </NavLink>
+                    </Fragment>
+                  )}
+                </div>
+              </header>
+            )}
             {isScratchPadBannerVisible ? (
-              <div className="flex h-[30px] items-center [grid-area:Banner] text-white bg-gradient-to-r from-[#7400e1] to-[#4000bf]">
-                <div className="flex flex-shrink-0 basis-[50px] h-full">
-                  <div className="border-solid border-r-[--hl-xl] border-r border-l border-l-[--hl-xl] box-border flex items-center justify-center w-full h-full">
+              <div className="flex h-[30px] items-center bg-gradient-to-r from-[#7400e1] to-[#4000bf] text-white [grid-area:Banner]">
+                <div className="flex h-full flex-shrink-0 basis-[50px]">
+                  <div className="box-border flex h-full w-full items-center justify-center border-l border-r border-solid border-l-[--hl-xl] border-r-[--hl-xl]">
                     <Icon icon="edit" />
                   </div>
                 </div>
-                <div className="py-[--padding-xs] overflow-hidden px-[--padding-md] w-full h-full flex items-center text-xs">
-                  <p className='w-full truncate leading-normal'>
-                    Welcome to the Scratch Pad where you can work locally with up to 1 collection.
-                    To create more and see your projects
-                    {' '}
-                    <NavLink
-                      to="/auth/login"
-                      className="font-bold text-white inline-flex"
-                    >
+                <div className="flex h-full w-full items-center overflow-hidden px-[--padding-md] py-[--padding-xs] text-xs">
+                  <p className="w-full truncate leading-normal">
+                    Welcome to the Scratch Pad where you can work locally with up to 1 collection. To create more and
+                    see your projects{' '}
+                    <NavLink to="/auth/login" className="inline-flex font-bold text-white">
                       login or create an account →
                     </NavLink>
                   </p>
                 </div>
                 <Button
-                  className="flex flex-shrink-0 mr-2 items-center justify-center aspect-square h-6 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="mr-2 flex aspect-square h-6 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   onPress={() => {
                     setIsScratchPadBannerDismissed('true');
                   }}
@@ -720,139 +745,150 @@ const OrganizationRoute = () => {
                 </Button>
               </div>
             ) : null}
-            {isOrganizationSidebarOpen && <div className={`[grid-area:Navbar] overflow-hidden ${isOrganizationSidebarOpen ? '' : 'hidden'}`}>
-              <nav className="flex flex-col items-center place-content-stretch gap-[--padding-md] w-full h-full overflow-y-auto py-[--padding-md]">
-                {organizations.map(organization => {
-                  const isActive = organization.id === organizationId;
+            {isOrganizationSidebarOpen && (
+              <div className={`overflow-hidden [grid-area:Navbar] ${isOrganizationSidebarOpen ? '' : 'hidden'}`}>
+                <nav className="flex h-full w-full flex-col place-content-stretch items-center gap-[--padding-md] overflow-y-auto py-[--padding-md]">
+                  {organizations.map(organization => {
+                    const isActive = organization.id === organizationId;
 
-                  return (
-                    <TooltipTrigger key={organization.id}>
-                      <Link className="outline-none relative">
-                        <div
-                          className={`select-none text-[--color-font-surprise] hover:no-underline transition-all duration-150 bg-gradient-to-br box-border from-[#4000BF] to-[#154B62] font-bold outline-[3px] rounded-md w-[28px] h-[28px] flex items-center justify-center active:outline overflow-hidden outline-offset-[3px] outline ${isActive
-                            ? 'outline-[--color-font]'
-                            : 'outline-transparent focus:outline-[--hl-md] hover:outline-[--hl-md]'
+                    return (
+                      <TooltipTrigger key={organization.id}>
+                        <Link className="relative outline-none">
+                          <div
+                            className={`box-border flex h-[28px] w-[28px] select-none items-center justify-center overflow-hidden rounded-md bg-gradient-to-br from-[#4000BF] to-[#154B62] font-bold text-[--color-font-surprise] outline outline-[3px] outline-offset-[3px] transition-all duration-150 hover:no-underline active:outline ${
+                              isActive
+                                ? 'outline-[--color-font]'
+                                : 'outline-transparent hover:outline-[--hl-md] focus:outline-[--hl-md]'
                             }`}
-                          onClick={async () => {
-                            nextOrganizationId.current = organization.id;
-                            startSwitchOrganizationTime.current = performance.now();
-                            const routeForOrganization = await getInitialRouteForOrganization({ organizationId: organization.id });
-                            navigate(routeForOrganization, {
-                              state: {
-                                asyncTaskList: [
-                                  // we only need sync projects when user switch to another organization
-                                  AsyncTask.SyncProjects,
-                                ],
-                              },
-                            });
-                          }}
+                            onClick={async () => {
+                              nextOrganizationId.current = organization.id;
+                              startSwitchOrganizationTime.current = performance.now();
+                              const routeForOrganization = await getInitialRouteForOrganization({
+                                organizationId: organization.id,
+                              });
+                              navigate(routeForOrganization, {
+                                state: {
+                                  asyncTaskList: [
+                                    // we only need sync projects when user switch to another organization
+                                    AsyncTask.SyncProjects,
+                                  ],
+                                },
+                              });
+                            }}
+                          >
+                            {isPersonalOrganization(organization) &&
+                            isOwnerOfOrganization({
+                              organization,
+                              accountId: userSession.accountId || '',
+                            }) ? (
+                              <div className="flex items-center justify-center">
+                                <Icon icon="home" />
+                                {
+                                  <Icon
+                                    className={`absolute -right-1 -top-1 z-20 h-4 w-4 transition-opacity ease-in-out ${billing?.expirationErrorMessage ? 'text-[var(--color-danger)]' : 'text-[var(--color-warning)]'} ${isActive && (billing.expirationErrorMessage || billing.expirationWarningMessage) ? 'opacity-100' : 'opacity-0'} `}
+                                    icon="exclamation-circle"
+                                  />
+                                }
+                              </div>
+                            ) : (
+                              <div className="flex items-center justify-center">
+                                <OrganizationAvatar
+                                  alt={organization.display_name}
+                                  src={organization.branding?.logo_url || ''}
+                                />
+                                {
+                                  <Icon
+                                    className={`absolute -right-1 -top-1 z-20 h-4 w-4 transition-opacity ease-in-out ${billing?.expirationErrorMessage ? 'text-[var(--color-danger)]' : 'text-[var(--color-warning)]'} ${isActive && (billing.expirationErrorMessage || billing.expirationWarningMessage) ? 'opacity-100' : 'opacity-0'} `}
+                                    icon="exclamation-circle"
+                                  />
+                                }
+                              </div>
+                            )}
+                          </div>
+                        </Link>
+                        <Tooltip
+                          placement="right"
+                          offset={8}
+                          className="max-h-[85vh] min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                         >
-                          {isPersonalOrganization(organization) && isOwnerOfOrganization({
-                            organization,
-                            accountId: userSession.accountId || '',
-                          }) ? (
-                            <div className='flex items-center justify-center'>
-                              <Icon icon="home" />
-                              {<Icon className={`z-20 absolute -top-1 -right-1 w-4 h-4 transition-opacity ease-in-out ${billing?.expirationErrorMessage ? 'text-[var(--color-danger)]' : 'text-[var(--color-warning)]'} ${isActive && (billing.expirationErrorMessage || billing.expirationWarningMessage) ? 'opacity-100' : 'opacity-0'} `} icon="exclamation-circle" />}
-                            </div>
-                          ) : (
-                            <div className='flex items-center justify-center'>
-                              <OrganizationAvatar
-                                alt={organization.display_name}
-                                src={organization.branding?.logo_url || ''}
-                              />
-                              {<Icon className={`z-20 absolute -top-1 -right-1 w-4 h-4 transition-opacity ease-in-out ${billing?.expirationErrorMessage ? 'text-[var(--color-danger)]' : 'text-[var(--color-warning)]'} ${isActive && (billing.expirationErrorMessage || billing.expirationWarningMessage) ? 'opacity-100' : 'opacity-0'} `} icon="exclamation-circle" />}
-                            </div>
-                          )}
-                        </div>
-                      </Link>
-                      <Tooltip
-                        placement="right"
-                        offset={8}
-                        className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
-                      >
-                        <span>{organization.display_name}</span>
-                      </Tooltip>
-                    </TooltipTrigger>
-                  );
-                })}
-                <MenuTrigger>
-                  <Button className="select-none text-[--color-font] hover:no-underline transition-all duration-150 box-border p-[--padding-sm] font-bold outline-none rounded-md w-[28px] h-[28px] flex items-center justify-center overflow-hidden">
-                    <Icon icon="plus" />
-                  </Button>
-                  <Popover placement="left" className="min-w-max">
-                    <Menu
-                      onAction={action => {
-                        if (action === 'join-organization') {
-                          window.main.openInBrowser(
-                            getLoginUrl(),
-                          );
-                        }
-
-                        if (action === 'new-organization') {
-                          // If user is in the scratchpad workspace redirect them to the login page
-                          if (isScratchpadWorkspace) {
-                            window.main.openInBrowser(
-                              getLoginUrl(),
-                            );
+                          <span>{organization.display_name}</span>
+                        </Tooltip>
+                      </TooltipTrigger>
+                    );
+                  })}
+                  <MenuTrigger>
+                    <Button className="box-border flex h-[28px] w-[28px] select-none items-center justify-center overflow-hidden rounded-md p-[--padding-sm] font-bold text-[--color-font] outline-none transition-all duration-150 hover:no-underline">
+                      <Icon icon="plus" />
+                    </Button>
+                    <Popover placement="left" className="min-w-max">
+                      <Menu
+                        onAction={action => {
+                          if (action === 'join-organization') {
+                            window.main.openInBrowser(getLoginUrl());
                           }
 
-                          if (!currentPlan) {
-                            return;
-                          }
+                          if (action === 'new-organization') {
+                            // If user is in the scratchpad workspace redirect them to the login page
+                            if (isScratchpadWorkspace) {
+                              window.main.openInBrowser(getLoginUrl());
+                            }
 
-                          if (currentPlan.type === 'enterprise-member') {
-                            // If user has a team or enterprise member plan show them an alert
-                            showAlert({
-                              title: 'Cannot create new organization.',
-                              message: 'Your Insomnia account is tied to the enterprise corporate account. Please ask the owner of the enterprise billing to create one for you.',
-                            });
-                          } else if (['free', 'individual'].includes(currentPlan.type)) {
-                            // If user has a free or individual plan redirect them to the landing page
-                            window.main.openInBrowser(
-                              `${getAppWebsiteBaseURL()}/app/landing-page`,
-                            );
-                          } else {
-                            // If user has a team or enterprise plan redirect them to the create organization page
-                            window.main.openInBrowser(
-                              `${getAppWebsiteBaseURL()}/app/dashboard/organizations?create_org=true`,
-                            );
+                            if (!currentPlan) {
+                              return;
+                            }
+
+                            if (currentPlan.type === 'enterprise-member') {
+                              // If user has a team or enterprise member plan show them an alert
+                              showAlert({
+                                title: 'Cannot create new organization.',
+                                message:
+                                  'Your Insomnia account is tied to the enterprise corporate account. Please ask the owner of the enterprise billing to create one for you.',
+                              });
+                            } else if (['free', 'individual'].includes(currentPlan.type)) {
+                              // If user has a free or individual plan redirect them to the landing page
+                              window.main.openInBrowser(`${getAppWebsiteBaseURL()}/app/landing-page`);
+                            } else {
+                              // If user has a team or enterprise plan redirect them to the create organization page
+                              window.main.openInBrowser(
+                                `${getAppWebsiteBaseURL()}/app/dashboard/organizations?create_org=true`,
+                              );
+                            }
                           }
-                        }
-                      }}
-                      className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
-                    >
-                      <MenuItem
-                        id="join-organization"
-                        className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                        aria-label="Join an organization"
+                        }}
+                        className="max-h-[85vh] min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                       >
-                        <Icon icon="city" />
-                        <span>Join an organization</span>
-                      </MenuItem>
-                      <MenuItem
-                        id="new-organization"
-                        className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                        aria-label="Create new organization"
-                      >
-                        <Icon icon="sign-out" />
-                        <span>Create a new organization</span>
-                      </MenuItem>
-                    </Menu>
-                  </Popover>
-                </MenuTrigger>
-              </nav>
-            </div>}
-            <div className='[grid-area:Content] overflow-hidden border-b border-[--hl-md]'>
+                        <MenuItem
+                          id="join-organization"
+                          className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                          aria-label="Join an organization"
+                        >
+                          <Icon icon="city" />
+                          <span>Join an organization</span>
+                        </MenuItem>
+                        <MenuItem
+                          id="new-organization"
+                          className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                          aria-label="Create new organization"
+                        >
+                          <Icon icon="sign-out" />
+                          <span>Create a new organization</span>
+                        </MenuItem>
+                      </Menu>
+                    </Popover>
+                  </MenuTrigger>
+                </nav>
+              </div>
+            )}
+            <div className="overflow-hidden border-b border-[--hl-md] [grid-area:Content]">
               <RunnerProvider>
                 <Outlet />
               </RunnerProvider>
             </div>
-            <div className="relative [grid-area:Statusbar] flex items-center overflow-hidden">
-              <div className='flex justify-center items-center gap-2 flex-shrink-0 h-full w-[50px] border-solid border-r border-r-[--hl-md]'>
+            <div className="relative flex items-center overflow-hidden [grid-area:Statusbar]">
+              <div className="flex h-full w-[50px] flex-shrink-0 items-center justify-center gap-2 border-r border-solid border-r-[--hl-md]">
                 <TooltipTrigger>
                   <ToggleButton
-                    className="flex-grow-0 w-[10px] h-[10px] gap-2 text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+                    className="h-[10px] w-[10px] flex-grow-0 gap-2 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                     onChange={setIsOganizationSidebarOpen}
                     isSelected={isOrganizationSidebarOpen}
                   >
@@ -881,14 +917,14 @@ const OrganizationRoute = () => {
                   <Tooltip
                     placement="top"
                     offset={8}
-                    className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                    className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                   >
                     Toggle organizations sidebar
                   </Tooltip>
                 </TooltipTrigger>
                 <TooltipTrigger>
                   <ToggleButton
-                    className="flex-grow-0 w-[10px] h-[10px] gap-2 text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all rotate-90"
+                    className="h-[10px] w-[10px] flex-grow-0 rotate-90 gap-2 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md]"
                     onChange={flag => {
                       setIsMinimal(!flag);
                     }}
@@ -919,18 +955,18 @@ const OrganizationRoute = () => {
                   <Tooltip
                     placement="top"
                     offset={8}
-                    className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                    className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                   >
                     Toggle header
                   </Tooltip>
                 </TooltipTrigger>
               </div>
-              <div className="flex gap-2 w-full items-center">
-                <div className="flex-grow flex-shrink basis-1/3 flex items-center h-full">
+              <div className="flex w-full items-center gap-2">
+                <div className="flex h-full flex-shrink flex-grow basis-1/3 items-center">
                   <TooltipTrigger>
                     <Button
                       data-testid="settings-button"
-                      className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+                      className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       onPress={() => showSettingsModal()}
                     >
                       <Icon icon="gear" /> Preferences
@@ -938,28 +974,27 @@ const OrganizationRoute = () => {
                     <Tooltip
                       placement="top"
                       offset={8}
-                      className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                      className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                     >
                       Preferences
-                      <Hotkey
-                        keyBindings={
-                          settings.hotKeyRegistry.preferences_showGeneral
-                        }
-                      />
+                      <Hotkey keyBindings={settings.hotKeyRegistry.preferences_showGeneral} />
                     </Tooltip>
                   </TooltipTrigger>
-                  {(hasUntrackedData && !isMinimal) ? <div>
-                    <Button
-                      className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-warning] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
-                      onPress={() => showModal(SettingsModal, { tab: 'data' })}
-                    >
-                      <Icon icon="exclamation-circle" /> We have detected orphaned projects on your computer, click here to view them.
-                    </Button>
-                  </div> : null}
-                  {(hasUntrackedData && isMinimal) ? (
+                  {hasUntrackedData && !isMinimal ? (
+                    <div>
+                      <Button
+                        className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-warning] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                        onPress={() => showModal(SettingsModal, { tab: 'data' })}
+                      >
+                        <Icon icon="exclamation-circle" /> We have detected orphaned projects on your computer, click
+                        here to view them.
+                      </Button>
+                    </div>
+                  ) : null}
+                  {hasUntrackedData && isMinimal ? (
                     <TooltipTrigger delay={500}>
                       <Button
-                        className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-warning] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all"
+                        className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-warning] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                         onPress={() => showModal(SettingsModal, { tab: 'data' })}
                       >
                         <Icon icon="exclamation-circle" />
@@ -967,33 +1002,38 @@ const OrganizationRoute = () => {
                       <Tooltip
                         placement="top"
                         offset={8}
-                        className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                        className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                       >
                         We have detected orphaned projects on your computer, click here to view them.
                       </Tooltip>
                     </TooltipTrigger>
                   ) : null}
-                  {isMinimal && <NetworkAndSyncIndicator user={user} asyncTaskStatus={asyncTaskStatus} settings={settings} sync={syncOrgsAndProjects} />}
-                </div>
-                <div className='flex-grow flex-shrink basis-1/3 min-w-[120px]'>
                   {isMinimal && (
-                    <CommandPalette style={{ width: '100%' }} />
+                    <NetworkAndSyncIndicator
+                      user={user}
+                      asyncTaskStatus={asyncTaskStatus}
+                      settings={settings}
+                      sync={syncOrgsAndProjects}
+                    />
                   )}
                 </div>
-                <div className='flex-grow flex-shrink basis-1/3 flex justify-end'>
-                  <div className='flex items-center gap-2 divide'>
+                <div className="min-w-[120px] flex-shrink flex-grow basis-1/3">
+                  {isMinimal && <CommandPalette style={{ width: '100%' }} />}
+                </div>
+                <div className="flex flex-shrink flex-grow basis-1/3 justify-end">
+                  <div className="divide flex items-center gap-2">
                     {loadingAI && (
                       <ProgressBar
-                        className="flex items-center gap-2 h-full"
+                        className="flex h-full items-center gap-2"
                         value={loadingAIProgress.progress}
                         maxValue={loadingAIProgress.total}
                         minValue={0}
-                        aria-label='AI generation'
+                        aria-label="AI generation"
                       >
                         {({ percentage }) => (
                           <TooltipTrigger>
-                            <Button className="px-4 py-1 h-full flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] text-[--color-font] text-xs hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all">
-                              <InsomniaAI className='w-4 text-[--color-font] animate-pulse' />
+                            <Button className="flex h-full items-center justify-center gap-2 px-4 py-1 text-xs text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+                              <InsomniaAI className="w-4 animate-pulse text-[--color-font]" />
                               <div className="h-1 w-32 rounded-full bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-40">
                                 <div
                                   className="h-1 rounded-full bg-[rgba(var(--color-surprise-rgb),var(--tw-bg-opacity))] bg-opacity-100"
@@ -1004,7 +1044,7 @@ const OrganizationRoute = () => {
                             <Tooltip
                               placement="top"
                               offset={8}
-                              className="border flex items-center gap-2 select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="flex max-h-[85vh] min-w-max select-none items-center gap-2 overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               Generating tests with Insomnia AI
                             </Tooltip>
@@ -1012,38 +1052,44 @@ const OrganizationRoute = () => {
                         )}
                       </ProgressBar>
                     )}
-                    {!isMinimal && <NetworkAndSyncIndicator user={user} asyncTaskStatus={asyncTaskStatus} settings={settings} sync={syncOrgsAndProjects} />}
+                    {!isMinimal && (
+                      <NetworkAndSyncIndicator
+                        user={user}
+                        asyncTaskStatus={asyncTaskStatus}
+                        settings={settings}
+                        sync={syncOrgsAndProjects}
+                      />
+                    )}
                     {!isMinimal && (
                       <Link>
                         <a
-                          className="flex focus:outline-none focus:underline gap-1 items-center text-xs text-[--color-font] px-[--padding-md]"
+                          className="flex items-center gap-1 px-[--padding-md] text-xs text-[--color-font] focus:underline focus:outline-none"
                           href="https://konghq.com/"
                         >
                           Made with
-                          <Icon className="text-[--color-surprise-font]" icon="heart" /> by
-                          Kong
+                          <Icon className="text-[--color-surprise-font]" icon="heart" /> by Kong
                         </a>
                       </Link>
                     )}
                   </div>
                   {isMinimal && (
-                    <div className="flex gap-[--padding-sm] items-center justify-end p-2">
+                    <div className="flex items-center justify-end gap-[--padding-sm] p-2">
                       {user ? (
                         <Fragment>
                           <PresentUsers />
-                          <HeaderInviteButton className='text-[--color-font]' />
+                          <HeaderInviteButton className="text-[--color-font]" />
                           <HeaderUserButton user={user} currentPlan={currentPlan} isMinimal={isMinimal} />
                         </Fragment>
                       ) : (
                         <Fragment>
                           <NavLink
                             to="/auth/login"
-                            className="px-4 py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                            className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] px-4 py-1 text-sm font-semibold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                           >
                             Login
                           </NavLink>
                           <NavLink
-                            className="px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[rgba(var(--color-surprise-rgb),0.8)] focus:bg-[rgba(var(--color-surprise-rgb),0.9)] bg-[--color-surprise] font-semibold rounded-sm text-[--color-font-surprise] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                            className="flex items-center justify-center gap-2 rounded-sm bg-[--color-surprise] px-4 py-1 text-sm font-semibold text-[--color-font-surprise] ring-1 ring-transparent transition-all focus:bg-[rgba(var(--color-surprise-rgb),0.9)] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[rgba(var(--color-surprise-rgb),0.8)]"
                             to="/auth/login"
                           >
                             Sign up for free
diff --git a/packages/insomnia/src/ui/routes/project.tsx b/packages/insomnia/src/ui/routes/project.tsx
index 6b0509622f..332358be86 100644
--- a/packages/insomnia/src/ui/routes/project.tsx
+++ b/packages/insomnia/src/ui/routes/project.tsx
@@ -86,7 +86,12 @@ import { TimeFromNow } from '../components/time-from-now';
 import { useInsomniaEventStreamContext } from '../context/app/insomnia-event-stream-context';
 import { useLoaderDeferData } from '../hooks/use-loader-defer-data';
 import { useOrganizationPermissions } from '../hooks/use-organization-features';
-import { DEFAULT_STORAGE_RULES, type OrganizationLoaderData, type OrganizationStorageLoaderData, useOrganizationLoaderData } from './organization';
+import {
+  DEFAULT_STORAGE_RULES,
+  type OrganizationLoaderData,
+  type OrganizationStorageLoaderData,
+  useOrganizationLoaderData,
+} from './organization';
 import { useRootLoaderData } from './root';
 
 interface TeamProject {
@@ -115,36 +120,39 @@ async function getAllTeamProjects(organizationId: string) {
   return response.data as TeamProject[];
 }
 
-export const scopeToLabelMap: Record<WorkspaceScope | 'unsynced', 'Document' | 'Collection' | 'Mock Server' | 'Unsynced' | 'Environment'> = {
-  design: 'Document',
-  collection: 'Collection',
+export const scopeToLabelMap: Record<
+  WorkspaceScope | 'unsynced',
+  'Document' | 'Collection' | 'Mock Server' | 'Unsynced' | 'Environment'
+> = {
+  'design': 'Document',
+  'collection': 'Collection',
   'mock-server': 'Mock Server',
-  unsynced: 'Unsynced',
-  environment: 'Environment',
+  'unsynced': 'Unsynced',
+  'environment': 'Environment',
 };
 
 export const scopeToIconMap: Record<string, IconName> = {
-  design: 'file',
-  collection: 'bars',
+  'design': 'file',
+  'collection': 'bars',
   'mock-server': 'server',
-  unsynced: 'cloud-download',
-  environment: 'code',
+  'unsynced': 'cloud-download',
+  'environment': 'code',
 };
 
 export const scopeToBgColorMap: Record<string, string> = {
-  design: 'bg-[--color-info]',
-  collection: 'bg-[--color-surprise]',
+  'design': 'bg-[--color-info]',
+  'collection': 'bg-[--color-surprise]',
   'mock-server': 'bg-[--color-warning]',
-  unsynced: 'bg-[--hl-md]',
-  environment: 'bg-[--color-font]',
+  'unsynced': 'bg-[--hl-md]',
+  'environment': 'bg-[--color-font]',
 };
 
 export const scopeToTextColorMap: Record<string, string> = {
-  design: 'text-[--color-font-info]',
-  collection: 'text-[--color-font-surprise]',
+  'design': 'text-[--color-font-info]',
+  'collection': 'text-[--color-font-surprise]',
   'mock-server': 'text-[--color-font-warning]',
-  unsynced: 'text-[--color-font]',
-  environment: 'text-[--color-bg]',
+  'unsynced': 'text-[--color-font]',
+  'environment': 'text-[--color-bg]',
 };
 
 async function syncTeamProjects({
@@ -165,15 +173,15 @@ async function syncTeamProjects({
   const remoteProjectsThatNeedToBeCreated = teamProjects.filter(p => !existingRemoteProjectsRemoteIds.includes(p.id));
 
   // this will create a new project for any remote projects that don't exist in the current organization
-  await Promise.all(remoteProjectsThatNeedToBeCreated.map(async prj => {
-    await models.project.create(
-      {
+  await Promise.all(
+    remoteProjectsThatNeedToBeCreated.map(async prj => {
+      await models.project.create({
         remoteId: prj.id,
         name: prj.name,
         parentId: organizationId,
-      }
-    );
-  }));
+      });
+    }),
+  );
 
   const remoteProjectsThatNeedToBeUpdated = await database.find<Project>(models.project.type, {
     // Name is not in the list of remote projects
@@ -182,14 +190,16 @@ async function syncTeamProjects({
     remoteId: { $in: teamProjects.map(p => p.id) },
   });
 
-  await Promise.all(remoteProjectsThatNeedToBeUpdated.map(async prj => {
-    const remoteProject = teamProjects.find(p => p.id === prj.remoteId);
-    if (remoteProject) {
-      await models.project.update(prj, {
-        name: remoteProject.name,
-      });
-    }
-  }));
+  await Promise.all(
+    remoteProjectsThatNeedToBeUpdated.map(async prj => {
+      const remoteProject = teamProjects.find(p => p.id === prj.remoteId);
+      if (remoteProject) {
+        await models.project.update(prj, {
+          name: remoteProject.name,
+        });
+      }
+    }),
+  );
 
   // Turn remote projects from the current organization that are not in the list of remote projects into local projects.
   const removedRemoteProjects = await database.find<Project>(models.project.type, {
@@ -204,11 +214,13 @@ async function syncTeamProjects({
     },
   });
 
-  await Promise.all(removedRemoteProjects.map(async prj => {
-    await models.project.update(prj, {
-      remoteId: null,
-    });
-  }));
+  await Promise.all(
+    removedRemoteProjects.map(async prj => {
+      await models.project.update(prj, {
+        remoteId: null,
+      });
+    }),
+  );
 }
 
 export const syncProjects = async (organizationId: string) => {
@@ -285,11 +297,7 @@ export interface ProjectLoaderData {
   projectsSyncStatusPromise?: Promise<Record<string, boolean>>;
 }
 
-async function getAllLocalFiles({
-  projectId,
-}: {
-  projectId: string;
-}) {
+async function getAllLocalFiles({ projectId }: { projectId: string }) {
   const projectWorkspaces = await models.workspace.findByParentId(projectId);
   const [workspaceMetas, apiSpecs, mockServers] = await Promise.all([
     database.find<WorkspaceMeta>(models.workspaceMeta.type, {
@@ -342,9 +350,7 @@ async function getAllLocalFiles({
     // WorkspaceMeta is a good proxy for last modified time
     const workspaceModified = workspaceMeta?.modified || workspace.modified;
 
-    const modifiedLocally = isDesign(workspace)
-      ? apiSpec?.modified || 0
-      : workspaceModified;
+    const modifiedLocally = isDesign(workspace) ? apiSpec?.modified || 0 : workspaceModified;
 
     // Span spec, workspace and sync related timestamps for card last modified label and sort order
     const lastModifiedFrom = [
@@ -354,14 +360,12 @@ async function getAllLocalFiles({
       gitRepository?.cachedGitLastCommitTime,
     ];
 
-    const lastModifiedTimestamp = lastModifiedFrom
-      .filter(isNotNullOrUndefined)
-      .sort(descendingNumberSort)[0];
+    const lastModifiedTimestamp = lastModifiedFrom.filter(isNotNullOrUndefined).sort(descendingNumberSort)[0];
 
     const hasUnsavedChanges = Boolean(
       isDesign(workspace) &&
-      gitRepository?.cachedGitLastCommitTime &&
-      modifiedLocally > gitRepository?.cachedGitLastCommitTime
+        gitRepository?.cachedGitLastCommitTime &&
+        modifiedLocally > gitRepository?.cachedGitLastCommitTime,
     );
 
     const specVersion = spec?.info?.version ? String(spec?.info?.version) : '';
@@ -372,9 +376,11 @@ async function getAllLocalFiles({
       scope: workspace.scope,
       label: scopeToLabelMap[workspace.scope],
       created: workspace.created,
-      lastModifiedTimestamp: (hasUnsavedChanges && modifiedLocally) || gitRepository?.cachedGitLastCommitTime || lastModifiedTimestamp,
+      lastModifiedTimestamp:
+        (hasUnsavedChanges && modifiedLocally) || gitRepository?.cachedGitLastCommitTime || lastModifiedTimestamp,
       branch: lastActiveBranch || '',
-      lastCommit: hasUnsavedChanges && gitRepository?.cachedGitLastCommitTime && lastCommitAuthor ? `by ${lastCommitAuthor}` : '',
+      lastCommit:
+        hasUnsavedChanges && gitRepository?.cachedGitLastCommitTime && lastCommitAuthor ? `by ${lastCommitAuthor}` : '',
       version: specVersion ? `${specVersion?.startsWith('v') ? '' : 'v'}${specVersion}` : '',
       oasFormat: specFormat ? `${specFormat === 'openapi' ? 'OpenAPI' : 'Swagger'} ${specFormatVersion || ''}` : '',
       mockServer,
@@ -388,13 +394,7 @@ async function getAllLocalFiles({
   return files;
 }
 
-async function getAllRemoteFiles({
-  projectId,
-  organizationId,
-}: {
-  projectId: string;
-  organizationId: string;
-}) {
+async function getAllRemoteFiles({ projectId, organizationId }: { projectId: string; organizationId: string }) {
   try {
     const project = await models.project.getById(projectId);
     invariant(project, 'Project not found');
@@ -414,14 +414,17 @@ async function getAllRemoteFiles({
     // Get all workspaces that are connected to backend projects and under the current project
     const workspacesWithBackendProjects = await database.find<Workspace>(models.workspace.type, {
       _id: {
-        $in: [...allPulledBackendProjectsForRemoteId, ...allFetchedRemoteBackendProjectsForRemoteId].map(p => p.rootDocumentId),
+        $in: [...allPulledBackendProjectsForRemoteId, ...allFetchedRemoteBackendProjectsForRemoteId].map(
+          p => p.rootDocumentId,
+        ),
       },
       parentId: project._id,
     });
 
     // Get the list of remote backend projects that we need to pull
-    const backendProjectsToPull = allFetchedRemoteBackendProjectsForRemoteId
-      .filter(p => !workspacesWithBackendProjects.find(w => w._id === p.rootDocumentId));
+    const backendProjectsToPull = allFetchedRemoteBackendProjectsForRemoteId.filter(
+      p => !workspacesWithBackendProjects.find(w => w._id === p.rootDocumentId),
+    );
 
     return backendProjectsToPull.map(backendProject => {
       const file: InsomniaFile = {
@@ -456,9 +459,10 @@ export const listWorkspacesLoader: LoaderFunction = async ({ params }): Promise<
 
   const project = await models.project.getById(projectId);
   invariant(project, `Project was not found ${projectId}`);
-  const organizationProjects = await database.find<Project>(models.project.type, {
-    parentId: organizationId,
-  }) || [];
+  const organizationProjects =
+    (await database.find<Project>(models.project.type, {
+      parentId: organizationId,
+    })) || [];
 
   const projects = sortProjects(organizationProjects);
   const files = await getAllLocalFiles({ projectId });
@@ -495,7 +499,7 @@ const getLearningFeature = async (fallbackLearningFeature: LearningFeature) => {
   const lastFetchedString = window.localStorage.getItem('learning-feature-last-fetch');
   const lastFetched = lastFetchedString ? parseInt(lastFetchedString, 10) : 0;
   const oneDay = 86400000;
-  const hasOneDayPassedSinceLastFetch = (Date.now() - lastFetched) > oneDay;
+  const hasOneDayPassedSinceLastFetch = Date.now() - lastFetched > oneDay;
   const wasDismissed = window.localStorage.getItem('learning-feature-dismissed');
   const wasNotDismissedAndOneDayHasPassed = !wasDismissed && hasOneDayPassedSinceLastFetch;
   if (wasNotDismissedAndOneDayHasPassed) {
@@ -560,9 +564,7 @@ async function getProjectsWithGitRepositories({
   });
 }
 
-export const loader: LoaderFunction = async ({
-  params,
-}) => {
+export const loader: LoaderFunction = async ({ params }) => {
   const { organizationId, projectId } = params;
   invariant(organizationId, 'Organization ID is required');
   const { id: sessionId } = await userSession.getOrCreate();
@@ -609,7 +611,9 @@ export const loader: LoaderFunction = async ({
 
   const projectsSyncStatusPromise = CheckAllProjectSyncStatus(projects);
 
-  const activeProjectGitRepository = isGitProject(project) ? await models.gitRepository.getById(project.gitRepositoryId || '') : null;
+  const activeProjectGitRepository = isGitProject(project)
+    ? await models.gitRepository.getById(project.gitRepositoryId || '')
+    : null;
 
   return defer({
     localFiles,
@@ -620,18 +624,10 @@ export const loader: LoaderFunction = async ({
     activeProject: project,
     activeProjectGitRepository,
     allFilesCount: localFiles.length,
-    environmentsCount: localFiles.filter(
-      file => file.scope === 'environment'
-    ).length,
-    documentsCount: localFiles.filter(
-      file => file.scope === 'design'
-    ).length,
-    collectionsCount: localFiles.filter(
-      file => file.scope === 'collection'
-    ).length,
-    mockServersCount: localFiles.filter(
-      file => file.scope === 'mock-server'
-    ).length,
+    environmentsCount: localFiles.filter(file => file.scope === 'environment').length,
+    documentsCount: localFiles.filter(file => file.scope === 'design').length,
+    collectionsCount: localFiles.filter(file => file.scope === 'collection').length,
+    mockServersCount: localFiles.filter(file => file.scope === 'mock-server').length,
     projectsSyncStatusPromise,
   });
 };
@@ -667,7 +663,11 @@ const ProjectRoute: FC = () => {
 
   const { userSession } = useRootLoaderData();
   const pullFileFetcher = useFetcher();
-  const loadingBackendProjects = useFetchers().filter(fetcher => fetcher.formAction === `/organization/${organizationId}/project/${projectId}/remote-collections/pull`).map(f => f.formData?.get('backendProjectId'));
+  const loadingBackendProjects = useFetchers()
+    .filter(
+      fetcher => fetcher.formAction === `/organization/${organizationId}/project/${projectId}/remote-collections/pull`,
+    )
+    .map(f => f.formData?.get('backendProjectId'));
 
   const { organizations } = useOrganizationLoaderData();
   const { presence } = useInsomniaEventStreamContext();
@@ -692,12 +692,16 @@ const ProjectRoute: FC = () => {
   const [projectListFilter, setProjectListFilter] = useLocalStorage(`${organizationId}:project-list-filter`, '');
   const [workspaceListFilter, setWorkspaceListFilter] = useLocalStorage(`${projectId}:workspace-list-filter`, '');
   const [workspaceListScope, setWorkspaceListScope] = useLocalStorage(`${projectId}:workspace-list-scope`, 'all');
-  const [workspaceListSortOrder, setWorkspaceListSortOrder] = useLocalStorage(`${projectId}:workspace-list-sort-order`, 'modified-desc');
+  const [workspaceListSortOrder, setWorkspaceListSortOrder] = useLocalStorage(
+    `${projectId}:workspace-list-sort-order`,
+    'modified-desc',
+  );
   const [importModalType, setImportModalType] = useState<'file' | 'clipboard' | 'uri' | null>(null);
   const [isNewProjectModalOpen, setIsNewProjectModalOpen] = useState(false);
   const [isUpdateProjectModalOpen, setIsUpdateProjectModalOpen] = useState(false);
   const organization = organizations.find(o => o.id === organizationId);
-  const isUserOwner = organization && userSession.accountId && isOwnerOfOrganization({ organization, accountId: userSession.accountId });
+  const isUserOwner =
+    organization && userSession.accountId && isOwnerOfOrganization({ organization, accountId: userSession.accountId });
   const isPersonalOrg = organization && isPersonalOrganization(organization);
 
   const filteredFiles = allFiles
@@ -705,84 +709,90 @@ const ProjectRoute: FC = () => {
     .filter(workspace =>
       workspaceListFilter
         ? Boolean(
-          fuzzyMatchAll(
-            workspaceListFilter,
-            // Use the filter string to match against these properties
-            [
-              workspace.name,
-              workspace.scope === 'design'
-                ? 'document'
-                : 'collection',
-              workspace.branch || '',
-              workspace.oasFormat || '',
-            ],
-            { splitSpace: true, loose: true }
-          )?.indexes
-        )
-        : true
+            fuzzyMatchAll(
+              workspaceListFilter,
+              // Use the filter string to match against these properties
+              [
+                workspace.name,
+                workspace.scope === 'design' ? 'document' : 'collection',
+                workspace.branch || '',
+                workspace.oasFormat || '',
+              ],
+              { splitSpace: true, loose: true },
+            )?.indexes,
+          )
+        : true,
     )
     .sort((a, b) => sortMethodMap[workspaceListSortOrder as DashboardSortOrder](a, b));
 
-  const filesWithPresence = filteredFiles.map(file => {
-    const workspacePresence = presence
-      .filter(p => p.project === activeProject?.remoteId && p.file === file.id)
-      .filter(p => p.acct !== userSession.accountId)
-      .map(user => {
-        return {
-          key: user.acct,
-          alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
-          src: user.avatar,
-        };
-      });
-    return {
+  const filesWithPresence = filteredFiles
+    .map(file => {
+      const workspacePresence = presence
+        .filter(p => p.project === activeProject?.remoteId && p.file === file.id)
+        .filter(p => p.acct !== userSession.accountId)
+        .map(user => {
+          return {
+            key: user.acct,
+            alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
+            src: user.avatar,
+          };
+        });
+      return {
+        ...file,
+        loading:
+          loadingBackendProjects.includes(file.remoteId) ||
+          (pullFileFetcher.formData?.get('backendProjectId') &&
+            pullFileFetcher.formData?.get('backendProjectId') === file.remoteId),
+        presence: workspacePresence,
+      };
+    })
+    .map(file => ({
       ...file,
-      loading: loadingBackendProjects.includes(file.remoteId) || pullFileFetcher.formData?.get('backendProjectId') && pullFileFetcher.formData?.get('backendProjectId') === file.remoteId,
-      presence: workspacePresence,
-    };
-  }).map(file => ({
-    ...file,
-    action: () => {
-      // hack to workaround gridlist not have access to workspace scope
-      if (file.scope === 'unsynced') {
-        if (activeProject?.remoteId && file.remoteId) {
-          return pullFileFetcher.submit({ backendProjectId: file.remoteId, remoteId: activeProject.remoteId }, {
-            method: 'POST',
-            action: `/organization/${organizationId}/project/${projectId}/remote-collections/pull`,
-          });
+      action: () => {
+        // hack to workaround gridlist not have access to workspace scope
+        if (file.scope === 'unsynced') {
+          if (activeProject?.remoteId && file.remoteId) {
+            return pullFileFetcher.submit(
+              { backendProjectId: file.remoteId, remoteId: activeProject.remoteId },
+              {
+                method: 'POST',
+                action: `/organization/${organizationId}/project/${projectId}/remote-collections/pull`,
+              },
+            );
+          }
+
+          return;
         }
 
-        return;
-      }
+        const activity = scopeToActivity(file.scope);
+        navigate(`/organization/${organizationId}/project/${projectId}/workspace/${file.id}/${activity}`);
+      },
+    }));
 
-      const activity = scopeToActivity(file.scope);
-      navigate(
-        `/organization/${organizationId}/project/${projectId}/workspace/${file.id}/${activity}`
-      );
-    },
-  }));
+  const projectsWithPresence = projects
+    .filter(p => (projectListFilter ? p.name?.toLowerCase().includes(projectListFilter.toLowerCase()) : true))
+    .map(project => {
+      const projectPresence = presence
+        .filter(p => p.project === project.remoteId)
+        .filter(p => p.acct !== userSession.accountId)
+        .map(user => {
+          return {
+            key: user.acct,
+            alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
+            src: user.avatar,
+          };
+        });
+      return {
+        ...project,
+        presence: projectPresence,
+        hasUncommittedOrUnpushedChanges:
+          checkAllProjectSyncStatus?.[project._id] ||
+          project.gitRepository?.hasUncommittedChanges ||
+          project.gitRepository?.hasUnpushedChanges,
+      };
+    });
 
-  const projectsWithPresence = projects.filter(p =>
-    projectListFilter ? p.name?.toLowerCase().includes(projectListFilter.toLowerCase()) : true
-  ).map(project => {
-    const projectPresence = presence
-      .filter(p => p.project === project.remoteId)
-      .filter(p => p.acct !== userSession.accountId)
-      .map(user => {
-        return {
-          key: user.acct,
-          alt: user.firstName || user.lastName ? `${user.firstName} ${user.lastName}` : user.acct,
-          src: user.avatar,
-        };
-      });
-    return {
-      ...project,
-      presence: projectPresence,
-      hasUncommittedOrUnpushedChanges: checkAllProjectSyncStatus?.[project._id] || project.gitRepository?.hasUncommittedChanges || project.gitRepository?.hasUnpushedChanges,
-    };
-  });
-
-  const [isGitRepositoryCloneModalOpen, setIsGitRepositoryCloneModalOpen] =
-    useState(false);
+  const [isGitRepositoryCloneModalOpen, setIsGitRepositoryCloneModalOpen] = useState(false);
 
   const navigate = useNavigate();
 
@@ -796,7 +806,8 @@ const ProjectRoute: FC = () => {
 
   const createNewCollection = () => setNewWorkspaceModalState({ scope: 'collection', isOpen: true });
   const createNewDocument = () => setNewWorkspaceModalState({ scope: 'design', isOpen: true });
-  const createNewMockServer = () => canCreateMockServer && setNewWorkspaceModalState({ scope: 'mock-server', isOpen: true });
+  const createNewMockServer = () =>
+    canCreateMockServer && setNewWorkspaceModalState({ scope: 'mock-server', isOpen: true });
   const createNewGlobalEnvironment = () => setNewWorkspaceModalState({ scope: 'environment', isOpen: true });
 
   const createNewCollectionWithRequest = () => {
@@ -813,7 +824,7 @@ const ProjectRoute: FC = () => {
       {
         action: `/organization/${organizationId}/project/${projectId}/workspace/new?withRequest=true`,
         method: 'POST',
-      }
+      },
     );
   };
 
@@ -829,31 +840,31 @@ const ProjectRoute: FC = () => {
     icon: IconName;
     action: () => void;
   }[] = [
-      {
-        id: 'new-collection',
-        name: 'Request collection',
-        icon: 'bars',
-        action: createNewCollection,
-      },
-      {
-        id: 'new-document',
-        name: 'Design document',
-        icon: 'file',
-        action: createNewDocument,
-      },
-      {
-        id: 'new-mock-server',
-        name: 'Mock Server',
-        icon: 'server',
-        action: createNewMockServer,
-      },
-      {
-        id: 'new-environment',
-        name: 'Environment',
-        icon: 'code',
-        action: createNewGlobalEnvironment,
-      },
-    ];
+    {
+      id: 'new-collection',
+      name: 'Request collection',
+      icon: 'bars',
+      action: createNewCollection,
+    },
+    {
+      id: 'new-document',
+      name: 'Design document',
+      icon: 'file',
+      action: createNewDocument,
+    },
+    {
+      id: 'new-mock-server',
+      name: 'Mock Server',
+      icon: 'server',
+      action: createNewMockServer,
+    },
+    {
+      id: 'new-environment',
+      name: 'Environment',
+      icon: 'code',
+      action: createNewGlobalEnvironment,
+    },
+  ];
 
   const scopeActionList: {
     id: string;
@@ -865,57 +876,58 @@ const ProjectRoute: FC = () => {
       run: () => void;
     };
   }[] = [
-      {
-        id: 'all',
-        label: `All files (${allFilesCount})`,
-        icon: 'border-all',
+    {
+      id: 'all',
+      label: `All files (${allFilesCount})`,
+      icon: 'border-all',
+    },
+    {
+      id: 'design',
+      label: `Documents (${documentsCount})`,
+      icon: 'file',
+      action: {
+        icon: 'plus',
+        label: 'New design document',
+        run: createNewDocument,
       },
-      {
-        id: 'design',
-        label: `Documents (${documentsCount})`,
-        icon: 'file',
-        action: {
-          icon: 'plus',
-          label: 'New design document',
-          run: createNewDocument,
-        },
+    },
+    {
+      id: 'collection',
+      label: `Collections (${collectionsCount})`,
+      icon: 'bars',
+      action: {
+        icon: 'plus',
+        label: 'New request collection',
+        run: createNewCollection,
       },
-      {
-        id: 'collection',
-        label: `Collections (${collectionsCount})`,
-        icon: 'bars',
-        action: {
-          icon: 'plus',
-          label: 'New request collection',
-          run: createNewCollection,
-        },
+    },
+    {
+      id: 'mock-server',
+      label: `Mock (${mockServersCount})`,
+      icon: 'server',
+      action: {
+        icon: 'plus',
+        label: 'New Mock Server',
+        run: createNewMockServer,
       },
-      {
-        id: 'mock-server',
-        label: `Mock (${mockServersCount})`,
-        icon: 'server',
-        action: {
-          icon: 'plus',
-          label: 'New Mock Server',
-          run: createNewMockServer,
-        },
+    },
+    {
+      id: 'environment',
+      label: `Environments (${environmentsCount})`,
+      icon: 'code',
+      action: {
+        icon: 'plus',
+        label: 'New Environment',
+        run: createNewGlobalEnvironment,
       },
-      {
-        id: 'environment',
-        label: `Environments (${environmentsCount})`,
-        icon: 'code',
-        action: {
-          icon: 'plus',
-          label: 'New Environment',
-          run: createNewGlobalEnvironment,
-        },
-      },
-    ];
+    },
+  ];
 
   const isRemoteProjectInconsistent = activeProject && isRemoteProject(activeProject) && !storageRules.enableCloudSync;
   const isLocalProjectInconsistent = activeProject && !isRemoteProject(activeProject) && !storageRules.enableLocalVault;
   const isGitSyncProjectInconsistent = activeProject && isGitProject(activeProject) && !storageRules.enableGitSync;
-  const isProjectInconsistent = isRemoteProjectInconsistent || isLocalProjectInconsistent || isGitSyncProjectInconsistent;
+  const isProjectInconsistent =
+    isRemoteProjectInconsistent || isLocalProjectInconsistent || isGitSyncProjectInconsistent;
 
   useEffect(() => {
     window.main.landingPageRendered(LandingPage.ProjectDashboard);
@@ -938,10 +950,22 @@ const ProjectRoute: FC = () => {
   return (
     <ErrorBoundary>
       <Fragment>
-        <PanelGroup autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-          <Panel id="sidebar" className='sidebar theme--sidebar' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
-            <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
-              <div className="p-[--padding-sm] h-[40px]">
+        <PanelGroup
+          autoSaveId="insomnia-sidebar"
+          id="wrapper"
+          className="new-sidebar h-full w-full text-[--color-font]"
+          direction="horizontal"
+        >
+          <Panel
+            id="sidebar"
+            className="sidebar theme--sidebar"
+            defaultSize={DEFAULT_SIDEBAR_SIZE}
+            maxSize={40}
+            minSize={10}
+            collapsible
+          >
+            <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+              <div className="h-[40px] p-[--padding-sm]">
                 <Select
                   aria-label="Organizations"
                   onSelectionChange={id => {
@@ -949,24 +973,24 @@ const ProjectRoute: FC = () => {
                   }}
                   selectedKey={organizationId}
                 >
-                  <Button className="px-4 py-1 font-bold flex flex-1 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-                    <SelectValue<Organization> className="flex truncate items-center justify-center gap-2">
+                  <Button className="flex flex-1 items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm font-bold text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]">
+                    <SelectValue<Organization> className="flex items-center justify-center gap-2 truncate">
                       {({ selectedItem }) => {
                         return selectedItem?.display_name || 'Select an organization';
                       }}
                     </SelectValue>
                     <Icon icon="caret-down" />
                   </Button>
-                  <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                  <Popover className="flex min-w-max flex-col overflow-y-hidden">
                     <ListBox
                       items={organizations}
-                      className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                      className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                     >
                       {item => (
                         <ListBoxItem
                           id={item.id}
                           key={item.id}
-                          className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                          className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                           aria-label={item.display_name}
                           textValue={item.display_name}
                           value={item}
@@ -974,12 +998,7 @@ const ProjectRoute: FC = () => {
                           {({ isSelected }) => (
                             <Fragment>
                               <span>{item.display_name}</span>
-                              {isSelected && (
-                                <Icon
-                                  icon="check"
-                                  className="text-[--color-success] justify-self-end"
-                                />
-                              )}
+                              {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                             </Fragment>
                           )}
                         </ListBoxItem>
@@ -988,10 +1007,8 @@ const ProjectRoute: FC = () => {
                   </Popover>
                 </Select>
               </div>
-              <div className="flex overflow-hidden flex-col flex-1">
-                <Heading className="p-[--padding-sm] uppercase text-xs">
-                  Projects ({projectsCount})
-                </Heading>
+              <div className="flex flex-1 flex-col overflow-hidden">
+                <Heading className="p-[--padding-sm] text-xs uppercase">Projects ({projectsCount})</Heading>
                 <div className="flex justify-between gap-1 p-[--padding-sm]">
                   <SearchField
                     aria-label="Projects filter"
@@ -1002,10 +1019,10 @@ const ProjectRoute: FC = () => {
                   >
                     <Input
                       placeholder="Filter"
-                      className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
+                      className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
                     />
-                    <div className="flex items-center px-2 absolute right-0 top-0 h-full">
-                      <Button className="flex group-data-[empty]:hidden items-center justify-center aspect-square w-5 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
+                    <div className="absolute right-0 top-0 flex h-full items-center px-2">
+                      <Button className="flex aspect-square w-5 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] group-data-[empty]:hidden">
                         <Icon icon="close" />
                       </Button>
                     </div>
@@ -1014,7 +1031,7 @@ const ProjectRoute: FC = () => {
                     aria-label="Create new Project"
                     onPress={() => setIsNewProjectModalOpen(true)}
                     isDisabled={activeProject === undefined}
-                    className="flex items-center justify-center h-full aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex aspect-square h-full items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                   >
                     <Icon icon="plus-circle" />
                   </Button>
@@ -1023,7 +1040,7 @@ const ProjectRoute: FC = () => {
                 <GridList
                   aria-label="Projects"
                   items={projectsWithPresence}
-                  className="overflow-y-auto flex-1 data-[empty]:py-0 py-[--padding-sm]"
+                  className="flex-1 overflow-y-auto py-[--padding-sm] data-[empty]:py-0"
                   disallowEmptySelection
                   selectedKeys={[activeProject?._id || '']}
                   selectionMode="single"
@@ -1045,23 +1062,23 @@ const ProjectRoute: FC = () => {
                         key={item._id}
                         id={item._id}
                         textValue={item.name}
-                        className="group outline-none select-none"
+                        className="group select-none outline-none"
                       >
-                        <div className="flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]">
-                          <span className="group-aria-selected:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
+                        <div className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]">
+                          <span className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors group-aria-selected:bg-[--color-surprise]" />
                           <Icon
                             icon={
-                              isRemoteProject(item) ? 'globe-americas' : isGitProject(item) ? ['fab', 'git-alt'] : 'laptop'
+                              isRemoteProject(item)
+                                ? 'globe-americas'
+                                : isGitProject(item)
+                                  ? ['fab', 'git-alt']
+                                  : 'laptop'
                             }
                           />
                           <span className={'truncate'}>{item.name}</span>
                           <span className="flex-1" />
                           {item.presence.length > 0 && (
-                            <AvatarGroup
-                              size="small"
-                              maxAvatars={3}
-                              items={item.presence}
-                            />
+                            <AvatarGroup size="small" maxAvatars={3} items={item.presence} />
                           )}
                           {item._id !== SCRATCHPAD_PROJECT_ID && (
                             <ProjectDropdown
@@ -1082,7 +1099,7 @@ const ProjectRoute: FC = () => {
                   <GridList
                     aria-label="Scope filter"
                     items={scopeActionList}
-                    className="overflow-y-auto flex-shrink-0 flex-1 data-[empty]:py-0 py-[--padding-sm]"
+                    className="flex-1 flex-shrink-0 overflow-y-auto py-[--padding-sm] data-[empty]:py-0"
                     disallowEmptySelection
                     selectedKeys={[workspaceListScope || 'all']}
                     selectionMode="single"
@@ -1096,23 +1113,19 @@ const ProjectRoute: FC = () => {
                   >
                     {item => {
                       return (
-                        <GridListItem textValue={item.label} className="group outline-none select-none">
-                          <div
-                            className="flex select-none outline-none group-aria-selected:text-[--color-font] relative group-aria-selected:bg-[--hl-sm] group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-12 w-full overflow-hidden text-[--hl]"
-                          >
-                            <span className='w-6 h-6 flex items-center justify-center'>
-                              <Icon icon={item.icon} className='w-6' />
+                        <GridListItem textValue={item.label} className="group select-none outline-none">
+                          <div className="relative flex h-12 w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:bg-[--hl-sm] group-aria-selected:text-[--color-font]">
+                            <span className="flex h-6 w-6 items-center justify-center">
+                              <Icon icon={item.icon} className="w-6" />
                             </span>
 
-                            <span className="truncate capitalize">
-                              {item.label}
-                            </span>
+                            <span className="truncate capitalize">{item.label}</span>
                             <span className="flex-1" />
                             {item.action && (
                               <Button
                                 onPress={item.action.run}
                                 aria-label={item.action.label}
-                                className="opacity-80 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                                className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-80 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 aria-pressed:bg-[--hl-sm] data-[pressed]:opacity-100"
                               >
                                 <Icon icon={item.action.icon} />
                               </Button>
@@ -1131,9 +1144,9 @@ const ProjectRoute: FC = () => {
                 </>
               )}
               {!isLearningFeatureDismissed && learningFeature?.active && (
-                <div className='flex flex-shrink-0 flex-col gap-2 p-[--padding-sm]'>
-                  <div className='flex items-center justify-between gap-2'>
-                    <Heading className='text-base'>
+                <div className="flex flex-shrink-0 flex-col gap-2 p-[--padding-sm]">
+                  <div className="flex items-center justify-between gap-2">
+                    <Heading className="text-base">
                       <Icon icon="graduation-cap" />
                       <span className="ml-2">{learningFeature.title}</span>
                     </Heading>
@@ -1145,10 +1158,8 @@ const ProjectRoute: FC = () => {
                       <Icon icon="close" />
                     </Button>
                   </div>
-                  <p className='text-[--hl] text-sm'>
-                    {learningFeature.message}
-                  </p>
-                  <a href={learningFeature.url} className='flex items-center gap-2 underline text-sm'>
+                  <p className="text-sm text-[--hl]">{learningFeature.message}</p>
+                  <a href={learningFeature.url} className="flex items-center gap-2 text-sm underline">
                     {learningFeature.cta}
                     <Icon icon="arrow-up-right-from-square" />
                   </a>
@@ -1156,175 +1167,187 @@ const ProjectRoute: FC = () => {
               )}
             </div>
           </Panel>
-          <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
-          <Panel id="pane-one" className='pane-one theme--pane flex flex-col'>
+          <PanelResizeHandle className="h-full w-[1px] bg-[--hl-md]" />
+          <Panel id="pane-one" className="pane-one theme--pane flex flex-col">
             <OrganizationTabList showActiveStatus={false} />
             {activeProject ? (
-              <div className="w-full flex flex-col overflow-hidden">
-                {billing.isActive ? null : <div className='p-[--padding-md] pb-0'>
-                  <div className='flex flex-wrap justify-between items-center gap-2 p-[--padding-sm] border border-solid border-[--hl-md] bg-opacity-50 bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] text-[--color-font-warning] rounded'>
-                    <p className='text-base'>
-                      <Icon icon="exclamation-triangle" className='mr-2' />
-                      {isUserOwner ? `Your ${isPersonalOrg ? 'personal account' : 'organization'} has unpaid past invoices. Please enter a new payment method to continue using Insomnia.` : 'This organization has unpaid past invoices. Please ask the organization owner to enter a new payment method to continue using Insomnia.'}
-                    </p>
-                    {isUserOwner && (
-                      <a
-                        href={`${getAppWebsiteBaseURL()}/app/subscription/past-due`}
-                        className="px-4 text-[--color-bg] bg-opacity-100 bg-[rgba(var(--color-font-rgb),var(--tw-bg-opacity))] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-sm hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+              <div className="flex w-full flex-col overflow-hidden">
+                {billing.isActive ? null : (
+                  <div className="p-[--padding-md] pb-0">
+                    <div className="flex flex-wrap items-center justify-between gap-2 rounded border border-solid border-[--hl-md] bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] bg-opacity-50 p-[--padding-sm] text-[--color-font-warning]">
+                      <p className="text-base">
+                        <Icon icon="exclamation-triangle" className="mr-2" />
+                        {isUserOwner
+                          ? `Your ${isPersonalOrg ? 'personal account' : 'organization'} has unpaid past invoices. Please enter a new payment method to continue using Insomnia.`
+                          : 'This organization has unpaid past invoices. Please ask the organization owner to enter a new payment method to continue using Insomnia.'}
+                      </p>
+                      {isUserOwner && (
+                        <a
+                          href={`${getAppWebsiteBaseURL()}/app/subscription/past-due`}
+                          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[rgba(var(--color-font-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-1 text-sm font-semibold text-[--color-bg] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
+                        >
+                          Update payment method
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                )}
+                {billing?.expirationErrorMessage || billing?.expirationWarningMessage ? (
+                  <div className="p-[--padding-md] pb-0">
+                    <div
+                      className={`flex flex-wrap items-center justify-between gap-2 rounded border border-solid border-[--hl-md] bg-opacity-50 p-[--padding-sm] text-[--color-font-warning] ${billing?.expirationWarningMessage ? 'bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))]' : 'bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))]'}`}
+                    >
+                      <p className="text-base">
+                        <Icon icon="exclamation-triangle" className="mr-2" />
+                        {billing?.expirationErrorMessage || billing?.expirationWarningMessage}
+                      </p>
+                      {isUserOwner && (
+                        <a
+                          href="https://insomnia.rest/pricing/contact"
+                          className="flex items-center justify-center gap-2 rounded-sm border border-solid border-[--hl-md] bg-[rgba(var(--color-font-rgb),var(--tw-bg-opacity))] bg-opacity-100 px-4 py-1 text-sm font-semibold text-[--color-bg] ring-1 ring-transparent transition-all hover:bg-opacity-80 focus:ring-inset focus:ring-[--hl-md] aria-pressed:opacity-80"
+                        >
+                          Contact sales
+                        </a>
+                      )}
+                    </div>
+                  </div>
+                ) : null}
+                {isProjectInconsistent && (
+                  <div className="p-[--padding-md] pb-0">
+                    <div className="flex flex-wrap items-center justify-between gap-2 rounded border border-solid border-[--hl-md] bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] bg-opacity-50 p-[--padding-sm] text-[--color-font-warning]">
+                      <p className="text-base">
+                        <Icon icon="exclamation-triangle" className="mr-2" />
+                        The organization owner mandates that projects must be created and stored using{' '}
+                        {getProjectStorageTypeLabel(storageRules)}.
+                      </p>
+                      <Button
+                        onPress={() => setIsUpdateProjectModalOpen(true)}
+                        className="flex items-center justify-center rounded-sm border border-solid border-white px-2 py-1"
                       >
-                        Update payment method
-                      </a>
-                    )}
-                  </div>
-                </div>}
-                {billing?.expirationErrorMessage || billing?.expirationWarningMessage ? <div className='p-[--padding-md] pb-0'>
-                  <div className={`flex flex-wrap justify-between items-center gap-2 p-[--padding-sm] border border-solid border-[--hl-md] bg-opacity-50  text-[--color-font-warning] rounded ${billing?.expirationWarningMessage ? 'bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))]' : 'bg-[rgba(var(--color-danger-rgb),var(--tw-bg-opacity))]'}`}>
-                    <p className='text-base'>
-                      <Icon icon="exclamation-triangle" className='mr-2' />
-                      {billing?.expirationErrorMessage || billing?.expirationWarningMessage}
-                    </p>
-                    {isUserOwner && (
-                      <a
-                        href="https://insomnia.rest/pricing/contact"
-                        className="px-4 text-[--color-bg] bg-opacity-100 bg-[rgba(var(--color-font-rgb),var(--tw-bg-opacity))] py-1 font-semibold border border-solid border-[--hl-md] flex items-center justify-center gap-2 aria-pressed:opacity-80 rounded-sm hover:bg-opacity-80 focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                      >
-                        Contact sales
-                      </a>
-                    )}
-                  </div>
-                </div> : null}
-                {isProjectInconsistent && <div className='p-[--padding-md] pb-0'>
-                  <div className='flex flex-wrap justify-between items-center gap-2 p-[--padding-sm] border border-solid border-[--hl-md] bg-opacity-50 bg-[rgba(var(--color-warning-rgb),var(--tw-bg-opacity))] text-[--color-font-warning] rounded'>
-                    <p className='text-base'>
-                      <Icon icon="exclamation-triangle" className='mr-2' />
-                      The organization owner mandates that projects must be created and stored using {getProjectStorageTypeLabel(storageRules)}.
-                    </p>
-                    <Button onPress={() => setIsUpdateProjectModalOpen(true)} className="flex items-center justify-center border border-solid border-white px-2 py-1 rounded-sm">Update</Button>
-                  </div>
-                </div>}
-                {filesWithPresence.length > 0 && <div className="flex max-w-xl justify-between w-full gap-2 p-[--padding-md]">
-                  <SearchField
-                    aria-label="Files filter"
-                    className="group relative flex-1"
-                    value={workspaceListFilter}
-                    onChange={filter => setWorkspaceListFilter(filter)}
-                  >
-                    <Input
-                      placeholder="Filter"
-                      className="py-1 placeholder:italic w-full pl-2 pr-7 rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors"
-                    />
-                    <div className="flex items-center px-2 absolute right-0 top-0 h-full">
-                      <Button className="flex group-data-[empty]:hidden items-center justify-center aspect-square w-5 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-                        <Icon icon="close" />
+                        Update
                       </Button>
                     </div>
-                  </SearchField>
-                  <Select
-                    aria-label="Sort order"
-                    className="h-full aspect-square"
-                    selectedKey={workspaceListSortOrder}
-                    onSelectionChange={order => setWorkspaceListSortOrder(order as DashboardSortOrder)}
-                  >
-                    <Button
-                      aria-label="Select sort order"
-                      className="flex flex-shrink-0 items-center justify-center aspect-square h-full bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  </div>
+                )}
+                {filesWithPresence.length > 0 && (
+                  <div className="flex w-full max-w-xl justify-between gap-2 p-[--padding-md]">
+                    <SearchField
+                      aria-label="Files filter"
+                      className="group relative flex-1"
+                      value={workspaceListFilter}
+                      onChange={filter => setWorkspaceListFilter(filter)}
                     >
-                      <Icon icon="sort" />
-                    </Button>
-                    <Popover className="min-w-max overflow-y-hidden flex flex-col">
-                      <ListBox
-                        items={DASHBOARD_SORT_ORDERS.map(order => {
-                          return {
-                            id: order,
-                            name: dashboardSortOrderName[order],
-                          };
-                        })}
-                        className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
-                      >
-                        {item => (
-                          <ListBoxItem
-                            id={item.id}
-                            key={item.id}
-                            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                            aria-label={item.name}
-                            textValue={item.name}
-                            value={item}
-                          >
-                            {({ isSelected }) => (
-                              <Fragment>
-                                <span>{item.name}</span>
-                                {isSelected && (
-                                  <Icon
-                                    icon="check"
-                                    className="text-[--color-success] justify-self-end"
-                                  />
-                                )}
-                              </Fragment>
-                            )}
-                          </ListBoxItem>
-                        )}
-                      </ListBox>
-                    </Popover>
-                  </Select>
-
-                  <MenuTrigger>
-                    <Button
-                      aria-label="Create in project"
-                      className="flex items-center justify-center px-4 gap-2 h-full bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                      <Input
+                        placeholder="Filter"
+                        className="w-full rounded-sm border border-solid border-[--hl-sm] bg-[--color-bg] py-1 pl-2 pr-7 text-[--color-font] transition-colors placeholder:italic focus:outline-none focus:ring-1 focus:ring-[--hl-md]"
+                      />
+                      <div className="absolute right-0 top-0 flex h-full items-center px-2">
+                        <Button className="flex aspect-square w-5 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] group-data-[empty]:hidden">
+                          <Icon icon="close" />
+                        </Button>
+                      </div>
+                    </SearchField>
+                    <Select
+                      aria-label="Sort order"
+                      className="aspect-square h-full"
+                      selectedKey={workspaceListSortOrder}
+                      onSelectionChange={order => setWorkspaceListSortOrder(order as DashboardSortOrder)}
                     >
-                      <Icon icon="plus-circle" /> <span className='hidden md:block'>Create</span>
-                    </Button>
-                    <Popover className="min-w-max overflow-y-hidden flex flex-col">
-                      <Menu
-                        aria-label="Create in project actions"
-                        selectionMode="single"
-                        onAction={key => {
-                          const item = createInProjectActionList.find(
-                            item => item.id === key
-                          );
-                          if (item) {
-                            item.action();
-                          }
-                        }}
-                        items={createInProjectActionList}
-                        className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                      <Button
+                        aria-label="Select sort order"
+                        className="flex aspect-square h-full flex-shrink-0 items-center justify-center rounded-sm bg-[--hl-xxs] text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                       >
-                        {item => (
-                          <MenuItem
-                            key={item.id}
-                            id={item.id}
-                            className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
-                            aria-label={item.name}
-                          >
-                            <Icon icon={item.icon} />
-                            <span>{item.name}</span>
-                          </MenuItem>
-                        )}
-                      </Menu>
-                    </Popover>
-                  </MenuTrigger>
+                        <Icon icon="sort" />
+                      </Button>
+                      <Popover className="flex min-w-max flex-col overflow-y-hidden">
+                        <ListBox
+                          items={DASHBOARD_SORT_ORDERS.map(order => {
+                            return {
+                              id: order,
+                              name: dashboardSortOrderName[order],
+                            };
+                          })}
+                          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
+                        >
+                          {item => (
+                            <ListBoxItem
+                              id={item.id}
+                              key={item.id}
+                              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                              aria-label={item.name}
+                              textValue={item.name}
+                              value={item}
+                            >
+                              {({ isSelected }) => (
+                                <Fragment>
+                                  <span>{item.name}</span>
+                                  {isSelected && (
+                                    <Icon icon="check" className="justify-self-end text-[--color-success]" />
+                                  )}
+                                </Fragment>
+                              )}
+                            </ListBoxItem>
+                          )}
+                        </ListBox>
+                      </Popover>
+                    </Select>
 
-                  <Button
-                    onPress={() => {
-                      setImportModalType('file');
-                    }}
-                    aria-label="Import"
-                    className="flex items-center justify-center px-4 gap-2 h-full bg-[--hl-xxs] aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
-                  >
-                    <Icon icon="file-import" /> <span className='hidden md:block'>Import</span>
-                  </Button>
+                    <MenuTrigger>
+                      <Button
+                        aria-label="Create in project"
+                        className="flex h-full items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                      >
+                        <Icon icon="plus-circle" /> <span className="hidden md:block">Create</span>
+                      </Button>
+                      <Popover className="flex min-w-max flex-col overflow-y-hidden">
+                        <Menu
+                          aria-label="Create in project actions"
+                          selectionMode="single"
+                          onAction={key => {
+                            const item = createInProjectActionList.find(item => item.id === key);
+                            if (item) {
+                              item.action();
+                            }
+                          }}
+                          items={createInProjectActionList}
+                          className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
+                        >
+                          {item => (
+                            <MenuItem
+                              key={item.id}
+                              id={item.id}
+                              className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
+                              aria-label={item.name}
+                            >
+                              <Icon icon={item.icon} />
+                              <span>{item.name}</span>
+                            </MenuItem>
+                          )}
+                        </Menu>
+                      </Popover>
+                    </MenuTrigger>
 
-                </div>}
+                    <Button
+                      onPress={() => {
+                        setImportModalType('file');
+                      }}
+                      aria-label="Import"
+                      className="flex h-full items-center justify-center gap-2 rounded-sm bg-[--hl-xxs] px-4 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+                    >
+                      <Icon icon="file-import" /> <span className="hidden md:block">Import</span>
+                    </Button>
+                  </div>
+                )}
 
-                <div className='flex-1 overflow-y-auto'>
+                <div className="flex-1 overflow-y-auto">
                   <GridList
                     aria-label="Files"
-                    className="data-[empty]:flex data-[empty]:justify-center grid [grid-template-columns:repeat(auto-fit,200px)] [grid-template-rows:repeat(auto-fit,200px)] gap-4 p-[--padding-md]"
+                    className="grid gap-4 p-[--padding-md] [grid-template-columns:repeat(auto-fit,200px)] [grid-template-rows:repeat(auto-fit,200px)] data-[empty]:flex data-[empty]:justify-center"
                     items={filesWithPresence}
                     renderEmptyState={() => {
                       if (workspaceListFilter) {
                         return (
-                          <div className="w-full h-full flex items-center justify-center">
+                          <div className="flex h-full w-full items-center justify-center">
                             <p className="notice subtle">
                               No documents found for <strong>{workspaceListFilter}</strong>
                             </p>
@@ -1333,19 +1356,17 @@ const ProjectRoute: FC = () => {
                       }
 
                       return (
-                        <div className='w-full flex flex-col items-center justify-center gap-4'>
+                        <div className="flex w-full flex-col items-center justify-center gap-4">
                           <ProjectEmptyView
                             onCreateRequestCollectionWithRequest={createNewCollectionWithRequest}
                             onCreateDesignDocument={createNewDocument}
                             onImportFrom={() => setImportModalType('file')}
                           />
                           {createNewWorkspaceFetcher.data?.error && (
-                            <div className='px-10'>
-                              <div className="flex items-center px-2 py-1 gap-2 text-sm rounded-sm text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]">
+                            <div className="px-10">
+                              <div className="flex items-center gap-2 rounded-sm bg-[rgba(var(--color-danger-rgb),0.5)] px-2 py-1 text-sm text-[--color-font-danger]">
                                 <Icon icon="triangle-exclamation" />
-                                <span>
-                                  {createNewWorkspaceFetcher.data?.error}
-                                </span>
+                                <span>{createNewWorkspaceFetcher.data?.error}</span>
                               </div>
                             </div>
                           )}
@@ -1360,22 +1381,23 @@ const ProjectRoute: FC = () => {
                           id={item.id}
                           textValue={item.name}
                           onAction={item.action}
-                          className={`flex-1 overflow-hidden flex-col outline-none p-[--padding-md] flex select-none w-full rounded-md hover:shadow-md aspect-square ring-1 ring-[--hl-md] hover:ring-[--hl-sm] focus:ring-[--hl-lg] hover:bg-[--hl-xs] focus:bg-[--hl-sm] transition-all ${item.loading ? 'animate-pulse' : ''}`}
+                          className={`flex aspect-square w-full flex-1 select-none flex-col overflow-hidden rounded-md p-[--padding-md] outline-none ring-1 ring-[--hl-md] transition-all hover:bg-[--hl-xs] hover:shadow-md hover:ring-[--hl-sm] focus:bg-[--hl-sm] focus:ring-[--hl-lg] ${item.loading ? 'animate-pulse' : ''}`}
                         >
-                          <div className="flex gap-2 h-[20px]">
-                            <div className="flex pr-2 h-full flex-shrink-0 items-center rounded-sm gap-2 bg-[--hl-xs] text-[--color-font] text-sm">
-                              <div className={`${scopeToBgColorMap[item.scope]} ${scopeToTextColorMap[item.scope]} px-2 flex justify-center items-center h-[20px] w-[20px] rounded-s-sm`}>
-                                <Icon icon={item.loading ? 'spinner' : scopeToIconMap[item.scope]} className={item.loading ? 'animate-spin' : ''} />
+                          <div className="flex h-[20px] gap-2">
+                            <div className="flex h-full flex-shrink-0 items-center gap-2 rounded-sm bg-[--hl-xs] pr-2 text-sm text-[--color-font]">
+                              <div
+                                className={`${scopeToBgColorMap[item.scope]} ${scopeToTextColorMap[item.scope]} flex h-[20px] w-[20px] items-center justify-center rounded-s-sm px-2`}
+                              >
+                                <Icon
+                                  icon={item.loading ? 'spinner' : scopeToIconMap[item.scope]}
+                                  className={item.loading ? 'animate-spin' : ''}
+                                />
                               </div>
                               <span>{item.label}</span>
                             </div>
                             <span className="flex-1" />
                             {item.presence.length > 0 && (
-                              <AvatarGroup
-                                size="small"
-                                maxAvatars={3}
-                                items={item.presence}
-                              />
+                              <AvatarGroup size="small" maxAvatars={3} items={item.presence} />
                             )}
                             {activeProject && item.scope !== 'unsynced' && item.workspace && (
                               <WorkspaceCardDropdown
@@ -1389,68 +1411,53 @@ const ProjectRoute: FC = () => {
                             )}
                           </div>
                           <TooltipTrigger>
-                            <Link
-                              onPress={item.action}
-                              className="pt-4 text-base font-bold line-clamp-4 outline-none"
-                            >
+                            <Link onPress={item.action} className="line-clamp-4 pt-4 text-base font-bold outline-none">
                               {item.name}
                             </Link>
                             <Tooltip
                               offset={8}
-                              className="border select-none text-sm max-w-xs border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] text-[--color-font] px-4 py-2 rounded-md overflow-y-auto max-h-[85vh] focus:outline-none"
+                              className="max-h-[85vh] max-w-xs select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] px-4 py-2 text-sm text-[--color-font] shadow-lg focus:outline-none"
                             >
                               <span>{item.name}</span>
                             </Tooltip>
                           </TooltipTrigger>
-                          <div className="flex-1 flex flex-col gap-2 justify-end text-sm text-[--hl]">
+                          <div className="flex flex-1 flex-col justify-end gap-2 text-sm text-[--hl]">
                             {item.gitFilePath && (
-                              <div className="text-sm flex items-center gap-2">
+                              <div className="flex items-center gap-2 text-sm">
                                 <Icon icon="file-alt" />
-                                <span className='truncate' title={item.gitFilePath}>
+                                <span className="truncate" title={item.gitFilePath}>
                                   {item.gitFilePath}
                                 </span>
                               </div>
                             )}
-                            {item.version && (
-                              <div className="flex-1 pt-2">
-                                {item.version}
-                              </div>
-                            )}
+                            {item.version && <div className="flex-1 pt-2">{item.version}</div>}
                             {item.oasFormat && (
-                              <div className="text-sm flex items-center gap-2">
+                              <div className="flex items-center gap-2 text-sm">
                                 <Icon icon="file-alt" />
-                                <span>
-                                  {item.oasFormat}
-                                </span>
+                                <span>{item.oasFormat}</span>
                               </div>
                             )}
                             {item.branch && (
-                              <div className="text-sm flex items-center gap-2">
+                              <div className="flex items-center gap-2 text-sm">
                                 <Icon icon="code-branch" />
-                                <span className="truncate">
-                                  {item.branch}
-                                </span>
+                                <span className="truncate">{item.branch}</span>
                               </div>
                             )}
                             {Boolean(item.lastModifiedTimestamp) && (
-                              <div className="text-sm flex items-center gap-2 truncate">
+                              <div className="flex items-center gap-2 truncate text-sm">
                                 <Icon icon="clock" />
                                 <TimeFromNow
-                                  title={text => `Last updated ${text}, and created on ${new Date(item.created).toLocaleDateString()}`}
-                                  timestamp={
-                                    item.lastModifiedTimestamp
+                                  title={text =>
+                                    `Last updated ${text}, and created on ${new Date(item.created).toLocaleDateString()}`
                                   }
+                                  timestamp={item.lastModifiedTimestamp}
                                 />
-                                <span className="truncate">
-                                  {item.lastCommit}
-                                </span>
+                                <span className="truncate">{item.lastCommit}</span>
                               </div>
                             )}
                             {(item.hasUncommittedChanges || item.hasUnpushedChanges) && (
-                              <div className="text-sm text-[rgba(var(--color-warning-rgb),0.8)] flex items-center gap-2">
-                                <span>
-                                  {item.hasUncommittedChanges ? 'Uncommitted changes' : 'Unpushed changes'}
-                                </span>
+                              <div className="flex items-center gap-2 text-sm text-[rgba(var(--color-warning-rgb),0.8)]">
+                                <span>{item.hasUncommittedChanges ? 'Uncommitted changes' : 'Unpushed changes'}</span>
                               </div>
                             )}
                           </div>
@@ -1461,17 +1468,12 @@ const ProjectRoute: FC = () => {
                 </div>
               </div>
             ) : (
-              <NoProjectView
-                isGitSyncEnabled={isGitSyncEnabled}
-                storageRules={storageRules}
-              />
+              <NoProjectView isGitSyncEnabled={isGitSyncEnabled} storageRules={storageRules} />
             )}
           </Panel>
         </PanelGroup>
         {isGitRepositoryCloneModalOpen && (
-          <GitRepositoryCloneModal
-            onHide={() => setIsGitRepositoryCloneModalOpen(false)}
-          />
+          <GitRepositoryCloneModal onHide={() => setIsGitRepositoryCloneModalOpen(false)} />
         )}
         {isNewProjectModalOpen && (
           <ProjectModal
diff --git a/packages/insomnia/src/ui/routes/remote-collections.tsx b/packages/insomnia/src/ui/routes/remote-collections.tsx
index bb30cfbcc8..723cc0600c 100644
--- a/packages/insomnia/src/ui/routes/remote-collections.tsx
+++ b/packages/insomnia/src/ui/routes/remote-collections.tsx
@@ -17,13 +17,7 @@ import type { UnitTest } from '../../models/unit-test';
 import type { UnitTestSuite } from '../../models/unit-test-suite';
 import type { WebSocketRequest } from '../../models/websocket-request';
 import { scopeToActivity, type Workspace } from '../../models/workspace';
-import type {
-  BackendProject,
-  Compare,
-  Snapshot,
-  Status,
-  StatusCandidate,
-} from '../../sync/types';
+import type { BackendProject, Compare, Snapshot, Status, StatusCandidate } from '../../sync/types';
 import { UserAbortResolveMergeConflictError, VCSInstance } from '../../sync/vcs/insomnia-sync';
 import { pullBackendProject } from '../../sync/vcs/pull-backend-project';
 import { invariant } from '../../utils/invariant';
@@ -48,15 +42,9 @@ async function getSyncItems({ workspaceId }: { workspaceId: string }) {
   // first recursion to get all the folders ids in order to use nedb search by an array
   const flattenFoldersIntoList = async (id: string): Promise<string[]> => {
     const parentIds: string[] = [id];
-    const folderIds = (await models.requestGroup.findByParentId(id)).map(
-      r => r._id
-    );
+    const folderIds = (await models.requestGroup.findByParentId(id)).map(r => r._id);
     if (folderIds.length) {
-      await Promise.all(
-        folderIds.map(async folderIds =>
-          parentIds.push(...(await flattenFoldersIntoList(folderIds)))
-        )
-      );
+      await Promise.all(folderIds.map(async folderIds => parentIds.push(...(await flattenFoldersIntoList(folderIds)))));
     }
     return parentIds;
   };
@@ -97,9 +85,9 @@ async function getSyncItems({ workspaceId }: { workspaceId: string }) {
   const baseEnvironment = await models.environment.getByParentId(workspaceId);
   invariant(baseEnvironment, 'Base environment not found');
 
-  const subEnvironments = (
-    await models.environment.findByParentId(baseEnvironment._id)
-  ).sort((e1, e2) => e1.metaSortKey - e2.metaSortKey);
+  const subEnvironments = (await models.environment.findByParentId(baseEnvironment._id)).sort(
+    (e1, e2) => e1.metaSortKey - e2.metaSortKey,
+  );
   allRequests.map(r => syncItemsList.push(r));
   tests.map(t => syncItemsList.push(t));
   testSuites.map(t => syncItemsList.push(t));
@@ -110,23 +98,18 @@ async function getSyncItems({ workspaceId }: { workspaceId: string }) {
     syncItemsList.push(activeApiSpec);
   }
 
-  const syncItems: StatusCandidate[] = syncItemsList
-    .filter(canSync)
-    .map(i => ({
-      key: i._id,
-      name: i.name || '',
-      document: i,
-    }));
+  const syncItems: StatusCandidate[] = syncItemsList.filter(canSync).map(i => ({
+    key: i._id,
+    name: i.name || '',
+    document: i,
+  }));
 
   return {
     syncItems,
   };
 }
 
-export const pullRemoteCollectionAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const pullRemoteCollectionAction: ActionFunction = async ({ request, params }) => {
   try {
     const { organizationId } = params;
     invariant(typeof organizationId === 'string', 'Organization Id is required');
@@ -144,9 +127,7 @@ export const pullRemoteCollectionAction: ActionFunction = async ({
       teamProjectId: remoteId,
     });
 
-    const backendProject = remoteBackendProjects.find(
-      p => p.id === backendProjectId
-    );
+    const backendProject = remoteBackendProjects.find(p => p.id === backendProjectId);
 
     invariant(backendProject, 'Backend project not found');
 
@@ -170,9 +151,7 @@ export const pullRemoteCollectionAction: ActionFunction = async ({
     invariant(workspace, 'Workspace not found');
     const activity = scopeToActivity(workspace?.scope);
 
-    return redirect(
-      `/organization/${organizationId}/project/${project._id}/workspace/${workspaceId}/${activity}`
-    );
+    return redirect(`/organization/${organizationId}/project/${project._id}/workspace/${workspaceId}/${activity}`);
   } catch (e) {
     console.warn('Failed to pull remote collection', e);
     return {
@@ -185,9 +164,7 @@ export interface RemoteCollectionsLoaderData {
   backendProjectsToPull: BackendProject[];
 }
 
-export const remoteLoader: LoaderFunction = async ({
-  params,
-}): Promise<RemoteCollectionsLoaderData> => {
+export const remoteLoader: LoaderFunction = async ({ params }): Promise<RemoteCollectionsLoaderData> => {
   const { organizationId, projectId } = params;
   invariant(typeof organizationId === 'string', 'Organization Id is required');
   invariant(typeof projectId === 'string', 'Project Id is required');
@@ -204,36 +181,27 @@ export const remoteLoader: LoaderFunction = async ({
     }
     const vcs = VCSInstance();
 
-    const allPulledBackendProjectsForRemoteId = (
-      await vcs.localBackendProjects()
-    ).filter(p => p.id === remoteId);
+    const allPulledBackendProjectsForRemoteId = (await vcs.localBackendProjects()).filter(p => p.id === remoteId);
     // Remote backend projects are fetched from the backend since they are not stored locally
-    const allFetchedRemoteBackendProjectsForRemoteId =
-      await vcs.remoteBackendProjects({
-        teamId: organizationId,
-        teamProjectId: remoteId,
-      });
+    const allFetchedRemoteBackendProjectsForRemoteId = await vcs.remoteBackendProjects({
+      teamId: organizationId,
+      teamProjectId: remoteId,
+    });
 
     // Get all workspaces that are connected to backend projects and under the current project
-    const workspacesWithBackendProjects = await database.find<Workspace>(
-      models.workspace.type,
-      {
-        _id: {
-          $in: [
-            ...allPulledBackendProjectsForRemoteId,
-            ...allFetchedRemoteBackendProjectsForRemoteId,
-          ].map(p => p.rootDocumentId),
-        },
-        parentId: project._id,
-      }
-    );
+    const workspacesWithBackendProjects = await database.find<Workspace>(models.workspace.type, {
+      _id: {
+        $in: [...allPulledBackendProjectsForRemoteId, ...allFetchedRemoteBackendProjectsForRemoteId].map(
+          p => p.rootDocumentId,
+        ),
+      },
+      parentId: project._id,
+    });
 
     // Get the list of remote backend projects that we need to pull
-    const backendProjectsToPull =
-      allFetchedRemoteBackendProjectsForRemoteId.filter(
-        p =>
-          !workspacesWithBackendProjects.find(w => w._id === p.rootDocumentId)
-      );
+    const backendProjectsToPull = allFetchedRemoteBackendProjectsForRemoteId.filter(
+      p => !workspacesWithBackendProjects.find(w => w._id === p.rootDocumentId),
+    );
 
     return {
       backendProjectsToPull,
@@ -259,8 +227,7 @@ interface SyncData {
 }
 
 const remoteBranchesCache: Record<string, string[]> = {};
-const remoteCompareCache: Record<string, Compare> =
-  {};
+const remoteCompareCache: Record<string, Compare> = {};
 const remoteBackendProjectsCache: Record<string, BackendProject[]> = {};
 
 export const syncDataAction: ActionFunction = async ({ params }) => {
@@ -290,8 +257,7 @@ export const syncDataAction: ActionFunction = async ({ params }) => {
       remoteBackendProjects,
     };
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Unknown error while syncing data.';
+    const errorMessage = e instanceof Error ? e.message : 'Unknown error while syncing data.';
     delete remoteBranchesCache[workspaceId];
     delete remoteCompareCache[workspaceId];
     delete remoteBackendProjectsCache[workspaceId];
@@ -307,9 +273,7 @@ export type SyncDataLoaderData =
       error: string;
     };
 
-export const syncDataLoader: LoaderFunction = async ({
-  params,
-}): Promise<SyncDataLoaderData> => {
+export const syncDataLoader: LoaderFunction = async ({ params }): Promise<SyncDataLoaderData> => {
   try {
     const { projectId, workspaceId } = params;
     invariant(typeof projectId === 'string', 'Project Id is required');
@@ -322,18 +286,14 @@ export const syncDataLoader: LoaderFunction = async ({
     const { syncItems } = await getSyncItems({ workspaceId });
     const localBranches = (await vcs.getBranchNames()).sort();
     const currentBranch = await vcs.getCurrentBranchName();
-    const history = (await vcs.getHistory()).sort((a, b) =>
-      b.created > a.created ? 1 : -1
-    );
+    const history = (await vcs.getHistory()).sort((a, b) => (b.created > a.created ? 1 : -1));
     const historyCount = await vcs.getHistoryCount();
     const status = await vcs.status(syncItems);
 
     let remoteBranches: string[] = [];
     let compare = { ahead: 0, behind: 0 };
     try {
-      remoteBranches = (
-        remoteBranchesCache[workspaceId] || (await vcs.getRemoteBranchNames())
-      ).sort();
+      remoteBranches = (remoteBranchesCache[workspaceId] || (await vcs.getRemoteBranchNames())).sort();
       compare = remoteCompareCache[workspaceId] || (await vcs.compareRemoteBranch());
       const remoteBackendProjects =
         remoteBackendProjectsCache[workspaceId] ||
@@ -357,7 +317,7 @@ export const syncDataLoader: LoaderFunction = async ({
         hasUncommittedChanges,
         hasUnpushedChanges: compare?.ahead > 0,
       });
-    } catch (e) { }
+    } catch (e) {}
 
     return {
       syncItems,
@@ -370,18 +330,14 @@ export const syncDataLoader: LoaderFunction = async ({
       compare,
     };
   } catch (e) {
-    const errorMessage =
-      e instanceof Error ? e.message : 'Unknown error while loading sync data.';
+    const errorMessage = e instanceof Error ? e.message : 'Unknown error while loading sync data.';
     return {
       error: errorMessage,
     };
   }
 };
 
-export const checkoutBranchAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const checkoutBranchAction: ActionFunction = async ({ request, params }) => {
   const { organizationId, projectId, workspaceId } = params;
   invariant(typeof organizationId === 'string', 'Organization Id is required');
   invariant(typeof projectId === 'string', 'Project Id is required');
@@ -396,24 +352,16 @@ export const checkoutBranchAction: ActionFunction = async ({
     await database.batchModifyDocs(delta as Operation);
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while checking out branch.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while checking out branch.';
     return {
       error: errorMessage,
     };
   }
 
-  return redirect(
-    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`
-  );
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
 };
 
-export const mergeBranchAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const mergeBranchAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const formData = await request.formData();
@@ -428,17 +376,13 @@ export const mergeBranchAction: ActionFunction = async ({
     if (err instanceof UserAbortResolveMergeConflictError) {
       return null;
     }
-      throw err;
-
+    throw err;
   }
   try {
     await database.batchModifyDocs(delta as Operation);
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while merging branch.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while merging branch.';
     return {
       error: errorMessage,
     };
@@ -447,10 +391,7 @@ export const mergeBranchAction: ActionFunction = async ({
   return null;
 };
 
-export const createBranchAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const createBranchAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const formData = await request.formData();
@@ -465,10 +406,7 @@ export const createBranchAction: ActionFunction = async ({
     await database.batchModifyDocs(delta as Operation);
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while merging branch.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while merging branch.';
     return {
       error: errorMessage,
     };
@@ -477,10 +415,7 @@ export const createBranchAction: ActionFunction = async ({
   return null;
 };
 
-export const deleteBranchAction: ActionFunction = async ({
-  params,
-  request,
-}) => {
+export const deleteBranchAction: ActionFunction = async ({ params, request }) => {
   const { organizationId, projectId, workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const formData = await request.formData();
@@ -498,18 +433,13 @@ export const deleteBranchAction: ActionFunction = async ({
 
     delete remoteBranchesCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while merging branch.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while merging branch.';
     return {
       error: errorMessage,
     };
   }
 
-  return redirect(
-    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`
-  );
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
 };
 
 export const pullFromRemoteAction: ActionFunction = async ({ params }) => {
@@ -539,24 +469,16 @@ export const pullFromRemoteAction: ActionFunction = async ({ params }) => {
       tags: { action: 'pull' },
     });
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while pulling from remote.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while pulling from remote.';
     return {
       error: errorMessage,
     };
   }
 
-  return redirect(
-    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`
-  );
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
 };
 
-export const fetchRemoteBranchAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const fetchRemoteBranchAction: ActionFunction = async ({ request, params }) => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -582,10 +504,7 @@ export const fetchRemoteBranchAction: ActionFunction = async ({
     await database.batchModifyDocs(delta);
   } catch (err) {
     await vcs.checkout([], currentBranch);
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while fetching remote branch.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while fetching remote branch.';
     return {
       error: errorMessage,
     };
@@ -618,10 +537,7 @@ export const pushToRemoteAction: ActionFunction = async ({ params }) => {
       tags: { action: 'push' },
     });
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while pushing to remote.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while pushing to remote.';
     return {
       error: errorMessage,
     };
@@ -640,24 +556,16 @@ export const rollbackChangesAction: ActionFunction = async ({ params }) => {
     await database.batchModifyDocs(delta as unknown as Operation);
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while rolling back changes.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while rolling back changes.';
     return {
       error: errorMessage,
     };
   }
 
-  return redirect(
-    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`
-  );
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
 };
 
-export const restoreChangesAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const restoreChangesAction: ActionFunction = async ({ request, params }) => {
   const { organizationId, projectId, workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const formData = await request.formData();
@@ -670,24 +578,16 @@ export const restoreChangesAction: ActionFunction = async ({
     await database.batchModifyDocs(delta as unknown as Operation);
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while restoring changes.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while restoring changes.';
     return {
       error: errorMessage,
     };
   }
 
-  return redirect(
-    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`
-  );
+  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug`);
 };
 
-export const stageChangesAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const stageChangesAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const data = await request.json();
@@ -713,10 +613,7 @@ export const stageChangesAction: ActionFunction = async ({
   return null;
 };
 
-export const unstageChangesAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const unstageChangesAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const data = await request.json();
@@ -742,10 +639,7 @@ export const unstageChangesAction: ActionFunction = async ({
   return null;
 };
 
-export const createSnapshotAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const createSnapshotAction: ActionFunction = async ({ request, params }) => {
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
   const formData = await request.formData();
@@ -758,10 +652,7 @@ export const createSnapshotAction: ActionFunction = async ({
     await vcs.takeSnapshot(message);
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while creating snapshot.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while creating snapshot.';
     return {
       error: errorMessage,
     };
@@ -770,10 +661,7 @@ export const createSnapshotAction: ActionFunction = async ({
   return null;
 };
 
-export const createSnapshotAndPushAction: ActionFunction = async ({
-  request,
-  params,
-}) => {
+export const createSnapshotAndPushAction: ActionFunction = async ({ request, params }) => {
   const { projectId, workspaceId } = params;
   invariant(typeof projectId === 'string', 'Project Id is required');
   invariant(typeof workspaceId === 'string', 'Workspace Id is required');
@@ -794,10 +682,7 @@ export const createSnapshotAndPushAction: ActionFunction = async ({
     });
     delete remoteCompareCache[workspaceId];
   } catch (err) {
-    const errorMessage =
-      err instanceof Error
-        ? err.message
-        : 'Unknown error while creating snapshot.';
+    const errorMessage = err instanceof Error ? err.message : 'Unknown error while creating snapshot.';
     return {
       error: errorMessage,
     };
diff --git a/packages/insomnia/src/ui/routes/request-group.tsx b/packages/insomnia/src/ui/routes/request-group.tsx
index 8d9e30bf75..b72190d3dd 100644
--- a/packages/insomnia/src/ui/routes/request-group.tsx
+++ b/packages/insomnia/src/ui/routes/request-group.tsx
@@ -30,7 +30,7 @@ export const createRequestGroupAction: ActionFunction = async ({ request, params
   const name = formData.get('name') as string;
   const parentId = formData.get('parentId') as string;
   // New folder environment to be key-value pair by default;
-  const environmentType = formData.get('environmentType') as EnvironmentType || EnvironmentType.KVPAIR;
+  const environmentType = (formData.get('environmentType') as EnvironmentType) || EnvironmentType.KVPAIR;
   const requestGroup = await models.requestGroup.create({ parentId: parentId || workspaceId, name, environmentType });
   await models.requestGroupMeta.create({ parentId: requestGroup._id, collapsed: false });
   return null;
@@ -40,7 +40,7 @@ export const updateRequestGroupAction: ActionFunction = async ({ request, params
   invariant(typeof requestGroupId === 'string', 'Request Group ID is required');
   const reqGroup = await models.requestGroup.getById(requestGroupId);
   invariant(reqGroup, 'Request Group not found');
-  const patch = await request.json() as RequestGroup;
+  const patch = (await request.json()) as RequestGroup;
   await models.requestGroup.update(reqGroup, patch);
   return null;
 };
@@ -55,7 +55,7 @@ export const deleteRequestGroupAction: ActionFunction = async ({ request }) => {
 };
 
 export const duplicateRequestGroupAction: ActionFunction = async ({ request }) => {
-  const patch = await request.json() as Partial<RequestGroup>;
+  const patch = (await request.json()) as Partial<RequestGroup>;
   invariant(patch._id, 'Request group id not found');
   const requestGroup = await models.requestGroup.getById(patch._id);
   invariant(requestGroup, 'Request group not found');
@@ -64,7 +64,11 @@ export const duplicateRequestGroupAction: ActionFunction = async ({ request }) =
     invariant(workspace, 'Workspace is required');
     // TODO: if gRPC, we should also copy the protofile to the destination workspace - INS-267
     // Move to top of sort order
-    const newRequestGroup = await models.requestGroup.duplicate(requestGroup, { name: patch.name, parentId: patch.parentId, metaSortKey: -1e9 });
+    const newRequestGroup = await models.requestGroup.duplicate(requestGroup, {
+      name: patch.name,
+      parentId: patch.parentId,
+      metaSortKey: -1e9,
+    });
     models.stats.incrementCreatedRequestsForDescendents(newRequestGroup);
     return null;
   }
@@ -76,7 +80,7 @@ export const duplicateRequestGroupAction: ActionFunction = async ({ request }) =
 export const updateRequestGroupMetaAction: ActionFunction = async ({ request, params }) => {
   const { requestGroupId } = params;
   invariant(typeof requestGroupId === 'string', 'Request Group ID is required');
-  const patch = await request.json() as Partial<RequestGroupMeta>;
+  const patch = (await request.json()) as Partial<RequestGroupMeta>;
   const requestGroupMeta = await models.requestGroupMeta.getByParentId(requestGroupId);
   if (requestGroupMeta) {
     await models.requestGroupMeta.update(requestGroupMeta, patch);
diff --git a/packages/insomnia/src/ui/routes/request.tsx b/packages/insomnia/src/ui/routes/request.tsx
index 54e7ccbbbd..112875b02e 100644
--- a/packages/insomnia/src/ui/routes/request.tsx
+++ b/packages/insomnia/src/ui/routes/request.tsx
@@ -10,7 +10,13 @@ import { v4 as uuidv4 } from 'uuid';
 
 import type { RequestTestResult } from '../../../../insomnia-scripting-environment/src/objects';
 import { version } from '../../../package.json';
-import { CONTENT_TYPE_EVENT_STREAM, CONTENT_TYPE_GRAPHQL, CONTENT_TYPE_JSON, METHOD_GET, METHOD_POST } from '../../common/constants';
+import {
+  CONTENT_TYPE_EVENT_STREAM,
+  CONTENT_TYPE_GRAPHQL,
+  CONTENT_TYPE_JSON,
+  METHOD_GET,
+  METHOD_POST,
+} from '../../common/constants';
 import { type ChangeBufferEvent, database } from '../../common/database';
 import { getContentDispositionHeader } from '../../common/misc';
 import type { ResponsePatch } from '../../main/network/libcurl-promise';
@@ -25,7 +31,16 @@ import * as requestOperations from '../../models/helpers/request-operations';
 import type { MockRoute } from '../../models/mock-route';
 import type { MockServer } from '../../models/mock-server';
 import { isGraphqlSubscriptionRequest } from '../../models/request';
-import { getPathParametersFromUrl, isEventStreamRequest, isRequest, type Request, type RequestAuthentication, type RequestBody, type RequestHeader, type RequestParameter } from '../../models/request';
+import {
+  getPathParametersFromUrl,
+  isEventStreamRequest,
+  isRequest,
+  type Request,
+  type RequestAuthentication,
+  type RequestBody,
+  type RequestHeader,
+  type RequestParameter,
+} from '../../models/request';
 import { isRequestMeta, type RequestMeta } from '../../models/request-meta';
 import type { RequestVersion } from '../../models/request-version';
 import type { Response } from '../../models/response';
@@ -33,7 +48,15 @@ import type { ResponseInfo, RunnerResultPerRequestPerIteration } from '../../mod
 import { isWebSocketRequest, isWebSocketRequestId, type WebSocketRequest } from '../../models/websocket-request';
 import { isWebSocketResponse, type WebSocketResponse } from '../../models/websocket-response';
 import { getAuthHeader } from '../../network/authentication';
-import { fetchRequestData, responseTransform, sendCurlAndWriteTimeline, tryToExecuteAfterResponseScript, tryToExecutePreRequestScript, tryToInterpolateRequest, tryToTransformRequestWithPlugins } from '../../network/network';
+import {
+  fetchRequestData,
+  responseTransform,
+  sendCurlAndWriteTimeline,
+  tryToExecuteAfterResponseScript,
+  tryToExecutePreRequestScript,
+  tryToInterpolateRequest,
+  tryToTransformRequestWithPlugins,
+} from '../../network/network';
 import { type RenderedRequest } from '../../templating/types';
 import { parseGraphQLReqeustBody } from '../../utils/graph-ql';
 import { invariant } from '../../utils/invariant';
@@ -70,7 +93,9 @@ export const defaultSendActionRuntime = {
   },
 };
 
-export const loader: LoaderFunction = async ({ params }): Promise<RequestLoaderData | WebSocketRequestLoaderData | GrpcRequestLoaderData> => {
+export const loader: LoaderFunction = async ({
+  params,
+}): Promise<RequestLoaderData | WebSocketRequestLoaderData | GrpcRequestLoaderData> => {
   const { organizationId, projectId, requestId, workspaceId } = params;
   invariant(requestId, 'Request ID is required');
   invariant(workspaceId, 'Workspace ID is required');
@@ -101,11 +126,13 @@ export const loader: LoaderFunction = async ({ params }): Promise<RequestLoaderD
   const activeResponse = activeRequestMeta.activeResponseId
     ? await models[responseModelName].getById(activeRequestMeta.activeResponseId)
     : await models[responseModelName].getLatestForRequest(requestId, activeWorkspaceMeta.activeEnvironmentId);
-  const allResponses = await models[responseModelName].findByParentId(requestId) as (Response | WebSocketResponse)[];
-  const filteredResponses = allResponses
-    .filter((r: Response | WebSocketResponse) => r.environmentId === activeWorkspaceMeta.activeEnvironmentId);
-  const responses = (filterResponsesByEnv ? filteredResponses : allResponses)
-    .sort((a: BaseModel, b: BaseModel) => (a.created > b.created ? -1 : 1));
+  const allResponses = (await models[responseModelName].findByParentId(requestId)) as (Response | WebSocketResponse)[];
+  const filteredResponses = allResponses.filter(
+    (r: Response | WebSocketResponse) => r.environmentId === activeWorkspaceMeta.activeEnvironmentId,
+  );
+  const responses = (filterResponsesByEnv ? filteredResponses : allResponses).sort((a: BaseModel, b: BaseModel) =>
+    a.created > b.created ? -1 : 1,
+  );
 
   if (activeResponse && 'bodyPath' in activeResponse) {
     // read the body if its smaller than the limit add it to the activeResponse
@@ -120,7 +147,9 @@ export const loader: LoaderFunction = async ({ params }): Promise<RequestLoaderD
 
   // Q(gatzjames): load mock servers here or somewhere else?
   const mockServers = await models.mockServer.findByProjectId(projectId);
-  const mockRoutes = await database.find<MockRoute>(models.mockRoute.type, { parentId: { $in: mockServers.map(s => s._id) } });
+  const mockRoutes = await database.find<MockRoute>(models.mockRoute.type, {
+    parentId: { $in: mockServers.map(s => s._id) },
+  });
   const mockServerAndRoutes = mockServers.map(mockServer => ({
     ...mockServer,
     routes: mockRoutes.filter(route => route.parentId === mockServer._id),
@@ -149,75 +178,86 @@ export const loader: LoaderFunction = async ({ params }): Promise<RequestLoaderD
 export const createRequestAction: ActionFunction = async ({ request, params }) => {
   const { organizationId, projectId, workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
-  const { requestType, parentId, req } = await request.json() as { requestType: CreateRequestType; parentId?: string; req?: Request };
+  const { requestType, parentId, req } = (await request.json()) as {
+    requestType: CreateRequestType;
+    parentId?: string;
+    req?: Request;
+  };
 
   const settings = await models.settings.getOrCreate();
-  const defaultHeaders = settings.disableAppVersionUserAgent ? [] : [{ name: 'User-Agent', value: `insomnia/${version}` }];
+  const defaultHeaders = settings.disableAppVersionUserAgent
+    ? []
+    : [{ name: 'User-Agent', value: `insomnia/${version}` }];
 
   let activeRequestId;
   if (requestType === 'HTTP') {
-    activeRequestId = (await models.request.create({
-      parentId: parentId || workspaceId,
-      method: METHOD_GET,
-      name: 'New Request',
-      headers: defaultHeaders,
-    }))._id;
+    activeRequestId = (
+      await models.request.create({
+        parentId: parentId || workspaceId,
+        method: METHOD_GET,
+        name: 'New Request',
+        headers: defaultHeaders,
+      })
+    )._id;
   }
   if (requestType === 'gRPC') {
-    activeRequestId = (await models.grpcRequest.create({
-      parentId: parentId || workspaceId,
-      name: 'New Request',
-    }))._id;
+    activeRequestId = (
+      await models.grpcRequest.create({
+        parentId: parentId || workspaceId,
+        name: 'New Request',
+      })
+    )._id;
   }
   if (requestType === 'GraphQL') {
-
-    activeRequestId = (await models.request.create({
-      parentId: parentId || workspaceId,
-      method: METHOD_POST,
-      headers: [
-        ...defaultHeaders,
-        { name: 'Content-Type', value: CONTENT_TYPE_JSON },
-      ],
-      body: {
-        mimeType: CONTENT_TYPE_GRAPHQL,
-        text: '',
-      },
-      name: 'New Request',
-    }))._id;
+    activeRequestId = (
+      await models.request.create({
+        parentId: parentId || workspaceId,
+        method: METHOD_POST,
+        headers: [...defaultHeaders, { name: 'Content-Type', value: CONTENT_TYPE_JSON }],
+        body: {
+          mimeType: CONTENT_TYPE_GRAPHQL,
+          text: '',
+        },
+        name: 'New Request',
+      })
+    )._id;
   }
   if (requestType === 'Event Stream') {
-    activeRequestId = (await models.request.create({
-      parentId: parentId || workspaceId,
-      method: METHOD_GET,
-      url: '',
-      headers: [
-        ...defaultHeaders,
-        { name: 'Accept', value: CONTENT_TYPE_EVENT_STREAM },
-      ],
-      name: 'New Event Stream',
-    }))._id;
+    activeRequestId = (
+      await models.request.create({
+        parentId: parentId || workspaceId,
+        method: METHOD_GET,
+        url: '',
+        headers: [...defaultHeaders, { name: 'Accept', value: CONTENT_TYPE_EVENT_STREAM }],
+        name: 'New Event Stream',
+      })
+    )._id;
   }
   if (requestType === 'WebSocket') {
-    activeRequestId = (await models.webSocketRequest.create({
-      parentId: parentId || workspaceId,
-      name: 'New WebSocket Request',
-      headers: defaultHeaders,
-    }))._id;
+    activeRequestId = (
+      await models.webSocketRequest.create({
+        parentId: parentId || workspaceId,
+        name: 'New WebSocket Request',
+        headers: defaultHeaders,
+      })
+    )._id;
   }
   if (requestType === 'From Curl') {
     if (!req) {
       return null;
     }
     try {
-      activeRequestId = (await models.request.create({
-        parentId: parentId || workspaceId,
-        url: req.url,
-        method: req.method,
-        headers: req.headers,
-        body: req.body as RequestBody,
-        authentication: req.authentication,
-        parameters: req.parameters as RequestParameter[],
-      }))._id;
+      activeRequestId = (
+        await models.request.create({
+          parentId: parentId || workspaceId,
+          url: req.url,
+          method: req.method,
+          headers: req.headers,
+          body: req.body as RequestBody,
+          authentication: req.authentication,
+          parameters: req.parameters as RequestParameter[],
+        })
+      )._id;
     } catch (error) {
       console.error(error);
       return null;
@@ -228,7 +268,9 @@ export const createRequestAction: ActionFunction = async ({ request, params }) =
   window.main.trackSegmentEvent({ event: SegmentEvent.requestCreate, properties: { requestType } });
 
   // add a created query param to the URL to indicate that the request was just created, this is for distinguishing if we will create a temporary or permanent tab
-  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequestId}?created=true`);
+  return redirect(
+    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${activeRequestId}?created=true`,
+  );
 };
 export const updateRequestAction: ActionFunction = async ({ request, params }) => {
   const { requestId } = params;
@@ -305,13 +347,15 @@ export const duplicateRequestAction: ActionFunction = async ({ request, params }
   const newRequest = await requestOperations.duplicate(req, { name });
   invariant(newRequest, 'Failed to duplicate request');
   models.stats.incrementCreatedRequests();
-  return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${newRequest._id}`);
+  return redirect(
+    `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${newRequest._id}`,
+  );
 };
 
 export const updateRequestMetaAction: ActionFunction = async ({ request, params }) => {
   const { requestId } = params;
   invariant(typeof requestId === 'string', 'Request ID is required');
-  const patch = await request.json() as Partial<RequestMeta | GrpcRequestMeta>;
+  const patch = (await request.json()) as Partial<RequestMeta | GrpcRequestMeta>;
   if (isGrpcRequestId(requestId)) {
     await models.grpcRequestMeta.updateOrCreateByParentId(requestId, patch);
     return null;
@@ -332,7 +376,7 @@ export const connectAction: ActionFunction = async ({ request, params }) => {
   const req = await requestOperations.getById(requestId);
   invariant(req, 'Request not found');
   invariant(workspaceId, 'Workspace ID is required');
-  const rendered = await request.json() as ConnectActionParams;
+  const rendered = (await request.json()) as ConnectActionParams;
 
   if (isWebSocketRequestId(requestId)) {
     window.main.webSocket.open({
@@ -393,7 +437,12 @@ export const connectAction: ActionFunction = async ({ request, params }) => {
     });
   });
 };
-const writeToDownloadPath = (downloadPathAndName: string, responsePatch: ResponsePatch, requestMeta: RequestMeta, maxHistoryResponses: number) => {
+const writeToDownloadPath = (
+  downloadPathAndName: string,
+  responsePatch: ResponsePatch,
+  requestMeta: RequestMeta,
+  maxHistoryResponses: number,
+) => {
   invariant(downloadPathAndName, 'filename should be set by now');
 
   const to = createWriteStream(downloadPathAndName);
@@ -433,7 +482,7 @@ export const sendAction: ActionFunction = async ({ request, params }) => {
   const { requestId, workspaceId } = params;
   invariant(typeof requestId === 'string', 'Request ID is required');
   invariant(workspaceId, 'Workspace ID is required');
-  const { shouldPromptForPathAfterResponse, ignoreUndefinedEnvVariable } = await request.json() as SendActionParams;
+  const { shouldPromptForPathAfterResponse, ignoreUndefinedEnvVariable } = (await request.json()) as SendActionParams;
 
   try {
     return await sendActionImplementation({
@@ -455,7 +504,7 @@ export const sendAction: ActionFunction = async ({ request, params }) => {
       }
       // this part is for persisting useful info (e.g. timeline) for debugging, even there is an error
       const existingResponse = await models.response.getById(err.response._id);
-      const response = existingResponse || await models.response.create(err.response, err.maxHistoryResponses);
+      const response = existingResponse || (await models.response.create(err.response, err.maxHistoryResponses));
       await models.requestMeta.update(err.requestMeta, { activeResponseId: response._id });
     } else {
       // if the error is not from response, we need to set it to url param and show it in modal
@@ -535,7 +584,14 @@ export const sendActionImplementation = async (options: {
   };
 
   window.main.addExecutionStep({ requestId, stepName: 'Executing pre-request script' });
-  const mutatedContext = await tryToExecutePreRequestScript(requestData, transientVariables, userUploadEnvironment, iteration, iterationCount, runtime);
+  const mutatedContext = await tryToExecutePreRequestScript(
+    requestData,
+    transientVariables,
+    userUploadEnvironment,
+    iteration,
+    iterationCount,
+    runtime,
+  );
   if ('error' in mutatedContext) {
     throw {
       // create response with error info, so that we can store response in db and show it in response viewer
@@ -572,7 +628,9 @@ export const sendActionImplementation = async (options: {
 
   // disable after-response script here to avoiding rendering it
   // @TODO This should be handled in a better way. Maybe remove the key from the request object we pass in tryToInterpolateRequest
-  const afterResponseScript = mutatedContext.request.afterResponseScript ? `${mutatedContext.request.afterResponseScript}` : undefined;
+  const afterResponseScript = mutatedContext.request.afterResponseScript
+    ? `${mutatedContext.request.afterResponseScript}`
+    : undefined;
   mutatedContext.request.afterResponseScript = '';
 
   window.main.addExecutionStep({ requestId, stepName: 'Rendering request' });
@@ -607,15 +665,29 @@ export const sendActionImplementation = async (options: {
   window.main.completeExecutionStep({ requestId });
   if ('error' in response) {
     throw {
-      response: await responseTransform(response, requestData.activeEnvironmentId, renderedRequest, renderedResult.context),
+      response: await responseTransform(
+        response,
+        requestData.activeEnvironmentId,
+        renderedRequest,
+        renderedResult.context,
+      ),
       maxHistoryResponses: requestData.settings.maxHistoryResponses,
       requestMeta,
       error: response.error,
     };
   }
 
-  const baseResponsePatch = await responseTransform(response, requestData.activeEnvironmentId, renderedRequest, renderedResult.context);
-  const is2XXWithBodyPath = baseResponsePatch.statusCode && baseResponsePatch.statusCode >= 200 && baseResponsePatch.statusCode < 300 && baseResponsePatch.bodyPath;
+  const baseResponsePatch = await responseTransform(
+    response,
+    requestData.activeEnvironmentId,
+    renderedRequest,
+    renderedResult.context,
+  );
+  const is2XXWithBodyPath =
+    baseResponsePatch.statusCode &&
+    baseResponsePatch.statusCode >= 200 &&
+    baseResponsePatch.statusCode < 300 &&
+    baseResponsePatch.bodyPath;
   const shouldWriteToFile = shouldPromptForPathAfterResponse && is2XXWithBodyPath;
 
   mutatedContext.request.afterResponseScript = afterResponseScript;
@@ -631,7 +703,12 @@ export const sendActionImplementation = async (options: {
   });
   if ('error' in postMutatedContext) {
     throw {
-      response: await responseTransform(response, requestData.activeEnvironmentId, renderedRequest, renderedResult.context),
+      response: await responseTransform(
+        response,
+        requestData.activeEnvironmentId,
+        renderedRequest,
+        renderedResult.context,
+      ),
       maxHistoryResponses: requestData.settings.maxHistoryResponses,
       requestMeta,
       error: postMutatedContext.error,
@@ -643,30 +720,24 @@ export const sendActionImplementation = async (options: {
   const preTestResults = (mutatedContext.requestTestResults || []).map(
     (result: RequestTestResult): RequestTestResult => ({ ...result, category: 'pre-request' }),
   );
-  const postTestResults = (postMutatedContext?.requestTestResults || []).map(
-    (result: RequestTestResult): RequestTestResult => ({ ...result, category: 'after-response' }),
-  ) || [];
+  const postTestResults =
+    (postMutatedContext?.requestTestResults || []).map(
+      (result: RequestTestResult): RequestTestResult => ({ ...result, category: 'after-response' }),
+    ) || [];
   if (testResultCollector) {
-    testResultCollector.results = [
-      ...testResultCollector.results,
-      ...preTestResults,
-      ...postTestResults,
-    ];
+    testResultCollector.results = [...testResultCollector.results, ...preTestResults, ...postTestResults];
     const timingSteps = await window.main.getExecution({ requestId });
     testResultCollector.duration = timingSteps.reduce((acc: number, cur: TimingStep) => {
       return acc + (cur.duration || 0);
     }, 0);
     testResultCollector.responseId = response._id;
   }
-  const responsePatch = postMutatedContext ?
-    {
-      ...baseResponsePatch,
-      // both pre-request and after-response test results are collected
-      requestTestResults: [
-        ...preTestResults,
-        ...postTestResults,
-      ],
-    }
+  const responsePatch = postMutatedContext
+    ? {
+        ...baseResponsePatch,
+        // both pre-request and after-response test results are collected
+        requestTestResults: [...preTestResults, ...postTestResults],
+      }
     : baseResponsePatch;
 
   if (!shouldWriteToFile) {
@@ -679,8 +750,13 @@ export const sendActionImplementation = async (options: {
     const header = getContentDispositionHeader(responsePatch.headers || []);
     const name = header
       ? contentDisposition.parse(header.value).parameters.filename
-      : `${requestData.request.name.replace(/\s/g, '-').toLowerCase()}.${responsePatch.contentType && mimeExtension(responsePatch.contentType) || 'unknown'}`;
-    return writeToDownloadPath(path.join(requestMeta.downloadPath, name), responsePatch, requestMeta, requestData.settings.maxHistoryResponses);
+      : `${requestData.request.name.replace(/\s/g, '-').toLowerCase()}.${(responsePatch.contentType && mimeExtension(responsePatch.contentType)) || 'unknown'}`;
+    return writeToDownloadPath(
+      path.join(requestMeta.downloadPath, name),
+      responsePatch,
+      requestMeta,
+      requestData.settings.maxHistoryResponses,
+    );
   }
   const defaultPath = window.localStorage.getItem('insomnia.sendAndDownloadLocation');
   const { filePath } = await window.dialog.showSaveDialog({
@@ -694,11 +770,10 @@ export const sendActionImplementation = async (options: {
   }
   window.localStorage.setItem('insomnia.sendAndDownloadLocation', filePath);
   return writeToDownloadPath(filePath, responsePatch, requestMeta, requestData.settings.maxHistoryResponses);
-
 };
 
 export const createAndSendToMockbinAction: ActionFunction = async ({ request }) => {
-  const patch = await request.json() as Partial<Request>;
+  const patch = (await request.json()) as Partial<Request>;
   invariant(typeof patch.url === 'string', 'URL is required');
   invariant(typeof patch.method === 'string', 'method is required');
   invariant(typeof patch.parentId === 'string', 'mock route ID is required');
@@ -710,21 +785,13 @@ export const createAndSendToMockbinAction: ActionFunction = async ({ request })
   invariant(testRequest, 'mock route is missing a testing request');
   const req = await models.request.update(testRequest, patch);
 
-  const {
-    environment,
-    settings,
-    clientCertificates,
-    caCert,
-    activeEnvironmentId,
-    timelinePath,
-    responseId,
-  } = await fetchRequestData(req._id);
+  const { environment, settings, clientCertificates, caCert, activeEnvironmentId, timelinePath, responseId } =
+    await fetchRequestData(req._id);
   window.main.startExecution({ requestId: req._id });
   window.main.addExecutionStep({
     requestId: req._id,
     stepName: 'Rendering request',
-  }
-  );
+  });
 
   const renderResult = await tryToInterpolateRequest({ request: req, environment: environment._id, purpose: 'send' });
   const renderedRequest = await tryToTransformRequestWithPlugins(renderResult);
diff --git a/packages/insomnia/src/ui/routes/root.tsx b/packages/insomnia/src/ui/routes/root.tsx
index a3da7a660e..2bfd52874e 100644
--- a/packages/insomnia/src/ui/routes/root.tsx
+++ b/packages/insomnia/src/ui/routes/root.tsx
@@ -17,11 +17,7 @@ import { showError, showModal } from '../components/modals';
 import { AlertModal } from '../components/modals/alert-modal';
 import { AskModal } from '../components/modals/ask-modal';
 import { ImportModal } from '../components/modals/import-modal';
-import {
-  SettingsModal,
-  TAB_INDEX_PLUGINS,
-  TAB_INDEX_THEMES,
-} from '../components/modals/settings-modal';
+import { SettingsModal, TAB_INDEX_PLUGINS, TAB_INDEX_THEMES } from '../components/modals/settings-modal';
 import { AppHooks } from '../containers/app-hooks';
 import { AIProvider } from '../context/app/ai-context';
 import { NunjucksEnabledProvider } from '../context/nunjucks/nunjucks-enabled-context';
@@ -60,156 +56,151 @@ const Root = () => {
   const navigate = useNavigate();
 
   useEffect(() => {
-    return window.main.on(
-      'shell:open',
-      async (_: IpcRendererEvent, url: string) => {
-        // Get the url without params
-        let parsedUrl;
-        try {
-          parsedUrl = new URL(url);
-        } catch (err) {
-          console.log('[deep-link] Invalid args, expected insomnia://x/y/z', url);
-          return;
+    return window.main.on('shell:open', async (_: IpcRendererEvent, url: string) => {
+      // Get the url without params
+      let parsedUrl;
+      try {
+        parsedUrl = new URL(url);
+      } catch (err) {
+        console.log('[deep-link] Invalid args, expected insomnia://x/y/z', url);
+        return;
+      }
+      let urlWithoutParams = url.substring(0, url.indexOf('?')) || url;
+      const params = Object.fromEntries(parsedUrl.searchParams);
+      // Change protocol for dev redirects to match switch case
+      if (isDevelopment()) {
+        urlWithoutParams = urlWithoutParams.replace('insomniadev://', 'insomnia://');
+      }
+      if (urlWithoutParams === 'insomnia://app/alert') {
+        return showModal(AlertModal, {
+          title: params.title,
+          message: params.message,
+        });
+      }
+      if (urlWithoutParams === 'insomnia://app/auth/login') {
+        if (params.message) {
+          window.localStorage.setItem('logoutMessage', params.message);
         }
-        let urlWithoutParams = url.substring(0, url.indexOf('?')) || url;
-        const params = Object.fromEntries(parsedUrl.searchParams);
-        // Change protocol for dev redirects to match switch case
-        if (isDevelopment()) {
-          urlWithoutParams = urlWithoutParams.replace(
-            'insomniadev://',
-            'insomnia://',
-          );
-        }
-        if (urlWithoutParams === 'insomnia://app/alert') {
-          return showModal(AlertModal, {
-            title: params.title,
-            message: params.message,
-          });
-        }
-        if (urlWithoutParams === 'insomnia://app/auth/login') {
-          if (params.message) {
-            window.localStorage.setItem('logoutMessage', params.message);
-          }
-          return actionFetcher.submit(
-            {},
-            {
-              action: '/auth/logout',
-              method: 'POST',
-            },
-          );
-        }
-        if (urlWithoutParams === 'insomnia://app/import') {
-          return setImportUri(params.uri);
-        }
-        if (urlWithoutParams === 'insomnia://plugins/install') {
-          return showModal(AskModal, {
-            title: 'Plugin Install',
-            message: (
-              <>
-                Do you want to install <code>{params.name}</code>?
-              </>
-            ),
-            yesText: 'Install',
-            noText: 'Cancel',
-            onDone: async (isYes: boolean) => {
-              if (isYes) {
-                try {
-                  await window.main.installPlugin(params.name);
-                  showModal(SettingsModal, { tab: TAB_INDEX_PLUGINS });
-                } catch (err) {
-                  showError({
-                    title: 'Plugin Install',
-                    message: 'Failed to install plugin',
-                    error: err.message,
-                  });
-                }
-              }
-            },
-          });
-        }
-        if (urlWithoutParams === 'insomnia://plugins/theme') {
-          const parsedTheme = JSON.parse(decodeURIComponent(params.theme));
-          showModal(AskModal, {
-            title: 'Install Theme',
-            message: (
-              <>
-                Do you want to install <code>{parsedTheme.displayName}</code>?
-              </>
-            ),
-            yesText: 'Install',
-            noText: 'Cancel',
-            onDone: async (isYes: boolean) => {
-              if (isYes) {
-                const mainJsContent = `module.exports.themes = [${JSON.stringify(
-                  parsedTheme,
-                  null,
-                  2,
-                )}];`;
-                await createPlugin(
-                  `theme-${parsedTheme.name}`,
-                  '0.0.1',
-                  mainJsContent,
-                );
-                const settings = await models.settings.get();
-                await models.settings.update(settings, {
-                  theme: parsedTheme.name,
+        return actionFetcher.submit(
+          {},
+          {
+            action: '/auth/logout',
+            method: 'POST',
+          },
+        );
+      }
+      if (urlWithoutParams === 'insomnia://app/import') {
+        return setImportUri(params.uri);
+      }
+      if (urlWithoutParams === 'insomnia://plugins/install') {
+        return showModal(AskModal, {
+          title: 'Plugin Install',
+          message: (
+            <>
+              Do you want to install <code>{params.name}</code>?
+            </>
+          ),
+          yesText: 'Install',
+          noText: 'Cancel',
+          onDone: async (isYes: boolean) => {
+            if (isYes) {
+              try {
+                await window.main.installPlugin(params.name);
+                showModal(SettingsModal, { tab: TAB_INDEX_PLUGINS });
+              } catch (err) {
+                showError({
+                  title: 'Plugin Install',
+                  message: 'Failed to install plugin',
+                  error: err.message,
                 });
-                await reloadPlugins();
-                await setTheme(parsedTheme.name);
-                showModal(SettingsModal, { tab: TAB_INDEX_THEMES });
               }
-            },
-          });
-        }
-        if (urlWithoutParams === 'insomnia://oauth/github/authenticate' || urlWithoutParams === 'insomnia://oauth/github-app/authenticate') {
-          const { code, state } = params;
-          return actionFetcher.submit({
+            }
+          },
+        });
+      }
+      if (urlWithoutParams === 'insomnia://plugins/theme') {
+        const parsedTheme = JSON.parse(decodeURIComponent(params.theme));
+        showModal(AskModal, {
+          title: 'Install Theme',
+          message: (
+            <>
+              Do you want to install <code>{parsedTheme.displayName}</code>?
+            </>
+          ),
+          yesText: 'Install',
+          noText: 'Cancel',
+          onDone: async (isYes: boolean) => {
+            if (isYes) {
+              const mainJsContent = `module.exports.themes = [${JSON.stringify(parsedTheme, null, 2)}];`;
+              await createPlugin(`theme-${parsedTheme.name}`, '0.0.1', mainJsContent);
+              const settings = await models.settings.get();
+              await models.settings.update(settings, {
+                theme: parsedTheme.name,
+              });
+              await reloadPlugins();
+              await setTheme(parsedTheme.name);
+              showModal(SettingsModal, { tab: TAB_INDEX_THEMES });
+            }
+          },
+        });
+      }
+      if (
+        urlWithoutParams === 'insomnia://oauth/github/authenticate' ||
+        urlWithoutParams === 'insomnia://oauth/github-app/authenticate'
+      ) {
+        const { code, state } = params;
+        return actionFetcher.submit(
+          {
             code,
             state,
-          }, {
+          },
+          {
             action: '/git-credentials/github/complete-sign-in',
             method: 'POST',
             encType: 'application/json',
-          });
-        }
-        if (urlWithoutParams === 'insomnia://oauth/gitlab/authenticate') {
-          const { code, state } = params;
-          return actionFetcher.submit({
+          },
+        );
+      }
+      if (urlWithoutParams === 'insomnia://oauth/gitlab/authenticate') {
+        const { code, state } = params;
+        return actionFetcher.submit(
+          {
             code,
             state,
-          }, {
+          },
+          {
             action: '/git-credentials/gitlab/complete-sign-in',
             method: 'POST',
             encType: 'application/json',
-          });
+          },
+        );
+      }
+      if (urlWithoutParams === 'insomnia://app/auth/finish') {
+        return actionFetcher.submit(
+          {
+            code: params.box,
+          },
+          {
+            action: '/auth/authorize',
+            method: 'POST',
+            encType: 'application/json',
+          },
+        );
+      }
+      if (urlWithoutParams === 'insomnia://app/open/organization') {
+        // if user is logged out, navigate to authorize instead
+        // gracefully handle open org in app from browser
+        const userSession = await models.userSession.getOrCreate();
+        if (!userSession.id || userSession.id === '') {
+          const url = new URL(getLoginUrl());
+          window.main.openInBrowser(url.toString());
+          window.localStorage.setItem('specificOrgRedirectAfterAuthorize', params.organizationId);
+          return navigate('/auth/authorize');
         }
-        if (urlWithoutParams === 'insomnia://app/auth/finish') {
-          return actionFetcher.submit(
-            {
-              code: params.box,
-            },
-            {
-              action: '/auth/authorize',
-              method: 'POST',
-              encType: 'application/json',
-            },
-          );
-        }
-        if (urlWithoutParams === 'insomnia://app/open/organization') {
-          // if user is logged out, navigate to authorize instead
-          // gracefully handle open org in app from browser
-          const userSession = await models.userSession.getOrCreate();
-          if (!userSession.id || userSession.id === '') {
-            const url = new URL(getLoginUrl());
-            window.main.openInBrowser(url.toString());
-            window.localStorage.setItem('specificOrgRedirectAfterAuthorize', params.organizationId);
-            return navigate('/auth/authorize');
-          }
-          return navigate(`/organization/${params.organizationId}`);
-        }
-        console.log(`Unknown deep link: ${url}`);
-      },
-    );
+        return navigate(`/organization/${params.organizationId}`);
+      }
+      console.log(`Unknown deep link: ${url}`);
+    });
   }, [actionFetcher, navigate]);
 
   return (
diff --git a/packages/insomnia/src/ui/routes/runner.tsx b/packages/insomnia/src/ui/routes/runner.tsx
index d1af2cd383..d7803f47c0 100644
--- a/packages/insomnia/src/ui/routes/runner.tsx
+++ b/packages/insomnia/src/ui/routes/runner.tsx
@@ -1,8 +1,32 @@
 import porderedJSON from 'json-order';
 import React, { type FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Checkbox, DropIndicator, GridList, GridListItem, type GridListItemProps, Heading, type Key, Tab, TabList, TabPanel, Tabs, Toolbar, TooltipTrigger, useDragAndDrop } from 'react-aria-components';
+import {
+  Button,
+  Checkbox,
+  DropIndicator,
+  GridList,
+  GridListItem,
+  type GridListItemProps,
+  Heading,
+  type Key,
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs,
+  Toolbar,
+  TooltipTrigger,
+  useDragAndDrop,
+} from 'react-aria-components';
 import { Panel, PanelResizeHandle } from 'react-resizable-panels';
-import { type ActionFunction, type LoaderFunction, useNavigate, useParams, useRouteLoaderData, useSearchParams, useSubmit } from 'react-router-dom';
+import {
+  type ActionFunction,
+  type LoaderFunction,
+  useNavigate,
+  useParams,
+  useRouteLoaderData,
+  useSearchParams,
+  useSubmit,
+} from 'react-router-dom';
 import { useInterval } from 'react-use';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -34,11 +58,18 @@ import { ResponseTimelineViewer } from '../components/viewers/response-timeline-
 import { useRunnerContext } from '../context/app/runner-context';
 import { useRunnerRequestList } from '../hooks/use-runner-request-list';
 import type { OrganizationLoaderData } from './organization';
-import { type CollectionRunnerContext, defaultSendActionRuntime, type RunnerSource, sendActionImplementation } from './request';
+import {
+  type CollectionRunnerContext,
+  defaultSendActionRuntime,
+  type RunnerSource,
+  sendActionImplementation,
+} from './request';
 import { useRootLoaderData } from './root';
 
-const inputStyle = 'placeholder:italic py-0.5 mr-1.5 px-1 w-24 rounded-sm border-2 border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors';
-const iterationInputStyle = 'placeholder:italic py-0.5 mr-1.5 px-1 w-16 rounded-sm border-2 border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors';
+const inputStyle =
+  'placeholder:italic py-0.5 mr-1.5 px-1 w-24 rounded-sm border-2 border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors';
+const iterationInputStyle =
+  'placeholder:italic py-0.5 mr-1.5 px-1 w-16 rounded-sm border-2 border-solid border-[--hl-sm] bg-[--color-bg] text-[--color-font] focus:outline-none focus:ring-1 focus:ring-[--hl-md] transition-colors';
 
 // TODO: improve the performance for a lot of logs
 async function aggregateAllTimelines(errorMsg: string | null, testResult: RunnerTestResult) {
@@ -134,10 +165,20 @@ export const Runner: FC<{}> = () => {
   const { settings } = useRootLoaderData();
   const [showUploadModal, setShowUploadModal] = useState(false);
   const [showCLIModal, setShowCLIModal] = useState(false);
-  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
+  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
+    settings.forceVerticalLayout ? 'vertical' : 'horizontal',
+  );
 
   const { runnerStateMap, updateRunnerState } = useRunnerContext();
-  const { iterationCount = 1, delay = 0, selectedKeys = new Set<Key>(), advancedConfig = defaultAdvancedConfig, uploadData = [], file, filePath } = runnerStateMap?.[organizationId]?.[runnerId] || {};
+  const {
+    iterationCount = 1,
+    delay = 0,
+    selectedKeys = new Set<Key>(),
+    advancedConfig = defaultAdvancedConfig,
+    uploadData = [],
+    file,
+    filePath,
+  } = runnerStateMap?.[organizationId]?.[runnerId] || {};
   invariant(iterationCount, 'iterationCount should not be null');
 
   const { reqList, requestRows, entityMap } = useRunnerRequestList(organizationId, targetFolderId, runnerId);
@@ -145,7 +186,7 @@ export const Runner: FC<{}> = () => {
   useEffect(() => {
     if (settings.forceVerticalLayout) {
       setDirection('vertical');
-      return () => { };
+      return () => {};
     }
     // Listen on media query changes
     const mediaQuery = window.matchMedia('(max-width: 880px)');
@@ -160,7 +201,6 @@ export const Runner: FC<{}> = () => {
     return () => {
       mediaQuery.removeEventListener('change', handleChange);
     };
-
   }, [settings.forceVerticalLayout, direction]);
 
   const isConsistencyChanged = useMemo(() => {
@@ -194,8 +234,12 @@ export const Runner: FC<{}> = () => {
     },
     renderDragPreview(items) {
       return (
-        <div className="bg-slate-800 px-2 py-0.5 rounded" >
-          <mark className="text-lg px-2 text-extrabold bg-green-400 rounded dark:bg-green-400" style={{ color: 'black' }}>{` ${items.length}`}</mark> item(s)
+        <div className="rounded bg-slate-800 px-2 py-0.5">
+          <mark
+            className="text-extrabold rounded bg-green-400 px-2 text-lg dark:bg-green-400"
+            style={{ color: 'black' }}
+          >{` ${items.length}`}</mark>{' '}
+          item(s)
         </div>
       );
     },
@@ -224,11 +268,12 @@ export const Runner: FC<{}> = () => {
     }
     setIsRunning(true);
 
-    window.main.trackSegmentEvent({ event: SegmentEvent.collectionRunExecute, properties: { plan: currentPlan?.type || 'scratchpad', iterations: iterationCount } });
+    window.main.trackSegmentEvent({
+      event: SegmentEvent.collectionRunExecute,
+      properties: { plan: currentPlan?.type || 'scratchpad', iterations: iterationCount },
+    });
 
-    const requests = selectedKeys === 'all'
-      ? reqList
-      : reqList.filter(item => (selectedKeys as Set<Key>).has(item.id));
+    const requests = selectedKeys === 'all' ? reqList : reqList.filter(item => (selectedKeys as Set<Key>).has(item.id));
 
     // convert uploadData to environment data
     const userUploadEnvs = uploadData.map(data => {
@@ -252,20 +297,19 @@ export const Runner: FC<{}> = () => {
       keepLog: advancedConfig?.keepLog,
       targetFolderId: targetFolderId || '',
     };
-    submit(
-      JSON.stringify(actionInput),
-      {
-        method: 'post',
-        encType: 'application/json',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner/run`,
-        navigate: false,
-      }
-    );
+    submit(JSON.stringify(actionInput), {
+      method: 'post',
+      encType: 'application/json',
+      action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/runner/run`,
+      navigate: false,
+    });
   };
 
   const navigate = useNavigate();
   const goToRequest = (requestId: string) => {
-    navigate(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}`);
+    navigate(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/debug/request/${requestId}`,
+    );
   };
   const onToggleSelection = () => {
     if (selectedKeys === 'all' || Array.from(selectedKeys).length === Array.from(reqList).length) {
@@ -281,7 +325,7 @@ export const Runner: FC<{}> = () => {
   const [testHistory, setTestHistory] = useState<RunnerTestResult[]>([]);
   useEffect(() => {
     const readResults = async () => {
-      const results = await models.runnerTestResult.findByParentId(runnerId) || [];
+      const results = (await models.runnerTestResult.findByParentId(runnerId)) || [];
       setTestHistory(results.reverse());
     };
     readResults();
@@ -295,12 +339,15 @@ export const Runner: FC<{}> = () => {
 
   const [executionResult, setExecutionResult] = useState<RunnerTestResult | null>(null);
   const [timelines, setTimelines] = useState<ResponseTimelineEntry[]>([]);
-  const gotoExecutionResult = useCallback(async (executionId: string) => {
-    const result = await models.runnerTestResult.getById(executionId);
-    if (result) {
-      setExecutionResult(result);
-    }
-  }, [setExecutionResult]);
+  const gotoExecutionResult = useCallback(
+    async (executionId: string) => {
+      const result = await models.runnerTestResult.getById(executionId);
+      if (result) {
+        setExecutionResult(result);
+      }
+    },
+    [setExecutionResult],
+  );
 
   useEffect(() => {
     const refreshTimeline = async () => {
@@ -346,7 +393,7 @@ export const Runner: FC<{}> = () => {
         unit: durationUnit,
       });
     } else {
-      const results = await models.runnerTestResult.findByParentId(runnerId) || [];
+      const results = (await models.runnerTestResult.findByParentId(runnerId)) || [];
       // show execution result
       if (results.length > 0) {
         setTestHistory(results.reverse());
@@ -366,9 +413,12 @@ export const Runner: FC<{}> = () => {
     }
   }, [runnerId]);
 
-  useInterval(() => {
-    refreshPanes();
-  }, isRunning ? 1000 : null);
+  useInterval(
+    () => {
+      refreshPanes();
+    },
+    isRunning ? 1000 : null,
+  );
 
   useEffect(() => {
     refreshPanes();
@@ -393,9 +443,8 @@ export const Runner: FC<{}> = () => {
       }
     }
 
-    const testResultCountTagColor = totalTestCount > 0 ?
-      passedTestCount === totalTestCount ? 'bg-lime-600' : 'bg-red-600' :
-      'bg-[var(--hl-sm)]';
+    const testResultCountTagColor =
+      totalTestCount > 0 ? (passedTestCount === totalTestCount ? 'bg-lime-600' : 'bg-red-600') : 'bg-[var(--hl-sm)]';
 
     return { passedTestCount, totalTestCount, testResultCountTagColor };
   }, [executionResult, isRunning]);
@@ -420,36 +469,35 @@ export const Runner: FC<{}> = () => {
   const selectedRequestIdsForCliCommand =
     targetFolderId !== null && targetFolderId !== ''
       ? reqList
-        .filter(item => item.ancestors.map(a=>a.id).includes(targetFolderId))
-        .map(item => item.id)
-        .filter(id => selectedKeys === 'all' || selectedKeys.has(id))
-      : reqList
-        .map(item => item.id)
-        .filter(id => selectedKeys === 'all' || selectedKeys.has(id));
+          .filter(item => item.ancestors.map(a => a.id).includes(targetFolderId))
+          .map(item => item.id)
+          .filter(id => selectedKeys === 'all' || selectedKeys.has(id))
+      : reqList.map(item => item.id).filter(id => selectedKeys === 'all' || selectedKeys.has(id));
 
   return (
     <>
-      <Panel id="pane-one" className='pane-one theme--pane' minSize={35} maxSize={90}>
+      <Panel id="pane-one" className="pane-one theme--pane" minSize={35} maxSize={90}>
         <ErrorBoundary showAlert>
-
           <Pane type="request">
             <PaneHeader>
-              <Heading className="flex items-center w-full h-[--line-height-sm] pl-[--padding-md]">
-                <div className="w-full h-full text-left overflow-hidden">
+              <Heading className="flex h-[--line-height-sm] w-full items-center pl-[--padding-md]">
+                <div className="h-full w-full overflow-hidden text-left">
                   <div className="h-full min-w-[500px]">
                     <span className="mr-6 text-sm">
                       <input
                         value={iterationCount}
-                        name='Iterations'
+                        name="Iterations"
                         disabled={isRunning}
                         onChange={e => {
                           try {
                             if (parseInt(e.target.value, 10) > 0) {
-                              updateRunnerState(organizationId, runnerId, { iterationCount: parseInt(e.target.value, 10) });
+                              updateRunnerState(organizationId, runnerId, {
+                                iterationCount: parseInt(e.target.value, 10),
+                              });
                             }
-                          } catch (ex) { }
+                          } catch (ex) {}
                         }}
-                        type='number'
+                        type="number"
                         className={iterationInputStyle}
                       />
                       <span className="border">Iterations</span>
@@ -458,33 +506,33 @@ export const Runner: FC<{}> = () => {
                       <input
                         value={delay}
                         disabled={isRunning}
-                        name='Delay'
+                        name="Delay"
                         onChange={e => {
                           try {
                             const delay = parseInt(e.target.value, 10);
                             if (delay >= 0) {
                               updateRunnerState(organizationId, runnerId, { delay }); // also update the temp settings
                             }
-                          } catch (ex) { }
+                          } catch (ex) {}
                         }}
-                        type='number'
+                        type="number"
                         className={inputStyle}
                       />
                       <span className="mr-1 border">Delay (ms)</span>
                     </span>
                     <Button
                       onPress={() => setShowUploadModal(true)}
-                      className="py-0.5 px-1 border-[--hl-sm] h-full aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] ring-1 ring-transparent transition-all text-sm mr-6"
+                      className="mr-6 h-full rounded-sm border-[--hl-sm] px-1 py-0.5 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] aria-pressed:bg-[--hl-sm]"
                       isDisabled={isRunning}
                     >
                       <Icon icon={file ? 'eye' : 'upload'} /> {file ? 'View Data' : 'Upload Data'}
                     </Button>
                   </div>
                 </div>
-                <div className='flex p-1 self-stretch'>
+                <div className="flex self-stretch p-1">
                   <Button
                     isDisabled={isDisabled}
-                    className="px-5 ml-1 text-[--color-font-surprise] bg-[--color-surprise] hover:bg-opacity-90 focus:bg-opacity-90 rounded-l-sm"
+                    className="ml-1 rounded-l-sm bg-[--color-surprise] px-5 text-[--color-font-surprise] hover:bg-opacity-90 focus:bg-opacity-90"
                     onPress={onRun}
                   >
                     Run
@@ -498,7 +546,7 @@ export const Runner: FC<{}> = () => {
                     triggerButton={
                       <Button
                         isDisabled={isDisabled}
-                        className="px-1 bg-[--color-surprise] text-[--color-font-surprise] rounded-r-sm"
+                        className="rounded-r-sm bg-[--color-surprise] px-1 text-[--color-font-surprise]"
                         style={{
                           borderTopRightRadius: '0.125rem',
                           borderBottomRightRadius: '0.125rem',
@@ -508,51 +556,57 @@ export const Runner: FC<{}> = () => {
                       </Button>
                     }
                   >
-
                     <DropdownItem aria-label="send-now">
                       <ItemContent icon="arrow-circle-o-right" label="Run" onClick={onRun} />
                     </DropdownItem>
-                    <DropdownItem aria-label='Run via CLI'>
-                      <ItemContent
-                        icon="code"
-                        label="Run via CLI"
-                        onClick={() => setShowCLIModal(true)}
-                      />
+                    <DropdownItem aria-label="Run via CLI">
+                      <ItemContent icon="code" label="Run via CLI" onClick={() => setShowCLIModal(true)} />
                     </DropdownItem>
                   </Dropdown>
                 </div>
               </Heading>
             </PaneHeader>
-            <Tabs aria-label='Request group tabs' className="flex-1 w-full h-full flex flex-col">
-              <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+            <Tabs aria-label="Request group tabs" className="flex h-full w-full flex-1 flex-col">
+              <TabList
+                className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+                aria-label="Request pane tabs"
+              >
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='request-order'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="request-order"
                 >
-                  <i className="fa fa-sort fa-1x h-4 mr-2" />
+                  <i className="fa fa-sort fa-1x mr-2 h-4" />
                   Request Order
                 </Tab>
                 <Tab
-                  className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-                  id='advanced'
+                  className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+                  id="advanced"
                 >
-                  <i className="fa fa-gear fa-1x h-4 mr-2" />
+                  <i className="fa fa-gear fa-1x mr-2 h-4" />
                   Advanced
                 </Tab>
               </TabList>
-              <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='request-order'>
-                <Toolbar className="w-full flex-shrink-0 h-[--line-height-sm] border-b border-solid border-[--hl-md] flex items-center px-2">
+              <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="request-order">
+                <Toolbar className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center border-b border-solid border-[--hl-md] px-2">
                   <span className="mr-2">
-                    {
-                      (selectedKeys === 'all' || Array.from(selectedKeys).length === Array.from(reqList).length) ?
-                        <span onClick={onToggleSelection}><i style={{ color: 'rgb(74 222 128)' }} className="fa fa-square-check fa-1x h-4 mr-2" /> <span className="cursor-pointer" >Unselect All</span></span> :
-                        Array.from(selectedKeys).length === 0 ?
-                          <span onClick={onToggleSelection}><i className="fa fa-square fa-1x h-4 mr-2" /> <span className="cursor-pointer" >Select All</span></span> :
-                          <span onClick={onToggleSelection}><i style={{ color: 'rgb(74 222 128)' }} className="fa fa-square-minus fa-1x h-4 mr-2" /> <span className="cursor-pointer" >Select All</span></span>
-                    }
+                    {selectedKeys === 'all' || Array.from(selectedKeys).length === Array.from(reqList).length ? (
+                      <span onClick={onToggleSelection}>
+                        <i style={{ color: 'rgb(74 222 128)' }} className="fa fa-square-check fa-1x mr-2 h-4" />{' '}
+                        <span className="cursor-pointer">Unselect All</span>
+                      </span>
+                    ) : Array.from(selectedKeys).length === 0 ? (
+                      <span onClick={onToggleSelection}>
+                        <i className="fa fa-square fa-1x mr-2 h-4" /> <span className="cursor-pointer">Select All</span>
+                      </span>
+                    ) : (
+                      <span onClick={onToggleSelection}>
+                        <i style={{ color: 'rgb(74 222 128)' }} className="fa fa-square-minus fa-1x mr-2 h-4" />{' '}
+                        <span className="cursor-pointer">Select All</span>
+                      </span>
+                    )}
                   </span>
                 </Toolbar>
-                <PaneBody placeholder className='p-0'>
+                <PaneBody placeholder className="p-0">
                   <GridList
                     id="runner-request-list"
                     items={reqList}
@@ -563,49 +617,58 @@ export const Runner: FC<{}> = () => {
                     }}
                     aria-label="Request Collection"
                     dragAndDropHooks={requestsDnD}
-                    className="w-full h-full leading-8 text-base overflow-auto"
+                    className="h-full w-full overflow-auto text-base leading-8"
                     disabledKeys={disabledKeys}
                   >
                     {item => {
-                      const parentFolders = item.ancestors.map(({id,name}) => {
-                        return <TooltipTrigger key={`parent-folder-${id}=${name}`} >
-                          <Tooltip message={name}>
-                            <i className="fa fa-folder fa-1x h-4 mr-0.3 text-[--color-font]" />
-                            <i className="fa fa-caret-right fa-1x h-4 mr-0.3 text-[--color-font]-50  opacity-50" />
-                          </Tooltip>
-                        </TooltipTrigger>;
+                      const parentFolders = item.ancestors.map(({ id, name }) => {
+                        return (
+                          <TooltipTrigger key={`parent-folder-${id}=${name}`}>
+                            <Tooltip message={name}>
+                              <i className="fa fa-folder fa-1x mr-0.3 h-4 text-[--color-font]" />
+                              <i className="fa fa-caret-right fa-1x mr-0.3 text-[--color-font]-50 h-4 opacity-50" />
+                            </Tooltip>
+                          </TooltipTrigger>
+                        );
                       });
-                      const parentFolderContainer = parentFolders.length > 0 ? <span className="ml-2">{parentFolders}</span> : null;
+                      const parentFolderContainer =
+                        parentFolders.length > 0 ? <span className="ml-2">{parentFolders}</span> : null;
 
                       return (
-                        <RequestItem textValue={item.name} className={`runner-request-list-${item.name} text-[--color-font] border border-solid border-transparent`} style={{ 'outline': 'none' }}>
+                        <RequestItem
+                          textValue={item.name}
+                          className={`runner-request-list-${item.name} border border-solid border-transparent text-[--color-font]`}
+                          style={{ outline: 'none' }}
+                        >
                           {parentFolderContainer}
-                          <span className={`ml-2 uppercase text-xs http-method-${item.method}`}>{item.method}</span>
-                          <span className="ml-2 hover:underline cursor-pointer text-[--hl]" onClick={() => goToRequest(item.id)}>{item.name}</span>
+                          <span className={`ml-2 text-xs uppercase http-method-${item.method}`}>{item.method}</span>
+                          <span
+                            className="ml-2 cursor-pointer text-[--hl] hover:underline"
+                            onClick={() => goToRequest(item.id)}
+                          >
+                            {item.name}
+                          </span>
                         </RequestItem>
                       );
                     }}
                   </GridList>
                 </PaneBody>
               </TabPanel>
-              <TabPanel className='w-full flex-1 flex align-center overflow-y-auto' id='advanced'>
-                <div className="p-4 w-full">
+              <TabPanel className="align-center flex w-full flex-1 overflow-y-auto" id="advanced">
+                <div className="w-full p-4">
                   <div>
                     <label className="flex items-center gap-2">
-                      <input
-                        name='persist-response'
-                        onChange={() => { }}
-                        type="checkbox"
-                        disabled={true}
-                      />
+                      <input name="persist-response" onChange={() => {}} type="checkbox" disabled={true} />
                       Persist responses for a session
-                      <HelpTooltip className="space-left">Enabling this will impact performance while responses are saved for other purposes.</HelpTooltip>
+                      <HelpTooltip className="space-left">
+                        Enabling this will impact performance while responses are saved for other purposes.
+                      </HelpTooltip>
                     </label>
                   </div>
                   <div>
                     <label className="flex items-center gap-2">
                       <input
-                        name='enable-log'
+                        name="enable-log"
                         onChange={() => {
                           updateRunnerState(organizationId, runnerId, {
                             advancedConfig: {
@@ -619,13 +682,15 @@ export const Runner: FC<{}> = () => {
                         checked={advancedConfig?.keepLog}
                       />
                       Keep logs after run
-                      <HelpTooltip className="space-left">Disabling this will improve the performance while logs are not saved.</HelpTooltip>
+                      <HelpTooltip className="space-left">
+                        Disabling this will improve the performance while logs are not saved.
+                      </HelpTooltip>
                     </label>
                   </div>
                   <div>
                     <label className="flex items-center gap-2">
                       <input
-                        name='bail'
+                        name="bail"
                         onChange={() => {
                           updateRunnerState(organizationId, runnerId, {
                             advancedConfig: {
@@ -674,31 +739,39 @@ export const Runner: FC<{}> = () => {
           </Pane>
         </ErrorBoundary>
       </Panel>
-      <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
-      <Panel id="pane-two" className='pane-two theme--pane'>
+      <PanelResizeHandle
+        className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'h-[1px] w-full bg-[--hl-md]'}
+      />
+      <Panel id="pane-two" className="pane-two theme--pane">
         <PaneHeader className="row-spaced">
-          <Heading className="flex items-center w-full h-[--line-height-sm] pl-3 border-solid border-b border-b-[--hl-md]">
-            {
-              executionResult?.duration ?
-                <div className="bg-info tag" >
-                  <strong>{`${totalTime.duration} ${totalTime.unit}`}</strong>
-                </div> :
-                <span className="font-bold">Collection Runner</span>
-            }
+          <Heading className="flex h-[--line-height-sm] w-full items-center border-b border-solid border-b-[--hl-md] pl-3">
+            {executionResult?.duration ? (
+              <div className="bg-info tag">
+                <strong>{`${totalTime.duration} ${totalTime.unit}`}</strong>
+              </div>
+            ) : (
+              <span className="font-bold">Collection Runner</span>
+            )}
           </Heading>
         </PaneHeader>
-        <Tabs selectedKey={selectedTab} onSelectionChange={setSelectedTab} aria-label='Request group tabs' className="flex-1 w-full h-full flex flex-col">
-          <TabList className='w-full flex-shrink-0  overflow-x-auto border-solid border-b border-b-[--hl-md] bg-[--color-bg] flex items-center h-[--line-height-sm]' aria-label='Request pane tabs'>
+        <Tabs
+          selectedKey={selectedTab}
+          onSelectionChange={setSelectedTab}
+          aria-label="Request group tabs"
+          className="flex h-full w-full flex-1 flex-col"
+        >
+          <TabList
+            className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center overflow-x-auto border-b border-solid border-b-[--hl-md] bg-[--color-bg]"
+            aria-label="Request pane tabs"
+          >
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='test-results'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="test-results"
             >
               <div>
-                <span>
-                  Tests
-                </span>
+                <span>Tests</span>
                 <span
-                  className={`test-result-count rounded-sm ml-1 px-1 ${testResultCountTagColor}`}
+                  className={`test-result-count ml-1 rounded-sm px-1 ${testResultCountTagColor}`}
                   style={{ color: 'white' }}
                 >
                   {`${passedTestCount} / ${totalTestCount}`}
@@ -706,25 +779,22 @@ export const Runner: FC<{}> = () => {
               </div>
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='history'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="history"
             >
               History
             </Tab>
             <Tab
-              className='flex-shrink-0 h-full flex items-center justify-between cursor-pointer gap-2 outline-none select-none px-3 py-1 text-[--hl] aria-selected:text-[--color-font]  hover:bg-[--hl-sm] hover:text-[--color-font] aria-selected:bg-[--hl-xs] aria-selected:focus:bg-[--hl-sm] aria-selected:hover:bg-[--hl-sm] focus:bg-[--hl-sm] transition-colors duration-300'
-              id='console'
+              className="flex h-full flex-shrink-0 cursor-pointer select-none items-center justify-between gap-2 px-3 py-1 text-[--hl] outline-none transition-colors duration-300 hover:bg-[--hl-sm] hover:text-[--color-font] focus:bg-[--hl-sm] aria-selected:bg-[--hl-xs] aria-selected:text-[--color-font] aria-selected:hover:bg-[--hl-sm] aria-selected:focus:bg-[--hl-sm]"
+              id="console"
             >
               Console
             </Tab>
           </TabList>
-          <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='console'>
-            <ResponseTimelineViewer
-              key={runnerId}
-              timeline={timelines}
-            />
+          <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="console">
+            <ResponseTimelineViewer key={runnerId} timeline={timelines} />
           </TabPanel>
-          <TabPanel className='w-full flex-1 flex flex-col overflow-hidden' id='history'>
+          <TabPanel className="flex w-full flex-1 flex-col overflow-hidden" id="history">
             <RunnerResultHistoryPane
               history={testHistory.filter(item => !deletedItems.includes(item._id))}
               gotoExecutionResult={gotoExecutionResult}
@@ -732,23 +802,23 @@ export const Runner: FC<{}> = () => {
               deleteHistoryItem={deleteHistoryItem}
             />
           </TabPanel>
-          <TabPanel
-            className='w-full flex-1 flex flex-col overflow-y-auto'
-            id='test-results'
-          >
-            {isRunning &&
-              <div className="h-full w-full text-md flex items-center">
+          <TabPanel className="flex w-full flex-1 flex-col overflow-y-auto" id="test-results">
+            {isRunning && (
+              <div className="text-md flex h-full w-full items-center">
                 <ResponseTimer
                   handleCancel={() => cancelExecution(runnerId)}
                   activeRequestId={runnerId}
                   steps={timingSteps}
                 />
               </div>
-            }
-            {!isRunning && <ErrorBoundary showAlert><RunnerTestResultPane result={executionResult} /></ErrorBoundary>}
+            )}
+            {!isRunning && (
+              <ErrorBoundary showAlert>
+                <RunnerTestResultPane result={executionResult} />
+              </ErrorBoundary>
+            )}
           </TabPanel>
         </Tabs>
-
       </Panel>
     </>
   );
@@ -756,25 +826,25 @@ export const Runner: FC<{}> = () => {
 
 export default Runner;
 
-const RequestItem = (
-  { children, ...props }: GridListItemProps
-) => {
-
+const RequestItem = ({ children, ...props }: GridListItemProps) => {
   return (
     <GridListItem {...props}>
       {() => (
         <>
           <Button slot="drag" className="hover:cursor-grab">
-            <Icon icon="grip-vertical" className='w-2 text-[--hl] mr-2' />
+            <Icon icon="grip-vertical" className="mr-2 w-2 text-[--hl]" />
           </Button>
           <Checkbox slot="selection">
             {({ isSelected }) => {
-              return <>
-                {isSelected ?
-                  <i className="fa fa-square-check fa-1x h-4 mr-2" style={{ color: 'rgb(74 222 128)' }} /> :
-                  <i className="fa fa-square fa-1x h-4 mr-2" />
-                }
-              </>;
+              return (
+                <>
+                  {isSelected ? (
+                    <i className="fa fa-square-check fa-1x mr-2 h-4" style={{ color: 'rgb(74 222 128)' }} />
+                  ) : (
+                    <i className="fa fa-square fa-1x mr-2 h-4" />
+                  )}
+                </>
+              );
             }}
           </Checkbox>
           {children}
@@ -817,7 +887,10 @@ function cancelExecution(workspaceId: string) {
     window.main.completeExecutionStep({ requestId: workspaceId });
   }
 }
-const wrapAroundIterationOverIterationData = (list?: UserUploadEnvironment[], currentIteration?: number): UserUploadEnvironment | undefined => {
+const wrapAroundIterationOverIterationData = (
+  list?: UserUploadEnvironment[],
+  currentIteration?: number,
+): UserUploadEnvironment | undefined => {
   if (currentIteration === undefined || !Array.isArray(list) || list.length === 0) {
     return undefined;
   }
@@ -843,7 +916,8 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
   invariant(projectId, 'Project id is required');
   invariant(workspaceId, 'Workspace id is required');
 
-  const { requests, iterationCount, delay, userUploadEnvs, bail, targetFolderId, keepLog } = await request.json() as runCollectionActionParams;
+  const { requests, iterationCount, delay, userUploadEnvs, bail, targetFolderId, keepLog } =
+    (await request.json()) as runCollectionActionParams;
   const source: RunnerSource = 'runner';
   const runnerId = targetFolderId ? targetFolderId : workspaceId;
 
@@ -878,8 +952,7 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
   startExecution(runnerId);
 
   const noLogRuntime = {
-
-    appendTimeline: async (_timelinePath: string, _logs: string[]) => { }, // no op
+    appendTimeline: async (_timelinePath: string, _logs: string[]) => {}, // no op
   };
 
   try {
@@ -937,15 +1010,14 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
             stepName: `Iteration ${i + 1} - Executing ${j + 1} of ${requests.length} requests - "${targetRequest.name}"`,
           });
 
-          const activeRequestMeta = await models.requestMeta.updateOrCreateByParentId(
-            targetRequest.id,
-            { lastActive: Date.now() },
-          );
+          const activeRequestMeta = await models.requestMeta.updateOrCreateByParentId(targetRequest.id, {
+            lastActive: Date.now(),
+          });
           invariant(activeRequestMeta, 'Request meta not found');
 
           await new Promise(resolve => setTimeout(resolve, delay));
 
-          const mutatedContext = await sendActionImplementation({
+          const mutatedContext = (await sendActionImplementation({
             requestId: targetRequest.id,
             iteration: i + 1,
             iterationCount,
@@ -955,7 +1027,7 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
             testResultCollector: resultCollector,
             runtime,
             transientVariables: testCtx.transientVariables,
-          }) as RequestContext | null;
+          })) as RequestContext | null;
           if (mutatedContext?.execution?.nextRequestIdOrName) {
             nextRequestIdOrName = mutatedContext.execution.nextRequestIdOrName || '';
           }
@@ -980,7 +1052,6 @@ export const runCollectionAction: ActionFunction = async ({ request, params }) =
               },
             ],
           };
-
         } catch (e) {
           const requestResults: RunnerResultPerRequest = {
             requestName: targetRequest.name,
diff --git a/packages/insomnia/src/ui/routes/test-results.tsx b/packages/insomnia/src/ui/routes/test-results.tsx
index 84304507d5..736148e032 100644
--- a/packages/insomnia/src/ui/routes/test-results.tsx
+++ b/packages/insomnia/src/ui/routes/test-results.tsx
@@ -21,15 +21,15 @@ export const indexLoader: LoaderFunction = async ({ params }) => {
 
   const testResult = await models.unitTestResult.getLatestByParentId(workspaceId);
   if (testResult) {
-    return redirect(`/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`);
+    return redirect(
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${testSuiteId}/test-result/${testResult._id}`,
+    );
   }
 
   return null;
 };
 
-export const loader: LoaderFunction = async ({
-  params,
-}): Promise<TestResultsData> => {
+export const loader: LoaderFunction = async ({ params }): Promise<TestResultsData> => {
   const { testResultId } = params;
   invariant(testResultId, 'Test Result ID is required');
   const testResult = await database.getWhere<UnitTestResult>(models.unitTestResult.type, {
@@ -50,46 +50,37 @@ export const TestRunStatus: FC = () => {
   const { stats, tests } = testResult.results;
 
   return (
-    <div
-      key={testResult._id}
-      className="w-full flex-1 flex flex-col h-full divide-solid divide-y divide-[--hl-md]"
-    >
+    <div key={testResult._id} className="flex h-full w-full flex-1 flex-col divide-y divide-solid divide-[--hl-md]">
       <Heading
-        className={`text-lg flex-shrink-0 flex items-center gap-2 w-full h-[--line-height-sm] p-[--padding-md] ${
-          stats.failures > 0
-            ? 'text-[--color-danger]'
-            : 'text-[--color-success]'
+        className={`flex h-[--line-height-sm] w-full flex-shrink-0 items-center gap-2 p-[--padding-md] text-lg ${
+          stats.failures > 0 ? 'text-[--color-danger]' : 'text-[--color-success]'
         }`}
       >
-        <Icon
-          icon={stats.failures > 0 ? 'exclamation-triangle' : 'check-square'}
-        />
-        <span className="truncate">
-          {stats.failures > 0 ? 'Tests failed' : 'Tests passed'}{' '}
-        </span>
+        <Icon icon={stats.failures > 0 ? 'exclamation-triangle' : 'check-square'} />
+        <span className="truncate">{stats.failures > 0 ? 'Tests failed' : 'Tests passed'} </span>
         {stats.failures > 0 ? stats.failures : stats.passes}/{stats.tests}
       </Heading>
       <div
-        className="w-full flex-1 overflow-y-auto divide-solid divide-y divide-[--hl-md] flex flex-col"
+        className="flex w-full flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto"
         aria-label="Test results"
       >
         {tests.map((test, i) => {
           const errorMessage = 'message' in test.err ? test.err.message : '';
           return (
             <div key={test.id || i} className="flex flex-col">
-              <div className="flex gap-2 p-[--padding-sm] items-center">
+              <div className="flex items-center gap-2 p-[--padding-sm]">
                 <div className="flex flex-shrink-0">
                   <span
-                    className={`w-20 flex-shrink-0 flex rounded-sm border border-solid border-current ${
-                      errorMessage
-                        ? 'text-[--color-danger]'
-                        : 'text-[--color-success]'
-                      } items-center justify-center`}
+                    className={`flex w-20 flex-shrink-0 rounded-sm border border-solid border-current ${
+                      errorMessage ? 'text-[--color-danger]' : 'text-[--color-success]'
+                    } items-center justify-center`}
                   >
                     {errorMessage ? 'Failed' : 'Passed'}
                   </span>
                 </div>
-                <div className="flex-1 truncate" title={test.title}>{test.title}</div>
+                <div className="flex-1 truncate" title={test.title}>
+                  {test.title}
+                </div>
                 <div className="flex flex-shrink-0">{test.duration} ms</div>
               </div>
               {errorMessage && (
diff --git a/packages/insomnia/src/ui/routes/test-suite.tsx b/packages/insomnia/src/ui/routes/test-suite.tsx
index 5510872d64..28a683c99d 100644
--- a/packages/insomnia/src/ui/routes/test-suite.tsx
+++ b/packages/insomnia/src/ui/routes/test-suite.tsx
@@ -12,13 +12,7 @@ import {
   SelectValue,
   useDragAndDrop,
 } from 'react-aria-components';
-import {
-  type LoaderFunction,
-  redirect,
-  useFetcher,
-  useParams,
-  useRouteLoaderData,
-} from 'react-router-dom';
+import { type LoaderFunction, redirect, useFetcher, useParams, useRouteLoaderData } from 'react-router-dom';
 
 import { database } from '../../common/database';
 import { documentationLinks } from '../../common/documentation';
@@ -29,31 +23,21 @@ import type { UnitTest } from '../../models/unit-test';
 import type { UnitTestSuite } from '../../models/unit-test-suite';
 import { isWebSocketRequest } from '../../models/websocket-request';
 import { invariant } from '../../utils/invariant';
-import {
-  CodeEditor,
-  type CodeEditorHandle,
-} from '../components/codemirror/code-editor';
+import { CodeEditor, type CodeEditorHandle } from '../components/codemirror/code-editor';
 import { EditableInput } from '../components/editable-input';
 import { Icon } from '../components/icon';
 import { showModal } from '../components/modals';
 import { AskModal } from '../components/modals/ask-modal';
 import { getMethodShortHand } from '../components/tags/method-tag';
 
-const UnitTestItemView = ({
-  unitTest,
-}: {
-  unitTest: UnitTest;
-  testsRunning: boolean;
-}) => {
+const UnitTestItemView = ({ unitTest }: { unitTest: UnitTest; testsRunning: boolean }) => {
   const editorRef = useRef<CodeEditorHandle>(null);
   const { projectId, workspaceId, organizationId } = useParams() as {
     workspaceId: string;
     projectId: string;
     organizationId: string;
   };
-  const { unitTestSuite, requests } = useRouteLoaderData(
-    ':testSuiteId'
-  ) as LoaderData;
+  const { unitTestSuite, requests } = useRouteLoaderData(':testSuiteId') as LoaderData;
 
   const deleteUnitTestFetcher = useFetcher();
   const runTestFetcher = useFetcher();
@@ -79,17 +63,17 @@ const UnitTestItemView = ({
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="p-[--padding-sm] flex-shrink-0 overflow-hidden">
-      <div className="flex items-center gap-2 w-full" title={unitTest.name}>
+    <div className="flex-shrink-0 overflow-hidden p-[--padding-sm]">
+      <div className="flex w-full items-center gap-2" title={unitTest.name}>
         <Button
-          className="flex flex-shrink-0 flex-nowrap items-center justify-center aspect-square h-8 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="flex aspect-square h-8 flex-shrink-0 flex-nowrap items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() => setIsOpen(!isOpen)}
         >
           <Icon icon={isOpen ? 'chevron-down' : 'chevron-right'} />
         </Button>
         <Heading className="flex-1 truncate">
           <EditableInput
-            className='w-full px-1'
+            className="w-full px-1"
             onSubmit={name => {
               if (name) {
                 updateUnitTestFetcher.submit(
@@ -100,7 +84,7 @@ const UnitTestItemView = ({
                     action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/${unitTest._id}/update`,
                     method: 'POST',
                     encType: 'application/json',
-                  }
+                  },
                 );
               }
             }}
@@ -119,13 +103,16 @@ const UnitTestItemView = ({
                 action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/${unitTest._id}/update`,
                 method: 'post',
                 encType: 'application/json',
-              }
+              },
             );
           }}
           selectedKey={unitTest.requestId}
         >
-          <Button aria-label='Select a request' className="px-4 py-1 flex flex-1 h-8 items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm">
-            <SelectValue<Request> className="flex truncate items-center justify-center gap-2">
+          <Button
+            aria-label="Select a request"
+            className="flex h-8 flex-1 items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
+          >
+            <SelectValue<Request> className="flex items-center justify-center gap-2 truncate">
               {({ isPlaceholder, selectedItem: request }) => {
                 if (isPlaceholder || !request) {
                   return <span>Select a request</span>;
@@ -135,29 +122,28 @@ const UnitTestItemView = ({
                   <Fragment>
                     {isRequest(request) && (
                       <span
-                        className={
-                          `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-                              ${{
-                            'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-                            'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-                            'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                            'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                            'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-                            'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-                            'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-                          }[request.method] || 'text-[--color-font] bg-[--hl-md]'}`
-                        }
+                        className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+                          {
+                            GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                            POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                            HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                            OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                            DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                            PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                            PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+                          }[request.method] || 'bg-[--hl-md] text-[--color-font]'
+                        }`}
                       >
                         {getMethodShortHand(request)}
                       </span>
                     )}
                     {isWebSocketRequest(request) && (
-                      <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
+                      <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]">
                         WS
                       </span>
                     )}
                     {isGrpcRequest(request) && (
-                      <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
+                      <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]">
                         gRPC
                       </span>
                     )}
@@ -168,18 +154,18 @@ const UnitTestItemView = ({
             </SelectValue>
             <Icon icon="caret-down" />
           </Button>
-          <Popover className="min-w-max overflow-y-hidden flex flex-col">
+          <Popover className="flex min-w-max flex-col overflow-y-hidden">
             <ListBox
               items={requests.map(request => ({
                 ...request,
                 id: request._id,
                 key: request._id,
               }))}
-              className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+              className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
             >
               {request => (
                 <ListBoxItem
-                  className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                  className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                   aria-label={request.name}
                   textValue={request.name}
                   value={request}
@@ -188,39 +174,33 @@ const UnitTestItemView = ({
                     <Fragment>
                       {isRequest(request) && (
                         <span
-                          className={
-                            `w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center
-                            ${{
-                              'GET': 'text-[--color-font-surprise] bg-[rgba(var(--color-surprise-rgb),0.5)]',
-                              'POST': 'text-[--color-font-success] bg-[rgba(var(--color-success-rgb),0.5)]',
-                              'HEAD': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                              'OPTIONS': 'text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]',
-                              'DELETE': 'text-[--color-font-danger] bg-[rgba(var(--color-danger-rgb),0.5)]',
-                              'PUT': 'text-[--color-font-warning] bg-[rgba(var(--color-warning-rgb),0.5)]',
-                              'PATCH': 'text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]',
-                            }[request.method] || 'text-[--color-font] bg-[--hl-md]'}`
-                          }
+                          className={`flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] text-[0.65rem] ${
+                            {
+                              GET: 'bg-[rgba(var(--color-surprise-rgb),0.5)] text-[--color-font-surprise]',
+                              POST: 'bg-[rgba(var(--color-success-rgb),0.5)] text-[--color-font-success]',
+                              HEAD: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                              OPTIONS: 'bg-[rgba(var(--color-info-rgb),0.5)] text-[--color-font-info]',
+                              DELETE: 'bg-[rgba(var(--color-danger-rgb),0.5)] text-[--color-font-danger]',
+                              PUT: 'bg-[rgba(var(--color-warning-rgb),0.5)] text-[--color-font-warning]',
+                              PATCH: 'bg-[rgba(var(--color-notice-rgb),0.5)] text-[--color-font-notice]',
+                            }[request.method] || 'bg-[--hl-md] text-[--color-font]'
+                          }`}
                         >
                           {getMethodShortHand(request)}
                         </span>
                       )}
                       {isWebSocketRequest(request) && (
-                        <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-notice] bg-[rgba(var(--color-notice-rgb),0.5)]">
+                        <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-notice-rgb),0.5)] text-[0.65rem] text-[--color-font-notice]">
                           WS
                         </span>
                       )}
                       {isGrpcRequest(request) && (
-                        <span className="w-10 flex-shrink-0 flex text-[0.65rem] rounded-sm border border-solid border-[--hl-sm] items-center justify-center text-[--color-font-info] bg-[rgba(var(--color-info-rgb),0.5)]">
+                        <span className="flex w-10 flex-shrink-0 items-center justify-center rounded-sm border border-solid border-[--hl-sm] bg-[rgba(var(--color-info-rgb),0.5)] text-[0.65rem] text-[--color-font-info]">
                           gRPC
                         </span>
                       )}
                       <span>{request.name || request.url || 'Untitled request'}</span>
-                      {isSelected && (
-                        <Icon
-                          icon="check"
-                          className="text-[--color-success] justify-self-end"
-                        />
-                      )}
+                      {isSelected && <Icon icon="check" className="justify-self-end text-[--color-success]" />}
                     </Fragment>
                   )}
                 </ListBoxItem>
@@ -229,7 +209,7 @@ const UnitTestItemView = ({
           </Popover>
         </Select>
         <Button
-          className="flex flex-shrink-0 items-center justify-center aspect-square h-8 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="flex aspect-square h-8 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() => {
             showModal(AskModal, {
               title: 'Delete Test',
@@ -244,7 +224,7 @@ const UnitTestItemView = ({
                     {
                       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/${unitTest._id}/delete`,
                       method: 'POST',
-                    }
+                    },
                   );
                 }
               },
@@ -254,14 +234,14 @@ const UnitTestItemView = ({
           <Icon icon="trash" />
         </Button>
         <Button
-          className="flex flex-shrink-0 items-center justify-center aspect-square h-8 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="flex aspect-square h-8 flex-shrink-0 items-center justify-center rounded-sm text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() => {
             runTestFetcher.submit(
               {},
               {
                 action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/${unitTest._id}/run`,
                 method: 'post',
-              }
+              },
             );
           }}
         >
@@ -281,9 +261,7 @@ const UnitTestItemView = ({
               .split('const ')
               .filter(x => x)
               .map(x => x.split(' ')[0]);
-            const numbers = variables
-              .map(x => parseInt(x.match(/(\d+)/)?.[0] || ''))
-              ?.filter(x => !isNaN(x));
+            const numbers = variables.map(x => parseInt(x.match(/(\d+)/)?.[0] || ''))?.filter(x => !isNaN(x));
             const highestNumberedConstant = Math.max(...numbers);
             const variableName = 'response' + (highestNumberedConstant + 1);
             return [
@@ -291,8 +269,7 @@ const UnitTestItemView = ({
                 name: 'Send: Current request',
                 displayValue: '',
                 value:
-                  `const ${variableName} = await insomnia.send();\n` +
-                  `expect(${variableName}.status).to.equal(200);`,
+                  `const ${variableName} = await insomnia.send();\n` + `expect(${variableName}.status).to.equal(200);`,
               },
               ...requests.map(({ name, _id }) => ({
                 name: `Send: ${name}`,
@@ -313,7 +290,7 @@ const UnitTestItemView = ({
                 action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/${unitTest._id}/update`,
                 method: 'post',
                 encType: 'application/json',
-              }
+              },
             )
           }
           mode="javascript"
@@ -332,13 +309,11 @@ export const indexLoader: LoaderFunction = async ({ params }) => {
 
   const workspaceMeta = await models.workspaceMeta.getByParentId(workspaceId);
   if (workspaceMeta?.activeUnitTestSuiteId) {
-    const unitTestSuite = await models.unitTestSuite.getById(
-      workspaceMeta.activeUnitTestSuiteId
-    );
+    const unitTestSuite = await models.unitTestSuite.getById(workspaceMeta.activeUnitTestSuiteId);
 
     if (unitTestSuite) {
       return redirect(
-        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}`
+        `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}`,
       );
     }
   }
@@ -346,7 +321,7 @@ export const indexLoader: LoaderFunction = async ({ params }) => {
   const unitTestSuites = await models.unitTestSuite.findByParentId(workspaceId);
   if (unitTestSuites.length > 0) {
     return redirect(
-      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuites[0]._id}`
+      `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuites[0]._id}`,
     );
   }
   return null;
@@ -357,9 +332,7 @@ interface LoaderData {
   unitTestSuite: UnitTestSuite;
   requests: Request[];
 }
-export const loader: LoaderFunction = async ({
-  params,
-}): Promise<LoaderData> => {
+export const loader: LoaderFunction = async ({ params }): Promise<LoaderData> => {
   const { workspaceId, testSuiteId } = params;
 
   invariant(workspaceId, 'Workspace ID is required');
@@ -367,7 +340,10 @@ export const loader: LoaderFunction = async ({
 
   const workspace = await models.workspace.getById(workspaceId);
   invariant(workspace, 'Workspace not found');
-  const workspaceEntities = await database.withDescendants(workspace, models.request.type, [models.request.type, models.requestGroup.type]);
+  const workspaceEntities = await database.withDescendants(workspace, models.request.type, [
+    models.request.type,
+    models.requestGroup.type,
+  ]);
   const requests: Request[] = workspaceEntities.filter(isRequest);
 
   const unitTestSuite = await database.getWhere<UnitTestSuite>(models.unitTestSuite.type, {
@@ -391,7 +367,7 @@ export const loader: LoaderFunction = async ({
     },
     {
       metaSortKey: 1,
-    }
+    },
   );
 
   return {
@@ -408,9 +384,7 @@ const TestSuiteRoute = () => {
     workspaceId: string;
     testSuiteId: string;
   };
-  const { unitTestSuite, unitTests } = useRouteLoaderData(
-    ':testSuiteId'
-  ) as LoaderData;
+  const { unitTestSuite, unitTests } = useRouteLoaderData(':testSuiteId') as LoaderData;
 
   const createUnitTestFetcher = useFetcher();
   const runAllTestsFetcher = useFetcher();
@@ -419,12 +393,13 @@ const TestSuiteRoute = () => {
 
   const testsRunning = runAllTestsFetcher.state === 'submitting';
 
-  const optimisticUpdateTestSuiteName = updateTestSuiteFetcher.json && typeof updateTestSuiteFetcher.json === 'object' &&
-    'name' in updateTestSuiteFetcher.json && updateTestSuiteFetcher.json?.name?.toString();
+  const optimisticUpdateTestSuiteName =
+    updateTestSuiteFetcher.json &&
+    typeof updateTestSuiteFetcher.json === 'object' &&
+    'name' in updateTestSuiteFetcher.json &&
+    updateTestSuiteFetcher.json?.name?.toString();
 
-  const testSuiteName =
-    optimisticUpdateTestSuiteName ||
-    unitTestSuite.name;
+  const testSuiteName = optimisticUpdateTestSuiteName || unitTestSuite.name;
 
   const unitTestsDragAndDrop = useDragAndDrop({
     getItems: keys => [...keys].map(key => ({ 'text/plain': key.toString() })),
@@ -462,25 +437,23 @@ const TestSuiteRoute = () => {
           action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/${sourceTest._id}/update`,
           method: 'POST',
           encType: 'application/json',
-        }
+        },
       );
     },
     renderDropIndicator(target) {
-      return (
-        <DropIndicator
-          target={target}
-          className="outline-[--color-surprise] outline-1 outline !border-none"
-        />
-      );
+      return <DropIndicator target={target} className="!border-none outline outline-1 outline-[--color-surprise]" />;
     },
   });
 
   return (
-    <div className="flex flex-col h-full w-full overflow-hidden divide-solid divide-y divide-[--hl-md]" title={testSuiteName}>
-      <div className="flex h-[--line-height-sm] flex-shrink-0 gap-2 items-center px-[--padding-md]">
-        <Heading className="text-lg flex-shrink-0 flex items-center gap-2 w-full truncate flex-1">
+    <div
+      className="flex h-full w-full flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden"
+      title={testSuiteName}
+    >
+      <div className="flex h-[--line-height-sm] flex-shrink-0 items-center gap-2 px-[--padding-md]">
+        <Heading className="flex w-full flex-1 flex-shrink-0 items-center gap-2 truncate text-lg">
           <EditableInput
-            className='w-full px-1'
+            className="w-full px-1"
             onSubmit={name =>
               name &&
               updateTestSuiteFetcher.submit(
@@ -489,7 +462,7 @@ const TestSuiteRoute = () => {
                   action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/update`,
                   method: 'POST',
                   encType: 'application/json',
-                }
+                },
               )
             }
             value={testSuiteName}
@@ -497,7 +470,7 @@ const TestSuiteRoute = () => {
         </Heading>
         <Button
           aria-label="New test"
-          className="px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+          className="flex items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
           onPress={() =>
             createUnitTestFetcher.submit(
               {
@@ -506,7 +479,7 @@ const TestSuiteRoute = () => {
               {
                 method: 'POST',
                 action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/test/new`,
-              }
+              },
             )
           }
         >
@@ -515,14 +488,14 @@ const TestSuiteRoute = () => {
         </Button>
         <Button
           aria-label="Run all tests"
-          className={`px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm ${testsRunning ? 'animate-pulse' : ''}`}
+          className={`flex items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] ${testsRunning ? 'animate-pulse' : ''}`}
           onPress={() => {
             runAllTestsFetcher.submit(
               {},
               {
                 method: 'POST',
                 action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${unitTestSuite._id}/run-all-tests`,
-              }
+              },
             );
           }}
         >
@@ -531,22 +504,20 @@ const TestSuiteRoute = () => {
         </Button>
       </div>
       {unitTests.length === 0 && (
-        <div className="h-full w-full flex-1 overflow-y-auto divide-solid divide-y divide-[--hl-md] p-[--padding-md] flex flex-col items-center gap-2 overflow-hidden text-[--hl-lg]">
-          <Heading className="text-lg p-[--padding-sm] font-bold flex-1 flex items-center flex-col gap-2">
-            <Icon icon="vial" className="flex-1 w-28" />
+        <div className="flex h-full w-full flex-1 flex-col items-center gap-2 divide-y divide-solid divide-[--hl-md] overflow-hidden overflow-y-auto p-[--padding-md] text-[--hl-lg]">
+          <Heading className="flex flex-1 flex-col items-center gap-2 p-[--padding-sm] text-lg font-bold">
+            <Icon icon="vial" className="w-28 flex-1" />
             <span>Add unit tests to verify your API</span>
           </Heading>
-          <div className="flex-1 w-full flex flex-col justify-evenly items-center gap-2 p-[--padding-sm]">
+          <div className="flex w-full flex-1 flex-col items-center justify-evenly gap-2 p-[--padding-sm]">
             <p className="flex items-center gap-2">
               <Icon icon="lightbulb" />
-              <span className="truncate">
-                You can run these tests in CI with Inso CLI
-              </span>
+              <span className="truncate">You can run these tests in CI with Inso CLI</span>
             </p>
             <ul className="flex flex-col gap-2">
               <li>
                 <a
-                  className="font-bold flex items-center gap-2 text-sm hover:text-[--hl] focus:text-[--hl] transition-colors"
+                  className="flex items-center gap-2 text-sm font-bold transition-colors hover:text-[--hl] focus:text-[--hl]"
                   href={documentationLinks.unitTesting.url}
                 >
                   <span className="truncate">Unit testing in Insomnia</span>
@@ -555,7 +526,7 @@ const TestSuiteRoute = () => {
               </li>
               <li>
                 <a
-                  className="font-bold flex items-center gap-2 text-sm hover:text-[--hl] focus:text-[--hl] transition-colors"
+                  className="flex items-center gap-2 text-sm font-bold transition-colors hover:text-[--hl] focus:text-[--hl]"
                   href={documentationLinks.introductionToInsoCLI.url}
                 >
                   <span className="truncate">Introduction to Inso CLI</span>
@@ -568,22 +539,19 @@ const TestSuiteRoute = () => {
       )}
       {unitTests.length > 0 && (
         <GridList
-          aria-label='Unit tests'
+          aria-label="Unit tests"
           dragAndDropHooks={unitTestsDragAndDrop.dragAndDropHooks}
           items={unitTests.map(unitTest => ({
             ...unitTest,
             id: unitTest._id,
             key: unitTest._id,
           }))}
-          className="flex-1 flex flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto"
+          className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-y-auto"
         >
           {unitTest => (
             <GridListItem textValue={unitTest.name} className="outline-none">
               <Button slot="drag" className="hidden" />
-              <UnitTestItemView
-                unitTest={unitTest}
-                testsRunning={testsRunning}
-              />
+              <UnitTestItemView unitTest={unitTest} testsRunning={testsRunning} />
             </GridListItem>
           )}
         </GridList>
diff --git a/packages/insomnia/src/ui/routes/unit-test.tsx b/packages/insomnia/src/ui/routes/unit-test.tsx
index 4d07216432..5b55ae59ee 100644
--- a/packages/insomnia/src/ui/routes/unit-test.tsx
+++ b/packages/insomnia/src/ui/routes/unit-test.tsx
@@ -60,9 +60,7 @@ interface LoaderData {
   unitTestSuites: UnitTestSuite[];
 }
 
-export const loader: LoaderFunction = async ({
-  params,
-}): Promise<LoaderData> => {
+export const loader: LoaderFunction = async ({ params }): Promise<LoaderData> => {
   const { workspaceId } = params;
 
   invariant(workspaceId, 'Workspace ID is required');
@@ -74,7 +72,7 @@ export const loader: LoaderFunction = async ({
     },
     {
       metaSortKey: 1,
-    }
+    },
   );
 
   invariant(unitTestSuites, 'Unit test suites not found');
@@ -87,25 +85,18 @@ export const loader: LoaderFunction = async ({
 const TestRoute: FC = () => {
   const { unitTestSuites } = useLoaderData() as LoaderData;
   const { settings } = useRootLoaderData();
-  const { organizationId, projectId, workspaceId, testSuiteId } =
-    useParams() as {
-      organizationId: string;
-      projectId: string;
-      workspaceId: string;
-      testSuiteId: string;
-    };
+  const { organizationId, projectId, workspaceId, testSuiteId } = useParams() as {
+    organizationId: string;
+    projectId: string;
+    workspaceId: string;
+    testSuiteId: string;
+  };
 
-  const {
-    activeProject,
-    activeWorkspace,
-    activeCookieJar,
-    caCertificate,
-    clientCertificates,
-  } = useRouteLoaderData(':workspaceId') as WorkspaceLoaderData;
+  const { activeProject, activeWorkspace, activeCookieJar, caCertificate, clientCertificates } = useRouteLoaderData(
+    ':workspaceId',
+  ) as WorkspaceLoaderData;
 
-  const { unitTestSuite } = useRouteLoaderData(
-    ':testSuiteId'
-  ) as { unitTestSuite: UnitTestSuite } || {};
+  const { unitTestSuite } = (useRouteLoaderData(':testSuiteId') as { unitTestSuite: UnitTestSuite }) || {};
 
   const [isCookieModalOpen, setIsCookieModalOpen] = useState(false);
   const [isEnvironmentModalOpen, setEnvironmentModalOpen] = useState(false);
@@ -117,11 +108,7 @@ const TestRoute: FC = () => {
   const updateTestSuiteFetcher = useFetcher();
   const runAllTestsFetcher = useFetcher();
   const runningTests = useFetchers()
-    .filter(
-      fetcher =>
-        fetcher.formAction?.includes('run-all-tests') ||
-        fetcher.formAction?.includes('run')
-    )
+    .filter(fetcher => fetcher.formAction?.includes('run-all-tests') || fetcher.formAction?.includes('run'))
     .some(({ state }) => state !== 'idle');
 
   const navigate = useNavigate();
@@ -172,55 +159,56 @@ const TestRoute: FC = () => {
           {
             method: 'POST',
             action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${suiteId}/run-all-tests`,
-          }
+          },
         );
       },
     },
     {
-        id: 'rename',
-        name: 'Rename',
-        icon: 'edit',
-        action: suiteId => {
-          showPrompt({
-            title: 'Rename test suite',
-            defaultValue: unitTestSuites.find(s => s._id === suiteId)?.name,
-            submitName: 'Rename',
-            onComplete: name => {
-              name && updateTestSuiteFetcher.submit(
+      id: 'rename',
+      name: 'Rename',
+      icon: 'edit',
+      action: suiteId => {
+        showPrompt({
+          title: 'Rename test suite',
+          defaultValue: unitTestSuites.find(s => s._id === suiteId)?.name,
+          submitName: 'Rename',
+          onComplete: name => {
+            name &&
+              updateTestSuiteFetcher.submit(
                 { name },
                 {
                   action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${suiteId}/update`,
                   method: 'POST',
                   encType: 'application/json',
-                }
+                },
               );
-            },
-          });
-        },
+          },
+        });
       },
-      {
+    },
+    {
       id: 'delete-suite',
       name: 'Delete suite',
       icon: 'trash',
-        action: (suiteId, suiteName) => {
-          showModal(AskModal, {
-            title: 'Delete suite',
-            message: `Do you really want to delete "${suiteName}"?`,
-            yesText: 'Delete',
-            noText: 'Cancel',
-            color: 'danger',
-            onDone: async (isYes: boolean) => {
-              if (isYes) {
-                deleteUnitTestSuiteFetcher.submit(
-                  {},
-                  {
-                    action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${suiteId}/delete`,
-                    method: 'POST',
-                  }
-                );
-              }
-            },
-          });
+      action: (suiteId, suiteName) => {
+        showModal(AskModal, {
+          title: 'Delete suite',
+          message: `Do you really want to delete "${suiteName}"?`,
+          yesText: 'Delete',
+          noText: 'Cancel',
+          color: 'danger',
+          onDone: async (isYes: boolean) => {
+            if (isYes) {
+              deleteUnitTestSuiteFetcher.submit(
+                {},
+                {
+                  action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${suiteId}/delete`,
+                  method: 'POST',
+                },
+              );
+            }
+          },
+        });
       },
     },
   ];
@@ -254,42 +242,41 @@ const TestRoute: FC = () => {
         }
       }
 
-      updateTestSuiteFetcher.submit({ metaSortKey: sourceTestSuite.metaSortKey }, {
-        method: 'post',
-        action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${sourceTestSuite._id}/update`,
-        encType: 'application/json',
-      });
+      updateTestSuiteFetcher.submit(
+        { metaSortKey: sourceTestSuite.metaSortKey },
+        {
+          method: 'post',
+          action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${sourceTestSuite._id}/update`,
+          encType: 'application/json',
+        },
+      );
     },
     renderDropIndicator(target) {
-      return (
-        <DropIndicator
-          target={target}
-          className="outline-[--color-surprise] outline-1 outline"
-        />
-      );
+      return <DropIndicator target={target} className="outline outline-1 outline-[--color-surprise]" />;
     },
   });
 
-  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(settings.forceVerticalLayout ? 'vertical' : 'horizontal');
+  const [direction, setDirection] = useState<'horizontal' | 'vertical'>(
+    settings.forceVerticalLayout ? 'vertical' : 'horizontal',
+  );
   useLayoutEffect(() => {
     if (settings.forceVerticalLayout) {
       setDirection('vertical');
-      return () => { };
+      return () => {};
     }
-      // Listen on media query changes
-      const mediaQuery = window.matchMedia('(max-width: 880px)');
-      setDirection(mediaQuery.matches ? 'vertical' : 'horizontal');
+    // Listen on media query changes
+    const mediaQuery = window.matchMedia('(max-width: 880px)');
+    setDirection(mediaQuery.matches ? 'vertical' : 'horizontal');
 
-      const handleChange = (e: MediaQueryListEvent) => {
-        setDirection(e.matches ? 'vertical' : 'horizontal');
-      };
+    const handleChange = (e: MediaQueryListEvent) => {
+      setDirection(e.matches ? 'vertical' : 'horizontal');
+    };
 
-      mediaQuery.addEventListener('change', handleChange);
-
-      return () => {
-        mediaQuery.removeEventListener('change', handleChange);
-      };
+    mediaQuery.addEventListener('change', handleChange);
 
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
   }, [settings.forceVerticalLayout, direction]);
 
   useInsomniaTab({
@@ -302,33 +289,44 @@ const TestRoute: FC = () => {
   });
 
   return (
-    <PanelGroup ref={sidebarPanelRef} autoSaveId="insomnia-sidebar" id="wrapper" className='new-sidebar w-full h-full text-[--color-font]' direction='horizontal'>
-      <Panel id="sidebar" className='sidebar theme--sidebar divide-solid divide-y divide-[--hl-md]' defaultSize={DEFAULT_SIDEBAR_SIZE} maxSize={40} minSize={10} collapsible>
+    <PanelGroup
+      ref={sidebarPanelRef}
+      autoSaveId="insomnia-sidebar"
+      id="wrapper"
+      className="new-sidebar h-full w-full text-[--color-font]"
+      direction="horizontal"
+    >
+      <Panel
+        id="sidebar"
+        className="sidebar theme--sidebar divide-y divide-solid divide-[--hl-md]"
+        defaultSize={DEFAULT_SIDEBAR_SIZE}
+        maxSize={40}
+        minSize={10}
+        collapsible
+      >
         <ErrorBoundary showAlert>
-          <div className="flex flex-1 flex-col overflow-hidden divide-solid divide-y divide-[--hl-md]">
-            <div className="flex flex-col items-start divide-solid divide-y divide-[--hl-md]">
-              <Breadcrumbs className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] list-none items-center m-0 gap-2 px-[--padding-sm] font-bold w-full`}>
-                <Breadcrumb className="flex select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+          <div className="flex flex-1 flex-col divide-y divide-solid divide-[--hl-md] overflow-hidden">
+            <div className="flex flex-col items-start divide-y divide-solid divide-[--hl-md]">
+              <Breadcrumbs
+                className={`flex h-[${INSOMNIA_TAB_HEIGHT}px] m-0 w-full list-none items-center gap-2 px-[--padding-sm] font-bold`}
+              >
+                <Breadcrumb className="flex h-full select-none items-center gap-2 text-[--color-font] outline-none data-[focused]:outline-none">
                   <NavLink
                     data-testid="project"
-                    className="px-1 py-1 aspect-square h-7 flex flex-shrink-0 outline-none data-[focused]:outline-none items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                    className="flex aspect-square h-7 flex-shrink-0 items-center justify-center gap-2 rounded-sm px-1 py-1 text-sm text-[--color-font] outline-none ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm] data-[focused]:outline-none"
                     to={`/organization/${organizationId}/project/${activeProject._id}`}
                   >
-                    <Icon className='text-xs' icon="chevron-left" />
+                    <Icon className="text-xs" icon="chevron-left" />
                   </NavLink>
-                  <span aria-hidden role="separator" className='text-[--hl-lg] h-4 outline outline-1' />
+                  <span aria-hidden role="separator" className="h-4 text-[--hl-lg] outline outline-1" />
                 </Breadcrumb>
-                <Breadcrumb className="flex truncate select-none items-center gap-2 text-[--color-font] h-full outline-none data-[focused]:outline-none">
+                <Breadcrumb className="flex h-full select-none items-center gap-2 truncate text-[--color-font] outline-none data-[focused]:outline-none">
                   <WorkspaceDropdown />
                 </Breadcrumb>
               </Breadcrumbs>
-              <DocumentTab
-                organizationId={organizationId}
-                projectId={projectId}
-                workspaceId={workspaceId}
-              />
-              <div className='flex flex-col items-start gap-2 p-[--padding-sm] w-full'>
-                <div className="flex w-full items-center gap-2 justify-between">
+              <DocumentTab organizationId={organizationId} projectId={projectId} workspaceId={workspaceId} />
+              <div className="flex w-full flex-col items-start gap-2 p-[--padding-sm]">
+                <div className="flex w-full items-center justify-between gap-2">
                   <EnvironmentPicker
                     isOpen={isEnvironmentPickerOpen}
                     onOpenChange={setIsEnvironmentPickerOpen}
@@ -337,23 +335,32 @@ const TestRoute: FC = () => {
                 </div>
                 <Button
                   onPress={() => setIsCookieModalOpen(true)}
-                  className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex max-w-full flex-1 items-center justify-center gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 >
-                  <Icon icon="cookie-bite" className='w-5 flex-shrink-0' />
-                  <span className='truncate'>{activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}</span>
+                  <Icon icon="cookie-bite" className="w-5 flex-shrink-0" />
+                  <span className="truncate">
+                    {activeCookieJar.cookies.length === 0 ? 'Add' : 'Manage'} Cookies{' '}
+                    {activeCookieJar.cookies.length > 0 ? `(${activeCookieJar.cookies.length})` : ''}
+                  </span>
                 </Button>
                 <Button
                   onPress={() => setCertificatesModalOpen(true)}
-                  className="px-4 py-1 max-w-full truncate flex-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                  className="flex max-w-full flex-1 items-center justify-center gap-2 truncate rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 >
-                  <Icon icon="file-contract" className='w-5 flex-shrink-0' />
-                  <span className='truncate'>{clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length > 0 ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})` : ''}</span>
+                  <Icon icon="file-contract" className="w-5 flex-shrink-0" />
+                  <span className="truncate">
+                    {clientCertificates.length === 0 || caCertificate ? 'Add' : 'Manage'} Certificates{' '}
+                    {[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined)
+                      .length > 0
+                      ? `(${[...clientCertificates, caCertificate].filter(cert => !cert?.disabled).filter(isNotNullOrUndefined).length})`
+                      : ''}
+                  </span>
                 </Button>
               </div>
             </div>
             <div className="p-[--padding-sm]">
               <Button
-                className="px-4 py-1 flex items-center justify-center gap-2 aria-pressed:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                className="flex items-center justify-center gap-2 rounded-sm px-4 py-1 text-sm text-[--color-font] ring-1 ring-transparent transition-all hover:bg-[--hl-xs] focus:ring-inset focus:ring-[--hl-md] aria-pressed:bg-[--hl-sm]"
                 onPress={() => {
                   createUnitTestSuiteFetcher.submit(
                     {
@@ -362,7 +369,7 @@ const TestRoute: FC = () => {
                     {
                       method: 'post',
                       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/new`,
-                    }
+                    },
                   );
                 }}
               >
@@ -378,7 +385,7 @@ const TestRoute: FC = () => {
                 ...suite,
               }))}
               dragAndDropHooks={testSuitesDragAndDrop.dragAndDropHooks}
-              className="overflow-y-auto flex-1 data-[empty]:py-0 py-[--padding-sm]"
+              className="flex-1 overflow-y-auto py-[--padding-sm] data-[empty]:py-0"
               disallowEmptySelection
               selectedKeys={[testSuiteId]}
               selectionMode="single"
@@ -397,51 +404,53 @@ const TestRoute: FC = () => {
                     key={item._id}
                     id={item._id}
                     textValue={item.name}
-                    className="group outline-none select-none w-full"
+                    className="group w-full select-none outline-none"
                   >
-                    <div className="flex select-none outline-none group-aria-selected:text-[--color-font] relative group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] transition-colors gap-2 px-4 items-center h-[--line-height-xs] w-full overflow-hidden text-[--hl]" title={item.name}>
-                      <span className="group-aria-selected:bg-[--color-surprise] transition-colors top-0 left-0 absolute h-full w-[2px] bg-transparent" />
+                    <div
+                      className="relative flex h-[--line-height-xs] w-full select-none items-center gap-2 overflow-hidden px-4 text-[--hl] outline-none transition-colors group-hover:bg-[--hl-xs] group-focus:bg-[--hl-sm] group-aria-selected:text-[--color-font]"
+                      title={item.name}
+                    >
+                      <span className="absolute left-0 top-0 h-full w-[2px] bg-transparent transition-colors group-aria-selected:bg-[--color-surprise]" />
                       <Button slot="drag" className="hidden" />
                       <EditableInput
                         value={item.name}
                         name="name"
                         ariaLabel="Test suite name"
-                        className='flex-1 px-1 hover:!bg-transparent'
+                        className="flex-1 px-1 hover:!bg-transparent"
                         onSubmit={name => {
-                          name && updateTestSuiteFetcher.submit(
-                            { name },
-                            {
-                              action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${item._id}/update`,
-                              method: 'POST',
-                              encType: 'application/json',
-                            }
-                          );
+                          name &&
+                            updateTestSuiteFetcher.submit(
+                              { name },
+                              {
+                                action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/test/test-suite/${item._id}/update`,
+                                method: 'POST',
+                                encType: 'application/json',
+                              },
+                            );
                         }}
                       />
                       <MenuTrigger>
                         <Button
                           aria-label="Unit Test Actions"
-                          className="opacity-0 items-center hover:opacity-100 focus:opacity-100 data-[pressed]:opacity-100 flex group-focus:opacity-100 group-hover:opacity-100 justify-center h-6 aspect-square data-[pressed]:bg-[--hl-sm] rounded-sm text-[--color-font] hover:bg-[--hl-xs] focus:ring-inset ring-1 ring-transparent focus:ring-[--hl-md] transition-all text-sm"
+                          className="flex aspect-square h-6 items-center justify-center rounded-sm text-sm text-[--color-font] opacity-0 ring-1 ring-transparent transition-all hover:bg-[--hl-xs] hover:opacity-100 focus:opacity-100 focus:ring-inset focus:ring-[--hl-md] group-hover:opacity-100 group-focus:opacity-100 data-[pressed]:bg-[--hl-sm] data-[pressed]:opacity-100"
                         >
                           <Icon icon="caret-down" />
                         </Button>
-                        <Popover className="min-w-max overflow-y-hidden flex flex-col">
+                        <Popover className="flex min-w-max flex-col overflow-y-hidden">
                           <Menu
                             aria-label="Unit Test Actions Menu"
                             selectionMode="single"
                             onAction={key => {
-                              testSuiteActionList
-                                .find(({ id }) => key === id)
-                                ?.action(item._id, item.name);
+                              testSuiteActionList.find(({ id }) => key === id)?.action(item._id, item.name);
                             }}
                             items={testSuiteActionList}
-                            className="border select-none text-sm min-w-max border-solid border-[--hl-sm] shadow-lg bg-[--color-bg] py-2 rounded-md overflow-y-auto focus:outline-none"
+                            className="min-w-max select-none overflow-y-auto rounded-md border border-solid border-[--hl-sm] bg-[--color-bg] py-2 text-sm shadow-lg focus:outline-none"
                           >
                             {item => (
                               <MenuItem
                                 key={item.id}
                                 id={item.id}
-                                className="flex gap-2 px-[--padding-md] aria-selected:font-bold items-center text-[--color-font] h-[--line-height-xs] w-full text-md whitespace-nowrap bg-transparent hover:bg-[--hl-sm] disabled:cursor-not-allowed focus:bg-[--hl-xs] focus:outline-none transition-colors"
+                                className="text-md flex h-[--line-height-xs] w-full items-center gap-2 whitespace-nowrap bg-transparent px-[--padding-md] text-[--color-font] transition-colors hover:bg-[--hl-sm] focus:bg-[--hl-xs] focus:outline-none disabled:cursor-not-allowed aria-selected:font-bold"
                                 aria-label={item.name}
                               >
                                 <Icon icon={item.icon} />
@@ -458,24 +467,16 @@ const TestRoute: FC = () => {
             </GridList>
           </div>
           <WorkspaceSyncDropdown />
-          {isEnvironmentModalOpen && (
-            <WorkspaceEnvironmentsEditModal
-              onClose={() => setEnvironmentModalOpen(false)}
-            />
-          )}
-          {isCookieModalOpen && (
-            <CookiesModal setIsOpen={setIsCookieModalOpen} />
-          )}
-          {isCertificatesModalOpen && (
-            <CertificatesModal onClose={() => setCertificatesModalOpen(false)} />
-          )}
+          {isEnvironmentModalOpen && <WorkspaceEnvironmentsEditModal onClose={() => setEnvironmentModalOpen(false)} />}
+          {isCookieModalOpen && <CookiesModal setIsOpen={setIsCookieModalOpen} />}
+          {isCertificatesModalOpen && <CertificatesModal onClose={() => setCertificatesModalOpen(false)} />}
         </ErrorBoundary>
       </Panel>
-      <PanelResizeHandle className='h-full w-[1px] bg-[--hl-md]' />
-      <Panel className='flex flex-col'>
+      <PanelResizeHandle className="h-full w-[1px] bg-[--hl-md]" />
+      <Panel className="flex flex-col">
         <OrganizationTabList />
         <PanelGroup autoSaveId="insomnia-panels" direction={direction}>
-          <Panel id="pane-one" minSize={10} className='pane-one theme--pane relative overflow-hidden'>
+          <Panel id="pane-one" minSize={10} className="pane-one theme--pane relative overflow-hidden">
             <Routes>
               <Route
                 path={'test-suite/:testSuiteId/*'}
@@ -485,23 +486,24 @@ const TestRoute: FC = () => {
                   </Suspense>
                 }
               />
-              <Route
-                path="*"
-                element={
-                  <div className="p-[--padding-md]">No test suite selected</div>
-                }
-              />
+              <Route path="*" element={<div className="p-[--padding-md]">No test suite selected</div>} />
             </Routes>
           </Panel>
-          <PanelResizeHandle className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'w-full h-[1px] bg-[--hl-md]'} />
-          <Panel id="pane-two" minSize={10} className='pane-two theme--pane divide-y divide-solid divide-[--hl-md] overflow-hidden relative'>
+          <PanelResizeHandle
+            className={direction === 'horizontal' ? 'h-full w-[1px] bg-[--hl-md]' : 'h-[1px] w-full bg-[--hl-md]'}
+          />
+          <Panel
+            id="pane-two"
+            minSize={10}
+            className="pane-two theme--pane relative divide-y divide-solid divide-[--hl-md] overflow-hidden"
+          >
             <Routes>
               <Route
                 path="test-suite/:testSuiteId/test-result/:testResultId"
                 element={
                   runningTests ? (
                     <>
-                      <Heading className="text-lg flex-shrink-0 flex items-center gap-2 w-full h-[--line-height-sm] px-[--padding-md]">
+                      <Heading className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center gap-2 px-[--padding-md] text-lg">
                         <Icon icon="spinner" className="fa-pulse" /> Running tests...
                       </Heading>
                       <div />
@@ -515,11 +517,10 @@ const TestRoute: FC = () => {
                 path="*"
                 element={
                   <>
-                    <Heading className="text-lg flex-shrink-0 flex items-center gap-2 w-full h-[--line-height-sm] px-[--padding-md]">
+                    <Heading className="flex h-[--line-height-sm] w-full flex-shrink-0 items-center gap-2 px-[--padding-md] text-lg">
                       {runningTests ? (
                         <>
-                          <Icon icon="spinner" className="fa-pulse" /> Running
-                          tests...
+                          <Icon icon="spinner" className="fa-pulse" /> Running tests...
                         </>
                       ) : (
                         'No test results'
diff --git a/packages/insomnia/src/ui/routes/workspace.tsx b/packages/insomnia/src/ui/routes/workspace.tsx
index 6d29facd7d..857f8db074 100644
--- a/packages/insomnia/src/ui/routes/workspace.tsx
+++ b/packages/insomnia/src/ui/routes/workspace.tsx
@@ -22,9 +22,7 @@ import type { Request } from '../../models/request';
 import { isRequestGroup, type RequestGroup } from '../../models/request-group';
 import type { RequestGroupMeta } from '../../models/request-group-meta';
 import type { RequestMeta } from '../../models/request-meta';
-import type {
-  WebSocketRequest,
-} from '../../models/websocket-request';
+import type { WebSocketRequest } from '../../models/websocket-request';
 import type { Workspace } from '../../models/workspace';
 import type { WorkspaceMeta } from '../../models/workspace-meta';
 import { pushSnapshotOnInitialize } from '../../sync/vcs/initialize-backend-project';
@@ -65,10 +63,7 @@ export interface Child {
   ancestors?: string[];
 }
 
-export const workspaceLoader: LoaderFunction = async ({
-  request,
-  params,
-}): Promise<WorkspaceLoaderData> => {
+export const workspaceLoader: LoaderFunction = async ({ request, params }): Promise<WorkspaceLoaderData> => {
   const { organizationId, projectId, workspaceId } = params;
   invariant(organizationId, 'Organization ID is required');
   invariant(projectId, 'Project ID is required');
@@ -85,21 +80,19 @@ export const workspaceLoader: LoaderFunction = async ({
   const activeProject = await models.project.getById(projectId);
   invariant(activeProject, 'Project not found');
 
-  const activeWorkspaceMeta = await models.workspaceMeta.getOrCreateByParentId(
-    workspaceId,
-  );
+  const activeWorkspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspaceId);
   invariant(activeWorkspaceMeta, 'Workspace meta not found');
-  const gitRepositoryId = isGitProject(activeProject) ? activeProject.gitRepositoryId : activeWorkspaceMeta.gitRepositoryId;
-  const gitRepository = await models.gitRepository.getById(
-    gitRepositoryId || '',
-  );
+  const gitRepositoryId = isGitProject(activeProject)
+    ? activeProject.gitRepositoryId
+    : activeWorkspaceMeta.gitRepositoryId;
+  const gitRepository = await models.gitRepository.getById(gitRepositoryId || '');
 
   const baseEnvironment = await models.environment.getByParentId(workspaceId);
   invariant(baseEnvironment, 'Base environment not found');
 
-  const subEnvironments = (
-    await models.environment.findByParentId(baseEnvironment._id)
-  ).sort((e1, e2) => e1.metaSortKey - e2.metaSortKey);
+  const subEnvironments = (await models.environment.findByParentId(baseEnvironment._id)).sort(
+    (e1, e2) => e1.metaSortKey - e2.metaSortKey,
+  );
 
   const globalEnvironmentWorkspaces = await database.find<Workspace>(models.workspace.type, {
     parentId: projectId,
@@ -126,28 +119,26 @@ export const workspaceLoader: LoaderFunction = async ({
     };
   });
 
-  const activeEnvironment = (await database.getWhere<Environment>(models.environment.type, {
-    _id: activeWorkspaceMeta.activeEnvironmentId,
-  })) || baseEnvironment;
+  const activeEnvironment =
+    (await database.getWhere<Environment>(models.environment.type, {
+      _id: activeWorkspaceMeta.activeEnvironmentId,
+    })) || baseEnvironment;
 
-  const activeGlobalEnvironment = (await database.getWhere<Environment>(models.environment.type, {
+  const activeGlobalEnvironment = await database.getWhere<Environment>(models.environment.type, {
     _id: activeWorkspaceMeta.activeGlobalEnvironmentId,
-  }));
+  });
 
-  const activeCookieJar = await models.cookieJar.getOrCreateForParentId(
-    workspaceId,
-  );
+  const activeCookieJar = await models.cookieJar.getOrCreateForParentId(workspaceId);
   invariant(activeCookieJar, 'Cookie jar not found');
 
   const activeApiSpec = await models.apiSpec.getByParentId(workspaceId);
   const activeMockServer = await models.mockServer.getByParentId(workspaceId);
-  const clientCertificates = await models.clientCertificate.findByParentId(
-    workspaceId,
-  );
+  const clientCertificates = await models.clientCertificate.findByParentId(workspaceId);
 
-  const organizationProjects = await database.find<Project>(models.project.type, {
-    parentId: organizationId,
-  }) || [];
+  const organizationProjects =
+    (await database.find<Project>(models.project.type, {
+      parentId: organizationId,
+    })) || [];
 
   const projects = sortProjects(organizationProjects);
 
@@ -169,14 +160,25 @@ export const workspaceLoader: LoaderFunction = async ({
 
   const reqs = await database.find(models.request.type, { parentId: { $in: listOfParentIds } });
   const reqGroups = await database.find(models.requestGroup.type, { parentId: { $in: listOfParentIds } });
-  const grpcReqs = await database.find(models.grpcRequest.type, { parentId: { $in: listOfParentIds } }) as GrpcRequest[];
+  const grpcReqs = (await database.find(models.grpcRequest.type, {
+    parentId: { $in: listOfParentIds },
+  })) as GrpcRequest[];
   const wsReqs = await database.find(models.webSocketRequest.type, { parentId: { $in: listOfParentIds } });
-  const allRequests = [...reqs, ...reqGroups, ...grpcReqs, ...wsReqs] as (Request | RequestGroup | GrpcRequest | WebSocketRequest)[];
+  const allRequests = [...reqs, ...reqGroups, ...grpcReqs, ...wsReqs] as (
+    | Request
+    | RequestGroup
+    | GrpcRequest
+    | WebSocketRequest
+  )[];
 
   const requestMetas = await database.find(models.requestMeta.type, { parentId: { $in: reqs.map(r => r._id) } });
-  const grpcRequestMetas = await database.find(models.grpcRequestMeta.type, { parentId: { $in: grpcReqs.map(r => r._id) } });
+  const grpcRequestMetas = await database.find(models.grpcRequestMeta.type, {
+    parentId: { $in: grpcReqs.map(r => r._id) },
+  });
   const grpcAndRequestMetas = [...requestMetas, ...grpcRequestMetas] as (RequestMeta | GrpcRequestMeta)[];
-  const requestGroupMetas = await database.find(models.requestGroupMeta.type, { parentId: { $in: listOfParentIds } }) as RequestGroupMeta[];
+  const requestGroupMetas = (await database.find(models.requestGroupMeta.type, {
+    parentId: { $in: listOfParentIds },
+  })) as RequestGroupMeta[];
   // second recursion to build the tree
   const getCollectionTree = async ({
     parentId,
@@ -184,52 +186,49 @@ export const workspaceLoader: LoaderFunction = async ({
     parentIsCollapsed,
     ancestors,
   }: {
-      parentId: string; level: number; parentIsCollapsed: boolean; ancestors: string[];
+    parentId: string;
+    level: number;
+    parentIsCollapsed: boolean;
+    ancestors: string[];
   }): Promise<Child[]> => {
     const levelReqs = allRequests.filter(r => r.parentId === parentId);
 
-    const childrenWithChildren: Child[] = await Promise.all(levelReqs
-        .sort(sortFunction)
-        .map(async (doc): Promise<Child> => {
-          const isMatched = (filter: string): boolean =>
-            Boolean(fuzzyMatchAll(
-              filter,
-              [
-                doc.name,
-                doc.description,
-                ...(isRequestGroup(doc) ? [] : [doc.url]),
-              ],
-              { splitSpace: false, loose: true }
-            )?.indexes);
-          const shouldHide = Boolean(filter && !isMatched(filter));
-          const hidden = parentIsCollapsed || shouldHide;
+    const childrenWithChildren: Child[] = await Promise.all(
+      levelReqs.sort(sortFunction).map(async (doc): Promise<Child> => {
+        const isMatched = (filter: string): boolean =>
+          Boolean(
+            fuzzyMatchAll(filter, [doc.name, doc.description, ...(isRequestGroup(doc) ? [] : [doc.url])], {
+              splitSpace: false,
+              loose: true,
+            })?.indexes,
+          );
+        const shouldHide = Boolean(filter && !isMatched(filter));
+        const hidden = parentIsCollapsed || shouldHide;
 
-          const pinned =
-            !isRequestGroup(doc) && grpcAndRequestMetas.find(m => m.parentId === doc._id)?.pinned || false;
-          const collapsed = filter
-            ? false
-            : parentIsCollapsed ||
-              (isRequestGroup(doc) &&
-              requestGroupMetas.find(m => m.parentId === doc._id)?.collapsed) ||
-              false;
+        const pinned = (!isRequestGroup(doc) && grpcAndRequestMetas.find(m => m.parentId === doc._id)?.pinned) || false;
+        const collapsed = filter
+          ? false
+          : parentIsCollapsed ||
+            (isRequestGroup(doc) && requestGroupMetas.find(m => m.parentId === doc._id)?.collapsed) ||
+            false;
 
-          const docAncestors = [...ancestors, parentId];
+        const docAncestors = [...ancestors, parentId];
 
-          return {
-            doc,
-            pinned,
-            collapsed,
-            hidden,
-            level,
+        return {
+          doc,
+          pinned,
+          collapsed,
+          hidden,
+          level,
+          ancestors: docAncestors,
+          children: await getCollectionTree({
+            parentId: doc._id,
+            level: level + 1,
+            parentIsCollapsed: collapsed,
             ancestors: docAncestors,
-            children: await getCollectionTree({
-              parentId: doc._id,
-              level: level + 1,
-              parentIsCollapsed: collapsed,
-              ancestors: docAncestors,
-            }),
-          };
-        }),
+          }),
+        };
+      }),
     );
 
     return childrenWithChildren;
@@ -325,7 +324,10 @@ export const revalidateWorkspaceActiveRequest = async (requestId: string, worksp
 };
 
 export const revalidateWorkspaceActiveRequestByFolder = async (requestGroup: RequestGroup, workspaceId: string) => {
-  const docs = await database.withDescendants(requestGroup, models.request.type, [models.request.type, models.requestGroup.type]);
+  const docs = await database.withDescendants(requestGroup, models.request.type, [
+    models.request.type,
+    models.requestGroup.type,
+  ]);
   const workspaceMeta = await models.workspaceMeta.getByParentId(workspaceId);
   for (const doc of docs) {
     if (workspaceMeta?.activeRequestId === doc._id) {
diff --git a/packages/insomnia/src/ui/worker/spectral-handler.ts b/packages/insomnia/src/ui/worker/spectral-handler.ts
index 2ef3726f42..9614c946e6 100644
--- a/packages/insomnia/src/ui/worker/spectral-handler.ts
+++ b/packages/insomnia/src/ui/worker/spectral-handler.ts
@@ -1,4 +1,3 @@
-
 import type { ISpectralDiagnostic } from '@stoplight/spectral-core';
 
 import type { SpectralResponse } from './spectral-worker';
diff --git a/packages/insomnia/src/ui/worker/templating-handler.ts b/packages/insomnia/src/ui/worker/templating-handler.ts
index 82936b6328..0a16b257b9 100644
--- a/packages/insomnia/src/ui/worker/templating-handler.ts
+++ b/packages/insomnia/src/ui/worker/templating-handler.ts
@@ -1,4 +1,3 @@
-
 import { extractUndefinedVariableKey, RenderError } from '../../templating/render-error';
 import type { BaseRenderContext } from '../../templating/types';
 
@@ -11,7 +10,17 @@ worker.addEventListener('error', event => {
   console.error('Error from worker:', event.message);
 });
 
-export function renderInWorker({ input, context, path, ignoreUndefinedEnvVariable }: { input: string; context: BaseRenderContext; path: string; ignoreUndefinedEnvVariable: boolean }): Promise<string> {
+export function renderInWorker({
+  input,
+  context,
+  path,
+  ignoreUndefinedEnvVariable,
+}: {
+  input: string;
+  context: BaseRenderContext;
+  path: string;
+  ignoreUndefinedEnvVariable: boolean;
+}): Promise<string> {
   const newContext = {
     ...context,
     serializedFunctions: {
diff --git a/packages/insomnia/src/ui/worker/templating-worker.ts b/packages/insomnia/src/ui/worker/templating-worker.ts
index 85f9c6548e..4123e15ae7 100644
--- a/packages/insomnia/src/ui/worker/templating-worker.ts
+++ b/packages/insomnia/src/ui/worker/templating-worker.ts
@@ -6,18 +6,32 @@ const interceptor: any = (moduleName: string): NodeRequire => {
   if (allowList.includes(moduleName)) {
     return originalRequire(moduleName);
   }
-  throw new Error(`Cannot find module '${moduleName}', untrusted modules are not available in protected mode, this can be enabled in plugin settings`);
+  throw new Error(
+    `Cannot find module '${moduleName}', untrusted modules are not available in protected mode, this can be enabled in plugin settings`,
+  );
 };
-async function performJob(input: { input: string; context: Record<string, any>; path: string; ignoreUndefinedEnvVariable: boolean }) {
+async function performJob(input: {
+  input: string;
+  context: Record<string, any>;
+  path: string;
+  ignoreUndefinedEnvVariable: boolean;
+}) {
   self.require = interceptor;
-  return templating.render(input.input, { context: input.context, path: input.path, ignoreUndefinedEnvVariable: input.ignoreUndefinedEnvVariable });
+  return templating.render(input.input, {
+    context: input.context,
+    path: input.path,
+    ignoreUndefinedEnvVariable: input.ignoreUndefinedEnvVariable,
+  });
 }
 
 // Listen for messages from the main thread
 self.onmessage = async event => {
   const { id, input, context, path, ignoreUndefinedEnvVariable } = JSON.parse(event.data);
   try {
-    context.getMeta = () => ({ requestId: context.serializedFunctions.requestId, workspaceId: context.serializedFunctions.workspaceId });
+    context.getMeta = () => ({
+      requestId: context.serializedFunctions.requestId,
+      workspaceId: context.serializedFunctions.workspaceId,
+    });
     context.getEnvironmentId = () => context.serializedFunctions.environmentId;
     context.getExtraInfo = () => context.serializedFunctions.extraInfo;
     context.getGlobalEnvironmentId = () => context.serializedFunctions.globalEnvironmentId;
diff --git a/packages/insomnia/src/utils/grpc.ts b/packages/insomnia/src/utils/grpc.ts
index 2c757ce278..e444f3df89 100644
--- a/packages/insomnia/src/utils/grpc.ts
+++ b/packages/insomnia/src/utils/grpc.ts
@@ -10,9 +10,11 @@ const GRPC_CONNECTION_ERROR_STRINGS = {
 };
 
 export function isGrpcConnectionError(error: Error) {
-  return (error && error.message && (
+  return (
+    error &&
+    error.message &&
     Object.values(GRPC_CONNECTION_ERROR_STRINGS).find(str => error.message.includes(str)) !== null
-  ));
+  );
 }
 
 export function getGrpcConnectionErrorDetails(error: Error) {
@@ -24,22 +26,27 @@ export function getGrpcConnectionErrorDetails(error: Error) {
 
   if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.SERVER_SELF_SIGNED)) {
     title = 'Server Certificate Cannot Be Validated';
-    message = 'The server is using a certificate that cannot be validated.\nAdd the server\'s root certificate to this collection or disable SSL validation for requests in Preferences.';
+    message =
+      "The server is using a certificate that cannot be validated.\nAdd the server's root certificate to this collection or disable SSL validation for requests in Preferences.";
   } else if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.CLIENT_CERT_REQUIRED)) {
     title = 'Client Certificate Required';
     message = 'The server requires a client certificate to establish a connection.';
   } else if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.SERVER_CANCELED)) {
     title = 'Server Cancelled Request';
-    message = 'The request was cancelled by the server.\nIf the server requires a TLS connection, ensure the request URL is prefixed with "grpcs://".';
+    message =
+      'The request was cancelled by the server.\nIf the server requires a TLS connection, ensure the request URL is prefixed with "grpcs://".';
   } else if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.TLS_NOT_SUPPORTED)) {
     title = 'TLS Not Supported';
-    message = 'The server does not support TLS connections.\nRemove the "grpcs://" prefix from the request URL to make an insecure request.';
+    message =
+      'The server does not support TLS connections.\nRemove the "grpcs://" prefix from the request URL to make an insecure request.';
   } else if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.BAD_LOCAL_ROOT_CERT)) {
     title = 'Local Root Certificate Error';
-    message = 'The local root certificate enabled for the host is not valid.\nEither disable the root certificate, or update it with a valid one.';
+    message =
+      'The local root certificate enabled for the host is not valid.\nEither disable the root certificate, or update it with a valid one.';
   } else if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.CANNOT_REFLECT)) {
     title = 'Reflection Not Supported';
-    message = 'The server has indicated that it does not support reflection. You may need to manually enable it server-side.';
+    message =
+      'The server has indicated that it does not support reflection. You may need to manually enable it server-side.';
   } else if (error.message.includes(GRPC_CONNECTION_ERROR_STRINGS.UNIMPLEMENTED)) {
     title = 'Unimplemented Method';
     message = 'The server does not support the requested method. Is the .proto file correct?';
diff --git a/packages/insomnia/src/utils/importers/__tests__/convert.test.ts b/packages/insomnia/src/utils/importers/__tests__/convert.test.ts
index 030400826d..c9ce6ab7c8 100644
--- a/packages/insomnia/src/utils/importers/__tests__/convert.test.ts
+++ b/packages/insomnia/src/utils/importers/__tests__/convert.test.ts
@@ -30,10 +30,7 @@ describe('test dotInKeyNameInvariant', () => {
       noError: false,
     },
     {
-      input: [
-        '',
-        1,
-      ],
+      input: ['', 1],
       noError: true,
     },
   ].forEach(testCase => {
diff --git a/packages/insomnia/src/utils/importers/convert.ts b/packages/insomnia/src/utils/importers/convert.ts
index 2ebc570404..2167fbdb75 100644
--- a/packages/insomnia/src/utils/importers/convert.ts
+++ b/packages/insomnia/src/utils/importers/convert.ts
@@ -59,7 +59,9 @@ export const convert = async (rawData: string) => {
 export function dotInKeyNameInvariant(entity: object) {
   JSON.stringify(entity, (key, value) => {
     if (key.includes('.')) {
-      throw new Error(`Detected invalid key "${key}", which contains '.'. Please update it in the original tool and re-import it.`);
+      throw new Error(
+        `Detected invalid key "${key}", which contains '.'. Please update it in the original tool and re-import it.`,
+      );
     }
 
     return value;
diff --git a/packages/insomnia/src/utils/importers/entities.ts b/packages/insomnia/src/utils/importers/entities.ts
index 8a79caec4b..33e8941799 100644
--- a/packages/insomnia/src/utils/importers/entities.ts
+++ b/packages/insomnia/src/utils/importers/entities.ts
@@ -51,11 +51,7 @@ export interface QueryString extends Comment {
   name: string;
 }
 
-export type ImportRequestType =
-  | 'environment'
-  | 'request'
-  | 'request_group'
-  | 'workspace';
+export type ImportRequestType = 'environment' | 'request' | 'request_group' | 'workspace';
 
 export interface ImportRequest<T extends {} = {}> extends Comment {
   _id?: string;
diff --git a/packages/insomnia/src/utils/importers/importers/__tests__/postman.test.ts b/packages/insomnia/src/utils/importers/importers/__tests__/postman.test.ts
index 9c7e4d572d..f5e8301ef7 100644
--- a/packages/insomnia/src/utils/importers/importers/__tests__/postman.test.ts
+++ b/packages/insomnia/src/utils/importers/importers/__tests__/postman.test.ts
@@ -3,44 +3,44 @@ import { describe, expect, it } from 'vitest';
 import { translateHandlersInScript } from '../postman';
 
 describe('test translateHandlersInScript', () => {
-    [
-        {
-            script: "pm.environment.set('', '')",
-            expected: "insomnia.environment.set('', '')",
-        },
-        {
-            script: 'ipm.fn()',
-            expected: 'ipm.fn()',
-        },
-        {
-            script: 'h5pm.fn()',
-            expected: 'h5pm.fn()',
-        },
-        {
-            script: '$pm.fn()',
-            expected: '$pm.fn()',
-        },
-        {
-            script: '_pm.fn()',
-            expected: '_pm.fn()',
-        },
-        {
-            script: 'call(pm.environment.get("hehe"))',
-            expected: 'call(insomnia.environment.get("hehe"))',
-        },
-        {
-            script: `
+  [
+    {
+      script: "pm.environment.set('', '')",
+      expected: "insomnia.environment.set('', '')",
+    },
+    {
+      script: 'ipm.fn()',
+      expected: 'ipm.fn()',
+    },
+    {
+      script: 'h5pm.fn()',
+      expected: 'h5pm.fn()',
+    },
+    {
+      script: '$pm.fn()',
+      expected: '$pm.fn()',
+    },
+    {
+      script: '_pm.fn()',
+      expected: '_pm.fn()',
+    },
+    {
+      script: 'call(pm.environment.get("hehe"))',
+      expected: 'call(insomnia.environment.get("hehe"))',
+    },
+    {
+      script: `
                 console.log(pm.variables.get('score'), pm.variables.get('score2'));
                 console.log(pm.collectionVariables.get('score'));
                 console.log(pm.environment.get('score'));`,
-            expected: `
+      expected: `
                 console.log(insomnia.variables.get('score'), insomnia.variables.get('score2'));
                 console.log(insomnia.collectionVariables.get('score'));
                 console.log(insomnia.environment.get('score'));`,
-        },
-    ].forEach(testCase => {
-        it(`translate: ${testCase.script}`, () => {
-            expect(translateHandlersInScript(testCase.script)).toBe(testCase.expected);
-        });
+    },
+  ].forEach(testCase => {
+    it(`translate: ${testCase.script}`, () => {
+      expect(translateHandlersInScript(testCase.script)).toBe(testCase.expected);
     });
+  });
 });
diff --git a/packages/insomnia/src/utils/importers/importers/curl.test.ts b/packages/insomnia/src/utils/importers/importers/curl.test.ts
index 88d69044b2..01c0448219 100644
--- a/packages/insomnia/src/utils/importers/importers/curl.test.ts
+++ b/packages/insomnia/src/utils/importers/importers/curl.test.ts
@@ -14,15 +14,22 @@ describe('curl', () => {
       {
         flag: '-d',
         inputs: ['first=1', 'second=2', 'third'],
-        expected: [{ name: 'first', value: '1' }, {
-          name: 'second',
-          value: '2',
-        }, { name: '', value: 'third' }],
+        expected: [
+          { name: 'first', value: '1' },
+          {
+            name: 'second',
+            value: '2',
+          },
+          { name: '', value: 'third' },
+        ],
       },
       {
         flag: '-d',
         inputs: ['first=1&second=2'],
-        expected: [{ name: 'first', value: '1' }, { name: 'second', value: '2' }],
+        expected: [
+          { name: 'first', value: '1' },
+          { name: 'second', value: '2' },
+        ],
       },
       { flag: '-d', inputs: ['%3D'], expected: [{ name: '', value: '=' }] },
       { flag: '--d', inputs: ['%3D=%3D'], expected: [{ name: '=', value: '=' }] },
@@ -34,15 +41,22 @@ describe('curl', () => {
       {
         flag: '--data',
         inputs: ['first=1', 'second=2', 'third'],
-        expected: [{ name: 'first', value: '1' }, {
-          name: 'second',
-          value: '2',
-        }, { name: '', value: 'third' }],
+        expected: [
+          { name: 'first', value: '1' },
+          {
+            name: 'second',
+            value: '2',
+          },
+          { name: '', value: 'third' },
+        ],
       },
       {
         flag: '--data',
         inputs: ['first=1&second=2'],
-        expected: [{ name: 'first', value: '1' }, { name: 'second', value: '2' }],
+        expected: [
+          { name: 'first', value: '1' },
+          { name: 'second', value: '2' },
+        ],
       },
       { flag: '--data', inputs: ['%3D'], expected: [{ name: '', value: '=' }] },
       { flag: '--data', inputs: ['%3D=%3D'], expected: [{ name: '=', value: '=' }] },
@@ -54,15 +68,22 @@ describe('curl', () => {
       {
         flag: '--data-ascii',
         inputs: ['first=1', 'second=2', 'third'],
-        expected: [{ name: 'first', value: '1' }, {
-          name: 'second',
-          value: '2',
-        }, { name: '', value: 'third' }],
+        expected: [
+          { name: 'first', value: '1' },
+          {
+            name: 'second',
+            value: '2',
+          },
+          { name: '', value: 'third' },
+        ],
       },
       {
         flag: '--data-ascii',
         inputs: ['first=1&second=2'],
-        expected: [{ name: 'first', value: '1' }, { name: 'second', value: '2' }],
+        expected: [
+          { name: 'first', value: '1' },
+          { name: 'second', value: '2' },
+        ],
       },
 
       // --data-binary
@@ -72,15 +93,22 @@ describe('curl', () => {
       {
         flag: '--data-binary',
         inputs: ['first=1', 'second=2', 'third'],
-        expected: [{ name: 'first', value: '1' }, {
-          name: 'second',
-          value: '2',
-        }, { name: '', value: 'third' }],
+        expected: [
+          { name: 'first', value: '1' },
+          {
+            name: 'second',
+            value: '2',
+          },
+          { name: '', value: 'third' },
+        ],
       },
       {
         flag: '--data-binary',
         inputs: ['first=1&second=2'],
-        expected: [{ name: 'first', value: '1' }, { name: 'second', value: '2' }],
+        expected: [
+          { name: 'first', value: '1' },
+          { name: 'second', value: '2' },
+        ],
       },
 
       // --data-raw
@@ -89,15 +117,22 @@ describe('curl', () => {
       {
         flag: '--data-raw',
         inputs: ['first=1', 'second=2', 'third'],
-        expected: [{ name: 'first', value: '1' }, {
-          name: 'second',
-          value: '2',
-        }, { name: '', value: 'third' }],
+        expected: [
+          { name: 'first', value: '1' },
+          {
+            name: 'second',
+            value: '2',
+          },
+          { name: '', value: 'third' },
+        ],
       },
       {
         flag: '--data-raw',
         inputs: ['first=1&second=2'],
-        expected: [{ name: 'first', value: '1' }, { name: 'second', value: '2' }],
+        expected: [
+          { name: 'first', value: '1' },
+          { name: 'second', value: '2' },
+        ],
       },
 
       // --data-urlencode
@@ -110,15 +145,22 @@ describe('curl', () => {
       {
         flag: '--data-urlencode',
         inputs: ['first=1', 'second=2', 'third'],
-        expected: [{ name: 'first', value: '1' }, {
-          name: 'second',
-          value: '2',
-        }, { name: '', value: 'third' }],
+        expected: [
+          { name: 'first', value: '1' },
+          {
+            name: 'second',
+            value: '2',
+          },
+          { name: '', value: 'third' },
+        ],
       },
       {
         flag: '--data-urlencode',
         inputs: ['first=1&second=2'],
-        expected: [{ name: 'first', value: '1' }, { name: 'second', value: '2' }],
+        expected: [
+          { name: 'first', value: '1' },
+          { name: 'second', value: '2' },
+        ],
       },
       { flag: '--data-urlencode', inputs: ['=value'], expected: [{ name: '', value: 'value' }] },
 
@@ -135,41 +177,55 @@ describe('curl', () => {
       { flag: '--data-urlencode', inputs: ['"'], expected: [{ name: '', value: '"' }] },
       { flag: '--data-urlencode', inputs: ['='], expected: [{ name: '', value: '' }] },
       { flag: '--data-urlencode', inputs: ['%3D'], expected: [{ name: '', value: '%3D' }] },
-    ])('handles %p correctly', async ({
-      flag,
-      inputs,
-      expected,
-    }: { flag: string; inputs: string[]; expected: Parameter[] }) => {
-      const flaggedInputs = inputs.map(input => `${flag} ${quote([input])}`).join(' ');
-      const rawData = `curl -X POST https://example.com 
+    ])(
+      'handles %p correctly',
+      async ({ flag, inputs, expected }: { flag: string; inputs: string[]; expected: Parameter[] }) => {
+        const flaggedInputs = inputs.map(input => `${flag} ${quote([input])}`).join(' ');
+        const rawData = `curl -X POST https://example.com 
       -H 'Content-Type: application/x-www-form-urlencoded'
       ${flaggedInputs}
       `;
 
-      expect(convert(rawData)).toMatchObject([{
-        body: {
-          params: expected,
-        },
-      }]);
-    });
+        expect(convert(rawData)).toMatchObject([
+          {
+            body: {
+              params: expected,
+            },
+          },
+        ]);
+      },
+    );
   });
   describe('cURL -H flags', () => {
     it.each([
       { flag: '-H', inputs: ['X-Host: example.com'], expected: [{ name: 'X-Host', value: 'example.com' }] },
       { flag: '-H', inputs: ['X-Host:example.com'], expected: [{ name: 'X-Host', value: 'example.com' }] },
-      { flag: '-H', inputs: ['Content-Type:application/x-www-form-urlencoded'], expected: [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }] },
-      { flag: '   -H', inputs: ['Content-Type:application/x-www-form-urlencoded'], expected: [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }] },
-      { flag: ' -H', inputs: ['Content-Type:application/x-www-form-urlencoded'], expected: [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }] },
-    ])('handles %p correctly', async ({
-      flag,
-      inputs,
-      expected,
-    }: { flag: string; inputs: string[]; expected: Parameter[] }) => {
-      const flaggedInputs = inputs.map(input => `${flag} ${quote([input])}`).join(' ');
-      const rawData = `curl https://example.com ${flaggedInputs}`;
-      expect(convert(rawData)).toMatchObject([{
-        headers: expected,
-      }]);
-    });
+      {
+        flag: '-H',
+        inputs: ['Content-Type:application/x-www-form-urlencoded'],
+        expected: [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }],
+      },
+      {
+        flag: '   -H',
+        inputs: ['Content-Type:application/x-www-form-urlencoded'],
+        expected: [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }],
+      },
+      {
+        flag: ' -H',
+        inputs: ['Content-Type:application/x-www-form-urlencoded'],
+        expected: [{ name: 'Content-Type', value: 'application/x-www-form-urlencoded' }],
+      },
+    ])(
+      'handles %p correctly',
+      async ({ flag, inputs, expected }: { flag: string; inputs: string[]; expected: Parameter[] }) => {
+        const flaggedInputs = inputs.map(input => `${flag} ${quote([input])}`).join(' ');
+        const rawData = `curl https://example.com ${flaggedInputs}`;
+        expect(convert(rawData)).toMatchObject([
+          {
+            headers: expected,
+          },
+        ]);
+      },
+    );
   });
 });
diff --git a/packages/insomnia/src/utils/importers/importers/curl.ts b/packages/insomnia/src/utils/importers/importers/curl.ts
index a17734048d..a0a22b4256 100644
--- a/packages/insomnia/src/utils/importers/importers/curl.ts
+++ b/packages/insomnia/src/utils/importers/importers/curl.ts
@@ -92,11 +92,7 @@ const importCommand = (parseEntries: ParseEntry[]): ImportRequest => {
   let url = '';
 
   try {
-    const urlValue = getPairValue(
-      pairsByName,
-      (singletons[0] as string) || '',
-      ['url'],
-    );
+    const urlValue = getPairValue(pairsByName, (singletons[0] as string) || '', ['url']);
     const { searchParams, href, search } = new URL(urlValue);
     parameters = Array.from(searchParams.entries()).map(([name, value]) => ({
       name,
@@ -108,16 +104,13 @@ const importCommand = (parseEntries: ParseEntry[]): ImportRequest => {
   } catch (error) {}
 
   /// /////// Authentication //////////
-  const [username, password] = getPairValue(pairsByName, '', [
-    'u',
-    'user',
-  ]).split(/:(.*)$/);
+  const [username, password] = getPairValue(pairsByName, '', ['u', 'user']).split(/:(.*)$/);
 
   const authentication = username
     ? {
-      username: username.trim(),
-      password: password.trim(),
-    }
+        username: username.trim(),
+        password: password.trim(),
+      }
     : {};
 
   /// /////// Headers //////////
@@ -152,9 +145,7 @@ const importCommand = (parseEntries: ParseEntry[]): ImportRequest => {
     .join('; ');
 
   // Convert cookie value to header
-  const existingCookieHeader = headers.find(
-    header => header.name.toLowerCase() === 'cookie',
-  );
+  const existingCookieHeader = headers.find(header => header.name.toLowerCase() === 'cookie');
 
   if (cookieHeaderValue && existingCookieHeader) {
     // Has existing cookie header, so let's update it
@@ -169,12 +160,8 @@ const importCommand = (parseEntries: ParseEntry[]): ImportRequest => {
 
   /// /////// Body (Text or Blob) //////////
   const dataParameters = pairsToDataParameters(pairsByName);
-  const contentTypeHeader = headers.find(
-    header => header.name.toLowerCase() === 'content-type',
-  );
-  const mimeType = contentTypeHeader
-    ? contentTypeHeader.value.split(';')[0]
-    : null;
+  const contentTypeHeader = headers.find(header => header.name.toLowerCase() === 'content-type');
+  const mimeType = contentTypeHeader ? contentTypeHeader.value.split(';')[0] : null;
 
   /// /////// Body (Multipart Form Data) //////////
   const formDataParams = [
@@ -212,7 +199,6 @@ const importCommand = (parseEntries: ParseEntry[]): ImportRequest => {
         value: decodeURIComponent(parameter.value || ''),
       })),
     };
-
   } else if (dataParameters.length !== 0) {
     body = {
       text: dataParameters.map(parameter => `${parameter.name}${parameter.value}`).join('&'),
@@ -226,13 +212,10 @@ const importCommand = (parseEntries: ParseEntry[]): ImportRequest => {
   }
 
   /// /////// Method //////////
-  let method = getPairValue(pairsByName, '__UNSET__', [
-    'X',
-    'request',
-  ]).toUpperCase();
+  let method = getPairValue(pairsByName, '__UNSET__', ['X', 'request']).toUpperCase();
 
   if (method === '__UNSET__' && body) {
-    method = ('text' in body || 'params' in body) ? 'POST' : 'GET';
+    method = 'text' in body || 'params' in body ? 'POST' : 'GET';
   }
 
   const count = requestCount++;
@@ -307,17 +290,20 @@ const pairsToDataParameters = (keyedPairs: PairsByName): Parameter[] => {
         dataParameters = dataParameters.concat(pairs.flatMap(pair => pairToParameters(pair)));
         break;
       case 'data-urlencode':
-        dataParameters = dataParameters.concat(pairs.flatMap(pair => pairToParameters(pair, true))
-          .map(parameter => {
-            if (parameter.type === 'file') {
-              return parameter;
-            }
+        dataParameters = dataParameters.concat(
+          pairs
+            .flatMap(pair => pairToParameters(pair, true))
+            .map(parameter => {
+              if (parameter.type === 'file') {
+                return parameter;
+              }
 
-            return {
-              ...parameter,
-              value: encodeURIComponent(parameter.value ?? ''),
-            };
-          }));
+              return {
+                ...parameter,
+                value: encodeURIComponent(parameter.value ?? ''),
+              };
+            }),
+        );
         break;
       default:
         throw new Error(`unhandled data flag ${flagName}`);
@@ -354,11 +340,7 @@ const pairToParameters = (pair: Pair, allowFiles = false): Parameter[] => {
   });
 };
 
-const getPairValue = <T extends string | boolean>(
-  parisByName: PairsByName,
-  defaultValue: T,
-  names: string[],
-) => {
+const getPairValue = <T extends string | boolean>(parisByName: PairsByName, defaultValue: T, names: string[]) => {
   for (const name of names) {
     if (parisByName[name] && parisByName[name].length) {
       return parisByName[name][0] as T;
@@ -399,9 +381,7 @@ export const convert: Converter = rawData => {
       continue;
     }
 
-    const { op } = parseEntry as
-      | { op: 'glob'; pattern: string }
-      | { op: ControlOperator };
+    const { op } = parseEntry as { op: 'glob'; pattern: string } | { op: ControlOperator };
 
     // `;` separates commands
     if (op === ';') {
@@ -419,9 +399,7 @@ export const convert: Converter = rawData => {
     }
 
     if (op === 'glob') {
-      currentCommand.push(
-        (parseEntry as { op: 'glob'; pattern: string }).pattern,
-      );
+      currentCommand.push((parseEntry as { op: 'glob'; pattern: string }).pattern);
       continue;
     }
 
@@ -431,9 +409,7 @@ export const convert: Converter = rawData => {
   // Push the last unfinished command
   commands.push(currentCommand);
 
-  const requests: ImportRequest[] = commands
-    .filter(command => command[0] === 'curl')
-    .map(importCommand);
+  const requests: ImportRequest[] = commands.filter(command => command[0] === 'curl').map(importCommand);
 
   return requests;
 };
diff --git a/packages/insomnia/src/utils/importers/importers/har.ts b/packages/insomnia/src/utils/importers/importers/har.ts
index cc4a4b2c5a..948ada887f 100644
--- a/packages/insomnia/src/utils/importers/importers/har.ts
+++ b/packages/insomnia/src/utils/importers/importers/har.ts
@@ -55,24 +55,19 @@ const importPostData = (postData?: Har.PostData): Body => {
       })),
     };
   }
-    return {
-      mimeType,
-      text,
-    };
-
+  return {
+    mimeType,
+    text,
+  };
 };
 
 const importRequest = (request: ImportRequest): ImportRequest => {
-  const cookieHeaderValue = (request.cookies ?? [])
-    .map(({ name, value }) => `${name}=${value}`)
-    .join('; ');
+  const cookieHeaderValue = (request.cookies ?? []).map(({ name, value }) => `${name}=${value}`).join('; ');
 
   const headers = request.headers ? request.headers.map(removeComment) : [];
 
   // Convert cookie value to header
-  const existingCookieHeader = headers.find(
-    header => header.name.toLowerCase() === 'cookie',
-  );
+  const existingCookieHeader = headers.find(header => header.name.toLowerCase() === 'cookie');
 
   if (cookieHeaderValue && existingCookieHeader) {
     // Has existing cookie header, so let's update it
@@ -94,9 +89,7 @@ const importRequest = (request: ImportRequest): ImportRequest => {
     url: request.url,
     method: request.method?.toUpperCase(),
     body: importPostData(request.postData),
-    parameters: request.queryString
-      ? request.queryString.map(removeComment)
-      : [],
+    parameters: request.queryString ? request.queryString.map(removeComment) : [],
     headers: headers,
     // Authentication isn't part of HAR, but we should be able to sniff for things like Basic Authentication headers and pull out the auth info
     authentication: {},
diff --git a/packages/insomnia/src/utils/importers/importers/index.test.ts b/packages/insomnia/src/utils/importers/importers/index.test.ts
index 948731bd7d..b4a281fbec 100644
--- a/packages/insomnia/src/utils/importers/importers/index.test.ts
+++ b/packages/insomnia/src/utils/importers/importers/index.test.ts
@@ -12,9 +12,7 @@ describe('Fixtures', () => {
   });
   describe.each(fixtures)('Import %s', name => {
     const dir = path.join(fixturesPath, `./${name}`);
-    const inputs = fs
-      .readdirSync(dir)
-      .filter(name => name.match(/^(.+)-?input\.[^.]+$/));
+    const inputs = fs.readdirSync(dir).filter(name => name.match(/^(.+)-?input\.[^.]+$/));
 
     for (const input of inputs) {
       const prefix = input.replace(/-input\.[^.]+/, '');
diff --git a/packages/insomnia/src/utils/importers/importers/insomnia-1.ts b/packages/insomnia/src/utils/importers/importers/insomnia-1.ts
index 41877b0fa7..06840552aa 100644
--- a/packages/insomnia/src/utils/importers/importers/insomnia-1.ts
+++ b/packages/insomnia/src/utils/importers/importers/insomnia-1.ts
@@ -1,9 +1,4 @@
-import type {
-  Converter,
-  Header,
-  ImportRequest,
-  Parameter,
-} from '../entities';
+import type { Converter, Header, ImportRequest, Parameter } from '../entities';
 
 export const id = 'insomnia-1';
 export const name = 'Insomnia v1';
@@ -66,79 +61,77 @@ const importRequestGroupItem = (item: Item): ImportRequest => {
   };
 };
 
-const importRequestItem = (parentId?: string) => ({
-  authentication: { username, password } = {},
-  headers = [],
-  __insomnia,
-  body: itemBody,
-  name,
-  url = '',
-  method = 'GET',
-  params = [],
-}: Item): ImportRequest => {
-  let contentTypeHeader = headers.find(
-    ({ name }) => name.toLowerCase() === 'content-type',
-  );
+const importRequestItem =
+  (parentId?: string) =>
+  ({
+    authentication: { username, password } = {},
+    headers = [],
+    __insomnia,
+    body: itemBody,
+    name,
+    url = '',
+    method = 'GET',
+    params = [],
+  }: Item): ImportRequest => {
+    let contentTypeHeader = headers.find(({ name }) => name.toLowerCase() === 'content-type');
 
-  if (__insomnia?.format) {
-    const contentType = FORMAT_MAP[__insomnia.format];
+    if (__insomnia?.format) {
+      const contentType = FORMAT_MAP[__insomnia.format];
 
-    if (!contentTypeHeader) {
-      contentTypeHeader = {
-        name: 'Content-Type',
-        value: contentType,
-      };
-      headers.push(contentTypeHeader);
+      if (!contentTypeHeader) {
+        contentTypeHeader = {
+          name: 'Content-Type',
+          value: contentType,
+        };
+        headers.push(contentTypeHeader);
+      }
     }
-  }
 
-  let body = {};
+    let body = {};
 
-  const isForm =
-    contentTypeHeader &&
-    (contentTypeHeader.value.match(/^application\/x-www-form-urlencoded/i) ||
-      contentTypeHeader.value.match(/^multipart\/form-encoded/i));
+    const isForm =
+      contentTypeHeader &&
+      (contentTypeHeader.value.match(/^application\/x-www-form-urlencoded/i) ||
+        contentTypeHeader.value.match(/^multipart\/form-encoded/i));
 
-  if (isForm) {
-    const mimeType = contentTypeHeader ? contentTypeHeader.value.split(';')[0] : '';
-    const params = (typeof itemBody === 'string' ? itemBody : '')
-      .split('&')
-      .map(param => {
+    if (isForm) {
+      const mimeType = contentTypeHeader ? contentTypeHeader.value.split(';')[0] : '';
+      const params = (typeof itemBody === 'string' ? itemBody : '').split('&').map(param => {
         const [name, value] = param.split('=');
         return {
           name: decodeURIComponent(name),
           value: decodeURIComponent(value || ''),
         };
       });
-    body = {
-      mimeType,
-      params,
-    };
-  } else if (itemBody) {
-    const mimeType = __insomnia?.format ? FORMAT_MAP[__insomnia?.format] : '';
-    body = {
-      mimeType,
-      text: itemBody,
-    };
-  }
+      body = {
+        mimeType,
+        params,
+      };
+    } else if (itemBody) {
+      const mimeType = __insomnia?.format ? FORMAT_MAP[__insomnia?.format] : '';
+      body = {
+        mimeType,
+        text: itemBody,
+      };
+    }
 
-  const count = requestCount++;
-  return {
-    _type: 'request',
-    _id: `__REQ_${count}__`,
-    parentId,
-    name: name || `Imported HAR ${count}`,
-    url,
-    method,
-    body,
-    parameters: params || [],
-    headers,
-    authentication: {
-      password,
-      username,
-    },
+    const count = requestCount++;
+    return {
+      _type: 'request',
+      _id: `__REQ_${count}__`,
+      parentId,
+      name: name || `Imported HAR ${count}`,
+      url,
+      method,
+      body,
+      parameters: params || [],
+      headers,
+      authentication: {
+        password,
+        username,
+      },
+    };
   };
-};
 
 export const convert: Converter = rawData => {
   requestCount = 1;
@@ -159,10 +152,7 @@ export const convert: Converter = rawData => {
   return data.items
     .map(item => {
       const requestGroup = importRequestGroupItem(item);
-      return [
-        requestGroup,
-        ...item.requests.map(importRequestItem(requestGroup._id)),
-      ];
+      return [requestGroup, ...item.requests.map(importRequestItem(requestGroup._id))];
     })
     .flat();
 };
diff --git a/packages/insomnia/src/utils/importers/importers/insomnia-2.ts b/packages/insomnia/src/utils/importers/importers/insomnia-2.ts
index d3092b4432..037d498567 100644
--- a/packages/insomnia/src/utils/importers/importers/insomnia-2.ts
+++ b/packages/insomnia/src/utils/importers/importers/insomnia-2.ts
@@ -31,9 +31,7 @@ export const convert: Converter = rawData => {
     }
 
     // Convert old String request bodies to new (HAR) schema
-    const contentTypeHeader = resource.headers?.find(
-      ({ name }) => name.toLowerCase() === 'content-type',
-    );
+    const contentTypeHeader = resource.headers?.find(({ name }) => name.toLowerCase() === 'content-type');
 
     const mimeType = contentTypeHeader?.value.split(';')[0] ?? '';
     resource.body = {
diff --git a/packages/insomnia/src/utils/importers/importers/openapi-3.ts b/packages/insomnia/src/utils/importers/importers/openapi-3.ts
index b87253ddee..1d3b4c354f 100644
--- a/packages/insomnia/src/utils/importers/importers/openapi-3.ts
+++ b/packages/insomnia/src/utils/importers/importers/openapi-3.ts
@@ -10,20 +10,24 @@ import { unthrowableParseJson } from '../utils';
 export const id = 'openapi3';
 export const name = 'OpenAPI 3.0';
 export const description = 'Importer for OpenAPI 3.0 specification (json/yaml)';
-const toCamelCase = (a: string) => a.replace(/`|'/g, '')
-  .replace(/[a-z](?=[A-Z][a-z])/g, '$& ')
-  .replace(/[\W_]*([a-z0-9]+)[\W_]*/gi, (_, b, i) => (i ? b[0].toUpperCase() : '') + b.slice(i > 0).toLowerCase());
+const toCamelCase = (a: string) =>
+  a
+    .replace(/`|'/g, '')
+    .replace(/[a-z](?=[A-Z][a-z])/g, '$& ')
+    .replace(/[\W_]*([a-z0-9]+)[\W_]*/gi, (_, b, i) => (i ? b[0].toUpperCase() : '') + b.slice(i > 0).toLowerCase());
 function isPlainObject(value: any) {
   if (typeof value !== 'object' || value === null) {
     return false;
   }
 
   const prototype = Object.getPrototypeOf(value);
-  return (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) && !(Symbol.toStringTag in value) && !(Symbol.iterator in value);
+  return (
+    (prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null) &&
+    !(Symbol.toStringTag in value) &&
+    !(Symbol.iterator in value)
+  );
 }
 
- 
-
 const SUPPORTED_OPENAPI_VERSION = /^3\.\d+\.\d+$/;
 
 // 3.x.x
@@ -47,15 +51,8 @@ const OAUTH_FLOWS = {
   IMPLICIT: 'implicit',
   PASSWORD: 'password',
 } as const;
-const SUPPORTED_SECURITY_TYPES = [
-  SECURITY_TYPE.HTTP,
-  SECURITY_TYPE.API_KEY,
-  SECURITY_TYPE.OAUTH,
-];
-const SUPPORTED_HTTP_AUTH_SCHEMES = [
-  HTTP_AUTH_SCHEME.BASIC,
-  HTTP_AUTH_SCHEME.BEARER,
-];
+const SUPPORTED_SECURITY_TYPES = [SECURITY_TYPE.HTTP, SECURITY_TYPE.API_KEY, SECURITY_TYPE.OAUTH];
+const SUPPORTED_HTTP_AUTH_SCHEMES = [HTTP_AUTH_SCHEME.BASIC, HTTP_AUTH_SCHEME.BEARER];
 const VARIABLE_SEARCH_VALUE = /{([^}]+)}/g;
 let requestCounts: Record<string, number> = {};
 
@@ -110,8 +107,7 @@ const resolveVariables = (server: OpenAPIV3.ServerObject) => {
  */
 const parseDocument = (rawData: string): OpenAPIV3.Document | null => {
   try {
-    return (unthrowableParseJson(rawData) ||
-      YAML.parse(rawData)) as OpenAPIV3.Document;
+    return (unthrowableParseJson(rawData) || YAML.parse(rawData)) as OpenAPIV3.Document;
   } catch (err) {
     return null;
   }
@@ -146,19 +142,15 @@ const parseEnvs = (baseEnv: ImportRequest, document?: OpenAPIV3.Document | null)
     document.components?.securitySchemes as unknown as OpenAPIV3.SecuritySchemeObject,
   );
 
-  return servers
-    .map(server => {
+  return (
+    servers.map(server => {
       const currentServerUrl = getServerUrl(server);
       const protocol = currentServerUrl.protocol || '';
 
       // Base path is pulled out of the URL, and the trailing slash is removed
       const basePath = (currentServerUrl.pathname || '').replace(/\/$/, '');
 
-      const hash = crypto
-        .createHash('sha1')
-        .update(server.url)
-        .digest('hex')
-        .slice(0, 8);
+      const hash = crypto.createHash('sha1').update(server.url).digest('hex').slice(0, 8);
       const openapiEnv: ImportRequest = {
         _type: 'environment',
         _id: `env___BASE_ENVIRONMENT_ID___sub__${hash}`,
@@ -174,7 +166,8 @@ const parseEnvs = (baseEnv: ImportRequest, document?: OpenAPIV3.Document | null)
       };
 
       return openapiEnv;
-    }) || [];
+    }) || []
+  );
 };
 
 /**
@@ -206,7 +199,7 @@ const parseEndpoints = (document?: OpenAPIV3.Document | null) => {
         .filter(([key, value]) => isPlainObject(value) && !isSpecExtension(key));
 
       return methods.map(([method]) => ({
-        ...((schemasPerMethod as Record<string, OpenAPIV3.SchemaObject>)[method]),
+        ...(schemasPerMethod as Record<string, OpenAPIV3.SchemaObject>)[method],
         path,
         method,
       }));
@@ -214,10 +207,13 @@ const parseEndpoints = (document?: OpenAPIV3.Document | null) => {
     .flat();
 
   const folders = document.tags?.map(importFolderItem(defaultParent)) || [];
-  const folderLookup = folders.reduce((accumulator, folder) => ({
-    ...accumulator,
-    ...(folder.name ? { [folder.name]: folder._id } : {}),
-  }), {} as Record<OpenAPIV3.TagObject['name'], string | undefined>);
+  const folderLookup = folders.reduce(
+    (accumulator, folder) => ({
+      ...accumulator,
+      ...(folder.name ? { [folder.name]: folder._id } : {}),
+    }),
+    {} as Record<OpenAPIV3.TagObject['name'], string | undefined>,
+  );
 
   const requests: ImportRequest[] = [];
   endpointsSchemas.forEach(endpointSchema => {
@@ -230,52 +226,41 @@ const parseEndpoints = (document?: OpenAPIV3.Document | null) => {
     tags.forEach(tag => {
       const parentId = folderLookup[tag] || defaultParent;
       const resolvedSecurity = (endpointSchema as unknown as OpenAPIV3.Document).security || rootSecurity;
-      requests.push(
-        importRequest(
-          endpointSchema,
-          parentId,
-          resolvedSecurity,
-          securitySchemes,
-        ),
-      );
+      requests.push(importRequest(endpointSchema, parentId, resolvedSecurity, securitySchemes));
     });
   });
 
-  return [
-    ...folders,
-    ...requests,
-  ];
+  return [...folders, ...requests];
 };
 
 /**
  * Return Insomnia folder / request group
  */
-const importFolderItem = (parentId: string) => (
-  item: OpenAPIV3.SchemaObject,
-): ImportRequest => {
-  const hash = crypto
-    .createHash('sha1')
-    // @ts-expect-error -- this is not present on the official types, yet was here in the source code
-    .update(item.name)
-    .digest('hex')
-    .slice(0, 8);
-  return {
-    parentId,
-    _id: `fld___WORKSPACE_ID__${hash}`,
-    _type: 'request_group',
-    // @ts-expect-error -- this is not present on the official types, yet was here in the source code
-    name: item.name || 'Folder {requestGroupCount}',
-    description: item.description || '',
+const importFolderItem =
+  (parentId: string) =>
+  (item: OpenAPIV3.SchemaObject): ImportRequest => {
+    const hash = crypto
+      .createHash('sha1')
+      // @ts-expect-error -- this is not present on the official types, yet was here in the source code
+      .update(item.name)
+      .digest('hex')
+      .slice(0, 8);
+    return {
+      parentId,
+      _id: `fld___WORKSPACE_ID__${hash}`,
+      _type: 'request_group',
+      // @ts-expect-error -- this is not present on the official types, yet was here in the source code
+      name: item.name || 'Folder {requestGroupCount}',
+      description: item.description || '',
+    };
   };
-};
 
 /**
  * Return path with parameters replaced by insomnia variables
  *
  * I.e. "/foo/:bar" => "/foo/{{ bar }}"
  */
-const pathWithParamsAsVariables = (path?: string) =>
-  path?.replace(VARIABLE_SEARCH_VALUE, '{{ _.$1 }}') ?? '';
+const pathWithParamsAsVariables = (path?: string) => path?.replace(VARIABLE_SEARCH_VALUE, '{{ _.$1 }}') ?? '';
 
 /**
  * Return Insomnia request
@@ -315,9 +300,10 @@ const importRequest = (
  */
 const prepareQueryParams = (endpointSchema: OpenAPIV3.PathItemObject) => {
   return convertParameters(
-    endpointSchema.parameters?.filter(parameter => (
-      (parameter as OpenAPIV3.ParameterObject).in === 'query'
-    )) as OpenAPIV3.ParameterObject[]);
+    endpointSchema.parameters?.filter(
+      parameter => (parameter as OpenAPIV3.ParameterObject).in === 'query',
+    ) as OpenAPIV3.ParameterObject[],
+  );
 };
 
 /**
@@ -325,14 +311,13 @@ const prepareQueryParams = (endpointSchema: OpenAPIV3.PathItemObject) => {
  */
 const prepareHeaders = (endpointSchema: OpenAPIV3.PathItemObject, body: any) => {
   let paramHeaders = convertParameters(
-    endpointSchema.parameters?.filter(parameter => (
-      (parameter as OpenAPIV3.ParameterObject).in === 'header'
-    )) as OpenAPIV3.ParameterObject[]);
-
-  const noContentTypeHeader = !paramHeaders?.find(
-    header => header.name === 'Content-Type',
+    endpointSchema.parameters?.filter(
+      parameter => (parameter as OpenAPIV3.ParameterObject).in === 'header',
+    ) as OpenAPIV3.ParameterObject[],
   );
 
+  const noContentTypeHeader = !paramHeaders?.find(header => header.name === 'Content-Type');
+
   if (body && body.mimeType && noContentTypeHeader) {
     paramHeaders = [
       {
@@ -372,12 +357,8 @@ const parseSecurity = (
         };
       });
     })
-    .filter(({ schemeDetails }) => (
-      schemeDetails && SUPPORTED_SECURITY_TYPES.includes(schemeDetails.type)
-    ));
-  const apiKeySchemes = supportedSchemes.filter(scheme => (
-    scheme.schemeDetails.type === SECURITY_TYPE.API_KEY
-  ));
+    .filter(({ schemeDetails }) => schemeDetails && SUPPORTED_SECURITY_TYPES.includes(schemeDetails.type));
+  const apiKeySchemes = supportedSchemes.filter(scheme => scheme.schemeDetails.type === SECURITY_TYPE.API_KEY);
   const apiKeyHeaders = apiKeySchemes
     .filter(scheme => scheme.schemeDetails.in === 'header')
     .map(scheme => {
@@ -420,9 +401,9 @@ const parseSecurity = (
     const authScheme = supportedSchemes.find(
       scheme =>
         SUPPORTED_SECURITY_TYPES.includes(scheme.schemeDetails.type) &&
-        (scheme.schemeDetails.type === SECURITY_TYPE.OAUTH
-          || (apiKeySecuritySchemas === 1 && scheme.schemeDetails.type === SECURITY_TYPE.API_KEY)
-          || SUPPORTED_HTTP_AUTH_SCHEMES.includes(scheme.schemeDetails.scheme)),
+        (scheme.schemeDetails.type === SECURITY_TYPE.OAUTH ||
+          (apiKeySecuritySchemas === 1 && scheme.schemeDetails.type === SECURITY_TYPE.API_KEY) ||
+          SUPPORTED_HTTP_AUTH_SCHEMES.includes(scheme.schemeDetails.scheme)),
     );
 
     if (!authScheme) {
@@ -431,9 +412,7 @@ const parseSecurity = (
 
     switch (authScheme.schemeDetails.type) {
       case SECURITY_TYPE.HTTP:
-        return parseHttpAuth(
-          (authScheme.schemeDetails as OpenAPIV3.HttpSecurityScheme).scheme,
-        );
+        return parseHttpAuth((authScheme.schemeDetails as OpenAPIV3.HttpSecurityScheme).scheme);
 
       case SECURITY_TYPE.OAUTH:
         return parseOAuth2(authScheme.schemeDetails as OpenAPIV3.OAuth2SecurityScheme, authScheme.securityScopes);
@@ -474,16 +453,16 @@ const getSecurityEnvVariables = (securitySchemeObject?: OpenAPIV3.SecurityScheme
     variables[name] = name;
   });
 
-  const hasHttpBasicScheme = securitySchemes.some(scheme => (
-    scheme.type === SECURITY_TYPE.HTTP && scheme.scheme === 'basic'
-  ));
+  const hasHttpBasicScheme = securitySchemes.some(
+    scheme => scheme.type === SECURITY_TYPE.HTTP && scheme.scheme === 'basic',
+  );
   if (hasHttpBasicScheme) {
     variables.httpUsername = 'username';
     variables.httpPassword = 'password';
   }
-  const hasHttpBearerScheme = securitySchemes.some(scheme => (
-    scheme.type === SECURITY_TYPE.HTTP && scheme.scheme === 'bearer'
-  ));
+  const hasHttpBearerScheme = securitySchemes.some(
+    scheme => scheme.type === SECURITY_TYPE.HTTP && scheme.scheme === 'bearer',
+  );
   if (hasHttpBearerScheme) {
     variables.bearerToken = 'bearerToken';
   }
@@ -493,18 +472,11 @@ const getSecurityEnvVariables = (securitySchemeObject?: OpenAPIV3.SecurityScheme
       accumulator.oauth2ClientId = 'clientId';
       const flows = scheme.flows || {};
 
-      if (
-        flows.authorizationCode ||
-        flows.implicit
-      ) {
+      if (flows.authorizationCode || flows.implicit) {
         accumulator.oauth2RedirectUrl = 'http://localhost/';
       }
 
-      if (
-        flows.authorizationCode ||
-        flows.clientCredentials ||
-        flows.password
-      ) {
+      if (flows.authorizationCode || flows.clientCredentials || flows.password) {
         accumulator.oauth2ClientSecret = 'clientSecret';
       }
 
@@ -555,17 +527,12 @@ const prepareBody = (endpointSchema: OpenAPIV3.OperationObject): ImportRequest['
     };
   }
 
-  if (
-    mimeTypes &&
-    mimeTypes.length &&
-    mimeTypes[0] !== MIMETYPE_LITERALLY_ANYTHING
-  ) {
+  if (mimeTypes && mimeTypes.length && mimeTypes[0] !== MIMETYPE_LITERALLY_ANYTHING) {
     return {
       mimeType: mimeTypes[0] || undefined,
     };
   }
   return {};
-
 };
 
 /**
@@ -589,31 +556,29 @@ const convertParameters = (parameters: OpenAPIV3.ParameterObject[] = []) => {
 // @ts-expect-error -- ran out of time during TypeScript conversion to handle this particular recursion
 const generateParameterExample = (schema: OpenAPIV3.SchemaObject | string) => {
   const typeExamples = {
-    string: () => 'string',
-    string_email: () => 'user@example.com',
+    'string': () => 'string',
+    'string_email': () => 'user@example.com',
     'string_date-time': () => new Date().toISOString(),
-    string_byte: () => 'ZXhhbXBsZQ==',
-    number: () => 0,
-    number_float: () => 0.0,
-    number_double: () => 0.0,
-    integer: () => 0,
-    boolean: () => true,
-    object: (schema: OpenAPIV3.SchemaObject) => {
+    'string_byte': () => 'ZXhhbXBsZQ==',
+    'number': () => 0,
+    'number_float': () => 0.0,
+    'number_double': () => 0.0,
+    'integer': () => 0,
+    'boolean': () => true,
+    'object': (schema: OpenAPIV3.SchemaObject) => {
       const example: OpenAPIV3.SchemaObject['properties'] = {};
       const { properties } = schema;
 
       if (properties) {
         for (const propertyName of Object.keys(properties)) {
-          example[propertyName] = generateParameterExample(
-            properties[propertyName] as OpenAPIV3.SchemaObject,
-          );
+          example[propertyName] = generateParameterExample(properties[propertyName] as OpenAPIV3.SchemaObject);
         }
       }
 
       return example;
     },
     // @ts-expect-error -- ran out of time during TypeScript conversion to handle this particular recursion
-    array: (schema: OpenAPIV2.ItemsObject) => {
+    'array': (schema: OpenAPIV2.ItemsObject) => {
       // @ts-expect-error -- ran out of time during TypeScript conversion to handle this particular recursion
       const value = generateParameterExample(schema.items);
 
@@ -621,7 +586,6 @@ const generateParameterExample = (schema: OpenAPIV3.SchemaObject | string) => {
         return value;
       }
       return [value];
-
     },
   };
 
@@ -659,17 +623,11 @@ const generateParameterExample = (schema: OpenAPIV3.SchemaObject | string) => {
 /**
  * Generates a unique and deterministic request ID based on the endpoint schema
  */
-const generateUniqueRequestId = (
-  endpointSchema: OpenAPIV3.OperationObject<{ method?: string; path?: string }>,
-) => {
+const generateUniqueRequestId = (endpointSchema: OpenAPIV3.OperationObject<{ method?: string; path?: string }>) => {
   // `operationId` is already unique to the workspace, so we can just use that, combined with the workspace id to get something globally unique
   const uniqueKey = endpointSchema.operationId || `[${endpointSchema.method}]${endpointSchema.path}`;
 
-  const hash = crypto
-    .createHash('sha1')
-    .update(uniqueKey)
-    .digest('hex')
-    .slice(0, 8);
+  const hash = crypto.createHash('sha1').update(uniqueKey).digest('hex').slice(0, 8);
 
   // Suffix the ID with a counter in case we try creating two with the same hash
   if (hash in requestCounts) {
@@ -714,7 +672,7 @@ const parseApiKeyAuth = (schemeDetails: OpenAPIV3.ApiKeySecurityScheme) => {
 
 const parseOAuth2Scopes = (
   flow: OpenAPIV3.OAuth2SecurityScheme['flows'][keyof OpenAPIV3.OAuth2SecurityScheme['flows']],
-  selectedScopes: string[]
+  selectedScopes: string[],
 ) => {
   if (!flow?.scopes) {
     return '';
@@ -724,9 +682,7 @@ const parseOAuth2Scopes = (
   return scopes.filter(scope => selectedScopes.includes(scope)).join(' ');
 };
 
-const mapOAuth2GrantType = (
-  grantType: keyof OpenAPIV3.OAuth2SecurityScheme['flows'],
-) => {
+const mapOAuth2GrantType = (grantType: keyof OpenAPIV3.OAuth2SecurityScheme['flows']) => {
   const types = {
     [OAUTH_FLOWS.AUTHORIZATION_CODE]: 'authorization_code',
     [OAUTH_FLOWS.CLIENT_CREDENTIALS]: 'client_credentials',
@@ -737,9 +693,7 @@ const mapOAuth2GrantType = (
 };
 
 const parseOAuth2 = (scheme: OpenAPIV3.OAuth2SecurityScheme, selectedScopes: string[]) => {
-  const flows = Object.keys(
-    scheme.flows,
-  ) as (keyof OpenAPIV3.OAuth2SecurityScheme['flows'])[];
+  const flows = Object.keys(scheme.flows) as (keyof OpenAPIV3.OAuth2SecurityScheme['flows'])[];
 
   if (!flows.length) {
     return {};
@@ -765,22 +719,26 @@ const parseOAuth2 = (scheme: OpenAPIV3.OAuth2SecurityScheme, selectedScopes: str
         ...base,
         clientSecret: '{{ _.oauth2ClientSecret }}',
         redirectUrl: '{{ _.oauth2RedirectUrl }}',
-        accessTokenUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.AUTHORIZATION_CODE])?.tokenUrl,
-        authorizationUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.AUTHORIZATION_CODE])?.authorizationUrl,
+        accessTokenUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.AUTHORIZATION_CODE])
+          ?.tokenUrl,
+        authorizationUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.AUTHORIZATION_CODE])
+          ?.authorizationUrl,
       };
 
     case OAUTH_FLOWS.CLIENT_CREDENTIALS:
       return {
         ...base,
         clientSecret: '{{ _.oauth2ClientSecret }}',
-        accessTokenUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.CLIENT_CREDENTIALS])?.tokenUrl,
+        accessTokenUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.CLIENT_CREDENTIALS])
+          ?.tokenUrl,
       };
 
     case OAUTH_FLOWS.IMPLICIT:
       return {
         ...base,
         redirectUrl: '{{ _.oauth2RedirectUrl }}',
-        authorizationUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.IMPLICIT])?.authorizationUrl,
+        authorizationUrl: (flow as OpenAPIV3.OAuth2SecurityScheme['flows'][typeof OAUTH_FLOWS.IMPLICIT])
+          ?.authorizationUrl,
       };
 
     case OAUTH_FLOWS.PASSWORD:
@@ -809,11 +767,11 @@ export const convert: Converter = async rawData => {
   }
 
   try {
-    apiDocument = await SwaggerParser.validate(apiDocument, {
+    apiDocument = (await SwaggerParser.validate(apiDocument, {
       dereference: {
         circular: 'ignore',
       },
-    }) as OpenAPIV3.Document;
+    })) as OpenAPIV3.Document;
   } catch (err) {
     console.log('[openapi-3] Import file validation failed', err);
   }
@@ -840,10 +798,5 @@ export const convert: Converter = async rawData => {
   const openapiEnvs = parseEnvs(baseEnv, apiDocument);
   const endpoints = parseEndpoints(apiDocument);
 
-  return [
-    workspace,
-    baseEnv,
-    ...openapiEnvs,
-    ...endpoints,
-  ];
+  return [workspace, baseEnv, ...openapiEnvs, ...endpoints];
 };
diff --git a/packages/insomnia/src/utils/importers/importers/postman-env.ts b/packages/insomnia/src/utils/importers/importers/postman-env.ts
index 43a191916f..bf5344230f 100644
--- a/packages/insomnia/src/utils/importers/importers/postman-env.ts
+++ b/packages/insomnia/src/utils/importers/importers/postman-env.ts
@@ -27,9 +27,7 @@ const validPostmanEnvTypeList = Object.values(POSTMAN_ENV_TYPE) as string[];
 
 export const convert: Converter<Data> = rawData => {
   try {
-    const { _postman_variable_scope, name, values } = JSON.parse(
-      rawData,
-    ) as Environment;
+    const { _postman_variable_scope, name, values } = JSON.parse(rawData) as Environment;
 
     if (!validPostmanEnvTypeList.includes(_postman_variable_scope)) {
       return null;
diff --git a/packages/insomnia/src/utils/importers/importers/postman.test.ts b/packages/insomnia/src/utils/importers/importers/postman.test.ts
index d3ba85d8f8..e5d70e3b4f 100644
--- a/packages/insomnia/src/utils/importers/importers/postman.test.ts
+++ b/packages/insomnia/src/utils/importers/importers/postman.test.ts
@@ -10,32 +10,33 @@ describe('postman', () => {
   }: {
     requests?: Request1[];
     version?: string;
-  } = {}) => JSON.parse(JSON.stringify({
-    info: {
-      name: 'Postman Schema',
-      schema: `https://schema.getpostman.com/json/collection/${version}/collection.json`,
-    },
-    item: [
-      {
-        request: {},
-        name: 'Projects',
+  } = {}) =>
+    JSON.parse(
+      JSON.stringify({
+        info: {
+          name: 'Postman Schema',
+          schema: `https://schema.getpostman.com/json/collection/${version}/collection.json`,
+        },
         item: [
-          ...requests,
           {
-            name: 'Request 1',
-            request: {
-
-            },
+            request: {},
+            name: 'Projects',
+            item: [
+              ...requests,
+              {
+                name: 'Request 1',
+                request: {},
+              },
+            ],
           },
         ],
-      },
-    ],
-  })) as HttpsSchemaGetpostmanComJsonCollectionV210;
+      }),
+    ) as HttpsSchemaGetpostmanComJsonCollectionV210;
 
   describe('transformPostmanToNunjucksString', () => {
     it('should transform to nunjucks syntax', () => {
       const input = '{{$guid}}abc{{$randomStreetAddress}}def{{$guid}}';
-      const output = '{% faker \'guid\' %}abc{% faker \'randomStreetAddress\' %}def{% faker \'guid\' %}';
+      const output = "{% faker 'guid' %}abc{% faker 'randomStreetAddress' %}def{% faker 'guid' %}";
       expect(transformPostmanToNunjucksString(input)).toEqual(output);
       expect(transformPostmanToNunjucksString()).toEqual('');
     });
@@ -89,7 +90,8 @@ describe('postman', () => {
           header: [
             {
               key: 'Authorization',
-              value: 'AWS4-HMAC-SHA256 Credential=<accessKeyId>/20220110/<region>/<service>/aws4_request, SignedHeaders=accept;content-type;host;x-amz-date;x-amz-security-token, Signature=ed270ed6ad1cad3513f6edad9692e4496e321e44954c70a86504eea5e0ef1ff5',
+              value:
+                'AWS4-HMAC-SHA256 Credential=<accessKeyId>/20220110/<region>/<service>/aws4_request, SignedHeaders=accept;content-type;host;x-amz-date;x-amz-security-token, Signature=ed270ed6ad1cad3513f6edad9692e4496e321e44954c70a86504eea5e0ef1ff5',
             },
             {
               key: 'X-Amz-Security-Token',
@@ -151,10 +153,13 @@ describe('postman', () => {
           value: 'Another-value',
         };
         const request: Request1 = {
-          header: [{
-            key: 'Authorization',
-            value: 'Bearer {{token}}',
-          }, nonAuthHeader],
+          header: [
+            {
+              key: 'Authorization',
+              value: 'Bearer {{token}}',
+            },
+            nonAuthHeader,
+          ],
         };
         const schema = postmanSchema({ requests: [request] });
         const postman = new ImportPostman(schema);
@@ -170,10 +175,12 @@ describe('postman', () => {
 
       it('handles multiple spaces', () => {
         const request: Request1 = {
-          header: [{
-            key: 'Authorization',
-            value: 'Bearer        {{token}}',
-          }],
+          header: [
+            {
+              key: 'Authorization',
+              value: 'Bearer        {{token}}',
+            },
+          ],
         };
         const schema = postmanSchema({ requests: [request] });
         const postman = new ImportPostman(schema);
@@ -189,10 +196,12 @@ describe('postman', () => {
 
       it('handles no token', () => {
         const request: Request1 = {
-          header: [{
-            key: 'Authorization',
-            value: 'Bearer ',
-          }],
+          header: [
+            {
+              key: 'Authorization',
+              value: 'Bearer ',
+            },
+          ],
         };
         const schema = postmanSchema({ requests: [request] });
         const postman = new ImportPostman(schema);
@@ -212,10 +221,12 @@ describe('postman', () => {
         const username = 'Gandalf';
         const digest = `Digest username="${username}", realm="Realm", nonce="Nonce", uri="//api/v1/report?start_date_min=2019-01-01T00%3A00%3A00%2B00%3A00&start_date_max=2019-01-01T23%3A59%3A59%2B00%3A00&projects[]=%2Fprojects%2F1&include_child_projects=1&search_query=meeting&columns[]=project&include_project_data=1&sort[]=-duration", algorithm="MD5", response="f3f762321e158aefe103529eda4ddb7c", opaque="Opaque"`;
         const request: Request1 = {
-          header: [{
-            key: 'Authorization',
-            value: digest,
-          }],
+          header: [
+            {
+              key: 'Authorization',
+              value: digest,
+            },
+          ],
         };
         const schema = postmanSchema({ requests: [request] });
         const postman = new ImportPostman(schema);
@@ -232,12 +243,15 @@ describe('postman', () => {
 
     describe('oauth1', () => {
       it('returns simple oauth1 authentication', () => {
-        const oauth1 = 'OAuth realm="Realm",oauth_consumer_key="Consumer%20Key",oauth_token="Access%20Token",oauth_signature_method="HMAC-SHA1",oauth_timestamp="Timestamp",oauth_nonce="Nonce",oauth_version="Version",oauth_callback="Callback%20URL",oauth_verifier="Verifier",oauth_signature="TwJvZVasVWTL6X%2Bz3lmuiyvaX2Q%3D"';
+        const oauth1 =
+          'OAuth realm="Realm",oauth_consumer_key="Consumer%20Key",oauth_token="Access%20Token",oauth_signature_method="HMAC-SHA1",oauth_timestamp="Timestamp",oauth_nonce="Nonce",oauth_version="Version",oauth_callback="Callback%20URL",oauth_verifier="Verifier",oauth_signature="TwJvZVasVWTL6X%2Bz3lmuiyvaX2Q%3D"';
         const request: Request1 = {
-          header: [{
-            key: 'Authorization',
-            value: oauth1,
-          }],
+          header: [
+            {
+              key: 'Authorization',
+              value: oauth1,
+            },
+          ],
         };
         const schema = postmanSchema({ requests: [request] });
         const postman = new ImportPostman(schema);
@@ -365,63 +379,63 @@ describe('postman', () => {
 
     it('returns oauth2 for Postman v2.1.0 with PKCE', () => {
       const requestWithPCKE: Request1 = {
-        'auth': {
-          'type': 'oauth2',
-          'oauth2': [
+        auth: {
+          type: 'oauth2',
+          oauth2: [
             {
-              'key': 'state',
-              'value': '1234567890',
-              'type': 'string',
+              key: 'state',
+              value: '1234567890',
+              type: 'string',
             },
             {
-              'key': 'scope',
-              'value': 'read:org',
-              'type': 'string',
+              key: 'scope',
+              value: 'read:org',
+              type: 'string',
             },
             {
-              'key': 'clientSecret',
-              'value': '1234567890',
-              'type': 'string',
+              key: 'clientSecret',
+              value: '1234567890',
+              type: 'string',
             },
             {
-              'key': 'clientId',
-              'value': '1234567890',
-              'type': 'string',
+              key: 'clientId',
+              value: '1234567890',
+              type: 'string',
             },
             {
-              'key': 'accessTokenUrl',
-              'value': 'https://accounts.google.com/o/oauth2/token',
-              'type': 'string',
+              key: 'accessTokenUrl',
+              value: 'https://accounts.google.com/o/oauth2/token',
+              type: 'string',
             },
             {
-              'key': 'authUrl',
-              'value': 'https://accounts.google.com/o/oauth2/auth',
-              'type': 'string',
+              key: 'authUrl',
+              value: 'https://accounts.google.com/o/oauth2/auth',
+              type: 'string',
             },
             {
-              'key': 'grant_type',
-              'value': 'authorization_code_with_pkce',
-              'type': 'string',
+              key: 'grant_type',
+              value: 'authorization_code_with_pkce',
+              type: 'string',
             },
             {
-              'key': 'tokenName',
-              'value': 'Test',
-              'type': 'string',
+              key: 'tokenName',
+              value: 'Test',
+              type: 'string',
             },
             {
-              'key': 'challengeAlgorithm',
-              'value': 'S256',
-              'type': 'string',
+              key: 'challengeAlgorithm',
+              value: 'S256',
+              type: 'string',
             },
             {
-              'key': 'addTokenTo',
-              'value': 'queryParams',
-              'type': 'string',
+              key: 'addTokenTo',
+              value: 'queryParams',
+              type: 'string',
             },
             {
-              'key': 'client_authentication',
-              'value': 'header',
-              'type': 'string',
+              key: 'client_authentication',
+              value: 'header',
+              type: 'string',
             },
             {
               key: 'redirect_uri',
@@ -430,18 +444,13 @@ describe('postman', () => {
             },
           ],
         },
-        'method': 'GET',
-        'header': [],
-        'url': {
-          'raw': 'https://mockbin.org/echo',
-          'protocol': 'https',
-          'host': [
-            'mockbin',
-            'org',
-          ],
-          'path': [
-            'echo',
-          ],
+        method: 'GET',
+        header: [],
+        url: {
+          raw: 'https://mockbin.org/echo',
+          protocol: 'https',
+          host: ['mockbin', 'org'],
+          path: ['echo'],
         },
       };
       const schema = postmanSchema({ requests: [requestWithPCKE], version: 'v2.1.0' });
diff --git a/packages/insomnia/src/utils/importers/importers/postman.ts b/packages/insomnia/src/utils/importers/importers/postman.ts
index 4df3c42f3d..c8d7c31816 100644
--- a/packages/insomnia/src/utils/importers/importers/postman.ts
+++ b/packages/insomnia/src/utils/importers/importers/postman.ts
@@ -151,10 +151,7 @@ export class ImportPostman {
     return variable;
   };
 
-  importItems = (
-    items: PostmanCollection['item'],
-    parentId = '__WORKSPACE_ID__',
-  ): ImportRequest[] => {
+  importItems = (items: PostmanCollection['item'], parentId = '__WORKSPACE_ID__'): ImportRequest[] => {
     // @ts-expect-error this is because there are devergent behaviors for how the function treats this collection.  This is handled appropriately in the function itself in different branches.
     return items.reduce((accumulator: ImportRequest[], item: Item | Folder) => {
       if (Object.prototype.hasOwnProperty.call(item, 'request')) {
@@ -165,10 +162,7 @@ export class ImportPostman {
       return [
         ...accumulator,
         requestGroup,
-        ...this.importItems(
-          item.item as PostmanCollection['item'],
-          requestGroup._id,
-        ),
+        ...this.importItems(item.item as PostmanCollection['item'], requestGroup._id),
       ];
     }, []);
   };
@@ -178,18 +172,19 @@ export class ImportPostman {
       return '';
     }
 
-    const preRequestEvent = events.find(
-      event => event.listen === 'prerequest'
-    );
+    const preRequestEvent = events.find(event => event.listen === 'prerequest');
 
     const scriptOrRows = preRequestEvent != null ? preRequestEvent.script : '';
     if (scriptOrRows == null || scriptOrRows === '') {
       return '';
     }
 
-    const scriptContent = scriptOrRows.exec != null ?
-      (Array.isArray(scriptOrRows.exec) ? scriptOrRows.exec.join('\n') : scriptOrRows.exec) :
-      '';
+    const scriptContent =
+      scriptOrRows.exec != null
+        ? Array.isArray(scriptOrRows.exec)
+          ? scriptOrRows.exec.join('\n')
+          : scriptOrRows.exec
+        : '';
 
     return translateHandlersInScript(scriptContent);
   };
@@ -199,26 +194,23 @@ export class ImportPostman {
       return '';
     }
 
-    const afterResponseEvent = events.find(
-      event => event.listen === 'test'
-    );
+    const afterResponseEvent = events.find(event => event.listen === 'test');
 
     const scriptOrRows = afterResponseEvent ? afterResponseEvent.script : '';
     if (!scriptOrRows) {
       return '';
     }
 
-    const scriptContent = scriptOrRows.exec ?
-      (Array.isArray(scriptOrRows.exec) ? scriptOrRows.exec.join('\n') : scriptOrRows.exec) :
-      '';
+    const scriptContent = scriptOrRows.exec
+      ? Array.isArray(scriptOrRows.exec)
+        ? scriptOrRows.exec.join('\n')
+        : scriptOrRows.exec
+      : '';
 
     return translateHandlersInScript(scriptContent);
   };
 
-  importRequestItem = (
-    { request, name = '', event }: Item,
-    parentId: string,
-  ): ImportRequest => {
+  importRequestItem = ({ request, name = '', event }: Item, parentId: string): ImportRequest => {
     if (typeof request === 'string') {
       return {};
     }
@@ -274,11 +266,14 @@ export class ImportPostman {
     if (!parameters || parameters?.length === 0) {
       return [];
     }
-    return parameters.map(({ key, value, disabled }) => ({
-      name: transformPostmanToNunjucksString(key),
-      value: transformPostmanToNunjucksString(value),
-      disabled: disabled || false,
-    }) as Parameter);
+    return parameters.map(
+      ({ key, value, disabled }) =>
+        ({
+          name: transformPostmanToNunjucksString(key),
+          value: transformPostmanToNunjucksString(value),
+          disabled: disabled || false,
+        }) as Parameter,
+    );
   };
 
   importFolderItem = ({ name, description, event, auth }: Folder, parentId: string) => {
@@ -363,7 +358,7 @@ export class ImportPostman {
       return this.importBodyFormUrlEncoded(body.urlencoded);
     }
     if (body.mode === 'raw') {
-      const rawOptions = body.options?.raw as { language: string }
+      const rawOptions = body.options?.raw as { language: string };
       return this.importBodyRaw(body.raw, rawOptions?.language || '');
     }
     return {};
@@ -372,30 +367,28 @@ export class ImportPostman {
   importBodyFormdata = (formdata?: FormParameter[]) => {
     const { schema } = this.collection.info;
 
-    const params = formdata?.map(
-      ({ key, value, type, enabled, disabled, src }) => {
-        const item: Parameter = {
-          type,
-          name: transformPostmanToNunjucksString(key),
-        };
+    const params = formdata?.map(({ key, value, type, enabled, disabled, src }) => {
+      const item: Parameter = {
+        type,
+        name: transformPostmanToNunjucksString(key),
+      };
 
-        if (POSTMAN_SCHEMA_URLS_V2_0.includes(schema)) {
-          item.disabled = !enabled;
-        } else if (POSTMAN_SCHEMA_URLS_V2_1.includes(schema)) {
-          item.disabled = !!disabled;
-        }
+      if (POSTMAN_SCHEMA_URLS_V2_0.includes(schema)) {
+        item.disabled = !enabled;
+      } else if (POSTMAN_SCHEMA_URLS_V2_1.includes(schema)) {
+        item.disabled = !!disabled;
+      }
 
-        if (type === 'file') {
-          item.fileName = src as string;
-        } else if (typeof value === 'string') {
-          item.value = transformPostmanToNunjucksString(value);
-        } else {
-          item.value = value as string;
-        }
+      if (type === 'file') {
+        item.fileName = src as string;
+      } else if (typeof value === 'string') {
+        item.value = transformPostmanToNunjucksString(value);
+      } else {
+        item.value = value as string;
+      }
 
-        return item;
-      },
-    );
+      return item;
+    });
 
     return {
       params,
@@ -403,9 +396,7 @@ export class ImportPostman {
     };
   };
 
-  importBodyFormUrlEncoded = (
-    urlEncoded?: UrlEncodedParameter[],
-  ): ImportRequest['body'] => {
+  importBodyFormUrlEncoded = (urlEncoded?: UrlEncodedParameter[]): ImportRequest['body'] => {
     const { schema } = this.collection.info;
 
     const params = urlEncoded?.map(({ key, value, enabled, disabled }) => {
@@ -477,7 +468,6 @@ export class ImportPostman {
     if (!authentication) {
       if (authorizationHeader) {
         switch (authorizationHeader?.substring(0, authorizationHeader.indexOf(' '))) {
-
           case 'Bearer': // will work for OAuth2 as well
             return {
               authentication: this.importBearerAuthenticationFromHeader(authorizationHeader),
@@ -619,7 +609,9 @@ export class ImportPostman {
     }
     const isAMZSecurityTokenHeader = ({ key }: Header) => key === 'X-Amz-Security-Token';
     const sessionToken = headers?.find(isAMZSecurityTokenHeader)?.value;
-    const credentials = RegExp(/(?<=Credential=).*/).exec(authHeader)?.[0].split('/');
+    const credentials = RegExp(/(?<=Credential=).*/)
+      .exec(authHeader)?.[0]
+      .split('/');
 
     return {
       authentication: {
@@ -702,10 +694,7 @@ export class ImportPostman {
     }
 
     if (POSTMAN_SCHEMA_URLS_V2_1.includes(schema)) {
-      item.token = this.findValueByKey(
-        auth.bearer as V210Auth['bearer'],
-        'token',
-      );
+      item.token = this.findValueByKey(auth.bearer as V210Auth['bearer'], 'token');
     }
     item.token = transformPostmanToNunjucksString(item.token);
     return item;
@@ -820,7 +809,6 @@ export class ImportPostman {
 
   // Example: OAuth realm="Realm",oauth_consumer_key="Consumer%20Key",oauth_token="Access%20Token",oauth_signature_method="HMAC-SHA1",oauth_timestamp="Timestamp",oauth_nonce="Nonce",oauth_version="Version",oauth_callback="Callback%20URL",oauth_verifier="Verifier",oauth_signature="TwJvZVasVWTL6X%2Bz3lmuiyvaX2Q%3D"
   importOauth1AuthenticationFromHeader = (authHeader: string) => {
-
     const item = {
       type: 'oauth1',
       disabled: false,
@@ -839,7 +827,6 @@ export class ImportPostman {
     };
 
     return item;
-
   };
 
   importApiKeyAuthentication = (auth: Authentication) => {
@@ -911,10 +898,7 @@ export class ImportPostman {
     return item;
   };
 
-  findValueByKey = <T extends { key: string; value?: unknown }>(
-    array?: T[],
-    key?: keyof T,
-  ) => {
+  findValueByKey = <T extends { key: string; value?: unknown }>(array?: T[], key?: keyof T) => {
     if (!array) {
       return '';
     }
diff --git a/packages/insomnia/src/utils/importers/importers/swagger-2.ts b/packages/insomnia/src/utils/importers/importers/swagger-2.ts
index b20d93971a..ceadc14781 100644
--- a/packages/insomnia/src/utils/importers/importers/swagger-2.ts
+++ b/packages/insomnia/src/utils/importers/importers/swagger-2.ts
@@ -10,38 +10,28 @@ const SUPPORTED_SWAGGER_VERSION = '2.0';
 const MIMETYPE_JSON = 'application/json';
 const MIMETYPE_URLENCODED = 'application/x-www-form-urlencoded';
 const MIMETYPE_MULTIPART = 'multipart/form-data';
-const SUPPORTED_MIME_TYPES = [
-  MIMETYPE_JSON,
-  MIMETYPE_URLENCODED,
-  MIMETYPE_MULTIPART,
-];
+const SUPPORTED_MIME_TYPES = [MIMETYPE_JSON, MIMETYPE_URLENCODED, MIMETYPE_MULTIPART];
 const WORKSPACE_ID = '__WORKSPACE_ID__';
 let requestCount = 1;
 export const id = 'swagger2';
 export const name = 'Swagger 2.0';
 export const description = 'Importer for Swagger 2.0 specification (json/yaml)';
 
- 
-
 /**
  * Return Insomnia folder / request group
  */
-const importFolderItem = (parentId: string) => (
-  item: OpenAPIV2.TagObject,
-): ImportRequest => {
-  const hash = crypto
-    .createHash('sha1')
-    .update(item.name)
-    .digest('hex')
-    .slice(0, 8);
-  return {
-    parentId,
-    _id: `fld___WORKSPACE_ID__${hash}`,
-    _type: 'request_group',
-    name: item.name || 'Folder {requestGroupCount}',
-    description: item.description || '',
+const importFolderItem =
+  (parentId: string) =>
+  (item: OpenAPIV2.TagObject): ImportRequest => {
+    const hash = crypto.createHash('sha1').update(item.name).digest('hex').slice(0, 8);
+    return {
+      parentId,
+      _id: `fld___WORKSPACE_ID__${hash}`,
+      _type: 'request_group',
+      name: item.name || 'Folder {requestGroupCount}',
+      description: item.description || '',
+    };
   };
-};
 
 /**
  * Parse string data into swagger 2.0 object (https://github.com/OAI/OpenAPI-Specification/blob/master/versions/2.0.md#swagger-object)
@@ -60,14 +50,10 @@ const parseDocument = (rawData: string) => {
 const parseEndpoints = (document: OpenAPIV2.Document) => {
   const defaultParent = WORKSPACE_ID;
   const globalMimeTypes = document.consumes ?? [];
-  const endpointsSchemas: OpenAPIV2.OperationObject[] = Object.keys(
-    document.paths,
-  )
+  const endpointsSchemas: OpenAPIV2.OperationObject[] = Object.keys(document.paths)
     .map((path: keyof OpenAPIV2.PathsObject) => {
       const schemasPerMethod: OpenAPIV2.PathItemObject = document.paths[path];
-      const methods = Object.keys(
-        schemasPerMethod,
-      ) as (keyof OpenAPIV2.PathItemObject)[];
+      const methods = Object.keys(schemasPerMethod) as (keyof OpenAPIV2.PathItemObject)[];
       return methods
         .filter(method => method !== 'parameters' && method !== '$ref')
         .map(method => ({
@@ -93,9 +79,7 @@ const parseEndpoints = (document: OpenAPIV2.Document) => {
     .filter(tag => !tags.map(tag => tag.name).includes(tag))
     .map(name => ({ name, description: '' }));
 
-  const folders = [...tags, ...implicitTags].map(
-    importFolderItem(defaultParent),
-  );
+  const folders = [...tags, ...implicitTags].map(importFolderItem(defaultParent));
 
   const folderLookup = folders.reduce(
     (accumulator, { _id, name }) => ({
@@ -117,15 +101,7 @@ const parseEndpoints = (document: OpenAPIV2.Document) => {
         : `__REQUEST_${requestCount++}__`;
 
       const parentId = folderLookup[tag] || defaultParent;
-      requests.push(
-        importRequest(
-          document,
-          endpointSchema,
-          globalMimeTypes,
-          requestId,
-          parentId,
-        ),
-      );
+      requests.push(importRequest(document, endpointSchema, globalMimeTypes, requestId, parentId));
     });
   });
 
@@ -139,15 +115,12 @@ const importRequest = (
   requestId: string,
   parentId: string,
 ): ImportRequest => {
-  const name =
-    endpointSchema.summary || `${endpointSchema.method} ${endpointSchema.path}`;
+  const name = endpointSchema.summary || `${endpointSchema.method} ${endpointSchema.path}`;
 
   const body = prepareBody(document, endpointSchema, globalMimeTypes);
 
   let headers = prepareHeaders(endpointSchema);
-  const noContentTypeHeader = !headers?.find(
-    header => header.name === 'Content-Type',
-  );
+  const noContentTypeHeader = !headers?.find(header => header.name === 'Content-Type');
 
   if (body.mimeType && noContentTypeHeader) {
     headers = [
@@ -173,11 +146,7 @@ const importRequest = (
     parameters: prepareQueryParams(endpointSchema),
   };
 
-  return setupAuthentication(
-    document.securityDefinitions,
-    endpointSchema,
-    request,
-  );
+  return setupAuthentication(document.securityDefinitions, endpointSchema, request);
 };
 
 /**
@@ -197,10 +166,7 @@ const setupAuthentication = (
   }
 
   const usedDefinitions = endpointSchema.security.reduce(
-    (collect, requirement) => [
-      ...collect,
-      ...(Object.keys(requirement) as string[]),
-    ],
+    (collect, requirement) => [...collect, ...(Object.keys(requirement) as string[])],
     [] as string[],
   );
 
@@ -316,9 +282,7 @@ const pathWithParamsAsVariables = (path?: string) => {
 const prepareQueryParams = (endpointSchema: OpenAPIV2.OperationObject) => {
   return (
     convertParameters(
-      ((endpointSchema.parameters as unknown) as OpenAPIV2.Parameter[])?.filter(
-        parameter => parameter.in === 'query',
-      ),
+      (endpointSchema.parameters as unknown as OpenAPIV2.Parameter[])?.filter(parameter => parameter.in === 'query'),
     ) || []
   );
 };
@@ -326,24 +290,17 @@ const prepareQueryParams = (endpointSchema: OpenAPIV2.OperationObject) => {
 /**
  * Imports insomnia definitions of header parameters.
  */
-const prepareHeaders = (
-  endpointSchema: OpenAPIV2.OperationObject,
-): Header[] => {
+const prepareHeaders = (endpointSchema: OpenAPIV2.OperationObject): Header[] => {
   return (
     (convertParameters(
-      ((endpointSchema.parameters as unknown) as OpenAPIV2.Parameter[])?.filter(
-        parameter => parameter.in === 'header',
-      ),
+      (endpointSchema.parameters as unknown as OpenAPIV2.Parameter[])?.filter(parameter => parameter.in === 'header'),
     ) as Header[]) || []
   );
 };
 
 const resolve$ref = (document: OpenAPIV2.Document, $ref: string) => {
   const [, ...parts] = $ref.split('/') as (keyof OpenAPIV2.Document)[];
-  return parts.reduce(
-    (accumulator, path) => accumulator[path] as unknown as OpenAPIV2.Document,
-    document,
-  );
+  return parts.reduce((accumulator, path) => accumulator[path] as unknown as OpenAPIV2.Document, document);
 };
 
 /**
@@ -366,9 +323,7 @@ const prepareBody = (
 
   if (supportedMimeType && supportedMimeType.includes(MIMETYPE_JSON)) {
     const parameters = endpointSchema.parameters || [];
-    const bodyParameter = parameters.find(
-      parameter => (parameter as OpenAPIV2.Parameter).in === 'body',
-    );
+    const bodyParameter = parameters.find(parameter => (parameter as OpenAPIV2.Parameter).in === 'body');
 
     if (!bodyParameter) {
       return {};
@@ -396,9 +351,12 @@ const prepareBody = (
     };
   }
 
-  if (supportedMimeType && (supportedMimeType.includes(MIMETYPE_URLENCODED) || supportedMimeType.includes(MIMETYPE_MULTIPART))) {
+  if (
+    supportedMimeType &&
+    (supportedMimeType.includes(MIMETYPE_URLENCODED) || supportedMimeType.includes(MIMETYPE_MULTIPART))
+  ) {
     const parameters = endpointSchema.parameters || [];
-    const formDataParameters = ((parameters as unknown) as OpenAPIV2.Parameter[]).filter(
+    const formDataParameters = (parameters as unknown as OpenAPIV2.Parameter[]).filter(
       parameter => parameter.in === 'formData',
     );
 
@@ -417,8 +375,7 @@ const prepareBody = (
       mimeType: mimeTypes[0] || undefined,
     };
   }
-    return {};
-
+  return {};
 };
 
 type TypeExample =
@@ -442,19 +399,20 @@ const generateParameterExample = (
   parameter: OpenAPIV2.Parameter | TypeExample,
   ancestors: OpenAPIV2.Parameter[] = [],
 ) => {
-  const typeExamples: Record<TypeExample, (
-      parameter: OpenAPIV2.Parameter
-    ) => null | string | boolean | number | Record<string, unknown>> = {
-    string: () => 'string',
-    string_email: () => 'user@example.com',
+  const typeExamples: Record<
+    TypeExample,
+    (parameter: OpenAPIV2.Parameter) => null | string | boolean | number | Record<string, unknown>
+  > = {
+    'string': () => 'string',
+    'string_email': () => 'user@example.com',
     'string_date-time': () => new Date().toISOString(),
-    string_byte: () => 'ZXhhbXBsZQ==',
-    number: () => 0,
-    number_float: () => 0.0,
-    number_double: () => 0.0,
-    integer: () => 0,
-    boolean: () => true,
-    object: (parameter: OpenAPIV2.Parameter) => {
+    'string_byte': () => 'ZXhhbXBsZQ==',
+    'number': () => 0,
+    'number_float': () => 0.0,
+    'number_double': () => 0.0,
+    'integer': () => 0,
+    'boolean': () => true,
+    'object': (parameter: OpenAPIV2.Parameter) => {
       if (ancestors.indexOf(parameter) !== -1) {
         return {};
       }
@@ -466,24 +424,20 @@ const generateParameterExample = (
         ancestors.push(parameter);
         Object.keys(properties).forEach(propertyName => {
           // @ts-expect-error there's no way, so far as I'm aware, for TypeScript to know what's actually going on here.
-          example[propertyName] = generateParameterExample(
-            properties[propertyName],
-            ancestors,
-          );
+          example[propertyName] = generateParameterExample(properties[propertyName], ancestors);
         });
         ancestors.pop();
       }
 
       return example;
     },
-    array: ({ items, collectionFormat }: OpenAPIV2.Parameter) => {
+    'array': ({ items, collectionFormat }: OpenAPIV2.Parameter) => {
       const value = generateParameterExample(items, ancestors);
 
       if (collectionFormat === 'csv') {
         return value;
       }
-        return [value];
-
+      return [value];
     },
   };
 
@@ -502,9 +456,7 @@ const generateParameterExample = (
       return defaultValue;
     }
 
-    const factory =
-      typeExamples[`${type}_${format}` as TypeExample] ||
-      typeExamples[type as TypeExample];
+    const factory = typeExamples[`${type}_${format}` as TypeExample] || typeExamples[type as TypeExample];
 
     if (!factory) {
       return null;
diff --git a/packages/insomnia/src/utils/importers/importers/wsdl.ts b/packages/insomnia/src/utils/importers/importers/wsdl.ts
index aed66126b6..eb1b5ef2d0 100644
--- a/packages/insomnia/src/utils/importers/importers/wsdl.ts
+++ b/packages/insomnia/src/utils/importers/importers/wsdl.ts
@@ -96,9 +96,7 @@ const convertWsdlToPostman = async (input: string) => {
 export const convert: Converter = async rawData => {
   try {
     if (rawData.indexOf('wsdl:definition') !== -1) {
-      const postmanData = await convertWsdlToPostman(
-        `<?xml version="1.0" encoding="UTF-8" ?>${rawData}`,
-      );
+      const postmanData = await convertWsdlToPostman(`<?xml version="1.0" encoding="UTF-8" ?>${rawData}`);
       postmanData.info.schema += 'collection.json';
       const postmanJson = JSON.stringify(postmanData);
       return postman.convert(postmanJson);
diff --git a/packages/insomnia/src/utils/ndjson.ts b/packages/insomnia/src/utils/ndjson.ts
index 9d86803592..a5d63452e6 100644
--- a/packages/insomnia/src/utils/ndjson.ts
+++ b/packages/insomnia/src/utils/ndjson.ts
@@ -2,12 +2,16 @@ export const serializeNDJSON = (data: any[]): string => {
   return data.map((item: any) => JSON.stringify(item)).join('\n') + '\n';
 };
 export const deserializeNDJSON = (data: string): any[] => {
-  return data.split('\n').filter(e => e?.trim()).map((line: string) => {
-    try {
-      return JSON.parse(line);
-    } catch (e) {
-      console.log('Failed to deserialize line', line, e);
-      return undefined;
-    }
-  }).filter(e => e !== undefined);
+  return data
+    .split('\n')
+    .filter(e => e?.trim())
+    .map((line: string) => {
+      try {
+        return JSON.parse(line);
+      } catch (e) {
+        console.log('Failed to deserialize line', line, e);
+        return undefined;
+      }
+    })
+    .filter(e => e !== undefined);
 };
diff --git a/packages/insomnia/src/utils/prettify/edn.ts b/packages/insomnia/src/utils/prettify/edn.ts
index bb126ce297..2551929d83 100644
--- a/packages/insomnia/src/utils/prettify/edn.ts
+++ b/packages/insomnia/src/utils/prettify/edn.ts
@@ -11,7 +11,7 @@ const [startDelimiters, endDelimiters] = delimitersData.reduce(
     acc[1].push(e[1]);
     return acc;
   },
-  [[], []] as typeof delimitersData
+  [[], []] as typeof delimitersData,
 );
 
 function tokenize(edn: string) {
@@ -24,7 +24,7 @@ function tokenize(edn: string) {
   for (const c of edn) {
     if (!insideString) {
       // Ignore when
-      if (c === ',' || c === '\n' || c === '\r' || c === '\t' || (c === ' ')) {
+      if (c === ',' || c === '\n' || c === '\r' || c === '\t' || c === ' ') {
         if (symbol) {
           tokens.push(symbol);
           symbol = '';
diff --git a/packages/insomnia/src/utils/router.ts b/packages/insomnia/src/utils/router.ts
index 695a48c71d..4c3c0e95b6 100644
--- a/packages/insomnia/src/utils/router.ts
+++ b/packages/insomnia/src/utils/router.ts
@@ -18,7 +18,7 @@ const getMatchParams = (location: string) => {
       path: '/organization/:organizationId/project/:projectId/workspace/:workspaceId',
       end: false,
     },
-    location
+    location,
   );
 
   const projectMatch = matchPath(
@@ -26,7 +26,7 @@ const getMatchParams = (location: string) => {
       path: '/organization/:organizationId/project/:projectId',
       end: false,
     },
-    location
+    location,
   );
 
   return (workspaceMatch || projectMatch) as PathMatch<'organizationId' | 'projectId' | 'workspaceId'> | null;
@@ -35,14 +35,14 @@ const getMatchParams = (location: string) => {
 export const getInitialRouteForOrganization = async ({
   organizationId,
   navigateToWorkspace = false,
-}: { organizationId: string; navigateToWorkspace?: boolean }) => {
+}: {
+  organizationId: string;
+  navigateToWorkspace?: boolean;
+}) => {
   // 1. assuming we have history, try to redirect to the last visited project
-  const prevOrganizationLocation = localStorage.getItem(
-    `locationHistoryEntry:${organizationId}`
-  );
+  const prevOrganizationLocation = localStorage.getItem(`locationHistoryEntry:${organizationId}`);
   // Check if the last visited project exists and redirect to it
   if (prevOrganizationLocation) {
-
     const match = getMatchParams(prevOrganizationLocation);
 
     if (match && match.params.organizationId && match.params.projectId) {
@@ -87,7 +87,9 @@ export const getInitialEntry = async () => {
 
     const user = await models.userSession.getOrCreate();
     if (user.id) {
-      const organizations = JSON.parse(localStorage.getItem(`${user.accountId}:organizations`) || '[]') as Organization[];
+      const organizations = JSON.parse(
+        localStorage.getItem(`${user.accountId}:organizations`) || '[]',
+      ) as Organization[];
       const personalOrganization = findPersonalOrganization(organizations, user.accountId);
       // If the personal org is not found in local storage go fetch from org index loader
       if (!personalOrganization) {
@@ -102,7 +104,7 @@ export const getInitialEntry = async () => {
         if (lastVisitedOrganizationId && organizations.find(o => o.id === lastVisitedOrganizationId)) {
           organizationId = lastVisitedOrganizationId;
         }
-      } catch (e) { }
+      } catch (e) {}
 
       return {
         pathname: await getInitialRouteForOrganization({ organizationId, navigateToWorkspace: true }),
diff --git a/packages/insomnia/src/utils/try-interpolate.ts b/packages/insomnia/src/utils/try-interpolate.ts
index 8f809ce43b..cdd18afc77 100644
--- a/packages/insomnia/src/utils/try-interpolate.ts
+++ b/packages/insomnia/src/utils/try-interpolate.ts
@@ -7,7 +7,15 @@ import { showModal } from '../ui/components/modals';
 import { RequestRenderErrorModal } from '../ui/components/modals/request-render-error-modal';
 
 // NOTE: template interpolation is tightly coupled with modal implementation
-export const tryToInterpolateRequestOrShowRenderErrorModal = async ({ request, environmentId, payload }: { request: Request | WebSocketRequest | GrpcRequest; environmentId: string; payload: any }): Promise<any> => {
+export const tryToInterpolateRequestOrShowRenderErrorModal = async ({
+  request,
+  environmentId,
+  payload,
+}: {
+  request: Request | WebSocketRequest | GrpcRequest;
+  environmentId: string;
+  payload: any;
+}): Promise<any> => {
   try {
     const renderContext = await getRenderContext({ request, environment: environmentId, purpose: 'send' });
     return await render(payload, renderContext);
diff --git a/packages/insomnia/src/utils/url/querystring.test.ts b/packages/insomnia/src/utils/url/querystring.test.ts
index 1ed9ba07b0..2b249d5cc5 100644
--- a/packages/insomnia/src/utils/url/querystring.test.ts
+++ b/packages/insomnia/src/utils/url/querystring.test.ts
@@ -154,7 +154,7 @@ describe('querystring', () => {
           { name: '', value: '' },
         ],
         true,
-        { strictNullHandling: true }
+        { strictNullHandling: true },
       );
 
       expect(str).toBe('foo=bar%3F%3F&foo1=&foo2&hello&hi%20there=bar%3F%3F');
@@ -182,10 +182,7 @@ describe('querystring', () => {
     });
 
     it('builds from params not strict', () => {
-      const str = deconstructQueryStringToParams(
-        'foo=bar%3F%3F&hello&hi%20there=bar%3F%3F&=&=val',
-        false,
-      );
+      const str = deconstructQueryStringToParams('foo=bar%3F%3F&hello&hi%20there=bar%3F%3F&=&=val', false);
 
       expect(str).toEqual([
         { name: 'foo', value: 'bar??' },
@@ -283,12 +280,15 @@ describe('querystring', () => {
       const urlNoEqualSign1 = smartEncodeUrl('https://google.com/terminologies?foo=bar&foo1');
       expect(urlNoEqualSign1).toBe('https://google.com/terminologies?foo=bar&foo1');
 
-      const urlEqualSign2 = smartEncodeUrl('https://google.com/terminologies?foo=bar&foo1=', true, { strictNullHandling: true });
+      const urlEqualSign2 = smartEncodeUrl('https://google.com/terminologies?foo=bar&foo1=', true, {
+        strictNullHandling: true,
+      });
       expect(urlEqualSign2).toBe('https://google.com/terminologies?foo=bar&foo1=');
 
-      const urlNoEqualSign2 = smartEncodeUrl('https://google.com/terminologies?foo=bar&foo1', true, { strictNullHandling: true });
+      const urlNoEqualSign2 = smartEncodeUrl('https://google.com/terminologies?foo=bar&foo1', true, {
+        strictNullHandling: true,
+      });
       expect(urlNoEqualSign2).toBe('https://google.com/terminologies?foo=bar&foo1');
     });
-
   });
 });
diff --git a/packages/insomnia/src/utils/url/querystring.ts b/packages/insomnia/src/utils/url/querystring.ts
index 6d0d94468a..9e0f7613be 100644
--- a/packages/insomnia/src/utils/url/querystring.ts
+++ b/packages/insomnia/src/utils/url/querystring.ts
@@ -29,7 +29,9 @@ interface IStrictNullSearchParams extends Omit<ISearchParams, 'value'> {
   value: StrictNullSearchParamsValueType;
 }
 // helper function to process deconstructQueryStringToParams return type base on options parameter
-type ProcessDeconstructFuncReturnType<T> = T extends { strictNullHandling: true } ? IStrictNullSearchParams[] : ISearchParams[];
+type ProcessDeconstructFuncReturnType<T> = T extends { strictNullHandling: true }
+  ? IStrictNullSearchParams[]
+  : ISearchParams[];
 export const getJoiner = (url: string) => {
   url = url || '';
   return url.indexOf('?') === -1 ? '?' : '&';
@@ -66,9 +68,8 @@ export const extractQueryStringFromUrl = (url: string) => {
   if (things.length === 1) {
     return '';
   }
-    const qsWithHash = things.slice(1).join('?');
-    return qsWithHash.replace(/#.*/, '');
-
+  const qsWithHash = things.slice(1).join('?');
+  return qsWithHash.replace(/#.*/, '');
 };
 
 /**
@@ -80,7 +81,7 @@ export const buildQueryParameter = (
   /** allow empty names and values */
   strict?: boolean,
   /** extra options like strict hanlde null value */
-  options?: IQueryStringOptions
+  options?: IQueryStringOptions,
 ) => {
   strict = strict === undefined ? true : strict;
   const { strictNullHandling = false, encodeParams = true } = options || {};
@@ -106,8 +107,7 @@ export const buildQueryParameter = (
 
     return `${name}=${value}`;
   }
-    return flexibleEncodeComponent(param.name);
-
+  return flexibleEncodeComponent(param.name);
 };
 
 /**
@@ -118,7 +118,7 @@ export const buildQueryStringFromParams = (
   /** allow empty names and values */
   strict?: boolean,
   /** extra options like strict hanlde null value */
-  options?: IQueryStringOptions
+  options?: IQueryStringOptions,
 ) => {
   strict = strict === undefined ? true : strict;
   const { strictNullHandling = false, encodeParams = true } = options || {};
@@ -146,12 +146,12 @@ export const deconstructQueryStringToParams = <T extends IQueryStringOptions>(
   /** allow empty names and values */
   strict?: boolean,
   /** extra deconstruct options like strict hanlde null value */
-  options?: T
+  options?: T,
 ): ProcessDeconstructFuncReturnType<T> => {
   strict = strict === undefined ? true : strict;
   const { strictNullHandling = false } = options || {};
   const pairs: ProcessDeconstructFuncReturnType<T> = [];
-  type ValueType = typeof pairs[number]['value'];
+  type ValueType = (typeof pairs)[number]['value'];
 
   if (!qs) {
     return pairs;
@@ -163,7 +163,7 @@ export const deconstructQueryStringToParams = <T extends IQueryStringOptions>(
     // NOTE: This only splits on first equals sign. '1=2=3' --> ['1', '2=3']
     const [encodedName, ...encodedValues] = stringPair.split('=');
     // Use null as value when strictNullHandling is enabled and no equal sign in string pair
-    const encodedValue: ValueType = (encodedValues.length === 0 && strictNullHandling) ? null : encodedValues.join('=');
+    const encodedValue: ValueType = encodedValues.length === 0 && strictNullHandling ? null : encodedValues.join('=');
 
     let name = '';
     try {
@@ -175,7 +175,7 @@ export const deconstructQueryStringToParams = <T extends IQueryStringOptions>(
 
     let value: ValueType = '';
     try {
-      value = (strictNullHandling && encodedValue === null) ? null : decodeURIComponent(encodedValue || '');
+      value = strictNullHandling && encodedValue === null ? null : decodeURIComponent(encodedValue || '');
     } catch (error) {
       // Just leave it
       value = encodedValue;
@@ -207,40 +207,37 @@ export const smartEncodeUrl = (url: string, encode?: boolean, options?: IQuerySt
   if (!encode) {
     return urlWithProto;
   }
-    // Parse the URL into components
-    const parsedUrl = urlParse(urlWithProto);
+  // Parse the URL into components
+  const parsedUrl = urlParse(urlWithProto);
 
-    // ~~~~~~~~~~~ //
-    // 1. Pathname //
-    // ~~~~~~~~~~~ //
+  // ~~~~~~~~~~~ //
+  // 1. Pathname //
+  // ~~~~~~~~~~~ //
 
-    if (parsedUrl.pathname) {
-      const segments = parsedUrl.pathname.split('/');
-      parsedUrl.pathname = segments
-        .map(s => flexibleEncodeComponent(s, URL_PATH_CHARACTER_WHITELIST))
-        .join('/');
+  if (parsedUrl.pathname) {
+    const segments = parsedUrl.pathname.split('/');
+    parsedUrl.pathname = segments.map(s => flexibleEncodeComponent(s, URL_PATH_CHARACTER_WHITELIST)).join('/');
+  }
+
+  // ~~~~~~~~~~~~~~ //
+  // 2. Querystring //
+  // ~~~~~~~~~~~~~~ //
+
+  if (parsedUrl.query) {
+    const qsParams = deconstructQueryStringToParams(parsedUrl.query, true, { strictNullHandling });
+    const encodedQsParams = [];
+    for (const { name, value } of qsParams) {
+      encodedQsParams.push({
+        name: flexibleEncodeComponent(name),
+        value: strictNullHandling && value === null ? null : flexibleEncodeComponent(value as string),
+      });
     }
 
-    // ~~~~~~~~~~~~~~ //
-    // 2. Querystring //
-    // ~~~~~~~~~~~~~~ //
-
-    if (parsedUrl.query) {
-      const qsParams = deconstructQueryStringToParams(parsedUrl.query, true, { strictNullHandling });
-      const encodedQsParams = [];
-      for (const { name, value } of qsParams) {
-        encodedQsParams.push({
-          name: flexibleEncodeComponent(name),
-          value: (strictNullHandling && value === null) ? null : flexibleEncodeComponent(value as string),
-        });
-      }
-
-      parsedUrl.query = buildQueryStringFromParams(encodedQsParams, true, { strictNullHandling });
-      parsedUrl.search = `?${parsedUrl.query}`;
-    }
-
-    return urlFormat(parsedUrl);
+    parsedUrl.query = buildQueryStringFromParams(encodedQsParams, true, { strictNullHandling });
+    parsedUrl.search = `?${parsedUrl.query}`;
+  }
 
+  return urlFormat(parsedUrl);
 };
 
 /**
diff --git a/packages/insomnia/src/utils/vault.ts b/packages/insomnia/src/utils/vault.ts
index 7be7b24271..2e4c0f02f0 100644
--- a/packages/insomnia/src/utils/vault.ts
+++ b/packages/insomnia/src/utils/vault.ts
@@ -1,4 +1,3 @@
-
 import { getInsomniaVaultKey } from '../common/constants';
 import { settings } from '../models';
 
diff --git a/packages/insomnia/src/utils/xpath/query.test.ts b/packages/insomnia/src/utils/xpath/query.test.ts
index 51e18bb899..ced5daf62d 100644
--- a/packages/insomnia/src/utils/xpath/query.test.ts
+++ b/packages/insomnia/src/utils/xpath/query.test.ts
@@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest';
 
 import { queryXPath } from './query';
 /**
-* @vitest-environment jsdom
-*/
+ * @vitest-environment jsdom
+ */
 describe('queryXPath()', () => {
   it('handles missing query', () => {
     expect(() => {
@@ -25,16 +25,17 @@ describe('queryXPath()', () => {
   });
 
   it('handles string query', () => {
-    expect(queryXPath('<x><y>foo</y><y>bar</y></x>', 'substring(//y[1], 2)')).toEqual([
-      { inner: 'oo', outer: 'oo' },
-    ]);
+    expect(queryXPath('<x><y>foo</y><y>bar</y></x>', 'substring(//y[1], 2)')).toEqual([{ inner: 'oo', outer: 'oo' }]);
   });
 
   it('handles text() query', () => {
-    expect(queryXPath('<book><title>Harry</title><title>Potter</title></book>', 'local-name(/book)'))
-      .toEqual([{ 'inner': 'book', 'outer': 'book' }]);
-    expect(queryXPath('<book><title>Harry</title><title>Potter</title></book>', '//title/text()'))
-      .toEqual([{ 'inner': 'Harry', 'outer': 'Harry' }, { 'inner': 'Potter', 'outer': 'Potter' }]);
+    expect(queryXPath('<book><title>Harry</title><title>Potter</title></book>', 'local-name(/book)')).toEqual([
+      { inner: 'book', outer: 'book' },
+    ]);
+    expect(queryXPath('<book><title>Harry</title><title>Potter</title></book>', '//title/text()')).toEqual([
+      { inner: 'Harry', outer: 'Harry' },
+      { inner: 'Potter', outer: 'Potter' },
+    ]);
   });
 
   it('handles invalid query', () => {
diff --git a/packages/insomnia/src/utils/xpath/query.ts b/packages/insomnia/src/utils/xpath/query.ts
index 64fac3b525..aa579bcc6d 100644
--- a/packages/insomnia/src/utils/xpath/query.ts
+++ b/packages/insomnia/src/utils/xpath/query.ts
@@ -9,28 +9,27 @@ export const queryXPath = (xml: string, query?: string) => {
   if (query === undefined) {
     throw new Error('Must pass an XPath query.');
   }
-    const selectedValues = xpath.select(query, dom);
-    // Functions return plain strings
-    if (typeof selectedValues === 'string') {
-      return [{ outer: selectedValues, inner: selectedValues }];
-    }
-
-    return (selectedValues as Node[])
-      .filter(sv => sv.nodeType === Node.ATTRIBUTE_NODE
-        || sv.nodeType === Node.ELEMENT_NODE
-        || sv.nodeType === Node.TEXT_NODE)
-      .map(selectedValue => {
-        const outer = selectedValue.toString().trim();
-        if (selectedValue.nodeType === Node.ATTRIBUTE_NODE) {
-          return { outer, inner: selectedValue.nodeValue };
-        }
-        if (selectedValue.nodeType === Node.ELEMENT_NODE) {
-          return { outer, inner: selectedValue.childNodes.toString() };
-        }
-        if (selectedValue.nodeType === Node.TEXT_NODE) {
-          return { outer, inner: selectedValue.toString().trim() };
-        }
-        return { outer, inner: null };
-      });
+  const selectedValues = xpath.select(query, dom);
+  // Functions return plain strings
+  if (typeof selectedValues === 'string') {
+    return [{ outer: selectedValues, inner: selectedValues }];
+  }
 
+  return (selectedValues as Node[])
+    .filter(
+      sv => sv.nodeType === Node.ATTRIBUTE_NODE || sv.nodeType === Node.ELEMENT_NODE || sv.nodeType === Node.TEXT_NODE,
+    )
+    .map(selectedValue => {
+      const outer = selectedValue.toString().trim();
+      if (selectedValue.nodeType === Node.ATTRIBUTE_NODE) {
+        return { outer, inner: selectedValue.nodeValue };
+      }
+      if (selectedValue.nodeType === Node.ELEMENT_NODE) {
+        return { outer, inner: selectedValue.childNodes.toString() };
+      }
+      if (selectedValue.nodeType === Node.TEXT_NODE) {
+        return { outer, inner: selectedValue.toString().trim() };
+      }
+      return { outer, inner: null };
+    });
 };
diff --git a/packages/insomnia/tailwind.config.js b/packages/insomnia/tailwind.config.js
index dc00c6db38..71a19e8842 100644
--- a/packages/insomnia/tailwind.config.js
+++ b/packages/insomnia/tailwind.config.js
@@ -1,9 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    './src/index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-  ],
+  content: ['./src/index.html', './src/**/*.{js,ts,jsx,tsx}'],
   theme: {
     extend: {
       animation: {
@@ -30,7 +27,5 @@ module.exports = {
       },
     },
   },
-  plugins: [
-    require('@tailwindcss/typography'),
-  ],
+  plugins: [require('@tailwindcss/typography')],
 };
diff --git a/packages/insomnia/tsconfig.json b/packages/insomnia/tsconfig.json
index d9799446ec..63c9b0b91a 100644
--- a/packages/insomnia/tsconfig.json
+++ b/packages/insomnia/tsconfig.json
@@ -12,11 +12,7 @@
     "module": "ESNext",
     "sourceMap": true,
     /* Runs in the DOM */
-    "lib": [
-      "ES2023",
-      "DOM.Iterable",
-      "DOM"
-    ],
+    "lib": ["ES2023", "DOM.Iterable", "DOM"],
     "jsx": "react",
     /* Strictness */
     "strict": true,
@@ -38,7 +34,7 @@
     "vite.config.ts",
     "vite-plugin-electron-node-require",
     "**/*.d.ts",
-    "setup-vitest.ts",
+    "setup-vitest.ts"
   ],
   "exclude": [
     "bin",
@@ -64,5 +60,5 @@
     "src/preload.js",
     "src/hidden-window-preload.js",
     "./src/__mocks__/@getinsomnia/node-libcurl.ts"
-  ],
+  ]
 }
diff --git a/packages/insomnia/types/apiconnect-wsdl.d.ts b/packages/insomnia/types/apiconnect-wsdl.d.ts
index a510a951ce..d5f2ee10c4 100644
--- a/packages/insomnia/types/apiconnect-wsdl.d.ts
+++ b/packages/insomnia/types/apiconnect-wsdl.d.ts
@@ -32,19 +32,12 @@ declare module 'apiconnect-wsdl' {
       req?: UNKNOWN;
       flatten?: boolean;
       sanitizeWSDL?: boolean;
-    }
+    },
   ): Promise<WSDL[]>;
 
-  export function getWSDLServices(
-    allWSDLs: WSDL[],
-    options?: {}
-  ): ServiceData;
+  export function getWSDLServices(allWSDLs: WSDL[], options?: {}): ServiceData;
 
-  export function findWSDLForServiceName(
-    allWSDLs: WSDL[],
-    serviceName: string,
-    serviceFilename?: string
-  ): WSDLEntry;
+  export function findWSDLForServiceName(allWSDLs: WSDL[], serviceName: string, serviceFilename?: string): WSDLEntry;
 
   export interface Swagger {
     definitions: {
@@ -71,6 +64,6 @@ declare module 'apiconnect-wsdl' {
     wsdlEntry: WSDLEntry,
     serviceName: string,
     wsdlId: string,
-    createOptions?: UNKNOWN_OBJ
+    createOptions?: UNKNOWN_OBJ,
   ): Swagger;
 }
diff --git a/packages/insomnia/types/codemirror.d.ts b/packages/insomnia/types/codemirror.d.ts
index 591508400a..d61006a9f6 100644
--- a/packages/insomnia/types/codemirror.d.ts
+++ b/packages/insomnia/types/codemirror.d.ts
@@ -25,8 +25,8 @@ interface InsomniaExtensions {
 declare module 'codemirror' {
   type CodeMirrorLinkClickCallback = LinkClickCallback;
 
-  interface Editor extends InsomniaExtensions { }
-  interface EditorFromTextEditor extends InsomniaExtensions { }
+  interface Editor extends InsomniaExtensions {}
+  interface EditorFromTextEditor extends InsomniaExtensions {}
   interface TextMarker {
     // This flag is being used internally by codemirror and the fold extension
     __isFold: boolean;
@@ -101,7 +101,6 @@ declare module 'codemirror' {
     cut: (instance: Editor, e: ClipboardEvent) => void;
     copy: (instance: Editor, e: ClipboardEvent) => void;
     paste: (instance: Editor, e: ClipboardEvent) => void;
-
   }
 
   const keyNames: Record<number, string>;
diff --git a/packages/insomnia/types/jsonlint.d.ts b/packages/insomnia/types/jsonlint.d.ts
index 093c00501e..e30a13ffdc 100644
--- a/packages/insomnia/types/jsonlint.d.ts
+++ b/packages/insomnia/types/jsonlint.d.ts
@@ -1,22 +1,20 @@
 declare module 'jsonlint-mod-fixed' {
+  interface ParseErrorHash {
+    expected?: string[];
+    line?: number;
+    loc?: {
+      first_column: number;
+      first_line: number;
+      last_column: number;
+      last_line: number;
+    };
+    message?: string;
+    text?: string;
+    token?: string | null;
+  }
 
-    interface ParseErrorHash {
-        expected?: string[];
-        line?: number;
-        loc?: {
-            first_column: number;
-            first_line: number;
-            last_column: number;
-            last_line: number;
-        };
-        message?: string;
-        text?: string;
-        token?: string | null;
-    }
-
-    export function parse(input: string): string;
-    export namespace parser {
-        export function parseError(str: string, hash: ParseErrorHash): void;
-    }
-
+  export function parse(input: string): string;
+  export namespace parser {
+    export function parseError(str: string, hash: ParseErrorHash): void;
+  }
 }
diff --git a/packages/insomnia/types/objectpath.d.ts b/packages/insomnia/types/objectpath.d.ts
index 393830fb5f..cde7e57a0e 100644
--- a/packages/insomnia/types/objectpath.d.ts
+++ b/packages/insomnia/types/objectpath.d.ts
@@ -1,15 +1,7 @@
 declare module 'objectpath' {
-    export function parse(str: string): string[];
+  export function parse(str: string): string[];
 
-    export function stringify(
-        arr: string | (string | number)[],
-        quote?: '"' | "'",
-        forceQuote?: boolean
-    ): string;
+  export function stringify(arr: string | (string | number)[], quote?: '"' | "'", forceQuote?: boolean): string;
 
-    export function normalize(
-        data: string,
-        quote?: '"' | "'",
-        forceQuote?: boolean
-    ): string;
+  export function normalize(data: string, quote?: '"' | "'", forceQuote?: boolean): string;
 }
diff --git a/packages/insomnia/types/tough-cookie.d.ts b/packages/insomnia/types/tough-cookie.d.ts
index 4166239806..75f3f6cde9 100644
--- a/packages/insomnia/types/tough-cookie.d.ts
+++ b/packages/insomnia/types/tough-cookie.d.ts
@@ -4,7 +4,6 @@
 /* eslint-disable -- eslint has a hard time with declaration files */
 
 declare module 'tough-cookie' {
-
   // Type definitions for tough-cookie 2.3
   // Project: https://github.com/salesforce/tough-cookie
   // Definitions by: Leonard Thieu <https://github.com/leonard-thieu>
@@ -20,47 +19,47 @@ declare module 'tough-cookie' {
   export function parseDate(string: string): Date;
 
   /**
-    * Format a Date into a RFC1123 string (the RFC6265-recommended format).
-    */
+   * Format a Date into a RFC1123 string (the RFC6265-recommended format).
+   */
   export function formatDate(date: Date): string;
 
   /**
-    * Transforms a domain-name into a canonical domain-name.
-    * The canonical domain-name is a trimmed, lowercased, stripped-of-leading-dot
-    * and optionally punycode-encoded domain-name (Section 5.1.2 of RFC6265).
-    * For the most part, this function is idempotent (can be run again on its output without ill effects).
-    */
+   * Transforms a domain-name into a canonical domain-name.
+   * The canonical domain-name is a trimmed, lowercased, stripped-of-leading-dot
+   * and optionally punycode-encoded domain-name (Section 5.1.2 of RFC6265).
+   * For the most part, this function is idempotent (can be run again on its output without ill effects).
+   */
   export function canonicalDomain(str: string): string;
 
   /**
-    * Answers "does this real domain match the domain in a cookie?".
-    * The str is the "current" domain-name and the domStr is the "cookie" domain-name.
-    * Matches according to RFC6265 Section 5.1.3, but it helps to think of it as a "suffix match".
-    *
-    * The canonicalize parameter will run the other two parameters through canonicalDomain or not.
-    */
+   * Answers "does this real domain match the domain in a cookie?".
+   * The str is the "current" domain-name and the domStr is the "cookie" domain-name.
+   * Matches according to RFC6265 Section 5.1.3, but it helps to think of it as a "suffix match".
+   *
+   * The canonicalize parameter will run the other two parameters through canonicalDomain or not.
+   */
   export function domainMatch(str: string, domStr: string, canonicalize?: boolean): boolean;
 
   /**
-    * Given a current request/response path, gives the Path appropriate for storing in a cookie.
-    * This is basically the "directory" of a "file" in the path, but is specified by Section 5.1.4 of the RFC.
-    *
-    * The path parameter MUST be only the pathname part of a URI (i.e. excludes the hostname, query, fragment, etc.).
-    * This is the .pathname property of node's uri.parse() output.
-    */
+   * Given a current request/response path, gives the Path appropriate for storing in a cookie.
+   * This is basically the "directory" of a "file" in the path, but is specified by Section 5.1.4 of the RFC.
+   *
+   * The path parameter MUST be only the pathname part of a URI (i.e. excludes the hostname, query, fragment, etc.).
+   * This is the .pathname property of node's uri.parse() output.
+   */
   export function defaultPath(path: string): string;
 
   /**
-    * Answers "does the request-path path-match a given cookie-path?" as per RFC6265 Section 5.1.4.
-    * Returns a boolean.
-    *
-    * This is essentially a prefix-match where cookiePath is a prefix of reqPath.
-    */
+   * Answers "does the request-path path-match a given cookie-path?" as per RFC6265 Section 5.1.4.
+   * Returns a boolean.
+   *
+   * This is essentially a prefix-match where cookiePath is a prefix of reqPath.
+   */
   export function pathMatch(reqPath: string, cookiePath: string): boolean;
 
   /**
-    * alias for fromJSON(string)
-    */
+   * alias for fromJSON(string)
+   */
   export function fromJSON(string: string): Cookie;
 
   export function getPublicSuffix(hostname: string): string | null;
@@ -71,7 +70,9 @@ declare module 'tough-cookie' {
 
   export function permutePath(path: string): string[];
 
-  export interface CookieJSON { [key: string]: any; }
+  export interface CookieJSON {
+    [key: string]: any;
+  }
 
   export class Cookie {
     static parse(cookieString: string, options?: ParseOptions): Cookie | undefined;
@@ -175,8 +176,15 @@ declare module 'tough-cookie' {
   }
 
   export class CookieJar {
-    static deserialize(serialized: CookieJarSerialized | string, store: Store, cb: (err: Error | null, object: CookieJar) => void): void;
-    static deserialize(serialized: CookieJarSerialized | string, cb: (err: Error | null, object: CookieJar) => void): void;
+    static deserialize(
+      serialized: CookieJarSerialized | string,
+      store: Store,
+      cb: (err: Error | null, object: CookieJar) => void,
+    ): void;
+    static deserialize(
+      serialized: CookieJarSerialized | string,
+      cb: (err: Error | null, object: CookieJar) => void,
+    ): void;
 
     static deserializeSync(serialized: CookieJarSerialized | string, store?: Store): CookieJar;
 
@@ -184,22 +192,39 @@ declare module 'tough-cookie' {
 
     constructor(store?: Store, options?: CookieJarOptions);
 
-    setCookie(cookieOrString: Cookie | string, currentUrl: string, options: SetCookieOptions, cb: (err: Error | null, cookie: Cookie) => void): void;
+    setCookie(
+      cookieOrString: Cookie | string,
+      currentUrl: string,
+      options: SetCookieOptions,
+      cb: (err: Error | null, cookie: Cookie) => void,
+    ): void;
     setCookie(cookieOrString: Cookie | string, currentUrl: string, cb: (err: Error, cookie: Cookie) => void): void;
 
     setCookieSync(cookieOrString: Cookie | string, currentUrl: string, options?: SetCookieOptions): void;
 
-    getCookies(currentUrl: string, options: GetCookiesOptions, cb: (err: Error | null, cookies: Cookie[]) => void): void;
+    getCookies(
+      currentUrl: string,
+      options: GetCookiesOptions,
+      cb: (err: Error | null, cookies: Cookie[]) => void,
+    ): void;
     getCookies(currentUrl: string, cb: (err: Error | null, cookies: Cookie[]) => void): void;
 
     getCookiesSync(currentUrl: string, options?: GetCookiesOptions): Cookie[];
 
-    getCookieString(currentUrl: string, options: GetCookiesOptions, cb: (err: Error | null, cookies: string) => void): void;
+    getCookieString(
+      currentUrl: string,
+      options: GetCookiesOptions,
+      cb: (err: Error | null, cookies: string) => void,
+    ): void;
     getCookieString(currentUrl: string, cb: (err: Error | null, cookies: string) => void): void;
 
     getCookieStringSync(currentUrl: string, options?: GetCookiesOptions): string;
 
-    getSetCookieStrings(currentUrl: string, options: GetCookiesOptions, cb: (err: Error | null, cookies: string) => void): void;
+    getSetCookieStrings(
+      currentUrl: string,
+      options: GetCookiesOptions,
+      cb: (err: Error | null, cookies: string) => void,
+    ): void;
     getSetCookieStrings(currentUrl: string, cb: (err: Error | null, cookies: string) => void): void;
 
     getSetCookieStringsSync(currentUrl: string, options?: GetCookiesOptions): string;
@@ -240,5 +265,5 @@ declare module 'tough-cookie' {
     getAllCookies(cb: (err: Error | null, cookie: Cookie[]) => void): void;
   }
 
-  export class MemoryCookieStore extends Store { }
+  export class MemoryCookieStore extends Store {}
 }
diff --git a/packages/insomnia/vite-plugin-electron-node-require.ts b/packages/insomnia/vite-plugin-electron-node-require.ts
index 581af3934d..4dd572f6a6 100644
--- a/packages/insomnia/vite-plugin-electron-node-require.ts
+++ b/packages/insomnia/vite-plugin-electron-node-require.ts
@@ -10,9 +10,7 @@ export interface Options {
  * Allows Vite to import modules that will be resolved by Node's require() function.
  */
 export function electronNodeRequire(options: Options): Plugin {
-  const {
-    modules = [],
-  } = options;
+  const { modules = [] } = options;
 
   return {
     name: 'vite-plugin-electron-node-require',
@@ -20,10 +18,7 @@ export function electronNodeRequire(options: Options): Plugin {
       // Exclude the modules from Vite's dependency optimization (pre-bundling)
       conf.optimizeDeps = {
         ...conf.optimizeDeps,
-        exclude: [
-          ...conf.optimizeDeps?.exclude ? conf.optimizeDeps.exclude : [],
-          ...modules,
-        ],
+        exclude: [...(conf.optimizeDeps?.exclude ? conf.optimizeDeps.exclude : []), ...modules],
       };
 
       // Create aliases for the modules so that we can resolve them with this plugin
@@ -37,9 +32,7 @@ export function electronNodeRequire(options: Options): Plugin {
       conf.build ??= {};
       conf.build.commonjsOptions ??= {};
       conf.build.commonjsOptions?.ignore ?? [];
-      conf.build.commonjsOptions.ignore = [
-        ...modules,
-      ];
+      conf.build.commonjsOptions.ignore = [...modules];
 
       return conf;
     },
diff --git a/packages/insomnia/vite.config.ts b/packages/insomnia/vite.config.ts
index dcca885433..bc50cc6d87 100644
--- a/packages/insomnia/vite.config.ts
+++ b/packages/insomnia/vite.config.ts
@@ -14,7 +14,7 @@ export default defineConfig(({ mode }) => {
     root: path.join(__dirname, 'src'),
     base: __DEV__ ? '/' : './',
     define: {
-      __DEV__: JSON.stringify(__DEV__),
+      '__DEV__': JSON.stringify(__DEV__),
       'process.env.NODE_ENV': JSON.stringify(mode),
       'process.env.INSOMNIA_ENV': JSON.stringify(mode),
     },
@@ -42,7 +42,13 @@ export default defineConfig(({ mode }) => {
       exclude: ['@getinsomnia/node-libcurl'],
       // these packages are only used in web worker, Vite won't be able to discover the import on the initial scan，so we need to include them here to let vite pre-bundle them
       // https://vitejs.dev/guide/dep-pre-bundling.html#customizing-the-behavior
-      include: ['@stoplight/spectral-core', '@stoplight/spectral-ruleset-bundler/with-loader', '@stoplight/spectral-rulesets', 'codemirror-graphql/utils/SchemaReference', 'openapi-types'],
+      include: [
+        '@stoplight/spectral-core',
+        '@stoplight/spectral-ruleset-bundler/with-loader',
+        '@stoplight/spectral-rulesets',
+        'codemirror-graphql/utils/SchemaReference',
+        'openapi-types',
+      ],
       force: true,
     },
     plugins: [
diff --git a/packages/insomnia/vitest.config.ts b/packages/insomnia/vitest.config.ts
index ea85602690..56c027530f 100644
--- a/packages/insomnia/vitest.config.ts
+++ b/packages/insomnia/vitest.config.ts
@@ -9,9 +9,7 @@ export default defineConfig({
     },
     server: {
       deps: {
-        inline: [
-          'tinykeys',
-        ],
+        inline: ['tinykeys'],
       },
     },
   },