diff --git a/public/css/application.css b/public/css/application.css
index 57f9fef8..3c2439fa 100644
--- a/public/css/application.css
+++ b/public/css/application.css
@@ -717,6 +717,10 @@ select {
   pointer-events: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -725,6 +729,13 @@ select {
   position: relative;
 }
 
+.inset-0 {
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -741,36 +752,11 @@ select {
   grid-column: span 3 / span 3;
 }
 
-.mx-2 {
-  margin-left: 0.5rem;
-  margin-right: 0.5rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.my-8 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-
-.my-3 {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -835,6 +821,10 @@ select {
   margin-top: 0.5rem;
 }
 
+.mt-24 {
+  margin-top: 6rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -847,42 +837,14 @@ select {
   margin-top: 2rem;
 }
 
-.mt-5 {
-  margin-top: 1.25rem;
+.-mt-1 {
+  margin-top: -0.25rem;
 }
 
 .mt-12 {
   margin-top: 3rem;
 }
 
-.mb-3 {
-  margin-bottom: 0.75rem;
-}
-
-.mt-16 {
-  margin-top: 4rem;
-}
-
-.mt-20 {
-  margin-top: 5rem;
-}
-
-.mt-32 {
-  margin-top: 8rem;
-}
-
-.mt-24 {
-  margin-top: 6rem;
-}
-
-.ml-3 {
-  margin-left: 0.75rem;
-}
-
-.ml-8 {
-  margin-left: 2rem;
-}
-
 .block {
   display: block;
 }
@@ -915,36 +877,28 @@ select {
   height: 1rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
-.h-\[56px\] {
-  height: 56px;
-}
-
-.h-8 {
-  height: 2rem;
-}
-
-.w-1\/5 {
-  width: 20%;
+.w-16 {
+  width: 4rem;
 }
 
-.w-2\/5 {
-  width: 40%;
+.w-24 {
+  width: 6rem;
 }
 
 .w-4 {
   width: 1rem;
 }
 
+.w-40 {
+  width: 10rem;
+}
+
 .w-5 {
   width: 1.25rem;
 }
 
-.w-52 {
-  width: 13rem;
+.w-56 {
+  width: 14rem;
 }
 
 .w-6 {
@@ -971,32 +925,28 @@ select {
   width: 100%;
 }
 
-.w-24 {
-  width: 6rem;
-}
-
-.w-40 {
-  width: 10rem;
+.w-64 {
+  width: 16rem;
 }
 
-.w-32 {
-  width: 8rem;
+.w-96 {
+  width: 24rem;
 }
 
-.w-20 {
-  width: 5rem;
+.max-w-screen-lg {
+  max-width: 1024px;
 }
 
-.w-16 {
-  width: 4rem;
+.max-w-xs {
+  max-width: 20rem;
 }
 
-.max-w-3xl {
-  max-width: 48rem;
+.max-w-screen-sm {
+  max-width: 640px;
 }
 
-.max-w-screen-lg {
-  max-width: 1024px;
+.max-w-sm {
+  max-width: 24rem;
 }
 
 .table-fixed {
@@ -1033,10 +983,6 @@ select {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
 
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
 .grid-rows-2 {
   grid-template-rows: repeat(2, minmax(0, 1fr));
 }
@@ -1045,18 +991,10 @@ select {
   flex-direction: column;
 }
 
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
 .items-center {
   align-items: center;
 }
 
-.justify-end {
-  justify-content: flex-end;
-}
-
 .justify-center {
   justify-content: center;
 }
@@ -1075,12 +1013,6 @@ select {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-1 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1121,6 +1053,10 @@ select {
   border-width: 2px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1133,10 +1069,6 @@ select {
   border-top-width: 1px;
 }
 
-.border-t-4 {
-  border-top-width: 4px;
-}
-
 .border-gray-200 {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -1147,9 +1079,9 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 
-.border-green-500 {
+.border-purple-600 {
   --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+  border-color: rgb(147 51 234 / var(--tw-border-opacity));
 }
 
 .border-purple-700 {
@@ -1172,14 +1104,14 @@ select {
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
 
-.bg-green-100 {
+.bg-gray-900 {
   --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
 }
 
-.bg-orange-50 {
+.bg-green-600 {
   --tw-bg-opacity: 1;
-  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
 }
 
 .bg-purple-100 {
@@ -1197,23 +1129,8 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-}
-
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.fill-current {
-  fill: currentColor;
+.bg-origin-border {
+  background-origin: border-box;
 }
 
 .p-2 {
@@ -1224,23 +1141,25 @@ select {
   padding: 0.625rem;
 }
 
-.p-3 {
-  padding: 0.75rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
-}
-
 .px-10 {
   padding-left: 2.5rem;
   padding-right: 2.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -1256,11 +1175,6 @@ select {
   padding-right: 1.5rem;
 }
 
-.py-1 {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
 .py-16 {
   padding-top: 4rem;
   padding-bottom: 4rem;
@@ -1281,21 +1195,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.px-3 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-}
-
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -1304,10 +1203,6 @@ select {
   padding-bottom: 1rem;
 }
 
-.pl-10 {
-  padding-left: 2.5rem;
-}
-
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -1316,12 +1211,8 @@ select {
   padding-left: 1.5rem;
 }
 
-.pr-10 {
-  padding-right: 2.5rem;
-}
-
-.pr-4 {
-  padding-right: 1rem;
+.pr-3 {
+  padding-right: 0.75rem;
 }
 
 .pt-1 {
@@ -1332,22 +1223,6 @@ select {
   padding-top: 1rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
-.pr-3 {
-  padding-right: 0.75rem;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1422,10 +1297,6 @@ select {
   line-height: 1.625;
 }
 
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1466,16 +1337,6 @@ select {
   color: rgb(34 197 94 / var(--tw-text-opacity));
 }
 
-.text-green-700 {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
-.text-orange-700 {
-  --tw-text-opacity: 1;
-  color: rgb(194 65 12 / var(--tw-text-opacity));
-}
-
 .text-purple-700 {
   --tw-text-opacity: 1;
   color: rgb(126 34 206 / var(--tw-text-opacity));
@@ -1486,21 +1347,6 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
-.text-purple-600 {
-  --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
-}
-
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -1523,12 +1369,6 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -1547,11 +1387,6 @@ select {
   transition-duration: 150ms;
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
@@ -1567,21 +1402,11 @@ select {
   background-color: rgb(88 28 135 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-gray-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
-.hover\:text-gray-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1598,17 +1423,17 @@ select {
   --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-purple-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-}
-
 .focus-visible\:ring-2:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:ring-primary:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(248 196 85 / var(--tw-ring-opacity));
+}
+
 .focus-visible\:ring-offset-2:focus-visible {
   --tw-ring-offset-width: 2px;
 }
@@ -1628,6 +1453,11 @@ select {
     border-color: rgb(55 65 81 / var(--tw-border-opacity));
   }
 
+  .dark\:border-neutral-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(64 64 64 / var(--tw-border-opacity));
+  }
+
   .dark\:border-neutral-800 {
     --tw-border-opacity: 1;
     border-color: rgb(38 38 38 / var(--tw-border-opacity));
@@ -1642,31 +1472,11 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
-  .dark\:border-gray-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-neutral-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(64 64 64 / var(--tw-border-opacity));
-  }
-
   .dark\:border-l-gray-400 {
     --tw-border-opacity: 1;
     border-left-color: rgb(156 163 175 / var(--tw-border-opacity));
   }
 
-  .dark\:bg-green-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(20 83 45 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-orange-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(124 45 18 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-purple-900 {
     --tw-bg-opacity: 1;
     background-color: rgb(88 28 135 / var(--tw-bg-opacity));
@@ -1692,11 +1502,6 @@ select {
     background-color: rgb(49 49 49 / var(--tw-bg-opacity));
   }
 
-  .dark\:bg-gray-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-  }
-
   .dark\:text-gray-100 {
     --tw-text-opacity: 1;
     color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -1712,11 +1517,6 @@ select {
     color: rgb(156 163 175 / var(--tw-text-opacity));
   }
 
-  .dark\:text-green-400 {
-    --tw-text-opacity: 1;
-    color: rgb(74 222 128 / var(--tw-text-opacity));
-  }
-
   .dark\:text-neutral-200 {
     --tw-text-opacity: 1;
     color: rgb(229 229 229 / var(--tw-text-opacity));
@@ -1732,16 +1532,6 @@ select {
     color: rgb(163 163 163 / var(--tw-text-opacity));
   }
 
-  .dark\:text-orange-200 {
-    --tw-text-opacity: 1;
-    color: rgb(254 215 170 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-orange-400 {
-    --tw-text-opacity: 1;
-    color: rgb(251 146 60 / var(--tw-text-opacity));
-  }
-
   .dark\:text-purple-400 {
     --tw-text-opacity: 1;
     color: rgb(192 132 252 / var(--tw-text-opacity));
@@ -1757,6 +1547,11 @@ select {
     color: rgb(255 255 255 / var(--tw-text-opacity));
   }
 
+  .dark\:text-neutral-500 {
+    --tw-text-opacity: 1;
+    color: rgb(115 115 115 / var(--tw-text-opacity));
+  }
+
   .dark\:placeholder-gray-400::-moz-placeholder {
     --tw-placeholder-opacity: 1;
     color: rgb(156 163 175 / var(--tw-placeholder-opacity));
@@ -1771,19 +1566,11 @@ select {
     --tw-ring-offset-color: #1f2937;
   }
 
-  .dark\:ring-offset-gray-700 {
-    --tw-ring-offset-color: #374151;
-  }
-
   .dark\:invert {
     --tw-invert: invert(100%);
     filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
   }
 
-  .dark\:\[color-scheme\:dark\] {
-    color-scheme: dark;
-  }
-
   .dark\:hover\:bg-surface-16dp:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(56 56 56 / var(--tw-bg-opacity));
@@ -1798,10 +1585,6 @@ select {
     --tw-ring-opacity: 1;
     --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
   }
-
-  .dark\:focus\:ring-offset-gray-700:focus {
-    --tw-ring-offset-color: #374151;
-  }
 }
 
 @media (min-width: 640px) {
@@ -1817,10 +1600,6 @@ select {
     margin-top: 0px;
   }
 
-  .sm\:flex {
-    display: flex;
-  }
-
   .sm\:w-\[250px\] {
     width: 250px;
   }
@@ -1833,10 +1612,6 @@ select {
     justify-content: center;
   }
 
-  .sm\:pr-0 {
-    padding-right: 0px;
-  }
-
   .sm\:text-2xl {
     font-size: 1.5rem;
     line-height: 2rem;
@@ -1853,14 +1628,6 @@ select {
     grid-column: span 1 / span 1;
   }
 
-  .md\:ml-0 {
-    margin-left: 0px;
-  }
-
-  .md\:block {
-    display: block;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -1869,14 +1636,6 @@ select {
     display: table-cell;
   }
 
-  .md\:hidden {
-    display: none;
-  }
-
-  .md\:flex-1 {
-    flex: 1 1 0%;
-  }
-
   .md\:grid-cols-5 {
     grid-template-columns: repeat(5, minmax(0, 1fr));
   }
@@ -1889,21 +1648,6 @@ select {
     padding: 2rem;
   }
 
-  .md\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
-  .md\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
-  .md\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -1914,11 +1658,6 @@ select {
     padding-bottom: 0.75rem;
   }
 
-  .md\:px-12 {
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -1926,26 +1665,40 @@ select {
 }
 
 @media (min-width: 1024px) {
-  .lg\:w-8\/12 {
-    width: 66.666667%;
+  .lg\:mb-6 {
+    margin-bottom: 1.5rem;
+  }
+
+  .lg\:p-6 {
+    padding: 1.5rem;
   }
 
   .lg\:p-8 {
     padding: 2rem;
   }
 
+  .lg\:px-0 {
+    padding-left: 0px;
+    padding-right: 0px;
+  }
+
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
   }
 
+  .lg\:px-6 {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
   .lg\:py-12 {
     padding-top: 3rem;
     padding-bottom: 3rem;
   }
 
-  .lg\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
+  .lg\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
   }
 }
\ No newline at end of file
diff --git a/public/images/copy.svg b/public/images/copy.svg
deleted file mode 100644
index 473a627e..00000000
--- a/public/images/copy.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="6" y="6" width="10" height="14" rx="1.5" fill="currentColor"/>
-<path d="M8.06427 5.06427C8.20216 5.02247 8.34846 5 8.5 5H15.5C16.3284 5 17 5.67157 17 6.5V17.5C17 17.6515 16.9775 17.7978 16.9357 17.9357C17.5517 17.7491 18 17.1769 18 16.5V5.5C18 4.67157 17.3284 4 16.5 4H9.5C8.82312 4 8.25095 4.44835 8.06427 5.06427Z" fill="currentColor"/>
-</svg>
diff --git a/public/images/visible.svg b/public/images/visible.svg
deleted file mode 100644
index 3d9ca936..00000000
--- a/public/images/visible.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 14C13.1046 14 14 13.1046 14 12C14 10.8954 13.1046 10 12 10C10.8954 10 10 10.8954 10 12C10 13.1046 10.8954 14 12 14Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 14.7614 16.9706 17 12 17C7.02944 17 3 14.7614 3 12C3 9.23858 7.02944 7 12 7C16.9706 7 21 9.23858 21 12ZM16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" fill="white"/>
-</svg>
diff --git a/views/apps/create.html b/views/apps/create.html
index ef735c12..47560ac6 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -1,90 +1,64 @@
 {{define "body"}}
 
-<div
-  class="bg-white rounded-md shadow p-4 lg:p-8 dark:bg-surface-02dp"
->
-  <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 
-  <div
-    class="bg-green-100 border-t-4 border-green-500 rounded-md px-4 py-3 shadow-md mb-8 dark:bg-green-900"
-    role="alert"
-  >
-    <div class="flex items-center text-green-700 dark:text-green-400">
-      <div class="py-1">
-        <svg
-          class="fill-current h-6 w-6 mr-4"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-        >
-          <path
-            d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"
-          ></path>
-        </svg>
-      </div>
-      <div>
-        <p class="font-bold">App connection created</p>
-      </div>
-    </div>
+<div class="w-full max-w-screen-sm mx-auto">
+  <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white text-center">
+    🚀 Almost there!
+  </h2>
+  <div class="font-medium text-center mb-8 dark:text-white">
+    Complete the last step of the setup by pasting or scanning your connection's pairing secret in the desired app to finalise the connection.
   </div>
 
-  {{if not (eq .PairingSecret "")}}
-  <p class="mb-4 dark:text-white">Use the pairing secret to connect to your app.</p>
-
-  <p class=" text-orange-700 bg-orange-50 dark:text-orange-400 dark:bg-orange-900 py-3 px-4 mb-6 rounded-md">
-    ⚠️ This pairing secret is only shown once. Don’t show it to anyone. Use it
-    only with apps you trust.
-  </p>
-
-  <p class="text-l font-bold">
-    <a
-      onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false"
-      class="inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition"
-      href="#"
-    >
-      <img
-        src="public/images/visible.svg"
-        width="24"
-        height="24"
-        class="mr-2"
-      />
-      Reveal pairing secret
+<div class="flex flex-col">
+    <a href="{{.PairingUri}}" class="w-full inline-flex bg-purple-700 cursor-pointer duration-150 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-4 rounded-md shadow text-white transition mb-2">
+      <svg class="mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M13.6281 5.03035L20.9945 12.43L20.9956 12.431C21.4028 12.84 21.8601 13.0639 22.279 13.1062C22.6711 13.1459 23.0667 13.0322 23.4219 12.6949L19.4029 2.22631C18.9491 1.2345 17.6421 0.998839 16.8705 1.7739L13.6281 5.03035ZM20.5966 12.8277L20.5967 12.8278L20.5965 12.828C21.5558 13.7914 22.8871 14.0212 23.8507 13.0622L20.5884 16.3091L19.0591 17.8312L17.9915 18.8938L16.1182 17.0137C17.026 15.6333 16.8781 13.76 15.6662 12.5406L14.3908 11.2573C14.2095 11.0748 13.9176 11.074 13.7351 11.2553L13.1055 11.8809L11.5093 10.2748C11.2323 9.99609 10.7744 10.0126 10.5176 10.3196C10.2928 10.5907 10.3315 10.9906 10.5786 11.2392L12.1549 12.8252L10.9035 14.0685L9.3073 12.4624C9.03028 12.1837 8.5705 12.1981 8.31561 12.5072C8.0928 12.7764 8.13155 13.1762 8.37864 13.4249L9.95488 15.0109L9.32725 15.6346C9.14479 15.8159 9.14392 16.1077 9.32522 16.2902L10.6006 17.5735C11.8123 18.7927 13.6847 18.9526 15.0709 18.054L16.9452 19.9351L16.3577 20.5197L14.3527 22.5153C13.3889 23.4743 11.8301 23.4707 10.8708 22.5072L0.717064 12.3077C-0.242097 11.344 -0.238627 9.78546 0.725161 8.82627L6.96087 2.61994C7.92465 1.66089 9.4834 1.66451 10.4427 2.62803L20.5966 12.8277Z"
+          fill="currentColor" />
+      </svg>
+      Open in supported app
     </a>
-  </p>
-  {{end}}
+    <div class="text-center text-xs text-gray-600 dark:text-neutral-500">
+      Only connect with apps you trust!
+    </div>
 
-  <div
-    class="hidden my-6 mx-auto rounded-lg border border-gray-300 dark:border-white/10 p-6"
-    style="width: 432px"
-    id="pairing-details"
-  >
-    <p class="my-4 w-full">
-      <input
-        type="text"
-        id="pairing-input"
-        value="{{.PairingUri}}"
-        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-surface-00dp dark:border-neutral-800 dark:placeholder-gray-400 dark:text-white"
-      />
-    </p>
+    {{if not (eq .PairingSecret "")}}
+      <div class="dark:text-white text-sm text-center mt-8 mb-1">Manually pair app ↓</div>
+      <button id="copy-button" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mt-2 mb-2">
+        <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          fill="currentColor">
+          <rect width="10" height="14" x="6" y="6" rx="1.5"></rect>
+          <path
+            d="M8.064 5.064A1.5 1.5 0 018.5 5h7A1.5 1.5 0 0117 6.5v11a1.5 1.5 0 01-.064.436A1.5 1.5 0 0018 16.5v-11A1.5 1.5 0 0016.5 4h-7a1.5 1.5 0 00-1.436 1.064z"></path>
+        </svg>
+        <span id="copy-text">Copy pairing secret</span>
+      </button>
 
-    <a
-      href="#"
-      id="copy-link"
-      class="w-full text-center bg-white border cursor-pointer dark:bg-surface-02dp dark:border-white/10 dark:hover:bg-surface-16dp duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-gray-100 flex items-center justify-center px-5 py-3 rounded-md shadow text-gray-700 dark:text-neutral-300 transition mb-6"
-    >
-      <svg 
-        class="fill-current h-6 w-6 mr-4"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-      >
-        <rect id="copy-icon-rect" x="6" y="6" width="10" height="14" rx="1.5" stroke="currentColor" fill="transparent"/>
-        <path d="M8.06427 5.06427C8.20216 5.02247 8.34846 5 8.5 5H15.5C16.3284 5 17 5.67157 17 6.5V17.5C17 17.6515 16.9775 17.7978 16.9357 17.9357C17.5517 17.7491 18 17.1769 18 16.5V5.5C18 4.67157 17.3284 4 16.5 4H9.5C8.82312 4 8.25095 4.44835 8.06427 5.06427Z" fill="currentColor"/>
-      </svg>
-      <span id="copy-text">Copy Secret</span>
-    </a>
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="w-full inline-flex items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-purple-700 dark:bg-surface-02dp dark:text-neutral-200 border dark:border-white/10 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mb-4 lg:mb-6">
+        <svg class="mr-2" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+          fill="currentColor">
+          <path d="M12 14a2 2 0 100-4 2 2 0 000 4z"></path>
+          <path fill-rule="evenodd"
+            d="M21 12c0 2.761-4.03 5-9 5s-9-2.239-9-5 4.03-5 9-5 9 2.239 9 5zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"
+            clip-rule="evenodd"></path>
+        </svg>
+        QR code
+      </button>
+    {{end}}
+  </div>
 
-    <a href="{{.PairingUri}}" target="_blank" id="pairing-link">
-      <div id="connect-qrcode"></div>
-    </a>
+  <div class="flex fixed inset-0 items-center justify-center hidden" id="pairing-details">
+    <div onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false" class="fixed inset-0 bg-gray-900 opacity-50"></div>
+    <div class="bg-white dark:bg-surface-02dp p-4 lg:px-6 rounded shadow relative">
+      <h2 class="mb-4 font-semibold text-lg lg:text-xl font-headline dark:text-white">Scan QR Code in the app to pair</h2>
+      <a href="{{.PairingUri}}" target="_blank" id="pairing-link" class="block border-4 border-purple-600 rounded-lg p-4 lg:p-6">
+        <div id="connect-qrcode"></div>
+      </a>
+      <button onclick="document.getElementById('pairing-details').classList.toggle('hidden');return false"
+      class="w-full inline-flex font-semibold items-center justify-center px-3 py-2 cursor-pointer duration-150 transition bg-white text-gray-700 dark:bg-surface-02dp dark:text-neutral-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-surface-16dp bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary mt-4">
+        Close
+      </button>
+    </div>
   </div>
 </div>
 
@@ -92,23 +66,22 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 <script type="text/javascript">
   // notify the opener if present of the success full connect
   window.addEventListener("load", (event) => {
-    
-    // if there is no opener we redirect to the protocol link
-    // this fails if the user does not support it and the user sees the normal
-    if (!window.opener) {
-      // delay execution a bit to make sure the page can finish loading
-      setTimeout(function () {
-        document.location = "{{.PairingUri}}";
-      }, 250);
-      return;
+
+    // dispatch a success event which can be listened to by the opener or by the app that embeddes the webview
+    // this gives thoes apps the chance to know the user has enabled the connection
+    const nwcEvent = new CustomEvent("nwc:success", { detail: {} });
+    window.dispatchEvent(nwcEvent);
+
+    // notify the opener of the successful connection
+    if (window.opener) {
+      window.opener.postMessage(
+        {
+          type: "nwc:success",
+          payload: {success: true},
+        },
+        "*"
+      );
     }
-    window.opener.postMessage(
-      {
-        type: "nwc:success",
-        payload: { success: true },
-      },
-      "*"
-    );
   });
 
   window.addEventListener("DOMContentLoaded", (event) => {
@@ -116,24 +89,23 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
       {
         fill: window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : "#000",
         text: "{{.PairingUri}}",
-        size: 384, // in pixels
+        size: 250, // in pixels
       }, //window.matchMedia('(prefers-color-scheme: dark)').matches ? "#FFF" : 
       document.getElementById("connect-qrcode")
     );
 
     document
-      .getElementById("copy-link")
+      .getElementById("copy-button")
       .addEventListener("click", async (event) => {
         event.preventDefault();
+        const copyButton = document.getElementById("copy-button")
         const copyText = document.getElementById("copy-text");
-        const copyIcon = document.getElementById("copy-icon-rect");
-        const value = document.getElementById("pairing-input").value;
 
         if (navigator.clipboard && window.isSecureContext) {
-          navigator.clipboard.writeText(value);
+          navigator.clipboard.writeText("{{.PairingUri}}");
         } else {
           const textArea = document.createElement("textarea");
-          textArea.value = value;
+          textArea.value = "{{.PairingUri}}";
           textArea.style.position = "absolute";
           textArea.style.opacity = 0;
           document.body.appendChild(textArea);
@@ -141,11 +113,13 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
           await document.execCommand("copy");
           textArea.remove();
         }
-        copyIcon.style.fill = "currentColor";
-        copyText.textContent = "Copied"
+
+        const classesToToggle = ["hover:bg-gray-50", "bg-green-600", "bg-white", "text-white", "text-purple-700"];
+        classesToToggle.forEach(className => copyButton.classList.toggle(className));
+        copyText.textContent = "Copied to clipboard!"
         setTimeout(() => {
-          copyIcon.style.fill = "transparent"
-          copyText.textContent = "Copy Secret"
+        classesToToggle.forEach(className => copyButton.classList.toggle(className));
+          copyText.textContent = "Copy pairing secret"
         }, 2000);
       });
   });
diff --git a/views/apps/new.html b/views/apps/new.html
index 39395d3c..fd9486f1 100644
--- a/views/apps/new.html
+++ b/views/apps/new.html
@@ -8,12 +8,6 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
   {{end}}
 </h2>
 
-{{ if .Pubkey }}
-  <p class="rounded-md text-orange-700 bg-orange-50 dark:text-orange-200 dark:bg-orange-900 p-3 mb-3">
-    ⚠️ Only connect with apps you trust!
-  </p>
-{{ end }}
-
 <form method="POST" action="/apps" accept-charset="UTF-8">
   <div class="bg-white dark:bg-surface-02dp rounded-md shadow p-4 md:p-8 ">
       <div>