diff --git a/web/src/features/dialog/AlertDialog.tsx b/web/src/features/dialog/AlertDialog.tsx
index a6643a8..a828ec0 100644
--- a/web/src/features/dialog/AlertDialog.tsx
+++ b/web/src/features/dialog/AlertDialog.tsx
@@ -57,13 +57,7 @@ const AlertDialog: React.FC = () => {
           <ReactMarkdown>{dialogData.content}</ReactMarkdown>
           <Group position="right" spacing={10}>
             {dialogData.cancel && (
-              <Button
-                uppercase
-                variant="default"
-                sx={{ transition: '150ms' }}
-                onClick={() => closeAlert('cancel')}
-                mr={3}
-              >
+              <Button uppercase variant="default" onClick={() => closeAlert('cancel')} mr={3}>
                 {dialogData.labels?.cancel || locale.ui.cancel}
               </Button>
             )}
diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index f9cf774..658933a 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -1,4 +1,4 @@
-import { Modal, ModalOverlay, ModalContent, ModalFooter, ModalHeader, ModalBody, Button } from '@chakra-ui/react';
+import { Group, Modal, Button, Stack } from '@mantine/core';
 import React from 'react';
 import { useNuiEvent } from '../../hooks/useNuiEvent';
 import { useLocales } from '../../providers/LocaleProvider';
@@ -62,42 +62,48 @@ const InputDialog: React.FC = () => {
 
   return (
     <>
-      <Modal isOpen={visible} onClose={handleClose} isCentered closeOnEsc closeOnOverlayClick={false} size="xs">
-        <ModalOverlay />
-        <ModalContent
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && visible) return handleConfirm();
-          }}
-        >
-          <ModalHeader textAlign="center">{fields.heading}</ModalHeader>
-          <ModalBody fontFamily="Poppins" textAlign="left">
-            {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
-              <React.Fragment key={`row-${index}-${row.type}-${row.label}`}>
-                {row.type === 'input' && (
-                  <InputField
-                    row={row}
-                    index={index}
-                    handleChange={handleChange}
-                    passwordStates={passwordStates}
-                    handlePasswordStates={handlePasswordStates}
-                  />
-                )}
-                {row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />}
-                {row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />}
-                {row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />}
-                {row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />}
-              </React.Fragment>
-            ))}
-          </ModalBody>
-          <ModalFooter>
-            <Button mr={3} onClick={handleClose}>
-              {locale.ui.close}
+      <Modal
+        opened={visible}
+        onClose={handleClose}
+        centered
+        closeOnClickOutside={false}
+        size="xs"
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && visible) return handleConfirm();
+        }}
+        styles={{ title: { textAlign: 'center', width: '100%', fontSize: 18 } }}
+        title={fields.heading}
+        withCloseButton={false}
+        overlayOpacity={0.5}
+        exitTransitionDuration={150}
+      >
+        <Stack>
+          {fields.rows.map((row: IInput | ICheckbox | ISelect | INumber | ISlider, index) => (
+            <React.Fragment key={`row-${index}-${row.type}-${row.label}`}>
+              {row.type === 'input' && (
+                <InputField
+                  row={row}
+                  index={index}
+                  handleChange={handleChange}
+                  passwordStates={passwordStates}
+                  handlePasswordStates={handlePasswordStates}
+                />
+              )}
+              {row.type === 'checkbox' && <CheckboxField row={row} index={index} handleChange={handleChange} />}
+              {row.type === 'select' && <SelectField row={row} index={index} handleChange={handleChange} />}
+              {row.type === 'number' && <NumberField row={row} index={index} handleChange={handleChange} />}
+              {row.type === 'slider' && <SliderField row={row} index={index} handleChange={handleChange} />}
+            </React.Fragment>
+          ))}
+          <Group position="right" spacing={10}>
+            <Button uppercase variant="default" onClick={handleClose} mr={3}>
+              {locale.ui.cancel}
             </Button>
-            <Button colorScheme="blue" onClick={handleConfirm}>
+            <Button uppercase variant="light" onClick={handleClose}>
               {locale.ui.confirm}
             </Button>
-          </ModalFooter>
-        </ModalContent>
+          </Group>
+        </Stack>
       </Modal>
     </>
   );
diff --git a/web/src/features/dialog/components/fields/checkbox.tsx b/web/src/features/dialog/components/fields/checkbox.tsx
index 6c36afc..bab6483 100644
--- a/web/src/features/dialog/components/fields/checkbox.tsx
+++ b/web/src/features/dialog/components/fields/checkbox.tsx
@@ -1,7 +1,6 @@
-import { Box, Checkbox, HStack, Text } from '@chakra-ui/react';
+import { Checkbox } from '@mantine/core';
 import { useEffect } from 'react';
 import { ICheckbox } from '../../../../interfaces/dialog';
