diff --git a/package.json b/package.json
index 285576e4c7d..f6c4685eab8 100644
--- a/package.json
+++ b/package.json
@@ -105,4 +105,4 @@
       "$root$": false
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx
new file mode 100644
index 00000000000..70aa82fce1c
--- /dev/null
+++ b/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField.tsx
@@ -0,0 +1,96 @@
+import React, { useContext, useEffect, useState } from "react";
+import { FieldTemplateProps } from "@rjsf/utils";
+import { BaseInputTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate";
+import { SelectWidget } from "@site/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget";
+import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.module.css";
+import { ParserOpenRPCContext } from "@site/src/components/ParserOpenRPC";
+import clsx from "clsx";
+
+export const ConditionalField = (props: FieldTemplateProps) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const [selectedTypeSchema, setSelectedTypeSchema] = useState(null);
+  const [isEditView, setIsEditView] = useState(false);
+  const { setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView } = useContext(ParserOpenRPCContext);
+  const { formData, schema, name, onChange } = props;
+  const listItems = schema?.anyOf ? schema?.anyOf : schema?.oneOf;
+  const checkForNullTypeSchema = (type) => type === "null";
+  const showComplexTypeView = () => {
+    setDrawerLabel(name);
+    setIsDrawerContentFixed(true);
+    setIsEditView(true);
+    setIsComplexTypeView(true);
+  }
+  const onDropdownOptionClick = (e) => {
+    const selectedSchema = listItems.find(({ title }) => title === e.target.dataset.value);
+    const isNullTypeSchema = checkForNullTypeSchema(selectedSchema?.type);
+    if (isNullTypeSchema) {
+      onChange(null);
+    } else {
+      setSelectedTypeSchema(listItems.find(({ title }) => title === e.target.dataset.value));
+      showComplexTypeView();
+    }
+    setIsOpened(false);
+  }
+  const selectWidgetProps = {
+    ...props,
+    schema: selectedTypeSchema,
+    label: name,
+    value: formData,
+    ...(selectedTypeSchema?.enum && {
+      options:{
+        enumOptions: selectedTypeSchema?.enum.map(item => ({ label: item, value: item }))
+      }
+    })
+  }
+  const baseInputProps = {
+    ...props,
+    schema: selectedTypeSchema
+  }
+
+  useEffect(() => {
+    if(!isComplexTypeView) {
+      setIsEditView(false);
+      setSelectedTypeSchema(null);
+    }
+  }, [isComplexTypeView])
+
+  return listItems?.length > 0 ? (
+    <>
+      <div className={styles.tableRow}>
+        <div className={styles.tableColumn}>
+          <label className={styles.tableColumnParam}>{name}</label>
+        </div>
+        <div className={styles.tableColumn}>
+          <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
+            {formData === undefined ? "" : String(formData)}
+            <span className={styles.tableColumnType}>
+              <span className={styles.dropdown} onClick={() => { setIsOpened(!isOpened); }}>
+                {schema?.anyOf ? "anyOf" : "oneOf"}
+                <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
+                <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
+              </span>
+              <ul className={clsx(styles.dropdownList, !isOpened && styles.dropdownListClosed)}>
+                {listItems?.map((listItem, index) => (
+                  <li
+                    className={styles.dropdownItem}
+                    key={index}
+                    onClick={onDropdownOptionClick}
+                    data-value={listItem.title}
+                  >
+                    {`${listItem.title}: ${listItem?.enum ? "enum" : listItem.type}`}
+                  </li>
+                ))}
+              </ul>
+            </span>
+          </div>
+        </div>
+      </div>
+      {isComplexTypeView && isEditView && selectedTypeSchema && selectedTypeSchema.type !== "null" ?
+        <div className={styles.tableComplexType}>
+          {selectedTypeSchema?.enum ? <SelectWidget {...selectWidgetProps} /> : <BaseInputTemplate {...baseInputProps} />}
+        </div>
+        : null
+      }
+    </>
+  ) : null;
+}
diff --git a/src/components/ParserOpenRPC/InteractiveBox/index.tsx b/src/components/ParserOpenRPC/InteractiveBox/index.tsx
index e65493999b2..3236bb53404 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/index.tsx
+++ b/src/components/ParserOpenRPC/InteractiveBox/index.tsx
@@ -1,30 +1,44 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import Form from "@rjsf/core";
 import clsx from "clsx";
-import { RJSFSchema, UiSchema, RegistryWidgetsType } from "@rjsf/utils";
+import {RJSFSchema, UiSchema, RegistryWidgetsType, RegistryFieldsType} from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 import $RefParser from "@apidevtools/json-schema-ref-parser";
 import { MethodExample, MethodParam, SchemaComponents } from "@site/src/components/ParserOpenRPC/interfaces";
 import styles from "./styles.module.css";
