diff --git a/.prettierignore b/.prettierignore
index 81326da1..e69de29b 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +0,0 @@
-views/apps/show.html
diff --git a/public/css/application.css b/public/css/application.css
index b4f1e55f..57f9fef8 100644
--- a/public/css/application.css
+++ b/public/css/application.css
@@ -717,10 +717,6 @@ select {
   pointer-events: none;
 }
 
-.fixed {
-  position: fixed;
-}
-
 .absolute {
   position: absolute;
 }
@@ -729,13 +725,6 @@ select {
   position: relative;
 }
 
-.inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-}
-
 .left-0 {
   left: 0px;
 }
@@ -744,8 +733,12 @@ select {
   order: 9999;
 }
 
-.float-left {
-  float: left;
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
+.col-span-3 {
+  grid-column: span 3 / span 3;
 }
 
 .mx-2 {
@@ -773,6 +766,11 @@ select {
   margin-bottom: 2rem;
 }
 
+.my-3 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -805,6 +803,10 @@ select {
   margin-left: 0.5rem;
 }
 
+.ml-2\.5 {
+  margin-left: 0.625rem;
+}
+
 .ml-6 {
   margin-left: 1.5rem;
 }
@@ -813,10 +815,18 @@ select {
   margin-right: 0.5rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .mr-4 {
   margin-right: 1rem;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .mt-10 {
   margin-top: 2.5rem;
 }
@@ -841,20 +851,36 @@ select {
   margin-top: 1.25rem;
 }
 
-.mb-5 {
-  margin-bottom: 1.25rem;
+.mt-12 {
+  margin-top: 3rem;
 }
 
-.ml-0 {
-  margin-left: 0px;
+.mb-3 {
+  margin-bottom: 0.75rem;
 }
 
-.ml-4 {
-  margin-left: 1rem;
+.mt-16 {
+  margin-top: 4rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
+.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 {
@@ -877,6 +903,10 @@ select {
   display: table;
 }
 
+.grid {
+  display: grid;
+}
+
 .hidden {
   display: none;
 }
@@ -909,6 +939,14 @@ select {
   width: 1rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-52 {
+  width: 13rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -933,30 +971,6 @@ select {
   width: 100%;
 }
 
-.w-16 {
-  width: 4rem;
-}
-
-.w-32 {
-  width: 8rem;
-}
-
-.w-64 {
-  width: 16rem;
-}
-
-.w-12 {
-  width: 3rem;
-}
-
-.w-48 {
-  width: 12rem;
-}
-
-.w-20 {
-  width: 5rem;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -965,39 +979,26 @@ select {
   width: 10rem;
 }
 
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
+.w-32 {
+  width: 8rem;
 }
 
-.max-w-lg {
-  max-width: 32rem;
+.w-20 {
+  width: 5rem;
 }
 
-.max-w-5xl {
-  max-width: 64rem;
+.w-16 {
+  width: 4rem;
 }
 
-.max-w-4xl {
-  max-width: 56rem;
+.max-w-3xl {
+  max-width: 48rem;
 }
 
 .max-w-screen-lg {
   max-width: 1024px;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
-.max-w-screen-md {
-  max-width: 768px;
-}
-
-.table-auto {
-  table-layout: auto;
-}
-
 .table-fixed {
   table-layout: fixed;
 }
@@ -1006,6 +1007,12 @@ select {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .list-inside {
   list-style-position: inside;
 }
@@ -1018,6 +1025,22 @@ select {
   list-style-type: disc;
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.grid-cols-6 {
+  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));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -1042,16 +1065,20 @@ select {
   justify-content: space-between;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(1rem * var(--tw-space-x-reverse));
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
-.space-y-4 > :not([hidden]) ~ :not([hidden]) {
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
-  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+  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]) {
@@ -1065,11 +1092,6 @@ select {
   border-color: rgb(229 231 235 / var(--tw-divide-opacity));
 }
 
-.divide-gray-600 > :not([hidden]) ~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
-}
-
 .overflow-hidden {
   overflow: hidden;
 }
@@ -1095,14 +1117,18 @@ select {
   border-width: 1px;
 }
 
-.border-4 {
-  border-width: 4px;
+.border-2 {
+  border-width: 2px;
 }
 
 .border-b {
   border-bottom-width: 1px;
 }
 
+.border-l-2 {
+  border-left-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1126,34 +1152,19 @@ select {
   border-color: rgb(34 197 94 / var(--tw-border-opacity));
 }
 
-.border-red-400 {
+.border-purple-700 {
   --tw-border-opacity: 1;
-  border-color: rgb(248 113 113 / var(--tw-border-opacity));
+  border-color: rgb(126 34 206 / var(--tw-border-opacity));
 }
 
-.border-neutral-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(64 64 64 / var(--tw-border-opacity));
-}
-
-.border-orange-200 {
+.border-red-400 {
   --tw-border-opacity: 1;
-  border-color: rgb(254 215 170 / var(--tw-border-opacity));
+  border-color: rgb(248 113 113 / var(--tw-border-opacity));
 }
 
-.border-purple-600 {
+.border-l-gray-200 {
   --tw-border-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-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));
+  border-left-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 
 .bg-gray-50 {
@@ -1171,6 +1182,11 @@ select {
   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
 }
 
+.bg-purple-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
+}
+
 .bg-purple-700 {
   --tw-bg-opacity: 1;
   background-color: rgb(126 34 206 / var(--tw-bg-opacity));
@@ -1181,23 +1197,19 @@ select {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-blue-500 {
+.bg-blue-50 {
   --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
 }
 
-.bg-gray-900 {
+.bg-gray-100 {
   --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-green-600 {
+.bg-gray-800 {
   --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
-.bg-origin-border {
-  background-origin: border-box;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 
 .fill-current {
@@ -1216,21 +1228,12 @@ select {
   padding: 0.75rem;
 }
 
-.p-6 {
-  padding: 1.5rem;
-}
-
 .p-4 {
   padding: 1rem;
 }
 
-.p-5 {
-  padding: 1.25rem;
-}
-
-.px-1 {
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
+.p-6 {
+  padding: 1.5rem;
 }
 
 .px-10 {
@@ -1278,26 +1281,25 @@ select {
   padding-bottom: 1rem;
 }
 
-.py-\[6px\] {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
-
 .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;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1306,10 +1308,6 @@ select {
   padding-left: 2.5rem;
 }
 
-.pl-3 {
-  padding-left: 0.75rem;
-}
-
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -1326,14 +1324,30 @@ select {
   padding-right: 1rem;
 }
 
+.pt-1 {
+  padding-top: 0.25rem;
+}
+
 .pt-4 {
   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;
 }
@@ -1408,14 +1422,13 @@ select {
   line-height: 1.625;
 }
 
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
+.tracking-tight {
+  letter-spacing: -0.025em;
 }
 
-.text-blue-700 {
+.text-black {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
+  color: rgb(0 0 0 / var(--tw-text-opacity));
 }
 
 .text-gray-400 {
@@ -1428,11 +1441,21 @@ select {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.text-gray-600 {
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+}
+
 .text-gray-700 {
   --tw-text-opacity: 1;
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1453,11 +1476,6 @@ select {
   color: rgb(194 65 12 / var(--tw-text-opacity));
 }
 
-.text-purple-600 {
-  --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
-}
-
 .text-purple-700 {
   --tw-text-opacity: 1;
   color: rgb(126 34 206 / var(--tw-text-opacity));
@@ -1468,20 +1486,29 @@ select {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
+.text-blue-700 {
   --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
+  color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
-.text-purple-500 {
+.text-purple-600 {
   --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
+  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;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .opacity-50 {
   opacity: 0.5;
 }
@@ -1540,6 +1567,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));
@@ -1561,14 +1593,14 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-.focus\:ring-purple-500:focus {
+.focus\:ring-purple-700:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
 }
 
-.focus\:ring-purple-700:focus {
+.focus\:ring-purple-500:focus {
   --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
+  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
 }
 
 .focus-visible\:ring-2:focus-visible {
@@ -1577,11 +1609,6 @@ select {
   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;
 }
@@ -1591,14 +1618,9 @@ select {
     border-color: rgb(255 255 255 / 0.1);
   }
 
-  .dark\:divide-white > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-divide-opacity));
-  }
-
-  .dark\:border-gray-500 {
+  .dark\:border-gray-400 {
     --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+    border-color: rgb(156 163 175 / var(--tw-border-opacity));
   }
 
   .dark\:border-gray-700 {
@@ -1611,18 +1633,28 @@ select {
     border-color: rgb(38 38 38 / var(--tw-border-opacity));
   }
 
+  .dark\:border-purple-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(216 180 254 / var(--tw-border-opacity));
+  }
+
   .dark\:border-white\/10 {
     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\:bg-gray-600 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(75 85 99 / var(--tw-bg-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 {
@@ -1635,6 +1667,11 @@ select {
     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));
+  }
+
   .dark\:bg-surface-00dp {
     --tw-bg-opacity: 1;
     background-color: rgb(18 18 18 / var(--tw-bg-opacity));
@@ -1655,6 +1692,11 @@ 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));
@@ -1690,6 +1732,11 @@ 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));
@@ -1700,6 +1747,11 @@ select {
     color: rgb(192 132 252 / var(--tw-text-opacity));
   }
 
+  .dark\:text-purple-500 {
+    --tw-text-opacity: 1;
+    color: rgb(168 85 247 / var(--tw-text-opacity));
+  }
+
   .dark\:text-white {
     --tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1715,12 +1767,17 @@ select {
     color: rgb(156 163 175 / var(--tw-placeholder-opacity));
   }
 
+  .dark\:ring-offset-gray-800 {
+    --tw-ring-offset-color: #1f2937;
+  }
+
   .dark\:ring-offset-gray-700 {
     --tw-ring-offset-color: #374151;
   }
 
-  .dark\:ring-offset-gray-800 {
-    --tw-ring-offset-color: #1f2937;
+  .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\] {
@@ -1776,11 +1833,6 @@ select {
     justify-content: center;
   }
 
-  .sm\:px-0 {
-    padding-left: 0px;
-    padding-right: 0px;
-  }
-
   .sm\:pr-0 {
     padding-right: 0px;
   }
@@ -1797,16 +1849,16 @@ select {
 }
 
 @media (min-width: 768px) {
-  .md\:visible {
-    visibility: visible;
+  .md\:col-span-1 {
+    grid-column: span 1 / span 1;
   }
 
   .md\:ml-0 {
     margin-left: 0px;
   }
 
-  .md\:ml-4 {
-    margin-left: 1rem;
+  .md\:block {
+    display: block;
   }
 
   .md\:flex {
@@ -1825,14 +1877,31 @@ select {
     flex: 1 1 0%;
   }
 
+  .md\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .md\:grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+
+  .md\:p-8 {
+    padding: 2rem;
+  }
+
   .md\:px-0 {
     padding-left: 0px;
     padding-right: 0px;
   }
 
-  .md\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
+  .md\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  .md\:py-6 {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
   }
 
   .md\:px-6 {
@@ -1845,24 +1914,9 @@ select {
     padding-bottom: 0.75rem;
   }
 
-  .md\:pl-10 {
-    padding-left: 2.5rem;
-  }
-
-  .md\:pr-10 {
-    padding-right: 2.5rem;
-  }
-
-  .md\:pr-0 {
-    padding-right: 0px;
-  }
-
-  .md\:pr-2 {
-    padding-right: 0.5rem;
-  }
-
-  .md\:pl-4 {
-    padding-left: 1rem;
+  .md\:px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
   }
 
   .md\:text-base {
@@ -1872,31 +1926,10 @@ select {
 }
 
 @media (min-width: 1024px) {
-  .lg\:mx-4 {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
-  .lg\:mb-6 {
-    margin-bottom: 1.5rem;
-  }
-
-  .lg\:ml-4 {
-    margin-left: 1rem;
-  }
-
   .lg\:w-8\/12 {
     width: 66.666667%;
   }
 
-  .lg\:p-12 {
-    padding: 3rem;
-  }
-
-  .lg\:p-6 {
-    padding: 1.5rem;
-  }
-
   .lg\:p-8 {
     padding: 2rem;
   }
@@ -1915,29 +1948,4 @@ select {
     padding-left: 0px;
     padding-right: 0px;
   }
-
-  .lg\:px-6 {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-
-  .lg\:px-8 {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-
-  .lg\:py-6 {
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem;
-  }
-
-  .lg\:px-4 {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  .lg\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
 }
\ No newline at end of file
diff --git a/views/apps/new.html b/views/apps/new.html
index 59980e22..39395d3c 100644
--- a/views/apps/new.html
+++ b/views/apps/new.html
@@ -15,105 +15,105 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
 {{ 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>
-      <input type="hidden" name="_csrf" value="{{.Csrf}}">
-      <input type="hidden" name="pubkey" value="{{.Pubkey}}">
-      <input type="hidden" name="returnTo" value="{{.ReturnTo}}">
-
-      {{if (eq .Name "")}}
-        <label for="name" class="block font-medium text-gray-900 dark:text-white">
-          Name
-        </label>
-        <input
-          {{ if not (eq .Name "") }}readOnly{{end}}
-          type="text"
-          name="name"
-          value="{{.Name}}"
-          id="name"
-          required
-          autocomplete="off"
-          class="bg-gray-50 border border-gray-300 text-gray-900 focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 text-sm rounded-lg block w-full p-2.5 dark:bg-surface-00dp dark:border-gray-700 dark:placeholder-gray-400 dark:text-white"
-        >
-        <p class="mt-1 mb-6 text-xs text-gray-500 dark:text-gray-400">
-          Name of the app or purpose of the connection
-        </p>
-      {{else}}
-        <input type="hidden" name="name" id="" value="{{.Name}}">
-      {{end}}
-      <input type="hidden" name="RequestMethods" id="request-methods" value={{if .RequestMethods}}{{.RequestMethods}}{{else}}{{"pay_invoice"}}{{end}}>
-      <input type="hidden" name="ExpiresAt" id="expires-at" value="">
-      <input type="hidden" name="MaxAmount" id="max-amount" value="">
-      <input type="hidden" name="BudgetRenewal" id="budget-renewal" value="monthly">
-    </div>
-
-    <div class="flex justify-between items-center mb-2 text-gray-800 dark:text-white">
-      <p class="text-lg font-medium">Authorize the app to</p>
-      <img id="edit" class="dark:invert opacity-80 inline cursor-pointer w-6" src="/public/images/edit.svg"/>
-    </div>
-    <div id="request-method-options" class="mb-6">
-      <ul class="flex flex-col w-full">
-        {{range $key, $value := .RequestMethodHelper}}
-          <li class="w-full {{if eq $key "pay_invoice"}}order-last{{end}} {{if not $value.Checked }} hidden {{end}}">
-            <div class="flex items-center mb-2">
-              <img class="dark:invert opacity-80 w-5 mr-3" src="/public/images/{{ $value.Icon }}.svg"/>
-              <input {{if $value.Checked }} checked {{end}} id="{{$key}}" type="checkbox" value="{{ $key }}" class="hidden w-4 h-4 mr-4 text-purple-700 bg-gray-50 border border-gray-300 rounded focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-surface-00dp dark:border-gray-700 cursor-pointer">
-              <label for="{{$key}}" class="pointer-events-none text-gray-800 dark:text-gray-300 cursor-pointer">{{$value.Description}}</label>
-            </div>
-            {{if eq $key "pay_invoice"}}
-              <div id="budget-allowance" class="pt-1 pb-2 pl-5 ml-2.5 border-l-2 border-l-gray-200 dark:border-l-gray-400 {{if not $value.Checked }}pointer-events-none opacity-30 hidden {{end}}">
-                <p class="text-gray-600 dark:text-gray-300 mb-2 text-sm">Monthly budget</p>
-                <div id="budget-allowance-limits" class="grid grid-cols-6 grid-rows-2 md:grid-rows-1 md:grid-cols-5 gap-2 text-xs text-gray-800 dark:text-neutral-200">
-                  <div data-limit="10000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">10k<br>sats</div>
-                  <div data-limit="50000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">50k<br>sats</div>
-                  <div data-limit="100000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">100k<br>sats</div>
-                  <div data-limit="1000000" class="col-span-3 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1M<br>sats</div>
-                  <div data-limit="0" class="col-span-3 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Unlimited<br>#reckless</b></div>
-                </div>
+  <div class="bg-white dark:bg-surface-02dp rounded-md shadow p-4 md:p-8 ">
+      <div>
+        <input type="hidden" name="_csrf" value="{{.Csrf}}">
+        <input type="hidden" name="pubkey" value="{{.Pubkey}}">
+        <input type="hidden" name="returnTo" value="{{.ReturnTo}}">
+
+        {{if (eq .Name "")}}
+          <label for="name" class="block font-medium text-gray-900 dark:text-white">
+            Name
+          </label>
+          <input
+            {{ if not (eq .Name "") }}readOnly{{end}}
+            type="text"
+            name="name"
+            value="{{.Name}}"
+            id="name"
+            required
+            autocomplete="off"
+            class="bg-gray-50 border border-gray-300 text-gray-900 focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 text-sm rounded-lg block w-full p-2.5 dark:bg-surface-00dp dark:border-gray-700 dark:placeholder-gray-400 dark:text-white"
+          >
+          <p class="mt-1 mb-6 text-xs text-gray-500 dark:text-gray-400">
+            Name of the app or purpose of the connection
+          </p>
+        {{else}}
+          <input type="hidden" name="name" id="" value="{{.Name}}">
+        {{end}}
+        <input type="hidden" name="RequestMethods" id="request-methods" value={{if .RequestMethods}}{{.RequestMethods}}{{else}}{{"pay_invoice"}}{{end}}>
+        <input type="hidden" name="ExpiresAt" id="expires-at" value="">
+        <input type="hidden" name="MaxAmount" id="max-amount" value="">
+        <input type="hidden" name="BudgetRenewal" id="budget-renewal" value="monthly">
+      </div>
+
+      <div class="flex justify-between items-center mb-2 text-gray-800 dark:text-white">
+        <p class="text-lg font-medium">Authorize the app to</p>
+        <img id="edit" class="dark:invert opacity-80 inline cursor-pointer w-6" src="/public/images/edit.svg"/>
+      </div>
+      <div id="request-method-options" class="mb-6">
+        <ul class="flex flex-col w-full">
+          {{range $key, $value := .RequestMethodHelper}}
+            <li class="w-full {{if eq $key "pay_invoice"}}order-last{{end}} {{if not $value.Checked }} hidden {{end}}">
+              <div class="flex items-center mb-2">
+                <img class="dark:invert opacity-80 w-5 mr-3" src="/public/images/{{ $value.Icon }}.svg"/>
+                <input {{if $value.Checked }} checked {{end}} id="{{$key}}" type="checkbox" value="{{ $key }}" class="hidden w-4 h-4 mr-4 text-purple-700 bg-gray-50 border border-gray-300 rounded focus:ring-purple-700 dark:focus:ring-purple-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-surface-00dp dark:border-gray-700 cursor-pointer">
+                <label for="{{$key}}" class="pointer-events-none text-gray-800 dark:text-gray-300 cursor-pointer">{{$value.Description}}</label>
               </div>
-            {{end}}
-          </li>
-        {{ end }}
-      </ul>
-    </div>
-
-    <div id="expiry-toggle" class="cursor-pointer text-sm font-medium text-purple-700  dark:text-purple-500">
-      + Add connection expiry time
-    </div>
-
-    <div id="expiry" class="hidden text-gray-800 dark:text-neutral-200">
-      <p class="text-lg font-medium mb-2">Connection expiry time</p>
-      <div id="expiry-days" class="grid grid-cols-4 gap-2 text-xs">
-        <div data-days="7" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 week</div>
-        <div data-days="30" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 month</div>
-        <div data-days="365" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 year</div>
-        <div data-days="0" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Never</div>
+              {{if eq $key "pay_invoice"}}
+                <div id="budget-allowance" class="pt-1 pb-2 pl-5 ml-2.5 border-l-2 border-l-gray-200 dark:border-l-gray-400 {{if not $value.Checked }}pointer-events-none opacity-30 hidden {{end}}">
+                  <p class="text-gray-600 dark:text-gray-300 mb-2 text-sm">Monthly budget</p>
+                  <div id="budget-allowance-limits" class="grid grid-cols-6 grid-rows-2 md:grid-rows-1 md:grid-cols-5 gap-2 text-xs text-gray-800 dark:text-neutral-200">
+                    <div data-limit="10000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">10k<br>sats</div>
+                    <div data-limit="50000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">50k<br>sats</div>
+                    <div data-limit="100000" class="col-span-2 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">100k<br>sats</div>
+                    <div data-limit="1000000" class="col-span-3 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1M<br>sats</div>
+                    <div data-limit="0" class="col-span-3 md:col-span-1 cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Unlimited<br>#reckless</b></div>
+                  </div>
+                </div>
+              {{end}}
+            </li>
+          {{ end }}
+        </ul>
       </div>
-    </div>    
 
-  {{if .User.Email}}
-    <p class="mt-8 pt-4 border-t border-gray-300 dark:border-gray-700 text-sm text-gray-500 dark:text-neutral-300 text-center">
-      You're logged in as <span class="font-mono">{{.User.Email}}</span><br>
-    </p>
-  {{end}}
-</div>
+      <div id="expiry-toggle" class="cursor-pointer text-sm font-medium text-purple-700  dark:text-purple-500">
+        + Add connection expiry time
+      </div>
 
-<div class="mt-6 flex flex-col sm:flex-row sm:justify-center">
-  {{ if not .Pubkey }}
-    <a
-      href="/apps"
-      class="inline-flex p-4 underline cursor-pointer duration-150 items-center justify-center text-gray-700 dark:text-neutral-300 w-full sm:w-[250px] order-last sm:order-first"
+      <div id="expiry" class="hidden text-gray-800 dark:text-neutral-200">
+        <p class="text-lg font-medium mb-2">Connection expiry time</p>
+        <div id="expiry-days" class="grid grid-cols-4 gap-2 text-xs">
+          <div data-days="7" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 week</div>
+          <div data-days="30" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 month</div>
+          <div data-days="365" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4">1 year</div>
+          <div data-days="0" class="cursor-pointer rounded border-2 border-gray-200 dark:border-gray-400 text-center py-4 border-purple-700 dark:border-purple-300 text-purple-700 dark:text-white bg-purple-100 dark:bg-purple-900">Never</div>
+        </div>
+      </div>    
+
+    {{if .User.Email}}
+      <p class="mt-8 pt-4 border-t border-gray-300 dark:border-gray-700 text-sm text-gray-500 dark:text-neutral-300 text-center">
+        You're logged in as <span class="font-mono">{{.User.Email}}</span><br>
+      </p>
+    {{end}}
+  </div>
+
+  <div class="mt-6 flex flex-col sm:flex-row sm:justify-center">
+    {{ if not .Pubkey }}
+      <a
+        href="/apps"
+        class="inline-flex p-4 underline cursor-pointer duration-150 items-center justify-center text-gray-700 dark:text-neutral-300 w-full sm:w-[250px] order-last sm:order-first"
+      >
+        Cancel
+      </a>
+    {{ end }}
+    <button
+      type="submit"
+      class="inline-flex w-full sm:w-[250px] bg-purple-700 cursor-pointer dark:text-neutral-200 duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition"
     >
-      Cancel
-    </a>
-  {{ end }}
-  <button
-    type="submit"
-    class="inline-flex w-full sm:w-[250px] bg-purple-700 cursor-pointer dark:text-neutral-200 duration-150 focus-visible:ring-2 focus-visible:ring-offset-2 focus:outline-none font-medium hover:bg-purple-900 items-center justify-center px-5 py-3 rounded-md shadow text-white transition"
-  >
-  {{ if .Pubkey }} Connect {{ else }} Next {{ end }}
-  </button>
-</div>
+    {{ if .Pubkey }} Connect {{ else }} Next {{ end }}
+    </button>
+  </div>
 </form>
 
 <script type="text/javascript">
diff --git a/views/apps/show.html b/views/apps/show.html
index fd669c07..14c3f7b9 100644
--- a/views/apps/show.html
+++ b/views/apps/show.html
@@ -2,6 +2,7 @@
 
 
 <h2 class="font-bold text-2xl font-headline dark:text-white">{{.App.Name}}</h2>
+<p class="text-gray-600 dark:text-neutral-400 text-sm">{{.App.Description}}</p>
 <a class="ml-1 mt-1 mb-4 block dark:text-white text-xs" href="/apps">
   &slarr;
   Back to overview
@@ -10,21 +11,32 @@ <h2 class="font-bold text-2xl font-headline dark:text-white">{{.App.Name}}</h2>
 <div class="bg-white rounded-md shadow p-4 lg:p-8 dark:bg-surface-02dp">
   <div class="divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
     <div class="pb-4">
-      <table class="">
+      <table>
         <tr>
           <td class="font-medium dark:text-white">Public Key:</td>
           <td class="text-gray-600 dark:text-neutral-400">{{.App.NostrPubkey}}</td>
         </tr>
         <tr>
           <td class="pr-3 font-medium dark:text-white">Last used:</td>
-          <td class="text-gray-600 dark:text-neutral-400">        {{if gt .EventsCount 0 }}
-          {{.LastEvent.CreatedAt.Format "02 Jan 06 15:04 MST" }}
-        {{else}}
-          never
-        {{end}}</td>
+          <td class="text-gray-600 dark:text-neutral-400">
+            {{if gt .EventsCount 0 }}
+              {{.LastEvent.CreatedAt.Format "02 Jan 06 15:04 MST" }}
+            {{else}}
+              never
+            {{end}}
+          </td>
+        </tr>
+        <tr>
+          <td class="pr-3 font-medium dark:text-white">Expires at:</td>
+          <td class="text-gray-600 dark:text-neutral-400">        
+             {{ if not .ExpiresAt.IsZero}}
+              {{.ExpiresAt}}
+            {{else}}
+              never
+            {{end}}
+          </td>
         </tr>
       </table>
-      <p class="text-sm mt-2">{{.App.Description}}</p>
     </div>
   
     <div class="py-4">
@@ -36,33 +48,21 @@ <h3 class="text-xl font-headline dark:text-white">Permissions</h3>
               {{ . }}
             </li>
           {{end}}
-        {{ if not .ExpiresAt.IsZero}}
-        <li class="mb-2 relative pl-6">
-          <p>
-            <span class="dark:text-white">Expiry:</span> {{.ExpiresAt}}
-          </p>
-        </li>
-        {{end}}
-        {{ if gt .PaySpecificPermission.MaxAmount 0 }}
-        <li class="mb-2 relative pl-6">
-          <p>
-            <span class="dark:text-white">Budget Amount:</span> {{.PaySpecificPermission.MaxAmount}}
-          </p>
-        </li>
-        {{end}}
-        {{ if gt .PaySpecificPermission.MaxAmount 0 }}
-        <li class="mb-2 relative pl-6">
-          <p>
-            <span class="dark:text-white">Current usage:</span> {{.BudgetUsage}} / {{.PaySpecificPermission.MaxAmount}} sats
-          </p>
-        </li>
-        <li class="mb-2 relative pl-6">
-          <p>
-            <span class="dark:text-white">Renews in:</span> {{.RenewsIn}} (set to {{.PaySpecificPermission.BudgetRenewal}})
-          </p>
-        </li>
-        {{ end  }}
       </ul>
+      {{ if gt .PaySpecificPermission.MaxAmount 0 }}
+      <div class="pl-6">
+        <table class="text-gray-600 dark:text-neutral-400">
+          <tr>
+            <td class="font-medium">Budget</td>
+            <td>{{.PaySpecificPermission.MaxAmount}} sats ({{.BudgetUsage}} sats used)</td>
+          </tr>
+          <tr>
+            <td class="font-medium pr-3">Renews in</td>
+            <td>{{.RenewsIn}} (set to {{.PaySpecificPermission.BudgetRenewal}})</td>
+          </tr>
+        </table>
+      </div>
+      {{ end  }}
     </div>
   
     <div class="pt-4">
diff --git a/views/layout.html b/views/layout.html
index b9033018..9b7f25d1 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -11,60 +11,47 @@
   </head>
 
   <body class="bg-gray-50 dark:bg-surface-00dp">
-    <nav
-      class="bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 mb-6"
-      data-controller="navbar"
-    >
-      <div class="container max-w-screen-lg mx-auto">
-        <div
-          class="w-full py-2 flex flex-wrap justify-between items-center h-[56px] px-2 lg:px-0"
-        >
-          <a href="/" class="font-headline text-[20px] dark:text-white">
-            <img
-              alt="NWC Logo"
-              class="w-8 inline"
-              width="128"
-              height="120"
-              src="/public/images/nwc-logo.svg"
-            />
-            <span class="dark:text-white text-lg font-semibold">Nostr Wallet Connect</span>
-          </a>
-          <div class="flex md:flex-1 items-center">
-            <ul
-              class="hidden md:flex flex-wrap pl-10 items-center {{if .User}}mx-auto{{else}}w-full justify-end{{end}}"
-            >
-              <li class="mx-2 flex">
-                <a
-                  class="text-gray-400 pl-5 font-medium hover:text-gray-600 dark:hover:text-gray-300 transition"
-                  rel="nofollow"
-                  href="/apps"
-                >
-                  Connections
-                </a>
-              </li>
-              <li class="mx-2 flex">
-                <a
-                  class="text-gray-400 pl-5 font-medium"
-                  rel="nofollow"
-                  href="/about"
-                >
-                  About
-                </a>
-              </li>
-            </ul>
-            {{if .User}}
-              <a
-                class="text-gray-400 pl-5 font-medium"
-                rel="nofollow"
-                href="/logout"
-              >
-                Logout
-              </a>
-            {{end}}
-          </div>
-        </div>
-      </div>
-    </nav>
+    <div class="bg-white border-b border-gray-200 dark:bg-surface-01dp dark:border-neutral-700 mb-6">
+        <nav class="container max-w-screen-lg mx-auto px-2 py-3">
+            <div class="flex justify-between items-center">
+                <!-- Logo -->
+                <div class="flex items-center">
+                  <a href="/" class="font-headline text-[20px] dark:text-white">
+                    <img
+                      alt="NWC Logo"
+                      class="w-8 inline"
+                      width="128"
+                      height="120"
+                      src="/public/images/nwc-logo.svg"
+                    />
+                    <span class="dark:text-white text-lg font-semibold">Nostr Wallet Connect</span>
+                  </a>
+                </div>
+                <div class="hidden md:flex space-x-4">
+                  <a
+                    class="text-gray-400 font-medium hover:text-gray-600 dark:hover:text-gray-300 transition"
+                    href="/apps"
+                  >
+                    Connections
+                  </a>
+                  <a
+                    class="text-gray-400 pl-5 font-medium"
+                    href="/about"
+                  >
+                    About
+                  </a>
+                </div>
+                {{if .User}}                
+                  <a
+                    class="text-gray-400 pl-5 font-medium"
+                    href="/logout"
+                  >
+                    Logout
+                  </a>
+                {{end}}
+            </div>
+        </nav>
+    </div>
     <main class="container max-w-screen-lg mx-auto px-2 lg:px-0 flex flex-col">
         {{template "body" .}}
     </main>