diff --git a/package.json b/package.json
index 13eae67..092c739 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,7 @@
     "@types/node": "^12.11.7",
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.4",
+    "@types/react-redux": "^7.1.16",
     "@types/vscode": "^1.56.0",
     "@typescript-eslint/eslint-plugin": "^4.14.1",
     "@typescript-eslint/parser": "^4.14.1",
@@ -99,10 +100,16 @@
     "webpack-cli": "^4.4.0"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^1.5.1",
     "axios": "^0.21.1",
+    "buffer": "^6.0.3",
     "monaco-editor": "^0.24.0",
+    "path-browserify": "^1.0.1",
+    "postman-collection": "^3.6.11",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-icons": "^4.2.0"
+    "react-icons": "^4.2.0",
+    "react-redux": "^7.2.4",
+    "url": "^0.11.0"
   }
 }
diff --git a/src/extension.ts b/src/extension.ts
index f70e7ff..f16775f 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -53,77 +53,88 @@ export function activate(context: vscode.ExtensionContext) {
 </html>`;
 
       panel.webview.onDidReceiveMessage(
-        ({
-          reqType,
-          requestUrl,
-          headers,
-          body,
-          auth,
-          selectedBodyType,
-          rawLanguage,
-        }) => {
-          if (requestUrl) {
-            const headersObj = {};
+        ({ method, url, headers, body, auth }) => {
+          if (!url) {
+            panel.webview.postMessage({
+              type: "response",
+              error: { message: "Request URL is empty" },
+            });
+            vscode.window.showInformationMessage("Request URL is empty");
+            return;
+          }
+
+          const headersObj = {};
 
-            if (selectedBodyType === "form-data") {
-              headersObj["Content-Type"] = "multipart/form-data";
-            } else if (selectedBodyType === "urlcoded") {
-              headersObj["Content-Type"] = "application/x-www-form-urlencoded";
-            } else if (selectedBodyType === "raw" && rawLanguage === "json") {
-              headersObj["Content-Type"] = "application/json";
-            } else if (selectedBodyType === "raw" && rawLanguage === "html") {
-              headersObj["Content-Type"] = "text/html";
-            } else if (selectedBodyType === "raw" && rawLanguage === "xml") {
-              headersObj["Content-Type"] = "text/xml";
-            } else if (selectedBodyType === "raw" && rawLanguage === "text") {
-              headersObj["Content-Type"] = "text/plain";
-            } else if (selectedBodyType === "binary") {
-              headersObj["Content-Type"] = "application/octet-stream";
+          if (auth.type === "bearer") {
+            headersObj["Authorization"] = `Bearer ${auth.bearer.token}`;
+          }
+
+          headers.forEach(({ key, value, disabled }) => {
+            if (!disabled) {
+              headersObj[key] = value;
             }
+          });
 
-            headers.forEach(({ key, value, checked }) => {
-              if (checked) {
-                headersObj[key || ""] = value || "";
+          let data = "";
+          if (body.mode === "form-data") {
+            const dataObj = new URLSearchParams();
+            body.formdata.forEach(({ key, value, disabled }) => {
+              if (!disabled) {
+                dataObj.append(key, value);
               }
             });
+            data = dataObj.toString();
+            headersObj["Content-Type"] = "multipart/form-data";
+          } else if (body.mode === "x-www-form-urlencoded") {
+            const dataObj = new URLSearchParams();
+            body.urlencoded.forEach(({ key, value, disabled }) => {
+              if (!disabled) {
+                dataObj.append(key, value);
+              }
+            });
+            data = dataObj.toString();
+            headersObj["Content-Type"] = "application/x-www-form-urlencoded";
+          } else if (body.mode === "raw") {
+            data = body.raw;
+            headersObj["Content-Type"] = {
+              json: "application/json",
+              html: "text/html",
+              xml: "text/xml",
+              text: "text/plain",
+            }[body.options.raw.language];
+          } else if (body.mode === "binary") {
+            data = body.fileData;
+            headersObj["Content-Type"] = "application/octet-stream";
+          }
 
-            if (auth.selected === "bearer-token") {
-              headersObj["Authorization"] = `Bearer ${auth.token}`;
-            }
-
-            axios({
-              method: reqType,
-              url: requestUrl,
-              data: body,
-              headers: headersObj,
-              auth:
-                auth.selected === "basic-auth"
-                  ? { username: auth.username, password: auth.password }
-                  : undefined,
-              transformResponse: [(data) => data],
-              responseType: "text",
-              validateStatus: () => true,
-            })
-              .then((resp) =>
-                panel.webview.postMessage({
-                  type: "response",
-                  data: resp.data,
-                  status: resp.status,
-                  statusText: resp.statusText,
-                })
-              )
-              .catch((err) => {
-                panel.webview.postMessage({
-                  type: "response",
-                  error: err,
-                });
-                vscode.window.showInformationMessage(
-                  "Error: Could not send request"
-                );
+          axios({
+            method,
+            url,
+            baseURL: "",
+            data: data,
+            headers: headersObj,
+            auth: auth.type === "basic-auth" ? auth.basic : undefined,
+            transformResponse: [(data) => data],
+            responseType: "text",
+            validateStatus: () => true,
+          })
+            .then((resp) =>
+              panel.webview.postMessage({
+                type: "response",
+                data: resp.data,
+                status: resp.status,
+                statusText: resp.statusText,
+              })
+            )
+            .catch((err) => {
+              panel.webview.postMessage({
+                type: "response",
+                error: err,
               });
-          } else {
-            vscode.window.showInformationMessage("Request URL is empty");
-          }
+              vscode.window.showInformationMessage(
+                "Error: Could not send request"
+              );
+            });
         }
       );
     }
diff --git a/webpack.config.js b/webpack.config.js
index e47f247..1e64862 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@
 "use strict";
 
 const path = require("path");
+const webpack = require("webpack");
 const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
 
 const imageInlineSizeLimit = parseInt(
@@ -19,7 +20,14 @@ const baseConfig = (webpackEnv) => {
     devtool: isEnvProduction
       ? "source-map"
       : isEnvDevelopment && "eval-cheap-module-source-map",
-    resolve: { extensions: [".ts", ".tsx", ".js"] },
+    resolve: {
+      fallback: {
+        buffer: require.resolve("buffer"),
+        path: require.resolve("path-browserify"),
+        url: require.resolve("url"),
+      },
+      extensions: [".ts", ".tsx", ".js"],
+    },
     module: {
       rules: [
         {
@@ -98,6 +106,9 @@ const webviewConfig = (webpackEnv) => {
       new MonacoWebpackPlugin({
         languages: ["html", "xml", "json"],
       }),
+      new webpack.ProvidePlugin({
+        Buffer: ["buffer", "Buffer"],
+      }),
     ],
   };
 };
diff --git a/webview/App.tsx b/webview/App.tsx
index 4e1dd01..e4af26b 100644
--- a/webview/App.tsx
+++ b/webview/App.tsx
@@ -1,28 +1,23 @@
 import * as React from "react";
 import "./App.css";
+import { responseUpdated } from "./features/response/responseSlice";
 import { Postcode } from "./pages/Postcode";
+import { useAppDispatch } from "./redux/hooks";
 
 const App = () => {
-  const [response, setResponse] = React.useState({ initial: "true" });
-  const [loadingResponse, setLoadingResponse] = React.useState(false);
+  const dispatch = useAppDispatch();
 
   React.useEffect(() => {
     window.addEventListener("message", (event) => {
       if (event.data.type === "response") {
-        setLoadingResponse(false);
-        setResponse(event.data);
+        dispatch(responseUpdated(event.data));
       }
     });
   }, []);
 
   return (
     <div className="App">
-      <Postcode
-        response={response}
-        setResponse={setResponse}
-        loadingResponse={loadingResponse}
-        setLoadingResponse={setLoadingResponse}
-      />
+      <Postcode />
     </div>
   );
 };
diff --git a/webview/components/AuthorizationWindow/index.tsx b/webview/components/AuthorizationWindow/index.tsx
deleted file mode 100644
index 3042125..0000000
--- a/webview/components/AuthorizationWindow/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import { NoAuth } from "../NoAuthTab";
-import { BearerToken } from "../BearerTokenTab";
-import { BasicAuth } from "../BasicAuthTab";
-import { authTypes } from "../../constants/auth-types";
-import * as propTypes from "prop-types";
-
-export const Authorization = (props) => {
-  const { auth, setAuth } = props;
-  // move to parent to preserve state
-  return (
-    <div className="req-auth-wrapper">
-      <div className="auth-type">
-        <div className="label-auth-type">Authorization Type: </div>
-        <select
-          onChange={(e) => setAuth({ ...auth, selected: e.target.value })}
-          className="select-auth-type"
-          value={auth.selected}
-        >
-          {authTypes.map((type) => (
-            <option key={type.value} value={type.value}>
-              {type.name}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div className="req-auth-type-window">
-        {auth.selected === "no-auth" ? (
-          <NoAuth />
-        ) : auth.selected === "bearer-token" ? (
-          <BearerToken auth={auth} setAuth={setAuth} />
-        ) : auth.selected === "basic-auth" ? (
-          <BasicAuth auth={auth} setAuth={setAuth} />
-        ) : null}
-      </div>
-    </div>
-  );
-};
-
-Authorization.propTypes = {
-  auth: propTypes.object.isRequired,
-  setAuth: propTypes.func.isRequired,
-};
diff --git a/webview/components/BasicAuthTab/index.tsx b/webview/components/BasicAuthTab/index.tsx
deleted file mode 100644
index 62c7f06..0000000
--- a/webview/components/BasicAuthTab/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import * as propTypes from "prop-types";
-
-export const BasicAuth = (props) => {
-  const { auth, setAuth } = props;
-  return (
-    <div>
-      <div className="basic-auth-input-group">
-        <div className="label-basic-auth">Username</div>
-        <input
-          type="text"
-          id="basic-auth-username-input"
-          name="basic-auth-username-input"
-          placeholder="Username"
-          autoComplete="off"
-          className="input-basic-auth"
-          value={auth.username || ""}
-          onChange={(e) => {
-            setAuth({ ...auth, username: e.target.value });
-          }}
-        />
-      </div>
-      <div className="basic-auth-input-group">
-        <div className="label-basic-auth">Password</div>
-        <input
-          type="password"
-          id="basic-auth-password-input"
-          name="basic-auth-password-input"
-          placeholder="Password"
-          autoComplete="off"
-          className="input-basic-auth"
-          value={auth.password || ""}
-          onChange={(e) => {
-            setAuth({ ...auth, password: e.target.value });
-          }}
-        />
-      </div>
-    </div>
-  );
-};
-
-BasicAuth.propTypes = {
-  auth: propTypes.object.isRequired,
-  setAuth: propTypes.func.isRequired,
-};
diff --git a/webview/components/BearerTokenTab/index.tsx b/webview/components/BearerTokenTab/index.tsx
deleted file mode 100644
index 0b06cf9..0000000
--- a/webview/components/BearerTokenTab/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import * as propTypes from "prop-types";
-
-export const BearerToken = (props) => {
-  const { auth, setAuth } = props;
-  return (
-    <div className="bearer-token-wrapper">
-      <div className="label-bearer-token">Token</div>
-      <input
-        type="text"
-        id="bearer-token-input"
-        name="bearer-token-input"
-        placeholder="Token"
-        autoComplete="off"
-        className="input-bearer-token"
-        value={auth.token || ""}
-        onChange={(e) => setAuth({ ...auth, token: e.target.value })}
-      />
-    </div>
-  );
-};
-
-BearerToken.propTypes = {
-  auth: propTypes.object.isRequired,
-  setAuth: propTypes.func.isRequired,
-};
diff --git a/webview/components/Binary/index.tsx b/webview/components/Binary/index.tsx
deleted file mode 100644
index 6deb408..0000000
--- a/webview/components/Binary/index.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import * as React from "react";
-import * as propTypes from "prop-types";
-import "./styles.css";
-
-export const Binary = (props) => {
-  const { binary, setBinary } = props;
-
-  return (
-    <div className="binary-wrapper">
-      <div className="input-file-wrapper">
-        <input
-          type="file"
-          id="myFile"
-          name="filename"
-          className="input-file-upload"
-          onChange={(e) => {
-            if (e.target.files.length) {
-              setBinary(e.target.files[0]);
-            }
-          }}
-        ></input>
-        <label className="label-file-upload" htmlFor="myFile">
-          Select file
-        </label>
-        <div>{binary.name}</div>
-      </div>
-    </div>
-  );
-};
-
-Binary.propTypes = {
-  binary: propTypes.any.isRequired,
-  setBinary: propTypes.any.isRequired,
-};
diff --git a/webview/components/BodyWindow/index.tsx b/webview/components/BodyWindow/index.tsx
deleted file mode 100644
index 83f120f..0000000
--- a/webview/components/BodyWindow/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as React from "react";
-import { ReqBodyTab } from "../BodyWindowBar";
-import { ReqBodyWindow } from "../BodyWindowContent";
-import * as propTypes from "prop-types";
-import "./styles.css";
-
-export const Body = (props) => {
-  const {
-    setBody,
-    formData,
-    setFormData,
-    urlCoded,
-    setUrlCoded,
-    binary,
-    setBinary,
-    raw,
-    setRaw,
-    selectedBodyType,
-    setSelectedBodyType,
-    rawLanguage,
-    setRawLanguage,
-  } = props;
-
-  return (
-    <div className="request-body-wrapper">
-      <ReqBodyTab
-        selected={selectedBodyType}
-        setSelected={setSelectedBodyType}
-        language={rawLanguage}
-        setLanguage={setRawLanguage}
-      />
-      <ReqBodyWindow
-        selected={selectedBodyType}
-        setBody={setBody}
-        language={rawLanguage}
-        formData={formData}
-        setFormData={setFormData}
-        urlCoded={urlCoded}
-        setUrlCoded={setUrlCoded}
-        binary={binary}
-        setBinary={setBinary}
-        raw={raw}
-        setRaw={setRaw}
-      />
-    </div>
-  );
-};
-
-Body.propTypes = {
-  setBody: propTypes.func.isRequired,
-  formData: propTypes.any.isRequired,
-  setFormData: propTypes.any.isRequired,
-  urlCoded: propTypes.any.isRequired,
-  setUrlCoded: propTypes.any.isRequired,
-  binary: propTypes.any.isRequired,
-  setBinary: propTypes.any.isRequired,
-  raw: propTypes.any.isRequired,
-  setRaw: propTypes.any.isRequired,
-  selectedBodyType: propTypes.any.isRequired,
-  setSelectedBodyType: propTypes.any.isRequired,
-  rawLanguage: propTypes.any.isRequired,
-  setRawLanguage: propTypes.any.isRequired,
-};
diff --git a/webview/components/BodyWindow/styles.css b/webview/components/BodyWindow/styles.css
deleted file mode 100644
index 9a10da2..0000000
--- a/webview/components/BodyWindow/styles.css
+++ /dev/null
@@ -1,5 +0,0 @@
-.request-body-wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
diff --git a/webview/components/BodyWindowBar/index.tsx b/webview/components/BodyWindowBar/index.tsx
deleted file mode 100644
index c347dc2..0000000
--- a/webview/components/BodyWindowBar/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import * as propTypes from "prop-types";
-import { bodyTypes } from "../../constants/body-types";
-import { supportedLangs } from "../../constants/supported-langs";
-
-export const ReqBodyTab = (props) => {
-  const { selected, setSelected, language, setLanguage } = props;
-  return (
-    <div className="body-options-wrapper">
-      {bodyTypes.map((option) => (
-        <div key={option.value} className="body-options">
-          <input
-            name="req-body-radio"
-            type="radio"
-            id={option.value}
-            value={option.value}
-            onClick={() => setSelected(option.value)}
-            className="radio-body-option"
-            defaultChecked={selected === option.value ? true : false}
-          />
-          <label className="label-body-option" htmlFor={option.value}>
-            {option.name}
-          </label>
-        </div>
-      ))}
-      {selected === "raw" ? (
-        <select
-          className="select-raw-lang"
-          value={language}
-          onChange={(e) => setLanguage(e.target.value)}
-        >
-          {supportedLangs.map((type) => (
-            <option key={type.value} value={type.value}>
-              {type.name}
-            </option>
-          ))}
-        </select>
-      ) : null}
-    </div>
-  );
-};
-
-ReqBodyTab.propTypes = {
-  selected: propTypes.string.isRequired,
-  setSelected: propTypes.func.isRequired,
-  language: propTypes.string.isRequired,
-  setLanguage: propTypes.func.isRequired,
-};
diff --git a/webview/components/BodyWindowContent/index.tsx b/webview/components/BodyWindowContent/index.tsx
deleted file mode 100644
index 6b4218c..0000000
--- a/webview/components/BodyWindowContent/index.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from "react";
-import { None } from "../NoBodyTab";
-import { FormData } from "../FormDataTab";
-import { UrlCoded } from "../UrlCodedTab";
-import { Raw } from "../RawTab";
-import { Binary } from "../Binary";
-import * as propTypes from "prop-types";
-import "./styles.css";
-
-export const ReqBodyWindow = (props) => {
-  const {
-    selected,
-    setBody,
-    language,
-    formData,
-    setFormData,
-    urlCoded,
-    setUrlCoded,
-    binary,
-    setBinary,
-    raw,
-    setRaw,
-  } = props;
-
-  React.useEffect(() => {
-    if (selected === "none") {
-      setBody("");
-    } else if (selected === "form-data") {
-      const data = new URLSearchParams();
-      formData.forEach((item: { key?: string; value?: string }) => {
-        data.append(item.key || "", item.value || "");
-      });
-      setBody(data.toString());
-    } else if (selected === "urlcoded") {
-      const data = new URLSearchParams();
-      urlCoded.forEach((item: { key?: string; value?: string }) => {
-        data.append(item.key || "", item.value || "");
-      });
-      setBody(data.toString());
-    } else if (selected === "raw") {
-      setBody(raw);
-    } else if (selected === "binary") {
-      const setBinaryBody = async () => {
-        setBody(await binary.text());
-      };
-      setBinaryBody();
-    }
-  }, [formData, urlCoded, raw, binary, selected]);
-
-  return (
-    <div className="request-body-window-wrapper">
-      {selected === "none" ? (
-        <None />
-      ) : selected === "form-data" ? (
-        <FormData formData={formData} setFormData={setFormData} />
-      ) : selected === "urlcoded" ? (
-        <UrlCoded urlCoded={urlCoded} setUrlCoded={setUrlCoded} />
-      ) : selected === "raw" ? (
-        <Raw raw={raw} setRaw={setRaw} language={language} />
-      ) : selected === "binary" ? (
-        <Binary binary={binary} setBinary={setBinary} />
-      ) : null}
-    </div>
-  );
-};
-
-ReqBodyWindow.propTypes = {
-  selected: propTypes.string.isRequired,
-  setBody: propTypes.func.isRequired,
-  language: propTypes.string.isRequired,
-  formData: propTypes.any.isRequired,
-  setFormData: propTypes.any.isRequired,
-  urlCoded: propTypes.any.isRequired,
-  setUrlCoded: propTypes.any.isRequired,
-  binary: propTypes.any.isRequired,
-  setBinary: propTypes.any.isRequired,
-  raw: propTypes.any.isRequired,
-  setRaw: propTypes.any.isRequired,
-};
diff --git a/webview/components/BodyWindowContent/styles.css b/webview/components/BodyWindowContent/styles.css
deleted file mode 100644
index 2923fb0..0000000
--- a/webview/components/BodyWindowContent/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.request-body-window-wrapper {
-  flex: 1;
-}
diff --git a/webview/components/FormDataTab/index.tsx b/webview/components/FormDataTab/index.tsx
deleted file mode 100644
index 5e01988..0000000
--- a/webview/components/FormDataTab/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import { KeyValueTable } from "../../shared/KeyValueTable";
-import * as propTypes from "prop-types";
-
-export const FormData = (props) => {
-  const { formData, setFormData } = props;
-  return (
-    <div className="form-data-wrapper">
-      <KeyValueTable data={formData} setData={setFormData} />
-    </div>
-  );
-};
-
-FormData.propTypes = {
-  formData: propTypes.array.isRequired,
-  setFormData: propTypes.func.isRequired,
-};
diff --git a/webview/components/HeadersWindow/index.tsx b/webview/components/HeadersWindow/index.tsx
deleted file mode 100644
index e3ca3e4..0000000
--- a/webview/components/HeadersWindow/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import { KeyValueTable } from "../../shared/KeyValueTable";
-import * as propTypes from "prop-types";
-
-export const Headers = (props) => {
-  const { headers, setHeaders } = props;
-  return (
-    <div className="headers-wrapper">
-      <KeyValueTable data={headers} setData={setHeaders} />
-    </div>
-  );
-};
-
-Headers.propTypes = {
-  headers: propTypes.array.isRequired,
-  setHeaders: propTypes.func.isRequired,
-};
diff --git a/webview/components/ParamsWindow/index.tsx b/webview/components/ParamsWindow/index.tsx
deleted file mode 100644
index ea07dc1..0000000
--- a/webview/components/ParamsWindow/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import { KeyValueTable } from "../../shared/KeyValueTable";
-import * as propTypes from "prop-types";
-
-export const Params = (props) => {
-  const { params, setParams } = props;
-  return (
-    <div className="params-wrapper">
-      <KeyValueTable data={params} setData={setParams} />
-    </div>
-  );
-};
-
-Params.propTypes = {
-  params: propTypes.array.isRequired,
-  setParams: propTypes.func.isRequired,
-};
diff --git a/webview/components/RawTab/index.tsx b/webview/components/RawTab/index.tsx
deleted file mode 100644
index 2673a2a..0000000
--- a/webview/components/RawTab/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import * as React from "react";
-import * as propTypes from "prop-types";
-import { Editor } from "../../shared/Editor";
-import "./styles.css";
-
-export const Raw = (props) => {
-  const { raw, setRaw, language } = props;
-  return (
-    <div className="raw-wrapper">
-      <Editor
-        className="raw-editor"
-        value={raw}
-        language={language}
-        onChange={setRaw}
-      />
-    </div>
-  );
-};
-
-Raw.propTypes = {
-  raw: propTypes.string.isRequired,
-  setRaw: propTypes.func.isRequired,
-  language: propTypes.string.isRequired,
-};
diff --git a/webview/components/RequestBar/index.tsx b/webview/components/RequestBar/index.tsx
index 97e8b7b..8319e9d 100644
--- a/webview/components/RequestBar/index.tsx
+++ b/webview/components/RequestBar/index.tsx
@@ -1,48 +1,42 @@
 import * as React from "react";
+import vscode from "../../vscode";
+import { RequestMethodSelector } from "../../features/requestMethod/RequestMethodSelector";
+import { RequestUrl } from "../../features/requestUrl/RequestUrl";
+import { responseLoadingStarted } from "../../features/response/responseSlice";
+import { selectRequestAuth } from "../../features/requestAuth/requestAuthSlice";
+import { selectRequestBody } from "../../features/requestBody/requestBodySlice";
+import { selectRequestHeaders } from "../../features/requestHeader/requestHeaderSlice";
+import { selectRequestUrl } from "../../features/requestUrl/requestUrlSlice";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
 import "./styles.css";
-import { requestTypes } from "../../constants/request-types";
-import * as propTypes from "prop-types";
+import { selectRequestMethod } from "../../features/requestMethod/requestMethodSlice";
+
+export const RequestBar = () => {
+  const dispatch = useAppDispatch();
+
+  const requestMethod = useAppSelector(selectRequestMethod);
+  const requestHeaders = useAppSelector(selectRequestHeaders);
+  const requestBody = useAppSelector(selectRequestBody);
+  const requestUrl = useAppSelector(selectRequestUrl);
+  const requestAuth = useAppSelector(selectRequestAuth);
 
-export const RequestBar = (props) => {
-  const {
-    requestUrl,
-    setRequestUrl,
-    sendRequest,
-    setReqType,
-    setLoadingResponse,
-  } = props;
   return (
     <form
       className="request-bar"
       onSubmit={(e) => {
-        sendRequest();
-        if (requestUrl !== "") {
-          setLoadingResponse(true);
-        }
+        dispatch(responseLoadingStarted());
+        vscode.postMessage({
+          method: requestMethod,
+          auth: requestAuth,
+          body: requestBody,
+          headers: requestHeaders,
+          url: requestUrl,
+        });
         e.preventDefault();
       }}
     >
-      <select
-        name="request-type"
-        id="request-type"
-        className="select-request-type"
-        onChange={(e) => setReqType(e.target.value)}
-      >
-        {requestTypes.map((type) => (
-          <option value={type.value} key={type.value}>
-            {type.name}
-          </option>
-        ))}
-      </select>
-      <input
-        type="text"
-        id="request-url"
-        name="request-url"
-        placeholder="Enter request URL"
-        className="input-request-url"
-        value={requestUrl}
-        onChange={(e) => setRequestUrl(e.target.value)}
-      />
+      <RequestMethodSelector />
+      <RequestUrl />
       <button
         name="request-send"
         id="request-send"
@@ -54,11 +48,3 @@ export const RequestBar = (props) => {
     </form>
   );
 };
-
-RequestBar.propTypes = {
-  requestUrl: propTypes.string.isRequired,
-  setRequestUrl: propTypes.func.isRequired,
-  sendRequest: propTypes.func.isRequired,
-  setReqType: propTypes.func.isRequired,
-  setLoadingResponse: propTypes.func.isRequired,
-};
diff --git a/webview/components/RequestBar/styles.css b/webview/components/RequestBar/styles.css
index 2f156e9..5d4df8d 100644
--- a/webview/components/RequestBar/styles.css
+++ b/webview/components/RequestBar/styles.css
@@ -22,25 +22,6 @@
   background-color: var(--input-field-hover);
 }
 
-.select-request-type {
-  padding: 12px 20px;
-  display: inline-block;
-  font-weight: 600;
-  outline: none;
-  border: 0;
-  border-radius: 2px 0 0 2px;
-  background-color: var(--input-field);
-  color: var(--default-text);
-  cursor: pointer;
-  font-size: var(--default-font-size);
-}
-.select-request-type:hover {
-  background-color: var(--input-field-hover);
-}
-.select-request-type:focus {
-  outline: none;
-}
-
 .button-request-send {
   background-color: var(--send-button);
   color: #fff;
diff --git a/webview/components/RequestOptionsBar/index.tsx b/webview/components/RequestOptionsBar/index.tsx
index 1ed90e5..fde672e 100644
--- a/webview/components/RequestOptionsBar/index.tsx
+++ b/webview/components/RequestOptionsBar/index.tsx
@@ -2,9 +2,13 @@ import * as React from "react";
 import "./styles.css";
 import * as propTypes from "prop-types";
 import { requestOptions } from "../../constants/request-options";
+import { useAppSelector } from "../../redux/hooks";
+import { selectRequestHeaders } from "../../features/requestHeader/requestHeaderSlice";
 
 export const RequestOptionsTab = (props) => {
-  const { selected, setSelected, headers } = props;
+  const { selected, setSelected } = props;
+  const header = useAppSelector(selectRequestHeaders);
+
   return (
     <div className="request-options-tab-wrapper">
       <div className="request-options">
@@ -23,8 +27,9 @@ export const RequestOptionsTab = (props) => {
               <div className="request-options-header-length">
                 (
                 {
-                  headers.filter(({ key, value, desc }) => key || value || desc)
-                    .length
+                  header.filter(
+                    ({ key, value, description }) => key || value || description
+                  ).length
                 }
                 )
               </div>
@@ -46,5 +51,4 @@ export const RequestOptionsTab = (props) => {
 RequestOptionsTab.propTypes = {
   selected: propTypes.string.isRequired,
   setSelected: propTypes.func.isRequired,
-  headers: propTypes.array.isRequired,
 };
diff --git a/webview/components/RequestOptionsWindow/index.tsx b/webview/components/RequestOptionsWindow/index.tsx
index 2af77d0..ca28458 100644
--- a/webview/components/RequestOptionsWindow/index.tsx
+++ b/webview/components/RequestOptionsWindow/index.tsx
@@ -1,58 +1,23 @@
 import * as React from "react";
-import { Params } from "../ParamsWindow";
-import { Authorization } from "../AuthorizationWindow";
-import { Body } from "../BodyWindow";
-import { Headers } from "../HeadersWindow";
+import { RequestQueryParams } from "../../features/requestUrl/RequestQueryParams";
+import { RequestAuth } from "../../features/requestAuth/RequestAuth";
+import { Body } from "../../features/requestBody/RequestBody";
+import { Headers } from "../../features/requestHeader/HeadersWindow";
 import * as propTypes from "prop-types";
 import "./styles.css";
 
 export const RequestOptionsWindow = (props) => {
-  const {
-    selected,
-    headers,
-    setHeaders,
-    params,
-    setParams,
-    setBody,
-    auth,
-    setAuth,
-    formData,
-    setFormData,
-    urlCoded,
-    setUrlCoded,
-    binary,
-    setBinary,
-    raw,
-    setRaw,
-    selectedBodyType,
-    setSelectedBodyType,
-    rawLanguage,
-    setRawLanguage,
-  } = props;
+  const { selected } = props;
   return (
     <div className="request-options-window-wrapper">
       {selected === "params" ? (
-        <Params params={params} setParams={setParams} />
+        <RequestQueryParams />
       ) : selected === "authorization" ? (
-        <Authorization auth={auth} setAuth={setAuth} />
+        <RequestAuth />
       ) : selected === "body" ? (
-        <Body
-          setBody={setBody}
-          formData={formData}
-          setFormData={setFormData}
-          urlCoded={urlCoded}
-          setUrlCoded={setUrlCoded}
-          binary={binary}
-          setBinary={setBinary}
-          raw={raw}
-          setRaw={setRaw}
-          selectedBodyType={selectedBodyType}
-          setSelectedBodyType={setSelectedBodyType}
-          rawLanguage={rawLanguage}
-          setRawLanguage={setRawLanguage}
-        />
+        <Body />
       ) : selected === "headers" ? (
-        <Headers headers={headers} setHeaders={setHeaders} />
+        <Headers />
       ) : null}
     </div>
   );
@@ -60,23 +25,4 @@ export const RequestOptionsWindow = (props) => {
 
 RequestOptionsWindow.propTypes = {
   selected: propTypes.string.isRequired,
-  headers: propTypes.array.isRequired,
-  setHeaders: propTypes.func.isRequired,
-  params: propTypes.array.isRequired,
-  setParams: propTypes.func.isRequired,
-  setBody: propTypes.func.isRequired,
-  auth: propTypes.object.isRequired,
-  setAuth: propTypes.func.isRequired,
-  formData: propTypes.any.isRequired,
-  setFormData: propTypes.any.isRequired,
-  urlCoded: propTypes.any.isRequired,
-  setUrlCoded: propTypes.any.isRequired,
-  binary: propTypes.any.isRequired,
-  setBinary: propTypes.any.isRequired,
-  raw: propTypes.any.isRequired,
-  setRaw: propTypes.any.isRequired,
-  selectedBodyType: propTypes.any.isRequired,
-  setSelectedBodyType: propTypes.any.isRequired,
-  rawLanguage: propTypes.any.isRequired,
-  setRawLanguage: propTypes.any.isRequired,
 };
diff --git a/webview/components/UrlCodedTab/index.tsx b/webview/components/UrlCodedTab/index.tsx
deleted file mode 100644
index 849583b..0000000
--- a/webview/components/UrlCodedTab/index.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-import { KeyValueTable } from "../../shared/KeyValueTable";
-import * as propTypes from "prop-types";
-
-export const UrlCoded = (props) => {
-  const { urlCoded, setUrlCoded } = props;
-  return (
-    <div className="url-coded-wrapper">
-      <KeyValueTable data={urlCoded} setData={setUrlCoded} />
-    </div>
-  );
-};
-
-UrlCoded.propTypes = {
-  urlCoded: propTypes.array.isRequired,
-  setUrlCoded: propTypes.func.isRequired,
-};
diff --git a/webview/components/UrlCodedTab/styles.css b/webview/components/UrlCodedTab/styles.css
deleted file mode 100644
index 85f6c10..0000000
--- a/webview/components/UrlCodedTab/styles.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.url-coded-wrapper {
-  margin-top: 15px;
-}
diff --git a/webview/constants/auth-types.ts b/webview/constants/auth-types.ts
deleted file mode 100644
index d013b4e..0000000
--- a/webview/constants/auth-types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const authTypes = [
-  {
-    name: "No Auth",
-    value: "no-auth",
-  },
-  {
-    name: "Bearer Token",
-    value: "bearer-token",
-  },
-  {
-    name: "Basic Auth",
-    value: "basic-auth",
-  },
-];
diff --git a/webview/constants/body-types.ts b/webview/constants/body-types.ts
deleted file mode 100644
index 6485e82..0000000
--- a/webview/constants/body-types.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-export const bodyTypes = [
-  {
-    name: "none",
-    value: "none",
-  },
-  {
-    name: "form-data",
-    value: "form-data",
-  },
-  {
-    name: "x-www-form-urlcoded",
-    value: "urlcoded",
-  },
-  {
-    name: "raw",
-    value: "raw",
-  },
-  {
-    name: "binary",
-    value: "binary",
-  },
-];
diff --git a/webview/constants/default-headers.ts b/webview/constants/default-headers.ts
deleted file mode 100644
index 9a85010..0000000
--- a/webview/constants/default-headers.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export const defaultHeaders = [
-  {
-    key: "Cache-Control",
-    value: "no-cache",
-    checked: true,
-  },
-  {
-    key: "Accept",
-    value: "*/*",
-    checked: true,
-  },
-  {
-    key: "Accept-Encoding",
-    value: "gzip, deflate",
-    checked: true,
-  },
-  {
-    key: "Connection",
-    value: "keep-alive",
-    checked: true,
-  },
-  {},
-];
diff --git a/webview/constants/key-value-table.ts b/webview/constants/key-value-table.ts
deleted file mode 100644
index 969b531..0000000
--- a/webview/constants/key-value-table.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export const keyValueTable = [
-  {
-    heading: "KEY",
-    value: "key",
-  },
-  {
-    heading: "VALUE",
-    value: "value",
-  },
-  {
-    heading: "DESCRIPTION",
-    value: "decsription",
-  },
-];
diff --git a/webview/constants/request-types.ts b/webview/constants/request-types.ts
deleted file mode 100644
index 1462a4c..0000000
--- a/webview/constants/request-types.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export const requestTypes = [
-  {
-    name: "GET",
-    value: "get",
-  },
-  {
-    name: "POST",
-    value: "post",
-  },
-  {
-    name: "PUT",
-    value: "put",
-  },
-  {
-    name: "PATCH",
-    value: "patch",
-  },
-  {
-    name: "DELETE",
-    value: "delete",
-  },
-  {
-    name: "OPTIONS",
-    value: "options",
-  },
-  {
-    name: "HEAD",
-    value: "head",
-  },
-];
diff --git a/webview/features/requestAuth/BasicAuth/index.tsx b/webview/features/requestAuth/BasicAuth/index.tsx
new file mode 100644
index 0000000..e5b1ba7
--- /dev/null
+++ b/webview/features/requestAuth/BasicAuth/index.tsx
@@ -0,0 +1,57 @@
+import * as React from "react";
+import "./styles.css";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestAuthOptionsUpdated,
+  selectBasicAuthOptions,
+} from "../requestAuthSlice";
+
+export const BasicAuth = () => {
+  const basicAuthOptions = useAppSelector(selectBasicAuthOptions);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div>
+      <div className="basic-auth-input-group">
+        <div className="label-basic-auth">Username</div>
+        <input
+          type="text"
+          id="basic-auth-username-input"
+          name="basic-auth-username-input"
+          placeholder="Username"
+          autoComplete="off"
+          className="input-basic-auth"
+          value={basicAuthOptions.username}
+          onChange={(e) =>
+            dispatch(
+              requestAuthOptionsUpdated({
+                username: e.target.value,
+                password: basicAuthOptions.password,
+              })
+            )
+          }
+        />
+      </div>
+      <div className="basic-auth-input-group">
+        <div className="label-basic-auth">Password</div>
+        <input
+          type="password"
+          id="basic-auth-password-input"
+          name="basic-auth-password-input"
+          placeholder="Password"
+          autoComplete="off"
+          className="input-basic-auth"
+          value={basicAuthOptions.password}
+          onChange={(e) =>
+            dispatch(
+              requestAuthOptionsUpdated({
+                username: basicAuthOptions.username,
+                password: e.target.value,
+              })
+            )
+          }
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/webview/components/BasicAuthTab/styles.css b/webview/features/requestAuth/BasicAuth/styles.css
similarity index 100%
rename from webview/components/BasicAuthTab/styles.css
rename to webview/features/requestAuth/BasicAuth/styles.css
diff --git a/webview/features/requestAuth/BearerToken/index.tsx b/webview/features/requestAuth/BearerToken/index.tsx
new file mode 100644
index 0000000..f141eaf
--- /dev/null
+++ b/webview/features/requestAuth/BearerToken/index.tsx
@@ -0,0 +1,30 @@
+import * as React from "react";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestAuthOptionsUpdated,
+  selectBearerAuthOptions,
+} from "../requestAuthSlice";
+import "./styles.css";
+
+export const BearerToken = () => {
+  const bearerAuthOptions = useAppSelector(selectBearerAuthOptions);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="bearer-token-wrapper">
+      <div className="label-bearer-token">Token</div>
+      <input
+        type="text"
+        id="bearer-token-input"
+        name="bearer-token-input"
+        placeholder="Token"
+        autoComplete="off"
+        className="input-bearer-token"
+        value={bearerAuthOptions.token}
+        onChange={(e) =>
+          dispatch(requestAuthOptionsUpdated({ token: e.target.value }))
+        }
+      />
+    </div>
+  );
+};
diff --git a/webview/components/BearerTokenTab/styles.css b/webview/features/requestAuth/BearerToken/styles.css
similarity index 100%
rename from webview/components/BearerTokenTab/styles.css
rename to webview/features/requestAuth/BearerToken/styles.css
diff --git a/webview/components/NoAuthTab/index.tsx b/webview/features/requestAuth/NoAuth/index.tsx
similarity index 100%
rename from webview/components/NoAuthTab/index.tsx
rename to webview/features/requestAuth/NoAuth/index.tsx
diff --git a/webview/components/NoAuthTab/styles.css b/webview/features/requestAuth/NoAuth/styles.css
similarity index 100%
rename from webview/components/NoAuthTab/styles.css
rename to webview/features/requestAuth/NoAuth/styles.css
diff --git a/webview/features/requestAuth/RequestAuth/index.tsx b/webview/features/requestAuth/RequestAuth/index.tsx
new file mode 100644
index 0000000..6fa7989
--- /dev/null
+++ b/webview/features/requestAuth/RequestAuth/index.tsx
@@ -0,0 +1,44 @@
+import * as React from "react";
+import "./styles.css";
+import { NoAuth } from "../NoAuth";
+import { BearerToken } from "../BearerToken";
+import { BasicAuth } from "../BasicAuth";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestAuthTypes,
+  requestAuthTypeUpdated,
+  selectRequestAuthType,
+} from "../requestAuthSlice";
+
+export const RequestAuth = () => {
+  const requestAuthType = useAppSelector(selectRequestAuthType);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="req-auth-wrapper">
+      <div className="auth-type">
+        <div className="label-auth-type">Authorization Type: </div>
+        <select
+          onChange={(e) => dispatch(requestAuthTypeUpdated(e.target.value))}
+          className="select-auth-type"
+          value={requestAuthType}
+        >
+          {requestAuthTypes.map(({ value, name }) => (
+            <option key={value} value={value}>
+              {name}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="req-auth-type-window">
+        {requestAuthType === "noauth" ? (
+          <NoAuth />
+        ) : requestAuthType === "bearer" ? (
+          <BearerToken />
+        ) : requestAuthType === "basic" ? (
+          <BasicAuth />
+        ) : null}
+      </div>
+    </div>
+  );
+};
diff --git a/webview/components/AuthorizationWindow/styles.css b/webview/features/requestAuth/RequestAuth/styles.css
similarity index 94%
rename from webview/components/AuthorizationWindow/styles.css
rename to webview/features/requestAuth/RequestAuth/styles.css
index fc1ab56..5b9a8ab 100644
--- a/webview/components/AuthorizationWindow/styles.css
+++ b/webview/features/requestAuth/RequestAuth/styles.css
@@ -20,7 +20,7 @@
   outline: none;
   border: var(--default-border-size) solid var(--border);
   border-radius: 2px;
-  background-color: transparent;
+  background-color: var(--background);
   color: var(--default-text-light);
   cursor: pointer;
   font-size: var(--default-font-size);
diff --git a/webview/features/requestAuth/requestAuthSlice.ts b/webview/features/requestAuth/requestAuthSlice.ts
new file mode 100644
index 0000000..c75c74a
--- /dev/null
+++ b/webview/features/requestAuth/requestAuthSlice.ts
@@ -0,0 +1,58 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../redux/store";
+
+export const requestAuthTypes = [
+  { name: "No Auth", value: "noauth" },
+  { name: "Bearer Token", value: "bearer" },
+  { name: "Basic Auth", value: "basic" },
+];
+
+export interface BearerAuthOptions {
+  token: string;
+}
+
+export interface BasicAuthOptions {
+  username: string;
+  password: string;
+}
+
+export interface RequestAuthState {
+  type: string;
+  bearer: BearerAuthOptions;
+  basic: BasicAuthOptions;
+}
+
+const initialState: RequestAuthState = {
+  type: "noauth",
+  bearer: { token: "" },
+  basic: { username: "", password: "" },
+};
+
+const requestAuthSlice = createSlice({
+  name: "requestAuth",
+  initialState,
+  reducers: {
+    requestAuthTypeUpdated(state, action: PayloadAction<string>) {
+      state.type = action.payload;
+    },
+    requestAuthOptionsUpdated(
+      state,
+      action: PayloadAction<BearerAuthOptions | BasicAuthOptions>
+    ) {
+      state[state.type] = action.payload;
+    },
+  },
+});
+
+export const { requestAuthTypeUpdated, requestAuthOptionsUpdated } =
+  requestAuthSlice.actions;
+
+export const selectRequestAuth = (state: RootState) => state.requestAuth;
+export const selectRequestAuthType = (state: RootState) =>
+  state.requestAuth.type;
+export const selectBearerAuthOptions = (state: RootState) =>
+  state.requestAuth.bearer;
+export const selectBasicAuthOptions = (state: RootState) =>
+  state.requestAuth.basic;
+
+export default requestAuthSlice.reducer;
diff --git a/webview/features/requestBody/Binary/index.tsx b/webview/features/requestBody/Binary/index.tsx
new file mode 100644
index 0000000..7ee197c
--- /dev/null
+++ b/webview/features/requestBody/Binary/index.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import "./styles.css";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestBodyBinaryUpdated,
+  selectRequestBodyFile,
+} from "../requestBodySlice";
+
+export const Binary = () => {
+  const binary = useAppSelector(selectRequestBodyFile);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="binary-wrapper">
+      <div className="input-file-wrapper">
+        <input
+          type="file"
+          id="myFile"
+          name="filename"
+          className="input-file-upload"
+          onChange={(e) => {
+            if (e.target.files.length) {
+              e.target.files[0].text().then((data) =>
+                dispatch(
+                  requestBodyBinaryUpdated({
+                    name: e.target.files[0].name,
+                    data,
+                  })
+                )
+              );
+            }
+          }}
+        ></input>
+        <label className="label-file-upload" htmlFor="myFile">
+          Select file
+        </label>
+        <div>{binary}</div>
+      </div>
+    </div>
+  );
+};
diff --git a/webview/components/Binary/styles.css b/webview/features/requestBody/Binary/styles.css
similarity index 100%
rename from webview/components/Binary/styles.css
rename to webview/features/requestBody/Binary/styles.css
diff --git a/webview/features/requestBody/FormData/index.tsx b/webview/features/requestBody/FormData/index.tsx
new file mode 100644
index 0000000..4415677
--- /dev/null
+++ b/webview/features/requestBody/FormData/index.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import "./styles.css";
+import { KeyValueTable } from "../../../shared/KeyValueTable";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  selectRequestBodyFormData,
+  requestBodyFormDataItemAdded,
+  requestBodyFormDataItemDeleted,
+  requestBodyFormDataItemUpdated,
+} from "../requestBodySlice";
+
+export const FormData = () => {
+  const urlEncoded = useAppSelector(selectRequestBodyFormData);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="form-data-wrapper">
+      <KeyValueTable
+        data={urlEncoded}
+        onRowAdd={(value) => dispatch(requestBodyFormDataItemAdded(value))}
+        onRowDelete={(idx) => dispatch(requestBodyFormDataItemDeleted(idx))}
+        onRowUpdate={(idx, value) =>
+          dispatch(requestBodyFormDataItemUpdated({ idx, value }))
+        }
+      />
+    </div>
+  );
+};
diff --git a/webview/components/FormDataTab/styles.css b/webview/features/requestBody/FormData/styles.css
similarity index 100%
rename from webview/components/FormDataTab/styles.css
rename to webview/features/requestBody/FormData/styles.css
diff --git a/webview/components/NoBodyTab/index.tsx b/webview/features/requestBody/NoBody/index.tsx
similarity index 100%
rename from webview/components/NoBodyTab/index.tsx
rename to webview/features/requestBody/NoBody/index.tsx
diff --git a/webview/components/NoBodyTab/styles.css b/webview/features/requestBody/NoBody/styles.css
similarity index 100%
rename from webview/components/NoBodyTab/styles.css
rename to webview/features/requestBody/NoBody/styles.css
diff --git a/webview/features/requestBody/Raw/index.tsx b/webview/features/requestBody/Raw/index.tsx
new file mode 100644
index 0000000..0d4c3d4
--- /dev/null
+++ b/webview/features/requestBody/Raw/index.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import { Editor } from "../../../shared/Editor";
+import "./styles.css";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestBodyRawUpdated,
+  selectRequestBodyRaw,
+  selectRequestBodyRawLanguage,
+} from "../requestBodySlice";
+
+export const Raw = () => {
+  const raw = useAppSelector(selectRequestBodyRaw);
+  const language = useAppSelector(selectRequestBodyRawLanguage);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="raw-wrapper">
+      <Editor
+        className="raw-editor"
+        value={raw}
+        language={language}
+        onChange={(data) => dispatch(requestBodyRawUpdated(data))}
+      />
+    </div>
+  );
+};
diff --git a/webview/components/RawTab/styles.css b/webview/features/requestBody/Raw/styles.css
similarity index 100%
rename from webview/components/RawTab/styles.css
rename to webview/features/requestBody/Raw/styles.css
diff --git a/webview/features/requestBody/RequestBody/index.tsx b/webview/features/requestBody/RequestBody/index.tsx
new file mode 100644
index 0000000..0b2a84b
--- /dev/null
+++ b/webview/features/requestBody/RequestBody/index.tsx
@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Binary } from "../Binary";
+import { FormData } from "../FormData";
+import { None } from "../NoBody";
+import { Raw } from "../Raw";
+import { UrlEncoded } from "../UrlEncoded";
+import {
+  requestBodyModes,
+  requestBodyRawLanguages,
+  requestBodyRawLanguageUpdated,
+  requestBodyModeUpdated,
+  selectRequestBodyMode,
+  selectRequestBodyRawLanguage,
+} from "../requestBodySlice";
+import "./styles.css";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+
+export const Body = () => {
+  const bodyMode = useAppSelector(selectRequestBodyMode);
+  const language = useAppSelector(selectRequestBodyRawLanguage);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="request-body-wrapper">
+      <div className="body-options-wrapper">
+        {requestBodyModes.map(({ name, value }) => (
+          <div key={value} className="body-options">
+            <input
+              name="req-body-radio"
+              type="radio"
+              id={value}
+              value={value}
+              onChange={(e) =>
+                e.target.checked && dispatch(requestBodyModeUpdated(value))
+              }
+              className="radio-body-option"
+              checked={bodyMode === value ? true : false}
+            />
+            <label className="label-body-option" htmlFor={value}>
+              {name}
+            </label>
+          </div>
+        ))}
+        {bodyMode === "raw" ? (
+          <select
+            className="select-raw-lang"
+            value={language}
+            onChange={(e) =>
+              dispatch(requestBodyRawLanguageUpdated(e.target.value))
+            }
+          >
+            {requestBodyRawLanguages.map((type) => (
+              <option key={type.value} value={type.value}>
+                {type.name}
+              </option>
+            ))}
+          </select>
+        ) : null}
+      </div>
+      <div className="request-body-window-wrapper">
+        {bodyMode === "none" ? (
+          <None />
+        ) : bodyMode === "form-data" ? (
+          <FormData />
+        ) : bodyMode === "x-www-form-urlencoded" ? (
+          <UrlEncoded />
+        ) : bodyMode === "raw" ? (
+          <Raw />
+        ) : bodyMode === "binary" ? (
+          <Binary />
+        ) : null}
+      </div>
+    </div>
+  );
+};
diff --git a/webview/components/BodyWindowBar/styles.css b/webview/features/requestBody/RequestBody/styles.css
similarity index 87%
rename from webview/components/BodyWindowBar/styles.css
rename to webview/features/requestBody/RequestBody/styles.css
index 288b6e9..9fb395e 100644
--- a/webview/components/BodyWindowBar/styles.css
+++ b/webview/features/requestBody/RequestBody/styles.css
@@ -1,3 +1,13 @@
+.request-body-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.request-body-window-wrapper {
+  flex: 1;
+}
+
 .body-options-wrapper {
   display: flex;
   align-items: center;
diff --git a/webview/features/requestBody/UrlEncoded/index.tsx b/webview/features/requestBody/UrlEncoded/index.tsx
new file mode 100644
index 0000000..623ea5e
--- /dev/null
+++ b/webview/features/requestBody/UrlEncoded/index.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import "./styles.css";
+import { KeyValueTable } from "../../../shared/KeyValueTable";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  selectRequestBodyUrlEncoded,
+  requestBodyUrlEncodedItemAdded,
+  requestBodyUrlEncodedItemDeleted,
+  requestBodyUrlEncodedItemUpdated,
+} from "../requestBodySlice";
+
+export const UrlEncoded = () => {
+  const urlEncoded = useAppSelector(selectRequestBodyUrlEncoded);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="url-encoded-wrapper">
+      <KeyValueTable
+        data={urlEncoded}
+        onRowAdd={(value) => dispatch(requestBodyUrlEncodedItemAdded(value))}
+        onRowDelete={(idx) => dispatch(requestBodyUrlEncodedItemDeleted(idx))}
+        onRowUpdate={(idx, value) =>
+          dispatch(requestBodyUrlEncodedItemUpdated({ idx, value }))
+        }
+      />
+    </div>
+  );
+};
diff --git a/webview/features/requestBody/UrlEncoded/styles.css b/webview/features/requestBody/UrlEncoded/styles.css
new file mode 100644
index 0000000..5f63bf8
--- /dev/null
+++ b/webview/features/requestBody/UrlEncoded/styles.css
@@ -0,0 +1,3 @@
+.url-encoded-wrapper {
+  margin-top: 15px;
+}
diff --git a/webview/features/requestBody/requestBodySlice.ts b/webview/features/requestBody/requestBodySlice.ts
new file mode 100644
index 0000000..b62306f
--- /dev/null
+++ b/webview/features/requestBody/requestBodySlice.ts
@@ -0,0 +1,111 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../redux/store";
+
+export const requestBodyModes = [
+  { name: "none", value: "none" },
+  { name: "form-data", value: "form-data" },
+  { name: "x-www-form-urlencoded", value: "x-www-form-urlencoded" },
+  { name: "raw", value: "raw" },
+  { name: "binary", value: "binary" },
+];
+
+export const requestBodyRawLanguages = [
+  { name: "JSON", value: "json" },
+  { name: "HTML", value: "html" },
+  { name: "XML", value: "xml" },
+  { name: "Text", value: "text" },
+];
+
+export interface RequestBodyState {
+  mode?: string;
+  disabled: boolean;
+  raw: string;
+  file: string;
+  fileData: string;
+  formdata: { key: string; value: string; description: string }[];
+  urlencoded: { key: string; value: string; description: string }[];
+  options: any;
+}
+
+const initialState: RequestBodyState = {
+  disabled: true,
+  raw: "",
+  file: "",
+  fileData: "",
+  formdata: [],
+  urlencoded: [],
+  options: { raw: { language: "json" } },
+};
+
+const requestBodySlice = createSlice({
+  name: "requestBody",
+  initialState,
+  reducers: {
+    requestBodyFormDataItemAdded(state, action: PayloadAction<any>) {
+      state.formdata.push(action.payload);
+    },
+    requestBodyFormDataItemDeleted(state, action: PayloadAction<number>) {
+      state.formdata.splice(action.payload, 1);
+    },
+    requestBodyFormDataItemUpdated(state, action: PayloadAction<any>) {
+      state.formdata[action.payload.idx] = action.payload.value;
+    },
+    requestBodyUrlEncodedItemAdded(state, action: PayloadAction<any>) {
+      state.urlencoded.push(action.payload);
+    },
+    requestBodyUrlEncodedItemDeleted(state, action: PayloadAction<number>) {
+      state.urlencoded.splice(action.payload, 1);
+    },
+    requestBodyUrlEncodedItemUpdated(state, action: PayloadAction<any>) {
+      state.urlencoded[action.payload.idx] = action.payload.value;
+    },
+    requestBodyRawUpdated(state, action: PayloadAction<string>) {
+      state.raw = action.payload;
+    },
+    requestBodyRawLanguageUpdated(state, action: PayloadAction<string>) {
+      state.options.raw.language = action.payload;
+    },
+    requestBodyBinaryUpdated(state, action: PayloadAction<any>) {
+      state.file = action.payload.name;
+      state.fileData = action.payload.data;
+    },
+    requestBodyModeUpdated(state, action: PayloadAction<string>) {
+      if (action.payload === "none") {
+        state.mode = undefined;
+        state.disabled = true;
+      } else {
+        state.mode = action.payload;
+      }
+    },
+  },
+});
+
+export const {
+  requestBodyBinaryUpdated,
+  requestBodyFormDataItemAdded,
+  requestBodyFormDataItemDeleted,
+  requestBodyFormDataItemUpdated,
+  requestBodyModeUpdated,
+  requestBodyRawUpdated,
+  requestBodyRawLanguageUpdated,
+  requestBodyUrlEncodedItemAdded,
+  requestBodyUrlEncodedItemDeleted,
+  requestBodyUrlEncodedItemUpdated,
+} = requestBodySlice.actions;
+
+export const selectRequestBody = (state: RootState) => state.requestBody;
+export const selectRequestBodyMode = (state: RootState) =>
+  state.requestBody.mode || "none";
+export const selectRequestBodyRaw = (state: RootState) => state.requestBody.raw;
+export const selectRequestBodyRawLanguage = (state: RootState) =>
+  state.requestBody.options.raw.language;
+export const selectRequestBodyFile = (state: RootState) =>
+  state.requestBody.file;
+export const selectRequestBodyFileData = (state: RootState) =>
+  state.requestBody.fileData;
+export const selectRequestBodyFormData = (state: RootState) =>
+  state.requestBody.formdata;
+export const selectRequestBodyUrlEncoded = (state: RootState) =>
+  state.requestBody.urlencoded;
+
+export default requestBodySlice.reducer;
diff --git a/webview/features/requestHeader/HeadersWindow/index.tsx b/webview/features/requestHeader/HeadersWindow/index.tsx
new file mode 100644
index 0000000..ed31b8b
--- /dev/null
+++ b/webview/features/requestHeader/HeadersWindow/index.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import "./styles.css";
+import { KeyValueTable } from "../../../shared/KeyValueTable";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestHeaderAdded,
+  requestHeaderUpdated,
+  requestHeaderDeleted,
+  selectRequestHeaders,
+} from "../requestHeaderSlice";
+
+export const Headers = () => {
+  const header = useAppSelector(selectRequestHeaders);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="headers-wrapper">
+      <KeyValueTable
+        data={header}
+        onRowAdd={(value) => dispatch(requestHeaderAdded(value))}
+        onRowDelete={(idx) => dispatch(requestHeaderDeleted(idx))}
+        onRowUpdate={(idx, value) =>
+          dispatch(requestHeaderUpdated({ idx, value }))
+        }
+      />
+    </div>
+  );
+};
diff --git a/webview/components/HeadersWindow/styles.css b/webview/features/requestHeader/HeadersWindow/styles.css
similarity index 100%
rename from webview/components/HeadersWindow/styles.css
rename to webview/features/requestHeader/HeadersWindow/styles.css
diff --git a/webview/features/requestHeader/requestHeaderSlice.ts b/webview/features/requestHeader/requestHeaderSlice.ts
new file mode 100644
index 0000000..253f3cb
--- /dev/null
+++ b/webview/features/requestHeader/requestHeaderSlice.ts
@@ -0,0 +1,62 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../redux/store";
+
+interface Header {
+  key: string;
+  value: string;
+  description: string;
+  disabled: boolean;
+}
+
+const initialState: Header[] = [
+  {
+    key: "Cache-Control",
+    value: "no-cache",
+    description: "",
+    disabled: false,
+  },
+  {
+    key: "Accept",
+    value: "*/*",
+    description: "",
+    disabled: false,
+  },
+  {
+    key: "Accept-Encoding",
+    value: "gzip, deflate",
+    description: "",
+    disabled: false,
+  },
+  {
+    key: "Connection",
+    value: "keep-alive",
+    description: "",
+    disabled: false,
+  },
+];
+
+const requestHeaderSlice = createSlice({
+  name: "requestHeader",
+  initialState,
+  reducers: {
+    requestHeaderUpdated(state, action: PayloadAction<any>) {
+      state[action.payload.idx] = action.payload.value;
+    },
+    requestHeaderAdded(state, action: PayloadAction<Header>) {
+      state.push(action.payload);
+    },
+    requestHeaderDeleted(state, action: PayloadAction<number>) {
+      state.splice(action.payload, 1);
+    },
+  },
+});
+
+export const {
+  requestHeaderAdded,
+  requestHeaderUpdated,
+  requestHeaderDeleted,
+} = requestHeaderSlice.actions;
+
+export const selectRequestHeaders = (state: RootState) => state.requestHeader;
+
+export default requestHeaderSlice.reducer;
diff --git a/webview/features/requestMethod/RequestMethodSelector/index.tsx b/webview/features/requestMethod/RequestMethodSelector/index.tsx
new file mode 100644
index 0000000..2b0da0f
--- /dev/null
+++ b/webview/features/requestMethod/RequestMethodSelector/index.tsx
@@ -0,0 +1,27 @@
+import * as React from "react";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestMethodUpdated,
+  selectRequestMethod,
+  requestMethods,
+} from "../requestMethodSlice";
+import "./styles.css";
+
+export const RequestMethodSelector = () => {
+  const requestMethod = useAppSelector(selectRequestMethod);
+  const dispatch = useAppDispatch();
+
+  return (
+    <select
+      className="request-method-selector"
+      onChange={(e) => dispatch(requestMethodUpdated(e.target.value))}
+      value={requestMethod}
+    >
+      {requestMethods.map(({ value, name }) => (
+        <option value={value} key={value}>
+          {name}
+        </option>
+      ))}
+    </select>
+  );
+};
diff --git a/webview/features/requestMethod/RequestMethodSelector/styles.css b/webview/features/requestMethod/RequestMethodSelector/styles.css
new file mode 100644
index 0000000..3dcf12b
--- /dev/null
+++ b/webview/features/requestMethod/RequestMethodSelector/styles.css
@@ -0,0 +1,18 @@
+.request-method-selector {
+  padding: 12px 20px;
+  display: inline-block;
+  font-weight: 600;
+  outline: none;
+  border: 0;
+  border-radius: 2px 0 0 2px;
+  background-color: var(--input-field);
+  color: var(--default-text);
+  cursor: pointer;
+  font-size: var(--default-font-size);
+}
+.request-method-selector:hover {
+  background-color: var(--input-field-hover);
+}
+.request-method-selector:focus {
+  outline: none;
+}
diff --git a/webview/features/requestMethod/requestMethodSlice.ts b/webview/features/requestMethod/requestMethodSlice.ts
new file mode 100644
index 0000000..1e61057
--- /dev/null
+++ b/webview/features/requestMethod/requestMethodSlice.ts
@@ -0,0 +1,30 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../redux/store";
+
+export const requestMethods = [
+  { name: "GET", value: "get" },
+  { name: "POST", value: "post" },
+  { name: "PUT", value: "put" },
+  { name: "PATCH", value: "patch" },
+  { name: "DELETE", value: "delete" },
+  { name: "OPTIONS", value: "options" },
+  { name: "HEAD", value: "head" },
+];
+
+const initialState: string = "get";
+
+const requestMethodSlice = createSlice({
+  name: "requestMethod",
+  initialState,
+  reducers: {
+    requestMethodUpdated(state, action: PayloadAction<string>) {
+      return action.payload;
+    },
+  },
+});
+
+export const { requestMethodUpdated } = requestMethodSlice.actions;
+
+export const selectRequestMethod = (state: RootState) => state.requestMethod;
+
+export default requestMethodSlice.reducer;
diff --git a/webview/features/requestUrl/RequestQueryParams/index.tsx b/webview/features/requestUrl/RequestQueryParams/index.tsx
new file mode 100644
index 0000000..e513160
--- /dev/null
+++ b/webview/features/requestUrl/RequestQueryParams/index.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+import "./styles.css";
+import { KeyValueTable } from "../../../shared/KeyValueTable";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import {
+  requestQueryParamAdded,
+  requestQueryParamDeleted,
+  requestQueryParamUpdated,
+  selectRequestQueryParams,
+} from "../requestUrlSlice";
+
+export const RequestQueryParams = () => {
+  const queryParams = useAppSelector(selectRequestQueryParams);
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="params-wrapper">
+      <KeyValueTable
+        data={queryParams}
+        onRowAdd={(value) => dispatch(requestQueryParamAdded(value))}
+        onRowDelete={(idx) => dispatch(requestQueryParamDeleted(idx))}
+        onRowUpdate={(idx, value) =>
+          dispatch(requestQueryParamUpdated({ idx, value }))
+        }
+      />
+    </div>
+  );
+};
diff --git a/webview/components/ParamsWindow/styles.css b/webview/features/requestUrl/RequestQueryParams/styles.css
similarity index 100%
rename from webview/components/ParamsWindow/styles.css
rename to webview/features/requestUrl/RequestQueryParams/styles.css
diff --git a/webview/features/requestUrl/RequestUrl/index.tsx b/webview/features/requestUrl/RequestUrl/index.tsx
new file mode 100644
index 0000000..b80d66e
--- /dev/null
+++ b/webview/features/requestUrl/RequestUrl/index.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import { useAppDispatch, useAppSelector } from "../../../redux/hooks";
+import { requestUrlUpdated, selectRequestUrl } from "../requestUrlSlice";
+import "./styles.css";
+
+export const RequestUrl = () => {
+  const requestUrl = useAppSelector(selectRequestUrl);
+  const dispatch = useAppDispatch();
+
+  return (
+    <input
+      placeholder="Enter request URL"
+      className="input-request-url"
+      value={requestUrl}
+      onChange={(e) => dispatch(requestUrlUpdated(e.target.value))}
+    />
+  );
+};
diff --git a/webview/features/requestUrl/RequestUrl/styles.css b/webview/features/requestUrl/RequestUrl/styles.css
new file mode 100644
index 0000000..6bcd903
--- /dev/null
+++ b/webview/features/requestUrl/RequestUrl/styles.css
@@ -0,0 +1,17 @@
+.input-request-url {
+  flex: 2;
+  padding: 13px 20px;
+  color: var(--default-text);
+  display: inline-block;
+  outline: none;
+  border: 0;
+  border-radius: 0 2px 2px 0;
+  background-color: var(--input-field);
+  font-size: var(--default-font-size);
+}
+.input-request-url:focus {
+  outline: none;
+}
+.input-request-url:hover {
+  background-color: var(--input-field-hover);
+}
diff --git a/webview/features/requestUrl/requestUrlSlice.ts b/webview/features/requestUrl/requestUrlSlice.ts
new file mode 100644
index 0000000..61d70b7
--- /dev/null
+++ b/webview/features/requestUrl/requestUrlSlice.ts
@@ -0,0 +1,76 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../redux/store";
+import { Url } from "postman-collection";
+
+interface QueryParam {
+  key: string;
+  value: string;
+  description: string;
+  disabled: boolean;
+}
+
+interface Variable {
+  key: string;
+  value: string;
+  description: string;
+}
+
+export interface RequestUrlState {
+  auth?: string;
+  hash?: string;
+  host?: string[];
+  path?: string[];
+  port?: string;
+  protocol?: string;
+  query: QueryParam[];
+  variables: Variable[];
+}
+
+const initialState: RequestUrlState = {
+  query: [],
+  variables: [],
+};
+
+const requestUrlSlice = createSlice({
+  name: "requestUrl",
+  initialState,
+  reducers: {
+    requestUrlUpdated(state, action: PayloadAction<string>) {
+      const { query, ...other } = Url.parse(action.payload);
+      return {
+        ...other,
+        query: [
+          ...state.query.filter(({ disabled }) => disabled),
+          ...(query || []),
+        ],
+      };
+    },
+    requestQueryParamAdded(state, action: PayloadAction<QueryParam>) {
+      state.query.push(action.payload);
+    },
+    requestQueryParamUpdated(state, action: PayloadAction<any>) {
+      state.query[action.payload.idx] = action.payload.value;
+    },
+    requestQueryParamDeleted(state, action: PayloadAction<number>) {
+      state.query.splice(action.payload, 1);
+    },
+    requestUrlVariableUpdated(state, action: PayloadAction<Variable>) {},
+  },
+});
+
+export const {
+  requestUrlUpdated,
+  requestQueryParamAdded,
+  requestQueryParamUpdated,
+  requestQueryParamDeleted,
+  requestUrlVariableUpdated,
+} = requestUrlSlice.actions;
+
+export const selectRequestUrl = (state: RootState) =>
+  new Url(state.requestUrl).toString();
+export const selectRequestQueryParams = (state: RootState) =>
+  state.requestUrl.query;
+export const selectRequestVariables = (state: RootState) =>
+  state.requestUrl.variables;
+
+export default requestUrlSlice.reducer;
diff --git a/webview/components/InitialResponseTab/index.tsx b/webview/features/response/Default/index.tsx
similarity index 69%
rename from webview/components/InitialResponseTab/index.tsx
rename to webview/features/response/Default/index.tsx
index ede6e8f..ab361d4 100644
--- a/webview/components/InitialResponseTab/index.tsx
+++ b/webview/features/response/Default/index.tsx
@@ -1,8 +1,8 @@
 import * as React from "react";
 import "./styles.css";
-import { ReactComponent as PackageIcon } from "../../icons/package.svg";
+import { ReactComponent as PackageIcon } from "../../../icons/package.svg";
 
-export const InitialResponse = () => {
+export const Default = () => {
   return (
     <div className="initial-response-wrapper">
       <div className="initial-text">Hit Send to get a response</div>
diff --git a/webview/components/InitialResponseTab/styles.css b/webview/features/response/Default/styles.css
similarity index 99%
rename from webview/components/InitialResponseTab/styles.css
rename to webview/features/response/Default/styles.css
index 7c47aac..2e8a2ac 100644
--- a/webview/components/InitialResponseTab/styles.css
+++ b/webview/features/response/Default/styles.css
@@ -16,4 +16,4 @@
 
 .initial-text {
   padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/webview/components/ErrorResponseTab/index.tsx b/webview/features/response/ErrorResponse/index.tsx
similarity index 52%
rename from webview/components/ErrorResponseTab/index.tsx
rename to webview/features/response/ErrorResponse/index.tsx
index d1f7492..b9eb3c0 100644
--- a/webview/components/ErrorResponseTab/index.tsx
+++ b/webview/features/response/ErrorResponse/index.tsx
@@ -1,10 +1,11 @@
 import * as React from "react";
 import "./styles.css";
-import { ReactComponent as PackageIcon } from "../../icons/package.svg";
-import * as propTypes from "prop-types";
+import { ReactComponent as PackageIcon } from "../../../icons/package.svg";
+import { useAppSelector } from "../../../redux/hooks";
+import { selectResponse } from "../responseSlice";
 
-export const ErrorResponse = (props) => {
-  const { response } = props;
+export const ErrorResponse = () => {
+  const response = useAppSelector(selectResponse);
   return (
     <div className="error-response-wrapper">
       <div>Could not send request</div>
@@ -13,7 +14,3 @@ export const ErrorResponse = (props) => {
     </div>
   );
 };
-
-ErrorResponse.propTypes = {
-  response: propTypes.object.isRequired,
-};
diff --git a/webview/components/ErrorResponseTab/styles.css b/webview/features/response/ErrorResponse/styles.css
similarity index 100%
rename from webview/components/ErrorResponseTab/styles.css
rename to webview/features/response/ErrorResponse/styles.css
diff --git a/webview/components/ResponseWindow/index.tsx b/webview/features/response/Response/index.tsx
similarity index 72%
rename from webview/components/ResponseWindow/index.tsx
rename to webview/features/response/Response/index.tsx
index 942769a..f139686 100644
--- a/webview/components/ResponseWindow/index.tsx
+++ b/webview/features/response/Response/index.tsx
@@ -1,24 +1,29 @@
 import * as React from "react";
-import * as propTypes from "prop-types";
-import { Editor } from "../../shared/Editor";
+import { Editor } from "../../../shared/Editor";
 import "./styles.css";
-import { responseViews } from "../../constants/response-views";
-import { supportedLangs } from "../../constants/supported-langs";
-import { InitialResponse } from "../InitialResponseTab";
-import { ErrorResponse } from "../ErrorResponseTab";
-import { Loader } from "../../shared/Loader";
+import { responseViews } from "../../../constants/response-views";
+import { supportedLangs } from "../../../constants/supported-langs";
+import { Default } from "../Default";
+import { ErrorResponse } from "../ErrorResponse";
+import { useAppSelector } from "../../../redux/hooks";
+import { selectResponse } from "../responseSlice";
 
-export const Response = (props) => {
-  const { response, loadingResponse } = props;
+export const Response = () => {
+  const response = useAppSelector(selectResponse);
   const [view, setView] = React.useState(responseViews[0].value);
   const [language, setLanguage] = React.useState(supportedLangs[0].value);
 
-  if (loadingResponse) {
-    return <Loader />;
+  if (response.loading) {
+    return (
+      <div className="loader-wrapper">
+        <div>Sending request ...</div>
+        <div className="loader" />
+      </div>
+    );
   } else if (response.initial) {
-    return <InitialResponse />;
+    return <Default />;
   } else if (response.error) {
-    return <ErrorResponse response={response} />;
+    return <ErrorResponse />;
   } else {
     return (
       <div className="response-window">
@@ -69,8 +74,3 @@ export const Response = (props) => {
     );
   }
 };
-
-Response.propTypes = {
-  response: propTypes.object.isRequired,
-  loadingResponse: propTypes.bool.isRequired,
-};
diff --git a/webview/components/ResponseWindow/styles.css b/webview/features/response/Response/styles.css
similarity index 53%
rename from webview/components/ResponseWindow/styles.css
rename to webview/features/response/Response/styles.css
index ab1f8cb..8a288c8 100644
--- a/webview/components/ResponseWindow/styles.css
+++ b/webview/features/response/Response/styles.css
@@ -72,3 +72,69 @@
 .select-res-lang:focus {
   outline: none;
 }
+
+.loader-wrapper {
+  border-top: var(--default-border-size) solid var(--border);
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--default-font-size);
+}
+
+.loader,
+.loader:before,
+.loader:after {
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation: load7 1.8s infinite ease-in-out;
+  animation: load7 1.8s infinite ease-in-out;
+}
+.loader {
+  color: var(--border);
+  position: relative;
+  text-indent: -9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+.loader:before,
+.loader:after {
+  content: "";
+  position: absolute;
+  top: 0;
+}
+.loader:before {
+  left: -3.5em;
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+.loader:after {
+  left: 3.5em;
+}
+@-webkit-keyframes load7 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0;
+  }
+}
+@keyframes load7 {
+  0%,
+  80%,
+  100% {
+    box-shadow: 0 2.5em 0 -1.3em;
+  }
+  40% {
+    box-shadow: 0 2.5em 0 0;
+  }
+}
diff --git a/webview/features/response/responseSlice.ts b/webview/features/response/responseSlice.ts
new file mode 100644
index 0000000..2ceabfa
--- /dev/null
+++ b/webview/features/response/responseSlice.ts
@@ -0,0 +1,35 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { RootState } from "../../redux/store";
+
+export interface ResponseState {
+  status?: number;
+  statusText?: string;
+  data?: string;
+  initial: boolean;
+  error?: Error;
+  loading?: boolean;
+}
+
+const initialState: ResponseState = { initial: true };
+
+const responseSlice = createSlice({
+  name: "response",
+  initialState,
+  reducers: {
+    responseUpdated(state, action: PayloadAction<ResponseState>) {
+      Object.assign(state, action.payload);
+      state.initial = false;
+      state.loading = false;
+    },
+    responseLoadingStarted(state) {
+      state.loading = true;
+    },
+  },
+});
+
+export const { responseUpdated, responseLoadingStarted } =
+  responseSlice.actions;
+
+export const selectResponse = (state: RootState) => state.response;
+
+export default responseSlice.reducer;
diff --git a/webview/index.tsx b/webview/index.tsx
index 794ecaf..5904e48 100644
--- a/webview/index.tsx
+++ b/webview/index.tsx
@@ -1,11 +1,15 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { Provider } from "react-redux";
+import { store } from "./redux/store";
 import "./index.css";
 import App from "./App";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>,
   document.getElementById("root")
 );
diff --git a/webview/pages/Postcode/index.tsx b/webview/pages/Postcode/index.tsx
index 89ffcb0..443780e 100644
--- a/webview/pages/Postcode/index.tsx
+++ b/webview/pages/Postcode/index.tsx
@@ -1,172 +1,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from "react";
-import * as propTypes from "prop-types";
 import "./styles.css";
-import vscode from "../../vscode";
 import { RequestBar } from "../../components/RequestBar";
 import { RequestOptionsTab } from "../../components/RequestOptionsBar";
 import { RequestOptionsWindow } from "../../components/RequestOptionsWindow";
-import { Response } from "../../components/ResponseWindow";
+import { Response } from "../../features/response/Response";
 import { requestOptions } from "../../constants/request-options";
-import { requestTypes } from "../../constants/request-types";
-import { defaultHeaders } from "../../constants/default-headers";
-import { authTypes } from "../../constants/auth-types";
-import { supportedLangs } from "../../constants/supported-langs";
-import { bodyTypes } from "../../constants/body-types";
 
-export const Postcode = (props) => {
-  const { response, setResponse, loadingResponse, setLoadingResponse } = props;
+export const Postcode = () => {
   const [selectedOption, setSelectedOption] = React.useState(
     requestOptions[0].value
   );
-  const [requestUrl, setRequestUrl] = React.useState("");
-  const [reqType, setReqType] = React.useState(requestTypes[0].value);
-  const [params, setParams]: any = React.useState([{}]);
-  const [headers, setHeaders] = React.useState(defaultHeaders);
-  const [body, setBody] = React.useState("");
-  const [formData, setFormData] = React.useState([{}]);
-  const [urlCoded, setUrlCoded] = React.useState([{}]);
-  const [binary, setBinary] = React.useState(new File([], "No file chosen"));
-  const [raw, setRaw] = React.useState("");
-  const [auth, setAuth] = React.useState({ selected: authTypes[0].value });
-  const [selectedBodyType, setSelectedBodyType] = React.useState(
-    bodyTypes[0].value
-  );
-  const [rawLanguage, setRawLanguage] = React.useState(supportedLangs[0].value);
-
-  /**
-   * temporarily using retainContextWhenHidden to retain state when hidden
-   * TODO: refactor with vscode.getState and vscode.setState
-   */
-  // const [initial, setIntial] = React.useState(false);
-
-  // React.useEffect(() => {
-  //   setTimeout(() => {
-  //     const prevState = vscode.getState();
-  //     if (prevState) {
-  //       setResponse(prevState.response);
-  //       setSelectedOption(prevState.selectedOption);
-  //       setRequestUrl(prevState.requestUrl);
-  //       setReqType(prevState.reqType);
-  //       setParams(prevState.params);
-  //       setHeaders(prevState.headers);
-  //       setBody(prevState.body);
-  //       setFormData(prevState.formData);
-  //       setUrlCoded(prevState.urlCoded);
-  //       setRaw(prevState.raw);
-  //       setSelectedBodyType(prevState.selectedBodyType);
-  //       setRawLanguage(prevState.rawLanguage);
-  //     }
-  //     setIntial(true);
-  //   }, 0);
-  // }, []);
-
-  // React.useEffect(() => {
-  //   if (initial) {
-  //     vscode.setState({
-  //       response,
-  //       selectedOption,
-  //       requestUrl,
-  //       reqType,
-  //       params,
-  //       headers,
-  //       body,
-  //       formData,
-  //       urlCoded,
-  //       raw,
-  //       selectedBodyType,
-  //       rawLanguage,
-  //     });
-  //   }
-  // }, [
-  //   response,
-  //   selectedOption,
-  //   requestUrl,
-  //   reqType,
-  //   params,
-  //   headers,
-  //   body,
-  //   formData,
-  //   urlCoded,
-  //   raw,
-  //   selectedBodyType,
-  //   rawLanguage,
-  //   initial,
-  // ]);
-
-  React.useEffect(() => {
-    let index = requestUrl.indexOf("?");
-    index = index == -1 ? requestUrl.length : index;
-
-    const searchParams = new URLSearchParams(
-      params
-        .filter(({ checked }) => checked)
-        .map(({ key, value }) => [key || "", value || ""])
-    ).toString();
-
-    setRequestUrl(
-      requestUrl.slice(0, index) + (searchParams ? `?${searchParams}` : "")
-    );
-  }, [params]);
 
   return (
     <div className="request-wrapper">
-      <RequestBar
-        setLoadingResponse={setLoadingResponse}
-        requestUrl={requestUrl}
-        setRequestUrl={setRequestUrl}
-        setReqType={setReqType}
-        sendRequest={() =>
-          vscode.postMessage({
-            reqType,
-            requestUrl,
-            headers,
-            body,
-            auth,
-            selectedBodyType,
-            rawLanguage,
-          })
-        }
-      />
+      <RequestBar />
       <div className="request-options-wrapper">
         <RequestOptionsTab
           selected={selectedOption}
           setSelected={setSelectedOption}
-          headers={headers}
-        />
-        <RequestOptionsWindow
-          selected={selectedOption}
-          headers={headers}
-          setHeaders={setHeaders}
-          params={params}
-          setParams={setParams}
-          setBody={setBody}
-          auth={auth}
-          setAuth={setAuth}
-          formData={formData}
-          setFormData={setFormData}
-          urlCoded={urlCoded}
-          setUrlCoded={setUrlCoded}
-          binary={binary}
-          setBinary={setBinary}
-          raw={raw}
-          setRaw={setRaw}
-          selectedBodyType={selectedBodyType}
-          setSelectedBodyType={setSelectedBodyType}
-          rawLanguage={rawLanguage}
-          setRawLanguage={setRawLanguage}
         />
+        <RequestOptionsWindow selected={selectedOption} />
       </div>
       <div className="response-wrapper">
-        <Response response={response} loadingResponse={loadingResponse} />
+        <Response />
       </div>
     </div>
   );
 };
-
-Postcode.propTypes = {
-  response: propTypes.any.isRequired,
-  setResponse: propTypes.func.isRequired,
-  loadingResponse: propTypes.bool.isRequired,
-  setLoadingResponse: propTypes.func.isRequired,
-};
diff --git a/webview/redux/hooks.ts b/webview/redux/hooks.ts
new file mode 100644
index 0000000..36b5ea2
--- /dev/null
+++ b/webview/redux/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import type { RootState, AppDispatch } from "./store";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/webview/redux/store.ts b/webview/redux/store.ts
new file mode 100644
index 0000000..88e0b81
--- /dev/null
+++ b/webview/redux/store.ts
@@ -0,0 +1,27 @@
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit";
+import requestAuthReducer from "../features/requestAuth/requestAuthSlice";
+import requestBodyReducer from "../features/requestBody/requestBodySlice";
+import requestHeaderReducer from "../features/requestHeader/requestHeaderSlice";
+import requestMethodReducer from "../features/requestMethod/requestMethodSlice";
+import requestUrlReducer from "../features/requestUrl/requestUrlSlice";
+import responseReducer from "../features/response/responseSlice";
+
+export const store = configureStore({
+  reducer: {
+    requestAuth: requestAuthReducer,
+    requestBody: requestBodyReducer,
+    requestHeader: requestHeaderReducer,
+    requestMethod: requestMethodReducer,
+    requestUrl: requestUrlReducer,
+    response: responseReducer,
+  },
+});
+
+export type AppDispatch = typeof store.dispatch;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;
diff --git a/webview/shared/KeyValueTable/index.tsx b/webview/shared/KeyValueTable/index.tsx
index 8f4c4dc..9bfbd21 100644
--- a/webview/shared/KeyValueTable/index.tsx
+++ b/webview/shared/KeyValueTable/index.tsx
@@ -1,154 +1,138 @@
 import * as React from "react";
-import "./styles.css";
-import { keyValueTable } from "../../constants/key-value-table";
 import * as propTypes from "prop-types";
 import { FaTrashAlt } from "react-icons/fa";
+import "./styles.css";
+
+export const KeyValueRow = (props) => {
+  const {
+    itemKey,
+    itemValue,
+    itemDescription,
+    itemDisabled,
+    actions,
+    onDelete,
+    onChange,
+  } = props;
 
-const KeyValueRow = (props) => {
-  const { id, data, setData } = props;
   return (
-    <div className="kv-row-wrapper">
-      <div className="kv-row-iwc-wrapper">
-        <div className="checkbox-wrapper">
+    <tr className={itemDisabled ? "kv-disabled" : null}>
+      <td className="kv-action-cell">
+        {actions && (
           <input
             type="checkbox"
-            className="input-checkbox"
-            checked={data[id].checked || false}
+            checked={!itemDisabled}
             onChange={(e) =>
-              setData([
-                ...data.slice(0, id),
-                { ...data[id], checked: e.currentTarget.checked },
-                ...data.slice(id + 1),
-              ])
+              onChange({
+                key: itemKey,
+                value: itemValue,
+                description: itemDescription,
+                disabled: !e.target.checked,
+              })
             }
           />
-        </div>
+        )}
+      </td>
+      <td>
         <input
-          type="text"
-          id="tr-input-key"
-          name="tr-input-key"
+          className="kv-input"
           placeholder="Key"
-          autoComplete="off"
-          value={data[id].key || ""}
+          value={itemKey}
           onChange={(e) =>
-            setData([
-              ...data.slice(0, id),
-              {
-                ...data[id],
-                key: e.target.value,
-                checked:
-                  data[id].checked === undefined ? true : data[id].checked,
-              },
-              ...data.slice(id + 1),
-            ])
-          }
-          className={
-            data[id].checked === false
-              ? "kv-row-iwc kv-row-input-unchecked"
-              : "kv-row-iwc"
+            onChange({
+              key: e.target.value,
+              value: itemValue,
+              description: itemDescription,
+              disabled: itemDisabled,
+            })
           }
         />
-      </div>
-      <input
-        type="text"
-        id="tr-input-value"
-        name="tr-input-value"
-        placeholder="Value"
-        autoComplete="off"
-        value={data[id].value || ""}
-        onChange={(e) =>
-          setData([
-            ...data.slice(0, id),
-            {
-              ...data[id],
+      </td>
+      <td>
+        <input
+          className="kv-input"
+          placeholder="Value"
+          value={itemValue}
+          onChange={(e) =>
+            onChange({
+              key: itemKey,
               value: e.target.value,
-              checked: data[id].checked === undefined ? true : data[id].checked,
-            },
-            ...data.slice(id + 1),
-          ])
-        }
-        className={
-          data[id].checked === false
-            ? "kv-row-input kv-row-input-unchecked"
-            : "kv-row-input"
-        }
-      />
-      <div className="kv-row-iwt-wrapper">
+              description: itemDescription,
+              disabled: itemDisabled,
+            })
+          }
+        />
+      </td>
+      <td>
         <input
-          type="text"
-          id="tr-input-desc"
-          name="tr-input-desc"
-          autoComplete="off"
+          className="kv-input"
           placeholder="Description"
-          value={data[id].desc || ""}
+          value={itemDescription}
           onChange={(e) =>
-            setData([
-              ...data.slice(0, id),
-              {
-                ...data[id],
-                desc: e.target.value,
-                checked:
-                  data[id].checked === undefined ? true : data[id].checked,
-              },
-              ...data.slice(id + 1),
-            ])
-          }
-          className={
-            data[id].checked === false
-              ? "kv-row-iwt kv-row-input-unchecked"
-              : "kv-row-iwt"
+            onChange({
+              key: itemKey,
+              value: itemValue,
+              description: e.target.value,
+              disabled: itemDisabled,
+            })
           }
         />
-        <div className="trash-icon-wrapper">
-          <FaTrashAlt
-            className="trash-icon"
-            onClick={() =>
-              data.length !== 1 &&
-              setData(data.filter((item, idx) => idx != id))
-            }
-          />
-        </div>
-      </div>
-    </div>
+      </td>
+      <td className="kv-action-cell">
+        {actions && (
+          <FaTrashAlt className="kv-delete-button" onClick={onDelete} />
+        )}
+      </td>
+    </tr>
   );
 };
 
 export const KeyValueTable = (props) => {
-  const { data, setData } = props;
-
-  React.useEffect(() => {
-    if (
-      data[data.length - 1].key ||
-      data[data.length - 1].value ||
-      data[data.length - 1].desc
-    ) {
-      setData([...data, {}]);
-    }
-  }, [data]);
+  const { data, onRowUpdate, onRowAdd, onRowDelete } = props;
 
   return (
-    <div className="kv-table-wrapper">
-      <div className="kv-heading-wrapper">
-        {keyValueTable.map((item) => (
-          <div className="kv-table-heading" key={item.heading}>
-            {item.heading}
-          </div>
+    <table className="kv-table">
+      <thead>
+        <tr>
+          <th></th>
+          <th className="kv-heading-cell">KEY</th>
+          <th className="kv-heading-cell">VALUE</th>
+          <th className="kv-heading-cell">DESCRIPTION</th>
+          <th></th>
+        </tr>
+      </thead>
+      <tbody>
+        {[...data, {}].map(({ key, value, description, disabled }, idx) => (
+          <KeyValueRow
+            itemKey={key || ""}
+            itemValue={value || ""}
+            itemDescription={description || ""}
+            itemDisabled={disabled || false}
+            onDelete={() => onRowDelete(idx)}
+            onChange={(item) =>
+              idx === data.length ? onRowAdd(item) : onRowUpdate(idx, item)
+            }
+            key={idx}
+            actions={idx !== data.length}
+          />
         ))}
-      </div>
-      {data.map((item, idx) => (
-        <KeyValueRow key={idx} data={data} setData={setData} id={idx} />
-      ))}
-    </div>
+      </tbody>
+    </table>
   );
 };
 
 KeyValueTable.propTypes = {
   data: propTypes.array.isRequired,
-  setData: propTypes.func.isRequired,
+  onRowDelete: propTypes.func.isRequired,
+  onRowAdd: propTypes.func.isRequired,
+  onRowUpdate: propTypes.func.isRequired,
 };
 
 KeyValueRow.propTypes = {
-  id: propTypes.number.isRequired,
-  data: propTypes.array.isRequired,
-  setData: propTypes.func.isRequired,
+  itemKey: propTypes.string.isRequired,
+  itemValue: propTypes.string.isRequired,
+  itemDescription: propTypes.string.isRequired,
+  itemDisabled: propTypes.bool.isRequired,
+  actions: propTypes.bool.isRequired,
+  onChange: propTypes.func.isRequired,
+  onDelete: propTypes.func.isRequired,
 };
diff --git a/webview/shared/KeyValueTable/styles.css b/webview/shared/KeyValueTable/styles.css
index 9e96649..ad577da 100644
--- a/webview/shared/KeyValueTable/styles.css
+++ b/webview/shared/KeyValueTable/styles.css
@@ -1,108 +1,47 @@
-.kv-table-wrapper {
-  border-top: var(--default-border-size) solid var(--border);
-  border-left: var(--default-border-size) solid var(--border);
-  margin-top: 15px;
+.kv-table {
+  border-collapse: collapse;
+  width: 100%;
 }
 
-.kv-heading-wrapper,
-.kv-row-wrapper {
-  display: flex;
+.kv-table,
+td,
+th {
+  border: var(--default-border-size) solid var(--border);
 }
 
-.kv-table-heading {
-  flex: 1;
+th,
+.kv-input {
   color: var(--default-text);
   padding: 10px 12px;
-  font-weight: 700;
-  border: 0;
-  border-bottom: var(--default-border-size) solid var(--border);
-  border-right: var(--default-border-size) solid var(--border);
-  font-size: var(--small-font-size);
 }
 
-.kv-row-input {
-  flex: 1;
-  color: var(--default-text);
-  padding: 10px 0px 10px 12px;
-  border: 0;
-  border-bottom: var(--default-border-size) solid var(--border);
-  border-right: var(--default-border-size) solid var(--border);
-  background-color: transparent;
-  font-size: var(--default-font-size);
-}
-.kv-row-input:focus {
-  outline: none;
+th {
+  text-align: left;
+  font-weight: 700;
+  font-size: var(--small-font-size);
 }
 
-.kv-row-iwc-wrapper {
-  flex: 1;
-  padding-left: 12px;
-  display: flex;
-  border-bottom: var(--default-border-size) solid var(--border);
-  border-right: var(--default-border-size) solid var(--border);
+.kv-action-cell {
+  text-align: center;
+  width: 30px;
 }
 
-.kv-row-iwc {
-  flex: 1;
+.kv-input {
+  box-sizing: border-box;
+  width: 100%;
   border: 0;
-  padding: 10px 12px;
-  color: var(--default-text);
   background-color: transparent;
   font-size: var(--default-font-size);
 }
-.kv-row-iwc:focus {
+
+.kv-input:focus {
   outline: none;
 }
 
-.kv-row-input-unchecked {
+.kv-disabled .kv-input {
   color: var(--input-field-unchecked);
 }
 
-.checkbox-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-right: 12px;
-}
-
-.trash-icon {
-  color: var(--default-text-light);
+.kv-delete-button {
   cursor: pointer;
 }
-
-.kv-row-iwt-wrapper {
-  flex: 1;
-  padding-right: 12px;
-  display: flex;
-  border-bottom: var(--default-border-size) solid var(--border);
-  border-right: var(--default-border-size) solid var(--border);
-}
-
-.kv-row-iwt {
-  flex: 1;
-  border: 0;
-  padding: 10px 12px;
-  color: var(--default-text);
-  background-color: transparent;
-  font-size: var(--default-font-size);
-}
-.kv-row-iwt:focus {
-  outline: none;
-}
-
-.trash-icon-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-left: 12px;
-}
-
-.input-checkbox {
-  outline: none;
-}
-.input-checkbox:checked {
-  outline: none;
-}
-.input-checkbox:focus {
-  outline: none;
-}
diff --git a/webview/shared/Loader/index.tsx b/webview/shared/Loader/index.tsx
deleted file mode 100644
index 4992bdf..0000000
--- a/webview/shared/Loader/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import * as React from "react";
-import "./styles.css";
-
-export const Loader = () => {
-  return (
-    <div className="loader-wrapper">
-      <div>Sending request ...</div>
-      <div className="loader" />
-    </div>
-  );
-};
diff --git a/webview/shared/Loader/styles.css b/webview/shared/Loader/styles.css
deleted file mode 100644
index 192b27c..0000000
--- a/webview/shared/Loader/styles.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.loader-wrapper {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-size: var(--default-font-size);
-}
-
-.loader,
-.loader:before,
-.loader:after {
-  border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-  -webkit-animation: load7 1.8s infinite ease-in-out;
-  animation: load7 1.8s infinite ease-in-out;
-}
-.loader {
-  color: var(--border);
-  position: relative;
-  text-indent: -9999em;
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  transform: translateZ(0);
-  -webkit-animation-delay: -0.16s;
-  animation-delay: -0.16s;
-}
-.loader:before,
-.loader:after {
-  content: "";
-  position: absolute;
-  top: 0;
-}
-.loader:before {
-  left: -3.5em;
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-.loader:after {
-  left: 3.5em;
-}
-@-webkit-keyframes load7 {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 2.5em 0 -1.3em;
-  }
-  40% {
-    box-shadow: 0 2.5em 0 0;
-  }
-}
-@keyframes load7 {
-  0%,
-  80%,
-  100% {
-    box-shadow: 0 2.5em 0 -1.3em;
-  }
-  40% {
-    box-shadow: 0 2.5em 0 0;
-  }
-}
diff --git a/yarn.lock b/yarn.lock
index 3da5c6d..c29f3d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -896,7 +896,7 @@
     "@babel/plugin-transform-react-jsx-development" "^7.12.17"
     "@babel/plugin-transform-react-pure-annotations" "^7.12.1"
 
-"@babel/runtime@^7.8.4":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
   integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
@@ -975,6 +975,16 @@
     "@nodelib/fs.scandir" "2.1.4"
     fastq "^1.6.0"
 
+"@reduxjs/toolkit@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.5.1.tgz#05daa2f6eebc70dc18cd98a90421fab7fa565dc5"
+  integrity sha512-PngZKuwVZsd+mimnmhiOQzoD0FiMjqVks6ituO1//Ft5UEX5Ca9of13NEjo//pU22Jk7z/mdXVsmDfgsig1osA==
+  dependencies:
+    immer "^8.0.1"
+    redux "^4.0.0"
+    redux-thunk "^2.3.0"
+    reselect "^4.0.0"
+
 "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
@@ -1112,6 +1122,14 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hoist-non-react-statics@^3.3.0":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
 "@types/json-schema@*", "@types/json-schema@^7.0.3", "@types/json-schema@^7.0.6":
   version "7.0.7"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
@@ -1159,6 +1177,16 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-redux@^7.1.16":
+  version "7.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.16.tgz#0fbd04c2500c12105494c83d4a3e45c084e3cb21"
+  integrity sha512-f/FKzIrZwZk7YEO9E1yoxIuDNRiDducxkFlkw/GNMGEnK9n4K8wJzlJBghpSuOVDgEUHoDkDF7Gi9lHNQR4siw==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
 "@types/react@*", "@types/react@^17.0.5":
   version "17.0.5"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
@@ -1513,6 +1541,11 @@ array-union@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
+array-uniq@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
+  integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=
+
 array.prototype.flatmap@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz#94cfd47cc1556ec0747d97f7c7738c58122004c9"
@@ -1571,6 +1604,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+base64-js@^1.3.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
+
 big-integer@^1.6.17:
   version "1.6.48"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.48.tgz#8fd88bd1632cba4a1c8c3e3d7159f08bb95b4b9e"
@@ -1645,6 +1683,14 @@ buffer-indexof-polyfill@~1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-indexof-polyfill/-/buffer-indexof-polyfill-1.0.2.tgz#d2732135c5999c64b277fcf9b1abe3498254729c"
   integrity sha512-I7wzHwA3t1/lwXQh+A5PbNvJxgfo5r3xulgpYDB5zckTu/Z9oUK9biouBKQUjEqzaz3HnAT6TYoovmE+GqSf7A==
 
+buffer@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/buffer/-/buffer-6.0.3.tgz#2ace578459cc8fbe2a70aaa8f52ee63b6a74c6c6"
+  integrity sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==
+  dependencies:
+    base64-js "^1.3.1"
+    ieee754 "^1.2.1"
+
 buffers@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/buffers/-/buffers-0.1.1.tgz#b24579c3bed4d6d396aeee6d9a8ae7f5482ab7bb"
@@ -1680,7 +1726,7 @@ chainsaw@~0.1.0:
   dependencies:
     traverse ">=0.3.0 <0.4"
 
-chalk@^2.0.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1697,6 +1743,11 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+charset@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/charset/-/charset-1.0.1.tgz#8d59546c355be61049a8fa9164747793319852bd"
+  integrity sha512-6dVyOOYjpfFcL1Y4qChrAoQLRHvj2ziyhcm0QJlhOcAhykL/k1kTUPbeo+87MNRTRdk2OIIsIXbuF3x2wi5EXg==
+
 chokidar@3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
@@ -1961,7 +2012,7 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
@@ -1971,7 +2022,14 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
-domutils@^1.7.0:
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
+domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
   integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
@@ -2025,6 +2083,11 @@ enquirer@^2.3.5:
   dependencies:
     ansi-colors "^4.1.1"
 
+entities@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55"
@@ -2112,6 +2175,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-html@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+
 escape-string-regexp@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
@@ -2283,6 +2351,11 @@ execa@^5.0.0:
     signal-exit "^3.0.3"
     strip-final-newline "^2.0.0"
 
+faker@5.5.3:
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-5.5.3.tgz#c57974ee484431b25205c2c8dc09fda861e51e0e"
+  integrity sha512-wLTv2a28wjUyWkbnX7u/ABZBkUkIF2fCd73V6P2oFqEGEktDfzWx4UxrSqtPRw0xPRAcjeAOIiJWqZm3pP4u3g==
+
 fast-deep-equal@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
@@ -2342,6 +2415,11 @@ file-loader@^6.2.0:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-type@3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
+  integrity sha1-JXoHg4TR24CHvESdEH1SpSZyuek=
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -2551,6 +2629,25 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+htmlparser2@^3.10.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
 http-proxy-agent@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a"
@@ -2560,6 +2657,11 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
+http-reasons@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/http-reasons/-/http-reasons-0.1.0.tgz#a953ca670078669dde142ce899401b9d6e85d3b4"
+  integrity sha1-qVPKZwB4Zp3eFCzomUAbnW6F07Q=
+
 https-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
@@ -2573,11 +2675,23 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
+iconv-lite@0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
+  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
   integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
 
+ieee754@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
+  integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
+
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
@@ -2588,6 +2702,11 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+immer@^8.0.1:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.4.tgz#3a21605a4e2dded852fb2afd208ad50969737b7a"
+  integrity sha512-jMfL18P+/6P6epANRvRk6q8t+3gGhqsJ9EuJ25AXE+9bNTYtssvzeYbEd0mXRYWCmmXSIbnlpz6vd6iJlmGGGQ==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -2617,7 +2736,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@~2.0.0, inherits@~2.0.3:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.0, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -2863,6 +2982,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+liquid-json@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/liquid-json/-/liquid-json-0.3.1.tgz#9155a18136d8a6b2615e5f16f9a2448ab6b50eea"
+  integrity sha1-kVWhgTbYprJhXl8W+aJEira1Duo=
+
 listenercount@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/listenercount/-/listenercount-1.0.1.tgz#84c8a72ab59c4725321480c975e6508342e70937"
@@ -2906,12 +3030,32 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
+lodash.escaperegexp@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"
+  integrity sha1-ZHYsSGGAglGKw99Mz11YhtriA0c=
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
+  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
+  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
+
+lodash.mergewith@^4.6.1:
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
+  integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@^4.17.15, lodash@^4.17.21:
+lodash@4.17.21, lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -2937,6 +3081,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+marked@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.1.tgz#5e7ed7009bfa5c95182e4eb696f85e948cefcee3"
+  integrity sha512-5+/fKgMv2hARmMW7DOpykr2iLhl0NgjyELk5yn92iE7z8Se1IS9n3UsFm86hFXIkvMBmVxki8+ckcpjBeyo/hw==
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -2978,7 +3127,14 @@ mime-db@1.47.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.47.0.tgz#8cb313e59965d3c05cfbf898915a267af46a335c"
   integrity sha512-QBmA/G2y+IfeS4oktet3qRZ+P5kPhCKRXxXnQEudYqUaEioAU1/Lq2us3D/t1Jfo4hE9REQPrbB7K5sOczJVIw==
 
-mime-types@^2.1.27:
+mime-format@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/mime-format/-/mime-format-2.0.1.tgz#1274876d58bc803332427a515f5f7036e07b9413"
+  integrity sha512-XxU3ngPbEnrYnNbIX+lYSaYg0M01v6p2ntd2YaFksTu0vayaw5OJvbdRyWs07EYRlLED5qadUZ+xo+XhOvFhwg==
+  dependencies:
+    charset "^1.0.0"
+
+mime-types@2.1.30, mime-types@^2.1.27:
   version "2.1.30"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.30.tgz#6e7be8b4c479825f85ed6326695db73f9305d62d"
   integrity sha512-crmjA4bLtR8m9qLpHvgxSChT+XoSlZi8J4n/aIdn3z92e/U47Z0V/yl+Wh9W046GgFVAmoNR/fmdbZYcSSIUeg==
@@ -3106,6 +3262,11 @@ nth-check@^1.0.2:
   dependencies:
     boolbase "~1.0.0"
 
+number-is-nan@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
+  integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
+
 object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
@@ -3246,6 +3407,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+path-browserify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -3324,6 +3490,15 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss@^7.0.5:
+  version "7.0.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 postcss@^8.2.10:
   version "8.2.15"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
@@ -3333,6 +3508,33 @@ postcss@^8.2.10:
     nanoid "^3.1.23"
     source-map "^0.6.1"
 
+postman-collection@^3.6.11:
+  version "3.6.11"
+  resolved "https://registry.yarnpkg.com/postman-collection/-/postman-collection-3.6.11.tgz#b7932aa98d4334064d4601a042b66a5ebcdd8b58"
+  integrity sha512-22oIsOXwigdEGQJuTgS44964hj0/gN20E6/aiDoO469WiqqOk5JEEVQpW8zCDjsb9vynyk384JqE9zRyvfrH5A==
+  dependencies:
+    escape-html "1.0.3"
+    faker "5.5.3"
+    file-type "3.9.0"
+    http-reasons "0.1.0"
+    iconv-lite "0.6.2"
+    liquid-json "0.3.1"
+    lodash "4.17.21"
+    marked "2.0.1"
+    mime-format "2.0.1"
+    mime-types "2.1.30"
+    postman-url-encoder "3.0.1"
+    sanitize-html "1.20.1"
+    semver "7.3.5"
+    uuid "3.4.0"
+
+postman-url-encoder@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/postman-url-encoder/-/postman-url-encoder-3.0.1.tgz#a7434a169567c45f022dc435d46a86d71de6a8aa"
+  integrity sha512-dMPqXnkDlstM2Eya+Gw4MIGWEan8TzldDcUKZIhZUsJ/G5JjubfQPhFhVWKzuATDMvwvrWbSjF+8VmAvbu6giw==
+  dependencies:
+    punycode "^2.1.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -3374,7 +3576,12 @@ prr@~1.0.1:
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
   integrity sha1-0/wRS6BplaRexok/SEzrHXj19HY=
 
-punycode@^2.1.0:
+punycode@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
+  integrity sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=
+
+punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
@@ -3384,6 +3591,11 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+querystring@0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
+  integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
+
 queue-microtask@^1.2.2:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@@ -3410,11 +3622,23 @@ react-icons@^4.2.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
   integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
 
-react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-redux@^7.2.4:
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.4.tgz#1ebb474032b72d806de2e0519cd07761e222e225"
+  integrity sha512-hOQ5eOSkEJEXdpIKbnRyl04LhaWabkDPV+Ix97wqQX3T3d2NQ8DUblNXXtNMavc7DpswyQM6xfaN4HQDKNY2JA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/react-redux" "^7.1.16"
+    hoist-non-react-statics "^3.3.2"
+    loose-envify "^1.4.0"
+    prop-types "^15.7.2"
+    react-is "^16.13.1"
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
@@ -3436,6 +3660,15 @@ readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^3.1.1:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
+  integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -3450,6 +3683,18 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
+redux-thunk@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.3.0.tgz#51c2c19a185ed5187aaa9a2d08b666d0d6467622"
+  integrity sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==
+
+redux@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.0.tgz#eb049679f2f523c379f1aff345c8612f294c88d4"
+  integrity sha512-uI2dQN43zqLWCt6B/BMGRMY6db7TTY4qeHHfGeKb3EOhmOKjU3KdWvNLJyqaHRksv/ErdNH7cFZWg9jXtewy4g==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -3521,6 +3766,11 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
+reselect@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.0.0.tgz#f2529830e5d3d0e021408b246a206ef4ea4437f7"
+  integrity sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==
+
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -3580,7 +3830,7 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
-safe-buffer@^5.1.0:
+safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -3590,6 +3840,27 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+"safer-buffer@>= 2.1.2 < 3.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sanitize-html@1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-1.20.1.tgz#f6effdf55dd398807171215a62bfc21811bacf85"
+  integrity sha512-txnH8TQjaQvg2Q0HY06G6CDJLVYCpbnxrdO0WN8gjCKaU5J0KbyGYhZxx5QJg3WLZ1lB7XU9kDkfrCXUozqptA==
+  dependencies:
+    chalk "^2.4.1"
+    htmlparser2 "^3.10.0"
+    lodash.clonedeep "^4.5.0"
+    lodash.escaperegexp "^4.1.2"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.mergewith "^4.6.1"
+    postcss "^7.0.5"
+    srcset "^1.0.0"
+    xtend "^4.0.1"
+
 sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
@@ -3617,18 +3888,18 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
-  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
-
-semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
+semver@7.3.5, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   version "7.3.5"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.5.tgz#0b621c879348d8998e4b0e4be94b3f12e6018ef7"
   integrity sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
 serialize-javascript@5.0.1, serialize-javascript@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
@@ -3721,6 +3992,14 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+srcset@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/srcset/-/srcset-1.0.0.tgz#a5669de12b42f3b1d5e83ed03c71046fc48f41ef"
+  integrity sha1-pWad4StC87HV6D7QPHEEb8SPQe8=
+  dependencies:
+    array-uniq "^1.0.2"
+    number-is-nan "^1.0.0"
+
 stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
@@ -3772,6 +4051,13 @@ string.prototype.trimstart@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
+string_decoder@^1.1.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
+  dependencies:
+    safe-buffer "~5.2.0"
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -3825,6 +4111,13 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
+  integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^7.0.0, supports-color@^7.1.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
@@ -4036,7 +4329,15 @@ url-loader@^4.1.1:
     mime-types "^2.1.27"
     schema-utils "^3.0.0"
 
-util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+url@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
+  integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
+  dependencies:
+    punycode "1.3.2"
+    querystring "0.2.0"
+
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
@@ -4051,6 +4352,11 @@ util.promisify@~1.0.0:
     has-symbols "^1.0.1"
     object.getownpropertydescriptors "^2.1.0"
 
+uuid@3.4.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
+  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -4192,6 +4498,11 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
+xtend@^4.0.1:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
+
 y18n@^5.0.5:
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"