+import global from "../global.module.css";
 import { BaseInputTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate";
 import { ArrayFieldTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate";
+import { ConditionalField } from "@site/src/components/ParserOpenRPC/InteractiveBox/fields/ConditionalField";
 import { DropdownWidget } from "@site/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget";
+import { SelectWidget } from "@site/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget";
 import { Tooltip } from "@site/src/components/ParserOpenRPC/Tooltip";
 import { useColorMode } from "@docusaurus/theme-common";
+import { ParserOpenRPCContext } from "@site/src/components/ParserOpenRPC";
 
 interface InteractiveBoxProps {
   params: MethodParam[];
   components: SchemaComponents;
   examples: MethodExample[];
   onParamChange: (data) => void;
+  drawerLabel?: string | null
+  closeComplexTypeView?: () => void;
 }
 
-export default function InteractiveBox({ params, components, examples, onParamChange }: InteractiveBoxProps) {
+export default function InteractiveBox({
+   params,
+   components,
+   examples,
+   onParamChange,
+   drawerLabel,
+   closeComplexTypeView
+}:InteractiveBoxProps) {
   const [parsedSchema, setParsedSchema] = useState<RJSFSchema>(null);
   const [defaultFormData, setDefaultFormData] = useState<any>({});
   const [isFormReseted, setIsFormReseted] = useState(false);
   const formRef = useRef(null);
   const { colorMode } = useColorMode();
+  const { isComplexTypeView } = useContext(ParserOpenRPCContext);
 
   const defaultExampleFormData = examples ? Object.fromEntries(examples[0].params.map(({ name, value }) => [name, value])) : {};
   const schema: RJSFSchema = {
@@ -40,10 +54,20 @@ export default function InteractiveBox({ params, components, examples, onParamCh
     },
     "ui:widget": "checkbox",
   };
+  const templates = {
+    BaseInputTemplate,
+    ArrayFieldTemplate,
+    FieldErrorTemplate: () => null,
+    ErrorListTemplate: () => null,
+  }
   const widgets: RegistryWidgetsType = {
     CheckboxWidget: DropdownWidget,
+    SelectWidget: SelectWidget,
+  };
+  const fields: RegistryFieldsType = {
+    AnyOfField: ConditionalField,
+    OneOfField: ConditionalField,
   };
-  const log = (type) => console.log.bind(console, type);
   const handleResetForm = (e) => {
     e.preventDefault();
     setDefaultFormData(defaultExampleFormData);
@@ -76,8 +100,34 @@ export default function InteractiveBox({ params, components, examples, onParamCh
 
   const onChangeHandler = (data) => {
     onParamChange(data);
+    setDefaultFormData(data);
   };
 
+  const cloneAndSetNullIfExists = (obj, key) => {
+    if (typeof obj !== 'object' || obj === null) return obj;
+    const newObj = Array.isArray(obj) ? [] : {};
+    for (let prop in obj) {
+      if (obj.hasOwnProperty(prop)) {
+        if (prop === key) {
+          newObj[prop] = [];
+        } else if (typeof obj[prop] === 'object' && obj[prop] !== null) {
+          newObj[prop] = cloneAndSetNullIfExists(obj[prop], key);
+        } else {
+          newObj[prop] = obj[prop];
+        }
+      }
+    }
+    return newObj;
+  }
+
+  const handleCancelClick = () => {
+    if (drawerLabel) {
+      const upData = cloneAndSetNullIfExists(defaultFormData, drawerLabel);
+      setDefaultFormData(upData)
+    }
+    closeComplexTypeView();
+  }
+
   return parsedSchema ? (
     <>
       <div className={styles.tableHeadingRow}>
@@ -95,38 +145,40 @@ export default function InteractiveBox({ params, components, examples, onParamCh
         validator={validator}
         liveValidate
         noHtml5Validate
-        onChange={(data) => {
-          onChangeHandler(data.formData);
-          setDefaultFormData(data.formData);
-        }}
-        onSubmit={() => {log("submitted");}}
-        onError={log("errors")}
-        templates={{
-          BaseInputTemplate,
-          ArrayFieldTemplate,
-          FieldErrorTemplate: () => null,
-          ErrorListTemplate: () => null,
-        }}
+        onChange={(data) => { onChangeHandler(data.formData); }}
+        templates={templates}
         uiSchema={uiSchema}
         widgets={widgets}
         ref={formRef}
+        fields={fields}
       >
         <div className={clsx(styles.tableFooterRow, isLightTheme ? styles.tableFooterRowLight : styles.tableFooterRowDark)}>
-          <div className={styles.footerButtons}>
-            <Tooltip message="Reset fields" theme={isLightTheme ? "dark" : "light"}>
-              <button className={styles.footerButton} onClick={handleResetForm}>
+          <div className={clsx(styles.footerButtons, styles.footerButtonsLeft)}>
+            <Tooltip message="Reset fields">
+              <button className={styles.footerButtonLeft} onClick={handleResetForm}>
                 <img className={styles.footerButtonIcon} src="/img/icons/reset-icon.svg"/>
               </button>
             </Tooltip>
-            <Tooltip message="Clear fields" theme={isLightTheme ? "dark" : "light"}>
+            <Tooltip message="Clear fields">
               <button
-                className={styles.footerButton}
+                className={styles.footerButtonLeft}
                 onClick={handleClearForm}
               >
                 <img className={styles.footerButtonIcon} src="/img/icons/clear-icon.svg"/>
               </button>
             </Tooltip>
           </div>
+          {isComplexTypeView ?
+            <div className={clsx(styles.footerButtons)}>
+              <button className={clsx(global.secondaryBtn, styles.footerButtonRight, styles.footerButtonRightOutline)} onClick={handleCancelClick}>
+                Cancel
+              </button>
+              <button className={clsx(global.primaryBtn, styles.footerButtonRight)} onClick={closeComplexTypeView}>
+                Save
+              </button>
+            </div> :
+            null
+          }
         </div>
       </Form>
     </>
diff --git a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css
index f3aa2759774..5627e664e24 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/styles.module.css
+++ b/src/components/ParserOpenRPC/InteractiveBox/styles.module.css
@@ -26,10 +26,14 @@
   height: 100%;
   padding: 12px 16px 12px 12px;
   border-left: 4px solid transparent;
+  line-height: 28px;
 }
 .tableColumnParamFocused {
   border-left: 4px solid rgba(16, 152, 252, 1);
 }
+.tableColumnParamError {
+  border-left: 4px solid rgba(224, 100, 112, 1);
+}
 .tableColumn:first-child {
   border-right: 1px solid rgba(132, 140, 150, 1);
 }
@@ -40,9 +44,10 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
+  font-size: 14px;
 }
 .tableValueRowPadding {
-  padding: 12px 56px 12px 16px;
+  padding: 12px 72px 12px 16px;
 }
 .tableColumnType {
   display: flex;
@@ -56,26 +61,53 @@
   line-height: 24px;
   font-size: 14px;
 }
-.tableColumnTypeErrorIcon {
-  position: absolute;
-  right: 13px;
+.tableLabelIconError {
   width: 11px;
   height: 11px;
+  margin-left: 8px;
   background: url("/img/icons/error-icon.svg") no-repeat 50% 50%;
 }
-.chevronIcon {
+.tableColumnIcon {
   position: absolute;
   right: 13px;
   width: 11px;
   height: 11px;
-  background: url("/img/icons/chevron-icon.svg") no-repeat 50% 50%;
 }
-.chevronIcon:hover {
+.tableColumnIcon:hover {
   cursor: pointer;
 }
+.tableColumnIconRemove {
+  background: url("/img/icons/remove-icon.svg") no-repeat 50% 50%;
+}
+.chevronIcon {
+  background: url("/img/icons/chevron-icon.svg") no-repeat 50% 50%;
+  transition: 0.2s transform;
+}
 .chevronIconDown {
   transform: rotate(180deg);
 }
+.chevronIconRight {
+  transform: rotate(90deg);
+}
+.chevronIcon:hover {
+  cursor: pointer;
+}
+.deleteIcon {
+  position: absolute;
+  transform: translateY(-50%);
+  right: 12px;
+  width: 14px;
+  height: 14px;
+  margin-top: -1px;
+  cursor: pointer;
+  background: url("/img/icons/delete-icon.svg") no-repeat 50% 50%;
+}
+.deleteIconCentered {
+  top: 50%;
+}
+.deleteIconComplex {
+  top: 27px;
+}
 .dropdown {
   display: flex;
   align-items: center;
@@ -92,7 +124,7 @@
 .dropdownList {
   position: absolute;
   right: 0;
-  opacity: 1;
+  visibility: visible;
   list-style: none;
   border-radius: 10px;
   padding: 0;
@@ -100,19 +132,20 @@
   top: 35px;
   overflow: hidden;
   border: 1px solid rgba(132, 140, 150, 1);
-  transition: 0.4s opacity;
+  z-index: 2;
 }
 .dropdownListClosed {
-  opacity: 0;
+  visibility: hidden;
 }
 .dropdownList li + li {
   margin-top: 0;
 }
 .dropdownItem {
-  width: 102px;
+  width: 100%;
   padding: 16px;
   background-color: rgba(36, 39, 42, 1);
   color: #FFFFFF;
+  white-space: nowrap;
 }
 .dropdownItem:hover {
   background-color: rgba(20, 22, 24, 1);
@@ -124,7 +157,8 @@
 .tableFooterRow {
   position: fixed;
   display: flex;
-  padding: 21px 16px;
+  justify-content: space-between;
+  padding: 16px;
   width: 100%;
   bottom: 0;
 }
@@ -134,6 +168,33 @@
 .tableFooterRowLight {
   background-color: #F2F4F6;
 }
+.tableButton {
+  display: flex;
+  background: none;
+  border: none;
+}
+.tableButtonAddNewArray {
+  margin: 08px 0 8px 16px;
+  padding: 8px 0;
+  color: rgba(16, 152, 252, 1);
+}
+.tableButtonAddArrayItemName {
+  margin-left: 8px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.tableComplexType {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 332px;
+  background-color: #292A36;
+  overflow-y: scroll;
+  z-index: 1;
+}
+.tableComplexTypeItem {
+  position: relative;
+}
 .formControl {
   width: 100%;
   padding: 12px 72px 12px 16px;
@@ -165,10 +226,14 @@
 }
 .footerButtons {
   display: flex;
+}
+.footerButtonsLeft {
   width: 48px;
+  align-items: center;
   justify-content: space-between;
+  padding: 6px 0;
 }
-.footerButton {
+.footerButtonLeft {
   display: flex;
   width: 16px;
   height: 22px;
@@ -178,21 +243,22 @@
   border: none;
   border-radius: 0;
 }
-.footerButton:hover {
-  cursor: pointer;
+.footerButtonRight {
+  padding: 5px 16px!important;
+}
+.footerButtonRightOutline {
+  margin-right: 16px;
 }
 .footerButtonIcon {
   width: 100%;
   border-radius: 0;
 }
-
 .arrayParentRow {
   position: relative;
   width: 100%;
   height: 100%;
   padding: 12px 72px 12px 16px;
 }
-
 .arrayColumnType {
   position: absolute;
   top: 0;
@@ -205,13 +271,13 @@
   font-size: 14px;
   cursor: pointer;
 }
-
 .arrayFormDataWrap {
+  display: block;
+  max-width: 395px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
-
 .addItemBtnWrap {
   min-height: 52px;
   display: flex;
@@ -219,7 +285,6 @@
   padding: 12px;
   border-bottom: 1px solid rgba(132, 140, 150, 1);
 }
-
 .addItemBtn {
   display: flex;
   align-items: center;
@@ -232,7 +297,6 @@
   line-height: 1;
   cursor: pointer;
 }
-
 .addItemIcon {
   display: inline-flex;
   align-items: center;
@@ -246,7 +310,6 @@
   line-height: 1;
   margin-right: 10px;
 }
-
 .arrayItemIcon {
   position: absolute;
   top: 50%;
@@ -256,21 +319,8 @@
   line-height: 1;
   font-weight: bold;
 }
-
 .arrayItemRowWrap {
   position: relative;
   padding-left: 40px;
   border-bottom: 1px dashed #848C96;
 }
-
-.deleteIcon {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  right: 12px;
-  width: 14px;
-  height: 14px;
-  margin-top: -1px;
-  cursor: pointer;
-  background: url("/img/icons/delete-icon.svg") no-repeat 50% 50%;
-}
\ No newline at end of file
diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx
index b3fc3f982f1..b0e18bf64b7 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx
+++ b/src/components/ParserOpenRPC/InteractiveBox/templates/ArrayFieldTemplate.tsx
@@ -1,79 +1,114 @@
-import React from "react";
+import React, { useContext, useState } from "react";
 import { useCollapsible, Collapsible } from "@docusaurus/theme-common";
 import { ArrayFieldTemplateProps } from "@rjsf/utils";
 import { BaseInputTemplate } from "@site/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate";
-import clsx from "clsx";
 import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.module.css";
+import clsx from "clsx";
+import { ParserOpenRPCContext } from "@site/src/components/ParserOpenRPC";
 
-export const ArrayFieldTemplate = ({
-  title,
-  formData,
-  items,
-  canAdd,
-  onAddClick
-}: ArrayFieldTemplateProps) => {
+export const ArrayFieldTemplate = ({ items, canAdd, onAddClick, title, schema, formData, formContext }: ArrayFieldTemplateProps) => {
+  const [isComplexArrayEditView, setIsComplexArrayEditView] = useState(false);
+  const { setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView } = useContext(ParserOpenRPCContext);
   const { collapsed, toggleCollapsed } = useCollapsible({ initialState: true });
+  const itemsType = schema?.items?.type;
+  const isSimpleArray = itemsType === "string" || itemsType === "boolean" || itemsType === "number" || itemsType === "integer";
+  const addComplexArray = () => {
+    onAddClick();
+    setDrawerLabel(title);
+    setIsDrawerContentFixed(true);
+    setIsComplexArrayEditView(true);
+    setIsComplexTypeView(true);
+  }
+
   return (
-    <>
+    <div>
       <div className={styles.tableRow}>
         <div className={styles.tableColumn}>
-          <label className={styles.tableColumnParam}>
-            {title}
-          </label>
+          <label className={styles.tableColumnParam}>{title}</label>
         </div>
         <div className={styles.tableColumn}>
-          <div className={styles.arrayParentRow}>
+          <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
             <div className={styles.arrayFormDataWrap}>
               {JSON.stringify(formData, null, " ")}
             </div>
-            <span
-              className={styles.arrayColumnType}
-              onClick={toggleCollapsed}
-            >
-              array
-              <span className={clsx(styles.chevronIcon, collapsed && styles.chevronIconDown)}>
+            <span className={styles.tableColumnType} onClick={isSimpleArray ? toggleCollapsed : addComplexArray}>
+              <span className={styles.dropdown}>
+                {schema.type}
+                <span className={
+                  clsx(
+                    styles.tableColumnIcon,
+                    styles.chevronIcon,
+                    isSimpleArray ?
+                      collapsed && styles.chevronIconDown :
+                      styles.chevronIconRight
+                  )
+                }/>
               </span>
             </span>
           </div>
         </div>
       </div>
-      <Collapsible lazy collapsed={collapsed}>
-        <>
-          {items.map((el, i) => {
-            const props = {
-              ...el.children.props,
-              isArray: true
-            }
-            const { index, hasRemove, onDropIndexClick, schema } = el;
-            const isNumber = schema.type === "number" || schema.type === "integer";
-            return (
-              <div key={`${i}`} className={styles.arrayItemRowWrap} style={{ paddingRight: `${isNumber ? "25px" : "0"}` }}>
-                <span className={clsx(styles.addItemIcon, styles.arrayItemIcon)}>{i+1}</span>
-                <BaseInputTemplate {...props} />
-                {hasRemove && (
-                  <span
-                    onClick={onDropIndexClick(index)}
-                    className={styles.deleteIcon}
-                  >
+      {isComplexTypeView && isComplexArrayEditView && !isSimpleArray ?
+        <div className={styles.tableComplexType}>
+          {items.map(({ children, index, onDropIndexClick, hasRemove }) => (
+            <div className={styles.tableComplexTypeItem} key={index}>
+              {children}
+              {hasRemove && (
+                <span
+                  onClick={onDropIndexClick(index)}
+                  className={clsx(styles.deleteIcon, styles.deleteIconComplex)}
+                >
+                </span>
+              )}
+            </div>
+          ))}
+          {canAdd ?
+            <button className={clsx(styles.tableButton, styles.tableButtonAddNewArray)} onClick={onAddClick}>
+              <img src="/img/icons/plus-icon.svg" alt={`Add ${title}`} width="16px" height="16px" />
+              <span className={styles.tableButtonAddArrayItemName}>Add {title}</span>
+            </button> :
+            null
+          }
+        </div> :
+        <Collapsible lazy collapsed={collapsed}>
+          <>
+            {items.map((el, i) => {
+              const baseInputTemplateProps = {
+                ...el.children.props,
+                isArray: true,
+                value: formData,
+              }
+              const { index, hasRemove, onDropIndexClick, schema } = el;
+              const isNumber = schema.type === "number" || schema.type === "integer";
+              return (
+                <div key={`${i}`} className={styles.arrayItemRowWrap} style={{ paddingRight: `${isNumber ? "25px" : "0"}` }}>
+                  <span className={clsx(styles.addItemIcon, styles.arrayItemIcon)}>{i+1}</span>
+                  <BaseInputTemplate {...baseInputTemplateProps} />
+                  {hasRemove && (
+                    <span
+                      onClick={onDropIndexClick(index)}
+                      className={clsx(styles.deleteIcon, styles.deleteIconCentered)}
+                    >
                   </span>
-                )}
+                  )}
+                </div>
+              )
+            })}
+            {canAdd && (
+              <div className={styles.addItemBtnWrap}>
+                <button
+                  type="button"
+                  onClick={onAddClick}
+                  className={styles.addItemBtn}
+                >
+                  <span className={styles.addItemIcon}>+</span>
+                  Add array item
+                </button>
               </div>
-            )
-          })}
-          {canAdd && (
-            <div className={styles.addItemBtnWrap}>
-              <button
-                type="button"
-                onClick={onAddClick}
-                className={styles.addItemBtn}
-              >
-                <span className={styles.addItemIcon}>+</span>
-                Add array item
-              </button>
-            </div>
-          )}
-        </>
-      </Collapsible>
-    </>
+            )}
+          </>
+        </Collapsible>
+      }
+    </div>
   );
-};
+}
diff --git a/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx b/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx
index 358aadf6142..be8eef24c90 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx
+++ b/src/components/ParserOpenRPC/InteractiveBox/templates/BaseInputTemplate.tsx
@@ -10,18 +10,18 @@ interface ExtendedInputProps extends BaseInputTemplateProps {
 }
 
 export const BaseInputTemplate = ({
-  schema,
-  id,
-  name,
-  value = "",
-  disabled,
-  onChange,
-  rawErrors,
-  hideError,
-  required,
-  formContext,
-  isArray
-}: ExtendedInputProps) => {
+    schema,
+    id,
+    name,
+    value = "",
+    disabled,
+    onChange,
+    rawErrors,
+    hideError,
+    required,
+    formContext,
+    isArray
+  }: ExtendedInputProps) => {
   const isNumber = schema.type === "number" || schema.type === "integer";
   const [isFocused, setIsFocused] = useState(false);
   const [inputValue, setInputValue] = useState(isNumber ? 0 : "");
@@ -52,8 +52,9 @@ export const BaseInputTemplate = ({
     <div className={isArray ? styles.arrayItemRow : styles.tableRow}>
       {!isArray && (
         <div className={styles.tableColumn}>
-          <label className={clsx(styles.tableColumnParam, isFocused && styles.tableColumnParamFocused)}>
-            {name}{required ? "*" : ""}
+          <label className={clsx(styles.tableColumnParam, isFocused && styles.tableColumnParamFocused, hasErrors && styles.tableColumnParamError)}>
+            <span>{name}{required && "*"}</span>
+            {hasErrors && !isNumber ? <span className={styles.tableLabelIconError} /> : null}
           </label>
         </div>
       )}
@@ -73,15 +74,14 @@ export const BaseInputTemplate = ({
             />
             <span className={styles.tableColumnType}>
               {schema.type}
-              {hasErrors && !isNumber ? <span className={styles.tableColumnTypeErrorIcon} /> : null}
               {isNumber ? (
                 <>
                   <span
-                    className={clsx(styles.chevronIcon, styles.formControlNumberUp)}
+                    className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.formControlNumberUp)}
                     onClick={() => { onInputNumberChange(Number((+inputValue || 0) + 1)); }}
                   />
                   <span
-                    className={clsx(styles.chevronIcon, styles.chevronIconDown, styles.formControlNumberDown)}
+                    className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.chevronIconDown, styles.formControlNumberDown)}
                     onClick={() => { inputValue >= 1 && onInputNumberChange(Number((+inputValue || 0) - 1)); }}
                   />
                 </>
diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx
index aa0a50afac0..0c7e3842920 100644
--- a/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx
+++ b/src/components/ParserOpenRPC/InteractiveBox/widgets/DropdownWidget.tsx
@@ -17,6 +17,7 @@ export const DropdownWidget = ({ name, value, onChange, schema, options }: Widge
           <span className={styles.tableColumnType}>
             <span className={styles.dropdown} onClick={() => { setIsOpened(!isOpened); }}>
               {schema.type}
+              <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
               <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
             </span>
             <ul className={clsx(styles.dropdownList, !isOpened && styles.dropdownListClosed)}>
diff --git a/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx
new file mode 100644
index 00000000000..029e6b3e912
--- /dev/null
+++ b/src/components/ParserOpenRPC/InteractiveBox/widgets/SelectWidget.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { WidgetProps } from "@rjsf/utils";
+import clsx from "clsx";
+import styles from "@site/src/components/ParserOpenRPC/InteractiveBox/styles.module.css";
+
+export const SelectWidget = ({ value, onChange, schema, options, label }: WidgetProps) => {
+  const [isOpened, setIsOpened] = useState(false);
+  const emptyValue = value === undefined || !options?.enumOptions.some(({ label }) => label === value);
+  
+  return (
+    <div className={styles.tableRow}>
+      <div className={styles.tableColumn}>
+        <label className={styles.tableColumnParam}>{label}</label>
+      </div>
+      <div className={styles.tableColumn}>
+        <div className={clsx(styles.tableValueRow, styles.tableValueRowPadding)}>
+          {emptyValue ? "" : String(value)}
+          <span className={styles.tableColumnType}>
+            <span className={styles.dropdown} onClick={() => { setIsOpened(!isOpened); }}>
+              {schema?.enum ? 'enum' : schema?.type}
+              <span className={clsx(styles.tableColumnIcon, styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
+              <span className={clsx(styles.chevronIcon, styles.dropdownChevronIcon, !isOpened && styles.chevronIconDown)}/>
+            </span>
+            <ul className={clsx(styles.dropdownList, !isOpened && styles.dropdownListClosed)}>
+              {options?.enumOptions?.map(({ label, value }, index) => (
+                <li 
+                  className={styles.dropdownItem}
+                  key={index}
+                  onClick={() => {
+                    onChange(value);
+                    setIsOpened(false);
+                  }}
+                >
+                  {String(label)}
+                </li>
+              ))}
+            </ul>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ParserOpenRPC/ModalDrawer/index.tsx b/src/components/ParserOpenRPC/ModalDrawer/index.tsx
index cd70e29b3c1..16208dab86a 100644
--- a/src/components/ParserOpenRPC/ModalDrawer/index.tsx
+++ b/src/components/ParserOpenRPC/ModalDrawer/index.tsx
@@ -1,30 +1,45 @@
-import React, { useState, useEffect } from "react";
+import React, {useState, useEffect, useRef} from "react";
 import clsx from "clsx";
 import { useColorMode } from "@docusaurus/theme-common";
 import styles from "./styles.module.css";
 
 interface ModalDrawerProps {
-  title: string;
+  title: string | React.ReactNode;
   isOpen: boolean;
   onClose: () => void;
   children: React.ReactNode;
+  isContentFixed?: boolean;
+  headerLabel?: string | null;
 }
 
-export const ModalDrawer = ({ title, isOpen, onClose, children }: ModalDrawerProps) => {
+export const ModalDrawer = ({ title, isOpen, onClose, children, isContentFixed = false, headerLabel }: ModalDrawerProps) => {
   const [showModal, setShowModal] = useState(isOpen);
+  const contentRef = useRef(null);
   const { colorMode } = useColorMode();
 
   useEffect(() => {
     setShowModal(isOpen);
   }, [isOpen]);
 
+  useEffect(() => {
+    if (isContentFixed && contentRef?.current) {
+      contentRef?.current?.scrollTo(0, 0);
+    }
+  }, [isContentFixed]);
+
   return (
     <div className={clsx(styles.modalContainer, showModal && styles.modalContainerOpen)}>
       <div className={clsx(styles.modalHeader, colorMode === "light" && styles.modalHeaderLight)}>
-        <span className={styles.modalTitle}>{title}</span>
+        <div className={styles.modalHeaderLabels}>
+          <span className={styles.modalTitle}>{title}</span>
+          {headerLabel ? <span className={styles.modalHeaderLabel}>{headerLabel}</span> : null}
+        </div>
         <button className={styles.modalCloseBtn} onClick={onClose}>&times;</button>
       </div>
-      <div className={styles.modalContent}>
+      <div
+        className={clsx(styles.modalContent, isContentFixed ? styles.modalContentFixed : styles.modalContentScrolled)}
+        ref={contentRef}
+      >
         {children}
       </div>
     </div>
diff --git a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
index faf662cc29f..4fcd5412374 100644
--- a/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
+++ b/src/components/ParserOpenRPC/ModalDrawer/styles.module.css
@@ -41,6 +41,40 @@
   font-weight: 500;
 }
 
+.modalTitleContainer {
+  display: flex;
+  align-items: center;
+}
+
+.modalHeaderIcon {
+  display: flex;
+  background: none;
+  border: none;
+  padding: 0;
+  margin-right: 8px;
+}
+
+.modalHeaderIconBack {
+  width: 16px;
+  height: 16px;
+}
+
+.modalHeaderLabels {
+  display: flex;
+  align-items: center;
+}
+
+.modalHeaderLabel {
+  display: flex;
+  justify-content: center;
+  margin-left: 8px;
+  padding: 2px 8px;
+  border: 1px solid #848C96;
+  border-radius: 999px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
 .modalCloseBtn {
   display: block;
   padding: 0;
@@ -53,10 +87,17 @@
 
 .modalContent {
   height: 394px;
+}
+
+.modalContentScrolled {
   overflow-y: auto;
 }
 
-@media (width <= 1200px) {
+.modalContentFixed {
+  overflow-y: hidden;
+}
+
+@media (width <= 996px) {
   .modalContainer {
     position: fixed;
     left: 0;
diff --git a/src/components/ParserOpenRPC/Tooltip/Tooltip.module.css b/src/components/ParserOpenRPC/Tooltip/Tooltip.module.css
index 5f0553c5c4c..f899638b910 100644
--- a/src/components/ParserOpenRPC/Tooltip/Tooltip.module.css
+++ b/src/components/ParserOpenRPC/Tooltip/Tooltip.module.css
@@ -1,6 +1,5 @@
 .tooltipContainer {
     max-width: 180px;
-    max-height: 60px;
     font-size: 16px;
 }
 .tooltipContainer:first-letter {
diff --git a/src/components/ParserOpenRPC/Tooltip/index.tsx b/src/components/ParserOpenRPC/Tooltip/index.tsx
index 510e4688ef2..40348046f92 100644
--- a/src/components/ParserOpenRPC/Tooltip/index.tsx
+++ b/src/components/ParserOpenRPC/Tooltip/index.tsx
@@ -7,14 +7,12 @@ interface TooltipProps {
   children: ReactNode;
   message: string;
   disabled?: boolean;
-  theme?: "light" | "dark";
 }
 
-export const Tooltip = ({ children, message, disabled, theme = "light" }: TooltipProps) => (
+export const Tooltip = ({ children, message, disabled }: TooltipProps) => (
   <ReactTippy
     disabled={disabled}
     arrow={true}
-    theme={theme}
     html={(
       <div className={styles.tooltipContainer}>{message}</div>
     )}
@@ -23,4 +21,4 @@ export const Tooltip = ({ children, message, disabled, theme = "light" }: Toolti
   >
     {children}
   </ReactTippy>
-);
+)
diff --git a/src/components/ParserOpenRPC/global.module.css b/src/components/ParserOpenRPC/global.module.css
index b90a9d70f52..cbf763225ff 100644
--- a/src/components/ParserOpenRPC/global.module.css
+++ b/src/components/ParserOpenRPC/global.module.css
@@ -24,7 +24,7 @@
   text-decoration: none;
   color: #141618;
   background-color: #26A2FC;
-  box-shadow: 0px 2px 8px 0px rgba(16, 152, 252, 0.40);
+  box-shadow: 0 2px 8px 0 rgba(16, 152, 252, 0.40);
 }
 
 .primaryBtn:disabled {
@@ -35,6 +35,31 @@
   box-shadow: none;
 }
 
+.secondaryBtn {
+  background: none;
+  border-radius: 999px;
+  outline: none;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 22px;
+  border: 1px solid rgba(3, 118, 201, 1);
+  color: rgba(3, 118, 201, 1);
+}
+
+.secondaryBtn:hover {
+  text-decoration: none;
+  color: #141618;
+  background-color: #26A2FC;
+  box-shadow: 0 2px 8px 0 rgba(16, 152, 252, 0.40);
+}
+
+.secondaryBtn:disabled {
+  cursor: not-allowed;
+  text-decoration: none;
+  box-shadow: none;
+  opacity: 0.5;
+}
+
 .linkBtn {
   background: none;
   border: 0;
diff --git a/src/components/ParserOpenRPC/index.tsx b/src/components/ParserOpenRPC/index.tsx
index c053e044408..7bcdad5729b 100644
--- a/src/components/ParserOpenRPC/index.tsx
+++ b/src/components/ParserOpenRPC/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from "react";
+import React, { createContext, useEffect, useMemo, useState } from 'react'
 import { usePluginData } from "@docusaurus/useGlobalData";
 import { ResponseItem, NETWORK_NAMES } from "@site/src/plugins/plugin-json-rpc";
 import DetailsBox from "@site/src/components/ParserOpenRPC/DetailsBox";
@@ -8,18 +8,34 @@ import RequestBox from "@site/src/components/ParserOpenRPC/RequestBox";
 import ErrorsBox from "@site/src/components/ParserOpenRPC/ErrorsBox";
 import { ModalDrawer } from "@site/src/components/ParserOpenRPC/ModalDrawer";
 import global from "./global.module.css";
+import modalDrawerStyles from "./ModalDrawer/styles.module.css";
+import clsx from "clsx";
+import { useColorMode } from "@docusaurus/theme-common";
 
 interface ParserProps {
   network: NETWORK_NAMES;
   method?: string;
 }
 
+interface ParserOpenRPCContextProps {
+  setIsDrawerContentFixed?: (isFixed: boolean) => void
+  setDrawerLabel?: (label: string) => void;
+  isComplexTypeView: boolean;
+  setIsComplexTypeView: (isComplexTypeView: boolean) => void;
+}
+
+export const ParserOpenRPCContext = createContext<ParserOpenRPCContextProps | null>(null)
+
 export default function ParserOpenRPC({ network, method }: ParserProps) {
   if (!method || !network) return null;
   const [metamaskInstalled, setMetamaskInstalled] = useState(false);
   const [isModalOpen, setModalOpen] = useState(false);
   const [reqResult, setReqResult] = useState(null);
   const [paramsData, setParamsData] = useState([]);
+  const [isDrawerContentFixed, setIsDrawerContentFixed] = useState(false);
+  const [drawerLabel, setDrawerLabel] = useState(null);
+  const [isComplexTypeView, setIsComplexTypeView] = useState(false);
+  const { colorMode } = useColorMode();
   const openModal = () => setModalOpen(true);
   const closeModal = () => setModalOpen(false);
 
@@ -80,50 +96,81 @@ export default function ParserOpenRPC({ network, method }: ParserProps) {
       setReqResult(response);
     } catch (e) {
       setReqResult(e);
-    };
+    }
   };
 
+  const closeComplexTypeView = () => {
+    setIsComplexTypeView(false);
+    setIsDrawerContentFixed(false);
+    setDrawerLabel(null);
+  }
+
+  const onModalClose = () => {
+    closeModal();
+    closeComplexTypeView();
+  }
+
   return (
-    <div className={global.rowWrap}>
-      <div className={global.colLeft}>
-        <div className={global.colContentWrap}>
-          <DetailsBox
-            method={method}
-            description={currentMethodData.description}
-            params={currentMethodData.params}
-            components={currentMethodData.components.schemas}
-            result={currentMethodData.result}
-            tags={currentMethodData.tags}
-          />
-          <ErrorsBox errors={currentMethodData.errors} />
+    <ParserOpenRPCContext.Provider
+      value={{ setIsDrawerContentFixed, setDrawerLabel, isComplexTypeView, setIsComplexTypeView }}
+    >
+      <div className={global.rowWrap}>
+        <div className={global.colLeft}>
+          <div className={global.colContentWrap}>
+            <DetailsBox
+              method={method}
+              description={currentMethodData.description}
+              params={currentMethodData.params}
+              components={currentMethodData.components.schemas}
+              result={currentMethodData.result}
+              tags={currentMethodData.tags}
+            />
+            <ErrorsBox errors={currentMethodData.errors} />
+          </div>
+          <ModalDrawer
+            title={
+              isComplexTypeView && colorMode ?
+                <span className={modalDrawerStyles.modalTitleContainer}>
+                  <button
+                    className={clsx(modalDrawerStyles.modalHeaderIcon, modalDrawerStyles.modalHeaderIconBack)}
+                    onClick={closeComplexTypeView}
+                  >
+                    <img src={colorMode === "light" ? '/img/icons/chevron-left-dark-icon.svg' : '/img/icons/chevron-left-light-icon.svg'} />
+                  </button>
+                  Editing Param
+                </span>
+                 :
+                "Customize request"}
+            isOpen={isModalOpen}
+            onClose={onModalClose}
+            isContentFixed={isDrawerContentFixed}
+            headerLabel={drawerLabel ? drawerLabel : null}
+          >
+            <InteractiveBox
+              params={currentMethodData.params}
+              components={currentMethodData.components.schemas}
+              examples={currentMethodData.examples}
+              onParamChange={onParamsChangeHandle}
+              drawerLabel={drawerLabel}
+              closeComplexTypeView={closeComplexTypeView}
+            />
+          </ModalDrawer>
         </div>
-        <ModalDrawer
-          title="Customize request"
-          isOpen={isModalOpen}
-          onClose={closeModal}
-        >
-          <InteractiveBox
-            params={currentMethodData.params}
-            components={currentMethodData.components.schemas}
-            examples={currentMethodData.examples}
-            onParamChange={onParamsChangeHandle}
-          />
-        </ModalDrawer>
-      </div>
-      <div className={global.colRight}>
-        <div className={global.stickyCol}>
-          <AuthBox isMetamaskInstalled={metamaskInstalled} />
-          <RequestBox
-            isMetamaskInstalled={metamaskInstalled}
-            method={method}
-            params={currentMethodData.params}
-            paramsData={paramsData}
-            response={reqResult}
-            openModal={openModal}
-            submitRequest={onSubmitRequestHandle}
-          />
+        <div className={global.colRight}>
+          <div className={global.stickyCol}>
+            <AuthBox isMetamaskInstalled={metamaskInstalled} />
+            <RequestBox
+              isMetamaskInstalled={metamaskInstalled}
+              method={method}
+              params={currentMethodData.params}
+              paramsData={paramsData}
+              response={reqResult}
+              openModal={openModal}
+              submitRequest={onSubmitRequestHandle}
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </ParserOpenRPCContext.Provider>
   );
 }
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index c0ce063a4fe..7307122adda 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -293,7 +293,38 @@ html[data-theme="light"] .api-card:hover {
   transition: all 0.3s;
 }
 
+form {
+  position: relative;
+}
+
 fieldset {
-  border: 0;
+  border: none;
   padding: 0;
-}
\ No newline at end of file
+  margin: 0;
+}
+
+fieldset#root {
+  position: relative;
+  padding-bottom: 10px;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+[data-theme="light"] .tippy-tooltip {
+  background-color: rgba(20, 22, 24, 1);
+}
+
+[data-theme="light"] .tippy-popper[x-placement^=top] [x-arrow] {
+  border-top-color:  rgba(20, 22, 24, 1);
+}
+
+[data-theme="dark"] .tippy-tooltip {
+  background-color: rgba(255, 255, 255, 1);
+  color: rgba(20, 22, 24, 1);
+}
+
+[data-theme="dark"] .tippy-popper[x-placement^=top] [x-arrow] {
+  border-top-color: rgba(255, 255, 255, 1);
+}
diff --git a/static/img/icons/chevron-left-dark-icon.svg b/static/img/icons/chevron-left-dark-icon.svg
new file mode 100644
index 00000000000..bb1932ab02c
--- /dev/null
+++ b/static/img/icons/chevron-left-dark-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6006 14C10.3808 14 10.2343 13.9326 10.0877 13.7978L5.32584 9.41573C4.44672 8.67416 4.44672 7.39326 5.32584 6.58427L10.0877 2.20225C10.3808 1.93258 10.8203 1.93258 11.1134 2.20225C11.4064 2.47191 11.4064 2.8764 11.1134 3.14607L6.35149 7.52809C6.05845 7.79775 6.05845 8.20225 6.35149 8.47191L11.1134 12.8539C11.4064 13.1236 11.4064 13.5281 11.1134 13.7978C10.9669 13.9326 10.7471 14 10.6006 14Z" fill="#141618"/>
+</svg>
diff --git a/static/img/icons/chevron-left-light-icon.svg b/static/img/icons/chevron-left-light-icon.svg
new file mode 100644
index 00000000000..7bc727bf07f
--- /dev/null
+++ b/static/img/icons/chevron-left-light-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6011 14C10.3813 14 10.2348 13.9326 10.0882 13.7978L5.32633 9.41573C4.44721 8.67416 4.44721 7.39326 5.32633 6.58427L10.0882 2.20225C10.3813 1.93258 10.8208 1.93258 11.1139 2.20225C11.4069 2.47191 11.4069 2.8764 11.1139 3.14607L6.35197 7.52809C6.05893 7.79775 6.05893 8.20225 6.35197 8.47191L11.1139 12.8539C11.4069 13.1236 11.4069 13.5281 11.1139 13.7978C10.9674 13.9326 10.7476 14 10.6011 14Z" fill="white"/>
+</svg>
diff --git a/static/img/icons/plus-icon.svg b/static/img/icons/plus-icon.svg
new file mode 100644
index 00000000000..a1b01bb2bb1
--- /dev/null
+++ b/static/img/icons/plus-icon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 14C7.48571 14 7.14286 13.6571 7.14286 13.1429V8.85714H2.85714C2.34286 8.85714 2 8.51428 2 8C2 7.48571 2.34286 7.14286 2.85714 7.14286H7.14286V2.85714C7.14286 2.34286 7.48571 2 8 2C8.51428 2 8.85714 2.34286 8.85714 2.85714V7.14286H13.1429C13.6571 7.14286 14 7.48571 14 8C14 8.51428 13.6571 8.85714 13.1429 8.85714H8.85714V13.1429C8.85714 13.6571 8.51428 14 8 14Z" fill="#1098FC"/>
+</svg>
diff --git a/static/img/icons/remove-icon.svg b/static/img/icons/remove-icon.svg
new file mode 100644
index 00000000000..eee1c47bfd1
--- /dev/null
+++ b/static/img/icons/remove-icon.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.91406 0.421875C4.03125 0.164062 4.28906 0 4.57031 0H7.40625C7.6875 0 7.94531 0.164062 8.0625 0.421875L8.25 0.75H10.5C10.8984 0.75 11.25 1.10156 11.25 1.5C11.25 1.92188 10.8984 2.25 10.5 2.25H1.5C1.07812 2.25 0.75 1.92188 0.75 1.5C0.75 1.10156 1.07812 0.75 1.5 0.75H3.75L3.91406 0.421875ZM1.47656 3H10.5V10.5C10.5 11.3438 9.82031 12 9 12H2.97656C2.15625 12 1.47656 11.3438 1.47656 10.5V3ZM3.35156 4.875V10.125C3.35156 10.3359 3.53906 10.5 3.72656 10.5C3.9375 10.5 4.10156 10.3359 4.10156 10.125V4.875C4.10156 4.6875 3.9375 4.5 3.72656 4.5C3.53906 4.5 3.35156 4.6875 3.35156 4.875ZM5.60156 4.875V10.125C5.60156 10.3359 5.78906 10.5 5.97656 10.5C6.1875 10.5 6.375 10.3359 6.375 10.125V4.875C6.375 4.6875 6.1875 4.5 5.97656 4.5C5.78906 4.5 5.60156 4.6875 5.60156 4.875ZM7.875 4.875V10.125C7.875 10.3359 8.03906 10.5 8.25 10.5C8.4375 10.5 8.625 10.3359 8.625 10.125V4.875C8.625 4.6875 8.4375 4.5 8.25 4.5C8.03906 4.5 7.875 4.6875 7.875 4.875Z" fill="#BBC0C5"/>
+</svg>