-import Label from '../Label';
 
 interface Props {
   row: ICheckbox;
@@ -15,16 +14,12 @@ const CheckboxField: React.FC<Props> = (props) => {
   }, []);
 
   return (
-    <>
-      <Box mb={3}>
-        <Checkbox
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
-          defaultChecked={props.row.checked}
-        >
-          <Label label={props.row.label} description={props.row.description} />
-        </Checkbox>
-      </Box>
-    </>
+    <Checkbox
+      sx={{ display: 'flex' }}
+      label={props.row.label}
+      onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.checked, props.index)}
+      defaultChecked={props.row.checked}
+    />
   );
 };
 
diff --git a/web/src/features/dialog/components/fields/input.tsx b/web/src/features/dialog/components/fields/input.tsx
index 0535e0f..5347d91 100644
--- a/web/src/features/dialog/components/fields/input.tsx
+++ b/web/src/features/dialog/components/fields/input.tsx
@@ -1,8 +1,7 @@
-import { Box, InputGroup, InputLeftElement, InputRightElement, Input } from '@chakra-ui/react';
+import { TextInput } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
 import { IInput } from '../../../../interfaces/dialog';
-import Label from '../Label';
 
 interface Props {
   row: IInput;
@@ -18,37 +17,25 @@ const InputField: React.FC<Props> = (props) => {
   }, []);
 
   return (
-    <>
-      <Box mb={3} textAlign="left">
-        <Label label={props.row.label} description={props.row.description} />
-        <InputGroup>
-          {props.row.icon && (
-            <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
-          )}
-          <Input
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => props.handleChange(e.target.value, props.index)}
-            placeholder={props.row.placeholder}
-            defaultValue={props.row.default}
-            type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
-            isDisabled={props.row.disabled}
+    <TextInput
+      label={props.row.label}
+      description={props.row.description}
+      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      placeholder={props.row.placeholder}
+      defaultValue={props.row.default}
+      disabled={props.row.disabled}
+      type={!props.row.password || props.passwordStates[props.index] ? 'text' : 'password'}
+      rightSection={
+        props.row.password && (
+          <FontAwesomeIcon
+            onClick={() => props.handlePasswordStates(props.index)}
+            cursor="pointer"
+            icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
+            fixedWidth
           />
-          {props.row.password && (
-            <InputRightElement
-              cursor="pointer"
-              onClick={() => props.handlePasswordStates(props.index)}
-              children={
-                <FontAwesomeIcon
-                  fixedWidth
-                  icon={props.passwordStates[props.index] ? 'eye' : 'eye-slash'}
-                  fontSize="1em"
-                  style={{ paddingRight: 8 }}
-                />
-              }
-            />
-          )}
-        </InputGroup>
-      </Box>
-    </>
+        )
+      }
+    />
   );
 };
 
diff --git a/web/src/features/dialog/components/fields/number.tsx b/web/src/features/dialog/components/fields/number.tsx
index 4a82969..f3c3049 100644
--- a/web/src/features/dialog/components/fields/number.tsx
+++ b/web/src/features/dialog/components/fields/number.tsx
@@ -1,17 +1,7 @@
-import {
-  Box,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
-  NumberIncrementStepper,
-  NumberDecrementStepper,
-  InputLeftElement,
-  InputGroup,
-} from '@chakra-ui/react';
+import { NumberInput } from '@mantine/core';
 import { useEffect } from 'react';
 import { INumber } from '../../../../interfaces/dialog';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Label from '../Label';
 
 interface Props {
   row: INumber;
@@ -25,28 +15,16 @@ const NumberField: React.FC<Props> = (props) => {
   }, []);
 
   return (
-    <Box mb={3}>
-      <Label label={props.row.label} description={props.row.description} />
-      <InputGroup>
-        <NumberInput
-          onChange={(val: string) => props.handleChange(+val, props.index)}
-          defaultValue={props.row.default}
-          min={props.row.min}
-          max={props.row.max}
-          isDisabled={props.row.disabled}
-          w="100%"
-        >
-          {props.row.icon && (
-            <InputLeftElement pointerEvents="none" children={<FontAwesomeIcon icon={props.row.icon} fixedWidth />} />
-          )}
-          <NumberInputField placeholder={props.row.placeholder} pl={props.row.icon ? '40px' : undefined} />
-          <NumberInputStepper>
-            <NumberIncrementStepper />
-            <NumberDecrementStepper />
-          </NumberInputStepper>
-        </NumberInput>
-      </InputGroup>
-    </Box>
+    <NumberInput
+      label={props.row.label}
+      description={props.row.description}
+      defaultValue={props.row.default}
+      min={props.row.min}
+      max={props.row.max}
+      disabled={props.row.disabled}
+      onChange={(value) => props.handleChange(value as number, props.index)}
+      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+    />
   );
 };
 
