diff --git a/apps/idos-enclave/index.html b/apps/idos-enclave/index.html
index 7f6be4395..47c1308c0 100644
--- a/apps/idos-enclave/index.html
+++ b/apps/idos-enclave/index.html
@@ -2,16 +2,16 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8"/>
+    <meta charset="UTF-8" />
     <link rel="icon"
-          href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔐</text></svg>"/>
+        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔐</text></svg>" />
 
-    <link rel="preconnect" href="https://fonts.googleapis.com"/>
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-            href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
-            rel="stylesheet"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+        rel="stylesheet" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>idOS Secure Enclave</title>
 
     <style>
@@ -31,6 +31,14 @@
             content: "Unlocking...";
         }
 
+        button#unlock.create::before {
+            content: "🔐 Create idOS Key";
+        }
+
+        button#unlock.create:disabled::before {
+            content: "Creating...";
+        }
+
         button#confirm::before {
             content: "👀 See request";
         }
@@ -46,14 +54,14 @@
 </head>
 
 <body>
-<div id="container" class="w-screen h-screen">
-    <button id="unlock"
-            class="w-full h-full px-[5%] py-[2%] bg-[#00ffb9] text-[43cqmin] transition-colors hover:bg-green-300 rounded-lg text-zinc-950 font-medium"></button>
-    <button id="confirm"
-            class="w-full h-full px-[5%] py-[2%] bg-[#00ffb9] text-[43cqmin] transition-colors hover:bg-green-300 rounded-lg text-zinc-950 font-medium"></button>
-</div>
-
-<script type="module" src="/src/main.ts"></script>
+    <div id="container" class="w-screen h-screen">
+        <button id="unlock"
+            class="w-full h-full px-[5%] py-[2%] bg-[#00ffb9] text-[41cqmin] transition-colors hover:bg-green-300 rounded-lg text-zinc-950 font-medium"></button>
+        <button id="confirm"
+            class="w-full h-full px-[5%] py-[2%] bg-[#00ffb9] text-[41cqmin] transition-colors hover:bg-green-300 rounded-lg text-zinc-950 font-medium"></button>
+    </div>
+
+    <script type="module" src="/src/main.ts"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/apps/idos-enclave/src/lib/enclave.js b/apps/idos-enclave/src/lib/enclave.js
index 3f78e4e7d..bbd08cdf5 100644
--- a/apps/idos-enclave/src/lib/enclave.js
+++ b/apps/idos-enclave/src/lib/enclave.js
@@ -221,6 +221,12 @@ export class Enclave {
 
   async configure(mode, theme) {
     this.configuration = { mode, theme };
+
+    if (mode === "new") {
+      this.unlockButton.classList.add("create");
+    } else {
+      this.unlockButton.classList.remove("create");
+    }
   }
 
   messageParent(message) {
diff --git a/apps/idos-example-dapp/src/styles.css b/apps/idos-example-dapp/src/styles.css
index c9db4cec3..6661bcf24 100644
--- a/apps/idos-example-dapp/src/styles.css
+++ b/apps/idos-example-dapp/src/styles.css
@@ -74,7 +74,7 @@ div#idos-wrapper::after {
 }
 
 div#idos-wrapper > #idos-container {
-  width: 140px;
+  width: 160px;
 }
 
 div#terminal {
