diff --git a/templates/credential-navigator.html b/templates/credential-navigator.html
index a457ccf..ebe2d29 100644
--- a/templates/credential-navigator.html
+++ b/templates/credential-navigator.html
@@ -35,27 +35,13 @@ <h2>Issuing Demo Credentials</h2>
             </select>
         </div>
         <div class="col">
-            <select class="form-select mb-2" id="issuer">
+            <select class="form-select mb-2" id="issuer" disabled>
                 <option value="">Select Issuer</option>
-                {% if organized_data %}
-                    {% for issuer in organized_data[0].issuers %}
-                    <option value="{{ issuer.identifier }}">
-                        {{ issuer.name[LANG] }}
-                    </option>
-                    {% endfor %}
-                {% endif %}
             </select>
         </div>
         <div class="col">
-            <select class="form-select mb-2" id="credential">
+            <select class="form-select mb-2" id="credential" disabled>
                 <option value="">Select Credential</option>
-                {% if organized_data and organized_data[0].issuers %}
-                    {% for credential in organized_data[0].issuers[0].credentials %}
-                    <option value="{{ credential.identifier }}">
-                        {{ credential.name[LANG] }}
-                    </option>
-                    {% endfor %}
-                {% endif %}
             </select>
         </div>
     </div>
@@ -65,29 +51,46 @@ <h2>Issuing Demo Credentials</h2>
         
         function updateIssuers(schemeId) {
             const issuerSelect = document.getElementById('issuer');
-            const scheme = organizedData.find(s => s.identifier === schemeId);
-            
+            const credentialSelect = document.getElementById('credential');
+
             issuerSelect.innerHTML = '<option value="">Select Issuer</option>';
-            if (scheme) {
-                scheme.issuers.forEach(issuer => {
-                    const option = new Option(issuer.name[{{LANG|tojson|safe}}], issuer.identifier);
-                    issuerSelect.add(option);
-                });
+            credentialSelect.innerHTML = '<option value="">Select Credential</option>';
+            credentialSelect.disabled = true;
+
+            if (schemeId) {
+                const scheme = organizedData.find(s => s.identifier === schemeId);
+                if (scheme) {
+                    scheme.issuers.forEach(issuer => {
+                        const option = new Option(issuer.name[{{LANG|tojson|safe}}], issuer.identifier);
+                        issuerSelect.add(option);
+                    });
+                    issuerSelect.disabled = false;
+                } else {
+                    issuerSelect.disabled = true;
+                }
+            } else {
+                issuerSelect.disabled = true;
             }
-            updateCredentials('', '');
         }
         
         function updateCredentials(schemeId, issuerId) {
             const credentialSelect = document.getElementById('credential');
-            const scheme = organizedData.find(s => s.identifier === schemeId);
-            const issuer = scheme?.issuers.find(i => i.identifier === issuerId);
-            
+
             credentialSelect.innerHTML = '<option value="">Select Credential</option>';
-            if (issuer) {
-                issuer.credentials.forEach(cred => {
-                    const option = new Option(cred.name[{{LANG|tojson|safe}}], cred.identifier);
-                    credentialSelect.add(option);
-                });
+            if (schemeId && issuerId) {
+                const scheme = organizedData.find(s => s.identifier === schemeId);
+                const issuer = scheme?.issuers.find(i => i.identifier === issuerId);
+                if (issuer) {
+                    issuer.credentials.forEach(cred => {
+                        const option = new Option(cred.name[{{LANG|tojson|safe}}], cred.identifier);
+                        credentialSelect.add(option);
+                    });
+                    credentialSelect.disabled = false;
+                } else {
+                    credentialSelect.disabled = true;
+                }
+            } else {
+                credentialSelect.disabled = true;
             }
         }
         
@@ -107,4 +110,4 @@ <h2>Issuing Demo Credentials</h2>
         });
     </script>
 </div>
-{% endblock main %}
\ No newline at end of file
+{% endblock main %}