diff --git a/src/server/playground/comp/Main.tsx b/src/server/playground/comp/Main.tsx
index 7f4ab321..a94bd499 100644
--- a/src/server/playground/comp/Main.tsx
+++ b/src/server/playground/comp/Main.tsx
@@ -10,6 +10,7 @@ import SuccessIcon from "./icon/SuccessIcon.tsx";
 import { JSONViewer } from "./JSONVeiwer.tsx";
 import { useLesan } from "./ManagedLesanContext.tsx";
 import { Selected } from "./Selected.tsx";
+import MultiSelect from "./MultiSelect.tsx";
 
 const lesanAPI = ({
   baseUrl,
@@ -46,17 +47,17 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
     value: 0 | 1 | null,
     keyname: string,
     getObj: Record<string, any>,
-    returnObj: Record<string, any>,
+    returnObj: Record<string, any>
   ) => {
     for (const key in getObj) {
       getObj[key].type === "enums"
         ? (returnObj[`${keyname}.${key}`] = value)
         : changeGetValue(
-          value,
-          `${keyname}.${key}`,
-          getObj[key].schema,
-          returnObj,
-        );
+            value,
+            `${keyname}.${key}`,
+            getObj[key].schema,
+            returnObj
+          );
     }
     return returnObj;
   };
@@ -84,6 +85,77 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
     });
   };
 
+  const renderPostFields = ({
+    key,
+    field,
+    isMultiEnum = false,
+    formData,
+  }: {
+    key: string;
+    field: Record<string, any>;
+    isMultiEnum?: boolean;
+    formData?: any;
+  }): h.JSX.Element => {
+    if (field.type === "array") {
+      return renderPostFields({
+        key,
+        formData,
+        field: field["schema"],
+        isMultiEnum: true,
+      });
+    } else if (field["type"] === "enums" && isMultiEnum) {
+      return (
+        <MultiSelect
+          options={Object.keys(field["schema"]).map((schemaKey) => ({
+            label: schemaKey,
+            value: field["schema"][schemaKey],
+          }))}
+          onChange={(options) => {
+            const value = options.map((item) => item.value);
+            setFormData({
+              data: {
+                ...formData,
+                [`set.${key}`]: value,
+              },
+              index: activeTab,
+            });
+            localStorage.setItem("localTabsData", JSON.stringify(tabsData));
+          }}
+        ></MultiSelect>
+      );
+    } else if (field["type"] === "enums") {
+      return (
+        <Selected
+          onClickItem={(value: string) => {
+            setFormData({
+              data: {
+                ...formData,
+                [`set.${key}`]: value,
+              },
+              index: activeTab,
+            });
+            localStorage.setItem("localTabsData", JSON.stringify(tabsData));
+          }}
+          incomeActiveItem={formData[`set.${key}`]}
+          items={Object.keys(field["schema"])}
+        />
+      );
+    } else {
+      return (
+        <input
+          className="input"
+          placeholder={key}
+          id={key}
+          value={formData[`set.${key}`]}
+          name={`set.${key}`}
+          type={field["type"] === "number" ? "number" : "string"}
+          alt={field["type"]}
+          onChange={handleChange}
+        />
+      );
+    }
+  };
+
   const renderGetFields = ({
     getField,
     keyName,
@@ -100,68 +172,67 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
     >
       <div className="sidebar__section-heading--subfields">{keyName}</div>
       {Object.keys(getField["schema"]).map((item, index) =>
-        getField["schema"][item].type === "enums"
-          ? (
-            <div
-              className="input-cnt get-items"
-              key={`${activeTab}.${item}-${index}`}
-            >
-              <label htmlFor={item}>
-                {keyName}.{item}:
-              </label>
-              <div className="get-values">
-                <span
-                  onClick={() => {
-                    const copy = { ...tabsData[activeTab].formData };
-                    delete copy[`get.${keyName}.${item}`];
-                    setFormData({ data: copy, index: activeTab });
-                  }}
-                >
-                </span>
-                <span
-                  className={tabsData[activeTab]
-                      .formData[`get.${keyName}.${item}`] === 0
+        getField["schema"][item].type === "enums" ? (
+          <div
+            className="input-cnt get-items"
+            key={`${activeTab}.${item}-${index}`}
+          >
+            <label htmlFor={item}>
+              {keyName}.{item}:
+            </label>
+            <div className="get-values">
+              <span
+                onClick={() => {
+                  const copy = { ...tabsData[activeTab].formData };
+                  delete copy[`get.${keyName}.${item}`];
+                  setFormData({ data: copy, index: activeTab });
+                }}
+              ></span>
+              <span
+                className={
+                  tabsData[activeTab].formData[`get.${keyName}.${item}`] === 0
                     ? "active"
-                    : ""}
-                  onClick={() => {
-                    setFormData({
-                      index: activeTab,
-                      data: {
-                        ...tabsData[activeTab].formData,
-                        [`get.${keyName}.${item}`]: 0,
-                      },
-                    });
-                  }}
-                >
-                  0
-                </span>
-                <span
-                  className={tabsData[activeTab]
-                      .formData[`get.${keyName}.${item}`] === 1
+                    : ""
+                }
+                onClick={() => {
+                  setFormData({
+                    index: activeTab,
+                    data: {
+                      ...tabsData[activeTab].formData,
+                      [`get.${keyName}.${item}`]: 0,
+                    },
+                  });
+                }}
+              >
+                0
+              </span>
+              <span
+                className={
+                  tabsData[activeTab].formData[`get.${keyName}.${item}`] === 1
                     ? "active"
-                    : ""}
-                  onClick={() => {
-                    setFormData({
-                      data: {
-                        ...tabsData[activeTab].formData,
-                        [`get.${keyName}.${item}`]: 1,
-                      },
-                      index: activeTab,
-                    });
-                  }}
-                >
-                  1
-                </span>
-              </div>
+                    : ""
+                }
+                onClick={() => {
+                  setFormData({
+                    data: {
+                      ...tabsData[activeTab].formData,
+                      [`get.${keyName}.${item}`]: 1,
+                    },
+                    index: activeTab,
+                  });
+                }}
+              >
+                1
+              </span>
             </div>
-          )
-          : (
-            renderGetFields({
-              getField: getField["schema"][item],
-              keyName: `${keyName}.${item}`,
-              margin: margin + 1,
-            })
-          )
+          </div>
+        ) : (
+          renderGetFields({
+            getField: getField["schema"][item],
+            keyName: `${keyName}.${item}`,
+            margin: margin + 1,
+          })
+        )
       )}
     </div>
   );
@@ -226,7 +297,8 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
     localStorage.setItem("localTabsData", JSON.stringify(tabsData));
   };
 
