diff --git a/frontend/package.json b/frontend/package.json
index 234f1c85..2bf1ea7e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,6 +37,7 @@
   "devDependencies": {
     "@eslint/js": "^9.19.0",
     "@hey-api/openapi-ts": "^0.82.4",
+    "@types/luxon": "^3.7.1",
     "@types/node": "^24.3.1",
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
diff --git a/frontend/src/app.jsx b/frontend/src/app.jsx
index cb778303..8038b7a8 100644
--- a/frontend/src/app.jsx
+++ b/frontend/src/app.jsx
@@ -1,11 +1,7 @@
 import axios from 'axios';
-
 import nebula from '/src/nebula';
-
 import { useState, useEffect, Suspense } from 'react';
-
 import { useLocalStorage } from '/src/hooks';
-
 import { Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
 
 import { MediaUploadMonitor } from './containers/MediaUpload/MediaUploadMonitor';
diff --git a/frontend/src/components/Button.styled.tsx b/frontend/src/components/Button.styled.tsx
new file mode 100644
index 00000000..d887351c
--- /dev/null
+++ b/frontend/src/components/Button.styled.tsx
@@ -0,0 +1,72 @@
+import styled from 'styled-components';
+
+import { getTheme } from './theme';
+
+export const BaseButton = styled.button`
+  border: 0;
+  border-radius: ${getTheme().inputBorderRadius};
+  background: ${getTheme().inputBackground};
+  color: ${getTheme().colors.text};
+  font-size: ${getTheme().fontSize};
+  padding-left: 12px;
+  padding-right: 12px;
+  min-height: ${getTheme().inputHeight};
+  max-height: ${getTheme().inputHeight};
+  min-width: ${getTheme().inputHeight} !important;
+
+  &.icon-only {
+    padding: 0;
+    min-width: ${getTheme().inputHeight};
+    max-width: ${getTheme().inputHeight};
+    min-height: ${getTheme().inputHeight};
+    max-height: ${getTheme().inputHeight};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  user-select: none;
+  user-drag: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  cursor: pointer;
+  white-space: nowrap;
+
+  .icon {
+    font-size: 20px;
+    padding-top: 2px;
+  }
+
+  &:focus {
+    background: ${getTheme().colors.surface06};
+    outline: 0;
+  }
+
+  &:hover {
+    background: ${getTheme().colors.surface06};
+    color: ${getTheme().colors.text};
+    text-decoration: none; // when rendered as a
+  }
+
+  &:invalid,
+  &.error {
+    outline: 1px solid ${getTheme().colors.red} !important;
+  }
+
+  &.active {
+    background: ${getTheme().colors.surface06};
+    text-shadow: 0 0 4px ${getTheme().colors.highlight};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    background: ${getTheme().colors.surface03};
+    color: ${getTheme().colors.surface08};
+    transition:
+      background 0.2s,
+      color 0.2s;
+  }
+`;
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index 8bee54d6..078393fd 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -1,77 +1,7 @@
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import styled from 'styled-components';
 
-import { getTheme } from './theme';
-
-const BaseButton = styled.button`
-  border: 0;
-  border-radius: ${getTheme().inputBorderRadius};
-  background: ${getTheme().inputBackground};
-  color: ${getTheme().colors.text};
-  font-size: ${getTheme().fontSize};
-  padding-left: 12px;
-  padding-right: 12px;
-  min-height: ${getTheme().inputHeight};
-  max-height: ${getTheme().inputHeight};
-  min-width: ${getTheme().inputHeight} !important;
-
-  &.icon-only {
-    padding: 0;
-    min-width: ${getTheme().inputHeight};
-    max-width: ${getTheme().inputHeight};
-    min-height: ${getTheme().inputHeight};
-    max-height: ${getTheme().inputHeight};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  user-select: none;
-  user-drag: none;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-
-  .icon {
-    font-size: 20px;
-    padding-top: 2px;
-  }
-
-  &:focus {
-    background: ${getTheme().colors.surface06};
-    outline: 0;
-  }
-
-  &:hover {
-    background: ${getTheme().colors.surface06};
-    color: ${getTheme().colors.text};
-    text-decoration: none; // when rendered as a
-  }
-
-  &:invalid,
-  &.error {
-    outline: 1px solid ${getTheme().colors.red} !important;
-  }
-
-  &.active {
-    background: ${getTheme().colors.surface06};
-    text-shadow: 0 0 4px ${getTheme().colors.highlight};
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    background: ${getTheme().colors.surface03};
-    color: ${getTheme().colors.surface08};
-    transition:
-      background 0.2s,
-      color 0.2s;
-  }
-`;
+import { BaseButton } from './Button.styled';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: string;
diff --git a/frontend/src/containers/Dialogs/DatePickerDialog.jsx b/frontend/src/components/DatePickerDialog.tsx
similarity index 65%
rename from frontend/src/containers/Dialogs/DatePickerDialog.jsx
rename to frontend/src/components/DatePickerDialog.tsx
index fd21f787..786660fb 100644
--- a/frontend/src/containers/Dialogs/DatePickerDialog.jsx
+++ b/frontend/src/components/DatePickerDialog.tsx
@@ -3,7 +3,8 @@ import { useState, useEffect } from 'react';
 import DatePicker from 'react-datepicker';
 import styled from 'styled-components';
 
-import { Dialog, Button } from '/src/components';
+import Button from './Button';
+import Dialog from './Dialog';
 
 const DatePickerWrapper = styled.div`
   display: flex;
@@ -14,10 +15,25 @@ const DatePickerWrapper = styled.div`
   min-height: 250px;
 `;
 
-const DatePickerDialog = (props) => {
-  const [value, setValue] = useState();
+interface DatePickerDialogProps {
+  title: string;
+  value: string;
+  handleCancel: () => void;
+  handleConfirm: (value: string) => void;
+  cancelLabel?: string;
+  confirmLabel?: string;
+}
+
+const DatePickerDialog = (props: DatePickerDialogProps) => {
+  /*
+   * A dialog component that allows the user to pick a date.
+   * Date is in the format 'yyyy-MM-dd', which is the
+   * one and the only sane date format.
+   */
+  const [value, setValue] = useState<DateTime>();
   const onCancel = () => props.handleCancel();
   const onConfirm = () => {
+    if (!value) return;
     const t = value.toFormat('yyyy-MM-dd');
     props.handleConfirm(t);
   };
@@ -44,6 +60,11 @@ const DatePickerDialog = (props) => {
     </>
   );
 
+  const handleChange = (date: Date | null) => {
+    if (!date) return;
+    setValue(DateTime.fromJSDate(date));
+  };
+
   return (
     <Dialog onHide={onCancel} header={props.title} footer={footer}>
       <DatePickerWrapper>
@@ -51,7 +72,7 @@ const DatePickerDialog = (props) => {
           <DatePicker
             calendarStartDay={1}
             selected={value.toJSDate()}
-            onChange={(date) => setValue(DateTime.fromJSDate(date))}
+            onChange={handleChange}
             inline
           />
         )}
diff --git a/frontend/src/components/Dropdown.jsx b/frontend/src/components/Dropdown.jsx
deleted file mode 100644
index 54dcd5c3..00000000
--- a/frontend/src/components/Dropdown.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import clsx from 'clsx';
-import styled from 'styled-components';
-
-import Button from './Button';
-
-const DropdownContainer = styled.div`
-  position: relative;
-  display: inline-block;
-
-  .dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: var(--color-surface-02);
-    min-width: 100px;
-    box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.7);
-    z-index: 5;
-
-    hr {
-      margin: 0;
-      border: none;
-      border-top: 2px solid var(--color-surface-03);
-    }
-
-    button {
-      background: none;
-      width: 100%;
-      justify-content: flex-start;
-      border-radius: 0;
-      padding: 25px 8px;
-
-      &:hover {
-        background-color: var(--color-surface-04);
-      }
-
-      &.active,
-      &:focus {
-        outline: none !important;
-        background-color: var(--color-surface-04);
-        text-shadow: none !important;
-      }
-
-      &:disabled {
-        color: var(--color-text-dim);
-      }
-    }
-  }
-
-  > button {
-    // background: none;
-    // border: none;
-    // border-radius: 0;
-    padding: 0 8px;
-    justify-content: space-between;
-
-    &:active,
-    &:focus {
-      outline: none !important;
-    }
-  }
-
-  &:not(.disabled):hover .dropdown-content {
-    display: block;
-  }
-`;
-
-const DropdownOption = ({
-  currentValue,
-  separator,
-  disabled,
-  hlColor,
-  style,
-  label,
-  icon,
-  onClick,
-  value,
-}) => {
-  return (
-    <span>
-      {separator && <hr />}
-      <Button
-        label={label}
-        icon={icon}
-        style={style}
-        iconStyle={hlColor ? { color: hlColor } : {}}
-        disabled={disabled || currentValue === value}
-        onClick={() => onClick(value)}
-        active={currentValue === value}
-      />
-    </span>
-  );
-};
-
-const Dropdown = ({
-  options,
-  label = null,
-  icon = 'expand_more',
-  align = 'left',
-  buttonStyle = {},
-  contentStyle = {},
-  value = null,
-  disabled = false,
-  iconOnRight = true,
-}) => {
-  if (align === 'right') contentStyle['right'] = 0;
-
-  return (
-    <DropdownContainer className={clsx({ disabled })}>
-      <Button
-        className="dropbtn"
-        style={buttonStyle}
-        icon={icon}
-        label={label}
-        iconOnRight={iconOnRight}
-        disabled={disabled}
-      />
-      <div className="dropdown-content" style={contentStyle}>
-        {options &&
-          options.map((option, idx) => (
-            <DropdownOption key={idx} currentValue={value} {...option} />
-          ))}
-      </div>
-    </DropdownContainer>
-  );
-};
-
-export default Dropdown;
diff --git a/frontend/src/components/Dropdown.styled.tsx b/frontend/src/components/Dropdown.styled.tsx
new file mode 100644
index 00000000..135f6407
--- /dev/null
+++ b/frontend/src/components/Dropdown.styled.tsx
@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+
+export const DropdownContainer = styled.div`
+  position: relative;
+  display: inline-block;
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: var(--color-surface-02);
+    min-width: 100px;
+    box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.7);
+    z-index: 5;
+
+    hr {
+      margin: 0;
+      border: none;
+      border-top: 2px solid var(--color-surface-03);
+    }
+
+    button {
+      background: none;
+      width: 100%;
+      justify-content: flex-start;
+      border-radius: 0;
+      padding: 25px 8px;
+
+      &:hover {
+        background-color: var(--color-surface-04);
+      }
+
+      &.active,
+      &:focus {
+        outline: none !important;
+        background-color: var(--color-surface-04);
+        text-shadow: none !important;
+      }
+
+      &:disabled {
+        color: var(--color-text-dim);
+      }
+    }
+  }
+
+  > button {
+    // background: none;
+    // border: none;
+    // border-radius: 0;
+    padding: 0 8px;
+    justify-content: space-between;
+
+    &:active,
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  &:not(.disabled):hover .dropdown-content {
+    display: block;
+  }
+`;
diff --git a/frontend/src/components/Dropdown.tsx b/frontend/src/components/Dropdown.tsx
new file mode 100644
index 00000000..34d816eb
--- /dev/null
+++ b/frontend/src/components/Dropdown.tsx
@@ -0,0 +1,101 @@
+import clsx from 'clsx';
+
+import Button from './Button';
+import { DropdownContainer } from './Dropdown.styled.tsx';
+
+interface DropdownOptionProps {
+  currentValue: any;
+  separator?: boolean;
+  disabled?: boolean;
+  hlColor?: string;
+  style?: React.CSSProperties;
+  label: string;
+  icon?: string;
+  onClick: (value: any) => void;
+  value: any;
+}
+
+const DropdownOption = ({
+  currentValue,
+  separator,
+  disabled,
+  hlColor,
+  style,
+  label,
+  icon,
+  onClick,
+  value,
+}: DropdownOptionProps) => {
+  return (
+    <span>
+      {separator && <hr />}
+      <Button
+        label={label}
+        icon={icon}
+        style={style}
+        iconStyle={hlColor ? { color: hlColor } : {}}
+        disabled={disabled || currentValue === value}
+        onClick={() => onClick(value)}
+        active={currentValue === value}
+      />
+    </span>
+  );
+};
+
+interface DropdownProps {
+  options: DropdownOptionProps[];
+  label?: string;
+  icon?: string;
+  align?: 'left' | 'right';
+  buttonStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
+  value?: any;
+  disabled?: boolean;
+  iconOnRight?: boolean;
+}
+
+const Dropdown = ({
+  options,
+  label,
+  icon = 'expand_more',
+  align = 'left',
+  buttonStyle = {},
+  contentStyle = {},
+  value = null,
+  disabled = false,
+  iconOnRight = true,
+}: DropdownProps) => {
+  if (align === 'right') contentStyle['right'] = 0;
+
+  return (
+    <DropdownContainer className={clsx({ disabled })}>
+      <Button
+        className="dropbtn"
+        style={buttonStyle}
+        icon={icon}
+        label={label}
+        iconOnRight={iconOnRight}
+        disabled={disabled}
+      />
+      <div className="dropdown-content" style={contentStyle}>
+        {options &&
+          options.map((option, idx) => (
+            <DropdownOption
+              key={idx}
+              currentValue={value}
+              value={option.value}
+              label={option.label}
+              icon={option.icon}
+              separator={option.separator}
+              disabled={option.disabled}
+              hlColor={option.hlColor}
+              style={option.style}
+              onClick={option.onClick}
+            />
+          ))}
+      </div>
+    </DropdownContainer>
+  );
+};
+
+export default Dropdown;
diff --git a/frontend/src/components/ErrorBanner.jsx b/frontend/src/components/ErrorBanner.tsx
similarity index 100%
rename from frontend/src/components/ErrorBanner.jsx
rename to frontend/src/components/ErrorBanner.tsx
diff --git a/frontend/src/components/Form.tsx b/frontend/src/components/Form.tsx
index bacea9cc..61b28cf8 100644
--- a/frontend/src/components/Form.tsx
+++ b/frontend/src/components/Form.tsx
@@ -1,37 +1,43 @@
 import styled from 'styled-components';
 
 const Form = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap-size);
-
-  h3 {
-    width: 100%;
-    text-align: center;
-    font-size: 1rem;
-    font-weight: 500;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  row-gap: var(--gap-size);
+  column-gap: 16px;
+
+  > label {
+    color: #555;
   }
 
-  .form-row {
-    display: flex;
-    flex-direction: row;
-    gap: var(--gap-size);
-
-    .form-title {
-      min-width: 200px;
-      max-width: 200px;
-      padding-top: 0.5rem;
-      user-select: none;
-      user-drag: none;
+  // .form-title, .form-control {
+  //   border: 1px solid red;
+  // }
+
+  .form-section {
+    grid-column: 1 / -1;
+    h3 {
+      width: 100%;
+      text-align: center;
+      font-size: 1rem;
+      font-weight: 500;
     }
+  }
 
-    .form-control {
-      display: flex;
-      flex-grow: 1;
-      min-width: 220px;
-      > * {
-        width: 100%;
-      }
+  .form-title {
+    padding-top: 0.3rem;
+    user-select: none;
+    user-drag: none;
+    span {
+      white-space: nowrap;
+    }
+  }
+
+  .form-control {
+    display: flex;
+    flex-grow: 1;
+    > * {
+      width: 100%;
     }
   }
 `;
@@ -45,12 +51,16 @@ interface FormRowProps extends React.HTMLAttributes<HTMLDivElement> {
 const FormRow = ({ title, tooltip, section, children, ...props }: FormRowProps) => {
   return (
     <>
-      {section && <h3>{section}</h3>}
-      <div className="form-row" {...props}>
-        <div className="form-title">
-          <span title={tooltip}>{title}</span>
+      {section && (
+        <div className="form-section">
+          <h3>{section}</h3>
         </div>
-        <div className="form-control">{children}</div>
+      )}
+      <div className="form-title">
+        <span title={tooltip}>{title}</span>
+      </div>
+      <div className="form-control" {...props}>
+        {children}
       </div>
     </>
   );
diff --git a/frontend/src/components/InputColor.jsx b/frontend/src/components/InputColor.tsx
similarity index 74%
rename from frontend/src/components/InputColor.jsx
rename to frontend/src/components/InputColor.tsx
index 03b22df5..49aa4dd6 100644
--- a/frontend/src/components/InputColor.jsx
+++ b/frontend/src/components/InputColor.tsx
@@ -25,17 +25,22 @@ const COLOR_PRESETS = [
   '#4c4f69',
 ];
 
-const InputColor = ({ value, onChange, tooltip, ...props }) => {
-  /*
-  Nebula stores color as integer so we need to convert it to hex
-  */
+interface InputColorProps {
+  value: number;
+  onChange: (value: number) => void;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+const InputColor = ({ value, onChange, tooltip, disabled }: InputColorProps) => {
+  // Nebula stores color as integer so we need to convert it to hex
 
   const hexValue = useMemo(() => {
     if (!value) return '#7287fd';
     return `#${value.toString(16).padStart(6, '0')}`;
   }, [value]);
 
-  const setColor = (hex) => {
+  const setColor = (hex: string) => {
     if (!hex) return null;
     onChange(parseInt(hex.slice(1), 16));
   };
@@ -48,7 +53,7 @@ const InputColor = ({ value, onChange, tooltip, ...props }) => {
         title={tooltip}
         list="presetColors"
         onChange={(e) => setColor(e.target.value)}
-        {...props}
+        disabled={disabled}
       />
       <datalist id="presetColors">
         {COLOR_PRESETS.map((color) => (
diff --git a/frontend/src/components/InputDatetime.jsx b/frontend/src/components/InputDatetime.tsx
similarity index 65%
rename from frontend/src/components/InputDatetime.jsx
rename to frontend/src/components/InputDatetime.tsx
index 437c7d43..d7370c55 100644
--- a/frontend/src/components/InputDatetime.jsx
+++ b/frontend/src/components/InputDatetime.tsx
@@ -1,11 +1,10 @@
 import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { useState, useEffect, useRef } from 'react';
-import DatePicker from 'react-datepicker';
 import styled from 'styled-components';
 
 import Button from './Button';
-import Dialog from './Dialog';
+import DatePickerDialog from './DatePickerDialog';
 import Input from './Input.styled';
 
 const timeRegex = /^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/;
@@ -20,52 +19,55 @@ const DateTimeWrapper = styled.div`
   min-width: 200px;
 `;
 
-const DatePickerWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-`;
+interface CalendarDialogProps {
+  value: number;
+  onChange: (value: number) => void;
+  onClose: () => void;
+}
 
-const CalendarDialog = ({ value, onChange, onClose }) => {
+const CalendarDialog = ({ value, onChange, onClose }: CalendarDialogProps) => {
   // get current timestamp
   const defaultDate = DateTime.local().toSeconds();
 
   const [date, setDate] = useState(DateTime.fromSeconds(value || defaultDate));
 
-  const footer = (
-    <>
-      <Button label="Cancel" icon="close" onClick={onClose} />
-      <Button
-        icon="check"
-        label="Apply"
-        onClick={() => {
-          const newDate = date.set({ hour: 0, minute: 0, second: 0 });
-          onChange(newDate.toSeconds());
-          onClose();
-        }}
-      />
-    </>
-  );
-
   return (
-    <Dialog onHide={onClose} footer={footer} header="Select a date...">
-      <DatePickerWrapper>
-        <DatePicker
-          calendarStartDay={1}
-          selected={date.toJSDate()}
-          onChange={(date) => {
-            setDate(DateTime.fromJSDate(date));
-          }}
-          inline
-        />
-      </DatePickerWrapper>
-    </Dialog>
+    <DatePickerDialog
+      title="Select Date"
+      value={date.toFormat('yyyy-MM-dd')}
+      handleCancel={onClose}
+      handleConfirm={(newDateString: string) => {
+        const newDate = DateTime.fromFormat(newDateString, 'yyyy-MM-dd').set({
+          hour: date.hour,
+          minute: date.minute,
+          second: date.second,
+        });
+        setDate(newDate);
+        onChange(newDate.toSeconds());
+        onClose();
+      }}
+      cancelLabel="Close"
+      confirmLabel="Select"
+    />
   );
 };
 
-const InputDatetime = ({ value, onChange, placeholder, mode, className }) => {
-  const [time, setTime] = useState();
+interface InputDatetimeProps {
+  value: number;
+  onChange: (value: number) => void;
+  placeholder: string;
+  mode: 'date' | 'datetime';
+  className: string;
+}
+
+const InputDatetime = ({
+  value,
+  onChange,
+  placeholder,
+  mode,
+  className,
+}: InputDatetimeProps) => {
+  const [time, setTime] = useState<string>();
   const [isFocused, setIsFocused] = useState(false);
   const [showCalendar, setShowCalendar] = useState(false);
   const inputRef = useRef(null);
@@ -80,9 +82,9 @@ const InputDatetime = ({ value, onChange, placeholder, mode, className }) => {
     }
 
     setTime(DateTime.fromSeconds(value).toFormat(timestampFormat));
-  }, [value]);
+  }, [value, timestampFormat]);
 
-  const handleChange = (event) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     let newValue = event.target.value;
     if (!allowedDateCharsRegex.test(newValue)) return;
 
@@ -100,15 +102,20 @@ const InputDatetime = ({ value, onChange, placeholder, mode, className }) => {
     setTime(newValue);
   };
 
-  const isValidTime = (timeString) => {
-    if (!timeString) return true;
-
+  const isValidTime = (timeString: string | undefined) => {
+    if (!timeString) return true; // empty string is valid
     if (timestampRegex.test(timeString))
-      if (!isNaN(DateTime.fromFormat(timeString, timestampFormat))) return true;
+      return DateTime.fromFormat(timeString, timestampFormat).isValid;
     return false;
   };
 
   const onSubmit = () => {
+    if (!inputRef.current) return;
+    if (!time) {
+      onChange(0);
+      setIsFocused(false);
+      return;
+    }
     let value = 0;
 
     if (dateRegex.test(time) && mode !== 'date') {
@@ -120,11 +127,11 @@ const InputDatetime = ({ value, onChange, placeholder, mode, className }) => {
       value = DateTime.fromFormat(time, timestampFormat).toSeconds();
     }
     onChange(value);
-    inputRef.current.blur();
+    (inputRef.current as HTMLInputElement).blur();
     setIsFocused(false);
   };
 
-  const onKeyDown = (e) => {
+  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       onSubmit();
     }
diff --git a/frontend/src/components/InputInteger.jsx b/frontend/src/components/InputInteger.jsx
deleted file mode 100644
index 9ea19944..00000000
--- a/frontend/src/components/InputInteger.jsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Input from './Input.styled';
-
-const InputInteger = ({ value, onChange, tooltip, ...props }) => {
-  return (
-    <Input
-      type="number"
-      value={value || ''}
-      title={tooltip}
-      onChange={(e) => {
-        if (e.target.value === '') onChange(null);
-        else onChange(e.target.value);
-      }}
-      {...props}
-    />
-  );
-};
-
-export default InputInteger;
diff --git a/frontend/src/components/InputInteger.tsx b/frontend/src/components/InputInteger.tsx
new file mode 100644
index 00000000..e28adc04
--- /dev/null
+++ b/frontend/src/components/InputInteger.tsx
@@ -0,0 +1,25 @@
+import Input from './Input.styled';
+
+interface InputIntegerProps {
+  value: number | null;
+  onChange: (value: number | null) => void;
+  tooltip?: string;
+  [key: string]: any;
+}
+
+const InputInteger = ({ value, onChange, tooltip, ...props }: InputIntegerProps) => {
+  return (
+    <Input
+      type="number"
+      value={value || ''}
+      title={tooltip}
+      onChange={(e) => {
+        if (e.target.value === '') onChange(null);
+        else onChange(e.target.value ? parseInt(e.target.value, 10) : null);
+      }}
+      {...props}
+    />
+  );
+};
+
+export default InputInteger;
diff --git a/frontend/src/components/InputNumber.jsx b/frontend/src/components/InputNumber.jsx
deleted file mode 100644
index fc869d21..00000000
--- a/frontend/src/components/InputNumber.jsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import Input from './Input.styled';
-
-const InputNumber = ({ value, onChange, tooltip, ...props }) => {
-  return (
-    <Input
-      type="number"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      title={tooltip}
-      {...props}
-    />
-  );
-};
-
-export default InputNumber;
diff --git a/frontend/src/components/InputNumber.tsx b/frontend/src/components/InputNumber.tsx
new file mode 100644
index 00000000..7ff4181c
--- /dev/null
+++ b/frontend/src/components/InputNumber.tsx
@@ -0,0 +1,24 @@
+import Input from './Input.styled';
+
+interface InputNumberProps {
+  value?: number;
+  onChange: (value: number | undefined) => void;
+  tooltip?: string;
+}
+
+const InputNumber = ({ value, onChange, tooltip }: InputNumberProps) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    if (val === '') {
+      onChange(undefined);
+    } else if (!isNaN(Number(val))) {
+      onChange(Number(val));
+    }
+  };
+
+  return (
+    <Input type="number" value={value || ''} onChange={handleChange} title={tooltip} />
+  );
+};
+
+export default InputNumber;
diff --git a/frontend/src/components/InputSwitch.jsx b/frontend/src/components/InputSwitch.styled.tsx
similarity index 78%
rename from frontend/src/components/InputSwitch.jsx
rename to frontend/src/components/InputSwitch.styled.tsx
index 80fda1d3..715be410 100644
--- a/frontend/src/components/InputSwitch.jsx
+++ b/frontend/src/components/InputSwitch.styled.tsx
@@ -1,23 +1,8 @@
-import clsx from 'clsx';
 import styled from 'styled-components';
 
 import { getTheme } from './theme';
 
-const BaseSwitch = ({ style, className, value, onChange, disabled }) => (
-  <div style={style} className={clsx(className, { disabled })}>
-    <label className="switch-body">
-      <input
-        type="checkbox"
-        checked={value}
-        disabled={disabled}
-        onChange={() => onChange(!value)}
-      />
-      <span className="slider"></span>
-    </label>
-  </div>
-);
-
-const InputSwitch = styled(BaseSwitch)`
+export const BaseSwitch = styled.div`
   max-height: ${getTheme().inputHeight};
   min-height: ${getTheme().inputHeight};
   display: flex;
@@ -90,5 +75,3 @@ const InputSwitch = styled(BaseSwitch)`
     }
   }
 `;
-
-export default InputSwitch;
diff --git a/frontend/src/components/InputSwitch.tsx b/frontend/src/components/InputSwitch.tsx
new file mode 100644
index 00000000..207f13ab
--- /dev/null
+++ b/frontend/src/components/InputSwitch.tsx
@@ -0,0 +1,33 @@
+import clsx from 'clsx';
+
+import { BaseSwitch } from './InputSwitch.styled';
+
+interface InputSwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  disabled?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const InputSwitch = ({
+  style,
+  className,
+  value,
+  onChange,
+  disabled,
+}: InputSwitchProps) => (
+  <BaseSwitch style={style} className={clsx(className, { disabled })}>
+    <label className="switch-body">
+      <input
+        type="checkbox"
+        checked={value}
+        disabled={disabled}
+        onChange={() => onChange(!value)}
+      />
+      <span className="slider"></span>
+    </label>
+  </BaseSwitch>
+);
+
+export default InputSwitch;
diff --git a/frontend/src/components/InputText.jsx b/frontend/src/components/InputText.jsx
deleted file mode 100644
index 9fee41a8..00000000
--- a/frontend/src/components/InputText.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { forwardRef } from 'react';
-
-import Input from './Input.styled';
-
-const InputText = forwardRef(({ value, onChange, tooltip, ...props }, ref) => {
-  return (
-    <Input
-      ref={ref}
-      type="text"
-      value={value || ''}
-      title={tooltip}
-      onChange={(e) => onChange(e.target.value)}
-      {...props}
-    />
-  );
-});
-InputText.displayName = 'InputText';
-
-export default InputText;
diff --git a/frontend/src/components/InputText.tsx b/frontend/src/components/InputText.tsx
new file mode 100644
index 00000000..fa8c32ab
--- /dev/null
+++ b/frontend/src/components/InputText.tsx
@@ -0,0 +1,34 @@
+import { forwardRef } from 'react';
+
+import Input from './Input.styled';
+
+interface InputTextProps {
+  value?: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  tooltip?: string;
+  style?: React.CSSProperties;
+  className?: string;
+}
+
+const InputText = forwardRef<HTMLInputElement, InputTextProps>(
+  (props: InputTextProps, ref) => {
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        value={props.value || ''}
+        title={props.tooltip}
+        placeholder={props.placeholder}
+        disabled={props.disabled}
+        onChange={(e) => props.onChange(e.target.value)}
+        style={props.style}
+        className={props.className}
+      />
+    );
+  }
+);
+InputText.displayName = 'InputText';
+
+export default InputText;
diff --git a/frontend/src/components/Loader.jsx b/frontend/src/components/Loader.tsx
similarity index 91%
rename from frontend/src/components/Loader.jsx
rename to frontend/src/components/Loader.tsx
index 1463fca5..c66e21d9 100644
--- a/frontend/src/components/Loader.jsx
+++ b/frontend/src/components/Loader.tsx
@@ -45,7 +45,11 @@ const LoaderWrapper = styled.div`
   justify-content: center;
 `;
 
-const Loader = ({ style }) => {
+interface LoaderProps {
+  style?: React.CSSProperties;
+}
+
+const Loader = ({ style }: LoaderProps) => {
   return <LoaderContainer style={style}></LoaderContainer>;
 };
 
diff --git a/frontend/src/components/Progress.jsx b/frontend/src/components/Progress.jsx
index c44cc2ff..4fbd1e52 100644
--- a/frontend/src/components/Progress.jsx
+++ b/frontend/src/components/Progress.jsx
@@ -10,7 +10,7 @@ const BaseProgress = styled.div`
   background: ${getTheme().inputBackground};
   height: 10px;
 
-  div {
+  .progress {
     height: 100%;
     background: ${getTheme().colors.cyan};
     border-radius: ${getTheme().inputBorderRadius};
diff --git a/frontend/src/components/RadioButton.jsx b/frontend/src/components/RadioButton.tsx
similarity index 67%
rename from frontend/src/components/RadioButton.jsx
rename to frontend/src/components/RadioButton.tsx
index f058bcde..b909e82c 100644
--- a/frontend/src/components/RadioButton.jsx
+++ b/frontend/src/components/RadioButton.tsx
@@ -9,9 +9,10 @@ const RadioContainer = styled.div`
 
   button {
     border-radius: 0;
-    border-right: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
+    border-right: 1px solid #161616 !important;
+    flex-grow: 1;
 
     &:first-child {
       border-top-left-radius: 4px;
@@ -19,13 +20,26 @@ const RadioContainer = styled.div`
     }
 
     &:last-child {
+      border-right: 0;
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
     }
 
 `;
 
-const RadioButton = ({ options, value, onChange }) => {
+interface RadioButtonProps {
+  options: {
+    value: string;
+    title: string;
+    icon?: string;
+    tooltip?: string;
+    buttonStyle?: React.CSSProperties;
+  }[];
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const RadioButton = ({ options, value, onChange }: RadioButtonProps) => {
   return (
     <RadioContainer>
       {options.map((option) => (
@@ -34,7 +48,7 @@ const RadioButton = ({ options, value, onChange }) => {
           onClick={() => onChange(option.value)}
           className={clsx({ active: option.value === value })}
           icon={option.icon}
-          label={option.label}
+          label={option.title}
           tooltip={option.tooltip}
           style={option.buttonStyle}
         />
diff --git a/frontend/src/components/Timestamp.jsx b/frontend/src/components/Timestamp.tsx
similarity index 58%
rename from frontend/src/components/Timestamp.jsx
rename to frontend/src/components/Timestamp.tsx
index 56ee3031..9b4e9df4 100644
--- a/frontend/src/components/Timestamp.jsx
+++ b/frontend/src/components/Timestamp.tsx
@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
+import { dateToDateString } from './lib/datetime';
+import { dateToTimeString } from './lib/datetime';
 import { getTheme } from './theme';
-import { dateToDateString } from '/src/utils';
-import { dateToTimeString } from '/src/utils';
 
 const TimestampWrapper = styled.div`
   display: flex;
@@ -17,8 +17,15 @@ const TimestampWrapper = styled.div`
   }
 `;
 
-const Timestamp = ({ timestamp, mode, ...props }) => {
+interface TimestampProps extends React.HTMLAttributes<HTMLDivElement> {
+  timestamp: number; // Unix timestamp in seconds
+  mode?: 'date' | 'time'; // Show only date or only time
+}
+
+const Timestamp = ({ timestamp, mode, ...props }: TimestampProps) => {
+  // Timestamp component to display a unix timestamp in a human-readable format.
   if (!timestamp) return <></>;
+  // const localDateTime = typeof date === 'string' ? new Date(date) : date;
   const localDateTime = new Date(timestamp * 1000);
   const dateStr = dateToDateString(localDateTime);
   const timeStr = dateToTimeString(localDateTime);
diff --git a/frontend/src/components/index.jsx b/frontend/src/components/index.tsx
similarity index 97%
rename from frontend/src/components/index.jsx
rename to frontend/src/components/index.tsx
index dc750e6f..fda59691 100644
--- a/frontend/src/components/index.jsx
+++ b/frontend/src/components/index.tsx
@@ -21,6 +21,7 @@ export { default as SelectDialog } from './SelectDialog';
 export { default as Table } from './table';
 export { default as TextArea } from './TextArea';
 export { default as Timestamp } from './Timestamp';
+export { getTheme } from './theme';
 
 export { Form, FormRow } from './Form';
 export { Loader, LoaderWrapper } from './Loader';
diff --git a/frontend/src/components/lib/colors.ts b/frontend/src/components/lib/colors.ts
new file mode 100644
index 00000000..33d65434
--- /dev/null
+++ b/frontend/src/components/lib/colors.ts
@@ -0,0 +1,89 @@
+type TextColor = '#000000' | '#ffffff';
+
+const hexToRgb = (hex: string): [number, number, number] => {
+  // Converts a 6-digit hexadecimal color string (e.g., "#FF00AA") to its RGB components.
+  const normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;
+
+  if (normalizedHex.length !== 6 || !/^[0-9A-Fa-f]{6}$/.test(normalizedHex)) {
+    throw new Error(`Invalid hex color format: ${hex}`);
+  }
+
+  const bigint = parseInt(normalizedHex, 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+
+  return [r, g, b];
+};
+
+export const getTextColor = (
+  backgroundColor: string,
+  threshold: number = 128
+): TextColor => {
+  // Determines the ideal text color (black or white) against a given background hex color
+  try {
+    const [r, g, b] = hexToRgb(backgroundColor);
+
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+    return brightness > threshold ? '#000000' : '#ffffff';
+  } catch (error) {
+    console.error(error);
+    return '#ffffff';
+  }
+};
+
+const stringToHash = (str: string): number => {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0; // Convert to a 32bit integer
+  }
+  return Math.abs(hash);
+};
+
+const hslToHex = (h: number, s: number, l: number): string => {
+  // Converts an HSL color to a standard 6-digit hex string (#RRGGBB).
+  let r: number, g: number, b: number;
+
+  if (s === 0) {
+    r = g = b = l; // achromatic
+  } else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+      return p;
+    };
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h / 360 + 1 / 3);
+    g = hue2rgb(p, q, h / 360);
+    b = hue2rgb(p, q, h / 360 - 1 / 3);
+  }
+
+  const toHex = (c: number): string => {
+    const hex = Math.round(c * 255).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+};
+
+export const getColorFromString = (inputString: string): string => {
+  // Deterministically generates a vivid hex color based on the input string.
+  // The same string will *always* return the same color.
+
+  if (!inputString || inputString.length === 0) {
+    return '#808080';
+  }
+
+  const hash = stringToHash(inputString);
+  const HUE = hash % 360;
+  const SATURATION = 0.7;
+  const LIGHTNESS = 0.5;
+  return hslToHex(HUE, SATURATION, LIGHTNESS);
+};
diff --git a/frontend/src/components/lib/datetime.ts b/frontend/src/components/lib/datetime.ts
new file mode 100644
index 00000000..327dc687
--- /dev/null
+++ b/frontend/src/components/lib/datetime.ts
@@ -0,0 +1,19 @@
+const zpad = (n: any) => String(n).padStart(2, '0');
+
+export const dateToDateString = (localDateTime: Date | null) => {
+  if (!localDateTime) return '';
+  const yy = localDateTime.getFullYear();
+  const mm = localDateTime.getMonth() + 1; // Months are zero-based
+  const dd = localDateTime.getDate();
+  const dateStr = `${yy}-${zpad(mm)}-${zpad(dd)}`;
+  return dateStr;
+};
+
+export const dateToTimeString = (localDateTime: Date | null) => {
+  if (!localDateTime) return '';
+  const hh = localDateTime.getHours();
+  const min = localDateTime.getMinutes();
+  const ss = localDateTime.getSeconds();
+  const timeStr = `${zpad(hh)}:${zpad(min)}:${zpad(ss)}`;
+  return timeStr;
+};
diff --git a/frontend/src/containers/Browser/Browser.jsx b/frontend/src/containers/Browser/Browser.jsx
index a51c7471..c4478a75 100644
--- a/frontend/src/containers/Browser/Browser.jsx
+++ b/frontend/src/containers/Browser/Browser.jsx
@@ -33,8 +33,11 @@ const BrowserTable = ({ isDragging }) => {
   const [columns, setColumns] = useState([]);
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [sortBy, setSortBy] = useLocalStorage('sortBy', 'ctime');
-  const [sortDirection, setSortDirection] = useLocalStorage('sortDirection', 'desc');
+  const [sortBy, setSortBy] = useLocalStorage('mam.browser.sortBy', 'ctime');
+  const [sortDirection, setSortDirection] = useLocalStorage(
+    'mam.browser.sortDirection',
+    'desc'
+  );
   const [page, setPage] = useState(1);
   const [hasMore, setHasMore] = useState(false);
   const showDialog = useDialog();
diff --git a/frontend/src/containers/Calendar/Calendar.jsx b/frontend/src/containers/Calendar/Calendar.jsx
index 05094513..c257affe 100644
--- a/frontend/src/containers/Calendar/Calendar.jsx
+++ b/frontend/src/containers/Calendar/Calendar.jsx
@@ -39,8 +39,8 @@ const Calendar = ({
   const cursorTime = useRef(null);
 
   const [scrollbarWidth, setScrollbarWidth] = useState(0);
-  const [zoom, setZoom] = useLocalStorage('calendarZoom', 1);
-  const [scrollPos, setScrollPos] = useLocalStorage('calendarPos', 0);
+  const [zoom, setZoom] = useLocalStorage('mam.scheduler.calendarZoom', 1);
+  const [scrollPos, setScrollPos] = useLocalStorage('mam.scheduler.calendarPos', 0);
   const [mousePos, setMousePos] = useState(null);
 
   // Reference to events
diff --git a/frontend/src/containers/Calendar/drawEvents.js b/frontend/src/containers/Calendar/drawEvents.js
index d4097d00..887fa449 100644
--- a/frontend/src/containers/Calendar/drawEvents.js
+++ b/frontend/src/containers/Calendar/drawEvents.js
@@ -1,3 +1,5 @@
+import { getTextColor } from '@components/lib/colors';
+
 import { drawTruncatedText } from './drawUtils';
 
 const drawEvents = (ctx, drawParams, events, draggedEvent) => {
@@ -47,7 +49,7 @@ const drawEvents = (ctx, drawParams, events, draggedEvent) => {
     // event title
 
     ctx.font = '12px Noto Sans';
-    ctx.fillStyle = '#fff';
+    ctx.fillStyle = getTextColor(eventColor, 180);
     drawTruncatedText(ctx, startPos.x + 15, startPos.y + 15, dayWidth - 20, title);
 
     //ctx.fillText(title, startPos.x + 15, startPos.y + 15)
diff --git a/frontend/src/containers/MediaUpload/FileSelect.styled.tsx b/frontend/src/containers/MediaUpload/FileSelect.styled.tsx
index 3868ca81..6a4a9bea 100644
--- a/frontend/src/containers/MediaUpload/FileSelect.styled.tsx
+++ b/frontend/src/containers/MediaUpload/FileSelect.styled.tsx
@@ -17,5 +17,4 @@ export const FileSelectWrapper = styled.div`
     color: var(--color-text-dim);
     cursor: pointer;
   }
-
 `;
diff --git a/frontend/src/containers/MediaUpload/FileSelect.tsx b/frontend/src/containers/MediaUpload/FileSelect.tsx
index 8cec07e7..d479b09c 100644
--- a/frontend/src/containers/MediaUpload/FileSelect.tsx
+++ b/frontend/src/containers/MediaUpload/FileSelect.tsx
@@ -1,10 +1,11 @@
 import React, { useRef, useMemo, DragEvent, ChangeEvent } from 'react';
+
+import nebula from '../../nebula';
+
 import { FileSelectWrapper } from './FileSelect.styled';
 
 import type { ContentType } from '@/client';
 
-import nebula from '../../nebula';
-
 const formatFileSize = (bytes: number): string => {
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(2)} KB`;
@@ -12,21 +13,23 @@ const formatFileSize = (bytes: number): string => {
   return `${(bytes / 1024 / 1024 / 1024).toFixed(2)} GB`;
 };
 
-
 interface FileSelectProps {
   file: File | null;
   setFile: (file: File) => void;
   contentType: ContentType;
 }
 
-
-export const FileSelect: React.FC<FileSelectProps> = ({ file, setFile, contentType }) => {
+export const FileSelect: React.FC<FileSelectProps> = ({
+  file,
+  setFile,
+  contentType,
+}) => {
   const inputRef = useRef<HTMLInputElement>(null);
 
   const onSelect = (selectedFile: File) => {
     // TODO: extension/type validation
     setFile(selectedFile);
-  }
+  };
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {
     const files = [...(event.target.files || [])];
@@ -46,7 +49,6 @@ export const FileSelect: React.FC<FileSelectProps> = ({ file, setFile, contentTy
     return result.join(',');
   }, [contentType]);
 
-
   //
   // Drag-and-Drop Handlers
   //
@@ -69,7 +71,6 @@ export const FileSelect: React.FC<FileSelectProps> = ({ file, setFile, contentTy
     }
   };
 
-
   const mainWidget = useMemo(() => {
     if (file) {
       return (
@@ -77,7 +78,7 @@ export const FileSelect: React.FC<FileSelectProps> = ({ file, setFile, contentTy
           <span>{file.name}</span>
           <span>{formatFileSize(file.size)}</span>
         </>
-      )
+      );
     }
 
     return (
@@ -91,15 +92,18 @@ export const FileSelect: React.FC<FileSelectProps> = ({ file, setFile, contentTy
           onChange={onChange}
           multiple={false}
         />
-        <button onClick={(event) => { inputRef.current?.click(); event?.preventDefault(); }} >
+        <button
+          onClick={(event) => {
+            inputRef.current?.click();
+            event?.preventDefault();
+          }}
+        >
           Click or drag-and-drop file to upload
         </button>
       </>
-    )
-
+    );
   }, [file, accept]);
 
-
   return (
     <FileSelectWrapper
       onDragOver={handleDragOver}
@@ -110,4 +114,3 @@ export const FileSelect: React.FC<FileSelectProps> = ({ file, setFile, contentTy
     </FileSelectWrapper>
   );
 };
-
diff --git a/frontend/src/containers/MediaUpload/MediaUpload.tsx b/frontend/src/containers/MediaUpload/MediaUpload.tsx
index 499c0e8b..ff08b6aa 100644
--- a/frontend/src/containers/MediaUpload/MediaUpload.tsx
+++ b/frontend/src/containers/MediaUpload/MediaUpload.tsx
@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
-import { useMediaUpload } from '@hooks/useMediaUpload';
 import { Button } from '@components';
+import { useMediaUpload } from '@hooks/useMediaUpload';
+import React, { useState } from 'react';
+
+import { MediaUploadDialog } from './MediaUploadDialog';
 
 import type { ContentType } from '@/client';
-import {MediaUploadDialog} from './MediaUploadDialog';
 
 interface UploadButtonProps {
   id: string; // Asset ID (unique identifier of the task as well)
diff --git a/frontend/src/containers/MediaUpload/MediaUploadDialog.tsx b/frontend/src/containers/MediaUpload/MediaUploadDialog.tsx
index 0018e098..afb9d65a 100644
--- a/frontend/src/containers/MediaUpload/MediaUploadDialog.tsx
+++ b/frontend/src/containers/MediaUpload/MediaUploadDialog.tsx
@@ -2,10 +2,10 @@ import { Dialog, Button } from '@components';
 import { useMediaUpload } from '@hooks/useMediaUpload';
 import React, { useState } from 'react';
 
-import type { ContentType } from '@/client';
-
 import { FileSelect } from './FileSelect';
 
+import type { ContentType } from '@/client';
+
 interface UploadDialogProps {
   onHide: () => void;
   id: string; // Asset ID
@@ -32,11 +32,7 @@ export const MediaUploadDialog: React.FC<UploadDialogProps> = ({
 
   const footer = (
     <>
-      <Button 
-        label="Cancel" 
-        icon="close" 
-        onClick={onHide} 
-      />
+      <Button label="Cancel" icon="close" onClick={onHide} />
       <Button
         label="Upload"
         icon="upload"
@@ -52,11 +48,7 @@ export const MediaUploadDialog: React.FC<UploadDialogProps> = ({
       header={`Submit media file for upload: ${title}`}
       footer={footer}
     >
-      <FileSelect 
-        file={file} 
-        setFile={setFile} 
-        contentType={contentType} 
-      />
+      <FileSelect file={file} setFile={setFile} contentType={contentType} />
     </Dialog>
   );
 };
diff --git a/frontend/src/containers/MetadataEditor.jsx b/frontend/src/containers/MetadataEditor.jsx
index 20090121..2f375be0 100644
--- a/frontend/src/containers/MetadataEditor.jsx
+++ b/frontend/src/containers/MetadataEditor.jsx
@@ -1,3 +1,4 @@
+import { RadioButton } from '@components';
 import { useMemo } from 'react';
 
 import nebula from '/src/nebula';
@@ -70,14 +71,22 @@ const EditorField = ({ field, value, originalValue, onFieldChanged, disabled })
       editor = <TextArea value={value} onChange={onChange} disabled={disabled} />;
       break;
     case 'select':
-      editor = (
-        <Select
-          options={options}
-          value={value}
-          selectionMode="single"
-          onChange={onChange}
-        />
-      );
+      editor =
+        metaType.mode === 'radio' ? (
+          <RadioButton
+            options={options}
+            value={value}
+            onChange={onChange}
+            disabled={disabled}
+          />
+        ) : (
+          <Select
+            options={options}
+            value={value}
+            selectionMode="single"
+            onChange={onChange}
+          />
+        );
       break;
     case 'list':
       editor = (
diff --git a/frontend/src/containers/VideoPlayer/VideoPlayerBody.jsx b/frontend/src/containers/VideoPlayer/VideoPlayerBody.jsx
index d22cf19c..8f3b94ca 100644
--- a/frontend/src/containers/VideoPlayer/VideoPlayerBody.jsx
+++ b/frontend/src/containers/VideoPlayer/VideoPlayerBody.jsx
@@ -113,6 +113,7 @@ const VideoPlayerBody = ({ ...props }) => {
     if (!videoRef.current) return;
 
     const updateVideoDimensions = () => {
+      if (!videoRef.current) return;
       const width = videoRef.current.clientWidth;
       const height = videoRef.current.clientHeight;
       setVideoDimensions({ width, height });
diff --git a/frontend/src/hooks/useDialog.jsx b/frontend/src/hooks/useDialog.jsx
index b79a73d1..143b998d 100644
--- a/frontend/src/hooks/useDialog.jsx
+++ b/frontend/src/hooks/useDialog.jsx
@@ -1,9 +1,10 @@
 import { createContext, useState, useRef, useContext, useMemo } from 'react';
 
+import DatePickerDialog from '/src/components/DatePickerDialog';
+
 import MetadataDialog from '/src/containers/Dialogs/MetadataDialog';
 import ConfirmDialog from '/src/containers/Dialogs/ConfirmDialog';
 import SendToDialog from '/src/containers/Dialogs/SendToDialog';
-import DatePickerDialog from '/src/containers/Dialogs/DatePickerDialog';
 import SubclipsDialog from '/src/containers/Dialogs/SubclipsDialog';
 
 const DialogContext = createContext();
diff --git a/frontend/src/pages/AssetEditor/AssetEditor.jsx b/frontend/src/pages/AssetEditor/AssetEditor.jsx
index f5ffafe5..4ed40c44 100644
--- a/frontend/src/pages/AssetEditor/AssetEditor.jsx
+++ b/frontend/src/pages/AssetEditor/AssetEditor.jsx
@@ -72,7 +72,7 @@ const AssetEditor = () => {
   const [assetData, setAssetData] = useState({});
   const [originalData, setOriginalData] = useState({});
   const [loading, setLoading] = useState(false);
-  const [editorMode, setEditorMode] = useLocalStorage('editorMode', 'metadata');
+  const [editorMode, setEditorMode] = useLocalStorage('mam.editor.mode', 'metadata');
   const [_searchParams, setSearchParams] = useSearchParams();
 
   const showDialog = useDialog();
diff --git a/frontend/src/pages/AssetEditor/EditorNav.jsx b/frontend/src/pages/AssetEditor/EditorNav.jsx
index 235ed06b..110da5e2 100644
--- a/frontend/src/pages/AssetEditor/EditorNav.jsx
+++ b/frontend/src/pages/AssetEditor/EditorNav.jsx
@@ -46,8 +46,8 @@ const AssetEditorNav = ({
 
       <RadioButton
         options={[
-          { label: 'Edit', value: 'metadata', icon: 'edit' },
-          { label: 'Preview', value: 'preview', icon: 'visibility' },
+          { title: 'Edit', value: 'metadata', icon: 'edit' },
+          { title: 'Preview', value: 'preview', icon: 'visibility' },
         ]}
         value={editorMode}
         onChange={setEditorMode}
diff --git a/frontend/src/pages/LoadingPage.jsx b/frontend/src/pages/LoadingPage.tsx
similarity index 76%
rename from frontend/src/pages/LoadingPage.jsx
rename to frontend/src/pages/LoadingPage.tsx
index a3a5c0c5..2949d6b6 100644
--- a/frontend/src/pages/LoadingPage.jsx
+++ b/frontend/src/pages/LoadingPage.tsx
@@ -1,4 +1,4 @@
-import { Loader } from '/src/components';
+import { Loader } from '@components';
 
 const LoadingPage = () => {
   return (
diff --git a/frontend/src/pages/LoginPage.jsx b/frontend/src/pages/LoginPage.jsx
index 7d9bb763..82c7e6c5 100644
--- a/frontend/src/pages/LoginPage.jsx
+++ b/frontend/src/pages/LoginPage.jsx
@@ -5,84 +5,10 @@ import { toast } from 'react-toastify';
 import { Button, InputText, InputPassword } from '/src/components';
 import NebulaLogo from '/src/svg/logo-wide.svg';
 
-import styled from 'styled-components';
-
 import nebula from '/src/nebula';
 
 import LoadingPage from './LoadingPage';
-
-const LoginContainer = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-
-  background-position: center;
-  background-repeat: no-repeat;
-  background-size: cover;
-
-  small {
-    font-size: 0.8em;
-    font-style: italic;
-    color: var(--color-text-dim);
-  }
-`;
-
-const LoginForm = styled.form`
-  padding: 40px;
-  background-color: var(--color-surface-02);
-  border-radius: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  min-width: 200px;
-  min-height: 100px;
-  max-width: 85%;
-  max-height: 85%;
-  position: relative;
-
-  &.glass {
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(10px);
-
-    input,
-    button,
-    a {
-      background-color: rgba(255, 255, 255, 0.1) !important;
-      color: #eee !important;
-
-      &::placeholder {
-        color: #ccc;
-        opacity: 1; /* Firefox */
-      }
-    }
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid var(--color-surface-04);
-    margin: 12px 0;
-  }
-
-  .logo-container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    img {
-      width: 200px;
-      height: auto;
-      margin-bottom: 2em;
-    }
-  }
-`;
+import { LoginContainer, LoginForm } from './LoginPage.styled';
 
 const SSOOptions = ({ ssoOptions }) => {
   return (
diff --git a/frontend/src/pages/LoginPage.styled.tsx b/frontend/src/pages/LoginPage.styled.tsx
new file mode 100644
index 00000000..c08e4f85
--- /dev/null
+++ b/frontend/src/pages/LoginPage.styled.tsx
@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+export const LoginContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  small {
+    font-size: 0.8em;
+    font-style: italic;
+    color: var(--color-text-dim);
+  }
+`;
+
+export const LoginForm = styled.form`
+  padding: 40px;
+  background-color: var(--color-surface-02);
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 200px;
+  min-height: 100px;
+  max-width: 85%;
+  max-height: 85%;
+  position: relative;
+
+  &.glass {
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(10px);
+
+    input,
+    button,
+    a {
+      background-color: rgba(255, 255, 255, 0.1) !important;
+      color: #eee !important;
+
+      &::placeholder {
+        color: #ccc;
+        opacity: 1; /* Firefox */
+      }
+    }
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--color-surface-04);
+    margin: 12px 0;
+  }
+
+  .logo-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 200px;
+      height: auto;
+      margin-bottom: 2em;
+    }
+  }
+`;
diff --git a/frontend/src/pages/MAMPage.jsx b/frontend/src/pages/MAMPage.jsx
index 635c0651..ed8457e4 100644
--- a/frontend/src/pages/MAMPage.jsx
+++ b/frontend/src/pages/MAMPage.jsx
@@ -54,7 +54,7 @@ const MAMPage = () => {
   const dispatch = useDispatch();
   const { module } = useParams();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [splitterSizes, setSplitterSizes] = useLocalStorage('mamSplitterSizes', null);
+  const [splitterSizes, setSplitterSizes] = useLocalStorage('mam.splitterSizes', null);
 
   const draggedIndicatorRef = useRef(null);
 
diff --git a/frontend/src/pages/Profile/ProfilePage.jsx b/frontend/src/pages/Profile/ProfilePage.jsx
index e7425149..2246dd97 100644
--- a/frontend/src/pages/Profile/ProfilePage.jsx
+++ b/frontend/src/pages/Profile/ProfilePage.jsx
@@ -83,11 +83,7 @@ const ChangePasswordForm = () => {
           />
         </FormRow>
         <FormRow title="Repeat new password">
-          <InputText
-            type="password"
-            value={passwordRepeat}
-            onChange={setPasswordRepeat}
-          />
+          <InputPassword value={passwordRepeat} onChange={setPasswordRepeat} />
         </FormRow>
         <FormRow>
           <Button label="Change password" icon="check" onClick={changePassword} />
diff --git a/frontend/src/pages/Rundown/PlayoutPlugins.jsx b/frontend/src/pages/Rundown/PlayoutPlugins.jsx
index 8e50ad8a..6409d4bb 100644
--- a/frontend/src/pages/Rundown/PlayoutPlugins.jsx
+++ b/frontend/src/pages/Rundown/PlayoutPlugins.jsx
@@ -137,12 +137,7 @@ const PlayoutPlugins = ({ onError }) => {
   }, [currentChannel]);
 
   const pluginOptions = useMemo(() => {
-    return pluginList
-      .filter((plugin) => plugin?.slots.length)
-      .map((plugin) => ({
-        label: plugin.title,
-        value: plugin.name,
-      }));
+    return pluginList.filter((plugin) => plugin?.slots.length);
   }, [pluginList]);
 
   return (
diff --git a/frontend/src/pages/Rundown/Rundown.jsx b/frontend/src/pages/Rundown/Rundown.jsx
index 80c2997a..4b7eeda1 100644
--- a/frontend/src/pages/Rundown/Rundown.jsx
+++ b/frontend/src/pages/Rundown/Rundown.jsx
@@ -23,7 +23,7 @@ const Rundown = ({ draggedObjects }) => {
   const currentChannel = useSelector((state) => state.context.currentChannel);
 
   const [startTime, setStartTime] = useState(null);
-  const [rundownMode, setRundownMode] = useLocalStorage('rundownMode', 'edit');
+  const [rundownMode, setRundownMode] = useLocalStorage('mam.rundown.mode', 'edit');
 
   const [rundown, setRundown] = useState(null);
   const [loading, setLoading] = useState(false);
diff --git a/frontend/src/pages/Rundown/RundownNav.jsx b/frontend/src/pages/Rundown/RundownNav.jsx
index a99b14f9..3b9beb5e 100644
--- a/frontend/src/pages/Rundown/RundownNav.jsx
+++ b/frontend/src/pages/Rundown/RundownNav.jsx
@@ -34,9 +34,9 @@ const RundownNav = ({ setStartTime, rundownMode, setRundownMode }) => {
       <Spacer />
       <RadioButton
         options={[
-          { label: 'Edit', value: 'edit' },
-          { label: 'Control', value: 'control' },
-          { label: 'Plugins', value: 'plugins' },
+          { title: 'Edit', value: 'edit' },
+          { title: 'Control', value: 'control' },
+          { title: 'Plugins', value: 'plugins' },
         ]}
         value={rundownMode}
         onChange={setRundownMode}
diff --git a/frontend/src/pages/System/Storages/StorageVisualization.jsx b/frontend/src/pages/System/Storages/StorageVisualization.jsx
deleted file mode 100644
index 8f3a5309..00000000
--- a/frontend/src/pages/System/Storages/StorageVisualization.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import styled from 'styled-components';
-
-import { getTheme } from '/src/components/theme';
-import { formatBytes } from './common';
-
-const VizContainer = styled.div`
-  flex-grow: 1;
-  display: flex;
-  min-height: 12px;
-`;
-
-const VizSegment = styled.div`
-  width: ${(p) => p.size}%;
-  background: ${(p) => p.color} 0%;
-  display: flex;
-  height: 100%;
-  position: relative;
-  border-right: 4px solid ${(p) => p.color};
-  min-width: 1px;
-`;
-
-const StorageVisualization = ({ storage }) => {
-  const storageSize = storage.total;
-  const usedSize = storage.used;
-  const untrackedSize =
-    storageSize - storage.nebula_usage.reduce((acc, seg) => acc + seg.usage, 0);
-  const freeSize = storageSize - usedSize;
-
-  return (
-    <VizContainer>
-      {storage.nebula_usage.map((segment, idx) => (
-        <VizSegment
-          key={idx}
-          size={(segment.usage / storage.total) * 100}
-          color={segment.color}
-          title={`${segment.label}: ${formatBytes(segment.usage)}`}
-        ></VizSegment>
-      ))}
-
-      {untrackedSize > 0 && (
-        <VizSegment
-          title={`Untracked: ${formatBytes(untrackedSize)}`}
-          size={(untrackedSize / storage.total) * 100}
-          color={getTheme().colors.surface07}
-        />
-      )}
-
-      {freeSize > 0 && (
-        <VizSegment
-          title={`Free: ${formatBytes(freeSize)}`}
-          size={(freeSize / storage.total) * 100}
-          color={getTheme().colors.surface03}
-        />
-      )}
-    </VizContainer>
-  );
-};
-
-export default StorageVisualization;
-
-/*
- *
- *
-const Viz = styled.div`
-  flex: 0;
-`;
-
-const Square = styled.rect`
-  shape-rendering: crispEdges;
-`;
-      <Viz>
-        <svg width={svgWidth} height={svgHeight}>
-          {squares.map((square, idx) => {
-            const x = (idx % cols) * (size + gap);
-            const y = Math.floor(idx / cols) * (size + gap);
-            return (
-              <Square
-                key={idx}
-                x={x}
-                y={y}
-                width={size}
-                height={size}
-                fill={square.color}
-                title={square.label}
-              />
-            );
-          })}
-        </svg>
-      </Viz>
-*/
diff --git a/frontend/src/pages/System/Storages/StorageVisualization.tsx b/frontend/src/pages/System/Storages/StorageVisualization.tsx
new file mode 100644
index 00000000..fddaa446
--- /dev/null
+++ b/frontend/src/pages/System/Storages/StorageVisualization.tsx
@@ -0,0 +1,82 @@
+import { getTheme } from '@components';
+import styled from 'styled-components';
+
+import { formatBytes, type StorageStats } from './common';
+
+const VizContainer = styled.div`
+  flex-grow: 1;
+  display: flex;
+  min-height: 12px;
+`;
+
+interface VizSegmentProps {
+  $color: string;
+  $size: number;
+}
+
+const VizSegment = styled.div<VizSegmentProps>`
+  width: ${(p) => p.$size}%;
+  background: ${(p) => p.$color} 0%;
+  display: flex;
+  height: 100%;
+  position: relative;
+  border-right: 4px solid ${(p) => p.$color};
+  min-width: 1px;
+  transition: width 0.3s ease;
+`;
+
+interface StorageVisualizationProps {
+  storage: StorageStats;
+  showFree: boolean;
+  showUntracked: boolean;
+}
+
+const StorageVisualization = ({
+  storage,
+  showFree,
+  showUntracked,
+}: StorageVisualizationProps) => {
+  const storageSize = storage.total;
+  const usedSize = storage.used;
+  const untrackedSize = storage.untracked;
+  const freeSize = storageSize - usedSize;
+
+  let displaySize = storage.total;
+  if (!showFree) {
+    displaySize -= freeSize;
+  }
+  if (!showUntracked) {
+    displaySize -= untrackedSize;
+  }
+
+  return (
+    <VizContainer>
+      {storage.nebula_usage.map((segment, idx) => (
+        <VizSegment
+          key={idx}
+          title={`${segment.label}: ${formatBytes(segment.usage)}`}
+          $color={segment.color}
+          $size={(segment.usage / displaySize) * 100}
+        ></VizSegment>
+      ))}
+
+      {showUntracked && untrackedSize > 0 && (
+        <VizSegment
+          title={`Untracked: ${formatBytes(untrackedSize)}`}
+          $color={getTheme().colors.surface07}
+          $size={(untrackedSize / displaySize) * 100}
+        />
+      )}
+
+      {showFree && freeSize > 0 && (
+        <VizSegment
+          title={`Free: ${formatBytes(freeSize)}`}
+          $color={getTheme().colors.surface03}
+          $size={(freeSize / displaySize) * 100}
+        />
+      )}
+    </VizContainer>
+  );
+};
+
+export default StorageVisualization;
diff --git a/frontend/src/pages/System/Storages/Storages.jsx b/frontend/src/pages/System/Storages/Storages.jsx
deleted file mode 100644
index b9e7264d..00000000
--- a/frontend/src/pages/System/Storages/Storages.jsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-import styled from 'styled-components';
-
-import nebula from '/src/nebula';
-import { Section, Spacer } from '/src/components';
-import { setPageTitle } from '/src/actions';
-import { formatBytes } from './common';
-import StorageVisualization from './StorageVisualization';
-
-const Availability = styled.span`
-  display: inline-flex;
-  align-items: center;
-  font-size: 0.9rem;
-  margin-top: 0.3rem;
-
-  &::before {
-    content: '';
-    display: inline-block;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    background: ${(p) => (p.available ? '#4caf50' : '#f44336')};
-    margin-right: 0.5rem;
-  }
-`;
-
-const StorageHeader = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 24px;
-
-  h3 {
-    margin: 0;
-    font-size: 1.5rem;
-  }
-`;
-
-const Sizes = styled.div`
-  margin-top: 0.5rem;
-  font-size: 0.9rem;
-  color: #aaa;
-`;
-
-const StorageRow = ({ storage }) => {
-  const usedPercent = storage.used / storage.total;
-
-  return (
-    <Section className="column">
-      <StorageHeader>
-        <h3>{storage.label}</h3>
-        <Sizes>
-          {formatBytes(storage.used)} / {formatBytes(storage.total)} (
-          {(usedPercent * 100).toFixed(1)}%)
-        </Sizes>
-        <Spacer />
-        <Availability available={storage.available}>
-          {storage.available ? 'Available' : 'Offline'}
-        </Availability>
-      </StorageHeader>
-      <StorageVisualization storage={storage} />
-    </Section>
-  );
-};
-
-const StoragesPage = () => {
-  const [data, setData] = useState({ storages: [] });
-  const dispatch = useDispatch();
-
-  useEffect(() => {
-    dispatch(setPageTitle({ title: 'Storages' }));
-    nebula.request('stats/storages').then((response) => {
-      setData(response.data);
-    });
-  }, []);
-
-  return (
-    <Section className="transparent column">
-      {data.storages.map((s) => (
-        <StorageRow key={s.storage_id} storage={s} />
-      ))}
-    </Section>
-  );
-};
-
-export default StoragesPage;
diff --git a/frontend/src/pages/System/Storages/Storages.styled.tsx b/frontend/src/pages/System/Storages/Storages.styled.tsx
new file mode 100644
index 00000000..9c510a5a
--- /dev/null
+++ b/frontend/src/pages/System/Storages/Storages.styled.tsx
@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+
+interface AvailabilityProps {
+  available: boolean;
+}
+export const Availability = styled.span<AvailabilityProps>`
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.9rem;
+  margin-top: 0.3rem;
+  width: 100px;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: ${(p) => (p.available ? '#5fff5f' : '#ff2404')};
+    margin-right: 0.5rem;
+  }
+`;
+
+export const StorageName = styled.h3`
+  margin: 0;
+  font-size: 1.5rem;
+`;
+
+export const StorageHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+export const Sizes = styled.div`
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+  color: #aaa;
+`;
diff --git a/frontend/src/pages/System/Storages/Storages.tsx b/frontend/src/pages/System/Storages/Storages.tsx
new file mode 100644
index 00000000..2854881b
--- /dev/null
+++ b/frontend/src/pages/System/Storages/Storages.tsx
@@ -0,0 +1,97 @@
+import { setPageTitle } from '@actions';
+import { Form, FormRow, InputSwitch } from '@components';
+import { Section, Spacer } from '@components';
+import { useLocalStorage } from '@hooks';
+import { useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { formatBytes } from './common';
+import type { StorageStats } from './common';
+import { Availability, StorageName, StorageHeader, Sizes } from './Storages.styled';
+import StorageVisualization from './StorageVisualization';
+
+import nebula from '@/nebula';
+
+interface StorageRowProps {
+  storage: StorageStats;
+  showUntracked: boolean;
+  showFree: boolean;
+}
+
+const StorageRow = ({ storage, showUntracked, showFree }: StorageRowProps) => {
+  const usedPercent = storage.used / storage.total;
+
+  return (
+    <Section className="column">
+      <StorageName>{storage.label}</StorageName>
+      <StorageHeader>
+        <Availability available={storage.available}>
+          {storage.available ? 'Available' : 'Offline'}
+        </Availability>
+        <Sizes>
+          {formatBytes(storage.used)} / {formatBytes(storage.total)} (
+          {(usedPercent * 100).toFixed(1)}%)
+        </Sizes>
+      </StorageHeader>
+      {storage.available && (
+        <StorageVisualization
+          storage={storage}
+          showFree={showFree}
+          showUntracked={showUntracked}
+        />
+      )}
+    </Section>
+  );
+};
+
+interface StoragesData {
+  storages: StorageStats[];
+}
+
+const StoragesPage = () => {
+  const [data, setData] = useState<StoragesData>({ storages: [] });
+  const dispatch = useDispatch();
+
+  const [showUntracked, setShowUntracked] = useLocalStorage(
+    'system.storages.showUntracked',
+    false
+  );
+  const [showFree, setShowFree] = useLocalStorage('system.storages.showFree', true);
+
+  useEffect(() => {
+    dispatch(setPageTitle({ title: 'Storages' }));
+    nebula.request('stats/storages').then((response) => {
+      setData(response.data);
+      console.log(response.data);
+    });
+  }, [dispatch]);
+
+  return (
+    <Section className="transparent row grow">
+      <Section className="column">
+        <Form style={{ minWidth: '200px' }}>
+          <FormRow title="Show untracked files">
+            <InputSwitch value={showUntracked} onChange={setShowUntracked} />
+          </FormRow>
+          <FormRow title="Show free space">
+            <InputSwitch value={showFree} onChange={setShowFree} />
+          </FormRow>
+        </Form>
+        <Spacer />
+      </Section>
+
+      <Section className="transparent column grow">
+        {data.storages.map((s) => (
+          <StorageRow
+            key={s.storage_id}
+            storage={s}
+            showUntracked={showUntracked}
+            showFree={showFree}
+          />
+        ))}
+      </Section>
+    </Section>
+  );
+};
+
+export default StoragesPage;
diff --git a/frontend/src/pages/System/Storages/common.ts b/frontend/src/pages/System/Storages/common.ts
index 9c0dabbe..14725a2a 100644
--- a/frontend/src/pages/System/Storages/common.ts
+++ b/frontend/src/pages/System/Storages/common.ts
@@ -1,8 +1,22 @@
-const formatBytes = (bytes: number) => {
+export interface NebulaUsageStats {
+  label: string;
+  usage: number; // in bytes
+  color: string; // hex color code
+}
+
+export interface StorageStats {
+  label: string;
+  storage_id: number;
+  available: boolean;
+  total: number; // in bytes
+  used: number; // in bytes
+  untracked: number; // in bytes
+  nebula_usage: NebulaUsageStats[]; // array of usage stats
+}
+
+export const formatBytes = (bytes: number) => {
   const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
   if (bytes === 0) return '0 B';
   const i = Math.floor(Math.log(bytes) / Math.log(1024));
   return (bytes / Math.pow(1024, i)).toFixed(1) + ' ' + sizes[i];
 };
-
-export { formatBytes };
diff --git a/frontend/src/pages/System/SystemPage.jsx b/frontend/src/pages/System/SystemPage.tsx
similarity index 94%
rename from frontend/src/pages/System/SystemPage.jsx
rename to frontend/src/pages/System/SystemPage.tsx
index 0697708e..ed2aabcf 100644
--- a/frontend/src/pages/System/SystemPage.jsx
+++ b/frontend/src/pages/System/SystemPage.tsx
@@ -1,8 +1,7 @@
+import { Navbar, Spacer, Button } from '@components';
 import { useMemo } from 'react';
 import { useParams, NavLink } from 'react-router-dom';
 
-import { Navbar, Spacer, Button } from '/src/components';
-
 import Services from './Services';
 import Storages from './Storages';
 import Users from './Users';
diff --git a/frontend/src/pages/System/Users/Users.jsx b/frontend/src/pages/System/Users/Users.jsx
index 64422a57..443b7863 100644
--- a/frontend/src/pages/System/Users/Users.jsx
+++ b/frontend/src/pages/System/Users/Users.jsx
@@ -1,25 +1,28 @@
 import { useState, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 
 import nebula from '/src/nebula';
+import { setPageTitle } from '/src/actions';
 import { Navbar, NavbarTitle, Button, Spacer } from '/src/components';
 import Sessions from '/src/containers/Sessions';
 
 import UserForm from './UserForm';
 import UserList from './UserList';
 
-
 const UsersPage = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const [users, setUsers] = useState([]);
-
   const _ = setSearchParams;
-
   const navigate = useNavigate();
-
   const [userData, setUserData] = useState({});
   const [loading, setLoading] = useState(false);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(setPageTitle({ title: 'Users' }));
+  }, [dispatch]);
 
   const currentId = useMemo(() => {
     const intId = parseInt(searchParams.get('id'));
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 0a817f66..dd80addd 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -22,10 +22,16 @@
     "types": ["vite/client"],
     "baseUrl": "src",
     "paths": {
+      "@actions": ["./actions"],
+      "@actions/*": ["./actions/*"],
       "@components": ["./components"],
+      "@components/*": ["./components/*"],
+      "@containers": ["./containers"],
       "@containers/*": ["./containers/*"],
+      "@hooks": ["./hooks"],
       "@hooks/*": ["./hooks/*"],
-      "@types/*": ["./types/*"],
+      "@types": ["./types"],
+      "@": ["./"],
       "@/*": ["./*"]
     }
   },
diff --git a/frontend/tsconfig.tsbuildinfo b/frontend/tsconfig.tsbuildinfo
index a674d217..a4096112 100644
--- a/frontend/tsconfig.tsbuildinfo
+++ b/frontend/tsconfig.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/actions.js","./src/app.jsx","./src/index.tsx","./src/nebula.ts","./src/pubsub.js","./src/utils.js","./src/vite-env.d.ts","./src/websocket.jsx","./src/client/index.ts","./src/client/types.gen.ts","./src/components/BaseInput.tsx","./src/components/Button.tsx","./src/components/Canvas.jsx","./src/components/ContextMenu.tsx","./src/components/Dialog.styled.tsx","./src/components/Dialog.tsx","./src/components/Dropdown.jsx","./src/components/ErrorBanner.jsx","./src/components/Form.jsx","./src/components/Icon.tsx","./src/components/InputColor.jsx","./src/components/InputDatetime.jsx","./src/components/InputInteger.jsx","./src/components/InputNumber.jsx","./src/components/InputPassword.jsx","./src/components/InputSwitch.jsx","./src/components/InputText.jsx","./src/components/InputTimecode.jsx","./src/components/Layout.jsx","./src/components/Loader.jsx","./src/components/Progress.jsx","./src/components/RadioButton.jsx","./src/components/RangeSlider.jsx","./src/components/ScrollBox.jsx","./src/components/Select.jsx","./src/components/SelectDialog.jsx","./src/components/TextArea.jsx","./src/components/Timestamp.jsx","./src/components/index.jsx","./src/components/theme.ts","./src/components/table/BodyCell.jsx","./src/components/table/DataRow.jsx","./src/components/table/HeaderCell.jsx","./src/components/table/Table.jsx","./src/components/table/TableWrapper.jsx","./src/components/table/index.jsx","./src/containers/DateNav.jsx","./src/containers/DraggableIcon.jsx","./src/containers/MetadataEditor.jsx","./src/containers/Pagination.jsx","./src/containers/Sessions.jsx","./src/containers/Upload.jsx","./src/containers/Browser/Browser.jsx","./src/containers/Browser/BrowserNav.jsx","./src/containers/Browser/index.jsx","./src/containers/Calendar/Calendar.jsx","./src/containers/Calendar/CalendarWrapper.jsx","./src/containers/Calendar/ZoomControl.jsx","./src/containers/Calendar/drawEvents.js","./src/containers/Calendar/drawMarks.js","./src/containers/Calendar/drawUtils.js","./src/containers/Calendar/index.jsx","./src/containers/Dialogs/ConfirmDialog.jsx","./src/containers/Dialogs/DatePickerDialog.jsx","./src/containers/Dialogs/MetadataDialog.jsx","./src/containers/Dialogs/SendToDialog.jsx","./src/containers/Dialogs/SubclipsDialog.jsx","./src/containers/MainNavbar/ChannelSwitcher.jsx","./src/containers/MainNavbar/Logo.jsx","./src/containers/MainNavbar/MainNavbar.jsx","./src/containers/MainNavbar/PageTitle.jsx","./src/containers/MainNavbar/index.jsx","./src/containers/MediaUpload/MediaUpload.tsx","./src/containers/MediaUpload/MediaUploadMonitor.tsx","./src/containers/MediaUpload/index.tsx","./src/containers/VideoPlayer/AudioContext.jsx","./src/containers/VideoPlayer/ChannelSelect.jsx","./src/containers/VideoPlayer/ToggleButtonContainer.jsx","./src/containers/VideoPlayer/Trackbar.jsx","./src/containers/VideoPlayer/VUMeter.jsx","./src/containers/VideoPlayer/VideoOverlay.jsx","./src/containers/VideoPlayer/VideoPlayer.jsx","./src/containers/VideoPlayer/VideoPlayerBody.jsx","./src/containers/VideoPlayer/VideoPlayerControls.jsx","./src/containers/VideoPlayer/index.jsx","./src/hooks/index.ts","./src/hooks/useDialog.jsx","./src/hooks/useKeyDown.jsx","./src/hooks/useLocalStorage.jsx","./src/hooks/useMediaUpload.tsx","./src/pages/LoadingPage.jsx","./src/pages/LoginPage.jsx","./src/pages/MAMPage.jsx","./src/pages/ToolPage.jsx","./src/pages/AssetEditor/AssetEditor.jsx","./src/pages/AssetEditor/AssetMainProps.jsx","./src/pages/AssetEditor/AssigneesButton.jsx","./src/pages/AssetEditor/ContextAction.jsx","./src/pages/AssetEditor/EditorNav.jsx","./src/pages/AssetEditor/MetadataDetail.jsx","./src/pages/AssetEditor/Preview.jsx","./src/pages/AssetEditor/Subclip.jsx","./src/pages/AssetEditor/index.jsx","./src/pages/JobsPage/JobsNav.jsx","./src/pages/JobsPage/JobsPage.jsx","./src/pages/JobsPage/index.jsx","./src/pages/Profile/ProfilePage.jsx","./src/pages/Profile/index.jsx","./src/pages/Rundown/PlayoutControls.jsx","./src/pages/Rundown/PlayoutPlugins.jsx","./src/pages/Rundown/Rundown.jsx","./src/pages/Rundown/RundownEditTools.jsx","./src/pages/Rundown/RundownNav.jsx","./src/pages/Rundown/RundownTable.jsx","./src/pages/Rundown/RundownTableWrapper.jsx","./src/pages/Rundown/index.jsx","./src/pages/Rundown/utils.js","./src/pages/Scheduler/ApplySchedulingTemplate.jsx","./src/pages/Scheduler/Scheduler.jsx","./src/pages/Scheduler/SchedulerNav.jsx","./src/pages/Scheduler/index.jsx","./src/pages/Scheduler/utils.js","./src/pages/System/SystemPage.jsx","./src/pages/System/index.tsx","./src/pages/System/Services/Services.jsx","./src/pages/System/Services/index.tsx","./src/pages/System/Storages/StorageVisualization.jsx","./src/pages/System/Storages/Storages.jsx","./src/pages/System/Storages/common.ts","./src/pages/System/Storages/index.tsx","./src/pages/System/Users/AccessControl.jsx","./src/pages/System/Users/ApiKeyPicker.jsx","./src/pages/System/Users/UserForm.jsx","./src/pages/System/Users/UserList.jsx","./src/pages/System/Users/Users.jsx","./src/pages/System/Users/index.tsx","./src/tableFormat/formatAuthorship.jsx","./src/tableFormat/formatMetaDatetime.jsx","./src/tableFormat/formatMetaTimecode.jsx","./src/tableFormat/formatObjectDuration.jsx","./src/tableFormat/formatObjectIdFolder.jsx","./src/tableFormat/formatObjectQcState.jsx","./src/tableFormat/formatObjectStatus.jsx","./src/tableFormat/formatObjectTitle.jsx","./src/tableFormat/formatRundownDifference.jsx","./src/tableFormat/formatRundownRunMode.jsx","./src/tableFormat/formatRundownSymbol.jsx","./src/tableFormat/formatRundownTime.jsx","./src/tableFormat/index.jsx","./src/types/upload.ts"],"version":"5.9.2"}
\ No newline at end of file
+{"root":["./src/actions.js","./src/app.jsx","./src/index.tsx","./src/nebula.ts","./src/pubsub.js","./src/utils.js","./src/vite-env.d.ts","./src/websocket.jsx","./src/client/index.ts","./src/client/types.gen.ts","./src/components/Button.styled.tsx","./src/components/Button.tsx","./src/components/Canvas.jsx","./src/components/ContextMenu.tsx","./src/components/DatePickerDialog.tsx","./src/components/Dialog.styled.tsx","./src/components/Dialog.tsx","./src/components/Dropdown.styled.tsx","./src/components/Dropdown.tsx","./src/components/ErrorBanner.tsx","./src/components/Form.tsx","./src/components/Icon.tsx","./src/components/Input.styled.tsx","./src/components/InputColor.tsx","./src/components/InputDatetime.tsx","./src/components/InputInteger.tsx","./src/components/InputNumber.tsx","./src/components/InputPassword.jsx","./src/components/InputSwitch.styled.tsx","./src/components/InputSwitch.tsx","./src/components/InputText.tsx","./src/components/InputTimecode.jsx","./src/components/Layout.jsx","./src/components/Loader.tsx","./src/components/Progress.jsx","./src/components/RadioButton.tsx","./src/components/RangeSlider.jsx","./src/components/ScrollBox.jsx","./src/components/Select.jsx","./src/components/SelectDialog.jsx","./src/components/TextArea.jsx","./src/components/Timestamp.tsx","./src/components/index.tsx","./src/components/theme.ts","./src/components/lib/colors.ts","./src/components/lib/datetime.ts","./src/components/table/BodyCell.jsx","./src/components/table/DataRow.jsx","./src/components/table/HeaderCell.jsx","./src/components/table/Table.jsx","./src/components/table/TableWrapper.jsx","./src/components/table/index.jsx","./src/containers/DateNav.jsx","./src/containers/DraggableIcon.jsx","./src/containers/MetadataEditor.jsx","./src/containers/Pagination.jsx","./src/containers/Sessions.jsx","./src/containers/Browser/Browser.jsx","./src/containers/Browser/BrowserNav.jsx","./src/containers/Browser/index.jsx","./src/containers/Calendar/Calendar.jsx","./src/containers/Calendar/CalendarWrapper.jsx","./src/containers/Calendar/ZoomControl.jsx","./src/containers/Calendar/drawEvents.js","./src/containers/Calendar/drawMarks.js","./src/containers/Calendar/drawUtils.js","./src/containers/Calendar/index.jsx","./src/containers/Dialogs/ConfirmDialog.jsx","./src/containers/Dialogs/MetadataDialog.jsx","./src/containers/Dialogs/SendToDialog.jsx","./src/containers/Dialogs/SubclipsDialog.jsx","./src/containers/MainNavbar/ChannelSwitcher.jsx","./src/containers/MainNavbar/Logo.jsx","./src/containers/MainNavbar/MainNavbar.jsx","./src/containers/MainNavbar/PageTitle.jsx","./src/containers/MainNavbar/index.jsx","./src/containers/MediaUpload/FileSelect.styled.tsx","./src/containers/MediaUpload/FileSelect.tsx","./src/containers/MediaUpload/MediaUpload.tsx","./src/containers/MediaUpload/MediaUploadDialog.tsx","./src/containers/MediaUpload/MediaUploadMonitor.styled.tsx","./src/containers/MediaUpload/MediaUploadMonitor.tsx","./src/containers/MediaUpload/index.tsx","./src/containers/VideoPlayer/AudioContext.jsx","./src/containers/VideoPlayer/ChannelSelect.jsx","./src/containers/VideoPlayer/ToggleButtonContainer.jsx","./src/containers/VideoPlayer/Trackbar.jsx","./src/containers/VideoPlayer/VUMeter.jsx","./src/containers/VideoPlayer/VideoOverlay.jsx","./src/containers/VideoPlayer/VideoPlayer.jsx","./src/containers/VideoPlayer/VideoPlayerBody.jsx","./src/containers/VideoPlayer/VideoPlayerControls.jsx","./src/containers/VideoPlayer/index.jsx","./src/hooks/index.ts","./src/hooks/useDialog.jsx","./src/hooks/useKeyDown.jsx","./src/hooks/useLocalStorage.jsx","./src/hooks/useMediaUpload.tsx","./src/pages/LoadingPage.tsx","./src/pages/LoginPage.jsx","./src/pages/MAMPage.jsx","./src/pages/ToolPage.jsx","./src/pages/AssetEditor/AssetEditor.jsx","./src/pages/AssetEditor/AssetMainProps.jsx","./src/pages/AssetEditor/AssigneesButton.jsx","./src/pages/AssetEditor/ContextAction.jsx","./src/pages/AssetEditor/EditorNav.jsx","./src/pages/AssetEditor/MetadataDetail.jsx","./src/pages/AssetEditor/Preview.jsx","./src/pages/AssetEditor/Subclip.jsx","./src/pages/AssetEditor/index.jsx","./src/pages/JobsPage/JobsNav.jsx","./src/pages/JobsPage/JobsPage.jsx","./src/pages/JobsPage/index.jsx","./src/pages/Profile/ProfilePage.jsx","./src/pages/Profile/index.jsx","./src/pages/Rundown/PlayoutControls.jsx","./src/pages/Rundown/PlayoutPlugins.jsx","./src/pages/Rundown/Rundown.jsx","./src/pages/Rundown/RundownEditTools.jsx","./src/pages/Rundown/RundownNav.jsx","./src/pages/Rundown/RundownTable.jsx","./src/pages/Rundown/RundownTableWrapper.jsx","./src/pages/Rundown/index.jsx","./src/pages/Rundown/utils.js","./src/pages/Scheduler/ApplySchedulingTemplate.jsx","./src/pages/Scheduler/Scheduler.jsx","./src/pages/Scheduler/SchedulerNav.jsx","./src/pages/Scheduler/index.jsx","./src/pages/Scheduler/utils.js","./src/pages/System/SystemPage.tsx","./src/pages/System/index.tsx","./src/pages/System/Services/Services.jsx","./src/pages/System/Services/index.tsx","./src/pages/System/Storages/StorageVisualization.tsx","./src/pages/System/Storages/Storages.styled.tsx","./src/pages/System/Storages/Storages.tsx","./src/pages/System/Storages/common.ts","./src/pages/System/Storages/index.tsx","./src/pages/System/Users/AccessControl.jsx","./src/pages/System/Users/ApiKeyPicker.jsx","./src/pages/System/Users/UserForm.jsx","./src/pages/System/Users/UserList.jsx","./src/pages/System/Users/Users.jsx","./src/pages/System/Users/index.tsx","./src/tableFormat/formatAuthorship.jsx","./src/tableFormat/formatMetaDatetime.jsx","./src/tableFormat/formatMetaTimecode.jsx","./src/tableFormat/formatObjectDuration.jsx","./src/tableFormat/formatObjectIdFolder.jsx","./src/tableFormat/formatObjectQcState.jsx","./src/tableFormat/formatObjectStatus.jsx","./src/tableFormat/formatObjectTitle.jsx","./src/tableFormat/formatRundownDifference.jsx","./src/tableFormat/formatRundownRunMode.jsx","./src/tableFormat/formatRundownSymbol.jsx","./src/tableFormat/formatRundownTime.jsx","./src/tableFormat/index.jsx","./src/types/upload.ts"],"version":"5.9.2"}
\ No newline at end of file
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index 989749a7..13b2c6e6 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -8,8 +8,10 @@ export default ({ mode }) => {
       alias: {
         '@containers': '/src/containers',
         '@components': '/src/components',
+        '@actions': '/src/actions',
         '@hooks': '/src/hooks',
         '@types': '/src/types',
+        '@': '/src',
       },
     },
     server: {
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 912fb43e..3918f7ac 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -14,8 +14,10 @@ export default ({ mode }: ConfigEnv) => {
       alias: {
         '@containers': '/src/containers',
         '@components': '/src/components',
+        '@actions': '/src/actions',
         '@hooks': '/src/hooks',
         '@types': '/src/types',
+        '@': '/src',
       },
     },
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2d4781e0..afe73c8d 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -853,6 +853,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/luxon@^3.7.1":
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.7.1.tgz#ef51b960ff86801e4e2de80c68813a96e529d531"
+  integrity sha512-H3iskjFIAn5SlJU7OuxUmTEpebK6TKB8rxZShDslBMZJ5u9S//KM1sbdAisiSrqwLQncVjnpi2OK2J51h+4lsg==
+
 "@types/mdast@^4.0.0":
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-4.0.4.tgz#7ccf72edd2f1aa7dd3437e180c64373585804dd6"