From 5e29564f0329880954ff827e30de24f00c6c977a Mon Sep 17 00:00:00 2001
From: Ludvig Lundgren <hello@ludviglundgren.se>
Date: Thu, 23 Dec 2021 22:01:59 +0100
Subject: [PATCH] Refactor(web): Replace final-form with Formik and cleanup
 (#46)

* refactor: begin to replace final-form

* refactor: replace final-form with formik n cleanup
---
 web/package.json                              |   6 +-
 web/src/App.tsx                               |   2 +-
 web/src/api/APIClient.ts                      |   2 +-
 web/src/components/EmptyListState.tsx         |  22 -
 web/src/components/FilterActionList.tsx       | 495 ------------------
 web/src/components/alerts/index.ts            |   1 -
 .../alerts/{warning.tsx => index.tsx}         |   6 +-
 web/src/components/debug.tsx                  |   8 +-
 web/src/components/empty/EmptySimple.tsx      |  27 -
 web/src/components/emptystates/index.tsx      |  48 ++
 .../headings/{TitleSubtitle.tsx => index.tsx} |   8 +-
 web/src/components/inputs/Error.tsx           |  20 -
 .../components/inputs/MultiSelectField.tsx    |  50 --
 web/src/components/inputs/PasswordField.tsx   |  47 --
 web/src/components/inputs/RadioFieldset.tsx   |  60 ---
 web/src/components/inputs/SwitchGroup.tsx     |  57 --
 web/src/components/inputs/TextAreaWide.tsx    |  40 --
 web/src/components/inputs/TextField.tsx       |  48 --
 web/src/components/inputs/TextFieldWide.tsx   |  49 --
 web/src/components/inputs/common.tsx          |  17 +
 .../components/inputs/compact/NumberField.tsx |  47 --
 .../components/inputs/compact/SelectField.tsx | 111 ----
 web/src/components/inputs/compact/index.ts    |   2 -
 web/src/components/inputs/index.ts            |  14 +-
 web/src/components/inputs/input.tsx           | 159 ++++++
 web/src/components/inputs/input_wide.tsx      | 217 ++++++++
 web/src/components/inputs/radio.tsx           | 115 ++++
 web/src/components/inputs/select.tsx          | 271 ++++++++++
 .../inputs/switch.tsx}                        |  82 ++-
 .../components/inputs/wide/NumberField.tsx    |  64 ---
 .../components/inputs/wide/PasswordField.tsx  |  56 --
 .../inputs/wide/RadioFieldsetWide.tsx         | 105 ----
 .../components/inputs/wide/SelectField.tsx    | 111 ----
 web/src/components/inputs/wide/index.ts       |   4 -
 web/src/components/modals/index.ts            |   1 -
 .../modals/{Delete.tsx => index.tsx}          |  10 +-
 web/src/components/notifications/Toast.tsx    |  70 ++-
 web/src/components/panels/index.ts            |   1 -
 .../panels/{SlideOver.tsx => index.tsx}       |  31 +-
 web/src/domain/interfaces.ts                  |   1 +
 web/src/forms/filters/FilterActionAddForm.tsx | 415 ---------------
 .../forms/filters/FilterActionUpdateForm.tsx  | 318 -----------
 web/src/forms/filters/FilterAddForm.tsx       |  32 +-
 web/src/forms/index.ts                        |   2 -
 .../forms/settings/DownloadClientForms.tsx    | 470 +++++++++--------
 web/src/forms/settings/IndexerForms.tsx       | 162 +++---
 web/src/forms/settings/IrcForms.tsx           | 212 +++-----
 web/src/screens/Dashboard.tsx                 |   2 +-
 web/src/screens/Settings.tsx                  |   2 +-
 web/src/screens/auth/login.tsx                |  64 +--
 web/src/screens/filters/details.tsx           | 115 +---
 .../filters/inputs/DownloadClientSelect.tsx   | 109 ----
 .../screens/filters/inputs/MultiSelect.tsx    |  56 --
 .../screens/filters/inputs/NumberField.tsx    |  52 --
 web/src/screens/filters/inputs/Select.tsx     | 116 ----
 web/src/screens/filters/inputs/Switch.tsx     |  60 ---
 web/src/screens/filters/inputs/TextField.tsx  |  51 --
 web/src/screens/filters/inputs/index.ts       |   7 -
 web/src/screens/filters/list.tsx              |   4 +-
 web/src/screens/settings/Application.tsx      |  96 ++--
 web/src/screens/settings/DownloadClient.tsx   |  19 +-
 web/src/screens/settings/Indexer.tsx          |   4 +-
 web/src/screens/settings/Irc.tsx              |   4 +-
 web/src/styles/utils.ts                       |   7 -
 web/src/utils/{utils.ts => index.ts}          |   7 +
 web/yarn.lock                                 |  61 +--
 66 files changed, 1523 insertions(+), 3409 deletions(-)
 delete mode 100644 web/src/components/EmptyListState.tsx
 delete mode 100644 web/src/components/FilterActionList.tsx
 delete mode 100644 web/src/components/alerts/index.ts
 rename web/src/components/alerts/{warning.tsx => index.tsx} (87%)
 delete mode 100644 web/src/components/empty/EmptySimple.tsx
 create mode 100644 web/src/components/emptystates/index.tsx
 rename web/src/components/headings/{TitleSubtitle.tsx => index.tsx} (68%)
 delete mode 100644 web/src/components/inputs/Error.tsx
 delete mode 100644 web/src/components/inputs/MultiSelectField.tsx
 delete mode 100644 web/src/components/inputs/PasswordField.tsx
 delete mode 100644 web/src/components/inputs/RadioFieldset.tsx
 delete mode 100644 web/src/components/inputs/SwitchGroup.tsx
 delete mode 100644 web/src/components/inputs/TextAreaWide.tsx
 delete mode 100644 web/src/components/inputs/TextField.tsx
 delete mode 100644 web/src/components/inputs/TextFieldWide.tsx
 create mode 100644 web/src/components/inputs/common.tsx
 delete mode 100644 web/src/components/inputs/compact/NumberField.tsx
 delete mode 100644 web/src/components/inputs/compact/SelectField.tsx
 delete mode 100644 web/src/components/inputs/compact/index.ts
 create mode 100644 web/src/components/inputs/input.tsx
 create mode 100644 web/src/components/inputs/input_wide.tsx
 create mode 100644 web/src/components/inputs/radio.tsx
 create mode 100644 web/src/components/inputs/select.tsx
 rename web/src/{screens/filters/inputs/SwitchGroup.tsx => components/inputs/switch.tsx} (52%)
 delete mode 100644 web/src/components/inputs/wide/NumberField.tsx
 delete mode 100644 web/src/components/inputs/wide/PasswordField.tsx
 delete mode 100644 web/src/components/inputs/wide/RadioFieldsetWide.tsx
 delete mode 100644 web/src/components/inputs/wide/SelectField.tsx
 delete mode 100644 web/src/components/inputs/wide/index.ts
 delete mode 100644 web/src/components/modals/index.ts
 rename web/src/components/modals/{Delete.tsx => index.tsx} (96%)
 delete mode 100644 web/src/components/panels/index.ts
 rename web/src/components/panels/{SlideOver.tsx => index.tsx} (91%)
 delete mode 100644 web/src/forms/filters/FilterActionAddForm.tsx
 delete mode 100644 web/src/forms/filters/FilterActionUpdateForm.tsx
 delete mode 100644 web/src/screens/filters/inputs/DownloadClientSelect.tsx
 delete mode 100644 web/src/screens/filters/inputs/MultiSelect.tsx
 delete mode 100644 web/src/screens/filters/inputs/NumberField.tsx
 delete mode 100644 web/src/screens/filters/inputs/Select.tsx
 delete mode 100644 web/src/screens/filters/inputs/Switch.tsx
 delete mode 100644 web/src/screens/filters/inputs/TextField.tsx
 delete mode 100644 web/src/screens/filters/inputs/index.ts
 delete mode 100644 web/src/styles/utils.ts
 rename web/src/utils/{utils.ts => index.ts} (86%)

diff --git a/web/package.json b/web/package.json
index a038462..259b63a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -2,7 +2,7 @@
   "name": "web",
   "version": "0.1.0",
   "private": true,
