diff --git a/packages/documentation/pages/usage/components/form-fields.vue b/packages/documentation/pages/usage/components/form-fields.vue
index 111859062d..244c021c07 100644
--- a/packages/documentation/pages/usage/components/form-fields.vue
+++ b/packages/documentation/pages/usage/components/form-fields.vue
@@ -628,7 +628,18 @@
 								:minimum="1"
 								:step="1"
 							/>
-
+							<KtFieldToggle
+								v-if="
+									componentDefinition.additionalProps.includes(
+										'showVisibilityToggle',
+									)
+								"
+								formKey="showVisibilityToggle"
+								helpText="For Password: display an eye icon to reveal/hide the content"
+								isOptional
+								label="Show visibility toggle"
+								type="switch"
+							/>
 							<h4>Additional Slots</h4>
 							<KtFieldText
 								v-if="
@@ -901,7 +912,7 @@ const components: Array<{
 		supports: KtFieldNumber.meta.supports,
 	},
 	{
-		additionalProps: [],
+		additionalProps: ['showVisibilityToggle'],
 		formKey: 'textValue',
 		name: 'KtFieldPassword',
 		supports: KtFieldPassword.meta.supports,
@@ -1210,6 +1221,7 @@ export default defineComponent({
 				rows: Kotti.FieldNumber.Value
 				shortcuts: Kotti.FieldToggleGroup.Value
 				showHeaderSideSlot: ComponentValue['showHeaderSideSlot']
+				showVisibilityToggle: boolean
 				toggleType: 'checkbox' | 'switch'
 			}
 			autoComplete: Kotti.FieldSingleSelect.Value
@@ -1277,6 +1289,7 @@ export default defineComponent({
 				rows: null,
 				shortcuts: null,
 				showHeaderSideSlot: false,
+				showVisibilityToggle: false,
 				toggleType: 'checkbox',
 			},
 			autoComplete: Kotti.Field.AutoComplete.OFF,
@@ -1394,6 +1407,16 @@ export default defineComponent({
 					autoSize: settings.value.additionalProps.autoSize,
 				})
 			}
+			if (
+				componentDefinition.value.additionalProps.includes(
+					'showVisibilityToggle',
+				)
+			) {
+				Object.assign(additionalProps, {
+					showVisibilityToggle:
+						settings.value.additionalProps.showVisibilityToggle,
+				})
+			}
 
 			if (componentDefinition.value.additionalProps.includes('rows'))
 				Object.assign(additionalProps, {
diff --git a/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue b/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
index 47c9363b18..0086ef89ef 100644
--- a/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
+++ b/packages/kotti-ui/source/kotti-field-password/KtFieldPassword.vue
@@ -3,13 +3,14 @@
 		v-bind="{ field }"
 		:getEmptyValue="() => null"
 		:helpTextSlot="$slots.helpText"
+		@visibilityChange="handleVisibilityChange"
 	>
 		<input v-bind="inputProps" @input="onInput" />
 	</KtField>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
+import { computed, defineComponent, ref } from 'vue'
 import type { InputHTMLAttributes } from 'vue/types/jsx'
 
 import { KtField } from '../kotti-field'
@@ -31,9 +32,8 @@ export default defineComponent({
 			props,
 			supports: KOTTI_FIELD_PASSWORD_SUPPORTS,
 		})
-
+		const fieldType = ref('password')
 		const { forceUpdate, forceUpdateKey } = useForceUpdate()
-
 		return {
 			field,
 			inputProps: computed(
@@ -47,7 +47,7 @@ export default defineComponent({
 					forceUpdateKey: forceUpdateKey.value,
 					placeholder: props.placeholder ?? undefined,
 					size: 1,
-					type: 'password',
+					type: fieldType.value,
 					value: field.currentValue ?? '',
 				}),
 			),
@@ -57,6 +57,10 @@ export default defineComponent({
 
 				forceUpdate()
 			},
+			handleVisibilityChange: () => {
+				const isValueHidden = fieldType.value === 'password'
+				fieldType.value = isValueHidden ? 'text' : 'password'
+			},
 		}
 	},
 })
diff --git a/packages/kotti-ui/source/kotti-field-password/types.ts b/packages/kotti-ui/source/kotti-field-password/types.ts
index 13c8902a76..e8b1f63702 100644
--- a/packages/kotti-ui/source/kotti-field-password/types.ts
+++ b/packages/kotti-ui/source/kotti-field-password/types.ts
@@ -19,6 +19,7 @@ export module KottiFieldPassword {
 		.extend({
 			autoComplete: createLooseZodEnumSchema(AutoComplete),
 			placeholder: z.string().nullable().default(null),
+			showVisibilityToggle: z.boolean().default(false),
 			value: valueSchema.default(null),
 		})
 
diff --git a/packages/kotti-ui/source/kotti-field/KtField.vue b/packages/kotti-ui/source/kotti-field/KtField.vue
index d8230d5682..c51790fb5e 100644
--- a/packages/kotti-ui/source/kotti-field/KtField.vue
+++ b/packages/kotti-ui/source/kotti-field/KtField.vue
@@ -83,6 +83,18 @@
 								<i class="yoco" v-text="Yoco.Icon.CLOSE" />
 							</div>
 						</slot>
+						<div
+							v-if="field.showVisibilityToggle"
+							:class="iconClasses('input-container', ['right', 'interactive'])"
+							@click.stop="handleVisibilityChange"
+						>
+							<i
+								v-if="valueVisibility"
+								class="yoco"
+								v-text="Yoco.Icon.EYE_SLASHED"
+							/>
+							<i v-else class="yoco" v-text="Yoco.Icon.EYE" />
+						</div>
 						<div
 							v-if="field.rightIcon"
 							:class="iconClasses('input-container', ['right'])"
@@ -149,13 +161,14 @@ export default defineComponent({
 		isRange: { default: false, type: Boolean },
 		useFieldset: { default: false, type: Boolean },
 	},
-	emits: ['click', 'mousedown'],
-	setup(props) {
+	emits: ['click', 'mousedown', 'visibilityChange'],
+	setup(props, { emit }) {
 		const inputId = computed(() =>
 			props.isRange
 				? `${props.field.inputProps.id}-start`
 				: props.field.inputProps.id,
 		)
+		const valueVisibility = ref(false)
 		const validationType = computed(() => props.field.validation.type)
 		const showValidation = computed(
 			() => !(props.field.hideValidation || validationType.value === 'empty'),
@@ -191,6 +204,10 @@ export default defineComponent({
 				props.field.setValue(props.getEmptyValue())
 				focusInput()
 			},
+			handleVisibilityChange: () => {
+				if (props.field.showVisibilityToggle) emit('visibilityChange')
+				valueVisibility.value = !valueVisibility.value
+			},
 			hasHelpText: computed(
 				() => props.helpTextSlot.length > 0 || props.field.helpText !== null,
 			),
@@ -245,6 +262,7 @@ export default defineComponent({
 						warning: Yoco.Icon.CIRCLE_ATTENTION,
 					})[validationType.value],
 			),
+			valueVisibility,
 			wrapperClasses: computed(() => {
 				const classes = ['kt-field__wrapper']
 
diff --git a/packages/kotti-ui/source/kotti-field/hooks.ts b/packages/kotti-ui/source/kotti-field/hooks.ts
index ae5a50e773..057ddd57ea 100644
--- a/packages/kotti-ui/source/kotti-field/hooks.ts
+++ b/packages/kotti-ui/source/kotti-field/hooks.ts
@@ -28,6 +28,9 @@ const useDecoration = <DATA_TYPE>({
 		leftIcon: computed(() => (supports.decoration ? props.leftIcon : null)),
 		prefix: computed(() => (supports.decoration ? props.prefix : null)),
 		rightIcon: computed(() => (supports.decoration ? props.rightIcon : null)),
+		showVisibilityToggle: computed(() =>
+			supports.decoration ? props.showVisibilityToggle : false,
+		),
 		suffix: computed(() => (supports.decoration ? props.suffix : null)),
 	}
 }
diff --git a/packages/kotti-ui/source/kotti-field/types.ts b/packages/kotti-ui/source/kotti-field/types.ts
index 50e5ed718d..c9d238896b 100644
--- a/packages/kotti-ui/source/kotti-field/types.ts
+++ b/packages/kotti-ui/source/kotti-field/types.ts
@@ -79,6 +79,7 @@ export module KottiField {
 			| 'leftIcon'
 			| 'prefix'
 			| 'rightIcon'
+			| 'showVisibilityToggle'
 			| 'size'
 			| 'suffix'
 		> & {
@@ -134,6 +135,7 @@ export module KottiField {
 		leftIcon: yocoIconSchema.nullable().default(null),
 		prefix: z.string().nullable().default(null),
 		rightIcon: yocoIconSchema.nullable().default(null),
+		showVisibilityToggle: z.boolean().default(false),
 		suffix: z.string().nullable().default(null),
 		tabIndex: z.number().default(0),
 	})
@@ -168,6 +170,7 @@ export module KottiField {
 		 * Prevents the validation (e.g. color, text) from being shown
 		 */
 		hideValidation: z.boolean().default(false),
+		showVisibilityToggle: z.boolean().default(false),
 
 		/**
 		 * Defines the size of the field which influences child styles
@@ -239,6 +242,12 @@ export module KottiField {
 
 		rightIcon: z.never(),
 
+		/**
+		 * Show some an eye icon on the right side of the field to hide/show the field content
+		 *
+		 * This is false by default and is meant to be used for KtFieldPassword
+		 */
+		showVisibilityToggle: z.boolean().default(false),
 		/**
 		 * Show some string before the field
 		 *
diff --git a/packages/kotti-ui/source/kotti-form/KtForm.vue b/packages/kotti-ui/source/kotti-form/KtForm.vue
index 1dce5d3a30..3b1241a7c4 100644
--- a/packages/kotti-ui/source/kotti-form/KtForm.vue
+++ b/packages/kotti-ui/source/kotti-form/KtForm.vue
@@ -66,6 +66,7 @@ export default defineComponent({
 				hideValidation: props.hideValidation,
 				isDisabled: props.isDisabled,
 				isLoading: props.isLoading,
+				showVisibilityToggle: props.showVisibilityToggle,
 				size: props.size,
 			})),
 			formPath: computed(() => [props.formId]),
diff --git a/packages/kotti-ui/source/test-utils/index.ts b/packages/kotti-ui/source/test-utils/index.ts
index b83b7435f5..edc698efcc 100644
--- a/packages/kotti-ui/source/test-utils/index.ts
+++ b/packages/kotti-ui/source/test-utils/index.ts
@@ -21,6 +21,7 @@ export const getMockContext = ({ validators = {}, values = {} } = {}): Pick<
 			hideValidation: false,
 			isDisabled: false,
 			isLoading: false,
+			showVisibilityToggle: true,
 			size: KottiField.Size.MEDIUM,
 		},
 	},
diff --git a/packages/yoco/source/index.ts b/packages/yoco/source/index.ts
index fd951023f0..6b6fa17ece 100644
--- a/packages/yoco/source/index.ts
+++ b/packages/yoco/source/index.ts
@@ -57,6 +57,7 @@ export module Yoco {
 		EMAIL = 'email',
 		EXIT_FULLSCREEN = 'exit_fullscreen',
 		EYE = 'eye',
+		EYE_SLASHED = 'eye_slashed',
 		FILE = 'file',
 		FILTER = 'filter',
 		FIX_RIGHT = 'fix_right',
diff --git a/packages/yoco/svg/eye_slashed.svg b/packages/yoco/svg/eye_slashed.svg
new file mode 100644
index 0000000000..e45db4e6dd
--- /dev/null
+++ b/packages/yoco/svg/eye_slashed.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <title>eye_slashed</title>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L14.032 8.55382C13.4365 8.20193 12.7418 8 12 8C9.79086 8 8 9.79086 8 12C8 12.7418 8.20193 13.4365 8.55382 14.032L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L9.96803 15.4462C10.5635 15.7981 11.2582 16 12 16C14.2091 16 16 14.2091 16 12C16 11.2582 15.7981 10.5635 15.4462 9.96803L19.7071 5.70711ZM12.518 10.0677C12.3528 10.0236 12.1792 10 12 10C10.8954 10 10 10.8954 10 12C10 12.1792 10.0236 12.3528 10.0677 12.518L12.518 10.0677ZM11.482 13.9323L13.9323 11.482C13.9764 11.6472 14 11.8208 14 12C14 13.1046 13.1046 14 12 14C11.8208 14 11.6472 13.9764 11.482 13.9323ZM15.7651 4.8207C14.6287 4.32049 13.3675 4 12 4C9.14754 4 6.75717 5.39462 4.99812 6.90595C3.23268 8.42276 2.00757 10.1376 1.46387 10.9698C1.05306 11.5985 1.05306 12.4015 1.46387 13.0302C1.92276 13.7326 2.86706 15.0637 4.21194 16.3739L5.62626 14.9596C4.4555 13.8229 3.61144 12.6531 3.18002 12C3.6904 11.2274 4.77832 9.73158 6.30147 8.42294C7.87402 7.07185 9.81574 6 12 6C12.7719 6 13.5135 6.13385 14.2193 6.36658L15.7651 4.8207ZM12 18C11.2282 18 10.4866 17.8661 9.78083 17.6334L8.23496 19.1793C9.37136 19.6795 10.6326 20 12 20C14.8525 20 17.2429 18.6054 19.002 17.0941C20.7674 15.5772 21.9925 13.8624 22.5362 13.0302C22.947 12.4015 22.947 11.5985 22.5362 10.9698C22.0773 10.2674 21.133 8.93627 19.7881 7.62611L18.3738 9.04043C19.5446 10.1771 20.3887 11.3469 20.8201 12C20.3097 12.7726 19.2218 14.2684 17.6986 15.5771C16.1261 16.9282 14.1843 18 12 18Z" fill="#000000"/>
+</svg>
\ No newline at end of file