diff --git a/client/src/javascript/components/general/Duration.js b/client/src/javascript/components/general/Duration.tsx
similarity index 84%
rename from client/src/javascript/components/general/Duration.js
rename to client/src/javascript/components/general/Duration.tsx
index cbabbe24..bfeae370 100644
--- a/client/src/javascript/components/general/Duration.js
+++ b/client/src/javascript/components/general/Duration.tsx
@@ -1,7 +1,14 @@
 import {FormattedMessage} from 'react-intl';
 import React from 'react';
 
-export default class Duration extends React.Component {
+import type {Duration as DurationType} from '@shared/types/Torrent';
+
+interface DurationProps {
+  suffix: React.ReactNode;
+  value: 'Infinity' | DurationType;
+}
+
+export default class Duration extends React.Component<DurationProps> {
   render() {
     let {suffix = null} = this.props;
     const {value: duration} = this.props;
@@ -18,7 +25,7 @@ export default class Duration extends React.Component {
 
     if (duration === 'Infinity') {
       content = <FormattedMessage id="unit.time.infinity" />;
-    } else if (duration.years > 0) {
+    } else if (duration.years != null && duration.years > 0) {
       content = [
         <span className="duration--segment" key="years">
           {duration.years}
@@ -33,7 +40,7 @@ export default class Duration extends React.Component {
           </em>
         </span>,
       ];
-    } else if (duration.weeks > 0) {
+    } else if (duration.weeks != null && duration.weeks > 0) {
       content = [
         <span className="duration--segment" key="weeks">
           {duration.weeks}
@@ -48,7 +55,7 @@ export default class Duration extends React.Component {
           </em>
         </span>,
       ];
-    } else if (duration.days > 0) {
+    } else if (duration.days != null && duration.days > 0) {
       content = [
         <span className="duration--segment" key="days">
           {duration.days}
@@ -63,7 +70,7 @@ export default class Duration extends React.Component {
           </em>
         </span>,
       ];
-    } else if (duration.hours > 0) {
+    } else if (duration.hours != null && duration.hours > 0) {
       content = [
         <span className="duration--segment" key="hours">
           {duration.hours}
@@ -78,7 +85,7 @@ export default class Duration extends React.Component {
           </em>
         </span>,
       ];
-    } else if (duration.minutes > 0) {
+    } else if (duration.minutes != null && duration.minutes > 0) {
       content = [
         <span className="duration--segment" key="minutes">
           {duration.minutes}
diff --git a/client/src/javascript/components/general/LoadingIndicator.js b/client/src/javascript/components/general/LoadingIndicator.tsx
similarity index 77%
rename from client/src/javascript/components/general/LoadingIndicator.js
rename to client/src/javascript/components/general/LoadingIndicator.tsx
index bd41c901..8e59260c 100644
--- a/client/src/javascript/components/general/LoadingIndicator.js
+++ b/client/src/javascript/components/general/LoadingIndicator.tsx
@@ -1,7 +1,11 @@
 import classnames from 'classnames';
 import React from 'react';
 
-export default class LoadingIndicator extends React.Component {
+interface LoadingIndicatorProps {
+  inverse?: boolean;
+}
+
+export default class LoadingIndicator extends React.Component<LoadingIndicatorProps> {
   render() {
     const classes = classnames('loading-indicator', {
       'is-inverse': this.props.inverse,
diff --git a/client/src/javascript/components/general/ProgressBar.js b/client/src/javascript/components/general/ProgressBar.tsx
similarity index 69%
rename from client/src/javascript/components/general/ProgressBar.js
rename to client/src/javascript/components/general/ProgressBar.tsx
index 714398b8..a5e964bb 100644
--- a/client/src/javascript/components/general/ProgressBar.js
+++ b/client/src/javascript/components/general/ProgressBar.tsx
@@ -1,9 +1,14 @@
 import React from 'react';
 
-export default class ProgressBar extends React.PureComponent {
+interface ProgressBarProps {
+  percent: number;
+  icon?: JSX.Element;
+}
+
+export default class ProgressBar extends React.PureComponent<ProgressBarProps> {
   render() {
     const percent = Math.round(this.props.percent);
-    const style = {};
+    const style: React.CSSProperties = {};
 
     if (percent !== 100) {
       style.width = `${percent}%`;
diff --git a/client/src/javascript/components/general/Ratio.js b/client/src/javascript/components/general/Ratio.tsx
similarity index 67%
rename from client/src/javascript/components/general/Ratio.js
rename to client/src/javascript/components/general/Ratio.tsx
index fa9ee28a..09d5eef6 100644
--- a/client/src/javascript/components/general/Ratio.js
+++ b/client/src/javascript/components/general/Ratio.tsx
@@ -1,7 +1,11 @@
 import {FormattedNumber} from 'react-intl';
 import React from 'react';
 
-export default class Ratio extends React.Component {
+interface RatioProps {
+  value: number;
+}
+
+export default class Ratio extends React.Component<RatioProps> {
   render() {
     let ratio = this.props.value;
 
@@ -14,7 +18,7 @@ export default class Ratio extends React.Component {
       precision = 0;
     }
 
-    ratio = ratio.toFixed(precision);
+    ratio = Number(ratio.toFixed(precision));
 
     return <FormattedNumber value={ratio} />;
   }
diff --git a/client/src/javascript/components/general/filesystem/TorrentDestination.tsx b/client/src/javascript/components/general/filesystem/TorrentDestination.tsx
index cd6fc294..7380ba72 100644
--- a/client/src/javascript/components/general/filesystem/TorrentDestination.tsx
+++ b/client/src/javascript/components/general/filesystem/TorrentDestination.tsx
@@ -186,7 +186,7 @@ class TorrentDestination extends React.Component<TorrentDestinationProps, Torren
           </Textbox>
         </FormRow>
         <FormRow>
-          <Checkbox grow={false} id="useBasePath">
+          <Checkbox grow={false} id="isBasePath">
             <FormattedMessage id="torrents.destination.base_path" />
           </Checkbox>
         </FormRow>
diff --git a/client/src/javascript/components/modals/Modal.js b/client/src/javascript/components/modals/Modal.tsx
similarity index 68%
rename from client/src/javascript/components/modals/Modal.js
rename to client/src/javascript/components/modals/Modal.tsx
index dbddbb27..a41732c6 100644
--- a/client/src/javascript/components/modals/Modal.js
+++ b/client/src/javascript/components/modals/Modal.tsx
@@ -4,9 +4,31 @@ import React from 'react';
 import ModalActions from './ModalActions';
 import ModalTabs from './ModalTabs';
 
-const METHODS_TO_BIND = ['handleTabChange'];
+import type {Tab} from './ModalTabs';
+
+interface ModalProps {
+  heading?: React.ReactNode;
+  content?: React.ReactNode;
+  className?: string | null;
+  alignment?: 'left' | 'center';
+  size?: 'medium' | 'large';
+  orientation?: 'horizontal' | 'vertical';
+  tabsInBody?: boolean;
+  inverse?: boolean;
+  actions?: ModalActions['props']['actions'];
+  tabs?: Record<string, Tab>;
+  onSetRef?: (id: string, ref: HTMLDivElement | null) => void;
+}
+
+interface ModalStates {
+  activeTabId: string | null;
+}
+
+const METHODS_TO_BIND = ['handleTabChange'] as const;
+
+export default class Modal extends React.Component<ModalProps, ModalStates> {
+  domRefs: Record<string, HTMLDivElement | null> = {};
 
-export default class Modal extends React.Component {
   static defaultProps = {
     alignment: 'left',
     className: null,
@@ -16,10 +38,9 @@ export default class Modal extends React.Component {
     tabsInBody: false,
   };
 
-  constructor() {
-    super();
+  constructor(props: ModalProps) {
+    super(props);
 
-    this.domRefs = {};
     this.state = {
       activeTabId: null,
     };
@@ -29,19 +50,11 @@ export default class Modal extends React.Component {
     });
   }
 
-  getActiveTabId() {
-    if (this.state.activeTabId) {
-      return this.state.activeTabId;
-    }
-
-    return Object.keys(this.props.tabs)[0];
+  handleTabChange(tab: Tab) {
+    this.setState({activeTabId: tab.id || null});
   }
 
-  handleTabChange(tab) {
-    this.setState({activeTabId: tab.id});
-  }
-
-  setRef(id, ref) {
+  setRef(id: string, ref: HTMLDivElement | null) {
     this.domRefs[id] = ref;
 
     if (this.props.onSetRef) {
@@ -74,11 +87,15 @@ export default class Modal extends React.Component {
     let headerTabs;
 
     if (this.props.tabs) {
-      const activeTabId = this.getActiveTabId();
+      let {activeTabId} = this.state;
+      if (activeTabId == null) {
+        [activeTabId] = Object.keys(this.props.tabs);
+      }
+
       const activeTab = this.props.tabs[activeTabId];
       const contentClasses = classnames('modal__content', activeTab.modalContentClasses);
 
-      const ModalContentComponent = activeTab.content;
+      const ModalContentComponent = activeTab.content as React.FunctionComponent;
       const modalContentData = activeTab.props;
 
       const tabs = (
@@ -107,7 +124,7 @@ export default class Modal extends React.Component {
     if (this.props.actions) {
       footer = (
         <div className="modal__footer">
-          <ModalActions actions={this.props.actions} dismiss={this.props.dismiss} />
+          <ModalActions actions={this.props.actions} />
         </div>
       );
     }
diff --git a/client/src/javascript/components/modals/ModalActions.js b/client/src/javascript/components/modals/ModalActions.js
deleted file mode 100644
index 26667b7e..00000000
--- a/client/src/javascript/components/modals/ModalActions.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import classnames from 'classnames';
-import React from 'react';
-
-import {Button, Checkbox} from '../../ui';
-import UIActions from '../../actions/UIActions';
-
-export default class ModalActions extends React.Component {
-  static defaultProps = {
-    alignment: 'left',
-  };
-
-  getModalButtons(actions) {
-    const buttons = actions.map((action, index) => {
-      const classes = classnames('button', {
-        [action.supplementalClassName]: action.supplementalClassName,
-      });
-
-      if (action.type === 'checkbox') {
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          <Checkbox checked={action.checked} id={action.id} key={index} onChange={this.getClickHandler(action)}>
-            {action.content}
-          </Checkbox>
-        );
-      }
-
-      return (
-        <Button
-          className={classes}
-          isLoading={action.isLoading}
-          onClick={this.getClickHandler(action)}
-          priority={action.type}
-          // eslint-disable-next-line react/no-array-index-key
-          key={index}
-          type={action.submit ? 'submit' : 'button'}>
-          {action.content}
-        </Button>
-      );
-    });
-
-    return <div className="modal__button-group">{buttons}</div>;
-  }
-
-  getClickHandler(action) {
-    return (event) => {
-      if (action.clickHandler) {
-        action.clickHandler(event);
-      }
-
-      if (action.triggerDismiss) {
-        UIActions.dismissModal();
-      }
-    };
-  }
-
-  render() {
-    return <div className="modal__actions">{this.getModalButtons(this.props.actions)}</div>;
-  }
-}
diff --git a/client/src/javascript/components/modals/ModalActions.tsx b/client/src/javascript/components/modals/ModalActions.tsx
new file mode 100644
index 00000000..ae88e3f4
--- /dev/null
+++ b/client/src/javascript/components/modals/ModalActions.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import {Button, Checkbox} from '../../ui';
+import UIActions from '../../actions/UIActions';
+
+interface BaseAction {
+  content: React.ReactNode;
+  triggerDismiss?: boolean;
+}
+
+interface CheckboxAction extends BaseAction {
+  type: 'checkbox';
+  id?: Checkbox['props']['id'];
+  checked?: Checkbox['props']['checked'];
+  clickHandler?: ((event: React.MouseEvent<HTMLInputElement> | KeyboardEvent) => void) | null;
+}
+
+interface ButtonAction extends BaseAction {
+  type: 'primary' | 'tertiary';
+  isLoading?: Button['props']['isLoading'];
+  submit?: boolean;
+  clickHandler?: ((event: React.MouseEvent<HTMLButtonElement>) => void) | null;
+}
+
+interface ModalActionsProps {
+  actions: Array<CheckboxAction | ButtonAction>;
+}
+
+export default class ModalActions extends React.Component<ModalActionsProps> {
+  render() {
+    const buttons = this.props.actions.map((action, index) => {
+      let dismissIfNeeded = () => {
+        // do nothing by default.
+      };
+
+      if (action.triggerDismiss) {
+        dismissIfNeeded = () => {
+          UIActions.dismissModal();
+        };
+      }
+
+      if (action.type === 'checkbox') {
+        return (
+          <Checkbox
+            checked={action.checked}
+            id={action.id}
+            key={index} // eslint-disable-line react/no-array-index-key
+            onChange={(event) => {
+              if (action.clickHandler != null) {
+                action.clickHandler(event);
+              }
+              dismissIfNeeded();
+            }}>
+            {action.content}
+          </Checkbox>
+        );
+      }
+
+      return (
+        <Button
+          isLoading={action.isLoading}
+          onClick={(event) => {
+            if (action.clickHandler != null) {
+              action.clickHandler(event);
+            }
+            dismissIfNeeded();
+          }}
+          priority={action.type}
+          key={index} // eslint-disable-line react/no-array-index-key
+          type={action.submit ? 'submit' : 'button'}>
+          {action.content}
+        </Button>
+      );
+    });
+
+    const buttonsGroup = <div className="modal__button-group">{buttons}</div>;
+
+    return <div className="modal__actions">{buttonsGroup}</div>;
+  }
+}
diff --git a/client/src/javascript/components/modals/ModalFormSectionHeader.js b/client/src/javascript/components/modals/ModalFormSectionHeader.tsx
similarity index 100%
rename from client/src/javascript/components/modals/ModalFormSectionHeader.js
rename to client/src/javascript/components/modals/ModalFormSectionHeader.tsx
diff --git a/client/src/javascript/components/modals/ModalTabs.js b/client/src/javascript/components/modals/ModalTabs.tsx
similarity index 61%
rename from client/src/javascript/components/modals/ModalTabs.js
rename to client/src/javascript/components/modals/ModalTabs.tsx
index 9435e56d..857bb63a 100644
--- a/client/src/javascript/components/modals/ModalTabs.js
+++ b/client/src/javascript/components/modals/ModalTabs.tsx
@@ -1,12 +1,26 @@
 import classnames from 'classnames';
 import React from 'react';
 
-export default class ModalTabs extends React.Component {
+export interface Tab {
+  id?: string;
+  label: React.ReactNode;
+  content: React.ReactNode | React.FunctionComponent;
+  props?: Record<string, unknown>;
+  modalContentClasses?: string;
+}
+
+interface ModalTabsProps {
+  activeTabId: string | null;
+  tabs: Record<string, Tab>;
+  onTabChange: (tab: Tab) => void;
+}
+
+export default class ModalTabs extends React.Component<ModalTabsProps> {
   static defaultProps = {
-    tabs: [],
+    tabs: {},
   };
 
-  handleTabClick(tab) {
+  handleTabClick(tab: Tab) {
     if (this.props.onTabChange) {
       this.props.onTabChange(tab);
     }
diff --git a/client/src/javascript/components/modals/Modals.js b/client/src/javascript/components/modals/Modals.tsx
similarity index 61%
rename from client/src/javascript/components/modals/Modals.js
rename to client/src/javascript/components/modals/Modals.tsx
index 2e8005c4..44fd475b 100644
--- a/client/src/javascript/components/modals/Modals.js
+++ b/client/src/javascript/components/modals/Modals.tsx
@@ -16,21 +16,44 @@ import TorrentDetailsModal from './torrent-details-modal/TorrentDetailsModal';
 import UIActions from '../../actions/UIActions';
 import UIStore from '../../stores/UIStore';
 
-class Modals extends React.Component {
-  constructor() {
-    super();
+import type {Modal} from '../../stores/UIStore';
 
-    this.modals = {
-      'add-torrents': AddTorrentsModal,
-      confirm: ConfirmModal,
-      feeds: FeedsModal,
-      'move-torrents': MoveTorrentsModal,
-      'remove-torrents': RemoveTorrentsModal,
-      'set-taxonomy': SetTagsModal,
-      'set-tracker': SetTrackerModal,
-      settings: SettingsModal,
-      'torrent-details': TorrentDetailsModal,
-    };
+interface ModalsProps {
+  activeModal?: Modal | null;
+}
+
+const createModal = (id: Modal['id'], options: Modal['options']): React.ReactNode => {
+  switch (id) {
+    case 'add-torrents':
+      return <AddTorrentsModal />;
+    case 'confirm':
+      return <ConfirmModal options={options as ConfirmModal['props']['options']} />;
+    case 'feeds':
+      return <FeedsModal />;
+    case 'move-torrents':
+      return <MoveTorrentsModal />;
+    case 'remove-torrents':
+      return <RemoveTorrentsModal />;
+    case 'set-taxonomy':
+      return <SetTagsModal />;
+    case 'set-tracker':
+      return <SetTrackerModal />;
+    case 'settings':
+      return <SettingsModal />;
+    case 'torrent-details':
+      return <TorrentDetailsModal options={options} />;
+    default:
+      return null;
+  }
+};
+
+const dismissModal = () => {
+  UIActions.dismissModal();
+};
+
+class Modals extends React.Component<ModalsProps> {
+  constructor(props: ModalsProps) {
+    super(props);
 
     this.handleKeyPress = throttle(this.handleKeyPress, 1000);
   }
@@ -43,28 +66,14 @@ class Modals extends React.Component {
     window.removeEventListener('keydown', this.handleKeyPress);
   }
 
-  dismissModal() {
-    UIActions.dismissModal();
-  }
-
-  getModal() {
-    const ActiveModal = this.modals[this.props.activeModal.id];
-
-    return <ActiveModal dismiss={this.dismissModal} options={this.props.activeModal.options} />;
-  }
-
-  handleKeyPress = (event) => {
+  handleKeyPress = (event: KeyboardEvent) => {
     if (this.props.activeModal != null && event.keyCode === 27) {
-      this.dismissModal();
+      dismissModal();
     }
   };
 
-  handleModalClick(event) {
-    event.stopPropagation();
-  }
-
   handleOverlayClick = () => {
-    this.dismissModal();
+    dismissModal();
   };
 
   render() {
@@ -75,7 +84,7 @@ class Modals extends React.Component {
         <CSSTransition key={this.props.activeModal.id} classNames="modal__animation" timeout={{enter: 500, exit: 500}}>
           <div className="modal">
             <div className="modal__overlay" onClick={this.handleOverlayClick} />
-            {this.getModal()}
+            {createModal(this.props.activeModal.id, this.props.activeModal.options)}
           </div>
         </CSSTransition>
       );
@@ -90,9 +99,9 @@ const ConnectedModals = connectStores(Modals, () => {
     {
       store: UIStore,
       event: EventTypes.UI_MODAL_CHANGE,
-      getValue: ({store}) => {
+      getValue: () => {
         return {
-          activeModal: store.getActiveModal(),
+          activeModal: UIStore.getActiveModal(),
         };
       },
     },
diff --git a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsActions.js b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsActions.tsx
similarity index 63%
rename from client/src/javascript/components/modals/add-torrents-modal/AddTorrentsActions.js
rename to client/src/javascript/components/modals/add-torrents-modal/AddTorrentsActions.tsx
index 36b15c7f..149fb469 100644
--- a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsActions.js
+++ b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsActions.tsx
@@ -1,16 +1,20 @@
-import {injectIntl} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import React, {PureComponent} from 'react';
 
 import ModalActions from '../ModalActions';
 import SettingsStore from '../../../stores/SettingsStore';
 
-class AddTorrentsActions extends PureComponent {
-  getActions() {
-    const startTorrentsOnLoad = SettingsStore.getFloodSetting('startTorrentsOnLoad');
+interface AddTorrentsActionsProps extends WrappedComponentProps {
+  isAddingTorrents: boolean;
+  onAddTorrentsClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+class AddTorrentsActions extends PureComponent<AddTorrentsActionsProps> {
+  getActions(): ModalActions['props']['actions'] {
     return [
       {
-        checked: startTorrentsOnLoad === 'true' || startTorrentsOnLoad === true,
-        clickHandler: this.handleStartTorrentsToggle,
+        checked: Boolean(SettingsStore.getFloodSetting('startTorrentsOnLoad')),
+        clickHandler: null,
         content: this.props.intl.formatMessage({
           id: 'torrents.add.start.label',
         }),
@@ -40,7 +44,7 @@ class AddTorrentsActions extends PureComponent {
   }
 
   render() {
-    return <ModalActions actions={this.getActions()} dismiss={this.props.dismiss} />;
+    return <ModalActions actions={this.getActions()} />;
   }
 }
 
diff --git a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByFile.js b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByFile.js
index 323a2973..0e06cb63 100644
--- a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByFile.js
+++ b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByFile.js
@@ -103,7 +103,7 @@ class AddTorrentsByFile extends React.Component {
     this.setState({isAddingTorrents: true});
 
     const fileData = new FormData();
-    const {destination, start, tags, useBasePath} = formData;
+    const {destination, start, tags, isBasePath} = formData;
 
     this.state.files.forEach((file) => {
       fileData.append('torrents', file);
@@ -114,7 +114,7 @@ class AddTorrentsByFile extends React.Component {
     });
 
     fileData.append('destination', destination);
-    fileData.append('isBasePath', useBasePath);
+    fileData.append('isBasePath', isBasePath);
     fileData.append('start', start);
 
     TorrentActions.addTorrentsByFiles(fileData, destination);
@@ -145,7 +145,6 @@ class AddTorrentsByFile extends React.Component {
           />
         </FormRow>
         <AddTorrentsActions
-          dismiss={this.props.dismissModal}
           onAddTorrentsClick={this.handleAddTorrents}
           isAddingTorrents={this.state.isAddingTorrents}
         />
diff --git a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByURL.tsx b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByURL.tsx
index 47423c56..135df750 100644
--- a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByURL.tsx
+++ b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsByURL.tsx
@@ -17,25 +17,21 @@ type AddTorrentsByURLFormData = {
   [urls: string]: string;
 } & {
   destination: string;
-  useBasePath: boolean;
+  isBasePath: boolean;
   start: boolean;
   tags: string;
 };
 
-interface AddTorrentsByURLProps extends WrappedComponentProps {
-  dismissModal: () => void;
-}
-
 interface AddTorrentsByURLStates {
   isAddingTorrents: boolean;
   tags: string;
   urlTextboxes: Textboxes;
 }
 
-class AddTorrentsByURL extends React.Component<AddTorrentsByURLProps, AddTorrentsByURLStates> {
+class AddTorrentsByURL extends React.Component<WrappedComponentProps, AddTorrentsByURLStates> {
   formRef: Form | null = null;
 
-  constructor(props: AddTorrentsByURLProps) {
+  constructor(props: WrappedComponentProps) {
     super(props);
 
     const activeModal = UIStore.getActiveModal();
@@ -81,7 +77,7 @@ class AddTorrentsByURL extends React.Component<AddTorrentsByURLProps, AddTorrent
     TorrentActions.addTorrentsByUrls({
       urls: this.getURLsFromForm(),
       destination: formData.destination,
-      isBasePath: formData.useBasePath || false,
+      isBasePath: formData.isBasePath || false,
       start: formData.start || false,
       tags: formData.tags != null ? formData.tags.split(',') : undefined,
     });
@@ -122,7 +118,6 @@ class AddTorrentsByURL extends React.Component<AddTorrentsByURLProps, AddTorrent
           />
         </FormRow>
         <AddTorrentsActions
-          dismiss={this.props.dismissModal}
           onAddTorrentsClick={this.handleAddTorrents}
           isAddingTorrents={this.state.isAddingTorrents}
         />
diff --git a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsModal.js b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsModal.tsx
similarity index 76%
rename from client/src/javascript/components/modals/add-torrents-modal/AddTorrentsModal.js
rename to client/src/javascript/components/modals/add-torrents-modal/AddTorrentsModal.tsx
index 9fd67817..d9f09b72 100644
--- a/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsModal.js
+++ b/client/src/javascript/components/modals/add-torrents-modal/AddTorrentsModal.tsx
@@ -1,16 +1,11 @@
-import {injectIntl} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import React from 'react';
 
 import AddTorrentsByFile from './AddTorrentsByFile';
 import AddTorrentsByURL from './AddTorrentsByURL';
 import Modal from '../Modal';
-import UIActions from '../../../actions/UIActions';
-
-class AddTorrents extends React.Component {
-  dismissModal() {
-    UIActions.dismissModal();
-  }
 
+class AddTorrents extends React.Component<WrappedComponentProps> {
   render() {
     const tabs = {
       'by-url': {
@@ -32,7 +27,6 @@ class AddTorrents extends React.Component {
         heading={this.props.intl.formatMessage({
           id: 'torrents.add.heading',
         })}
-        dismiss={this.dismissModal}
         tabs={tabs}
       />
     );
diff --git a/client/src/javascript/components/modals/confirm-modal/ConfirmModal.js b/client/src/javascript/components/modals/confirm-modal/ConfirmModal.tsx
similarity index 61%
rename from client/src/javascript/components/modals/confirm-modal/ConfirmModal.js
rename to client/src/javascript/components/modals/confirm-modal/ConfirmModal.tsx
index d9de240d..e1ecf8aa 100644
--- a/client/src/javascript/components/modals/confirm-modal/ConfirmModal.js
+++ b/client/src/javascript/components/modals/confirm-modal/ConfirmModal.tsx
@@ -2,7 +2,15 @@ import React from 'react';
 
 import Modal from '../Modal';
 
-export default class ConfirmModal extends React.Component {
+interface ConfirmModalProps {
+  options: {
+    content: React.ReactNode;
+    heading: React.ReactNode;
+    actions: Modal['props']['actions'];
+  };
+}
+
+export default class ConfirmModal extends React.Component<ConfirmModalProps> {
   getContent() {
     return <div className="modal__content">{this.props.options.content}</div>;
   }
@@ -13,7 +21,6 @@ export default class ConfirmModal extends React.Component {
         actions={this.props.options.actions}
         alignment="center"
         content={this.getContent()}
-        dismiss={this.props.dismiss}
         heading={this.props.options.heading}
       />
     );
diff --git a/client/src/javascript/components/modals/feeds-modal/FeedsModal.tsx b/client/src/javascript/components/modals/feeds-modal/FeedsModal.tsx
index 004a0923..5640f6b7 100644
--- a/client/src/javascript/components/modals/feeds-modal/FeedsModal.tsx
+++ b/client/src/javascript/components/modals/feeds-modal/FeedsModal.tsx
@@ -6,11 +6,7 @@ import {FeedsStoreClass} from '../../../stores/FeedsStore';
 import FeedsTab from './FeedsTab';
 import Modal from '../Modal';
 
-interface FeedsModalProps extends WrappedComponentProps {
-  dismiss(): void;
-}
-
-class FeedsModal extends React.Component<FeedsModalProps> {
+class FeedsModal extends React.Component<WrappedComponentProps> {
   componentDidMount() {
     FeedsStoreClass.fetchFeedMonitors();
   }
@@ -33,7 +29,6 @@ class FeedsModal extends React.Component<FeedsModalProps> {
 
     return (
       <Modal
-        dismiss={this.props.dismiss}
         heading={this.props.intl.formatMessage({
           id: 'feeds.tabs.heading',
         })}
diff --git a/client/src/javascript/components/modals/move-torrents-modal/MoveTorrentsModal.js b/client/src/javascript/components/modals/move-torrents-modal/MoveTorrentsModal.tsx
similarity index 64%
rename from client/src/javascript/components/modals/move-torrents-modal/MoveTorrentsModal.js
rename to client/src/javascript/components/modals/move-torrents-modal/MoveTorrentsModal.tsx
index 32a5623b..08b30da8 100644
--- a/client/src/javascript/components/modals/move-torrents-modal/MoveTorrentsModal.js
+++ b/client/src/javascript/components/modals/move-torrents-modal/MoveTorrentsModal.tsx
@@ -1,6 +1,8 @@
-import {injectIntl} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import React from 'react';
 
+import type {MoveTorrentsOptions} from '@shared/types/Action';
+
 import {Form} from '../../../ui';
 import Modal from '../Modal';
 import ModalActions from '../ModalActions';
@@ -8,19 +10,37 @@ import TorrentActions from '../../../actions/TorrentActions';
 import TorrentDestination from '../../general/filesystem/TorrentDestination';
 import TorrentStore from '../../../stores/TorrentStore';
 
-class MoveTorrents extends React.Component {
-  constructor(props) {
+interface MoveTorrentsStates {
+  isSettingDownloadPath: boolean;
+  originalSource?: string;
+}
+
+const removeTrailingFilename = (path: string, filename: string): string => {
+  let directoryPath = path.substring(0, path.length - filename.length);
+
+  if (
+    directoryPath.charAt(directoryPath.length - 1) === '/' ||
+    directoryPath.charAt(directoryPath.length - 1) === '\\'
+  ) {
+    directoryPath = directoryPath.substring(0, directoryPath.length - 1);
+  }
+
+  return directoryPath;
+};
+
+class MoveTorrents extends React.Component<WrappedComponentProps, MoveTorrentsStates> {
+  constructor(props: WrappedComponentProps) {
     super(props);
     const filenames = TorrentStore.getSelectedTorrentsFilename();
     const sources = TorrentStore.getSelectedTorrentsDownloadLocations();
 
     this.state = {
       isSettingDownloadPath: false,
-      originalSource: sources.length === 1 ? this.removeTrailingFilename(sources[0], filenames[0]) : null,
+      originalSource: sources.length === 1 ? removeTrailingFilename(sources[0], filenames[0]) : undefined,
     };
   }
 
-  getActions() {
+  getActions(): ModalActions['props']['actions'] {
     return [
       {
         checked: false,
@@ -56,18 +76,22 @@ class MoveTorrents extends React.Component {
     ];
   }
 
-  getContent() {
+  getContent(): React.ReactNode {
     return (
       <div className="modal__content">
-        <Form className="inverse" onChange={this.handleFormChange} onSubmit={this.handleFormSubmit}>
+        <Form
+          className="inverse"
+          onSubmit={({event: _e, formData}) => {
+            return this.handleFormSubmit((formData as unknown) as MoveTorrentsOptions);
+          }}>
           <TorrentDestination id="destination" suggested={this.state.originalSource} />
-          <ModalActions actions={this.getActions()} dismiss={this.props.dismiss} />
+          <ModalActions actions={this.getActions()} />
         </Form>
       </div>
     );
   }
 
-  handleFormSubmit = ({formData}) => {
+  handleFormSubmit = (formData: MoveTorrentsOptions) => {
     const filenames = TorrentStore.getSelectedTorrentsFilename();
     const sourcePaths = TorrentStore.getSelectedTorrentsDownloadLocations();
 
@@ -75,7 +99,7 @@ class MoveTorrents extends React.Component {
       this.setState({isSettingDownloadPath: true});
       TorrentActions.moveTorrents(TorrentStore.getSelectedTorrents(), {
         destination: formData.destination,
-        isBasePath: formData.useBasePath,
+        isBasePath: formData.isBasePath,
         filenames,
         moveFiles: formData.moveFiles,
         sourcePaths,
@@ -86,24 +110,10 @@ class MoveTorrents extends React.Component {
     }
   };
 
-  removeTrailingFilename(path, filename) {
-    let directoryPath = path.substring(0, path.length - filename.length);
-
-    if (
-      directoryPath.charAt(directoryPath.length - 1) === '/' ||
-      directoryPath.charAt(directoryPath.length - 1) === '\\'
-    ) {
-      directoryPath = directoryPath.substring(0, directoryPath.length - 1);
-    }
-
-    return directoryPath;
-  }
-
   render() {
     return (
       <Modal
         content={this.getContent()}
-        dismiss={this.props.dismiss}
         heading={this.props.intl.formatMessage({
           id: 'torrents.move.heading',
         })}
diff --git a/client/src/javascript/components/modals/remove-torrents-modal/RemoveTorrentsModal.js b/client/src/javascript/components/modals/remove-torrents-modal/RemoveTorrentsModal.tsx
similarity index 75%
rename from client/src/javascript/components/modals/remove-torrents-modal/RemoveTorrentsModal.js
rename to client/src/javascript/components/modals/remove-torrents-modal/RemoveTorrentsModal.tsx
index e2a0b7d4..f1ef2a73 100644
--- a/client/src/javascript/components/modals/remove-torrents-modal/RemoveTorrentsModal.js
+++ b/client/src/javascript/components/modals/remove-torrents-modal/RemoveTorrentsModal.tsx
@@ -1,4 +1,4 @@
-import {FormattedMessage, injectIntl} from 'react-intl';
+import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
 import React from 'react';
 
 import {Checkbox, Form, FormRow} from '../../../ui';
@@ -7,9 +7,11 @@ import SettingsStore from '../../../stores/SettingsStore';
 import TorrentActions from '../../../actions/TorrentActions';
 import TorrentStore from '../../../stores/TorrentStore';
 
-class RemoveTorrentsModal extends React.Component {
-  getActions(torrents) {
-    if (torrents.length === 0) {
+class RemoveTorrentsModal extends React.Component<WrappedComponentProps> {
+  formRef?: Form | null;
+
+  getActions(torrentCount: number): Modal['props']['actions'] {
+    if (torrentCount === 0) {
       return [
         {
           clickHandler: null,
@@ -22,7 +24,7 @@ class RemoveTorrentsModal extends React.Component {
 
     return [
       {
-        clickHandler: this.handleRemoveTorrentDecline,
+        clickHandler: null,
         content: this.props.intl.formatMessage({
           id: 'button.no',
         }),
@@ -40,15 +42,14 @@ class RemoveTorrentsModal extends React.Component {
     ];
   }
 
-  getContent(torrents) {
+  getContent(torrentCount: number) {
     let modalContent = null;
     let deleteDataContent = null;
-    const selectedTorrentCount = torrents.length;
 
-    if (selectedTorrentCount === 0) {
+    if (torrentCount === 0) {
       modalContent = <FormattedMessage id="torrents.remove.error.no.torrents.selected" />;
     } else {
-      modalContent = <FormattedMessage id="torrents.remove.are.you.sure" values={{count: selectedTorrentCount}} />;
+      modalContent = <FormattedMessage id="torrents.remove.are.you.sure" values={{count: torrentCount}} />;
 
       deleteDataContent = (
         <FormRow>
@@ -73,9 +74,14 @@ class RemoveTorrentsModal extends React.Component {
   }
 
   handleRemovalConfirmation = () => {
+    let deleteData = false;
+    if (this.formRef != null && this.formRef.getFormData().deleteData) {
+      deleteData = true;
+    }
+
     TorrentActions.deleteTorrents({
       hashes: TorrentStore.getSelectedTorrents(),
-      deleteData: this.formRef.getFormData().deleteData,
+      deleteData,
     });
   };
 
@@ -87,10 +93,9 @@ class RemoveTorrentsModal extends React.Component {
 
     return (
       <Modal
-        actions={this.getActions(selectedTorrents)}
+        actions={this.getActions(selectedTorrents.length)}
         alignment="center"
-        content={this.getContent(selectedTorrents)}
-        dismiss={this.props.dismiss}
+        content={this.getContent(selectedTorrents.length)}
         heading={modalHeading}
       />
     );
diff --git a/client/src/javascript/components/modals/set-tags-modal/SetTagsModal.js b/client/src/javascript/components/modals/set-tags-modal/SetTagsModal.tsx
similarity index 80%
rename from client/src/javascript/components/modals/set-tags-modal/SetTagsModal.js
rename to client/src/javascript/components/modals/set-tags-modal/SetTagsModal.tsx
index 2ab08f58..20b5567e 100644
--- a/client/src/javascript/components/modals/set-tags-modal/SetTagsModal.js
+++ b/client/src/javascript/components/modals/set-tags-modal/SetTagsModal.tsx
@@ -1,4 +1,4 @@
-import {injectIntl} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import React from 'react';
 
 import {Form, FormRow, Textbox} from '../../../ui';
@@ -6,10 +6,14 @@ import Modal from '../Modal';
 import TorrentActions from '../../../actions/TorrentActions';
 import TorrentStore from '../../../stores/TorrentStore';
 
-class SetTagsModal extends React.Component {
-  formRef = null;
+interface SetTagsModalStates {
+  isSettingTags: boolean;
+}
 
-  constructor(props) {
+class SetTagsModal extends React.Component<WrappedComponentProps, SetTagsModalStates> {
+  formRef: Form | null = null;
+
+  constructor(props: WrappedComponentProps) {
     super(props);
     this.state = {
       isSettingTags: false,
@@ -17,13 +21,17 @@ class SetTagsModal extends React.Component {
   }
 
   handleSetTagsClick = () => {
-    const formData = this.formRef.getFormData();
+    if (this.formRef == null) {
+      return;
+    }
+
+    const formData = this.formRef.getFormData() as {tags: string};
     const tags = formData.tags ? formData.tags.split(',') : [];
 
     this.setState({isSettingTags: true}, () => TorrentActions.setTaxonomy(TorrentStore.getSelectedTorrents(), tags));
   };
 
-  getActions() {
+  getActions(): Modal['props']['actions'] {
     const primaryButtonText = this.props.intl.formatMessage({
       id: 'torrents.set.tags.button.set',
     });
@@ -75,7 +83,6 @@ class SetTagsModal extends React.Component {
       <Modal
         actions={this.getActions()}
         content={this.getContent()}
-        dismiss={this.props.dismiss}
         heading={this.props.intl.formatMessage({
           id: 'torrents.set.tags.heading',
         })}
diff --git a/client/src/javascript/components/modals/set-tracker-modal/SetTrackerModal.js b/client/src/javascript/components/modals/set-tracker-modal/SetTrackerModal.tsx
similarity index 77%
rename from client/src/javascript/components/modals/set-tracker-modal/SetTrackerModal.js
rename to client/src/javascript/components/modals/set-tracker-modal/SetTrackerModal.tsx
index 05dc19f7..9eda7eb5 100644
--- a/client/src/javascript/components/modals/set-tracker-modal/SetTrackerModal.js
+++ b/client/src/javascript/components/modals/set-tracker-modal/SetTrackerModal.tsx
@@ -1,4 +1,4 @@
-import {injectIntl} from 'react-intl';
+import {injectIntl, WrappedComponentProps} from 'react-intl';
 import React from 'react';
 
 import {Form, FormRow, Textbox} from '../../../ui';
@@ -6,18 +6,26 @@ import Modal from '../Modal';
 import TorrentActions from '../../../actions/TorrentActions';
 import TorrentStore from '../../../stores/TorrentStore';
 
-class SetTrackerModal extends React.Component {
-  formRef = null;
+interface SetTrackerModalStates {
+  isSettingTracker: boolean;
+}
 
-  constructor(props) {
+class SetTrackerModal extends React.Component<WrappedComponentProps, SetTrackerModalStates> {
+  formRef: Form | null = null;
+
+  constructor(props: WrappedComponentProps) {
     super(props);
     this.state = {
       isSettingTracker: false,
     };
   }
 
-  handleSetTrackerClick = () => {
-    const formData = this.formRef.getFormData();
+  handleSetTrackerClick = (): void => {
+    if (this.formRef == null) {
+      return;
+    }
+
+    const formData = this.formRef.getFormData() as {tracker: string};
     const {tracker} = formData;
 
     this.setState({isSettingTracker: true}, () =>
@@ -25,7 +33,7 @@ class SetTrackerModal extends React.Component {
     );
   };
 
-  getActions() {
+  getActions(): Modal['props']['actions'] {
     const primaryButtonText = this.props.intl.formatMessage({
       id: 'torrents.set.tracker.button.set',
     });
@@ -49,7 +57,7 @@ class SetTrackerModal extends React.Component {
     ];
   }
 
-  getContent() {
+  getContent(): React.ReactNode {
     const trackerValue = TorrentStore.getSelectedTorrentsTrackerURIs()[0].join(', ');
 
     return (
@@ -77,7 +85,6 @@ class SetTrackerModal extends React.Component {
       <Modal
         actions={this.getActions()}
         content={this.getContent()}
-        dismiss={this.props.dismiss}
         heading={this.props.intl.formatMessage({
           id: 'torrents.set.tracker.heading',
         })}
diff --git a/client/src/javascript/components/modals/settings-modal/SettingsModal.js b/client/src/javascript/components/modals/settings-modal/SettingsModal.js
index d3b62c71..24960355 100644
--- a/client/src/javascript/components/modals/settings-modal/SettingsModal.js
+++ b/client/src/javascript/components/modals/settings-modal/SettingsModal.js
@@ -208,7 +208,6 @@ class SettingsModal extends React.Component {
         })}
         onSetRef={this.handleModalRefSet}
         orientation={window.matchMedia('(max-width: 720px)').matches ? 'horizontal' : 'vertical'}
-        dismiss={this.props.dismiss}
         tabs={tabs}
       />
     );
diff --git a/client/src/javascript/components/modals/torrent-details-modal/TorrentDetailsModal.js b/client/src/javascript/components/modals/torrent-details-modal/TorrentDetailsModal.js
index 16881879..75c4b3dc 100644
--- a/client/src/javascript/components/modals/torrent-details-modal/TorrentDetailsModal.js
+++ b/client/src/javascript/components/modals/torrent-details-modal/TorrentDetailsModal.js
@@ -11,7 +11,6 @@ import TorrentHeading from './TorrentHeading';
 import TorrentPeers from './TorrentPeers';
 import TorrentStore from '../../../stores/TorrentStore';
 import TorrentTrackers from './TorrentTrackers';
-import UIActions from '../../../actions/UIActions';
 import UIStore from '../../../stores/UIStore';
 
 class TorrentDetailsModal extends React.Component {
@@ -23,10 +22,6 @@ class TorrentDetailsModal extends React.Component {
     TorrentStore.stopPollingTorrentDetails();
   }
 
-  dismissModal() {
-    UIActions.dismissModal();
-  }
-
   getModalHeading() {
     return <TorrentHeading torrent={this.props.torrent} key="torrent-heading" />;
   }
@@ -80,7 +75,6 @@ class TorrentDetailsModal extends React.Component {
     return (
       <Modal
         heading={this.getModalHeading()}
-        dismiss={this.dismissModal}
         size="large"
         tabs={tabs}
         orientation={window.matchMedia('(max-width: 720px)').matches ? 'horizontal' : 'vertical'}
diff --git a/client/src/javascript/stores/FeedsStore.ts b/client/src/javascript/stores/FeedsStore.ts
index de126608..99960791 100644
--- a/client/src/javascript/stores/FeedsStore.ts
+++ b/client/src/javascript/stores/FeedsStore.ts
@@ -22,7 +22,7 @@ export interface Rule {
   destination: string;
   tags: Array<string>;
   startOnLoad: boolean;
-  useBasePath?: boolean;
+  isBasePath?: boolean;
   count?: number;
 }
 
diff --git a/client/src/javascript/stores/UIStore.ts b/client/src/javascript/stores/UIStore.ts
index be1a0a15..be3073e6 100644
--- a/client/src/javascript/stores/UIStore.ts
+++ b/client/src/javascript/stores/UIStore.ts
@@ -29,8 +29,18 @@ export interface Dependency {
 export type Dependencies = Record<string, Dependency>;
 
 export interface Modal {
-  id: string;
+  id:
+    | 'add-torrents'
+    | 'confirm'
+    | 'feeds'
+    | 'move-torrents'
+    | 'remove-torrents'
+    | 'set-taxonomy'
+    | 'set-tracker'
+    | 'settings'
+    | 'torrent-details';
   torrents?: unknown;
+  options?: unknown;
 }
 
 class UIStoreClass extends BaseStore {
diff --git a/package-lock.json b/package-lock.json
index ec633626..0f5a152f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2082,6 +2082,15 @@
         "csstype": "^3.0.2"
       }
     },
+    "@types/react-custom-scrollbars": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/@types/react-custom-scrollbars/-/react-custom-scrollbars-4.0.7.tgz",
+      "integrity": "sha512-4QPZdwd+wmzWq9TyNSA/4MZFYvlQn1GlEFFkpFx8VSs13gR/L+hQne0vFnbzwlQmGG7OksthkoVpYxWJjzz95w==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/react-dom": {
       "version": "16.9.8",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.8.tgz",
diff --git a/package.json b/package.json
index 4d2c2d48..1901e44f 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "@types/passport": "^1.0.4",
     "@types/passport-jwt": "^3.0.3",
     "@types/react": "^16.9.49",
+    "@types/react-custom-scrollbars": "^4.0.7",
     "@types/react-dom": "^16.9.8",
     "@types/react-measure": "^2.0.6",
     "@types/react-router-dom": "^5.1.5",
diff --git a/shared/types/Torrent.ts b/shared/types/Torrent.ts
index fdf61dbf..b966e455 100644
--- a/shared/types/Torrent.ts
+++ b/shared/types/Torrent.ts
@@ -1,6 +1,7 @@
 import {TorrentStatus} from '../constants/torrentStatusMap';
 
 export interface Duration {
+  years?: number;
   weeks?: number;
   days?: number;
   hours?: number;