-  "proxy": "http://localhost:8989",
+  "proxy": "http://127.0.0.1:8989",
   "homepage": ".",
   "dependencies": {
     "@craco/craco": "^6.1.2",
@@ -16,14 +16,10 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "date-fns": "^2.25.0",
-    "final-form": "^4.20.2",
-    "final-form-arrays": "^3.0.2",
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
-    "react-final-form": "^6.5.3",
-    "react-final-form-arrays": "^3.1.3",
     "react-hot-toast": "^2.1.1",
     "react-multi-select-component": "^4.0.2",
     "react-query": "^3.18.1",
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 7c60bb6..68956ab 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -5,7 +5,7 @@ import Logout from "./screens/auth/logout";
 import Base from "./screens/Base";
 import { ReactQueryDevtools } from "react-query/devtools";
 import Layout from "./components/Layout";
-import { baseUrl } from "./utils/utils";
+import { baseUrl } from "./utils";
 
 function Protected() {
     return (
diff --git a/web/src/api/APIClient.ts b/web/src/api/APIClient.ts
index b163069..52f6f36 100644
--- a/web/src/api/APIClient.ts
+++ b/web/src/api/APIClient.ts
@@ -1,5 +1,5 @@
 import {Action, DownloadClient, Filter, Indexer, Network} from "../domain/interfaces";
-import {baseUrl, sseBaseUrl} from "../utils/utils";
+import {baseUrl, sseBaseUrl} from "../utils";
 
 function baseClient(endpoint: string, method: string, { body, ...customConfig}: any = {}) {
     let baseURL = baseUrl()
diff --git a/web/src/components/EmptyListState.tsx b/web/src/components/EmptyListState.tsx
deleted file mode 100644
index 65d9b8b..0000000
--- a/web/src/components/EmptyListState.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-interface props {
-    text: string;
-    buttonText?: string;
-    buttonOnClick?: any;
-}
-
-export function EmptyListState({ text, buttonText, buttonOnClick }: props) {
-    return (
-        <div className="px-4 py-12 flex flex-col items-center">
-            <p className="text-center text-gray-500 dark:text-white">{text}</p>
-            {buttonText && buttonOnClick && (
-                <button
-                    type="button"
-                    className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                    onClick={buttonOnClick}
-                >
-                    {buttonText}
-                </button>
-            )}
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/web/src/components/FilterActionList.tsx b/web/src/components/FilterActionList.tsx
deleted file mode 100644
index 3129232..0000000
--- a/web/src/components/FilterActionList.tsx
+++ /dev/null
@@ -1,495 +0,0 @@
-import { Action, DownloadClient } from "../domain/interfaces";
-import { Fragment, useEffect, useRef } from "react";
-import { Dialog, Listbox, Switch, Transition } from "@headlessui/react";
-import { classNames } from "../styles/utils";
-import {
-  CheckIcon,
-  ChevronRightIcon,
-  SelectorIcon,
-} from "@heroicons/react/solid";
-import { useToggle } from "../hooks/hooks";
-import { useMutation } from "react-query";
-import { Field, Form } from "react-final-form";
-import { SwitchGroup, TextField } from "./inputs";
-import { NumberField, SelectField } from "./inputs/compact";
-import DEBUG from "./debug";
-import APIClient from "../api/APIClient";
-import { queryClient } from "../App";
-import { ActionTypeNameMap, ActionTypeOptions } from "../domain/constants";
-import { AlertWarning } from "./alerts";
-import { DeleteModal } from "./modals";
-
-interface DownloadClientSelectProps {
-  name: string;
-  action: Action;
-  clients: DownloadClient[];
-}
-
-function DownloadClientSelect({
-  name,
-  action,
-  clients,
-}: DownloadClientSelectProps) {
-  return (
-    <div className="col-span-6 sm:col-span-6">
-      <Field
-        name={name}
-        type="select"
-        render={({ input }) => (
-          <Listbox value={input.value} onChange={input.onChange}>
-            {({ open }) => (
-              <>
-                <Listbox.Label className="block text-xs font-bold text-gray-700 uppercase tracking-wide">
-                  Client
-                </Listbox.Label>
-                <div className="mt-2 relative">
-                  <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                    <span className="block truncate">
-                      {input.value
-                        ? clients.find((c) => c.id === input.value)!.name
-                        : "Choose a client"}
-                    </span>
-                    {/*<span className="block truncate">Choose a client</span>*/}
-                    <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                      <SelectorIcon
-                        className="h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options
-                      static
-                      className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                    >
-                      {clients
-                        .filter((c) => c.type === action.type)
-                        .map((client: any) => (
-                          <Listbox.Option
-                            key={client.id}
-                            className={({ active }) =>
-                              classNames(
-                                active
-                                  ? "text-white bg-indigo-600"
-                                  : "text-gray-900",
-                                "cursor-default select-none relative py-2 pl-3 pr-9"
-                              )
-                            }
-                            value={client.id}
-                          >
-                            {({ selected, active }) => (
-                              <>
-                                <span
-                                  className={classNames(
-                                    selected ? "font-semibold" : "font-normal",
-                                    "block truncate"
-                                  )}
-                                >
-                                  {client.name}
-                                </span>
-
-                                {selected ? (
-                                  <span
-                                    className={classNames(
-                                      active ? "text-white" : "text-indigo-600",
-                                      "absolute inset-y-0 right-0 flex items-center pr-4"
-                                    )}
-                                  >
-                                    <CheckIcon
-                                      className="h-5 w-5"
-                                      aria-hidden="true"
-                                    />
-                                  </span>
-                                ) : null}
-                              </>
-                            )}
-                          </Listbox.Option>
-                        ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              </>
-            )}
-          </Listbox>
-        )}
-      />
-    </div>
-  );
-}
-
-interface FilterListProps {
-  actions: Action[];
-  clients: DownloadClient[];
-  filterID: number;
-}
-
-export function FilterActionList({
-  actions,
-  clients,
-  filterID,
-}: FilterListProps) {
-  useEffect(() => {
-    // console.log("render list")
-  }, []);
-
-  return (
-    <div className="bg-white shadow overflow-hidden sm:rounded-md">
-      <ul className="divide-y divide-gray-200">
-        {actions.map((action, idx) => (
-          <ListItem
-            action={action}
-            clients={clients}
-            filterID={filterID}
-            key={action.id}
-            idx={idx}
-          />
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-interface ListItemProps {
-  action: Action;
-  clients: DownloadClient[];
-  filterID: number;
-  idx: number;
-}
-
-function ListItem({ action, clients, filterID, idx }: ListItemProps) {
-  const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
-  const [edit, toggleEdit] = useToggle(false);
-
-  const deleteMutation = useMutation(
-    (actionID: number) => APIClient.actions.delete(actionID),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(["filter", filterID]);
-        toggleDeleteModal();
-      },
-    }
-  );
-
-  const enabledMutation = useMutation(
-    (actionID: number) => APIClient.actions.toggleEnable(actionID),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(["filter", filterID]);
-      },
-    }
-  );
-
-  const updateMutation = useMutation(
-    (action: Action) => APIClient.actions.update(action),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(["filter", filterID]);
-      },
-    }
-  );
-
-  const toggleActive = () => {
-    enabledMutation.mutate(action.id);
-  };
-
-  useEffect(() => { }, [action]);
-
-  const cancelButtonRef = useRef(null);
-
-  const deleteAction = () => {
-    deleteMutation.mutate(action.id);
-  };
-
-  const onSubmit = (action: Action) => {
-    // TODO clear data depending on type
-    updateMutation.mutate(action);
-  };
-
-  const TypeForm = (action: Action) => {
-    switch (action.type) {
-      case "TEST":
-        return (
-          <AlertWarning
-            title="Notice"
-            text="The test action does nothing except to show if the filter works."
-          />
-        );
-      case "EXEC":
-        return (
-          <div>
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <TextField
-                name="exec_cmd"
-                label="Command"
-                columns={6}
-                placeholder="Path to program eg. /bin/test"
-              />
-              <TextField
-                name="exec_args"
-                label="Arguments"
-                columns={6}
-                placeholder="Arguments eg. --test"
-              />
-            </div>
-          </div>
-        );
-      case "WATCH_FOLDER":
-        return (
-          <div className="mt-6 grid grid-cols-12 gap-6">
-            <TextField
-              name="watch_folder"
-              label="Watch folder"
-              columns={6}
-              placeholder="Watch directory eg. /home/user/rwatch"
-            />
-          </div>
-        );
-      case "QBITTORRENT":
-        return (
-          <div className="w-full">
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <DownloadClientSelect
-                name="client_id"
-                action={action}
-                clients={clients}
-              />
-
-              <div className="col-span-6 sm:col-span-6">
-                <TextField name="save_path" label="Save path" columns={6} />
-              </div>
-            </div>
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <TextField name="category" label="Category" columns={6} />
-              <TextField name="tags" label="Tags" columns={6} />
-            </div>
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <NumberField
-                name="limit_download_speed"
-                label="Limit download speed (KB/s)"
-              />
-              <NumberField
-                name="limit_upload_speed"
-                label="Limit upload speed (KB/s)"
-              />
-            </div>
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <div className="col-span-6">
-                <SwitchGroup name="paused" label="Add paused" />
-              </div>
-            </div>
-          </div>
-        );
-      case "DELUGE_V1":
-      case "DELUGE_V2":
-        return (
-          <div>
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <DownloadClientSelect
-                name="client_id"
-                action={action}
-                clients={clients}
-              />
-
-              <div className="col-span-12 sm:col-span-6">
-                <TextField name="save_path" label="Save path" columns={6} />
-              </div>
-            </div>
-
-            <div className="mt-6 col-span-12 sm:col-span-6">
-              <TextField name="label" label="Label" columns={6} />
-            </div>
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <NumberField
-                name="limit_download_speed"
-                label="Limit download speed (KB/s)"
-              />
-              <NumberField
-                name="limit_upload_speed"
-                label="Limit upload speed (KB/s)"
-              />
-            </div>
-
-            <div className="mt-6 grid grid-cols-12 gap-6">
-              <div className="col-span-6">
-                <SwitchGroup name="paused" label="Add paused" />
-              </div>
-            </div>
-          </div>
-        );
-      case "RADARR":
-      case "SONARR":
-      case "LIDARR":
-        return (
-          <div className="mt-6 grid grid-cols-12 gap-6">
-            <DownloadClientSelect
-              name="client_id"
-              action={action}
-              clients={clients}
-            />
-          </div>
-        );
-
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <li key={action.id}>
-      <div
-        className={classNames(
-          idx % 2 === 0 ? "bg-white" : "bg-gray-50",
-          "flex items-center sm:px-6 hover:bg-gray-50"
-        )}
-      >
-        <Switch
-          checked={action.enabled}
-          onChange={toggleActive}
-          className={classNames(
-            action.enabled ? "bg-teal-500" : "bg-gray-200",
-            "z-10 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-          )}
-        >
-          <span className="sr-only">Use setting</span>
-          <span
-            aria-hidden="true"
-            className={classNames(
-              action.enabled ? "translate-x-5" : "translate-x-0",
-              "inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
-            )}
-          />
-        </Switch>
-        <button className="px-4 py-4 w-full flex block" onClick={toggleEdit}>
-          <div className="min-w-0 flex-1 sm:flex sm:items-center sm:justify-between">
-            <div className="truncate">
-              <div className="flex text-sm">
-                <p className="ml-4 font-medium text-indigo-600 truncate">
-                  {action.name}
-                </p>
-              </div>
-            </div>
-            <div className="mt-4 flex-shrink-0 sm:mt-0 sm:ml-5">
-              <div className="flex overflow-hidden -space-x-1">
-                <span className="text-sm font-normal text-gray-500">
-                  {ActionTypeNameMap[action.type]}
-                </span>
-              </div>
-            </div>
-          </div>
-          <div className="ml-5 flex-shrink-0">
-            <ChevronRightIcon
-              className="h-5 w-5 text-gray-400"
-              aria-hidden="true"
-            />
-          </div>
-        </button>
-      </div>
-
-      {edit && (
-        <div className="px-4 py-4 flex items-center sm:px-6">
-          <Transition.Root show={deleteModalIsOpen} as={Fragment}>
-            <Dialog
-              as="div"
-              static
-              className="fixed inset-0 overflow-y-auto"
-              initialFocus={cancelButtonRef}
-              open={deleteModalIsOpen}
-              onClose={toggleDeleteModal}
-            >
-              <DeleteModal
-                isOpen={deleteModalIsOpen}
-                buttonRef={cancelButtonRef}
-                toggle={toggleDeleteModal}
-                deleteAction={deleteAction}
-                title="Remove filter action"
-                text="Are you sure you want to remove this action? This action cannot be undone."
-              />
-            </Dialog>
-          </Transition.Root>
-
-          <Form
-            initialValues={{
-              id: action.id,
-              name: action.name,
-              enabled: action.enabled,
-              type: action.type,
-              watch_folder: action.watch_folder,
-              exec_cmd: action.exec_cmd,
-              exec_args: action.exec_args,
-              category: action.category,
-              tags: action.tags,
-              label: action.label,
-              save_path: action.save_path,
-              paused: action.paused,
-              ignore_rules: action.ignore_rules,
-              limit_upload_speed: action.limit_upload_speed || 0,
-              limit_download_speed: action.limit_download_speed || 0,
-              filter_id: action.filter_id,
-              client_id: action.client_id,
-            }}
-            onSubmit={onSubmit}
-          >
-            {({ handleSubmit, values }) => {
-              return (
-                <form onSubmit={handleSubmit} className="w-full">
-                  <div className="mt-6 grid grid-cols-12 gap-6">
-                    <SelectField
-                      name="type"
-                      label="Type"
-                      optionDefaultText="Select yype"
-                      options={ActionTypeOptions}
-                    />
-
-                    <TextField name="name" label="Name" columns={6} />
-                  </div>
-
-                  {TypeForm(values)}
-
-                  <div className="pt-6 divide-y divide-gray-200">
-                    <div className="mt-4 pt-4 flex justify-between">
-                      <button
-                        type="button"
-                        className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
-                        onClick={toggleDeleteModal}
-                      >
-                        Remove
-                      </button>
-
-                      <div>
-                        <button
-                          type="button"
-                          className="bg-white border border-gray-300 rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                        >
-                          Cancel
-                        </button>
-                        <button
-                          type="submit"
-                          className="ml-4 relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                        >
-                          Save
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-
-                  <DEBUG values={values} />
-                </form>
-              );
-            }}
-          </Form>
-        </div>
-      )}
-    </li>
-  );
-}
diff --git a/web/src/components/alerts/index.ts b/web/src/components/alerts/index.ts
deleted file mode 100644
index 8f5135b..0000000
--- a/web/src/components/alerts/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as AlertWarning } from "./warning";
diff --git a/web/src/components/alerts/warning.tsx b/web/src/components/alerts/index.tsx
similarity index 87%
rename from web/src/components/alerts/warning.tsx
rename to web/src/components/alerts/index.tsx
index 0d9908f..8833122 100644
--- a/web/src/components/alerts/warning.tsx
+++ b/web/src/components/alerts/index.tsx
@@ -1,12 +1,12 @@
+
 import { ExclamationIcon } from "@heroicons/react/solid";
-import React from "react";
 
 interface props {
   title: string;
   text: string;
 }
 
-function AlertWarning({ title, text }: props) {
+export function AlertWarning({ title, text }: props) {
   return (
     <div className="p-4">
       <div className="rounded-md bg-yellow-50 p-4">
@@ -28,5 +28,3 @@ function AlertWarning({ title, text }: props) {
     </div>
   );
 }
-
-export default AlertWarning;
diff --git a/web/src/components/debug.tsx b/web/src/components/debug.tsx
index 9a59580..7422fef 100644
--- a/web/src/components/debug.tsx
+++ b/web/src/components/debug.tsx
@@ -1,4 +1,10 @@
-const DEBUG = ({ values }: any) => {
+import { FC } from "react"
+
+interface DebugProps {
+    values: unknown;
+}
+
+const DEBUG: FC<DebugProps> = ({ values }) => {
     if (process.env.NODE_ENV !== "development") {
         return null;
     }
diff --git a/web/src/components/empty/EmptySimple.tsx b/web/src/components/empty/EmptySimple.tsx
deleted file mode 100644
index 75679c7..0000000
--- a/web/src/components/empty/EmptySimple.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { PlusIcon } from "@heroicons/react/solid";
-
-interface props {
-    title: string;
-    subtitle: string;
-    buttonText: string;
-    buttonAction: any;
-}
-
-const EmptySimple = ({ title, subtitle, buttonText, buttonAction }: props) => (
-    <div className="text-center py-8">
-        <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
-        <p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>
-        <div className="mt-6">
-            <button
-                type="button"
-                onClick={buttonAction}
-                className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-            >
-                <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
-                {buttonText}
-            </button>
-        </div>
-    </div>
-)
-
-export default EmptySimple;
\ No newline at end of file
diff --git a/web/src/components/emptystates/index.tsx b/web/src/components/emptystates/index.tsx
new file mode 100644
index 0000000..7796afd
--- /dev/null
+++ b/web/src/components/emptystates/index.tsx
@@ -0,0 +1,48 @@
+import { PlusIcon } from "@heroicons/react/solid";
+
+interface EmptySimpleProps {
+    title: string;
+    subtitle: string;
+    buttonText: string;
+    buttonAction: any;
+}
+
+export const EmptySimple = ({ title, subtitle, buttonText, buttonAction }: EmptySimpleProps) => (
+    <div className="text-center py-8">
+        <h3 className="mt-2 text-sm font-medium text-gray-900 dark:text-white">{title}</h3>
+        <p className="mt-1 text-sm text-gray-500 dark:text-gray-200">{subtitle}</p>
+        <div className="mt-6">
+            <button
+                type="button"
+                onClick={buttonAction}
+                className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+            >
+                <PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+                {buttonText}
+            </button>
+        </div>
+    </div>
+)
+
+interface EmptyListStateProps {
+    text: string;
+    buttonText?: string;
+    buttonOnClick?: any;
+}
+
+export function EmptyListState({ text, buttonText, buttonOnClick }: EmptyListStateProps) {
+    return (
+        <div className="px-4 py-12 flex flex-col items-center">
+            <p className="text-center text-gray-500 dark:text-white">{text}</p>
+            {buttonText && buttonOnClick && (
+                <button
+                    type="button"
+                    className="relative inline-flex items-center px-4 py-2 mt-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                    onClick={buttonOnClick}
+                >
+                    {buttonText}
+                </button>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/web/src/components/headings/TitleSubtitle.tsx b/web/src/components/headings/index.tsx
similarity index 68%
rename from web/src/components/headings/TitleSubtitle.tsx
rename to web/src/components/headings/index.tsx
index 1da65af..8f2cede 100644
--- a/web/src/components/headings/TitleSubtitle.tsx
+++ b/web/src/components/headings/index.tsx
@@ -1,15 +1,13 @@
-import React from "react";
+import { FC } from "react";
 
 interface Props {
     title: string;
     subtitle: string;
 }
 
-const TitleSubtitle: React.FC<Props> = ({ title, subtitle }) => (
+export const TitleSubtitle: FC<Props> = ({ title, subtitle }) => (
     <div>
         <h2 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{title}</h2>
         <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{subtitle}</p>
     </div>
-)
-
-export default TitleSubtitle;
\ No newline at end of file
+)
\ No newline at end of file
diff --git a/web/src/components/inputs/Error.tsx b/web/src/components/inputs/Error.tsx
deleted file mode 100644
index 73f4693..0000000
--- a/web/src/components/inputs/Error.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import { Field } from "react-final-form";
-
-interface Props {
-    name: string;
-    classNames?: string;
-    subscribe?: any;
-}
-
-const Error: React.FC<Props> = ({ name, classNames }) => (
-    <Field
-        name={name}
-        subscribe={{ touched: true, error: true }}
-        render={({ meta: { touched, error } }) =>
-            touched && error ? <span className={classNames}>{error}</span> : null
-        }
-    />
-);
-
-export default Error;
diff --git a/web/src/components/inputs/MultiSelectField.tsx b/web/src/components/inputs/MultiSelectField.tsx
deleted file mode 100644
index 4ec41c4..0000000
--- a/web/src/components/inputs/MultiSelectField.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-import {Field} from "react-final-form";
-import { MultiSelect } from "react-multi-select-component";
-import {classNames, COL_WIDTHS} from "../../styles/utils";
-
-interface Props {
-    label?: string;
-    options?: [] | any;
-    name: string;
-    className?: string;
-    columns?: COL_WIDTHS;
-}
-
-const MultiSelectField: React.FC<Props> = ({
-                                               name,
-                                               label,
-                                               options,
-                                               className,
-                                               columns
-                                           }) => (
-        <div
-            className={classNames(
-                columns ? `col-span-${columns}` : "col-span-12"
-            )}
-        >
-            <label
-                className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase"
-                htmlFor={label}
-            >
-                {label}
-            </label>
-            <Field
-                name={name}
-                parse={val => val && val.map((item: any) => item.value)}
-                format={val =>
-                    val &&
-                    val.map((item: any) => options.find((o: any) => o.value === item))
-                }
-                render={({input, meta}) => (
-                    <MultiSelect
-                        {...input}
-                        options={options}
-                        labelledBy={name}
-                    />
-                )}
-            />
-        </div>
- );
-
-export default MultiSelectField;
diff --git a/web/src/components/inputs/PasswordField.tsx b/web/src/components/inputs/PasswordField.tsx
deleted file mode 100644
index ffd904f..0000000
--- a/web/src/components/inputs/PasswordField.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Field } from "react-final-form";
-import React from "react";
-import Error from "./Error";
-import { classNames } from "../../styles/utils";
-
-type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-interface Props {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    columns?: COL_WIDTHS;
-    className?: string;
-    autoComplete?: string;
-}
-
-const PasswordField: React.FC<Props> = ({ name, label, placeholder, columns, className, autoComplete }) => (
-    <div
-        className={classNames(
-            columns ? `col-span-${columns}` : "col-span-12"
-        )}
-    >
-        {label && (
-            <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-white uppercase tracking-wide">
-                {label}
-            </label>
-        )}
-        <Field
-            name={name}
-            render={({ input }) => (
-                <input
-                    {...input}
-                    id={name}
-                    type="password"
-                    autoComplete={autoComplete}
-                    className="mt-2 block w-full border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                    placeholder={placeholder}
-                />
-            )}
-        />
-        <div>
-            <Error name={name} classNames="text-red mt-2" />
-        </div>
-    </div>
-)
-
-export default PasswordField;
\ No newline at end of file
diff --git a/web/src/components/inputs/RadioFieldset.tsx b/web/src/components/inputs/RadioFieldset.tsx
deleted file mode 100644
index 46a8598..0000000
--- a/web/src/components/inputs/RadioFieldset.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from "react";
-import {Field} from "react-final-form";
-
-export interface radioFieldsetOption {
-    label: string;
-    description: string;
-    value: string;
-}
-
-interface props {
-    name: string;
-    legend: string;
-    options: radioFieldsetOption[];
-}
-
-const RadioFieldset: React.FC<props> = ({ name, legend,options }) => (
-    <fieldset>
-        <div className="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
-            <div>
-                <legend className="text-sm font-medium text-gray-900">{legend}</legend>
-            </div>
-            <div className="space-y-5 sm:col-span-2">
-                <div className="space-y-5 sm:mt-0">
-
-                    {options.map((opt, idx) => (
-                        <div className="relative flex items-start" key={idx}>
-                            <div className="absolute flex items-center h-5">
-                                <Field
-                                    name={name}
-                                    type="radio"
-                                    render={({input}) => (
-                                        <input
-                                            {...input}
-                                            id={name}
-                                            value={opt.value}
-                                            // type="radio"
-                                            checked={input.checked}
-                                            className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-                                        />
-                                    )}
-                                />
-                            </div>
-                            <div className="pl-7 text-sm">
-                                <label htmlFor={opt.value} className="font-medium text-gray-900">
-                                    {opt.label}
-                                </label>
-                                <p id={opt.value+"_description"} className="text-gray-500">
-                                    {opt.description}
-                                </p>
-                            </div>
-                        </div>
-                    ))}
-
-                </div>
-            </div>
-        </div>
-    </fieldset>
-)
-
-export default RadioFieldset;
diff --git a/web/src/components/inputs/SwitchGroup.tsx b/web/src/components/inputs/SwitchGroup.tsx
deleted file mode 100644
index af41fec..0000000
--- a/web/src/components/inputs/SwitchGroup.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from "react";
-import { Switch } from "@headlessui/react";
-import { Field } from "react-final-form";
-import { classNames } from "../../styles/utils";
-
-interface Props {
-    name: string;
-    label: string;
-    description?: string;
-    defaultValue?: boolean;
-    className?: string;
-}
-
-const SwitchGroup: React.FC<Props> = ({ name, label, description, defaultValue }) => (
-    <ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
-        <Switch.Group as="li" className="py-4 flex items-center justify-between">
-            <div className="flex flex-col">
-                <Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
-                    passive>
-                    {label}
-                </Switch.Label>
-                {description && (
-                    <Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
-                        {description}
-                    </Switch.Description>
-                )}
-            </div>
-
-            <Field
-                name={name}
-                defaultValue={defaultValue as any}
-                render={({ input: { onChange, checked, value } }) => (
-                    <Switch
-                        value={value}
-                        checked={value}
-                        onChange={onChange}
-                        className={classNames(
-                            value ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-500',
-                            'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
-                        )}
-                    >
-                        <span className="sr-only">Use setting</span>
-                        <span
-                            aria-hidden="true"
-                            className={classNames(
-                                value ? 'translate-x-5' : 'translate-x-0',
-                                'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
-                            )}
-                        />
-                    </Switch>
-                )}
-            />
-        </Switch.Group>
-    </ul>
-)
-
-export default SwitchGroup;
\ No newline at end of file
diff --git a/web/src/components/inputs/TextAreaWide.tsx b/web/src/components/inputs/TextAreaWide.tsx
deleted file mode 100644
index 24402f5..0000000
--- a/web/src/components/inputs/TextAreaWide.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import {Field} from "react-final-form";
-import React from "react";
-import Error from "./Error";
-import {classNames} from "../../styles/utils";
-
-interface Props {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    className?: string;
-    required?: boolean;
-}
-
-const TextAreaWide: React.FC<Props> = ({name, label, placeholder, required, className}) => (
-    <div
-        className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-        <div>
-
-            <label htmlFor={name} className="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2">
-                {label} {required && <span className="text-gray-500">*</span>}
-            </label>
-        </div>
-        <div className="sm:col-span-2">
-            <Field
-                name={name}
-                render={({input, meta}) => (
-                    <textarea
-                        {...input}
-                        id={name}
-                        className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 focus:border-indigo-500 border-gray-300", "block w-full shadow-sm sm:text-sm   rounded-md")}
-                        placeholder={placeholder}
-                    />
-                )}
-            />
-            <Error name={name} classNames="block text-red-500 mt-2"/>
-        </div>
-    </div>
-)
-
-export default TextAreaWide;
diff --git a/web/src/components/inputs/TextField.tsx b/web/src/components/inputs/TextField.tsx
deleted file mode 100644
index 22ffb80..0000000
--- a/web/src/components/inputs/TextField.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from "react";
-import { Field } from "react-final-form";
-import Error from "./Error";
-import { classNames } from "../../styles/utils";
-
-type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-interface Props {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    columns?: COL_WIDTHS;
-    className?: string;
-    autoComplete?: string;
-}
-
-const TextField: React.FC<Props> = ({ name, label, placeholder, columns, className, autoComplete }) => (
-    <div
-        className={classNames(
-            columns ? `col-span-${columns}` : "col-span-12"
-        )}
-    >
-        {label && (
-            <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-white uppercase tracking-wide">
-                {label}
-            </label>
-        )}
-        <Field
-            name={name}
-            render={({ input }) => (
-                <input
-                    {...input}
-                    id={name}
-                    type="text"
-                    value={input.value}
-                    autoComplete={autoComplete}
-                    className="mt-2 block w-full border border-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:text-white rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
-                    placeholder={placeholder}
-                />
-            )}
-        />
-        <div>
-            <Error name={name} classNames="text-red mt-2" />
-        </div>
-    </div>
-)
-
-export default TextField;
\ No newline at end of file
diff --git a/web/src/components/inputs/TextFieldWide.tsx b/web/src/components/inputs/TextFieldWide.tsx
deleted file mode 100644
index 3350249..0000000
--- a/web/src/components/inputs/TextFieldWide.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import { Field } from "react-final-form";
-import Error from "./Error";
-import { classNames } from "../../styles/utils";
-
-interface Props {
-    name: string;
-    label?: string;
-    help?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    className?: string;
-    required?: boolean;
-    hidden?: boolean;
-}
-
-const TextFieldWide: React.FC<Props> = ({ name, label, help, placeholder, defaultValue, required, hidden, className }) => (
-    <div hidden={hidden}
-        className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-        <div>
-
-            <label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
-                {label} {required && <span className="text-gray-500">*</span>}
-            </label>
-        </div>
-        <div className="sm:col-span-2">
-            <Field
-                name={name}
-                defaultValue={defaultValue}
-                render={({ input, meta }) => (
-                    <input
-                        {...input}
-                        id={name}
-                        type="text"
-                        className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
-                        placeholder={placeholder}
-                        hidden={hidden}
-                    />
-                )}
-            />
-            {help && (
-                <p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
-            )}
-            <Error name={name} classNames="block text-red-500 mt-2" />
-        </div>
-    </div>
-)
-
-export default TextFieldWide;
diff --git a/web/src/components/inputs/common.tsx b/web/src/components/inputs/common.tsx
new file mode 100644
index 0000000..b4e9edd
--- /dev/null
+++ b/web/src/components/inputs/common.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { Field } from "formik";
+
+interface ErrorFieldProps {
+    name: string;
+    classNames?: string;
+    subscribe?: any;
+}
+
+const ErrorField: React.FC<ErrorFieldProps> = ({ name, classNames }) => (
+    <Field name={name} subscribe={{ touched: true, error: true }}>
+        {({ meta: { touched, error } }: any) =>
+            touched && error ? <span className={classNames}>{error}</span> : null
+        }
+    </Field>
+);
+export { ErrorField }
\ No newline at end of file
diff --git a/web/src/components/inputs/compact/NumberField.tsx b/web/src/components/inputs/compact/NumberField.tsx
deleted file mode 100644
index d010cec..0000000
--- a/web/src/components/inputs/compact/NumberField.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { Field } from "react-final-form";
-import React from "react";
-import Error from "../Error";
-import { classNames } from "../../../styles/utils";
-
-interface Props {
-  name: string;
-  label?: string;
-  placeholder?: string;
-  className?: string;
-  required?: boolean;
-}
-
-const NumberField: React.FC<Props> = ({
-  name,
-  label,
-  placeholder,
-  required,
-  className,
-}) => (
-  <div className="col-span-12 sm:col-span-6">
-    <label htmlFor={name} className="block text-sm font-medium text-gray-700">
-      {label}
-    </label>
-
-    <Field name={name} parse={(v) => v & parseInt(v, 10)}>
-      {({ input, meta }) => (
-        <div className="sm:col-span-2">
-          <input
-            type="number"
-            {...input}
-            className={classNames(
-              meta.touched && meta.error
-                ? "focus:ring-red-500 focus:border-red-500 border-red-500"
-                : "focus:ring-indigo-500 focus:border-indigo-500 border-gray-300",
-              "block w-full shadow-sm sm:text-sm rounded-md"
-            )}
-            placeholder={placeholder}
-          />
-          <Error name={name} classNames="block text-red-500 mt-2" />
-        </div>
-      )}
-    </Field>
-  </div>
-);
-
-export default NumberField;
diff --git a/web/src/components/inputs/compact/SelectField.tsx b/web/src/components/inputs/compact/SelectField.tsx
deleted file mode 100644
index 1147466..0000000
--- a/web/src/components/inputs/compact/SelectField.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Field } from "react-final-form";
-import { Listbox, Transition } from "@headlessui/react";
-import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
-import { Fragment } from "react";
-import { classNames } from "../../../styles/utils";
-
-interface SelectOption {
-  label: string;
-  value: string;
-}
-
-interface props {
-  name: string;
-  label: string;
-  optionDefaultText: string;
-  options: SelectOption[];
-}
-
-function SelectField({ name, label, optionDefaultText, options }: props) {
-  return (
-    <div className="col-span-6">
-      <Field
-        name={name}
-        type="select"
-        render={({ input }) => (
-          <Listbox value={input.value} onChange={input.onChange}>
-            {({ open }) => (
-              <>
-                <Listbox.Label className="block text-xs font-bold text-gray-700 uppercase tracking-wide">
-                  {label}
-                </Listbox.Label>
-                <div className="mt-2 relative">
-                  <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                    <span className="block truncate">
-                      {input.value
-                        ? options.find((c) => c.value === input.value)!.label
-                        : optionDefaultText}
-                    </span>
-                    <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                      <SelectorIcon
-                        className="h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options
-                      static
-                      className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                    >
-                      {options.map((opt) => (
-                        <Listbox.Option
-                          key={opt.value}
-                          className={({ active }) =>
-                            classNames(
-                              active
-                                ? "text-white bg-indigo-600"
-                                : "text-gray-900",
-                              "cursor-default select-none relative py-2 pl-3 pr-9"
-                            )
-                          }
-                          value={opt.value}
-                        >
-                          {({ selected, active }) => (
-                            <>
-                              <span
-                                className={classNames(
-                                  selected ? "font-semibold" : "font-normal",
-                                  "block truncate"
-                                )}
-                              >
-                                {opt.label}
-                              </span>
-
-                              {selected ? (
-                                <span
-                                  className={classNames(
-                                    active ? "text-white" : "text-indigo-600",
-                                    "absolute inset-y-0 right-0 flex items-center pr-4"
-                                  )}
-                                >
-                                  <CheckIcon
-                                    className="h-5 w-5"
-                                    aria-hidden="true"
-                                  />
-                                </span>
-                              ) : null}
-                            </>
-                          )}
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              </>
-            )}
-          </Listbox>
-        )}
-      />
-    </div>
-  );
-}
-
-export default SelectField;
diff --git a/web/src/components/inputs/compact/index.ts b/web/src/components/inputs/compact/index.ts
deleted file mode 100644
index 94cd4b2..0000000
--- a/web/src/components/inputs/compact/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default as NumberField } from "./NumberField";
-export { default as SelectField } from "./SelectField";
diff --git a/web/src/components/inputs/index.ts b/web/src/components/inputs/index.ts
index d38d278..28a9403 100644
--- a/web/src/components/inputs/index.ts
+++ b/web/src/components/inputs/index.ts
@@ -1,7 +1,7 @@
-export { default as TextField } from "./TextField";
-export { default as TextFieldWide } from "./TextFieldWide";
-export { default as PasswordField } from "./PasswordField";
-export { default as TextAreaWide } from "./TextAreaWide";
-export { default as MultiSelectField } from "./MultiSelectField";
-export { default as RadioFieldset } from "./RadioFieldset";
-export { default as SwitchGroup } from "./SwitchGroup";
+export { ErrorField } from "./common";
+export { TextField, NumberField, PasswordField } from "./input";
+export { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "./input_wide";
+export { RadioFieldsetWide } from "./radio";
+export { DownloadClientSelect, MultiSelect, Select} from "./select";
+export { SwitchGroup } from "./switch";
+
diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx
new file mode 100644
index 0000000..4510293
--- /dev/null
+++ b/web/src/components/inputs/input.tsx
@@ -0,0 +1,159 @@
+import React from "react";
+import { Field } from "formik";
+import { classNames } from "../../utils";
+import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
+import { useToggle } from "../../hooks/hooks";
+
+type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+interface TextFieldProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    columns?: COL_WIDTHS;
+    className?: string;
+    autoComplete?: string;
+}
+
+const TextField: React.FC<TextFieldProps> = ({ name, label, placeholder, columns, className, autoComplete }) => (
+    <div
+        className={classNames(
+            columns ? `col-span-${columns}` : "col-span-12"
+        )}
+    >
+        {label && (
+            <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                {label}
+            </label>
+        )}
+        <Field name={name}>
+            {({
+                field,
+                meta,
+            }: any) => (
+                <div>
+                    <input
+                        {...field}
+                        id={name}
+                        type="text"
+                        autoComplete={autoComplete}
+                        className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+                        placeholder={placeholder}
+                    />
+
+                    {meta.touched && meta.error && (
+                        <div className="error">{meta.error}</div>
+                    )}
+                </div>
+            )}
+        </Field>
+    </div>
+)
+
+interface PasswordFieldProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    columns?: COL_WIDTHS;
+    className?: string;
+    autoComplete?: string;
+    defaultValue?: string;
+    help?: string;
+    required?: boolean;
+}
+
+const PasswordField: React.FC<PasswordFieldProps> = ({ name, label, placeholder, defaultValue, columns, className, autoComplete, help, required }) => {
+    const [isVisible, toggleVisibility] = useToggle(false)
+
+    return (
+        <div
+            className={classNames(
+                columns ? `col-span-${columns}` : "col-span-12"
+            )}
+        >
+            {label && (
+                <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                    {label} {required && <span className="text-gray-500">*</span>}
+                </label>
+            )}
+            <Field name={name} defaultValue={defaultValue}>
+                {({
+                    field,
+                    meta,
+                }: any) => (
+                    <div className="sm:col-span-2 relative">
+                        <input
+                            {...field}
+                            id={name}
+                            type={isVisible ? "text" : "password"}
+                            autoComplete={autoComplete}
+                            className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "mt-2 block w-full dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
+                            placeholder={placeholder}
+                        />
+
+                        <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
+                            {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+                        </div>
+
+                        {help && (
+                            <p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
+                        )}
+
+                        {meta.touched && meta.error && (
+                            <div className="error">{meta.error}</div>
+                        )}
+                    </div>
+                )}
+            </Field>
+        </div>
+    )
+}
+
+interface NumberFieldProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    className?: string;
+    required?: boolean;
+}
+
+const NumberField: React.FC<NumberFieldProps> = ({
+    name,
+    label,
+    placeholder,
+    required,
+    className,
+}) => (
+    <div className="col-span-12 sm:col-span-6">
+        <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+            {label}
+        </label>
+
+        <Field name={name} type="number">
+            {({
+                field,
+                meta,
+            }: any) => (
+                <div className="sm:col-span-2">
+                    <input
+                        type="number"
+                        {...field}
+                        className={classNames(
+                            meta.touched && meta.error
+                                ? "focus:ring-red-500 focus:border-red-500 border-red-500"
+                                : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300",
+                            "mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-sm dark:text-gray-100 sm:text-sm rounded-md"
+                        )}
+                        placeholder={placeholder}
+                    />
+                    {meta.touched && meta.error && (
+                        <div className="error">{meta.error}</div>
+                    )}
+                </div>
+
+            )}
+        </Field>
+    </div>
+);
+
+export { TextField, PasswordField, NumberField };
diff --git a/web/src/components/inputs/input_wide.tsx b/web/src/components/inputs/input_wide.tsx
new file mode 100644
index 0000000..ccd7b8d
--- /dev/null
+++ b/web/src/components/inputs/input_wide.tsx
@@ -0,0 +1,217 @@
+import React from "react";
+import { Field, FieldProps } from "formik";
+import { classNames } from "../../utils";
+import { useToggle } from "../../hooks/hooks";
+import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
+import { Switch } from "@headlessui/react";
+import { ErrorField } from "./common"
+
+interface TextFieldWideProps {
+    name: string;
+    label?: string;
+    help?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    className?: string;
+    required?: boolean;
+    hidden?: boolean;
+}
+
+const TextFieldWide: React.FC<TextFieldWideProps> = ({ name, label, help, placeholder, defaultValue, required, hidden, className }) => (
+    <div hidden={hidden} className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+        <div>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
+                {label} {required && <span className="text-gray-500">*</span>}
+            </label>
+        </div>
+        <div className="sm:col-span-2">
+            <Field name={name} value={defaultValue}>
+                {({ field, meta }: FieldProps) => (
+                    <input
+                        {...field}
+                        id={name}
+                        type="text"
+                        value={field.value ? field.value : defaultValue ?? ""}
+                        onChange={field.onChange}
+                        className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md")}
+                        placeholder={placeholder}
+                        hidden={hidden}
+                    />
+                )}
+            </Field>
+            {help && (
+                <p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
+            )}
+            <ErrorField name={name} classNames="block text-red-500 mt-2" />
+        </div>
+    </div>
+)
+
+interface PasswordFieldWideProps {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    help?: string;
+    required?: boolean;
+}
+
+function PasswordFieldWide({ name, label, placeholder, defaultValue, help, required }: PasswordFieldWideProps) {
+    const [isVisible, toggleVisibility] = useToggle(false)
+
+    return (
+        <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+            <div>
+                <label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
+                    {label} {required && <span className="text-gray-500">*</span>}
+                </label>
+            </div>
+            <div className="sm:col-span-2">
+                <Field
+                    name={name}
+                    defaultValue={defaultValue}
+                >
+                    {({ field, meta }: FieldProps) => (
+                        <div className="relative">
+                            <input
+                                {...field}
+                                id={name}
+                                value={field.value ? field.value : defaultValue ?? ""}
+                                onChange={field.onChange}
+                                type={isVisible ? "text" : "password"}
+                                className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
+                                placeholder={placeholder}
+                            />
+                            <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
+                                {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
+                            </div>
+                        </div>
+                    )}
+                </Field>
+                {help && (
+                    <p className="mt-2 text-sm text-gray-500" id={`${name}-description`}>{help}</p>
+                )}
+                <ErrorField name={name} classNames="block text-red-500 mt-2" />
+            </div>
+        </div>
+    )
+}
+
+interface NumberFieldWideProps {
+    name: string;
+    label?: string;
+    help?: string;
+    placeholder?: string;
+    defaultValue?: number;
+    className?: string;
+    required?: boolean;
+    hidden?: boolean;
+}
+
+const NumberFieldWide: React.FC<NumberFieldWideProps> = ({
+    name,
+    label,
+    placeholder,
+    help,
+    defaultValue,
+    required,
+    hidden,
+    className,
+}) => (
+    <div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+        <div>
+            <label
+                htmlFor={name}
+                className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
+            >
+                {label} {required && <span className="text-gray-500">*</span>}
+            </label>
+        </div>
+        <div className="sm:col-span-2">
+            <Field
+                name={name}
+                defaultValue={defaultValue ?? 0}
+            >
+                {({ field, meta, form }: FieldProps) => (
+                    <input
+                        {...field}
+                        id={name}
+                        type="number"
+                        value={field.value ? field.value : defaultValue ?? 0}
+                        onChange={(e) => { form.setFieldValue(field.name, parseInt(e.target.value)) }}
+                        className={classNames(
+                            meta.touched && meta.error
+                                ? "focus:ring-red-500 focus:border-red-500 border-red-500"
+                                : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
+                            "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md"
+                        )}
+                        placeholder={placeholder}
+                    />
+                )}
+            </Field>
+            {help && (
+                <p className="mt-2 text-sm text-gray-500 dark:text-gray-200" id={`${name}-description`}>{help}</p>
+            )}
+            <ErrorField name={name} classNames="block text-red-500 mt-2" />
+        </div>
+    </div>
+);
+
+interface SwitchGroupWideProps {
+    name: string;
+    label: string;
+    description?: string;
+    defaultValue?: boolean;
+    className?: string;
+}
+
+const SwitchGroupWide: React.FC<SwitchGroupWideProps> = ({ name, label, description, defaultValue }) => (
+    <ul className="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
+        <Switch.Group as="li" className="py-4 flex items-center justify-between">
+            <div className="flex flex-col">
+                <Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
+                    passive>
+                    {label}
+                </Switch.Label>
+                {description && (
+                    <Switch.Description className="text-sm text-gray-500 dark:text-gray-700">
+                        {description}
+                    </Switch.Description>
+                )}
+            </div>
+
+            <Field
+                name={name}
+                defaultValue={defaultValue as boolean}
+                type="checkbox"
+            >
+                {({ field, form }: FieldProps) => (
+                    <Switch
+                        {...field}
+                        type="button"
+                        value={field.value}
+                        checked={field.checked ?? false}
+                        onChange={value => {
+                            form.setFieldValue(field?.name ?? '', value)
+                        }}
+                        className={classNames(
+                            field.value ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-500',
+                            'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+                        )}
+                    >
+                        <span className="sr-only">Use setting</span>
+                        <span
+                            aria-hidden="true"
+                            className={classNames(
+                                field.value ? 'translate-x-5' : 'translate-x-0',
+                                'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
+                            )}
+                        />
+                    </Switch>
+                )}
+            </Field>
+        </Switch.Group>
+    </ul>
+)
+
+export { NumberFieldWide, TextFieldWide, PasswordFieldWide, SwitchGroupWide };
diff --git a/web/src/components/inputs/radio.tsx b/web/src/components/inputs/radio.tsx
new file mode 100644
index 0000000..0cf0610
--- /dev/null
+++ b/web/src/components/inputs/radio.tsx
@@ -0,0 +1,115 @@
+import { Fragment } from "react";
+import { Field, useFormikContext } from "formik";
+import { RadioGroup } from "@headlessui/react";
+import { classNames } from "../../utils";
+
+export interface radioFieldsetOption {
+    label: string;
+    description: string;
+    value: string;
+}
+
+interface props {
+    name: string;
+    legend: string;
+    options: radioFieldsetOption[];
+}
+
+function RadioFieldsetWide({ name, legend, options }: props) {
+    const {
+        values,
+        setFieldValue,
+    } = useFormikContext<any>();
+
+    const onChange = (value: string) => {
+        setFieldValue(name, value)
+    }
+
+    return (
+        <fieldset>
+            <div className="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
+                <div>
+                    <legend className="text-sm font-medium text-gray-900 dark:text-white">
+                        {legend}
+                    </legend>
+                </div>
+                <div className="space-y-5 sm:col-span-2">
+                    <div className="space-y-5 sm:mt-0">
+                        <Field name={name} type="radio">
+                            {() => (
+                                <RadioGroup value={values[name]} onChange={onChange}>
+                                    <RadioGroup.Label className="sr-only">
+                                        {legend}
+                                    </RadioGroup.Label>
+                                    <div className="bg-white dark:bg-gray-800 rounded-md -space-y-px">
+                                        {options.map((setting, settingIdx) => (
+                                            <RadioGroup.Option
+                                                key={setting.value}
+                                                value={setting.value}
+                                                className={({ checked }) =>
+                                                    classNames(
+                                                        settingIdx === 0
+                                                            ? "rounded-tl-md rounded-tr-md"
+                                                            : "",
+                                                        settingIdx === options.length - 1
+                                                            ? "rounded-bl-md rounded-br-md"
+                                                            : "",
+                                                        checked
+                                                            ? "bg-indigo-50 dark:bg-gray-700 border-indigo-200 dark:border-blue-600 z-10"
+                                                            : "border-gray-200 dark:border-gray-700",
+                                                        "relative border p-4 flex cursor-pointer focus:outline-none"
+                                                    )
+                                                }
+                                            >
+                                                {({ active, checked }) => (
+                                                    <Fragment>
+                                                        <span
+                                                            className={classNames(
+                                                                checked
+                                                                    ? "bg-indigo-600 dark:bg-blue-600 border-transparent"
+                                                                    : "bg-white border-gray-300 dark:border-gray-300",
+                                                                active
+                                                                    ? "ring-2 ring-offset-2 ring-indigo-500 dark:ring-blue-500"
+                                                                    : "",
+                                                                "h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
+                                                            )}
+                                                            aria-hidden="true"
+                                                        >
+                                                            <span className="rounded-full bg-white w-1.5 h-1.5" />
+                                                        </span>
+                                                        <div className="ml-3 flex flex-col">
+                                                            <RadioGroup.Label
+                                                                as="span"
+                                                                className={classNames(
+                                                                    checked ? "text-indigo-900 dark:text-blue-500" : "text-gray-900 dark:text-gray-300",
+                                                                    "block text-sm font-medium"
+                                                                )}
+                                                            >
+                                                                {setting.label}
+                                                            </RadioGroup.Label>
+                                                            <RadioGroup.Description
+                                                                as="span"
+                                                                className={classNames(
+                                                                    checked ? "text-indigo-700 dark:text-blue-500" : "text-gray-500",
+                                                                    "block text-sm"
+                                                                )}
+                                                            >
+                                                                {setting.description}
+                                                            </RadioGroup.Description>
+                                                        </div>
+                                                    </Fragment>
+                                                )}
+                                            </RadioGroup.Option>
+                                        ))}
+                                    </div>
+                                </RadioGroup>
+                            )}
+                        </Field>
+                    </div>
+                </div>
+            </div>
+        </fieldset>
+    );
+}
+
+export { RadioFieldsetWide };
diff --git a/web/src/components/inputs/select.tsx b/web/src/components/inputs/select.tsx
new file mode 100644
index 0000000..ed4a875
--- /dev/null
+++ b/web/src/components/inputs/select.tsx
@@ -0,0 +1,271 @@
+import { Fragment } from "react";
+import { MultiSelect as RMSC}  from "react-multi-select-component";
+import { Transition, Listbox } from "@headlessui/react";
+import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
+import { Action, DownloadClient } from "../../domain/interfaces";
+import { classNames, COL_WIDTHS } from "../../utils";
+import { Field } from "formik";
+
+interface MultiSelectProps {
+    label?: string;
+    options?: [] | any;
+    name: string;
+    className?: string;
+    columns?: COL_WIDTHS;
+}
+
+const MultiSelect: React.FC<MultiSelectProps> = ({
+    name,
+    label,
+    options,
+    className,
+    columns
+}) => (
+    <div
+        className={classNames(
+            columns ? `col-span-${columns}` : "col-span-12"
+        )}
+    >
+        <label
+            className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
+            htmlFor={label}
+        >
+            {label}
+        </label>
+
+        <Field name={name} type="select" multiple={true}>
+            {({
+                field,
+                form: { setFieldValue },
+            }: any) => (
+                <RMSC
+                    {...field}
+                    type="select"
+                    options={options}
+                    labelledBy={name}
+                    value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
+                    onChange={(values: any) => {
+                        let am = values && values.map((i: any) => i.value)
+
+                        setFieldValue(field.name, am)
+                    }}
+                    className="dark:bg-gray-700"
+                />
+            )}
+        </Field>
+    </div>
+);
+
+interface DownloadClientSelectProps {
+    name: string;
+    action: Action;
+    clients: DownloadClient[];
+}
+
+export default function DownloadClientSelect({
+    name, action, clients,
+}: DownloadClientSelectProps) {
+    return (
+        <div className="col-span-6 sm:col-span-6">
+            <Field name={name} type="select">
+                {({
+                    field,
+                    form: { setFieldValue },
+                }: any) => (
+                    <Listbox
+                        value={field.value}
+                        onChange={(value: any) => setFieldValue(field?.name, value)}
+                    >
+                        {({ open }) => (
+                            <>
+                                <Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                                    Client
+                                </Listbox.Label>
+                                <div className="mt-2 relative">
+                                    <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
+                                        <span className="block truncate">
+                                            {field.value
+                                                ? clients.find((c) => c.id === field.value)!.name
+                                                : "Choose a client"}
+                                        </span>
+                                        {/*<span className="block truncate">Choose a client</span>*/}
+                                        <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                                            <SelectorIcon
+                                                className="h-5 w-5 text-gray-400 dark:text-gray-300"
+                                                aria-hidden="true" />
+                                        </span>
+                                    </Listbox.Button>
+
+                                    <Transition
+                                        show={open}
+                                        as={Fragment}
+                                        leave="transition ease-in duration-100"
+                                        leaveFrom="opacity-100"
+                                        leaveTo="opacity-0"
+                                    >
+                                        <Listbox.Options
+                                            static
+                                            className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                                        >
+                                            {clients
+                                                .filter((c) => c.type === action.type)
+                                                .map((client: any) => (
+                                                    <Listbox.Option
+                                                        key={client.id}
+                                                        className={({ active }) => classNames(
+                                                            active
+                                                                ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
+                                                                : "text-gray-900 dark:text-gray-300",
+                                                            "cursor-default select-none relative py-2 pl-3 pr-9"
+                                                        )}
+                                                        value={client.id}
+                                                    >
+                                                        {({ selected, active }) => (
+                                                            <>
+                                                                <span
+                                                                    className={classNames(
+                                                                        selected ? "font-semibold" : "font-normal",
+                                                                        "block truncate"
+                                                                    )}
+                                                                >
+                                                                    {client.name}
+                                                                </span>
+
+                                                                {selected ? (
+                                                                    <span
+                                                                        className={classNames(
+                                                                            active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
+                                                                            "absolute inset-y-0 right-0 flex items-center pr-4"
+                                                                        )}
+                                                                    >
+                                                                        <CheckIcon
+                                                                            className="h-5 w-5"
+                                                                            aria-hidden="true" />
+                                                                    </span>
+                                                                ) : null}
+                                                            </>
+                                                        )}
+                                                    </Listbox.Option>
+                                                ))}
+                                        </Listbox.Options>
+                                    </Transition>
+                                </div>
+                            </>
+                        )}
+                    </Listbox>
+                )}
+            </Field>
+        </div>
+    );
+}
+
+interface SelectFieldOption {
+    label: string;
+    value: string;
+}
+
+interface SelectFieldProps {
+    name: string;
+    label: string;
+    optionDefaultText: string;
+    options: SelectFieldOption[];
+}
+
+function Select({ name, label, optionDefaultText, options }: SelectFieldProps) {
+    return (
+        <div className="col-span-6">
+            <Field name={name} type="select">
+                {({
+                    field,
+                    form: { setFieldValue },
+                }: any) => (
+                    <Listbox
+                        value={field.value}
+                        onChange={(value: any) => setFieldValue(field?.name, value)}
+                    >
+                        {({ open }) => (
+                            <>
+                                <Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                                    {label}
+                                </Listbox.Label>
+                                <div className="mt-2 relative">
+                                    <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
+                                        <span className="block truncate">
+                                            {field.value
+                                                ? options.find((c) => c.value === field.value)!.label
+                                                : optionDefaultText
+                                            }
+                                        </span>
+                                        <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                                            <SelectorIcon
+                                                className="h-5 w-5 text-gray-400 dark:text-gray-300"
+                                                aria-hidden="true"
+                                            />
+                                        </span>
+                                    </Listbox.Button>
+
+                                    <Transition
+                                        show={open}
+                                        as={Fragment}
+                                        leave="transition ease-in duration-100"
+                                        leaveFrom="opacity-100"
+                                        leaveTo="opacity-0"
+                                    >
+                                        <Listbox.Options
+                                            static
+                                            className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+                                        >
+                                            {options.map((opt) => (
+                                                <Listbox.Option
+                                                    key={opt.value}
+                                                    className={({ active }) =>
+                                                        classNames(
+                                                            active
+                                                                ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
+                                                                : "text-gray-900 dark:text-gray-300",
+                                                            "cursor-default select-none relative py-2 pl-3 pr-9"
+                                                        )
+                                                    }
+                                                    value={opt.value}
+                                                >
+                                                    {({ selected, active }) => (
+                                                        <>
+                                                            <span
+                                                                className={classNames(
+                                                                    selected ? "font-semibold" : "font-normal",
+                                                                    "block truncate"
+                                                                )}
+                                                            >
+                                                                {opt.label}
+                                                            </span>
+
+                                                            {selected ? (
+                                                                <span
+                                                                    className={classNames(
+                                                                        active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
+                                                                        "absolute inset-y-0 right-0 flex items-center pr-4"
+                                                                    )}
+                                                                >
+                                                                    <CheckIcon
+                                                                        className="h-5 w-5"
+                                                                        aria-hidden="true"
+                                                                    />
+                                                                </span>
+                                                            ) : null}
+                                                        </>
+                                                    )}
+                                                </Listbox.Option>
+                                            ))}
+                                        </Listbox.Options>
+                                    </Transition>
+                                </div>
+                            </>
+                        )}
+                    </Listbox>
+                )}
+            </Field>
+        </div>
+    );
+}
+
+export { MultiSelect, DownloadClientSelect, Select }
\ No newline at end of file
diff --git a/web/src/screens/filters/inputs/SwitchGroup.tsx b/web/src/components/inputs/switch.tsx
similarity index 52%
rename from web/src/screens/filters/inputs/SwitchGroup.tsx
rename to web/src/components/inputs/switch.tsx
index dc4ced8..fde780b 100644
--- a/web/src/screens/filters/inputs/SwitchGroup.tsx
+++ b/web/src/components/inputs/switch.tsx
@@ -1,9 +1,65 @@
-import React from "react";
-import { Switch } from "@headlessui/react";
-import { Field } from "formik";
-import { classNames } from "../../../styles/utils";
+import React, { InputHTMLAttributes } from 'react'
+import { Switch as HeadlessSwitch } from '@headlessui/react'
+import { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues, Field } from 'formik'
+import { classNames } from "../../utils";
 
-interface Props {
+type SwitchProps<V = any> = {
+    label: string
+    checked: boolean
+    disabled?: boolean
+    onChange: (value: boolean) => void
+    field?: FieldInputProps<V>
+    form?: FormikProps<FormikValues>
+    meta?: FieldMetaProps<V>
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+    label,
+    checked: $checked,
+    disabled = false,
+    onChange: $onChange,
+    field,
+    form,
+}) => {
+    const checked = field?.checked ?? $checked
+
+    return (
+        <HeadlessSwitch.Group as="div" className="flex items-center space-x-4">
+            <HeadlessSwitch.Label>{label}</HeadlessSwitch.Label>
+            <HeadlessSwitch
+                as="button"
+                name={field?.name}
+                disabled={disabled}
+                checked={checked}
+                onChange={value => {
+                    form?.setFieldValue(field?.name ?? '', value)
+                    $onChange && $onChange(value)
+                }}
+
+                className={classNames(
+                    checked ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-600',
+                    'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
+                )}
+            >
+                {({ checked }) => (
+                    <span
+                        aria-hidden="true"
+                        className={classNames(
+                            checked ? 'translate-x-5' : 'translate-x-0',
+                            'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
+                        )}
+                    />
+                )}
+            </HeadlessSwitch>
+        </HeadlessSwitch.Group>
+    )
+}
+
+export type SwitchFormikProps = SwitchProps & FieldProps & InputHTMLAttributes<HTMLInputElement>
+
+export const SwitchFormik: React.FC<SwitchProps> = args => <Switch {...args} />
+
+interface SwitchGroupProps {
     name: string;
     label?: string;
     description?: string;
@@ -11,18 +67,18 @@ interface Props {
     className?: string;
 }
 
-const SwitchGroup: React.FC<Props> = ({ name, label, description, defaultValue }) => (
+const SwitchGroup: React.FC<SwitchGroupProps> = ({ name, label, description, defaultValue }) => (
     <ul className="mt-2 divide-y divide-gray-200">
-        <Switch.Group as="li" className="py-4 flex items-center justify-between">
+        <HeadlessSwitch.Group as="li" className="py-4 flex items-center justify-between">
             {label && <div className="flex flex-col">
-                <Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-gray-100"
+                <HeadlessSwitch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-gray-100"
                     passive>
                     {label}
-                </Switch.Label>
+                </HeadlessSwitch.Label>
                 {description && (
-                    <Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
+                    <HeadlessSwitch.Description className="text-sm text-gray-500 dark:text-gray-400">
                         {description}
-                    </Switch.Description>
+                    </HeadlessSwitch.Description>
                 )}
             </div>
             }
@@ -82,8 +138,8 @@ const SwitchGroup: React.FC<Props> = ({ name, label, description, defaultValue }
                     </Switch>
                 )}
             /> */}
-        </Switch.Group>
+        </HeadlessSwitch.Group>
     </ul>
 )
 
-export default SwitchGroup;
\ No newline at end of file
+export { SwitchGroup }
\ No newline at end of file
diff --git a/web/src/components/inputs/wide/NumberField.tsx b/web/src/components/inputs/wide/NumberField.tsx
deleted file mode 100644
index 7083a03..0000000
--- a/web/src/components/inputs/wide/NumberField.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import React from "react";
-import { Field } from "react-final-form";
-import Error from "../Error";
-import { classNames } from "../../../styles/utils";
-
-interface Props {
-  name: string;
-  label?: string;
-  help?: string;
-  placeholder?: string;
-  defaultValue?: number;
-  className?: string;
-  required?: boolean;
-  hidden?: boolean;
-}
-
-const NumberFieldWide: React.FC<Props> = ({
-  name,
-  label,
-  placeholder,
-  help,
-  defaultValue,
-  required,
-  hidden,
-  className,
-}) => (
-  <div className="px-4 space-y-1 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-    <div>
-      <label
-        htmlFor={name}
-        className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
-      >
-        {label} {required && <span className="text-gray-500">*</span>}
-      </label>
-    </div>
-    <div className="sm:col-span-2">
-      <Field
-        name={name}
-        defaultValue={defaultValue}
-        parse={(v: any) => v & parseInt(v, 10)}
-        render={({ input, meta }) => (
-          <input
-            {...input}
-            id={name}
-            type="number"
-            className={classNames(
-              meta.touched && meta.error
-                ? "focus:ring-red-500 focus:border-red-500 border-red-500"
-                : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700",
-              "block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white rounded-md"
-            )}
-            placeholder={placeholder}
-          />
-        )}
-      />
-      {help && (
-        <p className="mt-2 text-sm text-gray-500 dark:text-gray-200" id={`${name}-description`}>{help}</p>
-      )}
-      <Error name={name} classNames="block text-red-500 mt-2" />
-    </div>
-  </div>
-);
-
-export default NumberFieldWide;
diff --git a/web/src/components/inputs/wide/PasswordField.tsx b/web/src/components/inputs/wide/PasswordField.tsx
deleted file mode 100644
index 3d23b29..0000000
--- a/web/src/components/inputs/wide/PasswordField.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Field } from "react-final-form";
-import Error from "../Error";
-import { classNames } from "../../../styles/utils";
-import { useToggle } from "../../../hooks/hooks";
-import { EyeIcon, EyeOffIcon } from "@heroicons/react/solid";
-
-interface Props {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    defaultValue?: string;
-    help?: string;
-    required?: boolean;
-}
-
-function PasswordField({ name, label, placeholder, defaultValue, help, required }: Props) {
-    const [isVisible, toggleVisibility] = useToggle(false)
-
-    return (
-        <div
-            className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-            <div>
-
-                <label htmlFor={name} className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2">
-                    {label} {required && <span className="text-gray-500">*</span>}
-                </label>
-            </div>
-            <div className="sm:col-span-2">
-                <Field
-                    name={name}
-                    defaultValue={defaultValue}
-                    render={({ input, meta }) => (
-                        <div className="relative">
-                            <input
-                                {...input}
-                                id={name}
-                                type={isVisible ? "text" : "password"}
-                                className={classNames(meta.touched && meta.error ? "focus:ring-red-500 focus:border-red-500 border-red-500" : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-700", "block w-full dark:bg-gray-800 shadow-sm dark:text-gray-100 sm:text-sm rounded-md")}
-                                placeholder={placeholder}
-                            />
-                            <div className="absolute inset-y-0 right-0 px-3 flex items-center" onClick={toggleVisibility}>
-                                {!isVisible ? <EyeIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" /> : <EyeOffIcon className="h-5 w-5 text-gray-400 hover:text-gray-500" aria-hidden="true" />}
-                            </div>
-                        </div>
-                    )}
-                />
-                {help && (
-                    <p className="mt-2 text-sm text-gray-500" id="email-description">{help}</p>
-                )}
-                <Error name={name} classNames="block text-red-500 mt-2" />
-            </div>
-        </div>
-    )
-}
-
-export default PasswordField;
diff --git a/web/src/components/inputs/wide/RadioFieldsetWide.tsx b/web/src/components/inputs/wide/RadioFieldsetWide.tsx
deleted file mode 100644
index 607f242..0000000
--- a/web/src/components/inputs/wide/RadioFieldsetWide.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Field, useFormState } from "react-final-form";
-import { RadioGroup } from "@headlessui/react";
-import { classNames } from "../../../styles/utils";
-import { Fragment } from "react";
-import { radioFieldsetOption } from "../RadioFieldset";
-
-interface props {
-  name: string;
-  legend: string;
-  options: radioFieldsetOption[];
-}
-
-function RadioFieldsetWide({ name, legend, options }: props) {
-  const { values } = useFormState();
-
-  return (
-    <fieldset>
-      <div className="space-y-2 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:px-6 sm:py-5">
-        <div>
-          <legend className="text-sm font-medium text-gray-900 dark:text-white">
-            {legend}
-          </legend>
-        </div>
-        <div className="space-y-5 sm:col-span-2">
-          <div className="space-y-5 sm:mt-0">
-            <Field
-              name={name}
-              type="radio"
-              render={({ input }) => (
-                <RadioGroup value={values[name]} onChange={input.onChange}>
-                  <RadioGroup.Label className="sr-only">
-                    Privacy setting
-                  </RadioGroup.Label>
-                  <div className="bg-white dark:bg-gray-800 rounded-md -space-y-px">
-                    {options.map((setting, settingIdx) => (
-                      <RadioGroup.Option
-                        key={setting.value}
-                        value={setting.value}
-                        className={({ checked }) =>
-                          classNames(
-                            settingIdx === 0
-                              ? "rounded-tl-md rounded-tr-md"
-                              : "",
-                            settingIdx === options.length - 1
-                              ? "rounded-bl-md rounded-br-md"
-                              : "",
-                            checked
-                              ? "bg-indigo-50 dark:bg-gray-700 border-indigo-200 dark:border-blue-600 z-10"
-                              : "border-gray-200 dark:border-gray-700",
-                            "relative border p-4 flex cursor-pointer focus:outline-none"
-                          )
-                        }
-                      >
-                        {({ active, checked }) => (
-                          <Fragment>
-                            <span
-                              className={classNames(
-                                checked
-                                  ? "bg-indigo-600 dark:bg-blue-600 border-transparent"
-                                  : "bg-white border-gray-300 dark:border-gray-300",
-                                active
-                                  ? "ring-2 ring-offset-2 ring-indigo-500 dark:ring-blue-500"
-                                  : "",
-                                "h-4 w-4 mt-0.5 cursor-pointer rounded-full border flex items-center justify-center"
-                              )}
-                              aria-hidden="true"
-                            >
-                              <span className="rounded-full bg-white w-1.5 h-1.5" />
-                            </span>
-                            <div className="ml-3 flex flex-col">
-                              <RadioGroup.Label
-                                as="span"
-                                className={classNames(
-                                  checked ? "text-indigo-900 dark:text-blue-500" : "text-gray-900 dark:text-gray-300",
-                                  "block text-sm font-medium"
-                                )}
-                              >
-                                {setting.label}
-                              </RadioGroup.Label>
-                              <RadioGroup.Description
-                                as="span"
-                                className={classNames(
-                                  checked ? "text-indigo-700 dark:text-blue-500" : "text-gray-500",
-                                  "block text-sm"
-                                )}
-                              >
-                                {setting.description}
-                              </RadioGroup.Description>
-                            </div>
-                          </Fragment>
-                        )}
-                      </RadioGroup.Option>
-                    ))}
-                  </div>
-                </RadioGroup>
-              )}
-            />
-          </div>
-        </div>
-      </div>
-    </fieldset>
-  );
-}
-
-export default RadioFieldsetWide;
diff --git a/web/src/components/inputs/wide/SelectField.tsx b/web/src/components/inputs/wide/SelectField.tsx
deleted file mode 100644
index 6ef335c..0000000
--- a/web/src/components/inputs/wide/SelectField.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Field } from "react-final-form";
-import { Listbox, Transition } from "@headlessui/react";
-import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
-import React, { Fragment } from "react";
-import { classNames } from "../../../styles/utils";
-
-interface SelectOption {
-  label: string;
-  value: string;
-}
-
-interface props {
-  name: string;
-  label: string;
-  optionDefaultText: string;
-  options: SelectOption[];
-}
-
-function SelectField({ name, label, optionDefaultText, options }: props) {
-  return (
-    <div className="col-span-6 sm:col-span-6">
-      <Field
-        name={name}
-        type="select"
-        render={({ input }) => (
-          <Listbox value={input.value} onChange={input.onChange}>
-            {({ open }) => (
-              <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-                <Listbox.Label className="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2">
-                  {label}
-                </Listbox.Label>
-                <div className="mt-2 relative">
-                  <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                    <span className="block truncate">
-                      {input.value
-                        ? options.find((c) => c.value === input.value)!.label
-                        : optionDefaultText}
-                    </span>
-                    <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                      <SelectorIcon
-                        className="h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options
-                      static
-                      className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                    >
-                      {options.map((opt) => (
-                        <Listbox.Option
-                          key={opt.value}
-                          className={({ active }) =>
-                            classNames(
-                              active
-                                ? "text-white bg-indigo-600"
-                                : "text-gray-900",
-                              "cursor-default select-none relative py-2 pl-3 pr-9"
-                            )
-                          }
-                          value={opt.value}
-                        >
-                          {({ selected, active }) => (
-                            <>
-                              <span
-                                className={classNames(
-                                  selected ? "font-semibold" : "font-normal",
-                                  "block truncate"
-                                )}
-                              >
-                                {opt.label}
-                              </span>
-
-                              {selected ? (
-                                <span
-                                  className={classNames(
-                                    active ? "text-white" : "text-indigo-600",
-                                    "absolute inset-y-0 right-0 flex items-center pr-4"
-                                  )}
-                                >
-                                  <CheckIcon
-                                    className="h-5 w-5"
-                                    aria-hidden="true"
-                                  />
-                                </span>
-                              ) : null}
-                            </>
-                          )}
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              </div>
-            )}
-          </Listbox>
-        )}
-      />
-    </div>
-  );
-}
-
-export default SelectField;
diff --git a/web/src/components/inputs/wide/index.ts b/web/src/components/inputs/wide/index.ts
deleted file mode 100644
index f50419a..0000000
--- a/web/src/components/inputs/wide/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default as NumberFieldWide } from "./NumberField";
-export { default as PasswordFieldWide } from "./PasswordField";
-export { default as RadioFieldsetWide } from "./RadioFieldsetWide";
-export { default as SelectFieldWide } from "./SelectField";
diff --git a/web/src/components/modals/index.ts b/web/src/components/modals/index.ts
deleted file mode 100644
index 88b17e1..0000000
--- a/web/src/components/modals/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as DeleteModal } from "./Delete";
\ No newline at end of file
diff --git a/web/src/components/modals/Delete.tsx b/web/src/components/modals/index.tsx
similarity index 96%
rename from web/src/components/modals/Delete.tsx
rename to web/src/components/modals/index.tsx
index 4568078..a4687d8 100644
--- a/web/src/components/modals/Delete.tsx
+++ b/web/src/components/modals/index.tsx
@@ -1,8 +1,8 @@
-import { Fragment } from "react";
+import { Fragment, FC } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import { ExclamationIcon } from "@heroicons/react/solid";
 
-interface props {
+interface DeleteModalProps {
     isOpen: boolean;
     buttonRef: any;
     toggle: any;
@@ -11,7 +11,7 @@ interface props {
     text: string;
 }
 
-const DeleteModal = ({ isOpen, buttonRef, toggle, deleteAction, title, text }: props) => (
+export const DeleteModal: FC<DeleteModalProps> = ({ isOpen, buttonRef, toggle, deleteAction, title, text }) => (
     <Transition.Root show={isOpen} as={Fragment}>
         <Dialog
             as="div"
@@ -86,6 +86,4 @@ const DeleteModal = ({ isOpen, buttonRef, toggle, deleteAction, title, text }: p
             </div>
         </Dialog>
     </Transition.Root>
-)
-
-export default DeleteModal;
+)
\ No newline at end of file
diff --git a/web/src/components/notifications/Toast.tsx b/web/src/components/notifications/Toast.tsx
index b174933..4eb70c7 100644
--- a/web/src/components/notifications/Toast.tsx
+++ b/web/src/components/notifications/Toast.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { XIcon, CheckCircleIcon, ExclamationIcon, ExclamationCircleIcon } from '@heroicons/react/solid'
 import { toast } from 'react-hot-toast'
-import { classNames } from '../../styles/utils'
+import { classNames } from '../../utils'
 
 type Props = {
   type: 'error' | 'success' | 'warning'
@@ -9,45 +9,39 @@ type Props = {
   t?: any;
 }
 
-const Toast: FC<Props> = ({
-  type,
-  body,
-  t
-}) => {
-  return (
-    <div className={classNames(
-      t.visible ? 'animate-enter' : 'animate-leave',
-      "max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden transition-all")}>
-      <div className="p-4">
-        <div className="flex items-start">
-          <div className="flex-shrink-0">
-            {type === 'success' && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
-            {type === 'error' && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
-            {type === 'warning' && <ExclamationIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
-          </div>
-          <div className="ml-3 w-0 flex-1 pt-0.5">
-            <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
-              {type === 'success' && "Success"}
-              {type === 'error' && "Error"}
-              {type === 'warning' && "Warning"}
-            </p>
-            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</p>
-          </div>
-          <div className="ml-4 flex-shrink-0 flex">
-            <button
-              className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-              onClick={() => {
-                toast.dismiss(t.id)
-              }}
-            >
-              <span className="sr-only">Close</span>
-              <XIcon className="h-5 w-5" aria-hidden="true" />
-            </button>
-          </div>
+const Toast: FC<Props> = ({ type, body, t }) => (
+  <div className={classNames(
+    t.visible ? 'animate-enter' : 'animate-leave',
+    "max-w-sm w-full bg-white dark:bg-gray-800 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden transition-all")}>
+    <div className="p-4">
+      <div className="flex items-start">
+        <div className="flex-shrink-0">
+          {type === 'success' && <CheckCircleIcon className="h-6 w-6 text-green-400" aria-hidden="true" />}
+          {type === 'error' && <ExclamationCircleIcon className="h-6 w-6 text-red-400" aria-hidden="true" />}
+          {type === 'warning' && <ExclamationIcon className="h-6 w-6 text-yellow-400" aria-hidden="true" />}
+        </div>
+        <div className="ml-3 w-0 flex-1 pt-0.5">
+          <p className="text-sm font-medium text-gray-900 dark:text-gray-200">
+            {type === 'success' && "Success"}
+            {type === 'error' && "Error"}
+            {type === 'warning' && "Warning"}
+          </p>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{body}</p>
+        </div>
+        <div className="ml-4 flex-shrink-0 flex">
+          <button
+            className="bg-white dark:bg-gray-700 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+            onClick={() => {
+              toast.dismiss(t.id)
+            }}
+          >
+            <span className="sr-only">Close</span>
+            <XIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
         </div>
       </div>
     </div>
-  )
-}
+  </div>
+)
 
 export default Toast;
\ No newline at end of file
diff --git a/web/src/components/panels/index.ts b/web/src/components/panels/index.ts
deleted file mode 100644
index 4f639f7..0000000
--- a/web/src/components/panels/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as SlideOver } from "./SlideOver";
\ No newline at end of file
diff --git a/web/src/components/panels/SlideOver.tsx b/web/src/components/panels/index.tsx
similarity index 91%
rename from web/src/components/panels/SlideOver.tsx
rename to web/src/components/panels/index.tsx
index b0982f2..ae088e8 100644
--- a/web/src/components/panels/SlideOver.tsx
+++ b/web/src/components/panels/index.tsx
@@ -1,16 +1,15 @@
 import { Fragment, useRef } from "react";
 import { XIcon } from "@heroicons/react/solid";
 import { Dialog, Transition } from "@headlessui/react";
-import { Form } from "react-final-form";
-import DEBUG from "../../components/debug";
+import { Form, Formik } from "formik";
+import DEBUG from "../debug";
 import { useToggle } from "../../hooks/hooks";
-import { DeleteModal } from "../../components/modals";
-import { classNames } from "../../styles/utils";
+import { DeleteModal } from "../modals";
+import { classNames } from "../../utils";
 
-interface props {
+interface SlideOverProps {
     title: string;
     initialValues: any;
-    mutators?: any;
     validate?: any;
     onSubmit: any;
     isOpen: boolean;
@@ -20,7 +19,7 @@ interface props {
     type: "CREATE" | "UPDATE";
 }
 
-function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteAction, isOpen, toggle, type, children }: props) {
+function SlideOver({ title, initialValues, validate, onSubmit, deleteAction, isOpen, toggle, type, children }: SlideOverProps) {
     const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false)
 
     const cancelModalButtonRef = useRef(null)
@@ -54,15 +53,13 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
                         >
                             <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
 
-                                <Form
+                                <Formik
                                     initialValues={initialValues}
-                                    mutators={mutators}
                                     onSubmit={onSubmit}
                                     validate={validate}
                                 >
-                                    {({ handleSubmit, values }) => {
-                                        return (
-                                            <form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
+                                    {({ handleSubmit, values }) => ( 
+                                            <Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
                                                 onSubmit={handleSubmit}>
 
                                                 <div className="flex-1">
@@ -90,7 +87,6 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
                                                     {children !== undefined && children(values)}
                                                 </div>
 
-
                                                 <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
                                                     <div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
                                                         {type === "UPDATE" && (
@@ -122,10 +118,9 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
                                                 </div>
 
                                                 <DEBUG values={values} />
-                                            </form>
-                                        )
-                                    }}
-                                </Form>
+                                            </Form>
+                                     )}
+                                </Formik>
 
                             </div>
 
@@ -137,4 +132,4 @@ function SlideOver({ title, initialValues, mutators, validate, onSubmit, deleteA
     )
 }
 
-export default SlideOver;
+export { SlideOver };
\ No newline at end of file
diff --git a/web/src/domain/interfaces.ts b/web/src/domain/interfaces.ts
index 0f7edf4..8fabcaf 100644
--- a/web/src/domain/interfaces.ts
+++ b/web/src/domain/interfaces.ts
@@ -152,6 +152,7 @@ export interface Network {
 
 export interface Channel {
     name: string;
+    password: string;
 }
 
 export interface SASL {
diff --git a/web/src/forms/filters/FilterActionAddForm.tsx b/web/src/forms/filters/FilterActionAddForm.tsx
deleted file mode 100644
index c74fa61..0000000
--- a/web/src/forms/filters/FilterActionAddForm.tsx
+++ /dev/null
@@ -1,415 +0,0 @@
-import { Fragment, useEffect } from "react";
-import { useMutation } from "react-query";
-import { Action, DownloadClient, Filter } from "../../domain/interfaces";
-import { queryClient } from "../../App";
-import { sleep } from "../../utils/utils";
-import { CheckIcon, SelectorIcon, XIcon } from "@heroicons/react/solid";
-import { Dialog, Listbox, Transition } from "@headlessui/react";
-import { classNames } from "../../styles/utils";
-import { Field, Form } from "react-final-form";
-import DEBUG from "../../components/debug";
-import APIClient from "../../api/APIClient";
-import { ActionTypeOptions } from "../../domain/constants";
-import { SwitchGroup, TextFieldWide } from "../../components/inputs";
-import { AlertWarning } from "../../components/alerts";
-import {
-  NumberFieldWide,
-  RadioFieldsetWide,
-} from "../../components/inputs/wide";
-
-import { toast } from 'react-hot-toast'
-import Toast from '../../components/notifications/Toast';
-
-interface DownloadClientSelectProps {
-  name: string;
-  clients: DownloadClient[];
-  values: any;
-}
-
-export function DownloadClientSelect({
-  name,
-  clients,
-  values,
-}: DownloadClientSelectProps) {
-  return (
-    <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-      <Field
-        name={name}
-        type="select"
-        render={({ input }) => (
-          <Listbox value={input.value} onChange={input.onChange}>
-            {({ open }) => (
-              <>
-                <Listbox.Label className="block text-sm font-medium text-gray-700">
-                  Client
-                </Listbox.Label>
-                <div className="mt-1 relative">
-                  <Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-                    <span className="block truncate">
-                      {input.value
-                        ? clients.find((c) => c.id === input.value)!.name
-                        : "Choose a client"}
-                    </span>
-                    {/*<span className="block truncate">Choose a client</span>*/}
-                    <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                      <SelectorIcon
-                        className="h-5 w-5 text-gray-400"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options
-                      static
-                      className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                    >
-                      {clients
-                        .filter((c) => c.type === values.type)
-                        .map((client: any) => (
-                          <Listbox.Option
-                            key={client.id}
-                            className={({ active }) =>
-                              classNames(
-                                active
-                                  ? "text-white bg-indigo-600"
-                                  : "text-gray-900",
-                                "cursor-default select-none relative py-2 pl-3 pr-9"
-                              )
-                            }
-                            value={client.id}
-                          >
-                            {({ selected, active }) => (
-                              <>
-                                <span
-                                  className={classNames(
-                                    selected ? "font-semibold" : "font-normal",
-                                    "block truncate"
-                                  )}
-                                >
-                                  {client.name}
-                                </span>
-
-                                {selected ? (
-                                  <span
-                                    className={classNames(
-                                      active ? "text-white" : "text-indigo-600",
-                                      "absolute inset-y-0 right-0 flex items-center pr-4"
-                                    )}
-                                  >
-                                    <CheckIcon
-                                      className="h-5 w-5"
-                                      aria-hidden="true"
-                                    />
-                                  </span>
-                                ) : null}
-                              </>
-                            )}
-                          </Listbox.Option>
-                        ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              </>
-            )}
-          </Listbox>
-        )}
-      />
-    </div>
-  );
-}
-
-interface props {
-  filter: Filter;
-  isOpen: boolean;
-  toggle: any;
-  clients: DownloadClient[];
-}
-
-function FilterActionAddForm({ filter, isOpen, toggle, clients }: props) {
-  const mutation = useMutation(
-    (action: Action) => APIClient.actions.create(action),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(["filter", filter.id]);
-        toast.custom((t) => <Toast type="success" body="Action was added" t={t} />)
-
-        sleep(500).then(() => toggle());
-      },
-    }
-  );
-
-  useEffect(() => {
-    // console.log("render add action form", clients)
-  }, []);
-
-  const onSubmit = (data: any) => {
-    // TODO clear data depending on type
-    mutation.mutate(data);
-  };
-
-  const TypeForm = (values: any) => {
-    switch (values.type) {
-      case "TEST":
-        return (
-          <AlertWarning
-            title="Notice"
-            text="The test action does nothing except to show if the filter works."
-          />
-        );
-      case "WATCH_FOLDER":
-        return (
-          <div>
-            <TextFieldWide
-              name="watch_folder"
-              label="Watch dir"
-              placeholder="Watch directory eg. /home/user/watch_folder"
-            />
-          </div>
-        );
-      case "EXEC":
-        return (
-          <div>
-            <TextFieldWide
-              name="exec_cmd"
-              label="Program"
-              placeholder="Path to program eg. /bin/test"
-            />
-
-            <TextFieldWide
-              name="exec_args"
-              label="Arguments"
-              placeholder="Arguments eg. --test"
-            />
-          </div>
-        );
-      case "QBITTORRENT":
-        return (
-          <div>
-            <DownloadClientSelect
-              name="client_id"
-              clients={clients}
-              values={values}
-            />
-
-            <TextFieldWide name="category" label="Category" placeholder="" />
-            <TextFieldWide
-              name="tags"
-              label="Tags"
-              placeholder="Comma separated eg. 4k,remux"
-            />
-            <TextFieldWide name="save_path" label="Save path" />
-
-            <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <SwitchGroup name="paused" label="Add paused" />
-            </div>
-
-            <div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
-              <div className="px-4">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                  Limit speeds
-                </h3>
-                <p className="mt-1 max-w-2xl text-sm text-gray-500">
-                  Limit download and upload speed for torrents in this filter.
-                  In KB/s.
-                </p>
-              </div>
-              <NumberFieldWide
-                name="limit_download_speed"
-                label="Limit download speed"
-              />
-              <NumberFieldWide
-                name="limit_upload_speed"
-                label="Limit upload speed"
-              />
-            </div>
-          </div>
-        );
-      case "DELUGE_V1":
-      case "DELUGE_V2":
-        return (
-          <div>
-            <DownloadClientSelect
-              name="client_id"
-              clients={clients}
-              values={values}
-            />
-
-            <TextFieldWide name="label" label="Label" />
-            <TextFieldWide name="save_path" label="Save path" />
-
-            <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <SwitchGroup name="paused" label="Add paused" />
-            </div>
-
-            <div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
-              <div className="px-4">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                  Limit speeds
-                </h3>
-                <p className="mt-1 max-w-2xl text-sm text-gray-500">
-                  Limit download and upload speed for torrents in this filter.
-                  In KB/s.
-                </p>
-              </div>
-              <NumberFieldWide
-                name="limit_download_speed"
-                label="Limit download speed"
-              />
-              <NumberFieldWide
-                name="limit_upload_speed"
-                label="Limit upload speed"
-              />
-            </div>
-          </div>
-        );
-      case "RADARR":
-      case "SONARR":
-      case "LIDARR":
-        return (
-          <div>
-            <DownloadClientSelect
-              name="client_id"
-              clients={clients}
-              values={values}
-            />
-          </div>
-        );
-      default:
-        return (
-          <AlertWarning
-            title="Notice"
-            text="The test action does nothing except to show if the filter works."
-          />
-        );
-    }
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        static
-        className="fixed inset-0 overflow-hidden"
-        open={isOpen}
-        onClose={toggle}
-      >
-        <div className="absolute inset-0 overflow-hidden">
-          <Dialog.Overlay className="absolute inset-0" />
-
-          <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
-            <Transition.Child
-              as={Fragment}
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <div className="w-screen max-w-2xl">
-                <Form
-                  initialValues={{
-                    name: "",
-                    enabled: false,
-                    type: "TEST",
-                    watch_folder: "",
-                    exec_cmd: "",
-                    exec_args: "",
-                    category: "",
-                    tags: "",
-                    label: "",
-                    save_path: "",
-                    paused: false,
-                    ignore_rules: false,
-                    limit_upload_speed: 0,
-                    limit_download_speed: 0,
-                    filter_id: filter.id,
-                    client_id: null,
-                  }}
-                  onSubmit={onSubmit}
-                >
-                  {({ handleSubmit, values }) => {
-                    return (
-                      <form
-                        className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
-                        onSubmit={handleSubmit}
-                      >
-                        <div className="flex-1">
-                          <div className="px-4 py-6 bg-gray-50 sm:px-6">
-                            <div className="flex items-start justify-between space-x-3">
-                              <div className="space-y-1">
-                                <Dialog.Title className="text-lg font-medium text-gray-900">
-                                  Add action
-                                </Dialog.Title>
-                                <p className="text-sm text-gray-500">
-                                  Add filter action.
-                                </p>
-                              </div>
-                              <div className="h-7 flex items-center">
-                                <button
-                                  type="button"
-                                  className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                                  onClick={toggle}
-                                >
-                                  <span className="sr-only">Close panel</span>
-                                  <XIcon
-                                    className="h-6 w-6"
-                                    aria-hidden="true"
-                                  />
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                            <TextFieldWide name="name" label="Action name" />
-                            <RadioFieldsetWide
-                              name="type"
-                              legend="Type"
-                              options={ActionTypeOptions}
-                            />
-
-                            {TypeForm(values)}
-                          </div>
-                        </div>
-
-                        <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-                          <div className="space-x-3 flex justify-end">
-                            <button
-                              type="button"
-                              className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                              onClick={toggle}
-                            >
-                              Cancel
-                            </button>
-                            <button
-                              type="submit"
-                              className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                            >
-                              Save
-                            </button>
-                          </div>
-                        </div>
-
-                        <DEBUG values={values} />
-                      </form>
-                    );
-                  }}
-                </Form>
-              </div>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}
-
-export default FilterActionAddForm;
diff --git a/web/src/forms/filters/FilterActionUpdateForm.tsx b/web/src/forms/filters/FilterActionUpdateForm.tsx
deleted file mode 100644
index fe16b26..0000000
--- a/web/src/forms/filters/FilterActionUpdateForm.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import { Fragment, useEffect } from "react";
-import { useMutation } from "react-query";
-import { Action, DownloadClient, Filter } from "../../domain/interfaces";
-import { queryClient } from "../../App";
-import { sleep } from "../../utils/utils";
-import { XIcon } from "@heroicons/react/solid";
-import { Dialog, Transition } from "@headlessui/react";
-import { Form } from "react-final-form";
-import DEBUG from "../../components/debug";
-import APIClient from "../../api/APIClient";
-import { ActionTypeOptions } from "../../domain/constants";
-import { AlertWarning } from "../../components/alerts";
-import { SwitchGroup, TextFieldWide } from "../../components/inputs";
-import {
-  NumberFieldWide,
-  RadioFieldsetWide,
-} from "../../components/inputs/wide";
-import { DownloadClientSelect } from "./FilterActionAddForm";
-
-import { toast } from 'react-hot-toast'
-import Toast from '../../components/notifications/Toast';
-
-
-interface props {
-  filter: Filter;
-  isOpen: boolean;
-  toggle: any;
-  clients: DownloadClient[];
-  action: Action;
-}
-
-function FilterActionUpdateForm({
-  filter,
-  isOpen,
-  toggle,
-  clients,
-  action,
-}: props) {
-  const mutation = useMutation(
-    (action: Action) => APIClient.actions.update(action),
-    {
-      onSuccess: () => {
-        // console.log("add action");
-        queryClient.invalidateQueries(["filter", filter.id]);
-        toast.custom((t) => <Toast type="success" body={`${filter.name} was updated successfully`} t={t} />)
-
-        sleep(1500);
-
-        toggle();
-      },
-    }
-  );
-
-  useEffect(() => {
-    // console.log("render add action form", clients)
-  }, [clients]);
-
-  const onSubmit = (data: any) => {
-    // TODO clear data depending on type
-
-    console.log(data);
-    mutation.mutate(data);
-  };
-
-  const TypeForm = (values: any) => {
-    switch (values.type) {
-      case "TEST":
-        return (
-          <AlertWarning
-            title="Notice"
-            text="The test action does nothing except to show if the filter works."
-          />
-        );
-      case "WATCH_FOLDER":
-        return (
-          <div>
-            <TextFieldWide
-              name="watch_folder"
-              label="Watch dir"
-              placeholder="Watch directory eg. /home/user/watch_folder"
-            />
-          </div>
-        );
-      case "EXEC":
-        return (
-          <div>
-            <TextFieldWide
-              name="exec_cmd"
-              label="Program"
-              placeholder="Path to program eg. /bin/test"
-            />
-
-            <TextFieldWide
-              name="exec_args"
-              label="Arguments"
-              placeholder="Arguments eg. --test"
-            />
-          </div>
-        );
-      case "QBITTORRENT":
-        return (
-          <div>
-            <DownloadClientSelect
-              name="client_id"
-              clients={clients}
-              values={values}
-            />
-
-            <TextFieldWide name="category" label="Category" placeholder="" />
-            <TextFieldWide
-              name="tags"
-              label="Tags"
-              placeholder="Comma separated eg. 4k,remux"
-            />
-            <TextFieldWide name="save_path" label="Save path" />
-
-            <div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
-              <div className="px-4">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                  Limit speeds
-                </h3>
-                <p className="mt-1 max-w-2xl text-sm text-gray-500">
-                  Limit download and upload speed for torrents in this filter.
-                  In KB/s.
-                </p>
-              </div>
-              <NumberFieldWide
-                name="limit_download_speed"
-                label="Limit download speed"
-              />
-              <NumberFieldWide
-                name="limit_upload_speed"
-                label="Limit upload speed"
-              />
-            </div>
-            <div className="col-span-6">
-              <SwitchGroup name="paused" label="Add paused" />
-            </div>
-          </div>
-        );
-      case "DELUGE_V1":
-      case "DELUGE_V2":
-        return (
-          <div>
-            <DownloadClientSelect
-              name="client_id"
-              clients={clients}
-              values={values}
-            />
-
-            <TextFieldWide name="label" label="Label" />
-            <TextFieldWide name="save_path" label="Save path" />
-
-            <div className="divide-y divide-gray-200 pt-8 space-y-6 sm:pt-10 sm:space-y-5">
-              <div className="px-4">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
-                  Limit speeds
-                </h3>
-                <p className="mt-1 max-w-2xl text-sm text-gray-500">
-                  Limit download and upload speed for torrents in this filter.
-                  In KB/s.
-                </p>
-              </div>
-              <NumberFieldWide
-                name="limit_download_speed"
-                label="Limit download speed"
-              />
-              <NumberFieldWide
-                name="limit_upload_speed"
-                label="Limit upload speed"
-              />
-            </div>
-          </div>
-        );
-      case "RADARR":
-      case "SONARR":
-      case "LIDARR":
-        return (
-          <div>
-            <DownloadClientSelect
-              name="client_id"
-              clients={clients}
-              values={values}
-            />
-          </div>
-        );
-      default:
-        return (
-          <AlertWarning
-            title="Notice"
-            text="The test action does nothing except to show if the filter works."
-          />
-        );
-    }
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog
-        as="div"
-        static
-        className="fixed inset-0 overflow-hidden"
-        open={isOpen}
-        onClose={toggle}
-      >
-        <div className="absolute inset-0 overflow-hidden">
-          <Dialog.Overlay className="absolute inset-0" />
-
-          <div className="fixed inset-y-0 right-0 pl-10 max-w-full flex sm:pl-16">
-            <Transition.Child
-              as={Fragment}
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <div className="w-screen max-w-2xl">
-                <Form
-                  initialValues={{
-                    name: "",
-                    enabled: false,
-                    type: "TEST",
-                    watch_folder: "",
-                    exec_cmd: "",
-                    exec_args: "",
-                    category: "",
-                    tags: "",
-                    label: "",
-                    save_path: "",
-                    paused: false,
-                    ignore_rules: false,
-                    limit_upload_speed: 0,
-                    limit_download_speed: 0,
-                    filter_id: filter.id,
-                    client_id: null,
-                  }}
-                  onSubmit={onSubmit}
-                >
-                  {({ handleSubmit, values }) => {
-                    return (
-                      <form
-                        className="h-full flex flex-col bg-white shadow-xl overflow-y-scroll"
-                        onSubmit={handleSubmit}
-                      >
-                        <div className="flex-1">
-                          <div className="px-4 py-6 bg-gray-50 sm:px-6">
-                            <div className="flex items-start justify-between space-x-3">
-                              <div className="space-y-1">
-                                <Dialog.Title className="text-lg font-medium text-gray-900">
-                                  Update action
-                                </Dialog.Title>
-                                <p className="text-sm text-gray-500">
-                                  Add filter action.
-                                </p>
-                              </div>
-                              <div className="h-7 flex items-center">
-                                <button
-                                  type="button"
-                                  className="bg-white rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
-                                  onClick={toggle}
-                                >
-                                  <span className="sr-only">Close panel</span>
-                                  <XIcon
-                                    className="h-6 w-6"
-                                    aria-hidden="true"
-                                  />
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                            <TextFieldWide name="name" label="Action name" />
-                            <RadioFieldsetWide
-                              name="type"
-                              legend="Type"
-                              options={ActionTypeOptions}
-                            />
-
-                            {TypeForm(values)}
-                          </div>
-                        </div>
-
-                        <div className="flex-shrink-0 px-4 border-t border-gray-200 py-5 sm:px-6">
-                          <div className="space-x-3 flex justify-end">
-                            <button
-                              type="button"
-                              className="bg-white py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                              onClick={toggle}
-                            >
-                              Cancel
-                            </button>
-                            <button
-                              type="submit"
-                              className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
-                            >
-                              Save
-                            </button>
-                          </div>
-                        </div>
-
-                        <DEBUG values={values} />
-                      </form>
-                    );
-                  }}
-                </Form>
-              </div>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}
-
-export default FilterActionUpdateForm;
diff --git a/web/src/forms/filters/FilterAddForm.tsx b/web/src/forms/filters/FilterAddForm.tsx
index 6deb607..ee95447 100644
--- a/web/src/forms/filters/FilterAddForm.tsx
+++ b/web/src/forms/filters/FilterAddForm.tsx
@@ -4,12 +4,12 @@ import { Filter } from "../../domain/interfaces";
 import { queryClient } from "../../App";
 import { XIcon } from "@heroicons/react/solid";
 import { Dialog, Transition } from "@headlessui/react";
-import { Field, Form } from "react-final-form";
 import DEBUG from "../../components/debug";
 import APIClient from "../../api/APIClient";
 
 import { toast } from 'react-hot-toast'
 import Toast from '../../components/notifications/Toast';
+import { Field, FieldProps, Form, Formik } from "formik";
 
 function FilterAddForm({ isOpen, toggle }: any) {
     const mutation = useMutation((filter: Filter) => APIClient.filters.create(filter), {
@@ -25,7 +25,7 @@ function FilterAddForm({ isOpen, toggle }: any) {
         // console.log("render add action form")
     }, []);
 
-    const onSubmit = (data: any) => {
+    const handleSubmit = (data: any) => {
         mutation.mutate(data)
     }
 
@@ -57,7 +57,7 @@ function FilterAddForm({ isOpen, toggle }: any) {
                         >
                             <div className="w-screen max-w-2xl border-l dark:border-gray-700">
 
-                                <Form
+                                <Formik
                                     initialValues={{
                                         name: "",
                                         enabled: false,
@@ -66,12 +66,11 @@ function FilterAddForm({ isOpen, toggle }: any) {
                                         sources: [],
                                         containers: []
                                     }}
+                                    onSubmit={handleSubmit}
                                     validate={validate}
-                                    onSubmit={onSubmit}
                                 >
-                                    {({ handleSubmit, values }) => {
-                                        return (
-                                            <form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll" onSubmit={handleSubmit}>
+                                    {({ values }) => (
+                                        <Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll">
                                                 <div className="flex-1">
                                                     <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
                                                         <div className="flex items-start justify-between space-x-3">
@@ -107,20 +106,25 @@ function FilterAddForm({ isOpen, toggle }: any) {
                                                                 </label>
                                                             </div>
                                                             <Field name="name">
-                                                                {({ input, meta }) => (
+                                                                {({
+                                                                    field,
+                                                                    meta,
+                                                                }: FieldProps ) => (
                                                                     <div className="sm:col-span-2">
                                                                         <input
+                                                                            {...field}
+                                                                            id="name"
                                                                             type="text"
-                                                                            {...input}
                                                                             className="block w-full shadow-sm dark:bg-gray-800 border-gray-300 dark:border-gray-700 sm:text-sm dark:text-white focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 rounded-md"
                                                                         />
+
                                                                         {meta.touched && meta.error &&
                                                                             <span className="block mt-2 text-red-500">{meta.error}</span>}
+
                                                                     </div>
                                                                 )}
                                                             </Field>
                                                         </div>
-
                                                     </div>
                                                 </div>
 
@@ -143,12 +147,10 @@ function FilterAddForm({ isOpen, toggle }: any) {
                                                     </div>
                                                 </div>
                                                 <DEBUG values={values} />
-                                            </form>
-                                        )
-                                    }}
-                                </Form>
+                                        </Form>
+                                    )}
+                                </Formik>
                             </div>
-
                         </Transition.Child>
                     </div>
                 </div>
diff --git a/web/src/forms/index.ts b/web/src/forms/index.ts
index 934da4a..86f0efe 100644
--- a/web/src/forms/index.ts
+++ b/web/src/forms/index.ts
@@ -1,6 +1,4 @@
 export { default as FilterAddForm } from "./filters/FilterAddForm";
-export { default as FilterActionAddForm } from "./filters/FilterActionAddForm";
-export { default as FilterActionUpdateForm } from "./filters/FilterActionUpdateForm";
 
 export { DownloadClientAddForm, DownloadClientUpdateForm } from "./settings/DownloadClientForms";
 export { IndexerAddForm, IndexerUpdateForm } from "./settings/IndexerForms";
diff --git a/web/src/forms/settings/DownloadClientForms.tsx b/web/src/forms/settings/DownloadClientForms.tsx
index ae9649a..8ca81cc 100644
--- a/web/src/forms/settings/DownloadClientForms.tsx
+++ b/web/src/forms/settings/DownloadClientForms.tsx
@@ -6,20 +6,47 @@ import {
 } from "../../domain/interfaces";
 import { Dialog, Transition } from "@headlessui/react";
 import { XIcon } from "@heroicons/react/solid";
-import { classNames } from "../../styles/utils";
-import { Form, useField } from "react-final-form";
+import { sleep, classNames } from "../../utils";
+
+import { Form, Formik, useFormikContext } from "formik";
 import DEBUG from "../../components/debug";
-import { SwitchGroup, TextFieldWide } from "../../components/inputs";
 import { queryClient } from "../../App";
 import APIClient from "../../api/APIClient";
-import { sleep } from "../../utils/utils";
 import { DownloadClientTypeOptions } from "../../domain/constants";
-import { NumberFieldWide, PasswordFieldWide, RadioFieldsetWide } from "../../components/inputs/wide";
 
 import { toast } from 'react-hot-toast'
 import Toast from '../../components/notifications/Toast';
 import { useToggle } from "../../hooks/hooks";
 import { DeleteModal } from "../../components/modals";
+import { NumberFieldWide, PasswordFieldWide, SwitchGroupWide, TextFieldWide } from "../../components/inputs/input_wide";
+import { RadioFieldsetWide } from "../../components/inputs/radio";
+
+interface InitialValuesSettings {
+    basic?: {
+        auth: boolean;
+        username: string;
+        password: string;
+    };
+    rules?: {
+        enabled?: boolean;
+        ignore_slow_torrents?: boolean;
+        download_speed_threshold?: number;
+        max_active_downloads?: number;
+    };
+}
+
+interface InitialValues {
+    name: string;
+    type: DOWNLOAD_CLIENT_TYPES;
+    enabled: boolean;
+    host: string;
+    port: number;
+    ssl: boolean;
+    username: string;
+    password: string;
+    settings: InitialValuesSettings;
+}
+
 
 function FormFieldsDefault() {
     return (
@@ -29,7 +56,7 @@ function FormFieldsDefault() {
             <NumberFieldWide name="port" label="Port" />
 
             <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <SwitchGroup name="ssl" label="SSL" />
+                <SwitchGroupWide name="ssl" label="SSL" />
             </div>
 
             <TextFieldWide name="username" label="Username" />
@@ -39,7 +66,10 @@ function FormFieldsDefault() {
 }
 
 function FormFieldsArr() {
-    const { input } = useField("settings.basic.auth");
+    const {
+        values: { settings },
+    } = useFormikContext<InitialValues>();
+
     return (
         <Fragment>
             <TextFieldWide name="host" label="Host" help="Full url like http(s)://domain.ltd/" />
@@ -47,10 +77,10 @@ function FormFieldsArr() {
             <PasswordFieldWide name="settings.apikey" label="API key" />
 
             <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <SwitchGroup name="settings.basic.auth" label="Basic auth" />
+                <SwitchGroupWide name="settings.basic.auth" label="Basic auth" />
             </div>
 
-            {input.value === true && (
+            {settings.basic?.auth === true && (
                 <Fragment>
                     <TextFieldWide name="settings.basic.username" label="Username" />
                     <PasswordFieldWide name="settings.basic.password" label="Password" />
@@ -71,7 +101,9 @@ export const componentMap: any = {
 
 
 function FormFieldsRulesBasic() {
-    const { input: enabled } = useField("settings.rules.enabled");
+    const {
+        values: { settings },
+    } = useFormikContext<InitialValues>();
 
     return (
         <div className="border-t border-gray-200 dark:border-gray-700 py-5">
@@ -84,10 +116,10 @@ function FormFieldsRulesBasic() {
             </div>
 
             <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <SwitchGroup name="settings.rules.enabled" label="Enabled" />
+                <SwitchGroupWide name="settings.rules.enabled" label="Enabled" />
             </div>
 
-            {enabled.value === true && (
+            {settings && settings.rules?.enabled === true && (
                 <Fragment>
                     <NumberFieldWide name="settings.rules.max_active_downloads" label="Max active downloads" />
                 </Fragment>
@@ -97,8 +129,9 @@ function FormFieldsRulesBasic() {
 }
 
 function FormFieldsRules() {
-    const { input } = useField("settings.rules.ignore_slow_torrents");
-    const { input: enabled } = useField("settings.rules.enabled");
+    const {
+        values: { settings },
+    } = useFormikContext<InitialValues>();
 
     return (
         <div className="border-t border-gray-200 dark:border-gray-700 py-5">
@@ -111,17 +144,17 @@ function FormFieldsRules() {
             </div>
 
             <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                <SwitchGroup name="settings.rules.enabled" label="Enabled" />
+                <SwitchGroupWide name="settings.rules.enabled" label="Enabled" />
             </div>
 
-            {enabled.value === true && (
+            {settings.rules?.enabled === true && (
                 <Fragment>
                     <NumberFieldWide name="settings.rules.max_active_downloads" label="Max active downloads" />
                     <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                        <SwitchGroup name="settings.rules.ignore_slow_torrents" label="Ignore slow torrents" />
+                        <SwitchGroupWide name="settings.rules.ignore_slow_torrents" label="Ignore slow torrents" />
                     </div>
 
-                    {input.value === true && (
+                    {settings.rules?.ignore_slow_torrents === true && (
                         <Fragment>
                             <NumberFieldWide name="settings.rules.download_speed_threshold" label="Download speed threshold" placeholder="in KB/s" help="If download speed is below this when max active downloads is hit, download anyways. KB/s" />
                         </Fragment>
@@ -138,6 +171,100 @@ export const rulesComponentMap: any = {
     QBITTORRENT: <FormFieldsRules />,
 };
 
+interface formButtonsProps {
+    isSuccessfulTest: boolean;
+    isErrorTest: boolean;
+    isTesting: boolean;
+    cancelFn: any;
+    testFn: any;
+    values: any;
+    type: "CREATE" | "UPDATE";
+    toggleDeleteModal?: any;
+}
+
+function DownloadClientFormButtons({ type, isSuccessfulTest, isErrorTest, isTesting, cancelFn, testFn, values, toggleDeleteModal }: formButtonsProps) {
+
+    const test = () => {
+        testFn(values)
+    }
+
+    return (
+        <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
+            <div className={classNames(type === "CREATE" ? "justify-end" : "justify-between", "space-x-3 flex")}>
+                {type === "UPDATE" && (
+                    <button
+                        type="button"
+                        className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
+                        onClick={toggleDeleteModal}
+                    >
+                        Remove
+                    </button>
+                )}
+                <div className="flex">
+                    <button
+                        type="button"
+                        className={classNames(
+                            isSuccessfulTest
+                                ? "text-green-500 border-green-500 bg-green-50"
+                                : isErrorTest
+                                    ? "text-red-500 border-red-500 bg-red-50"
+                                    : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
+                            isTesting ? "cursor-not-allowed" : "",
+                            "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                        )}
+                        disabled={isTesting}
+                        // onClick={() => testClient(values)}
+                        onClick={test}
+                    >
+                        {isTesting ? (
+                            <svg
+                                className="animate-spin h-5 w-5 text-green-500"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                            >
+                                <circle
+                                    className="opacity-25"
+                                    cx="12"
+                                    cy="12"
+                                    r="10"
+                                    stroke="currentColor"
+                                    strokeWidth="4"
+                                ></circle>
+                                <path
+                                    className="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                ></path>
+                            </svg>
+                        ) : isSuccessfulTest ? (
+                            "OK!"
+                        ) : isErrorTest ? (
+                            "ERROR"
+                        ) : (
+                            "Test"
+                        )}
+                    </button>
+
+                    <button
+                        type="button"
+                        className="mr-4 bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                        onClick={cancelFn}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        type="submit"
+                        className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                    >
+                        {type === "CREATE" ? "Create" : "Save"}
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
+
 export function DownloadClientAddForm({ isOpen, toggle }: any) {
     const [isTesting, setIsTesting] = useState(false);
     const [isSuccessfulTest, setIsSuccessfulTest] = useState(false);
@@ -197,6 +324,18 @@ export function DownloadClientAddForm({ isOpen, toggle }: any) {
         testClientMutation.mutate(data);
     };
 
+    let initialValues: InitialValues = {
+        name: "",
+        type: DOWNLOAD_CLIENT_TYPES.qBittorrent,
+        enabled: true,
+        host: "",
+        port: 10000,
+        ssl: false,
+        username: "",
+        password: "",
+        settings: {}
+    }
+
     return (
         <Transition.Root show={isOpen} as={Fragment}>
             <Dialog
@@ -220,137 +359,75 @@ export function DownloadClientAddForm({ isOpen, toggle }: any) {
                             leaveTo="translate-x-full"
                         >
                             <div className="w-screen max-w-2xl border-l dark:border-gray-700">
-                                <Form
-                                    initialValues={{
-                                        name: "",
-                                        type: DOWNLOAD_CLIENT_TYPES.qBittorrent,
-                                        enabled: true,
-                                        host: "",
-                                        port: 10000,
-                                        ssl: false,
-                                        username: "",
-                                        password: "",
-                                    }}
+                                <Formik
+                                    initialValues={initialValues}
                                     onSubmit={onSubmit}
                                 >
-                                    {({ handleSubmit, values }) => {
-                                        return (
-                                            <form
-                                                className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
-                                                onSubmit={handleSubmit}
-                                            >
-                                                <div className="flex-1">
-                                                    <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
-                                                        <div className="flex items-start justify-between space-x-3">
-                                                            <div className="space-y-1">
-                                                                <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
-                                                                    Add client
-                                                                </Dialog.Title>
-                                                                <p className="text-sm text-gray-500 dark:text-gray-400">
-                                                                    Add download client.
-                                                                </p>
-                                                            </div>
-                                                            <div className="h-7 flex items-center">
-                                                                <button
-                                                                    type="button"
-                                                                    className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                                    onClick={toggle}
-                                                                >
-                                                                    <span className="sr-only">Close panel</span>
-                                                                    <XIcon
-                                                                        className="h-6 w-6"
-                                                                        aria-hidden="true"
-                                                                    />
-                                                                </button>
-                                                            </div>
+                                    {({ handleSubmit, values }) => (
+                                        <Form
+                                            className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
+                                            onSubmit={handleSubmit}
+                                        >
+                                            <div className="flex-1">
+                                                <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
+                                                    <div className="flex items-start justify-between space-x-3">
+                                                        <div className="space-y-1">
+                                                            <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
+                                                                Add client
+                                                            </Dialog.Title>
+                                                            <p className="text-sm text-gray-500 dark:text-gray-400">
+                                                                Add download client.
+                                                            </p>
                                                         </div>
-                                                    </div>
-
-                                                    <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
-                                                        <TextFieldWide name="name" label="Name" />
-
-                                                        <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:divide-gray-700">
-                                                            <SwitchGroup name="enabled" label="Enabled" />
+                                                        <div className="h-7 flex items-center">
+                                                            <button
+                                                                type="button"
+                                                                className="bg-white dark:bg-gray-800 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                                                                onClick={toggle}
+                                                            >
+                                                                <span className="sr-only">Close panel</span>
+                                                                <XIcon
+                                                                    className="h-6 w-6"
+                                                                    aria-hidden="true"
+                                                                />
+                                                            </button>
                                                         </div>
-
-                                                        <RadioFieldsetWide
-                                                            name="type"
-                                                            legend="Type"
-                                                            options={DownloadClientTypeOptions}
-                                                        />
-
-                                                        <div>{componentMap[values.type]}</div>
                                                     </div>
                                                 </div>
 
-                                                {rulesComponentMap[values.type]}
+                                                <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
+                                                    <TextFieldWide name="name" label="Name" />
 
-                                                <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
-                                                    <div className="space-x-3 flex justify-end">
-                                                        <button
-                                                            type="button"
-                                                            className={classNames(
-                                                                isSuccessfulTest
-                                                                    ? "text-green-500 border-green-500 bg-green-50"
-                                                                    : isErrorTest
-                                                                        ? "text-red-500 border-red-500 bg-red-50"
-                                                                        : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
-                                                                isTesting ? "cursor-not-allowed" : "",
-                                                                "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                            )}
-                                                            disabled={isTesting}
-                                                            onClick={() => testClient(values)}
-                                                        >
-                                                            {isTesting ? (
-                                                                <svg
-                                                                    className="animate-spin h-5 w-5 text-green-500"
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                    fill="none"
-                                                                    viewBox="0 0 24 24"
-                                                                >
-                                                                    <circle
-                                                                        className="opacity-25"
-                                                                        cx="12"
-                                                                        cy="12"
-                                                                        r="10"
-                                                                        stroke="currentColor"
-                                                                        strokeWidth="4"
-                                                                    ></circle>
-                                                                    <path
-                                                                        className="opacity-75"
-                                                                        fill="currentColor"
-                                                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                                                    ></path>
-                                                                </svg>
-                                                            ) : isSuccessfulTest ? (
-                                                                "OK!"
-                                                            ) : isErrorTest ? (
-                                                                "ERROR"
-                                                            ) : (
-                                                                "Test"
-                                                            )}
-                                                        </button>
-                                                        <button
-                                                            type="button"
-                                                            className="bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                            onClick={toggle}
-                                                        >
-                                                            Cancel
-                                                        </button>
-                                                        <button
-                                                            type="submit"
-                                                            className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                        >
-                                                            Create
-                                                        </button>
+                                                    <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:divide-gray-700">
+                                                        <SwitchGroupWide name="enabled" label="Enabled" />
                                                     </div>
-                                                </div>
 
-                                                <DEBUG values={values} />
-                                            </form>
-                                        );
-                                    }}
-                                </Form>
+                                                    <RadioFieldsetWide
+                                                        name="type"
+                                                        legend="Type"
+                                                        options={DownloadClientTypeOptions}
+                                                    />
+
+                                                    <div>{componentMap[values.type]}</div>
+                                                </div>
+                                            </div>
+
+                                            {rulesComponentMap[values.type]}
+
+                                            <DownloadClientFormButtons
+                                                type="CREATE"
+                                                isTesting={isTesting}
+                                                isSuccessfulTest={isSuccessfulTest}
+                                                isErrorTest={isErrorTest}
+                                                cancelFn={toggle}
+                                                testFn={testClient}
+                                                values={values}
+                                            />
+
+                                            <DEBUG values={values} />
+                                        </Form>
+                                    )}
+                                </Formik>
                             </div>
                         </Transition.Child>
                     </div>
@@ -433,6 +510,19 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
         testClientMutation.mutate(data);
     };
 
+    let initialValues = {
+        id: client.id,
+        name: client.name,
+        type: client.type,
+        enabled: client.enabled,
+        host: client.host,
+        port: client.port,
+        ssl: client.ssl,
+        username: client.username,
+        password: client.password,
+        settings: client.settings,
+    }
+
     return (
         <Transition.Root show={isOpen} as={Fragment}>
             <Dialog
@@ -465,24 +555,13 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
                             leaveTo="translate-x-full"
                         >
                             <div className="w-screen max-w-2xl border-l dark:border-gray-700">
-                                <Form
-                                    initialValues={{
-                                        id: client.id,
-                                        name: client.name,
-                                        type: client.type,
-                                        enabled: client.enabled,
-                                        host: client.host,
-                                        port: client.port,
-                                        ssl: client.ssl,
-                                        username: client.username,
-                                        password: client.password,
-                                        settings: client.settings,
-                                    }}
+                                <Formik
+                                    initialValues={initialValues}
                                     onSubmit={onSubmit}
                                 >
                                     {({ handleSubmit, values }) => {
                                         return (
-                                            <form
+                                            <Form
                                                 className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
                                                 onSubmit={handleSubmit}
                                             >
@@ -517,7 +596,7 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
                                                         <TextFieldWide name="name" label="Name" />
 
                                                         <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                                                            <SwitchGroup name="enabled" label="Enabled" />
+                                                            <SwitchGroupWide name="enabled" label="Enabled" />
                                                         </div>
 
                                                         <RadioFieldsetWide
@@ -532,81 +611,22 @@ export function DownloadClientUpdateForm({ client, isOpen, toggle }: any) {
 
                                                 {rulesComponentMap[values.type]}
 
-                                                <div className="flex-shrink-0 px-4 border-t border-gray-200 dark:border-gray-700 py-5 sm:px-6">
-                                                    <div className="space-x-3 flex justify-between">
-                                                        <button
-                                                            type="button"
-                                                            className="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:text-sm"
-                                                            onClick={toggleDeleteModal}
-                                                        >
-                                                            Remove
-                                                        </button>
-                                                        <div className="flex">
-                                                            <button
-                                                                type="button"
-                                                                className={classNames(
-                                                                    isSuccessfulTest
-                                                                        ? "text-green-500 border-green-500 bg-green-50"
-                                                                        : isErrorTest
-                                                                            ? "text-red-500 border-red-500 bg-red-50"
-                                                                            : "border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-400 bg-white dark:bg-gray-700 hover:bg-gray-50 focus:border-rose-700 active:bg-rose-700",
-                                                                    isTesting ? "cursor-not-allowed" : "",
-                                                                    "mr-2 inline-flex items-center px-4 py-2 border font-medium rounded-md shadow-sm text-sm transition ease-in-out duration-150 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                                )}
-                                                                disabled={isTesting}
-                                                                onClick={() => testClient(values)}
-                                                            >
-                                                                {isTesting ? (
-                                                                    <svg
-                                                                        className="animate-spin h-5 w-5 text-green-500"
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                        fill="none"
-                                                                        viewBox="0 0 24 24"
-                                                                    >
-                                                                        <circle
-                                                                            className="opacity-25"
-                                                                            cx="12"
-                                                                            cy="12"
-                                                                            r="10"
-                                                                            stroke="currentColor"
-                                                                            strokeWidth="4"
-                                                                        ></circle>
-                                                                        <path
-                                                                            className="opacity-75"
-                                                                            fill="currentColor"
-                                                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                                                                        ></path>
-                                                                    </svg>
-                                                                ) : isSuccessfulTest ? (
-                                                                    "OK!"
-                                                                ) : isErrorTest ? (
-                                                                    "ERROR"
-                                                                ) : (
-                                                                    "Test"
-                                                                )}
-                                                            </button>
+                                                <DownloadClientFormButtons
+                                                    type="UPDATE"
+                                                    toggleDeleteModal={toggleDeleteModal}
+                                                    isTesting={isTesting}
+                                                    isSuccessfulTest={isSuccessfulTest}
+                                                    isErrorTest={isErrorTest}
+                                                    cancelFn={toggle}
+                                                    testFn={testClient}
+                                                    values={values}
+                                                />
 
-                                                            <button
-                                                                type="button"
-                                                                className="mr-4 bg-white dark:bg-gray-700 py-2 px-4 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                                onClick={toggle}
-                                                            >
-                                                                Cancel
-                                                            </button>
-                                                            <button
-                                                                type="submit"
-                                                                className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                            >
-                                                                Create
-                                                            </button>
-                                                        </div>
-                                                    </div>
-                                                </div>
                                                 <DEBUG values={values} />
-                                            </form>
+                                            </Form>
                                         );
                                     }}
-                                </Form>
+                                </Formik>
                             </div>
                         </Transition.Child>
                     </div>
diff --git a/web/src/forms/settings/IndexerForms.tsx b/web/src/forms/settings/IndexerForms.tsx
index c5e82bd..686eb13 100644
--- a/web/src/forms/settings/IndexerForms.tsx
+++ b/web/src/forms/settings/IndexerForms.tsx
@@ -1,20 +1,22 @@
-import React, { Fragment } from "react";
+import { Fragment } from "react";
 import { useMutation, useQuery } from "react-query";
 import { Channel, Indexer, IndexerSchema, IndexerSchemaSettings, Network } from "../../domain/interfaces";
-import { sleep } from "../../utils/utils";
+import { sleep } from "../../utils";
 import { XIcon } from "@heroicons/react/solid";
 import { Dialog, Transition } from "@headlessui/react";
-import { Field, Form } from "react-final-form";
+import { Field, FieldProps, Form, Formik } from "formik";
 import DEBUG from "../../components/debug";
-import Select from "react-select";
+import Select, { components, InputProps } from "react-select";
 import { queryClient } from "../../App";
-import { SwitchGroup, TextFieldWide } from "../../components/inputs";
 import APIClient from "../../api/APIClient";
-import { NumberFieldWide, PasswordFieldWide } from "../../components/inputs/wide";
+import { TextFieldWide, PasswordFieldWide, SwitchGroupWide } from "../../components/inputs/input_wide";
+
 import { toast } from 'react-hot-toast'
 import Toast from '../../components/notifications/Toast';
 import { SlideOver } from "../../components/panels";
 
+const Input = ({ type, ...rest }: InputProps) => <components.Input {...rest} />;
+
 interface AddProps {
     isOpen: boolean;
     toggle: any;
@@ -44,7 +46,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
         onSuccess: (data) => {
             // console.log("irc mutation: ", data);
 
-            // queryClient.invalidateQueries(['indexer']);
+            // queryClient.invalidateQueries(['networks']);
             // sleep(1500)
 
             // toggle()
@@ -61,24 +63,24 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
         let channels: Channel[] = []
         if (ind.irc.channels.length) {
             ind.irc.channels.forEach(element => {
-                channels.push({ name: element })
+                channels.push({ name: element, password: "" })
             });
         }
 
         const network: Network = {
             name: ind.name,
             enabled: false,
-            server: formData.irc.server,
-            port: formData.irc.port,
-            tls: formData.irc.tls,
+            server: ind.irc.server,
+            port: ind.irc.port,
+            tls: ind.irc.tls,
             nickserv: formData.irc.nickserv,
             invite_command: formData.irc.invite_command,
             settings: formData.irc.settings,
             channels: channels,
         }
 
-        console.log("network: ", network);
-
+        // console.log("network: ", network);
+        // console.log("formData: ", formData);
 
         mutation.mutate(formData, {
             onSuccess: (data) => {
@@ -86,7 +88,6 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                 ircMutation.mutate(network)
             }
         })
-
     };
 
     const renderSettingFields = (indexer: string) => {
@@ -109,7 +110,7 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                         return null
                     })}
                     <div hidden={true}>
-                        <TextFieldWide name={`name`} label="Name" defaultValue={ind?.name} />
+                        <TextFieldWide name="name" label="Name" defaultValue={ind?.name} />
                     </div>
                 </div>
             )
@@ -141,11 +142,11 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                 return null
                             })}
 
-                            <div hidden={true}>
-                                <TextFieldWide name={`irc.server`} label="Server" defaultValue={ind.irc.server} />
-                                <NumberFieldWide name={`irc.port`} label="Port" defaultValue={ind.irc.port} />
-                                <SwitchGroup name="irc.tls" label="TLS" defaultValue={ind.irc.tls} />
-                            </div>
+                            {/* <div hidden={false}>
+                                <TextFieldWide name="irc.server" label="Server" defaultValue={ind.irc.server} />
+                                <NumberFieldWide name="irc.port" label="Port" defaultValue={ind.irc.port} />
+                                <SwitchGroupWide name="irc.tls" label="TLS" defaultValue={ind.irc.tls} />
+                            </div> */}
                         </div>
                     )}
                 </Fragment>
@@ -170,18 +171,20 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                             leaveTo="translate-x-full"
                         >
                             <div className="w-screen max-w-2xl dark:border-gray-700 border-l">
-                                <Form
+                                <Formik
+                                    enableReinitialize={true}
                                     initialValues={{
                                         enabled: true,
                                         identifier: "",
-                                        irc: {}
+                                        irc: {},
+                                        settings: {},
                                     }}
+
                                     onSubmit={onSubmit}
                                 >
-                                    {({ handleSubmit, values }) => {
+                                    {({ values }) => {
                                         return (
-                                            <form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll"
-                                                onSubmit={handleSubmit}>
+                                            <Form className="h-full flex flex-col bg-white dark:bg-gray-800 shadow-xl overflow-y-scroll">
                                                 <div className="flex-1">
                                                     <div className="px-4 py-6 bg-gray-50 dark:bg-gray-900 sm:px-6">
                                                         <div className="flex items-start justify-between space-x-3">
@@ -206,11 +209,8 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                                         </div>
                                                     </div>
 
-                                                    <div
-                                                        className="py-6 space-y-6 py-0 space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
-
-                                                        <div
-                                                            className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+                                                    <div className="py-6 space-y-6 py-0 space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
+                                                        <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
                                                             <div>
                                                                 <label
                                                                     htmlFor="identifier"
@@ -220,28 +220,29 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                                                 </label>
                                                             </div>
                                                             <div className="sm:col-span-2">
-                                                                <Field
-                                                                    name="identifier"
-                                                                    parse={val => val && val.value}
-                                                                    format={val => data && data.find((o: any) => o.value === val)}
-                                                                    render={({ input, meta }) => (
-                                                                        <React.Fragment>
-                                                                            <Select {...input}
-                                                                                isClearable={true}
-                                                                                placeholder="Choose an indexer"
-
-                                                                                options={data && data.sort((a, b): any => a.name.localeCompare(b.name)).map(v => ({
-                                                                                    label: v.name,
-                                                                                    value: v.identifier
-                                                                                }))} />
-                                                                        </React.Fragment>
+                                                                <Field name="identifier" type="select">
+                                                                    {({ field, form: { setFieldValue } }: FieldProps) => (
+                                                                        <Select {...field}
+                                                                            isClearable={true}
+                                                                            isSearchable={true}
+                                                                            components={{ Input }}
+                                                                            placeholder="Choose an indexer"
+                                                                            value={field?.value && field.value.value}
+                                                                            onChange={(option: any) => {
+                                                                                setFieldValue(field.name, option?.value ?? "")
+                                                                            }}
+                                                                            options={data && data.sort((a, b): any => a.name.localeCompare(b.name)).map(v => ({
+                                                                                label: v.name,
+                                                                                value: v.identifier
+                                                                            }))} />
                                                                     )}
-                                                                />
+                                                                </Field>
+
                                                             </div>
                                                         </div>
 
                                                         <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                                                            <SwitchGroup name="enabled" label="Enabled" />
+                                                            <SwitchGroupWide name="enabled" label="Enabled" />
                                                         </div>
 
 
@@ -272,10 +273,10 @@ export function IndexerAddForm({ isOpen, toggle }: AddProps) {
                                                 </div>
 
                                                 <DEBUG values={values} />
-                                            </form>
+                                            </Form>
                                         )
                                     }}
-                                </Form>
+                                </Formik>
                             </div>
 
                         </Transition.Child>
@@ -361,45 +362,38 @@ export function IndexerUpdateForm({ isOpen, toggle, indexer }: UpdateProps) {
             initialValues={initialValues}
         >
             {({ values }: any) => (
-                <>
-                    <div
-                        className="py-6 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
-                        <div
-                            className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
-                            <div>
-                                <label
-                                    htmlFor="name"
-                                    className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
-                                >
-                                    Name
-                                </label>
-                            </div>
-                            <Field name="name">
-                                {({ input, meta }) => (
-                                    <div className="sm:col-span-2">
-                                        <input
-                                            type="text"
-                                            {...input}
-                                            className="block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-700 rounded-md"
-                                        />
-                                        {meta.touched && meta.error &&
-                                            <span>{meta.error}</span>}
-                                    </div>
-                                )}
-                            </Field>
+                <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
+                    <div className="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
+                        <div>
+                            <label
+                                htmlFor="name"
+                                className="block text-sm font-medium text-gray-900 dark:text-white sm:mt-px sm:pt-2"
+                            >
+                                Name
+                            </label>
                         </div>
-
-                        <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
-                            <SwitchGroup name="enabled" label="Enabled" />
-                        </div>
-
-                        {renderSettingFields(indexer.settings)}
-
+                        <Field name="name">
+                            {({ field, meta }: FieldProps) => (
+                                <div className="sm:col-span-2">
+                                    <input
+                                        type="text"
+                                        {...field}
+                                        className="block w-full shadow-sm dark:bg-gray-800 sm:text-sm dark:text-white focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-700 rounded-md"
+                                    />
+                                    {meta.touched && meta.error &&
+                                        <span>{meta.error}</span>}
+                                </div>
+                            )}
+                        </Field>
                     </div>
 
-                </>
-            )}
+                    <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
+                        <SwitchGroupWide name="enabled" label="Enabled" />
+                    </div>
 
+                    {renderSettingFields(indexer.settings)}
+                </div>
+            )}
         </SlideOver>
     )
 }
\ No newline at end of file
diff --git a/web/src/forms/settings/IrcForms.tsx b/web/src/forms/settings/IrcForms.tsx
index 4958fe3..22badd0 100644
--- a/web/src/forms/settings/IrcForms.tsx
+++ b/web/src/forms/settings/IrcForms.tsx
@@ -1,19 +1,83 @@
 import { useMutation } from "react-query";
-import { Network } from "../../domain/interfaces";
+import { Channel, Network } from "../../domain/interfaces";
 import { XIcon } from "@heroicons/react/solid";
-import { Field } from "react-final-form";
-import { SwitchGroup, TextFieldWide } from "../../components/inputs";
 import { queryClient } from "../../App";
 
-import arrayMutators from "final-form-arrays";
-import { FieldArray } from "react-final-form-arrays";
+import { Field, FieldArray, FieldProps } from "formik";
 import APIClient from "../../api/APIClient";
-import { NumberFieldWide, PasswordFieldWide } from "../../components/inputs/wide";
+
+import { TextFieldWide, PasswordFieldWide, SwitchGroupWide, NumberFieldWide } from "../../components/inputs/input_wide";
 
 import { toast } from 'react-hot-toast';
 import Toast from '../../components/notifications/Toast';
 import { SlideOver } from "../../components/panels";
 
+function ChannelsFieldArray({ values }: any) {
+    return (
+        <div className="p-6">
+            <FieldArray name="channels">
+                {({ remove, push }) => (
+                    <div className="flex flex-col border-2 border-dashed dark:border-gray-700 p-4">
+                        {values && values.channels.length > 0 ? (
+                            values.channels.map((_channel: Channel, index: number) => (
+                                <div key={index} className="flex justify-between">
+                                    <div className="flex">
+                                        <Field name={`channels.${index}.name`}>
+                                            {({ field }: FieldProps) => (
+                                                <input
+                                                    {...field}
+                                                    type="text"
+                                                    value={field.value ?? ""}
+                                                    onChange={field.onChange}
+                                                    placeholder="#Channel"
+                                                    className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
+                                                />
+                                            )}
+                                        </Field>
+
+                                        <Field name={`channels.${index}.password`}>
+                                            {({ field }: FieldProps) => (
+                                                <input
+                                                    {...field}
+                                                    type="text"
+                                                    value={field.value ?? ""}
+                                                    onChange={field.onChange}
+                                                    placeholder="Password"
+                                                    className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
+                                                />
+                                            )}
+                                        </Field>
+                                    </div>
+
+                                    <button
+                                        type="button"
+                                        className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                                        onClick={() => remove(index)}
+                                    >
+                                        <span className="sr-only">Remove</span>
+                                        <XIcon className="h-6 w-6" aria-hidden="true" />
+                                    </button>
+                                </div>
+                            ))
+                        ) : (
+                            <span className="text-center text-sm text-grey-darker dark:text-white">
+                                No channels!
+                            </span>
+                        )}
+                        <button
+                            type="button"
+                            className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded self-center text-center"
+                            onClick={() => push({ name: "", password: "" })}
+                        >
+                            Add Channel
+                        </button>
+                    </div>
+                )}
+            </FieldArray>
+        </div>
+    )
+}
+
 export function IrcNetworkAddForm({ isOpen, toggle }: any) {
     const mutation = useMutation((network: Network) => APIClient.irc.createNetwork(network), {
         onSuccess: (data) => {
@@ -66,15 +130,13 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
         name: "",
         enabled: true,
         server: "",
+        port: 6667,
         tls: false,
         pass: "",
         nickserv: {
             account: ""
-        }
-    }
-
-    const mutators = {
-        ...arrayMutators
+        },
+        channels: [],
     }
 
     return (
@@ -85,19 +147,16 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
             toggle={toggle}
             onSubmit={onSubmit}
             initialValues={initialValues}
-            mutators={mutators}
             validate={validate}
         >
-            {() => (
+            {(values) => (
                 <>
-
-
                     <TextFieldWide name="name" label="Name" placeholder="Name" required={true} />
 
                     <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
 
                         <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-700">
-                            <SwitchGroup name="enabled" label="Enabled" />
+                            <SwitchGroupWide name="enabled" label="Enabled" />
                         </div>
 
                         <div>
@@ -105,7 +164,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
                             <NumberFieldWide name="port" label="Port" placeholder="Eg 6667" required={true} />
 
                             <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                                <SwitchGroup name="tls" label="TLS" />
+                                <SwitchGroupWide name="tls" label="TLS" />
                             </div>
 
                             <PasswordFieldWide name="pass" label="Password" help="Network password" />
@@ -117,57 +176,7 @@ export function IrcNetworkAddForm({ isOpen, toggle }: any) {
                         </div>
                     </div>
 
-                    <div className="p-6">
-
-                        <FieldArray name="channels">
-                            {({ fields }) => (
-                                <div className="flex flex-col border-2 border-dashed dark:border-gray-700 p-4">
-                                    {fields && (fields.length as any) > 0 ? (
-                                        fields.map((name, index) => (
-                                            <div key={name} className="flex justify-between">
-                                                <div className="flex">
-                                                    <Field
-                                                        name={`${name}.name`}
-                                                        component="input"
-                                                        type="text"
-                                                        placeholder="#Channel"
-                                                        className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
-                                                    />
-                                                    <Field
-                                                        name={`${name}.password`}
-                                                        component="input"
-                                                        type="text"
-                                                        placeholder="Password"
-                                                        className="dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
-                                                    />
-                                                </div>
-
-                                                <button
-                                                    type="button"
-                                                    className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                    onClick={() => fields.remove(index)}
-                                                >
-                                                    <span className="sr-only">Remove</span>
-                                                    <XIcon className="h-6 w-6" aria-hidden="true" />
-                                                </button>
-                                            </div>
-                                        ))
-                                    ) : (
-                                        <span className="text-center text-sm text-grey-darker dark:text-white">
-                                            No channels!
-                                        </span>
-                                    )}
-                                    <button
-                                        type="button"
-                                        className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 rounded self-center text-center"
-                                        onClick={() => fields.push({ name: "", password: "" })}
-                                    >
-                                        Add Channel
-                                    </button>
-                                </div>
-                            )}
-                        </FieldArray>
-                    </div>
+                    <ChannelsFieldArray values={values} />
                 </>
             )}
         </SlideOver>
@@ -193,8 +202,6 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
     })
 
     const onSubmit = (data: any) => {
-        console.log(data)
-
         // easy way to split textarea lines into array of strings for each newline.
         // parse on the field didn't really work.
         // TODO fix connect_commands on network update
@@ -241,14 +248,9 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
         nickserv: network.nickserv,
         pass: network.pass,
         invite_command: network.invite_command,
-        // connect_commands: network.connect_commands,
         channels: network.channels
     }
 
-    const mutators = {
-        ...arrayMutators
-    }
-
     return (
         <SlideOver
             type="UPDATE"
@@ -258,18 +260,16 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
             onSubmit={onSubmit}
             deleteAction={deleteAction}
             initialValues={initialValues}
-            mutators={mutators}
             validate={validate}
         >
-            {() => (
+            {(values) => (
                 <>
-
                     <TextFieldWide name="name" label="Name" placeholder="Name" required={true} />
 
                     <div className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y dark:divide-gray-700">
 
                         <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0">
-                            <SwitchGroup name="enabled" label="Enabled" />
+                            <SwitchGroupWide name="enabled" label="Enabled" />
                         </div>
 
                         <div>
@@ -277,7 +277,7 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
                             <NumberFieldWide name="port" label="Port" placeholder="Eg 6667" required={true} />
 
                             <div className="py-6 px-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">
-                                <SwitchGroup name="tls" label="TLS" />
+                                <SwitchGroupWide name="tls" label="TLS" />
                             </div>
 
                             <PasswordFieldWide name="pass" label="Password" help="Network password" />
@@ -289,57 +289,7 @@ export function IrcNetworkUpdateForm({ isOpen, toggle, network }: any) {
                         </div>
                     </div>
 
-                    <div className="p-6">
-
-                        <FieldArray name="channels">
-                            {({ fields }) => (
-                                <div className="flex flex-col border-2 border-dashed dark:border-gray-700 p-4">
-                                    {fields && (fields.length as any) > 0 ? (
-                                        fields.map((name, index) => (
-                                            <div key={name} className="flex justify-between">
-                                                <div className="flex">
-                                                    <Field
-                                                        name={`${name}.name`}
-                                                        component="input"
-                                                        type="text"
-                                                        placeholder="#Channel"
-                                                        className="mr-4 dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
-                                                    />
-                                                    <Field
-                                                        name={`${name}.password`}
-                                                        component="input"
-                                                        type="text"
-                                                        placeholder="Password"
-                                                        className="dark:bg-gray-700 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300 dark:border-gray-600 block w-full shadow-sm sm:text-sm dark:text-white rounded-md"
-                                                    />
-                                                </div>
-
-                                                <button
-                                                    type="button"
-                                                    className="bg-white dark:bg-gray-700 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                                    onClick={() => fields.remove(index)}
-                                                >
-                                                    <span className="sr-only">Remove</span>
-                                                    <XIcon className="h-6 w-6" aria-hidden="true" />
-                                                </button>
-                                            </div>
-                                        ))
-                                    ) : (
-                                        <span className="text-center text-sm text-grey-darker dark:text-white">
-                                            No channels!
-                                        </span>
-                                    )}
-                                    <button
-                                        type="button"
-                                        className="border dark:border-gray-600 dark:bg-gray-700 my-4 px-4 py-2 text-sm text-gray-700 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 dark:focus:ring-blue-500 rounded self-center text-center"
-                                        onClick={() => fields.push({ name: "", password: "" })}
-                                    >
-                                        Add Channel
-                                    </button>
-                                </div>
-                            )}
-                        </FieldArray>
-                    </div>
+                    <ChannelsFieldArray values={values} />
                 </>
             )}
         </SlideOver>
diff --git a/web/src/screens/Dashboard.tsx b/web/src/screens/Dashboard.tsx
index 4807c3b..d6bb5f2 100644
--- a/web/src/screens/Dashboard.tsx
+++ b/web/src/screens/Dashboard.tsx
@@ -5,7 +5,7 @@ import { useTable, useFilters, useGlobalFilter, useSortBy, usePagination } from
 import APIClient from '../api/APIClient'
 import { useQuery } from 'react-query'
 import { ReleaseFindResponse, ReleaseStats } from '../domain/interfaces'
-import { EmptyListState } from '../components/EmptyListState'
+import { EmptyListState } from '../components/emptystates'
 
 export function Dashboard() {
   return (
diff --git a/web/src/screens/Settings.tsx b/web/src/screens/Settings.tsx
index 9d181f5..73cfcda 100644
--- a/web/src/screens/Settings.tsx
+++ b/web/src/screens/Settings.tsx
@@ -4,7 +4,7 @@ import IndexerSettings from "./settings/Indexer";
 import IrcSettings from "./settings/Irc";
 import ApplicationSettings from "./settings/Application";
 import DownloadClientSettings from "./settings/DownloadClient";
-import {classNames} from "../styles/utils";
+import {classNames} from "../utils";
 import ActionSettings from "./settings/Action";
 
 const subNavigation = [
diff --git a/web/src/screens/auth/login.tsx b/web/src/screens/auth/login.tsx
index e25d965..69fc8cf 100644
--- a/web/src/screens/auth/login.tsx
+++ b/web/src/screens/auth/login.tsx
@@ -1,12 +1,12 @@
 import { useMutation } from "react-query";
 import APIClient from "../../api/APIClient";
-import { Form } from "react-final-form";
-import { PasswordField, TextField } from "../../components/inputs";
+import { Form, Formik } from "formik";
 import { useRecoilState } from "recoil";
 import { isLoggedIn } from "../../state/state";
 import { useHistory } from "react-router-dom";
 import { useEffect } from "react";
 import logo from "../../logo.png"
+import { TextField, PasswordField } from "../../components/inputs";
 
 interface loginData {
     username: string;
@@ -32,9 +32,8 @@ function Login() {
         },
     })
 
-    const onSubmit = (data: any, form: any) => {
+    const handleSubmit = (data: any) => {
         mutation.mutate(data)
-        form.reset()
     }
 
     return (
@@ -50,51 +49,34 @@ function Login() {
             <div className="sm:mx-auto sm:w-full sm:max-w-md">
                 <div className="bg-white dark:bg-gray-800 py-8 px-4 shadow sm:rounded-lg sm:px-10">
 
-                    <Form
+                    <Formik
                         initialValues={{
                             username: "",
                             password: "",
                         }}
-                        onSubmit={onSubmit}
+                        onSubmit={handleSubmit}
                     >
-                        {({ handleSubmit, values }) => {
-                            return (
-                                <form className="space-y-6" onSubmit={handleSubmit}>
-                                    <TextField name="username" label="Username" autoComplete="username" />
-                                    <PasswordField name="password" label="password" autoComplete="current-password" />
+                        {() => (
+                            <Form>
 
-                                    {/*<div className="flex items-center justify-between">*/}
-                                    {/*    <div className="flex items-center">*/}
-                                    {/*        <input*/}
-                                    {/*            id="remember-me"*/}
-                                    {/*            name="remember-me"*/}
-                                    {/*            type="checkbox"*/}
-                                    {/*            className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"*/}
-                                    {/*        />*/}
-                                    {/*        <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">*/}
-                                    {/*            Remember me*/}
-                                    {/*        </label>*/}
-                                    {/*    </div>*/}
+                                <div className="space-y-6">
 
-                                    {/*    <div className="text-sm">*/}
-                                    {/*        <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">*/}
-                                    {/*            Forgot your password?*/}
-                                    {/*        </a>*/}
-                                    {/*    </div>*/}
-                                    {/*</div>*/}
+                                    <TextField name="username" label="Username" columns={6} autoComplete="username" />
+                                    <PasswordField name="password" label="Password" columns={6} autoComplete="current-password" />
+                                </div>
 
-                                    <div>
-                                        <button
-                                            type="submit"
-                                            className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
-                                        >
-                                            Sign in
-                                        </button>
-                                    </div>
-                                </form>
-                            )
-                        }}
-                    </Form>
+
+                                <div className="mt-6">
+                                    <button
+                                        type="submit"
+                                        className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 dark:bg-blue-600 hover:bg-indigo-700 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-blue-500"
+                                    >
+                                        Sign in
+                                    </button>
+                                </div>
+                            </Form>
+                        )}
+                    </Formik>
                 </div>
             </div>
         </div>
diff --git a/web/src/screens/filters/details.tsx b/web/src/screens/filters/details.tsx
index cb9d1c8..ffa4675 100644
--- a/web/src/screens/filters/details.tsx
+++ b/web/src/screens/filters/details.tsx
@@ -1,7 +1,7 @@
 import { Fragment, useRef } from "react";
 import { Dialog, Transition, Switch as SwitchBasic } from "@headlessui/react";
 import { ChevronDownIcon, ChevronRightIcon, ExclamationIcon, } from '@heroicons/react/solid'
-import { EmptyListState } from "../../components/EmptyListState";
+import { EmptyListState } from "../../components/emptystates";
 
 import {
     NavLink,
@@ -17,14 +17,12 @@ import { useToggle } from "../../hooks/hooks";
 import { useMutation, useQuery } from "react-query";
 import { queryClient } from "../../App";
 import { CONTAINER_OPTIONS, CODECS_OPTIONS, RESOLUTION_OPTIONS, SOURCES_OPTIONS, ActionTypeNameMap, ActionTypeOptions } from "../../domain/constants";
-import { TextField, SwitchGroup, Select, MultiSelect, NumberField, DownloadClientSelect } from "./inputs";
 
 import DEBUG from "../../components/debug";
-import TitleSubtitle from "../../components/headings/TitleSubtitle";
-import { classNames } from "../../styles/utils";
+import { TitleSubtitle } from "../../components/headings";
+import { buildPath, classNames } from "../../utils";
 import SelectM from "react-select";
 import APIClient from "../../api/APIClient";
-import { buildPath } from "../../utils/utils"
 
 import { toast } from 'react-hot-toast'
 import Toast from '../../components/notifications/Toast';
@@ -32,6 +30,7 @@ import Toast from '../../components/notifications/Toast';
 import { Field, FieldArray, Form, Formik } from "formik";
 import { AlertWarning } from "../../components/alerts";
 import { DeleteModal } from "../../components/modals";
+import { NumberField, TextField, SwitchGroup, Select, MultiSelect, DownloadClientSelect } from "../../components/inputs";
 
 const tabs = [
     { name: 'General', href: '', current: true },
@@ -66,93 +65,21 @@ function TabNavLink({ item, url }: any) {
     )
 }
 
-const FormButtonsGroup = ({ deleteAction, reset, dirty }: any) => {
-    const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false)
+const FormButtonsGroup = ({ values, deleteAction, reset, dirty }: any) => {
+    const [deleteModalIsOpen, toggleDeleteModal] = useToggle(false);
 
-    const cancelButtonRef = useRef(null)
+    const cancelModalButtonRef = useRef(null);
 
     return (
         <div className="pt-6 divide-y divide-gray-200 dark:divide-gray-700">
-
-            <Transition.Root show={deleteModalIsOpen} as={Fragment}>
-                <Dialog
-                    as="div"
-                    static
-                    className="fixed z-10 inset-0 overflow-y-auto"
-                    initialFocus={cancelButtonRef}
-                    open={deleteModalIsOpen}
-                    onClose={toggleDeleteModal}
-                >
-                    <div
-                        className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-                        <Transition.Child
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0"
-                            enterTo="opacity-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
-                        </Transition.Child>
-
-                        <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
-                            &#8203;
-                        </span>
-                        <Transition.Child
-                            as={Fragment}
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                            enterTo="opacity-100 translate-y-0 sm:scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                        >
-                            <div
-                                className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-                                <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                                    <div className="sm:flex sm:items-start">
-                                        <div
-                                            className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
-                                            <ExclamationIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
-                                        </div>
-                                        <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                                            <Dialog.Title as="h3"
-                                                className="text-lg leading-6 font-medium text-gray-900">
-                                                Remove filter
-                                            </Dialog.Title>
-                                            <div className="mt-2">
-                                                <p className="text-sm text-gray-500">
-                                                    Are you sure you want to remove this filter?
-                                                    This action cannot be undone.
-                                                </p>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                                    <button
-                                        type="button"
-                                        className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
-                                        onClick={deleteAction}
-                                    >
-                                        Remove
-                                    </button>
-                                    <button
-                                        type="button"
-                                        className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 light:bg-white text-base font-medium text-gray-700 dark:text-red-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                                        onClick={toggleDeleteModal}
-                                        ref={cancelButtonRef}
-                                    >
-                                        Cancel
-                                    </button>
-                                </div>
-                            </div>
-                        </Transition.Child>
-                    </div>
-                </Dialog>
-            </Transition.Root>
+            <DeleteModal
+                isOpen={deleteModalIsOpen}
+                toggle={toggleDeleteModal}
+                buttonRef={cancelModalButtonRef}
+                deleteAction={deleteAction}
+                title={`Remove filter: ${values.name}`}
+                text="Are you sure you want to remove this filter? This action cannot be undone."
+            />
 
             <div className="mt-4 pt-4 flex justify-between">
                 <button
@@ -234,8 +161,6 @@ export default function FilterDetails() {
     }
 
     const handleSubmit = (data: any) => {
-        console.log("submit other");
-
         updateMutation.mutate(data)
     }
 
@@ -329,7 +254,7 @@ export default function FilterDetails() {
                                     }}
                                     onSubmit={handleSubmit}
                                 >
-                                    {({ isSubmitting, values, dirty, resetForm }) => (
+                                    {({ values, dirty, resetForm }) => (
                                         <Form>
                                             <RouteSwitch>
                                                 <Route exact path={url}>
@@ -349,7 +274,7 @@ export default function FilterDetails() {
                                                 </Route>
                                             </RouteSwitch>
 
-                                            <FormButtonsGroup deleteAction={deleteAction} dirty={dirty} reset={resetForm} />
+                                            <FormButtonsGroup values={values} deleteAction={deleteAction} dirty={dirty} reset={resetForm} />
 
                                             <DEBUG values={values} />
                                         </Form>
@@ -424,7 +349,7 @@ function General({ indexers }: GeneralProps) {
                 <div className="mt-6 grid grid-cols-12 gap-6">
                     <TextField name="min_size" label="Min size" columns={6} placeholder="" />
                     <TextField name="max_size" label="Max size" columns={6} placeholder="" />
-                    <TextField name="delay" label="Delay" columns={6} placeholder="" />
+                    <NumberField name="delay" label="Delay" placeholder="" />
                 </div>
             </div>
 
@@ -665,8 +590,8 @@ function FilterActions({ filter, values }: FilterActionsProps) {
                         <div className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
                             {values.actions.length > 0 ?
                                 <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-                                    {values.actions.map((action: any, index: any) => (
-                                        <FilterActionsItem action={action} clients={data!} idx={index} remove={remove} />
+                                    {values.actions.map((action: any, index: number) => (
+                                        <FilterActionsItem action={action} clients={data!} idx={index} remove={remove} key={index} />
                                     ))}
                                 </ul>
                                 : <EmptyListState text="No actions yet!" />
diff --git a/web/src/screens/filters/inputs/DownloadClientSelect.tsx b/web/src/screens/filters/inputs/DownloadClientSelect.tsx
deleted file mode 100644
index 4694c62..0000000
--- a/web/src/screens/filters/inputs/DownloadClientSelect.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Fragment } from "react";
-import { Transition, Listbox } from "@headlessui/react";
-import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
-import { Action, DownloadClient } from "../../../domain/interfaces";
-import { classNames } from "../../../styles/utils";
-import { Field } from "formik";
-
-interface DownloadClientSelectProps {
-    name: string;
-    action: Action;
-    clients: DownloadClient[];
-}
-
-export default function DownloadClientSelect({
-    name, action, clients,
-}: DownloadClientSelectProps) {
-    return (
-        <div className="col-span-6 sm:col-span-6">
-            <Field name={name} type="select">
-                {({
-                    field,
-                    form: { setFieldValue },
-                }: any) => (
-                    <Listbox
-                        value={field.value}
-                        onChange={(value: any) => setFieldValue(field?.name, value)}
-                    >
-                        {({ open }) => (
-                            <>
-                                <Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-                                    Client
-                                </Listbox.Label>
-                                <div className="mt-2 relative">
-                                    <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
-                                        <span className="block truncate">
-                                            {field.value
-                                                ? clients.find((c) => c.id === field.value)!.name
-                                                : "Choose a client"}
-                                        </span>
-                                        {/*<span className="block truncate">Choose a client</span>*/}
-                                        <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                                            <SelectorIcon
-                                                className="h-5 w-5 text-gray-400 dark:text-gray-300"
-                                                aria-hidden="true" />
-                                        </span>
-                                    </Listbox.Button>
-
-                                    <Transition
-                                        show={open}
-                                        as={Fragment}
-                                        leave="transition ease-in duration-100"
-                                        leaveFrom="opacity-100"
-                                        leaveTo="opacity-0"
-                                    >
-                                        <Listbox.Options
-                                            static
-                                            className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                                        >
-                                            {clients
-                                                .filter((c) => c.type === action.type)
-                                                .map((client: any) => (
-                                                    <Listbox.Option
-                                                        key={client.id}
-                                                        className={({ active }) => classNames(
-                                                            active
-                                                                ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
-                                                                : "text-gray-900 dark:text-gray-300",
-                                                            "cursor-default select-none relative py-2 pl-3 pr-9"
-                                                        )}
-                                                        value={client.id}
-                                                    >
-                                                        {({ selected, active }) => (
-                                                            <>
-                                                                <span
-                                                                    className={classNames(
-                                                                        selected ? "font-semibold" : "font-normal",
-                                                                        "block truncate"
-                                                                    )}
-                                                                >
-                                                                    {client.name}
-                                                                </span>
-
-                                                                {selected ? (
-                                                                    <span
-                                                                        className={classNames(
-                                                                            active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
-                                                                            "absolute inset-y-0 right-0 flex items-center pr-4"
-                                                                        )}
-                                                                    >
-                                                                        <CheckIcon
-                                                                            className="h-5 w-5"
-                                                                            aria-hidden="true" />
-                                                                    </span>
-                                                                ) : null}
-                                                            </>
-                                                        )}
-                                                    </Listbox.Option>
-                                                ))}
-                                        </Listbox.Options>
-                                    </Transition>
-                                </div>
-                            </>
-                        )}
-                    </Listbox>
-                )}
-            </Field>
-        </div>
-    );
-}
diff --git a/web/src/screens/filters/inputs/MultiSelect.tsx b/web/src/screens/filters/inputs/MultiSelect.tsx
deleted file mode 100644
index 68cf4e8..0000000
--- a/web/src/screens/filters/inputs/MultiSelect.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import { MultiSelect as RMSC}  from "react-multi-select-component";
-import { Field } from "formik";
-import { classNames, COL_WIDTHS } from "../../../styles/utils";
-
-interface Props {
-    label?: string;
-    options?: [] | any;
-    name: string;
-    className?: string;
-    columns?: COL_WIDTHS;
-}
-
-const MultiSelect: React.FC<Props> = ({
-    name,
-    label,
-    options,
-    className,
-    columns
-}) => (
-    <div
-        className={classNames(
-            columns ? `col-span-${columns}` : "col-span-12"
-        )}
-    >
-        <label
-            className="block mb-2 text-xs font-bold tracking-wide text-gray-700 uppercase dark:text-gray-200"
-            htmlFor={label}
-        >
-            {label}
-        </label>
-
-        <Field name={name} type="select" multiple={true}>
-            {({
-                field,
-                form: { setFieldValue },
-            }: any) => (
-                <RMSC
-                    {...field}
-                    type="select"
-                    options={options}
-                    labelledBy={name}
-                    value={field.value && field.value.map((item: any) => options.find((o: any) => o.value === item))}
-                    onChange={(values: any) => {
-                        let am = values && values.map((i: any) => i.value)
-
-                        setFieldValue(field.name, am)
-                    }}
-                    className="dark:bg-gray-700"
-                />
-            )}
-        </Field>
-    </div>
-);
-
-export default MultiSelect;
\ No newline at end of file
diff --git a/web/src/screens/filters/inputs/NumberField.tsx b/web/src/screens/filters/inputs/NumberField.tsx
deleted file mode 100644
index c94a5a1..0000000
--- a/web/src/screens/filters/inputs/NumberField.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from "react";
-import { Field } from "formik";
-import { classNames } from "../../../styles/utils";
-
-interface Props {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    className?: string;
-    required?: boolean;
-}
-
-const NumberField: React.FC<Props> = ({
-    name,
-    label,
-    placeholder,
-    required,
-    className,
-}) => (
-    <div className="col-span-12 sm:col-span-6">
-        <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-            {label}
-        </label>
-
-        <Field name={name} type="number">
-            {({
-                field,
-                meta,
-            }: any) => (
-                <div className="sm:col-span-2">
-                    <input
-                        type="number"
-                        {...field}
-                        className={classNames(
-                            meta.touched && meta.error
-                                ? "focus:ring-red-500 focus:border-red-500 border-red-500"
-                                : "focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 border-gray-300",
-                            "mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-sm dark:text-gray-100 sm:text-sm rounded-md"
-                        )}
-                        placeholder={placeholder}
-                    />
-                    {meta.touched && meta.error && (
-                        <div className="error">{meta.error}</div>
-                    )}
-                </div>
-
-            )}
-        </Field>
-    </div>
-);
-
-export default NumberField;
diff --git a/web/src/screens/filters/inputs/Select.tsx b/web/src/screens/filters/inputs/Select.tsx
deleted file mode 100644
index 365cc48..0000000
--- a/web/src/screens/filters/inputs/Select.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Fragment } from "react";
-import { Field } from "formik";
-import { Listbox, Transition } from "@headlessui/react";
-import { CheckIcon, SelectorIcon } from "@heroicons/react/solid";
-import { classNames } from "../../../styles/utils";
-
-interface Option {
-    label: string;
-    value: string;
-}
-
-interface props {
-    name: string;
-    label: string;
-    optionDefaultText: string;
-    options: Option[];
-}
-
-function Select({ name, label, optionDefaultText, options }: props) {
-    return (
-        <div className="col-span-6">
-            <Field name={name} type="select">
-                {({
-                    field,
-                    form: { setFieldValue },
-                }: any) => (
-                    <Listbox
-                        value={field.value}
-                        onChange={(value: any) => setFieldValue(field?.name, value)}
-                    >
-                        {({ open }) => (
-                            <>
-                                <Listbox.Label className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-                                    {label}
-                                </Listbox.Label>
-                                <div className="mt-2 relative">
-                                    <Listbox.Button className="bg-white dark:bg-gray-800 relative w-full border border-gray-300 dark:border-gray-700 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:focus:ring-blue-500 focus:border-indigo-500 dark:focus:border-blue-500 dark:text-gray-200 sm:text-sm">
-                                        <span className="block truncate">
-                                            {field.value
-                                                ? options.find((c) => c.value === field.value)!.label
-                                                : optionDefaultText
-                                            }
-                                        </span>
-                                        <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                                            <SelectorIcon
-                                                className="h-5 w-5 text-gray-400 dark:text-gray-300"
-                                                aria-hidden="true"
-                                            />
-                                        </span>
-                                    </Listbox.Button>
-
-                                    <Transition
-                                        show={open}
-                                        as={Fragment}
-                                        leave="transition ease-in duration-100"
-                                        leaveFrom="opacity-100"
-                                        leaveTo="opacity-0"
-                                    >
-                                        <Listbox.Options
-                                            static
-                                            className="absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
-                                        >
-                                            {options.map((opt) => (
-                                                <Listbox.Option
-                                                    key={opt.value}
-                                                    className={({ active }) =>
-                                                        classNames(
-                                                            active
-                                                                ? "text-white dark:text-gray-100 bg-indigo-600 dark:bg-gray-800"
-                                                                : "text-gray-900 dark:text-gray-300",
-                                                            "cursor-default select-none relative py-2 pl-3 pr-9"
-                                                        )
-                                                    }
-                                                    value={opt.value}
-                                                >
-                                                    {({ selected, active }) => (
-                                                        <>
-                                                            <span
-                                                                className={classNames(
-                                                                    selected ? "font-semibold" : "font-normal",
-                                                                    "block truncate"
-                                                                )}
-                                                            >
-                                                                {opt.label}
-                                                            </span>
-
-                                                            {selected ? (
-                                                                <span
-                                                                    className={classNames(
-                                                                        active ? "text-white dark:text-gray-100" : "text-indigo-600 dark:text-gray-700",
-                                                                        "absolute inset-y-0 right-0 flex items-center pr-4"
-                                                                    )}
-                                                                >
-                                                                    <CheckIcon
-                                                                        className="h-5 w-5"
-                                                                        aria-hidden="true"
-                                                                    />
-                                                                </span>
-                                                            ) : null}
-                                                        </>
-                                                    )}
-                                                </Listbox.Option>
-                                            ))}
-                                        </Listbox.Options>
-                                    </Transition>
-                                </div>
-                            </>
-                        )}
-                    </Listbox>
-                )}
-            </Field>
-        </div>
-    );
-}
-
-export default Select;
diff --git a/web/src/screens/filters/inputs/Switch.tsx b/web/src/screens/filters/inputs/Switch.tsx
deleted file mode 100644
index 17fcc55..0000000
--- a/web/src/screens/filters/inputs/Switch.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { InputHTMLAttributes } from 'react'
-import { Switch as HeadlessSwitch } from '@headlessui/react'
-import { FieldInputProps, FieldMetaProps, FieldProps, FormikProps, FormikValues } from 'formik'
-import { classNames } from "../../../styles/utils";
-
-type SwitchProps<V = any> = {
-    label: string
-    checked: boolean
-    disabled?: boolean
-    onChange: (value: boolean) => void
-    field?: FieldInputProps<V>
-    form?: FormikProps<FormikValues>
-    meta?: FieldMetaProps<V>
-}
-
-export const Switch: React.FC<SwitchProps> = ({
-    label,
-    checked: $checked,
-    disabled = false,
-    onChange: $onChange,
-    field,
-    form,
-}) => {
-    const checked = field?.checked ?? $checked
-
-    return (
-        <HeadlessSwitch.Group as="div" className="flex items-center space-x-4">
-            <HeadlessSwitch.Label>{label}</HeadlessSwitch.Label>
-            <HeadlessSwitch
-                as="button"
-                name={field?.name}
-                disabled={disabled}
-                checked={checked}
-                onChange={value => {
-                    form?.setFieldValue(field?.name ?? '', value)
-                    $onChange && $onChange(value)
-                }}
-
-                className={classNames(
-                    checked ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-600',
-                    'ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
-                )}
-            >
-                {({ checked }) => (
-                    <span
-                        aria-hidden="true"
-                        className={classNames(
-                            checked ? 'translate-x-5' : 'translate-x-0',
-                            'inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
-                        )}
-                    />
-                )}
-            </HeadlessSwitch>
-        </HeadlessSwitch.Group>
-    )
-}
-
-export type SwitchFormikProps = SwitchProps & FieldProps & InputHTMLAttributes<HTMLInputElement>
-
-export const SwitchFormik: React.FC<SwitchProps> = args => <Switch {...args} />
\ No newline at end of file
diff --git a/web/src/screens/filters/inputs/TextField.tsx b/web/src/screens/filters/inputs/TextField.tsx
deleted file mode 100644
index 443cfdc..0000000
--- a/web/src/screens/filters/inputs/TextField.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import { Field } from "formik";
-import { classNames } from "../../../styles/utils";
-
-type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-interface Props {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    columns?: COL_WIDTHS;
-    className?: string;
-    autoComplete?: string;
-}
-
-const TextField: React.FC<Props> = ({ name, label, placeholder, columns, className, autoComplete }) => (
-    <div
-        className={classNames(
-            columns ? `col-span-${columns}` : "col-span-12"
-        )}
-    >
-        {label && (
-            <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-                {label}
-            </label>
-        )}
-        <Field name={name}>
-            {({
-                field,
-                meta,
-            }: any) => (
-                <div>
-                    <input
-                        {...field}
-                        id={name}
-                        type="text"
-                        autoComplete={autoComplete}
-                        className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
-                        placeholder={placeholder}
-                    />
-
-                    {meta.touched && meta.error && (
-                        <div className="error">{meta.error}</div>
-                    )}
-                </div>
-            )}
-        </Field>
-    </div>
-)
-
-export default TextField;
diff --git a/web/src/screens/filters/inputs/index.ts b/web/src/screens/filters/inputs/index.ts
deleted file mode 100644
index 2029573..0000000
--- a/web/src/screens/filters/inputs/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { default as DownloadClientSelect } from "./DownloadClientSelect";
-export { default as TextField } from "./TextField";
-export { default as Select } from "./Select";
-export { default as SwitchGroup } from "./SwitchGroup";
-export { default as MultiSelect } from "./MultiSelect";
-export { default as NumberField } from "./NumberField";
-export { Switch } from "./Switch";
diff --git a/web/src/screens/filters/list.tsx b/web/src/screens/filters/list.tsx
index e410614..751ca4b 100644
--- a/web/src/screens/filters/list.tsx
+++ b/web/src/screens/filters/list.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { Switch } from "@headlessui/react";
-import { EmptyListState } from "../../components/EmptyListState";
+import { EmptyListState } from "../../components/emptystates";
 
 import {
     Link,
@@ -8,7 +8,7 @@ import {
 import { Filter } from "../../domain/interfaces";
 import { useToggle } from "../../hooks/hooks";
 import { useQuery } from "react-query";
-import { classNames } from "../../styles/utils";
+import { classNames } from "../../utils";
 import { FilterAddForm } from "../../forms";
 import APIClient from "../../api/APIClient";
 
diff --git a/web/src/screens/settings/Application.tsx b/web/src/screens/settings/Application.tsx
index 8affadf..a9527b8 100644
--- a/web/src/screens/settings/Application.tsx
+++ b/web/src/screens/settings/Application.tsx
@@ -1,17 +1,17 @@
-import React, {useState} from "react";
-import {Switch} from "@headlessui/react";
-import { classNames } from "../../styles/utils";
+import React, { useState } from "react";
+import { Switch } from "@headlessui/react";
+import { classNames } from "../../utils";
 // import {useRecoilState} from "recoil";
 // import {configState} from "../../state/state";
-import {useQuery} from "react-query";
-import {Config} from "../../domain/interfaces";
+import { useQuery } from "react-query";
+import { Config } from "../../domain/interfaces";
 import APIClient from "../../api/APIClient";
 
 function ApplicationSettings() {
     const [isDebug, setIsDebug] = useState(true)
     // const [config] = useRecoilState(configState)
 
-    const {isLoading, data} = useQuery<Config, Error>(['config'], () => APIClient.config.get(),
+    const { isLoading, data } = useQuery<Config, Error>(['config'], () => APIClient.config.get(),
         {
             retry: false,
             refetchOnWindowFocus: false,
@@ -33,49 +33,49 @@ function ApplicationSettings() {
 
                 {!isLoading && data && (
 
-                <div className="mt-6 grid grid-cols-12 gap-6">
-                    <div className="col-span-6 sm:col-span-4">
-                        <label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-                            Host
-                        </label>
-                        <input
-                            type="text"
-                            name="host"
-                            id="host"
-                            value={data.host}
-                            disabled={true}
-                            className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
-                        />
-                    </div>
+                    <div className="mt-6 grid grid-cols-12 gap-6">
+                        <div className="col-span-6 sm:col-span-4">
+                            <label htmlFor="host" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                                Host
+                            </label>
+                            <input
+                                type="text"
+                                name="host"
+                                id="host"
+                                value={data.host}
+                                disabled={true}
+                                className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+                            />
+                        </div>
 
-                    <div className="col-span-6 sm:col-span-4">
-                        <label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-                            Port
-                        </label>
-                        <input
-                            type="text"
-                            name="port"
-                            id="port"
-                            value={data.port}
-                            disabled={true}
-                            className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
-                        />
-                    </div>
+                        <div className="col-span-6 sm:col-span-4">
+                            <label htmlFor="port" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                                Port
+                            </label>
+                            <input
+                                type="text"
+                                name="port"
+                                id="port"
+                                value={data.port}
+                                disabled={true}
+                                className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+                            />
+                        </div>
 
-                    <div className="col-span-6 sm:col-span-4">
-                        <label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
-                            Base url
-                        </label>
-                        <input
-                            type="text"
-                            name="base_url"
-                            id="base_url"
-                            value={data.base_url}
-                            disabled={true}
-                            className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
-                        />
+                        <div className="col-span-6 sm:col-span-4">
+                            <label htmlFor="base_url" className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
+                                Base url
+                            </label>
+                            <input
+                                type="text"
+                                name="base_url"
+                                id="base_url"
+                                value={data.base_url}
+                                disabled={true}
+                                className="mt-2 block w-full dark:bg-gray-800 border border-gray-300 dark:border-gray-700 border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:text-gray-100 sm:text-sm"
+                            />
+                        </div>
                     </div>
-                </div>
                 )}
             </div>
 
@@ -84,8 +84,7 @@ function ApplicationSettings() {
                     <ul className="mt-2 divide-y divide-gray-200">
                         <Switch.Group as="li" className="py-4 flex items-center justify-between">
                             <div className="flex flex-col">
-                                <Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white"
-                                              passive>
+                                <Switch.Label as="p" className="text-sm font-medium text-gray-900 dark:text-white" passive>
                                     Debug
                                 </Switch.Label>
                                 <Switch.Description className="text-sm text-gray-500 dark:text-gray-400">
@@ -94,6 +93,7 @@ function ApplicationSettings() {
                             </div>
                             <Switch
                                 checked={isDebug}
+                                disabled={true}
                                 onChange={setIsDebug}
                                 className={classNames(
                                     isDebug ? 'bg-teal-500 dark:bg-blue-500' : 'bg-gray-200 dark:bg-gray-700',
diff --git a/web/src/screens/settings/DownloadClient.tsx b/web/src/screens/settings/DownloadClient.tsx
index 3f93af5..5fb671c 100644
--- a/web/src/screens/settings/DownloadClient.tsx
+++ b/web/src/screens/settings/DownloadClient.tsx
@@ -2,25 +2,24 @@ import { DownloadClient } from "../../domain/interfaces";
 import { useToggle } from "../../hooks/hooks";
 import { Switch } from "@headlessui/react";
 import { useQuery } from "react-query";
-import { classNames } from "../../styles/utils";
+import { classNames } from "../../utils";
 import { DownloadClientAddForm, DownloadClientUpdateForm } from "../../forms";
-import EmptySimple from "../../components/empty/EmptySimple";
+import { EmptySimple } from "../../components/emptystates";
 import APIClient from "../../api/APIClient";
 import { DownloadClientTypeNameMap } from "../../domain/constants";
 
-interface DownloadLClientSettingsListItemProps {
+interface DLSettingsItemProps {
     client: DownloadClient;
     idx: number;
 }
 
-function DownloadClientSettingsListItem({ client, idx }: DownloadLClientSettingsListItemProps) {
+function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
     const [updateClientIsOpen, toggleUpdateClient] = useToggle(false)
 
     return (
         <tr key={client.name} className={idx % 2 === 0 ? 'light:bg-white' : 'light:bg-gray-50'}>
-            {updateClientIsOpen &&
-                <DownloadClientUpdateForm client={client} isOpen={updateClientIsOpen} toggle={toggleUpdateClient} />
-            }
+            <DownloadClientUpdateForm client={client} isOpen={updateClientIsOpen} toggle={toggleUpdateClient} />
+            
             <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                 <Switch
                     checked={client.enabled}
@@ -65,9 +64,7 @@ function DownloadClientSettings() {
     return (
         <div className="divide-y divide-gray-200 lg:col-span-9">
 
-            {addClientIsOpen &&
-                <DownloadClientAddForm isOpen={addClientIsOpen} toggle={toggleAddClient} />
-            }
+            <DownloadClientAddForm isOpen={addClientIsOpen} toggle={toggleAddClient} />
 
             <div className="py-6 px-4 sm:p-6 lg:pb-8">
                 <div className="-ml-4 -mt-4 flex justify-between items-center flex-wrap sm:flex-nowrap">
@@ -137,8 +134,6 @@ function DownloadClientSettings() {
                         : <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
                     }
                 </div>
-
-
             </div>
         </div>
 
diff --git a/web/src/screens/settings/Indexer.tsx b/web/src/screens/settings/Indexer.tsx
index bdf269b..d5df93c 100644
--- a/web/src/screens/settings/Indexer.tsx
+++ b/web/src/screens/settings/Indexer.tsx
@@ -4,8 +4,8 @@ import { useQuery } from "react-query";
 import { IndexerAddForm, IndexerUpdateForm } from "../../forms";
 import { Indexer } from "../../domain/interfaces";
 import { Switch } from "@headlessui/react";
-import { classNames } from "../../styles/utils";
-import EmptySimple from "../../components/empty/EmptySimple";
+import { classNames } from "../../utils";
+import { EmptySimple } from "../../components/emptystates";
 import APIClient from "../../api/APIClient";
 
 const ListItem = ({ indexer }: any) => {
diff --git a/web/src/screens/settings/Irc.tsx b/web/src/screens/settings/Irc.tsx
index d7450a5..d29da13 100644
--- a/web/src/screens/settings/Irc.tsx
+++ b/web/src/screens/settings/Irc.tsx
@@ -3,8 +3,8 @@ import { IrcNetworkAddForm, IrcNetworkUpdateForm } from "../../forms";
 import { useToggle } from "../../hooks/hooks";
 import { useQuery } from "react-query";
 import { Switch } from "@headlessui/react";
-import { classNames } from "../../styles/utils";
-import EmptySimple from "../../components/empty/EmptySimple";
+import { classNames } from "../../utils";
+import { EmptySimple } from "../../components/emptystates";
 import APIClient from "../../api/APIClient";
 
 interface IrcNetwork {
diff --git a/web/src/styles/utils.ts b/web/src/styles/utils.ts
deleted file mode 100644
index 41418d0..0000000
--- a/web/src/styles/utils.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// concatenate classes
-export function classNames(...classes: string[]) {
-    return classes.filter(Boolean).join(' ')
-}
-
-// column widths for inputs etc
-export type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
diff --git a/web/src/utils/utils.ts b/web/src/utils/index.ts
similarity index 86%
rename from web/src/utils/utils.ts
rename to web/src/utils/index.ts
index 1dcaabb..8534593 100644
--- a/web/src/utils/utils.ts
+++ b/web/src/utils/index.ts
@@ -50,3 +50,10 @@ export function buildPath(...args: string[]): string {
 
     return firstTrimmed === '/' ? `/${result}` : result;
 }
+
+export function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ')
+}
+
+// column widths for inputs etc
+export type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
\ No newline at end of file
diff --git a/web/yarn.lock b/web/yarn.lock
index c8feb66..7b1da4a 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1165,13 +1165,20 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.15.4", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.13.10", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
+  integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.10.4", "@babel/template@^7.16.0", "@babel/template@^7.3.3":
   version "7.16.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
@@ -1238,16 +1245,16 @@
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
   integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
 
-"@emotion/cache@^11.4.0", "@emotion/cache@^11.6.0":
-  version "11.6.0"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.6.0.tgz#65fbdbbe4382f1991d8b20853c38e63ecccec9a1"
-  integrity sha512-ElbsWY1KMwEowkv42vGo0UPuLgtPYfIs9BxxVrmvsaJVvktknsHYYlx5NQ5g6zLDcOTyamlDc7FkRg2TAcQDKQ==
+"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
   dependencies:
     "@emotion/memoize" "^0.7.4"
     "@emotion/sheet" "^1.1.0"
     "@emotion/utils" "^1.0.0"
     "@emotion/weak-memoize" "^0.2.5"
-    stylis "^4.0.10"
+    stylis "4.0.13"
 
 "@emotion/hash@^0.8.0":
   version "0.8.0"
@@ -1260,12 +1267,12 @@
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
 "@emotion/react@^11.1.1":
-  version "11.6.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.6.0.tgz#61fcb95c1e01255734c2c721cb9beabcf521eb0f"
-  integrity sha512-23MnRZFBN9+D1lHXC5pD6z4X9yhPxxtHr6f+iTGz6Fv6Rda0GdefPrsHL7otsEf+//7uqCdT5QtHeRxHCERzuw==
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
+  integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
   dependencies:
     "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.6.0"
+    "@emotion/cache" "^11.7.1"
     "@emotion/serialize" "^1.0.2"
     "@emotion/sheet" "^1.1.0"
     "@emotion/utils" "^1.0.0"
@@ -5318,18 +5325,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-final-form-arrays@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/final-form-arrays/-/final-form-arrays-3.0.2.tgz#9f3bef778dec61432357744eb6f3abef7e7f3847"
-  integrity sha512-TfO8aZNz3RrsZCDx8GHMQcyztDNpGxSSi9w4wpSNKlmv2PfFWVVM8P7Yj5tj4n0OWax+x5YwTLhT5BnqSlCi+w==
-
-final-form@^4.20.2:
-  version "4.20.4"
-  resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.20.4.tgz#8d59e36d3248a227265cc731d76c0564dd2606f6"
-  integrity sha512-hyoOVVilPLpkTvgi+FSJkFZrh0Yhy4BhE6lk/NiBwrF4aRV8/ykKEyXYvQH/pfUbRkOosvpESYouFb+FscsLrw==
-  dependencies:
-    "@babel/runtime" "^7.10.0"
-
 finalhandler@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -9681,20 +9676,6 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-final-form-arrays@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/react-final-form-arrays/-/react-final-form-arrays-3.1.3.tgz#d3594c500495a4cf5e437070ada989da9624bba2"
-  integrity sha512-dzBiLfbr9l1YRExARBpJ8uA/djBenCvFrbrsXjd362joDl3vT+WhmMKKr6HDQMJffjA8T4gZ3n5+G9M59yZfuQ==
-  dependencies:
-    "@babel/runtime" "^7.12.1"
-
-react-final-form@^6.5.3:
-  version "6.5.7"
-  resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.5.7.tgz#0c1098accf0f0011adee5a46076ed1b99ed1b1ea"
-  integrity sha512-o7tvJXB+McGiXOILqIC8lnOcX4aLhIBiF/Xi9Qet35b7XOS8R7KL8HLRKTfnZWQJm6MCE15v1U0SFive0NcxyA==
-  dependencies:
-    "@babel/runtime" "^7.15.4"
-
 react-hot-toast@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-hot-toast/-/react-hot-toast-2.1.1.tgz#56409ab406b534e9e58274cf98d80355ba0fdda0"
@@ -11015,10 +10996,10 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-stylis@^4.0.10:
-  version "4.0.10"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
-  integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
 supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.5.0"