-  const canShowRequestFields = tabsData[activeTab].service &&
+  const canShowRequestFields =
+    tabsData[activeTab].service &&
     tabsData[activeTab].schema &&
     tabsData[activeTab].postFields &&
     tabsData[activeTab].getFields &&
@@ -264,7 +336,7 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
 
   const onClickItem = (
     item: string,
-    type: "service" | "method" | "schema" | "action",
+    type: "service" | "method" | "schema" | "action"
   ) => {
     if (type === "service") {
       setService({
@@ -313,9 +385,9 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
             <Selected
               onClickItem={(item: string) => onClickItem(item, "service")}
               items={Object.keys(actsObj)}
-              incomeActiveItem={tabsData[activeTab].service
-                ? tabsData[activeTab].service
-                : null}
+              incomeActiveItem={
+                tabsData[activeTab].service ? tabsData[activeTab].service : null
+              }
             />
           </div>
 
@@ -329,12 +401,14 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
             <Selected
               canShow={!canShowSchema}
               onClickItem={(item: string) => onClickItem(item, "schema")}
-              items={canShowSchema
-                ? Object.keys((actsObj as any)[tabsData[activeTab].service])
-                : []}
-              incomeActiveItem={tabsData[activeTab].schema
-                ? tabsData[activeTab].schema
-                : null}
+              items={
+                canShowSchema
+                  ? Object.keys((actsObj as any)[tabsData[activeTab].service])
+                  : []
+              }
+              incomeActiveItem={
+                tabsData[activeTab].schema ? tabsData[activeTab].schema : null
+              }
             />
           </div>
 
@@ -343,16 +417,18 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
             <Selected
               canShow={!canShowAct}
               onClickItem={(item: string) => onClickItem(item, "action")}
-              items={canShowAct
-                ? Object.keys(
-                  (actsObj as any)[tabsData[activeTab].service][
-                    tabsData[activeTab].schema
-                  ],
-                )
-                : []}
-              incomeActiveItem={tabsData[activeTab].act
-                ? tabsData[activeTab].act
-                : null}
+              items={
+                canShowAct
+                  ? Object.keys(
+                      (actsObj as any)[tabsData[activeTab].service][
+                        tabsData[activeTab].schema
+                      ]
+                    )
+                  : []
+              }
+              incomeActiveItem={
+                tabsData[activeTab].act ? tabsData[activeTab].act : null
+              }
             />
           </div>
         </div>
@@ -367,44 +443,11 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
             {Object.keys(tabsData[activeTab].postFields).map((item) => (
               <div className="input-cnt" key={`${activeTab}.${item}-----`}>
                 <label htmlFor={item}>{item} :</label>
-                {tabsData[activeTab].postFields[item]["type"] === "enums"
-                  ? (
-                    <Selected
-                      onClickItem={(clickedItem: string) => {
-                        setFormData({
-                          data: {
-                            ...tabsData[activeTab].formData,
-                            [`set.${item}`]: clickedItem,
-                          },
-                          index: activeTab,
-                        });
-                        localStorage.setItem(
-                          "localTabsData",
-                          JSON.stringify(tabsData),
-                        );
-                      }}
-                      incomeActiveItem={tabsData[activeTab]
-                        .formData[`set.${item}`]}
-                      items={Object.keys(
-                        tabsData[activeTab].postFields[item]["schema"],
-                      )}
-                    />
-                  )
-                  : (
-                    <input
-                      className="input"
-                      placeholder={item}
-                      id={item}
-                      value={tabsData[activeTab].formData[`set.${item}`]}
-                      name={`set.${item}`}
-                      type={tabsData[activeTab].postFields[item]["type"] ===
-                          "number"
-                        ? "number"
-                        : "string"}
-                      alt={tabsData[activeTab].postFields[item]["type"]}
-                      onChange={handleChange}
-                    />
-                  )}
+                {renderPostFields({
+                  key: item,
+                  field: tabsData[activeTab].postFields[item],
+                  formData: tabsData[activeTab].formData,
+                })}
               </div>
             ))}
             <div className="sidebar__section-heading sidebar__section-heading--fields">
@@ -420,7 +463,7 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
                       null,
                       "get",
                       tabsData[activeTab].getFields,
-                      {},
+                      {}
                     );
 
                     setFormData({
@@ -428,15 +471,14 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
                       index: activeTab,
                     });
                   }}
-                >
-                </span>
+                ></span>
                 <span
                   onClick={() => {
                     const copy = changeGetValue(
                       0,
                       "get",
                       tabsData[activeTab].getFields,
-                      {},
+                      {}
                     );
                     setFormData({
                       data: {
@@ -455,7 +497,7 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
                       1,
                       "get",
                       tabsData[activeTab].getFields,
-                      {},
+                      {}
                     );
                     setFormData({
                       data: {
@@ -472,70 +514,69 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
             </div>
 
             {Object.keys(tabsData[activeTab].getFields).map((item) =>
-              tabsData[activeTab].getFields[item].type === "enums"
-                ? (
-                  <div
-                    className="input-cnt get-items"
-                    key={`${activeTab}.${item}-------`}
-                  >
-                    <label htmlFor={item}>{item}:</label>
-                    <div className="get-values">
-                      <span
-                        onClick={() => {
-                          setFormData({
-                            data: {
-                              ...tabsData[activeTab].formData,
-                              [`get.${item}`]: null,
-                            },
-                            index: activeTab,
-                          });
-                        }}
-                      >
-                      </span>
-                      <span
-                        className={tabsData[activeTab]
-                            .formData[`get.${item}`] === 0
+              tabsData[activeTab].getFields[item].type === "enums" ? (
+                <div
+                  className="input-cnt get-items"
+                  key={`${activeTab}.${item}-------`}
+                >
+                  <label htmlFor={item}>{item}:</label>
+                  <div className="get-values">
+                    <span
+                      onClick={() => {
+                        setFormData({
+                          data: {
+                            ...tabsData[activeTab].formData,
+                            [`get.${item}`]: null,
+                          },
+                          index: activeTab,
+                        });
+                      }}
+                    ></span>
+                    <span
+                      className={
+                        tabsData[activeTab].formData[`get.${item}`] === 0
                           ? "active"
-                          : ""}
-                        onClick={() => {
-                          setFormData({
-                            data: {
-                              ...tabsData[activeTab].formData,
-                              [`get.${item}`]: 0,
-                            },
-                            index: activeTab,
-                          });
-                        }}
-                      >
-                        0
-                      </span>
-                      <span
-                        className={tabsData[activeTab]
-                            .formData[`get.${item}`] === 1
+                          : ""
+                      }
+                      onClick={() => {
+                        setFormData({
+                          data: {
+                            ...tabsData[activeTab].formData,
+                            [`get.${item}`]: 0,
+                          },
+                          index: activeTab,
+                        });
+                      }}
+                    >
+                      0
+                    </span>
+                    <span
+                      className={
+                        tabsData[activeTab].formData[`get.${item}`] === 1
                           ? "active"
-                          : ""}
-                        onClick={() => {
-                          setFormData({
-                            data: {
-                              ...tabsData[activeTab].formData,
-                              [`get.${item}`]: 1,
-                            },
-                            index: activeTab,
-                          });
-                        }}
-                      >
-                        1
-                      </span>
-                    </div>
+                          : ""
+                      }
+                      onClick={() => {
+                        setFormData({
+                          data: {
+                            ...tabsData[activeTab].formData,
+                            [`get.${item}`]: 1,
+                          },
+                          index: activeTab,
+                        });
+                      }}
+                    >
+                      1
+                    </span>
                   </div>
-                )
-                : (
-                  renderGetFields({
-                    getField: tabsData[activeTab].getFields[item],
-                    keyName: item,
-                    margin: 0,
-                  })
-                )
+                </div>
+              ) : (
+                renderGetFields({
+                  getField: tabsData[activeTab].getFields[item],
+                  keyName: item,
+                  margin: 0,
+                })
+              )
             )}
             <div class="wrapper">
               <button class="send-button" data-active={active}>
@@ -598,9 +639,11 @@ export const Main = ({ urlAddress }: { urlAddress: string }) => {
                 {ConvertMilliseconds(tabsData[activeTab].response?.tookTime!)}
               </span>
               {tabsData[activeTab].response &&
-                  tabsData[activeTab].response?.success === true
-                ? <div className="success"></div>
-                : <div className="fail"></div>}
+              tabsData[activeTab].response?.success === true ? (
+                <div className="success"></div>
+              ) : (
+                <div className="fail"></div>
+              )}
             </div>
           </div>
         )}
diff --git a/src/server/playground/comp/MultiSelect.tsx b/src/server/playground/comp/MultiSelect.tsx
new file mode 100644
index 00000000..d8554e7f
--- /dev/null
+++ b/src/server/playground/comp/MultiSelect.tsx
@@ -0,0 +1,122 @@
+/** @jsx h */
+import { h, FunctionalComponent, useState } from "../reactDeps.ts";
+import ChevronDownIcon from "./icon/ChevronDownIcon.tsx";
+import { useOutsideClick } from "./hooks/useOutsideClick.ts";
+
+export interface IOption {
+  value: string;
+  label: string;
+}
+
+interface MultiSelectProps {
+  options: IOption[];
+  onChange: (options: IOption[]) => void;
+}
+
+const MultiSelect: FunctionalComponent<MultiSelectProps> = ({
+  options,
+  onChange,
+}) => {
+  const [selectedOptions, setSelectedOptions] = useState<IOption[]>([]);
+  const [unselectedOptions, setUnselectedOptions] =
+    useState<IOption[]>(options);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOptionChange = (selectedOption: IOption) => {
+    if (selectedOptions.includes(selectedOption)) {
+      const filteredSelectedOptions = selectedOptions.filter(
+        (option) => option.value !== selectedOption.value
+      );
+      setSelectedOptions(filteredSelectedOptions);
+      setUnselectedOptions([...unselectedOptions, selectedOption]);
+      onChange(filteredSelectedOptions);
+    } else {
+      const filteredUnselectedOptions = unselectedOptions.filter(
+        (option) => option.value !== selectedOption.value
+      );
+      setSelectedOptions([...selectedOptions, selectedOption]);
+      setUnselectedOptions(filteredUnselectedOptions);
+      onChange([...selectedOptions, selectedOption]);
+    }
+  };
+
+  const resetOptions = () => {
+    setSelectedOptions([]);
+    onChange([]);
+    setUnselectedOptions(options);
+  };
+
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const ref = useOutsideClick(() => {
+    setIsOpen(false);
+  });
+
+  return (
+    <div ref={ref} className="multi-select__wrapper">
+      <div className="multi-select__field" onClick={toggleDropdown}>
+        <div className="multi-select__selected-item-wrapper">
+          {selectedOptions.map((item) => (
+            <div className="multi-select__selected-item" key={item}>
+              <div className="multi-select__selected-item-text">
+                {item.label}
+              </div>
+              <div
+                className="multi-select__selected-item-btn"
+                role="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleOptionChange(item);
+                }}
+              >
+                x
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="multi-select__icons-wrapper">
+          {selectedOptions.length ? (
+            <div
+              className="multi-select__close-icon-wrapper"
+              role="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                resetOptions();
+              }}
+            >
+              <span className="multi-select__close-icon">x</span>
+            </div>
+          ) : null}
+
+          <div className="multi-select__arrow-icon-wrapper" role="button">
+            <ChevronDownIcon className="multi-select__arrow-icon" />
+          </div>
+        </div>
+      </div>
+      {isOpen ? (
+        <div className="multi-select__options">
+          {unselectedOptions.length ? (
+            unselectedOptions.map((option) => (
+              <div
+                key={option.value}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleOptionChange(option);
+                }}
+                className="multi-select__option"
+              >
+                <div className="multi-select__option-label">{option.label}</div>
+              </div>
+            ))
+          ) : (
+            <div className="multi-select__option--no-option">No Options!</div>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default MultiSelect;
diff --git a/src/server/playground/comp/icon/ChevronDownIcon.tsx b/src/server/playground/comp/icon/ChevronDownIcon.tsx
index 297f44a2..c7dbf661 100644
--- a/src/server/playground/comp/icon/ChevronDownIcon.tsx
+++ b/src/server/playground/comp/icon/ChevronDownIcon.tsx
@@ -1,7 +1,11 @@
 /** @jsx h */
 import { h } from "../../reactDeps.ts";
 
-export default function ChevronDownIcon() {
+export default function ChevronDownIcon({
+  className = "",
+}: {
+  className?: string;
+}) {
   return (
     <svg
       width={25}
@@ -9,6 +13,7 @@ export default function ChevronDownIcon() {
       viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
+      className={className}
     >
       <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
       <g
diff --git a/src/server/playground/css/index.css b/src/server/playground/css/index.css
index 37cc3504..f11db891 100644
--- a/src/server/playground/css/index.css
+++ b/src/server/playground/css/index.css
@@ -6,6 +6,7 @@
   /* -------------------------------- Colors -------------------------------- */
   --color-bg-base: var(--color-colonial-1);
   --color-bg-primary: var(--color-blue-1);
+  --color-bg-primary-hover: var(--color-blue-1-hover);
   --color-bg-secondary: var(--color-blue-2);
 
   --color-text-base: var(--color-gray-4);
@@ -24,6 +25,7 @@
   --color-blue-2: #2b3b4e;
   --color-blue-3: #669bbc;
   --color-blue-4: #03a9f4;
+  --color-blue-1-hover: #a2978a;
 
   --color-gray-1: #d1d5db;
   --color-gray-2: #9e9e9e;
@@ -71,7 +73,8 @@ label {
   color: #eeeeee;
 }
 
-input {
+input,
+select {
   padding: 5px 10px;
   border-radius: 5px;
   border: 2px solid white;
@@ -325,7 +328,6 @@ textarea {
 
 .select--empty:hover {
   border-color: bisque;
-  /* color: black; */
 }
 
 .active-select--empty {
@@ -2049,3 +2051,190 @@ textarea {
   background-color: gainsboro;
   color: #021307;
 }
+
+/* ------------------------ MultiSelect Component CSS ----------------------- */
+
+.multi-select__wrapper {
+  position: relative;
+}
+
+.multi-select__field {
+  background-color: rgba(70, 70, 70, 0.5);
+  min-height: 35px;
+  padding: 5px 5px 5px 10px;
+  border-radius: 10px;
+  border: 1px solid #dcdcdc;
+  margin: 10px 0;
+  font-size: 16px;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.multi-select__selected-item-wrapper {
+  -webkit-box-align: center;
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  flex-wrap: wrap;
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.multi-select__icons-wrapper {
+  -webkit-box-align: center;
+  align-items: center;
+  align-self: stretch;
+  display: flex;
+  flex-shrink: 0;
+  box-sizing: border-box;
+}
+
+.multi-select__arrow-icon-wrapper {
+  display: flex;
+  position: relative;
+  transition: color 150ms ease 0s;
+  color: #dcdcdc;
+  padding-left: 4px;
+  box-sizing: border-box;
+}
+
+.multi-select__arrow-icon-wrapper::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  background-color: var(--color-bg-primary-hover);
+  height: 100%;
+}
+
+.multi-select__arrow-icon {
+  stroke-width: 0;
+}
+
+.multi-select__close-icon-wrapper {
+  display: flex;
+  transition: color 150ms ease 0s;
+  color: #dcdcdc;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+}
+
+.multi-select__close-icon {
+  stroke-width: 0;
+}
+
+.multi-select__selected-item {
+  color: black;
+  display: flex;
+  min-width: 0rem;
+  background-color: var(--color-bg-primary-hover);
+  border-radius: 5px;
+  margin: 0.125rem;
+  box-sizing: border-box;
+}
+
+.multi-select__selected-item-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-radius: 5px;
+  font-size: 85%;
+  padding: 0 3px 0 6px;
+  box-sizing: border-box;
+  cursor: default;
+}
+
+.multi-select__selected-item-btn {
+  -webkit-box-align: center;
+  align-items: center;
+  display: flex;
+  border-radius: 5px;
+  padding-left: 4px;
+  padding-right: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.multi-select__selected-item-btn:hover {
+  background-color: var(--color-bg-primary-hover);
+  color: var(--color-error);
+}
+
+.multi-select__options {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  background-color: rgba(70, 70, 70, 0.5);
+  backdrop-filter: blur(3px);
+  max-height: 175px;
+  overflow-y: auto;
+  box-shadow: -10px 10px 15px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  padding: 10px 0;
+  border: 1.2px solid #dcdcdc;
+  z-index: 1;
+}
+
+.multi-select__option {
+  position: relative;
+  cursor: pointer;
+}
+
+.multi-select__option-label {
+  display: flex;
+  align-items: center;
+  padding: 5px 10px;
+  color: #dcdcdc;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+  display: block;
+  white-space: nowrap;
+}
+
+.multi-select__option--no-option {
+  cursor: default;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px 10px;
+  color: #dcdcdc;
+  font-weight: bold;
+}
+
+.multi-select__option::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  width: 100%;
+  background-color: rgba(220, 220, 220, 0.4);
+}
+
+.multi-select__option:first-child::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 1px;
+  width: 100%;
+  background-color: rgba(220, 220, 220, 0.4);
+}
+
+.multi-select__option:hover {
+  background-color: rgba(255, 228, 196, 0.5);
+}
+
+.multi-select__option:hover .multi-select__option-label {
+  color: black;
+}
+
+.multi-select__option > input {
+  cursor: pointer;
+}