diff --git a/Block/Adminhtml/Render/Obscured.php b/Block/Adminhtml/Render/Obscured.php
new file mode 100644
index 00000000..4450fa94
--- /dev/null
+++ b/Block/Adminhtml/Render/Obscured.php
@@ -0,0 +1,94 @@
+<?php
+
+namespace Paynl\Payment\Block\Adminhtml\Render;
+
+use Magento\Backend\Block\Template\Context;
+use Magento\Config\Block\System\Config\Form\Field;
+use Magento\Framework\App\Config\ScopeConfigInterface;
+use Magento\Framework\App\RequestInterface;
+use Magento\Framework\Data\Form\Element\AbstractElement;
+
+class Obscured extends Field
+{
+    protected $configPath;
+    protected $_template = 'Paynl_Payment::system/config/obscured.phtml';
+
+    /**
+     *
+     * @var Magento\Framework\App\Config\ScopeConfigInterface
+     */
+    protected $scopeConfig;
+
+    /**
+     *
+     * @var Magento\Framework\App\RequestInterface
+     */
+    protected $request;
+
+    /**
+     * Constructor.
+     *
+     * @param Context $context
+     * @param ScopeConfigInterface $scopeConfig
+     * @param RequestInterface $request
+     */
+    public function __construct(Context $context, ScopeConfigInterface $scopeConfig, RequestInterface $request)
+    {
+        $this->scopeConfig = $scopeConfig;
+        $this->request = $request;
+        parent::__construct($context);
+    }
+
+    /**
+     *
+     * @param AbstractElement $element
+     *
+     * @return string
+     */
+    protected function _getElementHtml(AbstractElement $element) // phpcs:ignore
+    {
+        $this->configPath = $element->getData('field_config')['config_path'];
+        $this->setNamePrefix($element->getName())
+            ->setHtmlId($element->getHtmlId());
+        return $this->_toHtml();
+    }
+
+    /**
+     *
+     * @return string
+     */
+    public function getValue()
+    {
+        $data = $this->getConfigData();
+        if (isset($data[$this->configPath])) {
+            $data = $data[$this->configPath];
+        } else {
+            $data = '';
+        }
+        return $data;
+    }
+
+    /**
+     * @return string
+     */
+    public function getDecryptedValue()
+    {
+        $storeId = $this->request->getParam('store');
+        $websiteId = $this->request->getParam('website');
+
+        $scope = 'default';
+        $scopeId = 0;
+
+        if ($storeId) {
+            $scope = 'stores';
+            $scopeId = $storeId;
+        }
+        if ($websiteId) {
+            $scope = 'websites';
+            $scopeId = $websiteId;
+        }
+
+        $apiToken = trim((string) $this->scopeConfig->getValue($this->configPath, $scope, $scopeId));
+        return $apiToken ?? $this->getValue();
+    }
+}
diff --git a/composer.json b/composer.json
index 8b6c7dd1..4235e4b4 100644
--- a/composer.json
+++ b/composer.json
@@ -2,7 +2,7 @@
     "name": "paynl/magento2-plugin",
     "description": "PAY. Payment methods for Magento2",
     "type": "magento2-module",
-    "version": "3.11.4",
+    "version": "3.12.0",
     "require": {
         "magento/module-sales": "^102.0.0 || ^103.0.0",
         "magento/module-payment": "^100.3.0",
diff --git a/etc/adminhtml/system.xml b/etc/adminhtml/system.xml
index 108a728b..1d0aa67b 100755
--- a/etc/adminhtml/system.xml
+++ b/etc/adminhtml/system.xml
@@ -27,13 +27,14 @@
                     </comment>
                     <config_path>payment/paynl/tokencode</config_path>
                 </field>
-                <field id="apitoken_encrypted" translate="label, comment" type="obscure" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+                <field id="apitoken_encrypted" translate="label, comment" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
                     <label>API token</label>
                     <comment>
                         <![CDATA[Your API token, you can find your tokens <a target='_blank' href='https://my.pay.nl/company/tokens'>here</a>.]]>
                     </comment>
-                    <config_path>payment/paynl/apitoken_encrypted</config_path>
-                    <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>
+                    <frontend_model>Paynl\Payment\Block\Adminhtml\Render\Obscured</frontend_model>
+                    <config_path>payment/paynl/apitoken_encrypted</config_path>    
+                    <backend_model>Magento\Config\Model\Config\Backend\Encrypted</backend_model>                
                 </field>
                 <field id="serviceid" translate="label, comment" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
                     <label>Sales location</label>
diff --git a/view/adminhtml/layout/default.xml b/view/adminhtml/layout/default.xml
index e8577185..7e3341c3 100644
--- a/view/adminhtml/layout/default.xml
+++ b/view/adminhtml/layout/default.xml
@@ -2,5 +2,6 @@
 <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <head>
         <css src="Paynl_Payment::css/configtab.css" />
+        <link src="Paynl_Payment::js/configtab.js"/>
     </head>
 </page>
\ No newline at end of file
diff --git a/view/adminhtml/templates/system/config/obscured.phtml b/view/adminhtml/templates/system/config/obscured.phtml
new file mode 100644
index 00000000..3d0c3c5f
--- /dev/null
+++ b/view/adminhtml/templates/system/config/obscured.phtml
@@ -0,0 +1,4 @@
+<span class="obscuredField">
+    <input type="text" name="<?php echo $this->getNamePrefix() ?>" value="<?php echo $this->getDecryptedValue(); ?>" />
+    <span class="obscuredDisplay"></span>
+</span>
\ No newline at end of file
diff --git a/view/adminhtml/web/css/configtab.css b/view/adminhtml/web/css/configtab.css
index d50ba682..f2573609 100644
--- a/view/adminhtml/web/css/configtab.css
+++ b/view/adminhtml/web/css/configtab.css
@@ -85,3 +85,36 @@
     float: left;
     margin-left: 10px;
 }
+
+.obscuredField {
+    position: relative;
+}
+
+.obscuredField input{
+    text-security: disc;
+    -webkit-text-security: disc;
+    -moz-text-security: disc;
+}
+
+.obscuredField input.display{
+    text-security: none;
+    -webkit-text-security: none;
+    -moz-text-security: none;
+}
+
+.obscuredField .obscuredDisplay{
+    position: absolute;
+    right: 10px;
+    top: 0;
+    cursor: pointer;
+}
+
+.obscuredField .obscuredDisplay::before{
+    content: '\e60f';
+    -webkit-font-smoothing: antialiased;
+    font-family: 'Admin Icons';
+    font-style: normal;
+    font-weight: normal;
+    line-height: 1;
+    speak: none;
+}
\ No newline at end of file
diff --git a/view/adminhtml/web/js/configtab.js b/view/adminhtml/web/js/configtab.js
new file mode 100644
index 00000000..614f490d
--- /dev/null
+++ b/view/adminhtml/web/js/configtab.js
@@ -0,0 +1,8 @@
+require([
+  'jquery',
+  'Magento_Ui/js/modal/alert'
+], function ($, alert) {
+  $('.obscuredDisplay').click(function () {
+    $(this).parent().find('input').toggleClass('display')
+  })
+})