wip: working on async scripting support

2026-07-03 17:38:36 +00:00 · 2023-03-28 14:49:57 +05:30
389 changed files with 4274 additions and 43553 deletions
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,13 +0,0 @@
-# Description
-
-<!-- Explain here the changes your PR introduces and text to help us understand the context of this change. -->
-
-### Contribution Checklist:
-
- [ ] **The pull request only addresses one issue or adds one feature.**
- [ ] **The pull request does not introduce any breaking changes**
- [ ] **I have added screenshots or gifs to help explain the change if applicable.**
- [ ] **I have read the [contribution guidelines](https://github.com/usebruno/bruno/blob/main/contributing.md).**
- [ ] **Create an issue and link to the pull request.**
-
-Note: Keeping the PR small and focused helps make it easier to review and merge. If you have multiple changes you want to make, please consider submitting them as separate pull requests.
--- a/.github/workflows/bump-homebrew-cask.yml
+++ b/.github/workflows/bump-homebrew-cask.yml
@@ -1,12 +0,0 @@
-name: Bump Homebrew Cask
-
-on:
-  release:
-    types: [published]
-
-jobs:
-  bump:
-    runs-on: macos-10.15
-    steps:
-      - name: Bump Homebrew Cask
-        run: brew bump-cask-pr bruno --version "${GITHUB_REF_NAME#v}"  
--- a/.github/workflows/release-snap.yml
+++ b/.github/workflows/release-snap.yml
@@ -1,49 +0,0 @@
-name: Publish to Snapcraft
-
-on:
-  workflow_dispatch:
-    inputs:
-      build:
-        description: 'Build and publish to Snapcraft'
-        required: true
-        default: 'true'
-
-jobs:
-  publish:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18
-
-      - name: Check package-lock.json
-        run: npm ci
-
-      - name: Install dependencies
-        run: npm install --legacy-peer-deps
-
-      - name: Build Electron app
-        run: |
-          npm run build:bruno-query
-          npm run build:graphql-docs
-          npm run build:electron:snap
-
-      - name: Install Snapcraft
-        run: |
-          sudo snap install snapcraft --classic
-        continue-on-error: true
-
-      - name: Configure Snapcraft
-        run: snapcraft whoami
-        env:
-          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_API_KEY }}
-
-      - name: Publish to Snapcraft
-        run: |
-          snapcraft upload --release=stable packages/bruno-electron/out/*.snap
-        env:
-          SNAPCRAFT_STORE_CREDENTIALS: ${{ secrets.SNAPCRAFT_API_KEY }}
--- a/.github/workflows/unit-tests.yml
+++ b/.github/workflows/unit-tests.yml
@@ -1,45 +1,29 @@
 name: Unit Tests
 on:
  push:
-    branches: [main]
+    branches: [ main ]
  pull_request:
-    branches: [main]
+    branches: [ main ]
 jobs:
-  tests:
+  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-      - name: Test Package bruno-query
-        run: npm run test --workspace=packages/bruno-query
-      - name: Build Package bruno-query
-        run: npm run build --workspace=packages/bruno-query
-      - name: Test Package bruno-lang
-        run: npm run test --workspace=packages/bruno-lang
-      - name: Test Package bruno-schema
-        run: npm run test --workspace=packages/bruno-schema
-      - name: Test Package bruno-app
-        run: npm run test --workspace=packages/bruno-app
-      - name: Test Package bruno-js
-        run: npm run test --workspace=packages/bruno-js
-      - name: Test Package bruno-cli
-        run: npm run test --workspace=packages/bruno-cli
-      - name: Test Package bruno-electron
-        run: npm run test --workspace=packages/bruno-electron
-
-  prettier:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-      - name: Install dependencies
-        run: npm ci --legacy-peer-deps
-      - name: Run Prettier
-        run: npm run test:prettier:web
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install dependencies
+      run: npm i --legacy-peer-deps
+    - name: Test Package bruno-query
+      run: npm run test --workspace=packages/bruno-query
+    - name: Build Package bruno-query
+      run: npm run build --workspace=packages/bruno-query
+    - name: Test Package bruno-lang
+      run: npm run test --workspace=packages/bruno-lang
+    - name: Test Package bruno-schema
+      run: npm run test --workspace=packages/bruno-schema
+    - name: Test Package bruno-app
+      run: npm run test --workspace=packages/bruno-app
+    - name: Test Package bruno-js
+      run: npm run test --workspace=packages/bruno-js
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 node_modules
 yarn.lock
 pnpm-lock.yaml
+package-lock.json
 .pnp
 .pnp.js

@@ -40,7 +41,3 @@ yarn-error.log*
 /test-results/
 /playwright-report/
 /playwright/.cache/
-
-#dev editor
-bruno.iml
-.idea
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx pretty-quick --staged
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,7 +0,0 @@
-{
-  "trailingComma": "none",
-  "tabWidth": 2,
-  "semi": true,
-  "singleQuote": true,
-  "printWidth": 120
-}
--- a/assets/images/cli-demo.png
+++ b/assets/images/cli-demo.png
--- a/assets/images/run-anywhere.png
+++ b/assets/images/run-anywhere.png
--- a/assets/images/version-control.png
+++ b/assets/images/version-control.png
--- a/contributing.md
+++ b/contributing.md
@@ -1,5 +1,3 @@
-**English** | [Українська](/contributing_ua.md) | [Русский](/contributing_ru.md)
-
 ## Lets make bruno better, together !!

 I am happy that you are looking to improve bruno. Below are the guidelines to get started bringing up bruno on your computer.
@@ -21,7 +19,7 @@ Libraries we use

 ### Dependencies

-You would need [Node v18.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project
+You would need [Node v14.x or the latest LTS version](https://nodejs.org/en/) and npm 8.x. We use npm workspaces in the project

 ### Lets start coding

--- a/contributing_ru.md
+++ b/contributing_ru.md
@@ -1,37 +0,0 @@
-[English](/contributing.md) | [Українська](/contributing_ua.md) | **Русский**
-
-## Давайте вместе сделаем Бруно лучше!!!
-
-Я рад, что Вы хотите усовершенствовать bruno. Ниже приведены рекомендации по запуску bruno на вашем компьютере.
-
-### Стек
-
-Bruno построен с использованием NextJs и React. Мы также используем electron для поставки десктопной версии ( которая поддерживает локальные коллекции )
-
-Библиотеки, которые мы используем
-
- CSS - Tailwind
- Редакторы кода - Codemirror
- Управление состоянием - Redux
- Иконки - Tabler Icons
- Формы - formik
- Валидация схем - Yup
- Запросы клиента - axios
- Наблюдатель за файловой системой - chokidar
-
-### Зависимости
-
-Вам потребуется [Node v18.x или последняя версия LTS](https://nodejs.org/en/) и npm 8.x. В проекте мы используем рабочие пространства npm
-
-### Приступим к коду
-
-Пожалуйста, обратитесь к [development_ru.md](docs/development_ru.md) для получения инструкций по запуску локальной среды разработки.
-
-### Создание Pull Request
-
- Пожалуйста, пусть PR будет небольшим и сфокусированным на одной вещи
- Пожалуйста, соблюдайте формат создания веток
-  - feature/[название функции]: Эта ветка должна содержать изменения для конкретной функции
-    - Пример: feature/dark-mode
-  - bugfix/[название ошибки]: Эта ветка должна содержать только исправления для конкретной ошибки
-    - Пример bugfix/bug-1
--- a/contributing_ua.md
+++ b/contributing_ua.md
@@ -1,37 +0,0 @@
-[English](/contributing.md) | **Українська** | [Русский](/contributing_ru.md)
-
-## Давайте зробимо Bruno краще, разом !!
-
-Я дуже радий що Ви бажаєте покращити Bruno. Нижче наведені вказівки як розпочати розробку Bruno на Вашому комп'ютері.
-
-### Стек технологій
-
-Bruno побудований на NextJs та React. Також для десктопної версії (яка підтримує локальні колекції) використовується Electron
-
-Бібліотеки, які ми використовуємо
-
- CSS - Tailwind
- Редактори коду - Codemirror
- Керування станом - Redux
- Іконки - Tabler Icons
- Форми - formik
- Валідація по схемі - Yup
- Клієнт запитів - axios
- Спостерігач за файловою системою - chokidar
-
-### Залежності
-
-Вам знадобиться [Node v18.x або остання LTS версія](https://nodejs.org/en/) та npm 8.x. Ми використовуєм npm workspaces в цьому проекті
-
-### Починаєм писати код
-
-Будь ласка, зверніться до [development_ua.md](docs/development_ua.md) за інструкціями щодо запуску локального середовища розробки.
-
-### Створення Pull Request-ів
-
- Будь ласка, робіть PR-и маленькими і сфокусованими на одній речі
- Будь ласка, слідуйте формату назв гілок
-  - feature/[назва feature]: Така гілка має містити зміни лише щодо конкретної feature
-    - Приклад: feature/dark-mode
-  - bugfix/[назва баґу]: Така гілка має містити лише виправлення конкретного багу
-    - Приклад: bugfix/bug-1
--- a/docs/development.md
+++ b/docs/development.md
@@ -1,12 +1,9 @@
-**English** | [Українська](/docs/development_ua.md) | [Русский](/docs/development_ru.md)
-
 ## Development

-Bruno is being developed as a desktop app. You need to load the app by running the nextjs app in one terminal and then run the electron app in another terminal.
+Bruno is deing developed as a desktop app. You need to load the app by running the nextjs app in one terminal and then run the electron app in another terminal.

 ### Dependencies
-
- NodeJS v18
+* NodeJS v18

 ### Local Development

@@ -18,6 +15,7 @@ nvm use
 npm i --legacy-peer-deps

 # build graphql docs
+# note: you can for now ignore the error thrown while building the graphql docs
 npm run build:graphql-docs

 # build bruno query
--- a/docs/development_ru.md
+++ b/docs/development_ru.md
@@ -1,55 +0,0 @@
-[English](/docs/development.md) | [Українська](/docs/development_ua.md) | **Русский**
-
-## Разработка
-
-Bruno разрабатывается как десктопное приложение. Необходимо загрузить приложение, запустив приложение nextjs в одном терминале, а затем запустить приложение electron в другом терминале.
-
-### Зависимости
-
- NodeJS v18
-
-### Локальная разработка
-
-```bash
-# используйте nodejs 18 версии
-nvm use
-
-# установите зависимости
-npm i --legacy-peer-deps
-
-# билд документации по graphql
-npm run build:graphql-docs
-
-# билд bruno query
-npm run build:bruno-query
-
-# запустить next приложение ( терминал 1 )
-npm run dev:web
-
-# запустить приложение electron ( терминал 2 )
-npm run dev:electron
-```
-
-### Устранение неисправностей
-
-При запуске `npm install` может возникнуть ошибка `Unsupported platform`. Чтобы исправить это, необходимо удалить `node_modules` и `package-lock.json` и запустить `npm install`. В результате будут установлены все пакеты, необходимые для работы приложения.
-
-```shell
-# Удаление node_modules в подкаталогах
-find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
-  rm -rf "$dir"
-done
-
-# Удаление package-lock в подкаталогах
-find . -type f -name "package-lock.json" -delete
-```
-
-### Тестирование
-
-```bash
-# bruno-schema
-npm test --workspace=packages/bruno-schema
-
-# bruno-lang
-npm test --workspace=packages/bruno-lang
-```
--- a/docs/development_ua.md
+++ b/docs/development_ua.md
@@ -1,55 +0,0 @@
-[English](/docs/development.md) | **Українська** | [Русский](/docs/development_ru.md)
-
-## Розробка
-
-Bruno розробляється як декстопний застосунок. Вам потрібно запустити nextjs в одній сесії терміналу, та запустити застосунок Electron в іншій сесії терміналу.
-
-### Залежності
-
- NodeJS v18
-
-### Локальна розробка
-
-```bash
-# Використовуйте nodejs 18-ї версії
-nvm use
-
-# встановіть залежності
-npm i --legacy-peer-deps
-
-# зберіть документацію graphql
-npm run build:graphql-docs
-
-# зберіть bruno query
-npm run build:bruno-query
-
-# запустіть додаток next (термінал 1)
-npm run dev:web
-
-# запустіть додаток електрон (термінал 2)
-npm run dev:electron
-```
-
-### Усунення несправностей
-
-Ви можете зтикнутись із помилкою `Unsupported platform` коли запускаєте `npm install`. Щоб усунути цю проблему, вам потрібно видалити `node_modules` та `package-lock.json`, і тоді запустити `npm install`. Це має встановити всі потрібні для запуску додатку пекеджі.
-
-```shell
-# Видаліть node_modules в піддиректоріях
-find ./ -type d -name "node_modules" -print0 | while read -d $'\0' dir; do
-  rm -rf "$dir"
-done
-
-# Видаліть package-lock в піддиректоріях
-find . -type f -name "package-lock.json" -delete
-```
-
-### Тестування
-
-```bash
-# bruno-schema
-npm test --workspace=packages/bruno-schema
-
-# bruno-lang
-npm test --workspace=packages/bruno-lang
-```
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,17 +13,13 @@
    "packages/bruno-testbench",
    "packages/bruno-graphql-docs"
  ],
-  "homepage": "https://usebruno.com",
  "devDependencies": {
    "@faker-js/faker": "^7.6.0",
    "@jest/globals": "^29.2.0",
    "@playwright/test": "^1.27.1",
-    "husky": "^8.0.3",
    "jest": "^29.2.0",
-    "pretty-quick": "^3.1.3",
    "randomstring": "^1.2.2",
-    "ts-jest": "^29.0.5",
-    "fs-extra": "^11.1.1"
+    "ts-jest": "^29.0.5"
  },
  "scripts": {
    "dev:web": "npm run dev --workspace=packages/bruno-app",
@@ -32,19 +28,11 @@
    "dev:electron": "npm run dev --workspace=packages/bruno-electron",
    "build:bruno-query": "npm run build --workspace=packages/bruno-query",
    "build:graphql-docs": "npm run build --workspace=packages/bruno-graphql-docs",
-    "build:electron": "node ./scripts/build-electron.js",
-    "build:electron:mac": "./scripts/build-electron.sh mac",
-    "build:electron:win": "./scripts/build-electron.sh win",
-    "build:electron:linux": "./scripts/build-electron.sh linux",
-    "build:electron:deb": "./scripts/build-electron.sh deb",
-    "build:electron:rpm": "./scripts/build-electron.sh rpm",
-    "build:electron:snap": "./scripts/build-electron.sh snap",
+    "build:electron": "./scripts/build-electron.sh",
    "test:e2e": "npx playwright test",
-    "test:report": "npx playwright show-report",
-    "test:prettier:web": "npm run test:prettier --workspace=packages/bruno-app",
-    "prepare": "husky install"
+    "test:report": "npx playwright show-report"
  },
  "overrides": {
    "rollup": "3.2.5"
  }
-}
+}
--- a/packages/bruno-app/.prettierrc.json
+++ b/packages/bruno-app/.prettierrc.json
@@ -3,5 +3,5 @@
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
-  "printWidth": 120
+  "printWidth": 180
 }
--- a/packages/bruno-app/package.json
+++ b/packages/bruno-app/package.json
@@ -8,7 +8,6 @@
    "start": "next start",
    "lint": "next lint",
    "test": "jest",
-    "test:prettier": "prettier --check \"./src/**/*.{js,jsx,json,ts,tsx}\"",
    "prettier": "prettier --write \"./src/**/*.{js,jsx,json,ts,tsx}\""
  },
  "dependencies": {
@@ -19,7 +18,7 @@
    "@tabler/icons": "^1.46.0",
    "@tippyjs/react": "^4.2.6",
    "@usebruno/graphql-docs": "0.1.0",
-    "@usebruno/schema": "0.5.0",
+    "@usebruno/schema": "0.3.1",
    "axios": "^0.26.0",
    "classnames": "^2.3.1",
    "codemirror": "^5.65.2",
@@ -28,17 +27,13 @@
    "file-dialog": "^0.0.8",
    "file-saver": "^2.0.5",
    "formik": "^2.2.9",
-    "github-markdown-css": "^5.2.0",
    "graphiql": "^1.5.9",
    "graphql": "^16.6.0",
    "graphql-request": "^3.7.0",
-    "handlebars": "^4.7.8",
-    "httpsnippet": "^3.0.1",
    "idb": "^7.0.0",
    "immer": "^9.0.15",
-    "know-your-http-well": "^0.5.0",
    "lodash": "^4.17.21",
-    "markdown-it": "^13.0.2",
+    "markdown-it": "^13.0.1",
    "mousetrap": "^1.6.5",
    "nanoid": "3.3.4",
    "next": "12.3.3",
@@ -52,13 +47,11 @@
    "react-dom": "18.2.0",
    "react-github-btn": "^1.4.0",
    "react-hot-toast": "^2.4.0",
-    "react-inspector": "^6.0.2",
    "react-redux": "^7.2.6",
    "react-tooltip": "^5.5.2",
    "sass": "^1.46.0",
    "styled-components": "^5.3.3",
    "tailwindcss": "^2.2.19",
-    "xml-formatter": "^3.5.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
--- a/packages/bruno-app/src/components/Bruno/index.js
+++ b/packages/bruno-app/src/components/Bruno/index.js
@@ -14,11 +14,7 @@ const Bruno = ({ width }) => {
          stroke="none"
          points="36,47.2521 32.9167,49.6688 30.4167,49.6688 30.3333,53.5021 31.0833,57.0021 32.1667,58.9188 35,60.4188 39.5833,59.8355 41.1667,58.0855 42.1667,53.8355 41.9167,49.8355 39.9167,50.0855"
        />
-        <polygon
-          fill="#3F3F3F"
-          stroke="none"
-          points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855"
-        />
+        <polygon fill="#3F3F3F" stroke="none" points="32.5,36.9188 30.9167,40.6688 33.0833,41.9188 34.3333,42.4188 38.6667,42.5855 41.5833,40.3355 39.8333,37.0855" />
      </g>
      <g id="hair" />
      <g id="skin" />
@@ -88,27 +84,8 @@ const Bruno = ({ width }) => {
          strokeWidth="2"
          d="M52.6309,46.4628c0,0-3.0781,6.7216-7.8049,8.2712"
        />
-        <path
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-          d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632"
-        />
-        <line
-          x1="36.2078"
-          x2="36.2078"
-          y1="47.3393"
-          y2="44.3093"
-          fill="none"
-          stroke="#000000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-        />
+        <path fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" d="M19.437,46.969c0,0,3.0781,6.0823,7.8049,7.632" />
+        <line x1="36.2078" x2="36.2078" y1="47.3393" y2="44.3093" fill="none" stroke="#000000" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" strokeWidth="2" />
      </g>
    </svg>
  );
--- a/packages/bruno-app/src/components/BrunoSupport/index.js
+++ b/packages/bruno-app/src/components/BrunoSupport/index.js
@@ -29,7 +29,7 @@ const BrunoSupport = ({ onClose }) => {
          <div className="mt-2">
            <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
              <IconBrandGithub size={18} strokeWidth={2} />
-              <span className="label ml-2">GitHub</span>
+              <span className="label ml-2">Github</span>
            </a>
          </div>
          <div className="mt-2">
--- a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -4,11 +4,9 @@ const StyledWrapper = styled.div`
  div.CodeMirror {
    background: ${(props) => props.theme.codemirror.bg};
    border: solid 1px ${(props) => props.theme.codemirror.border};
-    font-family: ${(props) => (props.font ? props.font : 'default')};
  }

-  .CodeMirror-overlayscroll-horizontal div,
-  .CodeMirror-overlayscroll-vertical div {
+  .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
    background: #d2d7db;
  }

@@ -19,14 +17,12 @@ const StyledWrapper = styled.div`
  // Todo: dark mode temporary fix
  // Clean this
  .CodeMirror.cm-s-monokai {
-    .CodeMirror-overlayscroll-horizontal div,
-    .CodeMirror-overlayscroll-vertical div {
+    .CodeMirror-overlayscroll-horizontal div, .CodeMirror-overlayscroll-vertical div {
      background: #444444;
    }
  }

-  .cm-s-monokai span.cm-property,
-  .cm-s-monokai span.cm-attribute {
+  .cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute {
    color: #9cdcfe !important;
  }

@@ -34,20 +30,16 @@ const StyledWrapper = styled.div`
    color: #ce9178 !important;
  }

-  .cm-s-monokai span.cm-number {
+  .cm-s-monokai span.cm-number{
    color: #b5cea8 !important;
  }

-  .cm-s-monokai span.cm-atom {
+  .cm-s-monokai span.cm-atom{
    color: #569cd6 !important;
  }

-  .cm-variable-valid {
-    color: green;
-  }
-  .cm-variable-invalid {
-    color: red;
-  }
+  .cm-variable-valid{color: green}
+  .cm-variable-invalid{color: red}
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/CodeEditor/index.js
+++ b/packages/bruno-app/src/components/CodeEditor/index.js
@@ -43,7 +43,7 @@ export default class CodeEditor extends React.Component {
      foldGutter: true,
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
      readOnly: this.props.readOnly,
-      scrollbarStyle: 'overlay',
+      scrollbarStyle: "overlay",
      theme: this.props.theme === 'dark' ? 'monokai' : 'default',
      extraKeys: {
        'Cmd-Enter': () => {
@@ -80,7 +80,7 @@ export default class CodeEditor extends React.Component {
  }

  componentDidUpdate(prevProps) {
-    // Ensure the changes caused by this update are not interpreted as
+    // Ensure the changes caused by this update are not interpretted as
    // user-input changes which could otherwise result in an infinite
    // event loop.
    this.ignoreChangeEvent = true;
@@ -96,7 +96,7 @@ export default class CodeEditor extends React.Component {
      this.editor.setValue(this.props.value);
    }

-    if (this.editor) {
+    if(this.editor) {
      let variables = getEnvironmentVariables(this.props.collection);
      if (!isEqual(variables, this.variables)) {
        this.addOverlay();
@@ -119,9 +119,8 @@ export default class CodeEditor extends React.Component {
  render() {
    return (
      <StyledWrapper
-        className="h-full w-full"
+        className="h-full"
        aria-label="Code Editor"
-        font={this.props.font}
        ref={(node) => {
          this._node = node;
        }}
@@ -136,7 +135,7 @@ export default class CodeEditor extends React.Component {

    defineCodeMirrorBrunoVariablesMode(variables, mode);
    this.editor.setOption('mode', 'brunovariables');
-  };
+  }

  _onEdit = () => {
    if (!this.ignoreChangeEvent && this.editor) {
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/StyledWrapper.js
@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  font-size: 0.8125rem;
-
-  .auth-mode-selector {
-    background: transparent;
-
-    .auth-mode-label {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-
-    .label-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
-
-  .caret {
-    color: rgb(140, 140, 140);
-    fill: rgb(140 140 140);
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AuthMode/index.js
@@ -1,78 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
-import { updateCollectionAuthMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestAuthMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-
-const AuthMode = ({ collection }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = get(collection, 'root.request.auth.mode');
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
-        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeChange = (value) => {
-    dispatch(
-      updateCollectionAuthMode({
-        collectionUid: collection.uid,
-        mode: value
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('awsv4');
-            }}
-          >
-            AWS Sig v4
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('basic');
-            }}
-          >
-            Basic Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('bearer');
-            }}
-          >
-            Bearer Token
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
-          </div>
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default AuthMode;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/AwsV4Auth/index.js
@@ -1,191 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const AwsV4Auth = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const awsv4Auth = get(collection, 'root.request.auth.awsv4', {});
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const handleAccessKeyIdChange = (accessKeyId) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        content: {
-          accessKeyId: accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleSecretAccessKeyChange = (secretAccessKey) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleSessionTokenChange = (sessionToken) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleServiceChange = (service) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleRegionChange = (region) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleProfileNameChange = (profileName) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: profileName
-        }
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.accessKeyId || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleAccessKeyIdChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.secretAccessKey || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleSecretAccessKeyChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Session Token</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.sessionToken || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleSessionTokenChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Service</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.service || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleServiceChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Region</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.region || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleRegionChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Profile Name</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.profileName || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleProfileNameChange(val)}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default AwsV4Auth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BasicAuth/index.js
@@ -1,71 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const BasicAuth = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const basicAuth = get(collection, 'root.request.auth.basic', {});
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const handleUsernameChange = (username) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'basic',
-        collectionUid: collection.uid,
-        content: {
-          username: username,
-          password: basicAuth.password
-        }
-      })
-    );
-  };
-
-  const handlePasswordChange = (password) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'basic',
-        collectionUid: collection.uid,
-        content: {
-          username: basicAuth.username,
-          password: password
-        }
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={basicAuth.username || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleUsernameChange(val)}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
-        <SingleLineEditor
-          value={basicAuth.password || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handlePasswordChange(val)}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default BasicAuth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/BearerAuth/index.js
@@ -1,46 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateCollectionAuth } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const BearerAuth = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const bearerToken = get(collection, 'root.request.auth.bearer.token');
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const handleTokenChange = (token) => {
-    dispatch(
-      updateCollectionAuth({
-        mode: 'bearer',
-        collectionUid: collection.uid,
-        content: {
-          token: token
-        }
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Token</label>
-      <div className="single-line-editor-wrapper">
-        <SingleLineEditor
-          value={bearerToken}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleTokenChange(val)}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default BearerAuth;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/StyledWrapper.js
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div``;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Auth/index.js
@@ -1,46 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import AuthMode from './AuthMode';
-import AwsV4Auth from './AwsV4Auth';
-import BearerAuth from './BearerAuth';
-import BasicAuth from './BasicAuth';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const Auth = ({ collection }) => {
-  const authMode = get(collection, 'root.request.auth.mode');
-  const dispatch = useDispatch();
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  const getAuthView = () => {
-    switch (authMode) {
-      case 'awsv4': {
-        return <AwsV4Auth collection={collection} />;
-      }
-      case 'basic': {
-        return <BasicAuth collection={collection} />;
-      }
-      case 'bearer': {
-        return <BearerAuth collection={collection} />;
-      }
-    }
-  };
-
-  return (
-    <StyledWrapper className="w-full mt-2">
-      <div className="flex flex-grow justify-start items-center">
-        <AuthMode collection={collection} />
-      </div>
-      {getAuthView()}
-
-      <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default Auth;
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/StyledWrapper.js
@@ -1,43 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .settings-label {
-    width: 90px;
-  }
-
-  .certificate-icon {
-    color: ${(props) => props.theme.colors.text.yellow};
-  }
-
-  input {
-    width: 300px;
-  }
-
-  .available-certificates {
-    background-color: ${(props) => props.theme.requestTabPanel.url.bg};
-
-    button.remove-certificate {
-      color: ${(props) => props.theme.colors.text.danger};
-    }
-  }
-
-  .textbox {
-    border: 1px solid #ccc;
-    padding: 0.15rem 0.45rem;
-    box-shadow: none;
-    border-radius: 0px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color ease-in-out 0.1s;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-
-    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: none !important;
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ClientCertSettings/index.js
@@ -1,130 +0,0 @@
-import React from 'react';
-import { IconCertificate, IconTrash, IconWorld } from '@tabler/icons';
-import { useFormik } from 'formik';
-import { uuid } from 'utils/common';
-import * as Yup from 'yup';
-
-import StyledWrapper from './StyledWrapper';
-
-const ClientCertSettings = ({ clientCertConfig, onUpdate, onRemove }) => {
-  const formik = useFormik({
-    initialValues: {
-      domain: '',
-      certFilePath: '',
-      keyFilePath: '',
-      passphrase: ''
-    },
-    validationSchema: Yup.object({
-      domain: Yup.string().required(),
-      certFilePath: Yup.string().required(),
-      keyFilePath: Yup.string().required(),
-      passphrase: Yup.string()
-    }),
-    onSubmit: (values) => {
-      onUpdate(values);
-    }
-  });
-
-  const getFile = (e) => {
-    formik.values[e.name] = e.files[0].path;
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="flex items-center font-semibold mt-4 mb-2">
-        <IconCertificate className="mr-1 certificate-icon" size={24} strokeWidth={1.5} /> Client Certificates
-      </div>
-      <ul className="mt-4">
-        {!clientCertConfig.length
-          ? 'None'
-          : clientCertConfig.map((clientCert) => (
-              <li key={uuid()} className="flex items-center available-certificates p-2 rounded-lg mb-2">
-                <div className="flex items-center w-full justify-between">
-                  <div className="flex items-center">
-                    <IconWorld className="mr-2" size={18} strokeWidth={1.5} />
-                    {clientCert.domain}
-                  </div>
-                  <button onClick={() => onRemove(clientCert)} className="remove-certificate ml-2">
-                    <IconTrash size={18} strokeWidth={1.5} />
-                  </button>
-                </div>
-              </li>
-            ))}
-      </ul>
-
-      <h1 className="font-semibold mt-8 mb-2">Add Client Certicate</h1>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="domain">
-            Domain
-          </label>
-          <input
-            id="domain"
-            type="text"
-            name="domain"
-            placeholder="*.example.org"
-            className="block textbox"
-            onChange={formik.handleChange}
-            value={formik.values.domain || ''}
-          />
-          {formik.touched.domain && formik.errors.domain ? (
-            <div className="ml-1 text-red-500">{formik.errors.domain}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="certFilePath">
-            Cert file
-          </label>
-          <input
-            id="certFilePath"
-            type="file"
-            name="certFilePath"
-            className="block"
-            onChange={(e) => getFile(e.target)}
-          />
-          {formik.touched.certFilePath && formik.errors.certFilePath ? (
-            <div className="ml-1 text-red-500">{formik.errors.certFilePath}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="keyFilePath">
-            Key file
-          </label>
-          <input
-            id="keyFilePath"
-            type="file"
-            name="keyFilePath"
-            className="block"
-            onChange={(e) => getFile(e.target)}
-          />
-          {formik.touched.keyFilePath && formik.errors.keyFilePath ? (
-            <div className="ml-1 text-red-500">{formik.errors.keyFilePath}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="passphrase">
-            Passphrase
-          </label>
-          <input
-            id="passphrase"
-            type="text"
-            name="passphrase"
-            className="block textbox"
-            onChange={formik.handleChange}
-            value={formik.values.passphrase || ''}
-          />
-          {formik.touched.passphrase && formik.errors.passphrase ? (
-            <div className="ml-1 text-red-500">{formik.errors.passphrase}</div>
-          ) : null}
-        </div>
-        <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
-            Add
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default ClientCertSettings;
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/StyledWrapper.js
@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 240px);
-
-    .CodeMirror-scroll {
-      padding-bottom: 0px;
-    }
-  }
-  .editing-mode {
-    cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Docs/index.js
@@ -1,55 +0,0 @@
-import 'github-markdown-css/github-markdown.css';
-import get from 'lodash/get';
-import { updateCollectionDocs } from 'providers/ReduxStore/slices/collections';
-import { useTheme } from 'providers/Theme';
-import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import Markdown from 'components/MarkDown';
-import CodeEditor from 'components/CodeEditor';
-import StyledWrapper from './StyledWrapper';
-
-const Docs = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const [isEditing, setIsEditing] = useState(false);
-  const docs = get(collection, 'root.docs', '');
-
-  const toggleViewMode = () => {
-    setIsEditing((prev) => !prev);
-  };
-
-  const onEdit = (value) => {
-    dispatch(
-      updateCollectionDocs({
-        collectionUid: collection.uid,
-        docs: value
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  return (
-    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
-        {isEditing ? 'Preview' : 'Edit'}
-      </div>
-
-      {isEditing ? (
-        <CodeEditor
-          collection={collection}
-          theme={storedTheme}
-          value={docs || ''}
-          onEdit={onEdit}
-          onSave={onSave}
-          mode="application/text"
-        />
-      ) : (
-        <Markdown onDoubleClick={toggleViewMode} content={docs} />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default Docs;
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/StyledWrapper.js
@@ -1,56 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    font-weight: 600;
-    table-layout: fixed;
-
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-    }
-
-    thead {
-      color: ${(props) => props.theme.table.thead.color};
-      font-size: 0.8125rem;
-      user-select: none;
-    }
-    td {
-      padding: 6px 10px;
-
-      &:nth-child(1) {
-        width: 30%;
-      }
-
-      &:nth-child(3) {
-        width: 70px;
-      }
-    }
-  }
-
-  .btn-add-header {
-    font-size: 0.8125rem;
-  }
-
-  input[type='text'] {
-    width: 100%;
-    border: solid 1px transparent;
-    outline: none !important;
-    background-color: inherit;
-
-    &:focus {
-      outline: none !important;
-      border: solid 1px transparent;
-    }
-  }
-
-  input[type='checkbox'] {
-    cursor: pointer;
-    position: relative;
-    top: 1px;
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Headers/index.js
@@ -1,151 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import { IconTrash } from '@tabler/icons';
-import { useDispatch } from 'react-redux';
-import { useTheme } from 'providers/Theme';
-import {
-  addCollectionHeader,
-  updateCollectionHeader,
-  deleteCollectionHeader
-} from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import SingleLineEditor from 'components/SingleLineEditor';
-import StyledWrapper from './StyledWrapper';
-import { headers as StandardHTTPHeaders } from 'know-your-http-well';
-const headerAutoCompleteList = StandardHTTPHeaders.map((e) => e.header);
-
-const Headers = ({ collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const headers = get(collection, 'root.request.headers', []);
-
-  const addHeader = () => {
-    dispatch(
-      addCollectionHeader({
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-  const handleHeaderValueChange = (e, _header, type) => {
-    const header = cloneDeep(_header);
-    switch (type) {
-      case 'name': {
-        header.name = e.target.value;
-        break;
-      }
-      case 'value': {
-        header.value = e.target.value;
-        break;
-      }
-      case 'enabled': {
-        header.enabled = e.target.checked;
-        break;
-      }
-    }
-    dispatch(
-      updateCollectionHeader({
-        header: header,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleRemoveHeader = (header) => {
-    dispatch(
-      deleteCollectionHeader({
-        headerUid: header.uid,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="w-full">
-      <table>
-        <thead>
-          <tr>
-            <td>Name</td>
-            <td>Value</td>
-            <td></td>
-          </tr>
-        </thead>
-        <tbody>
-          {headers && headers.length
-            ? headers.map((header) => {
-                return (
-                  <tr key={header.uid}>
-                    <td>
-                      <SingleLineEditor
-                        value={header.name}
-                        theme={storedTheme}
-                        onSave={handleSave}
-                        onChange={(newValue) =>
-                          handleHeaderValueChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            header,
-                            'name'
-                          )
-                        }
-                        autocomplete={headerAutoCompleteList}
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={header.value}
-                        theme={storedTheme}
-                        onSave={handleSave}
-                        onChange={(newValue) =>
-                          handleHeaderValueChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            header,
-                            'value'
-                          )
-                        }
-                        collection={collection}
-                      />
-                    </td>
-                    <td>
-                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={header.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleHeaderValueChange(e, header, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveHeader(header)}>
-                          <IconTrash strokeWidth={1.5} size={20} />
-                        </button>
-                      </div>
-                    </td>
-                  </tr>
-                );
-              })
-            : null}
-        </tbody>
-      </table>
-      <button className="btn-add-header text-link pr-2 py-3 mt-2 select-none" onClick={addHeader}>
-        + Add Header
-      </button>
-
-      <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default Headers;
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/StyledWrapper.js
@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .settings-label {
-    width: 80px;
-  }
-
-  .textbox {
-    border: 1px solid #ccc;
-    padding: 0.15rem 0.45rem;
-    box-shadow: none;
-    border-radius: 0px;
-    outline: none;
-    box-shadow: none;
-    transition: border-color ease-in-out 0.1s;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-
-    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: none !important;
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/ProxySettings/index.js
@@ -1,329 +0,0 @@
-import React, { useEffect } from 'react';
-import { useFormik } from 'formik';
-import Tooltip from 'components/Tooltip';
-import StyledWrapper from './StyledWrapper';
-import * as Yup from 'yup';
-import toast from 'react-hot-toast';
-
-const ProxySettings = ({ proxyConfig, onUpdate }) => {
-  const proxySchema = Yup.object({
-    use: Yup.string().oneOf(['global', 'true', 'false']),
-    protocol: Yup.string().oneOf(['http', 'https', 'socks4', 'socks5']),
-    hostname: Yup.string()
-      .when('use', {
-        is: true,
-        then: (hostname) => hostname.required('Specify the hostname for your proxy.'),
-        otherwise: (hostname) => hostname.nullable()
-      })
-      .max(1024),
-    port: Yup.number()
-      .when('use', {
-        is: true,
-        then: (port) => port.required('Specify port between 1 and 65535').typeError('Specify port between 1 and 65535'),
-        otherwise: (port) => port.nullable().transform((_, val) => (val ? Number(val) : null))
-      })
-      .min(1)
-      .max(65535),
-    auth: Yup.object()
-      .when('enabled', {
-        is: true,
-        then: Yup.object({
-          enabled: Yup.boolean(),
-          username: Yup.string()
-            .when('enabled', {
-              is: true,
-              then: (username) => username.required('Specify username for proxy authentication.')
-            })
-            .max(1024),
-          password: Yup.string()
-            .when('enabled', {
-              is: true,
-              then: (password) => password.required('Specify password for proxy authentication.')
-            })
-            .max(1024)
-        })
-      })
-      .optional(),
-    bypassProxy: Yup.string().optional().max(1024)
-  });
-
-  const formik = useFormik({
-    initialValues: {
-      use: proxyConfig.use || 'global',
-      protocol: proxyConfig.protocol || 'http',
-      hostname: proxyConfig.hostname || '',
-      port: proxyConfig.port || '',
-      auth: {
-        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
-        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
-        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
-      },
-      bypassProxy: proxyConfig.bypassProxy || ''
-    },
-    validationSchema: proxySchema,
-    onSubmit: (values) => {
-      proxySchema
-        .validate(values, { abortEarly: true })
-        .then((validatedProxy) => {
-          // serialize 'use' to boolean
-          if (validatedProxy.use === 'true') {
-            validatedProxy.use = true;
-          } else if (validatedProxy.use === 'false') {
-            validatedProxy.use = false;
-          }
-
-          onUpdate(validatedProxy);
-        })
-        .catch((error) => {
-          let errMsg = error.message || 'Preferences validation error';
-          toast.error(errMsg);
-        });
-    }
-  });
-
-  useEffect(() => {
-    formik.setValues({
-      use: proxyConfig.use === true ? 'true' : proxyConfig.use === false ? 'false' : 'global',
-      protocol: proxyConfig.protocol || 'http',
-      hostname: proxyConfig.hostname || '',
-      port: proxyConfig.port || '',
-      auth: {
-        enabled: proxyConfig.auth ? proxyConfig.auth.enabled || false : false,
-        username: proxyConfig.auth ? proxyConfig.auth.username || '' : '',
-        password: proxyConfig.auth ? proxyConfig.auth.password || '' : ''
-      },
-      bypassProxy: proxyConfig.bypassProxy || ''
-    });
-  }, [proxyConfig]);
-
-  return (
-    <StyledWrapper>
-      <h1 className="font-medium mb-3">Proxy Settings</h1>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label flex items-center" htmlFor="enabled">
-            Config
-            <Tooltip
-              text={`
-              <div>
-                <ul>
-                  <li><span style="width: 50px;display:inline-block;">global</span> - use global proxy config</li>
-                  <li><span style="width: 50px;display:inline-block;">enabled</span> - use collection proxy config</li>
-                  <li><span style="width: 50px;display:inline-block;">disable</span> - disable proxy</li>
-                </ul>
-              </div>
-            `}
-              tooltipId="request-var"
-            />
-          </label>
-          <div className="flex items-center">
-            <label className="flex items-center">
-              <input
-                type="radio"
-                name="use"
-                value="global"
-                checked={formik.values.use === 'global'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              global
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="use"
-                value={'true'}
-                checked={formik.values.use === 'true'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              enabled
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="use"
-                value={'false'}
-                checked={formik.values.use === 'false'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              disabled
-            </label>
-          </div>
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="protocol">
-            Protocol
-          </label>
-          <div className="flex items-center">
-            <label className="flex items-center">
-              <input
-                type="radio"
-                name="protocol"
-                value="http"
-                checked={formik.values.protocol === 'http'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              http
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="https"
-                checked={formik.values.protocol === 'https'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              https
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="socks5"
-                checked={formik.values.protocol === 'socks4'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              socks4
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="socks5"
-                checked={formik.values.protocol === 'socks5'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              socks5
-            </label>
-          </div>
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="hostname">
-            Hostname
-          </label>
-          <input
-            id="hostname"
-            type="text"
-            name="hostname"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.hostname || ''}
-          />
-          {formik.touched.hostname && formik.errors.hostname ? (
-            <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="port">
-            Port
-          </label>
-          <input
-            id="port"
-            type="number"
-            name="port"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.port}
-          />
-          {formik.touched.port && formik.errors.port ? (
-            <div className="ml-3 text-red-500">{formik.errors.port}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="auth.enabled">
-            Auth
-          </label>
-          <input
-            type="checkbox"
-            name="auth.enabled"
-            checked={formik.values.auth.enabled}
-            onChange={formik.handleChange}
-          />
-        </div>
-        <div>
-          <div className="mb-3 flex items-center">
-            <label className="settings-label" htmlFor="auth.username">
-              Username
-            </label>
-            <input
-              id="auth.username"
-              type="text"
-              name="auth.username"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.username}
-              onChange={formik.handleChange}
-            />
-            {formik.touched.auth?.username && formik.errors.auth?.username ? (
-              <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
-            ) : null}
-          </div>
-          <div className="mb-3 flex items-center">
-            <label className="settings-label" htmlFor="auth.password">
-              Password
-            </label>
-            <input
-              id="auth.password"
-              type="text"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
-            {formik.touched.auth?.password && formik.errors.auth?.password ? (
-              <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
-            ) : null}
-          </div>
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="bypassProxy">
-            Proxy Bypass
-          </label>
-          <input
-            id="bypassProxy"
-            type="text"
-            name="bypassProxy"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.bypassProxy || ''}
-          />
-          {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
-            <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
-          ) : null}
-        </div>
-        <div className="mt-6">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
-            Save
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default ProxySettings;
--- a/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/StyledWrapper.js
@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    height: inherit;
-  }
-
-  div.title {
-    color: var(--color-tab-inactive);
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Script/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -1,73 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateCollectionRequestScript, updateCollectionResponseScript } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Script = ({ collection }) => {
-  const dispatch = useDispatch();
-  const requestScript = get(collection, 'root.request.script.req', '');
-  const responseScript = get(collection, 'root.request.script.res', '');
-
-  const { storedTheme } = useTheme();
-
-  const onRequestScriptEdit = (value) => {
-    dispatch(
-      updateCollectionRequestScript({
-        script: value,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const onResponseScriptEdit = (value) => {
-    dispatch(
-      updateCollectionResponseScript({
-        script: value,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleSave = () => {
-    dispatch(saveCollectionRoot(collection.uid));
-  };
-
-  return (
-    <StyledWrapper className="w-full flex flex-col">
-      <div className="flex-1 mt-2">
-        <div className="mb-1 title text-xs">Pre Request</div>
-        <CodeEditor
-          collection={collection}
-          value={requestScript || ''}
-          theme={storedTheme}
-          onEdit={onRequestScriptEdit}
-          mode="javascript"
-          onSave={handleSave}
-        />
-      </div>
-      <div className="flex-1 mt-6">
-        <div className="mt-1 mb-1 title text-xs">Post Response</div>
-        <CodeEditor
-          collection={collection}
-          value={responseScript || ''}
-          theme={storedTheme}
-          onEdit={onResponseScriptEdit}
-          mode="javascript"
-          onSave={handleSave}
-        />
-      </div>
-
-      <div className="mt-12">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Script;
--- a/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/StyledWrapper.js
@@ -1,46 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  max-width: 800px;
-
-  div.tabs {
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
-      color: var(--color-tab-inactive);
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-    }
-  }
-  table {
-    thead,
-    td {
-      border: 1px solid ${(props) => props.theme.table.border};
-
-      li {
-        background-color: ${(props) => props.theme.bg} !important;
-      }
-    }
-  }
-
-  .muted {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/StyledWrapper.js
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div``;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@@ -1,47 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useDispatch } from 'react-redux';
-import CodeEditor from 'components/CodeEditor';
-import { updateCollectionTests } from 'providers/ReduxStore/slices/collections';
-import { saveCollectionRoot } from 'providers/ReduxStore/slices/collections/actions';
-import { useTheme } from 'providers/Theme';
-import StyledWrapper from './StyledWrapper';
-
-const Tests = ({ collection }) => {
-  const dispatch = useDispatch();
-  const tests = get(collection, 'root.request.tests', '');
-
-  const { storedTheme } = useTheme();
-
-  const onEdit = (value) => {
-    dispatch(
-      updateCollectionTests({
-        tests: value,
-        collectionUid: collection.uid
-      })
-    );
-  };
-
-  const handleSave = () => dispatch(saveCollectionRoot(collection.uid));
-
-  return (
-    <StyledWrapper className="w-full flex flex-col h-full">
-      <CodeEditor
-        collection={collection}
-        value={tests || ''}
-        theme={storedTheme}
-        onEdit={onEdit}
-        mode="javascript"
-        onSave={handleSave}
-      />
-
-      <div className="mt-6">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Tests;
--- a/packages/bruno-app/src/components/CollectionSettings/index.js
+++ b/packages/bruno-app/src/components/CollectionSettings/index.js
@@ -1,143 +0,0 @@
-import React from 'react';
-import classnames from 'classnames';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import toast from 'react-hot-toast';
-import { updateBrunoConfig } from 'providers/ReduxStore/slices/collections/actions';
-import { updateSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
-import { useDispatch } from 'react-redux';
-import ProxySettings from './ProxySettings';
-import ClientCertSettings from './ClientCertSettings';
-import Headers from './Headers';
-import Auth from './Auth';
-import Script from './Script';
-import Test from './Tests';
-import Docs from './Docs';
-import StyledWrapper from './StyledWrapper';
-
-const CollectionSettings = ({ collection }) => {
-  const dispatch = useDispatch();
-  const tab = collection.settingsSelectedTab;
-  const setTab = (tab) => {
-    dispatch(
-      updateSettingsSelectedTab({
-        collectionUid: collection.uid,
-        tab
-      })
-    );
-  };
-
-  const proxyConfig = get(collection, 'brunoConfig.proxy', {});
-
-  const clientCertConfig = get(collection, 'brunoConfig.clientCertificates.certs', []);
-
-  const onProxySettingsUpdate = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    brunoConfig.proxy = config;
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully.');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
-
-  const onClientCertSettingsUpdate = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    if (!brunoConfig.clientCertificates) {
-      brunoConfig.clientCertificates = {
-        enabled: true,
-        certs: [config]
-      };
-    } else {
-      brunoConfig.clientCertificates.certs.push(config);
-    }
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
-
-  const onClientCertSettingsRemove = (config) => {
-    const brunoConfig = cloneDeep(collection.brunoConfig);
-    brunoConfig.clientCertificates.certs = brunoConfig.clientCertificates.certs.filter(
-      (item) => item.domain != config.domain
-    );
-    dispatch(updateBrunoConfig(brunoConfig, collection.uid))
-      .then(() => {
-        toast.success('Collection settings updated successfully');
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update collection settings'));
-  };
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'headers': {
-        return <Headers collection={collection} />;
-      }
-      case 'auth': {
-        return <Auth collection={collection} />;
-      }
-      case 'script': {
-        return <Script collection={collection} />;
-      }
-      case 'tests': {
-        return <Test collection={collection} />;
-      }
-      case 'proxy': {
-        return <ProxySettings proxyConfig={proxyConfig} onUpdate={onProxySettingsUpdate} />;
-      }
-      case 'clientCert': {
-        return (
-          <ClientCertSettings
-            clientCertConfig={clientCertConfig}
-            onUpdate={onClientCertSettingsUpdate}
-            onRemove={onClientCertSettingsRemove}
-          />
-        );
-      }
-      case 'docs': {
-        return <Docs collection={collection} />;
-      }
-    }
-  };
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === tab
-    });
-  };
-
-  return (
-    <StyledWrapper className="flex flex-col h-full relative px-4 py-4">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
-        <div className={getTabClassname('headers')} role="tab" onClick={() => setTab('headers')}>
-          Headers
-        </div>
-        <div className={getTabClassname('auth')} role="tab" onClick={() => setTab('auth')}>
-          Auth
-        </div>
-        <div className={getTabClassname('script')} role="tab" onClick={() => setTab('script')}>
-          Script
-        </div>
-        <div className={getTabClassname('tests')} role="tab" onClick={() => setTab('tests')}>
-          Tests
-        </div>
-        <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
-          Proxy
-        </div>
-        <div className={getTabClassname('clientCert')} role="tab" onClick={() => setTab('clientCert')}>
-          Client Certificates
-        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => setTab('docs')}>
-          Docs
-        </div>
-      </div>
-      <section className={`flex ${['auth', 'script', 'docs', 'clientCert'].includes(tab) ? '' : 'mt-4'}`}>
-        {getTabPanel(tab)}
-      </section>
-    </StyledWrapper>
-  );
-};
-
-export default CollectionSettings;
--- a/packages/bruno-app/src/components/Documentation/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Documentation/StyledWrapper.js
@@ -1,18 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.CodeMirror {
-    /* todo: find a better way */
-    height: calc(100vh - 240px);
-
-    .CodeMirror-scroll {
-      padding-bottom: 0px;
-    }
-  }
-  .editing-mode {
-    cursor: pointer;
-    color: ${(props) => props.theme.colors.text.yellow};
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Documentation/index.js
+++ b/packages/bruno-app/src/components/Documentation/index.js
@@ -1,60 +0,0 @@
-import 'github-markdown-css/github-markdown.css';
-import get from 'lodash/get';
-import { updateRequestDocs } from 'providers/ReduxStore/slices/collections';
-import { useTheme } from 'providers/Theme/index';
-import { useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import Markdown from 'components/MarkDown';
-import CodeEditor from 'components/CodeEditor';
-import StyledWrapper from './StyledWrapper';
-
-const Documentation = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-  const [isEditing, setIsEditing] = useState(false);
-  const docs = item.draft ? get(item, 'draft.request.docs') : get(item, 'request.docs');
-
-  const toggleViewMode = () => {
-    setIsEditing((prev) => !prev);
-  };
-
-  const onEdit = (value) => {
-    dispatch(
-      updateRequestDocs({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        docs: value
-      })
-    );
-  };
-
-  const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  if (!item) {
-    return null;
-  }
-
-  return (
-    <StyledWrapper className="mt-1 h-full w-full relative">
-      <div className="editing-mode mb-2" role="tab" onClick={toggleViewMode}>
-        {isEditing ? 'Preview' : 'Edit'}
-      </div>
-
-      {isEditing ? (
-        <CodeEditor
-          collection={collection}
-          theme={storedTheme}
-          value={docs || ''}
-          onEdit={onEdit}
-          onSave={onSave}
-          mode="application/text"
-        />
-      ) : (
-        <Markdown onDoubleClick={toggleViewMode} content={docs} />
-      )}
-    </StyledWrapper>
-  );
-};
-
-export default Documentation;
--- a/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Dropdown/StyledWrapper.js
@@ -43,7 +43,7 @@ const Wrapper = styled.div`
        }

        &.border-top {
-          border-top: solid 1px ${(props) => props.theme.dropdown.separator};
+          border-top: solid 1px ${(props) => props.theme.dropdown.seperator};
        }
      }
    }
--- a/packages/bruno-app/src/components/Dropdown/index.js
+++ b/packages/bruno-app/src/components/Dropdown/index.js
@@ -5,16 +5,7 @@ import StyledWrapper from './StyledWrapper';
 const Dropdown = ({ icon, children, onCreate, placement }) => {
  return (
    <StyledWrapper className="dropdown">
-      <Tippy
-        content={children}
-        placement={placement || 'bottom-end'}
-        animation={false}
-        arrow={false}
-        onCreate={onCreate}
-        interactive={true}
-        trigger="click"
-        appendTo="parent"
-      >
+      <Tippy content={children} placement={placement || 'bottom-end'} animation={false} arrow={false} onCreate={onCreate} interactive={true} trigger="click" appendTo="parent">
        {icon}
      </Tippy>
    </StyledWrapper>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';

 const Wrapper = styled.div`
  .current-enviroment {
-    background-color: ${(props) => props.theme.sidebar.badge.bg};
+    background-color:  ${(props) => props.theme.sidebar.badge.bg};
    border-radius: 15px;

    .caret {
--- a/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSelector/index.js
@@ -35,7 +35,7 @@ const EnvironmentSelector = ({ collection }) => {
          toast.success(`No Environments are active now`);
        }
      })
-      .catch((err) => console.log(err) && toast.error('An error occurred while selecting the environment'));
+      .catch((err) => console.log(err) && toast.error('An error occured while selecting the environment'));
  };

  return (
@@ -64,7 +64,7 @@ const EnvironmentSelector = ({ collection }) => {
            }}
          >
            <IconDatabaseOff size={18} strokeWidth={1.5} />
-            <span className="ml-2">No Environment</span>
+            <span className='ml-2'>No Environment</span>
          </div>
          <div className="dropdown-item border-top" onClick={() => setOpenSettingsModal(true)}>
            <div className="pr-2 text-gray-600">
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CopyEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CopyEnvironment/index.js
@@ -1,75 +0,0 @@
-import Modal from 'components/Modal/index';
-import Portal from 'components/Portal/index';
-import { useFormik } from 'formik';
-import { copyEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { useEffect, useRef } from 'react';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import * as Yup from 'yup';
-
-const CopyEnvironment = ({ collection, environment, onClose }) => {
-  const dispatch = useDispatch();
-  const inputRef = useRef();
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      name: environment.name + ' - Copy'
-    },
-    validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
-    }),
-    onSubmit: (values) => {
-      dispatch(copyEnvironment(values.name, environment.uid, collection.uid))
-        .then(() => {
-          toast.success('Environment created in collection');
-          onClose();
-        })
-        .catch(() => toast.error('An error occurred while created the environment'));
-    }
-  });
-
-  useEffect(() => {
-    if (inputRef && inputRef.current) {
-      inputRef.current.focus();
-    }
-  }, [inputRef]);
-
-  const onSubmit = () => {
-    formik.handleSubmit();
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title={'Copy Environment'} confirmText="Copy" handleConfirm={onSubmit} handleCancel={onClose}>
-        <form className="bruno-form" onSubmit={formik.handleSubmit}>
-          <div>
-            <label htmlFor="name" className="block font-semibold">
-              New Environment Name
-            </label>
-            <input
-              id="environment-name"
-              type="text"
-              name="name"
-              ref={inputRef}
-              className="block textbox mt-2 w-full"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              onChange={formik.handleChange}
-              value={formik.values.name || ''}
-            />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
-          </div>
-        </form>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default CopyEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/CreateEnvironment/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import Portal from 'components/Portal';
-import Modal from 'components/Modal';
+import Portal from 'components/Portal/index';
+import Modal from 'components/Modal/index';
 import toast from 'react-hot-toast';
 import { useFormik } from 'formik';
 import { addEnvironment } from 'providers/ReduxStore/slices/collections/actions';
@@ -16,10 +16,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
      name: ''
    },
    validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
+      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
    }),
    onSubmit: (values) => {
      dispatch(addEnvironment(values.name, collection.uid))
@@ -27,7 +24,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
          toast.success('Environment created in collection');
          onClose();
        })
-        .catch(() => toast.error('An error occurred while created the environment'));
+        .catch(() => toast.error('An error occured while created the environment'));
    }
  });

@@ -43,13 +40,7 @@ const CreateEnvironment = ({ collection, onClose }) => {

  return (
    <Portal>
-      <Modal
-        size="sm"
-        title={'Create Environment'}
-        confirmText="Create"
-        handleConfirm={onSubmit}
-        handleCancel={onClose}
-      >
+      <Modal size="sm" title={'Create Environment'} confirmText="Create" handleConfirm={onSubmit} handleCancel={onClose}>
        <form className="bruno-form" onSubmit={formik.handleSubmit}>
          <div>
            <label htmlFor="name" className="block font-semibold">
@@ -68,9 +59,7 @@ const CreateEnvironment = ({ collection, onClose }) => {
              onChange={formik.handleChange}
              value={formik.values.name || ''}
            />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
+            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
          </div>
        </form>
      </Modal>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/DeleteEnvironment/index.js
@@ -14,19 +14,13 @@ const DeleteEnvironment = ({ onClose, environment, collection }) => {
        toast.success('Environment deleted successfully');
        onClose();
      })
-      .catch(() => toast.error('An error occurred while deleting the environment'));
+      .catch(() => toast.error('An error occured while deleting the environment'));
  };

  return (
    <Portal>
      <StyledWrapper>
-        <Modal
-          size="sm"
-          title={'Delete Environment'}
-          confirmText="Delete"
-          handleConfirm={onConfirm}
-          handleCancel={onClose}
-        >
+        <Modal size="sm" title={'Delete Environment'} confirmText="Delete" handleConfirm={onConfirm} handleCancel={onClose}>
          Are you sure you want to delete <span className="font-semibold">{environment.name}</span> ?
        </Modal>
      </StyledWrapper>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/StyledWrapper.js
@@ -5,30 +5,18 @@ const Wrapper = styled.div`
    width: 100%;
    border-collapse: collapse;
    font-weight: 600;
-    table-layout: fixed;

    thead,
    td {
      border: 1px solid ${(props) => props.theme.collection.environment.settings.gridBorder};
-      padding: 4px 10px;
-
-      &:nth-child(1),
-      &:nth-child(4),
-      &:nth-child(5) {
-        width: 70px;
-      }
-
-      &:nth-child(2) {
-        width: 25%;
-      }
    }

    thead {
-      color: ${(props) => props.theme.table.thead.color};
+      color: ${(props) => props.theme.table.thead.color};;
      font-size: 0.8125rem;
      user-select: none;
    }
-    thead td {
+    td {
      padding: 6px 10px;
    }
  }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/index.js
@@ -2,16 +2,13 @@ import React, { useReducer } from 'react';
 import toast from 'react-hot-toast';
 import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
-import { useTheme } from 'providers/Theme';
 import { useDispatch } from 'react-redux';
 import { saveEnvironment } from 'providers/ReduxStore/slices/collections/actions';
 import reducer from './reducer';
-import SingleLineEditor from 'components/SingleLineEditor';
 import StyledWrapper from './StyledWrapper';

 const EnvironmentVariables = ({ environment, collection }) => {
  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
  const [state, reducerDispatch] = useReducer(reducer, { hasChanges: false, variables: environment.variables || [] });
  const { variables, hasChanges } = state;

@@ -23,7 +20,7 @@ const EnvironmentVariables = ({ environment, collection }) => {
          type: 'CHANGES_SAVED'
        });
      })
-      .catch(() => toast.error('An error occurred while saving the changes'));
+      .catch(() => toast.error('An error occured while saving the changes'));
  };

  const addVariable = () => {
@@ -47,10 +44,6 @@ const EnvironmentVariables = ({ environment, collection }) => {
        variable.enabled = e.target.checked;
        break;
      }
-      case 'secret': {
-        variable.secret = e.target.checked;
-        break;
-      }
    }
    reducerDispatch({
      type: 'UPDATE_VAR',
@@ -70,10 +63,8 @@ const EnvironmentVariables = ({ environment, collection }) => {
      <table>
        <thead>
          <tr>
-            <td>Enabled</td>
            <td>Name</td>
            <td>Value</td>
-            <td>Secret</td>
            <td></td>
          </tr>
        </thead>
@@ -82,14 +73,6 @@ const EnvironmentVariables = ({ environment, collection }) => {
            ? variables.map((variable, index) => {
                return (
                  <tr key={variable.uid}>
-                    <td className="text-center">
-                      <input
-                        type="checkbox"
-                        checked={variable.enabled}
-                        className="mr-3 mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'enabled')}
-                      />
-                    </td>
                    <td>
                      <input
                        type="text"
@@ -102,26 +85,25 @@ const EnvironmentVariables = ({ environment, collection }) => {
                        onChange={(e) => handleVarChange(e, variable, 'name')}
                      />
                    </td>
-                    <td>
-                      <SingleLineEditor
-                        value={variable.value}
-                        theme={storedTheme}
-                        onChange={(newValue) => handleVarChange({ target: { value: newValue } }, variable, 'value')}
-                        collection={collection}
-                      />
-                    </td>
                    <td>
                      <input
-                        type="checkbox"
-                        checked={variable.secret}
-                        className="mr-3 mousetrap"
-                        onChange={(e) => handleVarChange(e, variable, 'secret')}
+                        type="text"
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck="false"
+                        value={variable.value}
+                        className="mousetrap"
+                        onChange={(e) => handleVarChange(e, variable, 'value')}
                      />
                    </td>
                    <td>
-                      <button onClick={() => handleRemoveVars(variable)}>
-                        <IconTrash strokeWidth={1.5} size={20} />
-                      </button>
+                      <div className="flex items-center">
+                        <input type="checkbox" checked={variable.enabled} className="mr-3 mousetrap" onChange={(e) => handleVarChange(e, variable, 'enabled')} />
+                        <button onClick={() => handleRemoveVars(variable)}>
+                          <IconTrash strokeWidth={1.5} size={20} />
+                        </button>
+                      </div>
                    </td>
                  </tr>
                );
@@ -137,12 +119,7 @@ const EnvironmentVariables = ({ environment, collection }) => {
      </div>

      <div>
-        <button
-          type="submit"
-          className="submit btn btn-md btn-secondary mt-2"
-          disabled={!hasChanges}
-          onClick={saveChanges}
-        >
+        <button type="submit" className="submit btn btn-md btn-secondary mt-2" disabled={!hasChanges} onClick={saveChanges}>
          Save
        </button>
      </div>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/reducer.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/EnvironmentVariables/reducer.js
@@ -12,7 +12,6 @@ const reducer = (state, action) => {
          name: '',
          value: '',
          type: 'text',
-          secret: false,
          enabled: true
        });
        draft.hasChanges = true;
@@ -25,7 +24,6 @@ const reducer = (state, action) => {
        variable.name = action.variable.name;
        variable.value = action.variable.value;
        variable.enabled = action.variable.enabled;
-        variable.secret = action.variable.secret;
        draft.hasChanges = true;
      });
    }
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/EnvironmentDetails/index.js
@@ -1,30 +1,17 @@
-import { IconCopy, IconDatabase, IconEdit, IconTrash } from '@tabler/icons';
-import { useState } from 'react';
-import CopyEnvironment from '../../CopyEnvironment';
-import DeleteEnvironment from '../../DeleteEnvironment';
-import RenameEnvironment from '../../RenameEnvironment';
+import React, { useState } from 'react';
+import { IconEdit, IconTrash, IconDatabase } from '@tabler/icons';
 import EnvironmentVariables from './EnvironmentVariables';
+import RenameEnvironment from '../../RenameEnvironment';
+import DeleteEnvironment from '../../DeleteEnvironment';

 const EnvironmentDetails = ({ environment, collection }) => {
  const [openEditModal, setOpenEditModal] = useState(false);
  const [openDeleteModal, setOpenDeleteModal] = useState(false);
-  const [openCopyModal, setOpenCopyModal] = useState(false);

  return (
    <div className="px-6 flex-grow flex flex-col pt-6" style={{ maxWidth: '700px' }}>
-      {openEditModal && (
-        <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />
-      )}
-      {openDeleteModal && (
-        <DeleteEnvironment
-          onClose={() => setOpenDeleteModal(false)}
-          environment={environment}
-          collection={collection}
-        />
-      )}
-      {openCopyModal && (
-        <CopyEnvironment onClose={() => setOpenCopyModal(false)} environment={environment} collection={collection} />
-      )}
+      {openEditModal && <RenameEnvironment onClose={() => setOpenEditModal(false)} environment={environment} collection={collection} />}
+      {openDeleteModal && <DeleteEnvironment onClose={() => setOpenDeleteModal(false)} environment={environment} collection={collection} />}
      <div className="flex">
        <div className="flex flex-grow items-center">
          <IconDatabase className="cursor-pointer" size={20} strokeWidth={1.5} />
@@ -32,7 +19,6 @@ const EnvironmentDetails = ({ environment, collection }) => {
        </div>
        <div className="flex gap-x-4 pl-4">
          <IconEdit className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenEditModal(true)} />
-          <IconCopy className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenCopyModal(true)} />
          <IconTrash className="cursor-pointer" size={20} strokeWidth={1.5} onClick={() => setOpenDeleteModal(true)} />
        </div>
      </div>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/StyledWrapper.js
@@ -10,7 +10,6 @@ const StyledWrapper = styled.div`
    background-color: ${(props) => props.theme.collection.environment.settings.sidebar.bg};
    border-right: solid 1px ${(props) => props.theme.collection.environment.settings.sidebar.borderRight};
    min-height: 400px;
-    height: 100%;
  }

  .environment-item {
@@ -36,8 +35,7 @@ const StyledWrapper = styled.div`
    }
  }

-  .btn-create-environment,
-  .btn-import-environment {
+  .btn-create-environment {
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: none;
@@ -49,10 +47,6 @@ const StyledWrapper = styled.div`
      }
    }
  }
-
-  .btn-import-environment {
-    color: ${(props) => props.theme.colors.text.muted};
-  }
 `;

 export default StyledWrapper;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/EnvironmentList/index.js
@@ -1,30 +1,25 @@
 import React, { useEffect, useState, forwardRef, useRef } from 'react';
 import { findEnvironmentInCollection } from 'utils/collections';
-import toast from 'react-hot-toast';
-import { toastError } from 'utils/common/error';
 import usePrevious from 'hooks/usePrevious';
 import EnvironmentDetails from './EnvironmentDetails';
-import CreateEnvironment from '../CreateEnvironment';
-import { IconDownload } from '@tabler/icons';
-import ImportEnvironment from '../ImportEnvironment';
+import CreateEnvironment from '../CreateEnvironment/index';
 import StyledWrapper from './StyledWrapper';

 const EnvironmentList = ({ collection }) => {
  const { environments } = collection;
  const [selectedEnvironment, setSelectedEnvironment] = useState(null);
  const [openCreateModal, setOpenCreateModal] = useState(false);
-  const [openImportModal, setOpenImportModal] = useState(false);

  const envUids = environments ? environments.map((env) => env.uid) : [];
  const prevEnvUids = usePrevious(envUids);

  useEffect(() => {
-    if (selectedEnvironment) {
+    if(selectedEnvironment) {
      return;
    }
-
+      
    const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-    if (environment) {
+    if(environment) {
      setSelectedEnvironment(environment);
    } else {
      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
@@ -33,9 +28,9 @@ const EnvironmentList = ({ collection }) => {

  useEffect(() => {
    // check env add
-    if (prevEnvUids && prevEnvUids.length && envUids.length > prevEnvUids.length) {
+    if (prevEnvUids && prevEnvUids.length &&  envUids.length > prevEnvUids.length) {
      const newEnv = environments.find((env) => !prevEnvUids.includes(env.uid));
-      if (newEnv) {
+      if(newEnv){
        setSelectedEnvironment(newEnv);
      }
    }
@@ -43,7 +38,7 @@ const EnvironmentList = ({ collection }) => {
    // check env delete
    if (prevEnvUids && prevEnvUids.length && envUids.length < prevEnvUids.length) {
      setSelectedEnvironment(environments && environments.length ? environments[0] : null);
-    }
+    }     
  }, [envUids, environments, prevEnvUids]);

  if (!selectedEnvironment) {
@@ -53,10 +48,9 @@ const EnvironmentList = ({ collection }) => {
  return (
    <StyledWrapper>
      {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-      {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
      <div className="flex">
        <div>
-          <div className="environments-sidebar flex flex-col">
+          <div className="environments-sidebar">
            {environments &&
              environments.length &&
              environments.map((env) => (
@@ -71,11 +65,6 @@ const EnvironmentList = ({ collection }) => {
            <div className="btn-create-environment" onClick={() => setOpenCreateModal(true)}>
              + <span>Create</span>
            </div>
-
-            <div className="mt-auto flex items-center btn-import-environment" onClick={() => setOpenImportModal(true)}>
-              <IconDownload size={12} strokeWidth={2} />
-              <span className="label ml-1 text-xs">Import</span>
-            </div>
          </div>
        </div>
        <EnvironmentDetails environment={selectedEnvironment} collection={collection} />
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/ImportEnvironment/index.js
@@ -1,39 +0,0 @@
-import React from 'react';
-import Portal from 'components/Portal';
-import toast from 'react-hot-toast';
-import { useDispatch } from 'react-redux';
-import importPostmanEnvironment from 'utils/importers/postman-environment';
-import { importEnvironment } from 'providers/ReduxStore/slices/collections/actions';
-import { toastError } from 'utils/common/error';
-import Modal from 'components/Modal';
-
-const ImportEnvironment = ({ onClose, collection }) => {
-  const dispatch = useDispatch();
-
-  const handleImportPostmanEnvironment = () => {
-    importPostmanEnvironment()
-      .then((environment) => {
-        dispatch(importEnvironment(environment.name, environment.variables, collection.uid))
-          .then(() => {
-            toast.success('Environment imported successfully');
-            onClose();
-          })
-          .catch(() => toast.error('An error occurred while importing the environment'));
-      })
-      .catch((err) => toastError(err, 'Postman Import environment failed'));
-  };
-
-  return (
-    <Portal>
-      <Modal size="sm" title="Import Environment" hideFooter={true} handleConfirm={onClose} handleCancel={onClose}>
-        <div>
-          <div className="text-link hover:underline cursor-pointer" onClick={handleImportPostmanEnvironment}>
-            Postman Environment
-          </div>
-        </div>
-      </Modal>
-    </Portal>
-  );
-};
-
-export default ImportEnvironment;
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/RenameEnvironment/index.js
@@ -16,10 +16,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
      name: environment.name
    },
    validationSchema: Yup.object({
-      name: Yup.string()
-        .min(1, 'must be at least 1 character')
-        .max(50, 'must be 50 characters or less')
-        .required('name is required')
+      name: Yup.string().min(1, 'must be atleast 1 characters').max(50, 'must be 50 characters or less').required('name is required')
    }),
    onSubmit: (values) => {
      dispatch(renameEnvironment(values.name, environment.uid, collection.uid))
@@ -27,7 +24,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
          toast.success('Environment renamed successfully');
          onClose();
        })
-        .catch(() => toast.error('An error occurred while renaming the environment'));
+        .catch(() => toast.error('An error occured while renaming the environment'));
    }
  });

@@ -43,13 +40,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {

  return (
    <Portal>
-      <Modal
-        size="sm"
-        title={'Rename Environment'}
-        confirmText="Rename"
-        handleConfirm={onSubmit}
-        handleCancel={onClose}
-      >
+      <Modal size="sm" title={'Rename Environment'} confirmText="Rename" handleConfirm={onSubmit} handleCancel={onClose}>
        <form className="bruno-form" onSubmit={formik.handleSubmit}>
          <div>
            <label htmlFor="name" className="block font-semibold">
@@ -68,9 +59,7 @@ const RenameEnvironment = ({ onClose, environment, collection }) => {
              onChange={formik.handleChange}
              value={formik.values.name || ''}
            />
-            {formik.touched.name && formik.errors.name ? (
-              <div className="text-red-500">{formik.errors.name}</div>
-            ) : null}
+            {formik.touched.name && formik.errors.name ? <div className="text-red-500">{formik.errors.name}</div> : null}
          </div>
        </form>
      </Modal>
--- a/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
+++ b/packages/bruno-app/src/components/Environments/EnvironmentSettings/index.js
@@ -3,42 +3,20 @@ import React, { useState } from 'react';
 import CreateEnvironment from './CreateEnvironment';
 import EnvironmentList from './EnvironmentList';
 import StyledWrapper from './StyledWrapper';
-import ImportEnvironment from './ImportEnvironment';

 const EnvironmentSettings = ({ collection, onClose }) => {
  const { environments } = collection;
  const [openCreateModal, setOpenCreateModal] = useState(false);
-  const [openImportModal, setOpenImportModal] = useState(false);

  if (!environments || !environments.length) {
    return (
      <StyledWrapper>
-        <Modal
-          size="md"
-          title="Environments"
-          confirmText={'Close'}
-          handleConfirm={onClose}
-          handleCancel={onClose}
-          hideCancel={true}
-        >
+        <Modal size="md" title="Environments" confirmText={'Close'} handleConfirm={onClose} handleCancel={onClose} hideCancel={true}>
          {openCreateModal && <CreateEnvironment collection={collection} onClose={() => setOpenCreateModal(false)} />}
-          {openImportModal && <ImportEnvironment collection={collection} onClose={() => setOpenImportModal(false)} />}
-          <div className="text-center flex flex-col">
+          <div className="text-center">
            <p>No environments found!</p>
-            <button
-              className="btn-create-environment text-link pr-2 py-3 mt-2 select-none"
-              onClick={() => setOpenCreateModal(true)}
-            >
-              <span>Create Environment</span>
-            </button>
-
-            <span>Or</span>
-
-            <button
-              className="btn-import-environment text-link pl-2 pr-2 py-3 select-none"
-              onClick={() => setOpenImportModal(true)}
-            >
-              <span>Import Environment</span>
+            <button className="btn-create-environment text-link pr-2 py-3 mt-2 select-none" onClick={() => setOpenCreateModal(true)}>
+              + <span>Create Environment</span>
            </button>
          </div>
        </Modal>
--- a/packages/bruno-app/src/components/Icons/Send/index.js
+++ b/packages/bruno-app/src/components/Icons/Send/index.js
@@ -1,12 +1,17 @@
 import React from 'react';

-const SendIcon = ({ color, width }) => {
+const SendIcon = ({color, width}) => {
  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width={width} height={width} viewBox="0 0 48 48">
-      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z" />
-      <path d="M0 0h48v48h-48z" fill="none" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={width}
+      viewBox="0 0 48 48"
+    >
+      <path fill={color} d="M4.02 42l41.98-18-41.98-18-.02 14 30 4-30 4z"/>
+      <path d="M0 0h48v48h-48z" fill="none"/>
    </svg>
  );
-};
+}

 export default SendIcon;
--- a/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
+++ b/packages/bruno-app/src/components/MarkDown/StyledWrapper.js
@@ -1,83 +0,0 @@
-import styled from 'styled-components';
-
-const StyledMarkdownBodyWrapper = styled.div`
-  background: transparent;
-  height: inherit;
-  .markdown-body {
-    background: transparent;
-    overflow-y: auto;
-    color: ${(props) => props.theme.text};
-    box-sizing: border-box;
-    height: 100%;
-    margin: 0 auto;
-    padding-top: 0.5rem;
-    font-size: 0.875rem;
-
-    h1 {
-      margin: 0.67em 0;
-      font-weight: var(--base-text-weight-semibold, 600);
-      padding-bottom: 0.3em;
-      font-size: 1.3;
-      border-bottom: 1px solid var(--color-border-muted);
-    }
-
-    h2 {
-      font-weight: var(--base-text-weight-semibold, 600);
-      padding-bottom: 0.3em;
-      font-size: 1.2;
-      border-bottom: 1px solid var(--color-border-muted);
-    }
-
-    h3 {
-      font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 1.1em;
-    }
-
-    h4 {
-      font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 1em;
-    }
-
-    h5 {
-      font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 0.95em;
-    }
-
-    h6 {
-      font-weight: var(--base-text-weight-semibold, 600);
-      font-size: 0.9em;
-      color: var(--color-fg-muted);
-    }
-
-    hr {
-      box-sizing: content-box;
-      overflow: hidden;
-      border-bottom: 1px solid var(--color-border-muted);
-      height: 1px;
-      padding: 0;
-      margin: 24px 0;
-      background-color: var(--color-border-default);
-      border: 0;
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-
-    pre {
-      background: ${(props) => props.theme.sidebar.bg};
-    }
-  }
-
-  @media (max-width: 767px) {
-    .markdown-body {
-      padding: 15px;
-    }
-  }
-`;
-
-export default StyledMarkdownBodyWrapper;
--- a/packages/bruno-app/src/components/MarkDown/index.js
+++ b/packages/bruno-app/src/components/MarkDown/index.js
@@ -1,32 +0,0 @@
-import MarkdownIt from 'markdown-it';
-import StyledWrapper from './StyledWrapper';
-
-const md = new MarkdownIt();
-
-const Markdown = ({ onDoubleClick, content }) => {
-  const handleOnDoubleClick = (event) => {
-    switch (event.detail) {
-      case 2: {
-        onDoubleClick();
-        break;
-      }
-      case 1:
-      default: {
-        break;
-      }
-    }
-  };
-  const htmlFromMarkdown = md.render(content || '');
-
-  return (
-    <StyledWrapper>
-      <div
-        className="markdown-body"
-        dangerouslySetInnerHTML={{ __html: htmlFromMarkdown }}
-        onClick={handleOnDoubleClick}
-      />
-    </StyledWrapper>
-  );
-};
-
-export default Markdown;
--- a/packages/bruno-app/src/components/Modal/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Modal/StyledWrapper.js
@@ -1,8 +1,6 @@
 import styled from 'styled-components';

 const Wrapper = styled.div`
-  color: ${(props) => props.theme.text};
-
  &.modal--animate-out {
    animation: fade-out 0.5s forwards cubic-bezier(0.19, 1, 0.22, 1);

@@ -21,8 +19,7 @@ const Wrapper = styled.div`
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
-    z-index: 10;
-    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1003;
  }

  .bruno-modal-card {
@@ -31,7 +28,7 @@ const Wrapper = styled.div`
    background: var(--color-background-top);
    border-radius: var(--border-radius);
    position: relative;
-    z-index: 10;
+    z-index: 1003;
    max-width: calc(100% - var(--spacing-base-unit));
    box-shadow: var(--box-shadow-base);
    display: flex;
@@ -103,7 +100,7 @@ const Wrapper = styled.div`
      border-radius: 0px;
      outline: none;
      box-shadow: none;
-      transition: border-color ease-in-out 0.1s;
+      transition: border-color ease-in-out .1s;
      border-radius: 3px;
      background-color: ${(props) => props.theme.modal.input.bg};
      border: 1px solid ${(props) => props.theme.modal.input.border};
--- a/packages/bruno-app/src/components/Modal/index.js
+++ b/packages/bruno-app/src/components/Modal/index.js
@@ -3,7 +3,7 @@ import StyledWrapper from './StyledWrapper';

 const ModalHeader = ({ title, handleCancel }) => (
  <div className="bruno-modal-header">
-    {title ? <div className="bruno-modal-header-title">{title}</div> : null}
+    {title ? <div className="bruno-modal-heade-title">{title}</div> : null}
    {handleCancel ? (
      <div className="close cursor-pointer" onClick={handleCancel ? () => handleCancel() : null}>
        ×
@@ -14,15 +14,7 @@ const ModalHeader = ({ title, handleCancel }) => (

 const ModalContent = ({ children }) => <div className="bruno-modal-content px-4 py-6">{children}</div>;

-const ModalFooter = ({
-  confirmText,
-  cancelText,
-  handleSubmit,
-  handleCancel,
-  confirmDisabled,
-  hideCancel,
-  hideFooter
-}) => {
+const ModalFooter = ({ confirmText, cancelText, handleSubmit, handleCancel, confirmDisabled, hideCancel, hideFooter }) => {
  confirmText = confirmText || 'Save';
  cancelText = cancelText || 'Cancel';

@@ -38,12 +30,7 @@ const ModalFooter = ({
        </button>
      </span>
      <span>
-        <button
-          type="submit"
-          className="submit btn btn-md btn-secondary"
-          disabled={confirmDisabled}
-          onClick={handleSubmit}
-        >
+        <button type="submit" className="submit btn btn-md btn-secondary" disabled={confirmDisabled} onClick={handleSubmit}>
          {confirmText}
        </button>
      </span>
@@ -51,30 +38,18 @@ const ModalFooter = ({
  );
 };

-const Modal = ({
-  size,
-  title,
-  confirmText,
-  cancelText,
-  handleCancel,
-  handleConfirm,
-  children,
-  confirmDisabled,
-  hideCancel,
-  hideFooter,
-  closeModalFadeTimeout = 500
-}) => {
+const Modal = ({ size, title, confirmText, cancelText, handleCancel, handleConfirm, children, confirmDisabled, hideCancel, hideFooter }) => {
  const [isClosing, setIsClosing] = useState(false);
  const escFunction = (event) => {
    const escKeyCode = 27;
    if (event.keyCode === escKeyCode) {
-      closeModal({ type: 'esc' });
+      closeModal();
    }
  };

-  const closeModal = (args) => {
+  const closeModal = () => {
    setIsClosing(true);
-    setTimeout(() => handleCancel(args), closeModalFadeTimeout);
+    setTimeout(() => handleCancel(), 500);
  };

  useEffect(() => {
@@ -89,18 +64,18 @@ const Modal = ({
  if (isClosing) {
    classes += ' modal--animate-out';
  }
-  if (hideFooter) {
+  if(hideFooter) {
    classes += ' modal-footer-none';
  }
  return (
    <StyledWrapper className={classes}>
      <div className={`bruno-modal-card modal-${size}`}>
-        <ModalHeader title={title} handleCancel={() => closeModal({ type: 'icon' })} />
+        <ModalHeader title={title} handleCancel={() => closeModal()} />
        <ModalContent>{children}</ModalContent>
        <ModalFooter
          confirmText={confirmText}
          cancelText={cancelText}
-          handleCancel={() => closeModal({ type: 'button' })}
+          handleCancel={() => closeModal()}
          handleSubmit={handleConfirm}
          confirmDisabled={confirmDisabled}
          hideCancel={hideCancel}
@@ -109,12 +84,7 @@ const Modal = ({
      </div>

      {/* Clicking on backdrop closes the modal */}
-      <div
-        className="bruno-modal-backdrop"
-        onClick={() => {
-          closeModal({ type: 'backdrop' });
-        }}
-      />
+      <div className="bruno-modal-backdrop" onClick={() => closeModal()} />
    </StyledWrapper>
  );
 };
--- a/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Font/StyledWrapper.js
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: ${(props) => props.theme.text};
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Preferences/Font/index.js
+++ b/packages/bruno-app/src/components/Preferences/Font/index.js
@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-import get from 'lodash/get';
-import { useSelector, useDispatch } from 'react-redux';
-import { savePreferences } from 'providers/ReduxStore/slices/app';
-import StyledWrapper from './StyledWrapper';
-
-const Font = ({ close }) => {
-  const dispatch = useDispatch();
-  const preferences = useSelector((state) => state.app.preferences);
-
-  const [codeFont, setCodeFont] = useState(get(preferences, 'font.codeFont', 'default'));
-
-  const handleInputChange = (event) => {
-    setCodeFont(event.target.value);
-  };
-
-  const handleSave = () => {
-    dispatch(
-      savePreferences({
-        ...preferences,
-        font: {
-          codeFont
-        }
-      })
-    ).then(() => {
-      close();
-    });
-  };
-
-  return (
-    <StyledWrapper>
-      <label className="block font-medium">Code Editor Font</label>
-      <input
-        type="text"
-        className="block textbox mt-2 w-full"
-        autoComplete="off"
-        autoCorrect="off"
-        autoCapitalize="off"
-        spellCheck="false"
-        onChange={handleInputChange}
-        defaultValue={codeFont}
-      />
-
-      <div className="mt-10">
-        <button type="submit" className="submit btn btn-sm btn-secondary" onClick={handleSave}>
-          Save
-        </button>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Font;
--- a/packages/bruno-app/src/components/Preferences/General/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/General/StyledWrapper.js
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: ${(props) => props.theme.text};
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Preferences/General/index.js
+++ b/packages/bruno-app/src/components/Preferences/General/index.js
@@ -1,105 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import { useSelector, useDispatch } from 'react-redux';
-import { savePreferences } from 'providers/ReduxStore/slices/app';
-import StyledWrapper from './StyledWrapper';
-import * as Yup from 'yup';
-import toast from 'react-hot-toast';
-
-const General = ({ close }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const dispatch = useDispatch();
-
-  const preferencesSchema = Yup.object().shape({
-    sslVerification: Yup.boolean(),
-    timeout: Yup.mixed()
-      .transform((value, originalValue) => {
-        return originalValue === '' ? undefined : value;
-      })
-      .nullable()
-      .test('isNumber', 'Request Timeout must be a number', (value) => {
-        return value === undefined || !isNaN(value);
-      })
-      .test('isValidTimeout', 'Request Timeout must be equal or greater than 0', (value) => {
-        return value === undefined || Number(value) >= 0;
-      })
-  });
-
-  const formik = useFormik({
-    initialValues: {
-      sslVerification: preferences.request.sslVerification,
-      timeout: preferences.request.timeout
-    },
-    validationSchema: preferencesSchema,
-    onSubmit: async (values) => {
-      try {
-        const newPreferences = await preferencesSchema.validate(values, { abortEarly: true });
-        handleSave(newPreferences);
-      } catch (error) {
-        console.error('Preferences validation error:', error.message);
-      }
-    }
-  });
-
-  const handleSave = (newPreferences) => {
-    dispatch(
-      savePreferences({
-        ...preferences,
-        request: {
-          sslVerification: newPreferences.sslVerification,
-          timeout: newPreferences.timeout
-        }
-      })
-    )
-      .then(() => {
-        close();
-      })
-      .catch((err) => console.log(err) && toast.error('Failed to update preferences'));
-  };
-
-  return (
-    <StyledWrapper>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="flex items-center mt-2">
-          <label className="block font-medium mr-2 select-none" style={{ minWidth: 200 }} htmlFor="sslVerification">
-            SSL/TLS Certificate Verification
-          </label>
-          <input
-            id="ssl-cert-verification"
-            type="checkbox"
-            name="sslVerification"
-            checked={formik.values.sslVerification}
-            onChange={formik.handleChange}
-            className="mousetrap mr-0"
-          />
-        </div>
-        <div className="flex flex-col mt-6">
-          <label className="block font-medium select-none" htmlFor="timeout">
-            Request Timeout (in ms)
-          </label>
-          <input
-            type="text"
-            name="timeout"
-            className="block textbox mt-2 w-16"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.timeout}
-          />
-        </div>
-        {formik.touched.timeout && formik.errors.timeout ? (
-          <div className="text-red-500">{formik.errors.timeout}</div>
-        ) : null}
-        <div className="mt-10">
-          <button type="submit" className="submit btn btn-sm btn-secondary">
-            Save
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default General;
--- a/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/ProxySettings/StyledWrapper.js
@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  .settings-label {
-    width: 80px;
-  }
-
-  .textbox {
-    border: 1px solid #ccc;
-    padding: 0.15rem 0.45rem;
-    box-shadow: none;
-    outline: none;
-    transition: border-color ease-in-out 0.1s;
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.modal.input.bg};
-    border: 1px solid ${(props) => props.theme.modal.input.border};
-
-    &:focus {
-      border: solid 1px ${(props) => props.theme.modal.input.focusBorder} !important;
-      outline: none !important;
-    }
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Preferences/ProxySettings/index.js
+++ b/packages/bruno-app/src/components/Preferences/ProxySettings/index.js
@@ -1,292 +0,0 @@
-import React, { useEffect } from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import toast from 'react-hot-toast';
-import { savePreferences } from 'providers/ReduxStore/slices/app';
-
-import StyledWrapper from './StyledWrapper';
-import { useDispatch, useSelector } from 'react-redux';
-
-const ProxySettings = ({ close }) => {
-  const preferences = useSelector((state) => state.app.preferences);
-  const dispatch = useDispatch();
-
-  const proxySchema = Yup.object({
-    enabled: Yup.boolean(),
-    protocol: Yup.string().required().oneOf(['http', 'https', 'socks4', 'socks5']),
-    hostname: Yup.string()
-      .when('enabled', {
-        is: true,
-        then: (hostname) => hostname.required('Specify the hostname for your proxy.'),
-        otherwise: (hostname) => hostname.nullable()
-      })
-      .max(1024),
-    port: Yup.number()
-      .when('enabled', {
-        is: true,
-        then: (port) => port.required('Specify port between 1 and 65535').typeError('Specify port between 1 and 65535'),
-        otherwise: (port) => port.nullable().transform((_, val) => (val ? Number(val) : null))
-      })
-      .min(1)
-      .max(65535),
-    auth: Yup.object()
-      .when('enabled', {
-        is: true,
-        then: Yup.object({
-          enabled: Yup.boolean(),
-          username: Yup.string()
-            .when(['enabled'], {
-              is: true,
-              then: (username) => username.required('Specify username for proxy authentication.')
-            })
-            .max(1024),
-          password: Yup.string()
-            .when('enabled', {
-              is: true,
-              then: (password) => password.required('Specify password for proxy authentication.')
-            })
-            .max(1024)
-        })
-      })
-      .optional(),
-    bypassProxy: Yup.string().optional().max(1024)
-  });
-
-  const formik = useFormik({
-    initialValues: {
-      enabled: preferences.proxy.enabled || false,
-      protocol: preferences.proxy.protocol || 'http',
-      hostname: preferences.proxy.hostname || '',
-      port: preferences.proxy.port || 0,
-      auth: {
-        enabled: preferences.proxy.auth ? preferences.proxy.auth.enabled || false : false,
-        username: preferences.proxy.auth ? preferences.proxy.auth.username || '' : '',
-        password: preferences.proxy.auth ? preferences.proxy.auth.password || '' : ''
-      },
-      bypassProxy: preferences.proxy.bypassProxy || ''
-    },
-    validationSchema: proxySchema,
-    onSubmit: (values) => {
-      onUpdate(values);
-    }
-  });
-
-  const onUpdate = (values) => {
-    proxySchema
-      .validate(values, { abortEarly: true })
-      .then((validatedProxy) => {
-        dispatch(
-          savePreferences({
-            ...preferences,
-            proxy: validatedProxy
-          })
-        ).then(() => {
-          close();
-        });
-      })
-      .catch((error) => {
-        let errMsg = error.message || 'Preferences validation error';
-        toast.error(errMsg);
-      });
-  };
-
-  useEffect(() => {
-    formik.setValues({
-      enabled: preferences.proxy.enabled || false,
-      protocol: preferences.proxy.protocol || 'http',
-      hostname: preferences.proxy.hostname || '',
-      port: preferences.proxy.port || '',
-      auth: {
-        enabled: preferences.proxy.auth ? preferences.proxy.auth.enabled || false : false,
-        username: preferences.proxy.auth ? preferences.proxy.auth.username || '' : '',
-        password: preferences.proxy.auth ? preferences.proxy.auth.password || '' : ''
-      },
-      bypassProxy: preferences.proxy.bypassProxy || ''
-    });
-  }, [preferences]);
-
-  return (
-    <StyledWrapper>
-      <h1 className="font-medium mb-3">Global Proxy Settings</h1>
-      <form className="bruno-form" onSubmit={formik.handleSubmit}>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="enabled">
-            Enabled
-          </label>
-          <input type="checkbox" name="enabled" checked={formik.values.enabled} onChange={formik.handleChange} />
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="protocol">
-            Protocol
-          </label>
-          <div className="flex items-center">
-            <label className="flex items-center">
-              <input
-                type="radio"
-                name="protocol"
-                value="http"
-                checked={formik.values.protocol === 'http'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              http
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="https"
-                checked={formik.values.protocol === 'https'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              https
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="socks5"
-                checked={formik.values.protocol === 'socks4'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              socks4
-            </label>
-            <label className="flex items-center ml-4">
-              <input
-                type="radio"
-                name="protocol"
-                value="socks5"
-                checked={formik.values.protocol === 'socks5'}
-                onChange={formik.handleChange}
-                className="mr-1"
-              />
-              socks5
-            </label>
-          </div>
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="hostname">
-            Hostname
-          </label>
-          <input
-            id="hostname"
-            type="text"
-            name="hostname"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.hostname || ''}
-          />
-          {formik.touched.hostname && formik.errors.hostname ? (
-            <div className="ml-3 text-red-500">{formik.errors.hostname}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="port">
-            Port
-          </label>
-          <input
-            id="port"
-            type="number"
-            name="port"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.port}
-          />
-          {formik.touched.port && formik.errors.port ? (
-            <div className="ml-3 text-red-500">{formik.errors.port}</div>
-          ) : null}
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="auth.enabled">
-            Auth
-          </label>
-          <input
-            type="checkbox"
-            name="auth.enabled"
-            checked={formik.values.auth.enabled}
-            onChange={formik.handleChange}
-          />
-        </div>
-        <div>
-          <div className="mb-3 flex items-center">
-            <label className="settings-label" htmlFor="auth.username">
-              Username
-            </label>
-            <input
-              id="auth.username"
-              type="text"
-              name="auth.username"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.username}
-              onChange={formik.handleChange}
-            />
-            {formik.touched.auth?.username && formik.errors.auth?.username ? (
-              <div className="ml-3 text-red-500">{formik.errors.auth.username}</div>
-            ) : null}
-          </div>
-          <div className="mb-3 flex items-center">
-            <label className="settings-label" htmlFor="auth.password">
-              Password
-            </label>
-            <input
-              id="auth.password"
-              type="text"
-              name="auth.password"
-              className="block textbox"
-              autoComplete="off"
-              autoCorrect="off"
-              autoCapitalize="off"
-              spellCheck="false"
-              value={formik.values.auth.password}
-              onChange={formik.handleChange}
-            />
-            {formik.touched.auth?.password && formik.errors.auth?.password ? (
-              <div className="ml-3 text-red-500">{formik.errors.auth.password}</div>
-            ) : null}
-          </div>
-        </div>
-        <div className="mb-3 flex items-center">
-          <label className="settings-label" htmlFor="bypassProxy">
-            Proxy Bypass
-          </label>
-          <input
-            id="bypassProxy"
-            type="text"
-            name="bypassProxy"
-            className="block textbox"
-            autoComplete="off"
-            autoCorrect="off"
-            autoCapitalize="off"
-            spellCheck="false"
-            onChange={formik.handleChange}
-            value={formik.values.bypassProxy || ''}
-          />
-          {formik.touched.bypassProxy && formik.errors.bypassProxy ? (
-            <div className="ml-3 text-red-500">{formik.errors.bypassProxy}</div>
-          ) : null}
-        </div>
-        <div className="mt-6">
-          <button type="submit" className="submit btn btn-md btn-secondary">
-            Save
-          </button>
-        </div>
-      </form>
-    </StyledWrapper>
-  );
-};
-
-export default ProxySettings;
--- a/packages/bruno-app/src/components/Preferences/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/StyledWrapper.js
@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  div.tabs {
-    margin-top: -0.5rem;
-
-    div.tab {
-      padding: 6px 0px;
-      border: none;
-      border-bottom: solid 2px transparent;
-      margin-right: 1.25rem;
-      color: var(--color-tab-inactive);
-      cursor: pointer;
-
-      &:focus,
-      &:active,
-      &:focus-within,
-      &:focus-visible,
-      &:target {
-        outline: none !important;
-        box-shadow: none !important;
-      }
-
-      &.active {
-        color: ${(props) => props.theme.tabs.active.color} !important;
-        border-bottom: solid 2px ${(props) => props.theme.tabs.active.border} !important;
-      }
-    }
-  }
-
-  section.tab-panel {
-    min-height: 300px;
-  }
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Preferences/Support/index.js
+++ b/packages/bruno-app/src/components/Preferences/Support/index.js
@@ -1,44 +0,0 @@
-import React from 'react';
-import { IconSpeakerphone, IconBrandTwitter, IconBrandGithub, IconBrandDiscord, IconBook } from '@tabler/icons';
-import StyledWrapper from './StyledWrapper';
-
-const Support = () => {
-  return (
-    <StyledWrapper>
-      <div className="rows">
-        <div className="mt-2">
-          <a href="https://docs.usebruno.com" target="_blank" className="flex items-end">
-            <IconBook size={18} strokeWidth={2} />
-            <span className="label ml-2">Documentation</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://github.com/usebruno/bruno/issues" target="_blank" className="flex items-end">
-            <IconSpeakerphone size={18} strokeWidth={2} />
-            <span className="label ml-2">Report Issues</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://discord.com/invite/KgcZUncpjq" target="_blank" className="flex items-end">
-            <IconBrandDiscord size={18} strokeWidth={2} />
-            <span className="label ml-2">Discord</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://github.com/usebruno/bruno" target="_blank" className="flex items-end">
-            <IconBrandGithub size={18} strokeWidth={2} />
-            <span className="label ml-2">GitHub</span>
-          </a>
-        </div>
-        <div className="mt-2">
-          <a href="https://twitter.com/use_bruno" target="_blank" className="flex items-end">
-            <IconBrandTwitter size={18} strokeWidth={2} />
-            <span className="label ml-2">Twitter</span>
-          </a>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Support;
--- a/packages/bruno-app/src/components/Preferences/Theme/StyledWrapper.js
+++ b/packages/bruno-app/src/components/Preferences/Theme/StyledWrapper.js
@@ -1,7 +0,0 @@
-import styled from 'styled-components';
-
-const StyledWrapper = styled.div`
-  color: var(--color-text);
-`;
-
-export default StyledWrapper;
--- a/packages/bruno-app/src/components/Preferences/Theme/index.js
+++ b/packages/bruno-app/src/components/Preferences/Theme/index.js
@@ -1,64 +0,0 @@
-import React from 'react';
-import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import StyledWrapper from './StyledWrapper';
-import { useTheme } from 'providers/Theme';
-
-const Theme = () => {
-  const { storedTheme, setStoredTheme } = useTheme();
-
-  const formik = useFormik({
-    enableReinitialize: true,
-    initialValues: {
-      theme: storedTheme
-    },
-    validationSchema: Yup.object({
-      theme: Yup.string().oneOf(['light', 'dark']).required('theme is required')
-    }),
-    onSubmit: (values) => {
-      setStoredTheme(values.theme);
-    }
-  });
-
-  return (
-    <StyledWrapper>
-      <div className="bruno-form">
-        <div className="flex items-center mt-2">
-          <input
-            id="light-theme"
-            className="cursor-pointer"
-            type="radio"
-            name="theme"
-            onChange={(e) => {
-              formik.handleChange(e);
-              formik.handleSubmit();
-            }}
-            value="light"
-            checked={formik.values.theme === 'light'}
-          />
-          <label htmlFor="light-theme" className="ml-1 cursor-pointer select-none">
-            Light
-          </label>
-
-          <input
-            id="dark-theme"
-            className="ml-4 cursor-pointer"
-            type="radio"
-            name="theme"
-            onChange={(e) => {
-              formik.handleChange(e);
-              formik.handleSubmit();
-            }}
-            value="dark"
-            checked={formik.values.theme === 'dark'}
-          />
-          <label htmlFor="dark-theme" className="ml-1 cursor-pointer select-none">
-            Dark
-          </label>
-        </div>
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default Theme;
--- a/packages/bruno-app/src/components/Preferences/index.js
+++ b/packages/bruno-app/src/components/Preferences/index.js
@@ -1,70 +0,0 @@
-import Modal from 'components/Modal/index';
-import classnames from 'classnames';
-import React, { useState } from 'react';
-import Support from './Support';
-import General from './General';
-import Font from './Font';
-import Theme from './Theme';
-import Proxy from './ProxySettings';
-import StyledWrapper from './StyledWrapper';
-
-const Preferences = ({ onClose }) => {
-  const [tab, setTab] = useState('general');
-
-  const getTabClassname = (tabName) => {
-    return classnames(`tab select-none ${tabName}`, {
-      active: tabName === tab
-    });
-  };
-
-  const getTabPanel = (tab) => {
-    switch (tab) {
-      case 'general': {
-        return <General close={onClose} />;
-      }
-
-      case 'proxy': {
-        return <Proxy close={onClose} />;
-      }
-
-      case 'theme': {
-        return <Theme close={onClose} />;
-      }
-
-      case 'support': {
-        return <Support />;
-      }
-
-      case 'font': {
-        return <Font close={onClose} />;
-      }
-    }
-  };
-
-  return (
-    <StyledWrapper>
-      <Modal size="lg" title="Preferences" handleCancel={onClose} hideFooter={true}>
-        <div className="flex items-center px-2 tabs" role="tablist">
-          <div className={getTabClassname('general')} role="tab" onClick={() => setTab('general')}>
-            General
-          </div>
-          <div className={getTabClassname('theme')} role="tab" onClick={() => setTab('theme')}>
-            Theme
-          </div>
-          <div className={getTabClassname('font')} role="tab" onClick={() => setTab('font')}>
-            Font
-          </div>
-          <div className={getTabClassname('proxy')} role="tab" onClick={() => setTab('proxy')}>
-            Proxy
-          </div>
-          <div className={getTabClassname('support')} role="tab" onClick={() => setTab('support')}>
-            Support
-          </div>
-        </div>
-        <section className="flex flex-grow px-2 mt-4 tab-panel">{getTabPanel(tab)}</section>
-      </Modal>
-    </StyledWrapper>
-  );
-};
-
-export default Preferences;
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionOperator/index.js
@@ -1,11 +1,8 @@
 import React from 'react';
-import { useTheme } from 'providers/Theme/index';
-import darkTheme from 'themes/dark';
-import lightTheme from 'themes/light';

 /**
 * Assertion operators
- *
+ * 
 * eq          : equal to
 * neq         : not equal to
 * gt          : greater than
@@ -36,32 +33,10 @@ import lightTheme from 'themes/light';

 const AssertionOperator = ({ operator, onChange }) => {
  const operators = [
-    'eq',
-    'neq',
-    'gt',
-    'gte',
-    'lt',
-    'lte',
-    'in',
-    'notIn',
-    'contains',
-    'notContains',
-    'length',
-    'matches',
-    'notMatches',
-    'startsWith',
-    'endsWith',
-    'between',
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
+    'eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn',
+    'contains', 'notContains', 'length', 'matches', 'notMatches',
+    'startsWith', 'endsWith', 'between', 'isEmpty', 'isNull', 'isUndefined',
+    'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
  ];

  const handleChange = (e) => {
@@ -69,7 +44,7 @@ const AssertionOperator = ({ operator, onChange }) => {
  };

  const getLabel = (operator) => {
-    switch (operator) {
+    switch(operator) {
      case 'eq':
        return 'equals';
      case 'neq':
@@ -79,16 +54,10 @@ const AssertionOperator = ({ operator, onChange }) => {
    }
  };

-  const { storedTheme } = useTheme();
-
  return (
    <select value={operator} onChange={handleChange} className="mousetrap">
      {operators.map((operator) => (
-        <option
-          style={{ backgroundColor: storedTheme === 'dark' ? darkTheme.bg : lightTheme.bg }}
-          key={operator}
-          value={operator}
-        >
+        <option key={operator} value={operator}>
          {getLabel(operator)}
        </option>
      ))}
--- a/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/AssertionRow/index.js
@@ -6,7 +6,7 @@ import { useTheme } from 'providers/Theme';

 /**
 * Assertion operators
- *
+ * 
 * eq          : equal to
 * neq         : not equal to
 * gt          : greater than
@@ -35,7 +35,7 @@ import { useTheme } from 'providers/Theme';
 * isBoolean   : is boolean
 */
 const parseAssertionOperator = (str = '') => {
-  if (!str || typeof str !== 'string' || !str.length) {
+  if(!str || typeof str !== 'string' || !str.length) {
    return {
      operator: 'eq',
      value: str
@@ -43,58 +43,27 @@ const parseAssertionOperator = (str = '') => {
  }

  const operators = [
-    'eq',
-    'neq',
-    'gt',
-    'gte',
-    'lt',
-    'lte',
-    'in',
-    'notIn',
-    'contains',
-    'notContains',
-    'length',
-    'matches',
-    'notMatches',
-    'startsWith',
-    'endsWith',
-    'between',
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
+    'eq', 'neq', 'gt', 'gte', 'lt', 'lte', 'in', 'notIn',
+    'contains', 'notContains', 'length', 'matches', 'notMatches',
+    'startsWith', 'endsWith', 'between', 'isEmpty', 'isNull', 'isUndefined',
+    'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
  ];

  const unaryOperators = [
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
+    'isEmpty', 'isNull', 'isUndefined', 'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
  ];

  const [operator, ...rest] = str.trim().split(' ');
  const value = rest.join(' ');

-  if (unaryOperators.includes(operator)) {
+  if(unaryOperators.includes(operator)) {
    return {
      operator,
      value: ''
    };
  }

-  if (operators.includes(operator)) {
+  if(operators.includes(operator)) {
    return {
      operator,
      value
@@ -109,33 +78,22 @@ const parseAssertionOperator = (str = '') => {

 const isUnaryOperator = (operator) => {
  const unaryOperators = [
-    'isEmpty',
-    'isNull',
-    'isUndefined',
-    'isDefined',
-    'isTruthy',
-    'isFalsy',
-    'isJson',
-    'isNumber',
-    'isString',
-    'isBoolean'
+    'isEmpty', 'isNull', 'isUndefined', 'isDefined', 'isTruthy', 'isFalsy', 'isJson', 'isNumber', 'isString', 'isBoolean'
  ];

  return unaryOperators.includes(operator);
 };

 const AssertionRow = ({
-  item,
-  collection,
-  assertion,
-  handleAssertionChange,
-  handleRemoveAssertion,
-  onSave,
-  handleRun
+  item, collection, assertion, handleAssertionChange, handleRemoveAssertion,
+  onSave, handleRun
 }) => {
  const { storedTheme } = useTheme();

-  const { operator, value } = parseAssertionOperator(assertion.value);
+  const {
+    operator,
+    value
+  } = parseAssertionOperator(assertion.value);

  return (
    <tr key={assertion.uid}>
@@ -154,17 +112,11 @@ const AssertionRow = ({
      <td>
        <AssertionOperator
          operator={operator}
-          onChange={(op) =>
-            handleAssertionChange(
-              {
-                target: {
-                  value: `${op} ${value}`
-                }
-              },
-              assertion,
-              'value'
-            )
-          }
+          onChange={(op) => handleAssertionChange({
+            target: {
+              value: `${op} ${value}`
+            }
+          }, assertion, 'value')}
        />
      </td>
      <td>
@@ -174,22 +126,20 @@ const AssertionRow = ({
            theme={storedTheme}
            readOnly={true}
            onSave={onSave}
-            onChange={(newValue) =>
-              handleAssertionChange(
-                {
-                  target: {
-                    value: `${operator} ${newValue}`
-                  }
-                },
-                assertion,
-                'value'
-              )
-            }
+            onChange={(newValue) => handleAssertionChange({
+              target: {
+                value: newValue
+              }
+            }, assertion, 'value')}
            onRun={handleRun}
            collection={collection}
          />
        ) : (
-          <input type="text" className="cursor-default" disabled />
+          <input
+            type="text"
+            className='cursor-default'
+            disabled
+          />
        )}
      </td>
      <td>
@@ -197,11 +147,10 @@ const AssertionRow = ({
          <input
            type="checkbox"
            checked={assertion.enabled}
-            tabIndex="-1"
            className="mr-3 mousetrap"
            onChange={(e) => handleAssertionChange(e, assertion, 'enabled')}
          />
-          <button tabIndex="-1" onClick={() => handleRemoveAssertion(assertion)}>
+          <button onClick={() => handleRemoveAssertion(assertion)}>
            <IconTrash strokeWidth={1.5} size={20} />
          </button>
        </div>
--- a/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Assertions/StyledWrapper.js
@@ -27,10 +27,6 @@ const Wrapper = styled.div`
      &:nth-child(4) {
        width: 70px;
      }
-
-      select {
-        background-color: transparent;
-      }
    }
  }

--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/StyledWrapper.js
@@ -1,28 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  font-size: 0.8125rem;
-
-  .auth-mode-selector {
-    background: transparent;
-
-    .auth-mode-label {
-      color: ${(props) => props.theme.colors.text.yellow};
-    }
-
-    .dropdown-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-
-    .label-item {
-      padding: 0.2rem 0.6rem !important;
-    }
-  }
-
-  .caret {
-    color: rgb(140, 140, 140);
-    fill: rgb(140 140 140);
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AuthMode/index.js
@@ -1,79 +0,0 @@
-import React, { useRef, forwardRef } from 'react';
-import get from 'lodash/get';
-import { IconCaretDown } from '@tabler/icons';
-import Dropdown from 'components/Dropdown';
-import { useDispatch } from 'react-redux';
-import { updateRequestAuthMode } from 'providers/ReduxStore/slices/collections';
-import { humanizeRequestAuthMode } from 'utils/collections';
-import StyledWrapper from './StyledWrapper';
-
-const AuthMode = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const dropdownTippyRef = useRef();
-  const onDropdownCreate = (ref) => (dropdownTippyRef.current = ref);
-  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
-
-  const Icon = forwardRef((props, ref) => {
-    return (
-      <div ref={ref} className="flex items-center justify-center auth-mode-label select-none">
-        {humanizeRequestAuthMode(authMode)} <IconCaretDown className="caret ml-1 mr-1" size={14} strokeWidth={2} />
-      </div>
-    );
-  });
-
-  const onModeChange = (value) => {
-    dispatch(
-      updateRequestAuthMode({
-        itemUid: item.uid,
-        collectionUid: collection.uid,
-        mode: value
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper>
-      <div className="inline-flex items-center cursor-pointer auth-mode-selector">
-        <Dropdown onCreate={onDropdownCreate} icon={<Icon />} placement="bottom-end">
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('awsv4');
-            }}
-          >
-            AWS Sig v4
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('basic');
-            }}
-          >
-            Basic Auth
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('bearer');
-            }}
-          >
-            Bearer Token
-          </div>
-          <div
-            className="dropdown-item"
-            onClick={() => {
-              dropdownTippyRef.current.hide();
-              onModeChange('none');
-            }}
-          >
-            No Auth
-          </div>
-        </Dropdown>
-      </div>
-    </StyledWrapper>
-  );
-};
-export default AuthMode;
--- a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/AwsV4Auth/index.js
@@ -1,205 +0,0 @@
-import React, { useState } from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateAuth } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-import { update } from 'lodash';
-
-const AwsV4Auth = ({ onTokenChange, item, collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const awsv4Auth = item.draft ? get(item, 'draft.request.auth.awsv4', {}) : get(item, 'request.auth.awsv4', {});
-
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  const handleAccessKeyIdChange = (accessKeyId) => {
-    dispatch(
-      updateAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          accessKeyId: accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleSecretAccessKeyChange = (secretAccessKey) => {
-    dispatch(
-      updateAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleSessionTokenChange = (sessionToken) => {
-    dispatch(
-      updateAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleServiceChange = (service) => {
-    dispatch(
-      updateAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: service,
-          region: awsv4Auth.region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleRegionChange = (region) => {
-    dispatch(
-      updateAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: region,
-          profileName: awsv4Auth.profileName
-        }
-      })
-    );
-  };
-
-  const handleProfileNameChange = (profileName) => {
-    dispatch(
-      updateAuth({
-        mode: 'awsv4',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          accessKeyId: awsv4Auth.accessKeyId,
-          secretAccessKey: awsv4Auth.secretAccessKey,
-          sessionToken: awsv4Auth.sessionToken,
-          service: awsv4Auth.service,
-          region: awsv4Auth.region,
-          profileName: profileName
-        }
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Access Key ID</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.accessKeyId || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleAccessKeyIdChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Secret Access Key</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.secretAccessKey || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleSecretAccessKeyChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Session Token</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.sessionToken || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleSessionTokenChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Service</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.service || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleServiceChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Region</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.region || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleRegionChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Profile Name</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={awsv4Auth.profileName || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleProfileNameChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default AwsV4Auth;
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BasicAuth/index.js
@@ -1,76 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateAuth } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const BasicAuth = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const basicAuth = item.draft ? get(item, 'draft.request.auth.basic', {}) : get(item, 'request.auth.basic', {});
-
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  const handleUsernameChange = (username) => {
-    dispatch(
-      updateAuth({
-        mode: 'basic',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          username: username,
-          password: basicAuth.password
-        }
-      })
-    );
-  };
-
-  const handlePasswordChange = (password) => {
-    dispatch(
-      updateAuth({
-        mode: 'basic',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          username: basicAuth.username,
-          password: password
-        }
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Username</label>
-      <div className="single-line-editor-wrapper mb-2">
-        <SingleLineEditor
-          value={basicAuth.username || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleUsernameChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-
-      <label className="block font-medium mb-2">Password</label>
-      <div className="single-line-editor-wrapper">
-        <SingleLineEditor
-          value={basicAuth.password || ''}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handlePasswordChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default BasicAuth;
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/StyledWrapper.js
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
-  label {
-    font-size: 0.8125rem;
-  }
-
-  .single-line-editor-wrapper {
-    padding: 0.15rem 0.4rem;
-    border-radius: 3px;
-    border: solid 1px ${(props) => props.theme.input.border};
-    background-color: ${(props) => props.theme.input.bg};
-  }
-`;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/BearerAuth/index.js
@@ -1,51 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import { useTheme } from 'providers/Theme';
-import { useDispatch } from 'react-redux';
-import SingleLineEditor from 'components/SingleLineEditor';
-import { updateAuth } from 'providers/ReduxStore/slices/collections';
-import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
-import StyledWrapper from './StyledWrapper';
-
-const BearerAuth = ({ item, collection }) => {
-  const dispatch = useDispatch();
-  const { storedTheme } = useTheme();
-
-  const bearerToken = item.draft
-    ? get(item, 'draft.request.auth.bearer.token')
-    : get(item, 'request.auth.bearer.token');
-
-  const handleRun = () => dispatch(sendRequest(item, collection.uid));
-  const handleSave = () => dispatch(saveRequest(item.uid, collection.uid));
-
-  const handleTokenChange = (token) => {
-    dispatch(
-      updateAuth({
-        mode: 'bearer',
-        collectionUid: collection.uid,
-        itemUid: item.uid,
-        content: {
-          token: token
-        }
-      })
-    );
-  };
-
-  return (
-    <StyledWrapper className="mt-2 w-full">
-      <label className="block font-medium mb-2">Token</label>
-      <div className="single-line-editor-wrapper">
-        <SingleLineEditor
-          value={bearerToken}
-          theme={storedTheme}
-          onSave={handleSave}
-          onChange={(val) => handleTokenChange(val)}
-          onRun={handleRun}
-          collection={collection}
-        />
-      </div>
-    </StyledWrapper>
-  );
-};
-
-export default BearerAuth;
--- a/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/StyledWrapper.js
@@ -1,5 +0,0 @@
-import styled from 'styled-components';
-
-const Wrapper = styled.div``;
-
-export default Wrapper;
--- a/packages/bruno-app/src/components/RequestPane/Auth/index.js
+++ b/packages/bruno-app/src/components/RequestPane/Auth/index.js
@@ -1,35 +0,0 @@
-import React from 'react';
-import get from 'lodash/get';
-import AuthMode from './AuthMode';
-import AwsV4Auth from './AwsV4Auth';
-import BearerAuth from './BearerAuth';
-import BasicAuth from './BasicAuth';
-import StyledWrapper from './StyledWrapper';
-
-const Auth = ({ item, collection }) => {
-  const authMode = item.draft ? get(item, 'draft.request.auth.mode') : get(item, 'request.auth.mode');
-
-  const getAuthView = () => {
-    switch (authMode) {
-      case 'awsv4': {
-        return <AwsV4Auth collection={collection} item={item} />;
-      }
-      case 'basic': {
-        return <BasicAuth collection={collection} item={item} />;
-      }
-      case 'bearer': {
-        return <BearerAuth collection={collection} item={item} />;
-      }
-    }
-  };
-
-  return (
-    <StyledWrapper className="w-full mt-1">
-      <div className="flex flex-grow justify-start items-center">
-        <AuthMode item={item} collection={collection} />
-      </div>
-      {getAuthView()}
-    </StyledWrapper>
-  );
-};
-export default Auth;
--- a/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
+++ b/packages/bruno-app/src/components/RequestPane/FormUrlEncodedParams/index.js
@@ -4,11 +4,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { IconTrash } from '@tabler/icons';
 import { useDispatch } from 'react-redux';
 import { useTheme } from 'providers/Theme';
-import {
-  addFormUrlEncodedParam,
-  updateFormUrlEncodedParam,
-  deleteFormUrlEncodedParam
-} from 'providers/ReduxStore/slices/collections';
+import { addFormUrlEncodedParam, updateFormUrlEncodedParam, deleteFormUrlEncodedParam } from 'providers/ReduxStore/slices/collections';
 import SingleLineEditor from 'components/SingleLineEditor';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import StyledWrapper from './StyledWrapper';
@@ -92,35 +88,23 @@ const FormUrlEncodedParams = ({ item, collection }) => {
                      />
                    </td>
                    <td>
-                      <SingleLineEditor
+                      <SingleLineEditor 
                        value={param.value}
                        theme={storedTheme}
                        onSave={onSave}
-                        onChange={(newValue) =>
-                          handleParamChange(
-                            {
-                              target: {
-                                value: newValue
-                              }
-                            },
-                            param,
-                            'value'
-                          )
-                        }
+                        onChange={(newValue) => handleParamChange({
+                          target: {
+                            value: newValue
+                          }
+                        }, param, 'value')}
                        onRun={handleRun}
                        collection={collection}
                      />
                    </td>
                    <td>
                      <div className="flex items-center">
-                        <input
-                          type="checkbox"
-                          checked={param.enabled}
-                          tabIndex="-1"
-                          className="mr-3 mousetrap"
-                          onChange={(e) => handleParamChange(e, param, 'enabled')}
-                        />
-                        <button tabIndex="-1" onClick={() => handleRemoveParams(param)}>
+                        <input type="checkbox" checked={param.enabled} className="mr-3 mousetrap" onChange={(e) => handleParamChange(e, param, 'enabled')} />
+                        <button onClick={() => handleRemoveParams(param)}>
                          <IconTrash strokeWidth={1.5} size={20} />
                        </button>
                      </div>
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/index.js
@@ -6,7 +6,6 @@ import { IconRefresh, IconLoader2, IconBook, IconDownload } from '@tabler/icons'
 import { useSelector, useDispatch } from 'react-redux';
 import { updateRequestPaneTab } from 'providers/ReduxStore/slices/tabs';
 import QueryEditor from 'components/RequestPane/QueryEditor';
-import Auth from 'components/RequestPane/Auth';
 import GraphQLVariables from 'components/RequestPane/GraphQLVariables';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import Vars from 'components/RequestPane/Vars';
@@ -19,33 +18,35 @@ import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collection
 import { findEnvironmentInCollection } from 'utils/collections';
 import useGraphqlSchema from './useGraphqlSchema';
 import StyledWrapper from './StyledWrapper';
-import Documentation from 'components/Documentation/index';

 const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, toggleDocs, handleGqlClickReference }) => {
  const dispatch = useDispatch();
  const tabs = useSelector((state) => state.tabs.tabs);
  const activeTabUid = useSelector((state) => state.tabs.activeTabUid);
  const query = item.draft ? get(item, 'draft.request.body.graphql.query') : get(item, 'request.body.graphql.query');
-  const variables = item.draft
-    ? get(item, 'draft.request.body.graphql.variables')
-    : get(item, 'request.body.graphql.variables');
+  const variables = item.draft ? get(item, 'draft.request.body.graphql.variables') : get(item, 'request.body.graphql.variables');
  const url = item.draft ? get(item, 'draft.request.url') : get(item, 'request.url');
-  const { storedTheme } = useTheme();
+  const {
+    storedTheme
+  } = useTheme();

  const environment = findEnvironmentInCollection(collection, collection.activeEnvironmentUid);
-
-  const request = item.draft ? item.draft.request : item.request;
-
-  let { schema, loadSchema, isLoading: isSchemaLoading } = useGraphqlSchema(url, environment, request, collection);
+  
+  let {
+    schema,
+    loadSchema,
+    isLoading: isSchemaLoading,
+    error: schemaError
+  } = useGraphqlSchema(url, environment);

  const loadGqlSchema = () => {
-    if (!isSchemaLoading) {
+    if(!isSchemaLoading) {
      loadSchema();
    }
  };

  useEffect(() => {
-    if (onSchemaLoad) {
+    if(onSchemaLoad) {
      onSchemaLoad(schema);
    }
  }, [schema]);
@@ -74,19 +75,17 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
  const getTabPanel = (tab) => {
    switch (tab) {
      case 'query': {
-        return (
-          <QueryEditor
-            collection={collection}
-            theme={storedTheme}
-            schema={schema}
-            width={leftPaneWidth}
-            onSave={onSave}
-            value={query}
-            onRun={onRun}
-            onEdit={onQueryChange}
-            onClickReference={handleGqlClickReference}
-          />
-        );
+        return <QueryEditor
+          collection={collection}
+          theme={storedTheme}
+          schema={schema}
+          width={leftPaneWidth}
+          onSave={onSave}
+          value={query}
+          onRun={onRun}
+          onEdit={onQueryChange}
+          onClickReference={handleGqlClickReference}
+        />;
      }
      case 'variables': {
        return <GraphQLVariables item={item} variables={variables} collection={collection} />;
@@ -94,9 +93,6 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
      case 'headers': {
        return <RequestHeaders item={item} collection={collection} />;
      }
-      case 'auth': {
-        return <Auth item={item} collection={collection} />;
-      }
      case 'vars': {
        return <Vars item={item} collection={collection} />;
      }
@@ -109,9 +105,6 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
      case 'tests': {
        return <Tests item={item} collection={collection} />;
      }
-      case 'docs': {
-        return <Documentation item={item} collection={collection} />;
-      }
      default: {
        return <div className="mt-4">404 | Not found</div>;
      }
@@ -124,7 +117,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog

  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occurred!</div>;
+    return <div className="pb-4 px-4">An error occured!</div>;
  }

  const getTabClassname = (tabName) => {
@@ -135,7 +128,7 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog

  return (
    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className="flex items-center tabs" role="tablist">
        <div className={getTabClassname('query')} role="tab" onClick={() => selectTab('query')}>
          Query
        </div>
@@ -145,9 +138,6 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
          Headers
        </div>
-        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
-          Auth
-        </div>
        <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
          Vars
        </div>
@@ -160,19 +150,20 @@ const GraphQLRequestPane = ({ item, collection, leftPaneWidth, onSchemaLoad, tog
        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
          Tests
        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
-          Docs
-        </div>
-        <div className="flex flex-grow justify-end items-center" style={{ fontSize: 13 }}>
-          <div className="flex items-center cursor-pointer hover:underline" onClick={loadGqlSchema}>
-            {isSchemaLoading ? <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5} /> : null}
-            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5} /> : null}
-            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5} /> : null}
-            <span className="ml-1">Schema</span>
+        <div className="flex flex-grow justify-end items-center" style={{fontSize: 13}}>
+          <div className='flex items-center cursor-pointer hover:underline' onClick={loadGqlSchema}>
+            {isSchemaLoading ? (
+              <IconLoader2 className="animate-spin" size={18} strokeWidth={1.5}/>
+            ) : null}
+            {!isSchemaLoading && !schema ? <IconDownload size={18} strokeWidth={1.5}/> : null }
+            {!isSchemaLoading && schema ? <IconRefresh size={18} strokeWidth={1.5}/> : null }
+            <span className='ml-1'>Schema</span>
          </div>
-          <div className="flex items-center cursor-pointer hover:underline ml-2" onClick={toggleDocs}>
-            <IconBook size={18} strokeWidth={1.5} />
-            <span className="ml-1">Docs</span>
+          <div
+            className='flex items-center cursor-pointer hover:underline ml-2'
+            onClick={toggleDocs}
+          >
+            <IconBook size={18} strokeWidth={1.5} /><span className='ml-1'>Docs</span>
          </div>
        </div>
      </div>
--- a/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLRequestPane/useGraphqlSchema.js
@@ -6,14 +6,14 @@ import { simpleHash } from 'utils/common';

 const schemaHashPrefix = 'bruno.graphqlSchema';

-const useGraphqlSchema = (endpoint, environment, request, collection) => {
+const useGraphqlSchema = (endpoint, environment) => {
  const localStorageKey = `${schemaHashPrefix}.${simpleHash(endpoint)}`;
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [schema, setSchema] = useState(() => {
    try {
      const saved = localStorage.getItem(localStorageKey);
-      if (!saved) {
+      if(!saved) {
        return null;
      }
      return buildClientSchema(JSON.parse(saved));
@@ -25,13 +25,8 @@ const useGraphqlSchema = (endpoint, environment, request, collection) => {

  const loadSchema = () => {
    setIsLoading(true);
-    fetchGqlSchema(endpoint, environment, request, collection)
-      .then((res) => {
-        if (!res || res.status !== 200) {
-          return Promise.reject(new Error(res.statusText));
-        }
-        return res.data;
-      })
+    fetchGqlSchema(endpoint, environment)
+      .then((res) => res.data)
      .then((s) => {
        if (s && s.data) {
          setSchema(buildClientSchema(s.data));
@@ -45,7 +40,7 @@ const useGraphqlSchema = (endpoint, environment, request, collection) => {
      .catch((err) => {
        setIsLoading(false);
        setError(err);
-        toast.error(`Error occurred while loading GraphQL Schema: ${err.message}`);
+        toast.error('Error occured while loading GraphQL Schema');
      });
  };

--- a/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
+++ b/packages/bruno-app/src/components/RequestPane/GraphQLVariables/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
-import get from 'lodash/get';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
 import CodeEditor from 'components/CodeEditor';
 import { updateRequestGraphqlVariables } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
@@ -10,8 +9,9 @@ import StyledWrapper from './StyledWrapper';
 const GraphQLVariables = ({ variables, item, collection }) => {
  const dispatch = useDispatch();

-  const { storedTheme } = useTheme();
-  const preferences = useSelector((state) => state.app.preferences);
+  const {
+    storedTheme
+  } = useTheme();

  const onEdit = (value) => {
    dispatch(
@@ -29,12 +29,10 @@ const GraphQLVariables = ({ variables, item, collection }) => {
  return (
    <StyledWrapper className="w-full">
      <CodeEditor
-        collection={collection}
-        value={variables || ''}
+        collection={collection} value={variables || ''}
        theme={storedTheme}
-        font={get(preferences, 'font.codeFont', 'default')}
        onEdit={onEdit}
-        mode="javascript"
+        mode='javascript'
        onRun={onRun}
        onSave={onSave}
      />
--- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
+++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js
@@ -7,15 +7,11 @@ import QueryParams from 'components/RequestPane/QueryParams';
 import RequestHeaders from 'components/RequestPane/RequestHeaders';
 import RequestBody from 'components/RequestPane/RequestBody';
 import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode';
-import Auth from 'components/RequestPane/Auth';
-import AuthMode from 'components/RequestPane/Auth/AuthMode';
 import Vars from 'components/RequestPane/Vars';
 import Assertions from 'components/RequestPane/Assertions';
 import Script from 'components/RequestPane/Script';
 import Tests from 'components/RequestPane/Tests';
 import StyledWrapper from './StyledWrapper';
-import { get } from 'lodash';
-import Documentation from 'components/Documentation/index';

 const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
  const dispatch = useDispatch();
@@ -42,9 +38,6 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
      case 'headers': {
        return <RequestHeaders item={item} collection={collection} />;
      }
-      case 'auth': {
-        return <Auth item={item} collection={collection} />;
-      }
      case 'vars': {
        return <Vars item={item} collection={collection} />;
      }
@@ -57,9 +50,6 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
      case 'tests': {
        return <Tests item={item} collection={collection} />;
      }
-      case 'docs': {
-        return <Documentation item={item} collection={collection} />;
-      }
      default: {
        return <div className="mt-4">404 | Not found</div>;
      }
@@ -72,7 +62,7 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {

  const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
  if (!focusedTab || !focusedTab.uid || !focusedTab.requestPaneTab) {
-    return <div className="pb-4 px-4">An error occurred!</div>;
+    return <div className="pb-4 px-4">An error occured!</div>;
  }

  const getTabClassname = (tabName) => {
@@ -81,67 +71,39 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => {
    });
  };

-  // get the length of active params, headers, asserts and vars
-  const params = item.draft ? get(item, 'draft.request.params', []) : get(item, 'request.params', []);
-  const headers = item.draft ? get(item, 'draft.request.headers', []) : get(item, 'request.headers', []);
-  const assertions = item.draft ? get(item, 'draft.request.assertions', []) : get(item, 'request.assertions', []);
-  const requestVars = item.draft ? get(item, 'draft.request.vars.req', []) : get(item, 'request.vars.req', []);
-  const responseVars = item.draft ? get(item, 'draft.request.vars.res', []) : get(item, 'request.vars.res', []);
-
-  const activeParamsLength = params.filter((param) => param.enabled).length;
-  const activeHeadersLength = headers.filter((header) => header.enabled).length;
-  const activeAssertionsLength = assertions.filter((assertion) => assertion.enabled).length;
-  const activeVarsLength =
-    requestVars.filter((request) => request.enabled).length +
-    responseVars.filter((response) => response.enabled).length;
-
  return (
    <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center tabs" role="tablist">
+      <div className="flex items-center tabs" role="tablist">
        <div className={getTabClassname('params')} role="tab" onClick={() => selectTab('params')}>
          Query
-          {activeParamsLength > 0 && <sup className="ml-1 font-medium">{activeParamsLength}</sup>}
        </div>
        <div className={getTabClassname('body')} role="tab" onClick={() => selectTab('body')}>
          Body
        </div>
        <div className={getTabClassname('headers')} role="tab" onClick={() => selectTab('headers')}>
          Headers
-          {activeHeadersLength > 0 && <sup className="ml-1 font-medium">{activeHeadersLength}</sup>}
-        </div>
-        <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>
-          Auth
        </div>
        <div className={getTabClassname('vars')} role="tab" onClick={() => selectTab('vars')}>
          Vars
-          {activeVarsLength > 0 && <sup className="ml-1 font-medium">{activeVarsLength}</sup>}
        </div>
        <div className={getTabClassname('script')} role="tab" onClick={() => selectTab('script')}>
          Script
        </div>
        <div className={getTabClassname('assert')} role="tab" onClick={() => selectTab('assert')}>
          Assert
-          {activeAssertionsLength > 0 && <sup className="ml-1 font-medium">{activeAssertionsLength}</sup>}
        </div>
        <div className={getTabClassname('tests')} role="tab" onClick={() => selectTab('tests')}>
          Tests
        </div>
-        <div className={getTabClassname('docs')} role="tab" onClick={() => selectTab('docs')}>
-          Docs
-        </div>
+        {/* Moved to post mvp */}
+        {/* <div className={getTabClassname('auth')} role="tab" onClick={() => selectTab('auth')}>Auth</div> */}
        {focusedTab.requestPaneTab === 'body' ? (
          <div className="flex flex-grow justify-end items-center">
            <RequestBodyMode item={item} collection={collection} />
          </div>
        ) : null}
      </div>
-      <section
-        className={`flex w-full ${
-          ['script', 'vars', 'auth', 'docs'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'
-        }`}
-      >
-        {getTabPanel(focusedTab.requestPaneTab)}
-      </section>
+      <section className={`flex w-full ${['script', 'vars'].includes(focusedTab.requestPaneTab) ? '' : 'mt-5'}`}>{getTabPanel(focusedTab.requestPaneTab)}</section>
    </StyledWrapper>
  );
 };
--- a/Show More
+++ b/Show More