diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index d41241f..0a44ba8 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -27,7 +27,6 @@ const InputDialog: React.FC = () => {
     heading: '',
     rows: [{ type: 'input', label: '' }],
   });
-  const [passwordStates, setPasswordStates] = React.useState<boolean[]>([]);
   const [visible, setVisible] = React.useState(false);
   const { locale } = useLocales();
 
@@ -37,15 +36,7 @@ const InputDialog: React.FC = () => {
     name: 'test',
   });
 
-  const handlePasswordStates = (index: number) => {
-    setPasswordStates({
-      ...passwordStates,
-      [index]: !passwordStates[index],
-    });
-  };
-
   useNuiEvent<InputProps>('openDialog', (data) => {
-    setPasswordStates([]);
     setFields(data);
     setVisible(true);
     data.rows.forEach((row, index) => {
@@ -94,13 +85,7 @@ const InputDialog: React.FC = () => {
               return (
                 <React.Fragment key={item.id}>
                   {row.type === 'input' && (
-                    <InputField
-                      register={form.register(`test.${index}.value`)}
-                      row={row}
-                      index={index}
-                      passwordStates={passwordStates}
-                      handlePasswordStates={handlePasswordStates}
-                    />
+                    <InputField register={form.register(`test.${index}.value`)} row={row} index={index} />
                   )}
                   {row.type === 'checkbox' && (
                     <CheckboxField register={form.register(`test.${index}.value`)} row={row} index={index} />
diff --git a/web/src/features/dialog/components/fields/input.tsx b/web/src/features/dialog/components/fields/input.tsx
index 634f889..017c3c2 100644
--- a/web/src/features/dialog/components/fields/input.tsx
+++ b/web/src/features/dialog/components/fields/input.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '@mantine/core';
+import { createStyles, PasswordInput, TextInput } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect } from 'react';
 import { IInput } from '../../../../interfaces/dialog';
@@ -8,32 +8,50 @@ interface Props {
   register: UseFormRegisterReturn;
   row: IInput;
   index: number;
-  passwordStates: boolean[];
-  handlePasswordStates: (index: number) => void;
 }
 
+const useStyles = createStyles((theme) => ({
+  eyeIcon: {
+    color: theme.colors.dark[2],
+  },
+}));
+
 const InputField: React.FC<Props> = (props) => {
+  const { classes } = useStyles();
+
   return (
-    <TextInput
-      {...props.register}
-      defaultValue={props.row.default}
-      label={props.row.label}
-      description={props.row.description}
-      icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
-      placeholder={props.row.placeholder}
-      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 ? (
+        <TextInput
+          {...props.register}
+          defaultValue={props.row.default}
+          label={props.row.label}
+          description={props.row.description}
+          icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+          placeholder={props.row.placeholder}
+          disabled={props.row.disabled}
+        />
+      ) : (
+        <PasswordInput
+          {...props.register}
+          defaultValue={props.row.default}
+          label={props.row.label}
+          description={props.row.description}
+          icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+          placeholder={props.row.placeholder}
+          disabled={props.row.disabled}
+          visibilityToggleIcon={({ reveal, size }) => (
+            <FontAwesomeIcon
+              icon={reveal ? 'eye-slash' : 'eye'}
+              fontSize={size}
+              cursor="pointer"
+              className={classes.eyeIcon}
+              fixedWidth
+            />
+          )}
+        />
+      )}
+    </>
   );
 };