diff --git a/web/src/features/dialog/components/fields/select.tsx b/web/src/features/dialog/components/fields/select.tsx
index 28b7dea..7626667 100644
--- a/web/src/features/dialog/components/fields/select.tsx
+++ b/web/src/features/dialog/components/fields/select.tsx
@@ -1,4 +1,4 @@
-import { Box, Select } from '@chakra-ui/react';
+import { Select } from '@mantine/core';
 import { useEffect } from 'react';
 import { ISelect } from '../../../../interfaces/dialog';
 
@@ -8,6 +8,7 @@ interface Props {
   handleChange: (value: string, index: number) => void;
 }
 
+// TODO: set label to value of value when there is no label provided
 const SelectField: React.FC<Props> = (props) => {
   useEffect(() => {
     if (props.row.default) {
@@ -20,27 +21,14 @@ const SelectField: React.FC<Props> = (props) => {
   }, []);
 
   return (
-    <>
-      <Box mb={3}>
-        <Select
-          onChange={(e: React.ChangeEvent<HTMLSelectElement>) => props.handleChange(e.target.value, props.index)}
-          defaultValue={props.row.default || ''}
-          isDisabled={props.row.disabled}
-        >
-          {/* Hacky workaround for selectable placeholder issue */}
-          {!props.row.default && (
-            <option value="" hidden disabled>
-              {props.row.label}
-            </option>
-          )}
-          {props.row.options?.map((option, index) => (
-            <option key={`option-${index}`} value={option.value}>
-              {option.label || option.value}
-            </option>
-          ))}
-        </Select>
-      </Box>
-    </>
+    <Select
+      onChange={(value) => props.handleChange(value as string, props.index)}
+      defaultValue={props.row.default || ''}
+      disabled={props.row.disabled}
+      data={props.row.options}
+      label={props.row.label}
+      description={props.row.description}
+    />
   );
 };
 
diff --git a/web/src/features/dialog/components/fields/slider.tsx b/web/src/features/dialog/components/fields/slider.tsx
index 479c4da..ffd1286 100644
--- a/web/src/features/dialog/components/fields/slider.tsx
+++ b/web/src/features/dialog/components/fields/slider.tsx
@@ -1,7 +1,6 @@
-import { Box, Text, Slider, SliderTrack, SliderFilledTrack, SliderThumb, HStack, Tooltip } from '@chakra-ui/react';
+import { Box, Slider, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { ISlider } from '../../../../interfaces/dialog';
-import Label from '../Label';
 
 interface Props {
   row: ISlider;
@@ -17,31 +16,23 @@ const SliderField: React.FC<Props> = (props) => {
   const [sliderValue, setSliderValue] = useState(props.row.default || props.row.min || 0);
 
   return (
-    <>
-      <Box mb={3}>
-        <Label label={props.row.label} description={props.row.description} />
-        <Slider
-          onChangeEnd={(val: number) => props.handleChange(val, props.index)}
-          onChange={(val: number) => setSliderValue(val)}
-          defaultValue={props.row.default || props.row.min || 0}
-          min={props.row.min}
-          max={props.row.max}
-          step={props.row.step}
-          isDisabled={props.row.disabled}
-        >
-          <SliderTrack>
-            <SliderFilledTrack />
-          </SliderTrack>
-          <Tooltip hasArrow label={sliderValue} placement="bottom" gutter={10}>
-            <SliderThumb />
-          </Tooltip>
-        </Slider>
-        <HStack justifyContent="space-between">
-          <Text fontSize="sm">{props.row.min || 0}</Text>
-          <Text fontSize="sm">{props.row.max || 100}</Text>
-        </HStack>
-      </Box>
-    </>
+    <Box>
+      <Text sx={{ fontSize: 14, fontWeight: 500 }}>{props.row.label}</Text>
+      <Slider
+        mb={10}
+        onChangeEnd={(val: number) => props.handleChange(val, props.index)}
+        onChange={(val: number) => setSliderValue(val)}
+        defaultValue={props.row.default || props.row.min || 0}
+        min={props.row.min}
+        max={props.row.max}
+        step={props.row.step}
+        disabled={props.row.disabled}
+        marks={[
+          { value: props.row.min || 0, label: props.row.min || 0 },
+          { value: props.row.max || 100, label: props.row.max || 100 },
+        ]}
+      />
+    </Box>
   );
 };
 
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index 7a50bb6..bd43114 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -1,4 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { SelectItem } from '@mantine/core';
 
 export interface IInput {
   type: 'input';
@@ -23,7 +24,7 @@ export interface ISelect {
   type: 'select';
   label: string;
   default?: string;
-  options?: { value: string; label?: string }[];
+  options: Array<SelectItem>;
   disabled?: boolean;
   description?: string;
 }