diff --git a/public/css/application.css b/public/css/application.css
index 8c50efc1..280c33d1 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;
 }
@@ -757,6 +768,11 @@ select {
   margin-bottom: 1.5rem;
 }
 
+.my-8 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -825,6 +841,18 @@ select {
   margin-top: 1.25rem;
 }
 
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
+
+.ml-0 {
+  margin-left: 0px;
+}
+
+.ml-4 {
+  margin-left: 1rem;
+}
+
 .block {
   display: block;
 }
@@ -933,6 +961,11 @@ select {
   width: 10rem;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .max-w-lg {
   max-width: 32rem;
 }
@@ -949,6 +982,14 @@ select {
   max-width: 1024px;
 }
 
+.max-w-sm {
+  max-width: 24rem;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
 .table-auto {
   table-layout: auto;
 }
@@ -1003,6 +1044,12 @@ select {
   margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-y-4 > :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));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1039,6 +1086,10 @@ select {
   border-width: 1px;
 }
 
+.border-4 {
+  border-width: 4px;
+}
+
 .border-b {
   border-bottom-width: 1px;
 }
@@ -1076,6 +1127,16 @@ select {
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
 }
 
+.border-orange-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 215 170 / var(--tw-border-opacity));
+}
+
+.border-purple-600 {
+  --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));
@@ -1116,6 +1177,20 @@ select {
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
 
+.bg-gray-900 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
+}
+
+.bg-origin-border {
+  background-origin: border-box;
+}
+
 .fill-current {
   fill: currentColor;
 }
@@ -1209,6 +1284,11 @@ select {
   padding-right: 0px;
 }
 
+.px-3 {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -1474,6 +1554,11 @@ 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;
 }
@@ -1692,6 +1777,10 @@ select {
     margin-left: 0px;
   }
 
+  .md\:ml-4 {
+    margin-left: 1rem;
+  }
+
   .md\:flex {
     display: flex;
   }
@@ -1733,9 +1822,26 @@ select {
   .md\:pr-2 {
     padding-right: 0.5rem;
   }
+
+  .md\:pl-4 {
+    padding-left: 1rem;
+  }
 }
 
 @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%;
   }
@@ -1744,6 +1850,10 @@ select {
     padding: 3rem;
   }
 
+  .lg\:p-6 {
+    padding: 1.5rem;
+  }
+
   .lg\:px-12 {
     padding-left: 3rem;
     padding-right: 3rem;
@@ -1758,4 +1868,29 @@ 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/about.html b/views/about.html
index f5fa9901..21b2dca3 100644
--- a/views/about.html
+++ b/views/about.html
@@ -92,7 +92,7 @@ <h4 class="font-bold text-l font-headline mt-6 dark:text-white">Can I run my own
 </div>
 
 <div
-  class="bg-white rounded-md shadow p-4 lg:p-12 mb-10 dark:bg-surface-02dp"
+  class="bg-white rounded-md shadow p-4 lg:p-12 dark:bg-surface-02dp"
 >
   <h3 class="font-bold text-2xl font-headline mb-4 dark:text-white">For developers</h3>
   <p class="mb-1 leading-relaxed dark:text-neutral-400">
diff --git a/views/apps/create.html b/views/apps/create.html
index ded3341e..df7718f8 100644
--- a/views/apps/create.html
+++ b/views/apps/create.html
@@ -1,7 +1,7 @@
 {{define "body"}}
 
 <div
-  class="bg-white rounded-md shadow p-4 lg:p-12 mb-10 dark:bg-surface-02dp"
+  class="bg-white rounded-md shadow p-4 lg:p-12 dark:bg-surface-02dp"
 >
   <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.Name}}</h2>
 
diff --git a/views/apps/index.html b/views/apps/index.html
index d0917c9e..0e79fc63 100644
--- a/views/apps/index.html
+++ b/views/apps/index.html
@@ -1,6 +1,6 @@
 {{define "body"}}
 
-  <div class="mb-6 flex justify-between items-center">
+  <div class="mb-4 flex justify-between items-center">
     <h2 class="font-bold text-2xl font-headline dark:text-white">Connected apps</h2>
 
     <a
@@ -17,35 +17,33 @@ <h2 class="font-bold text-2xl font-headline dark:text-white">Connected apps</h2>
     </a>
   </div>
 
-  <p class="text-sm mb-4"></p>
-
   <div class="rounded-lg border border-gray-200 dark:border-white/10 overflow-hidden">
     <table
-      class="table-fixed w-full text-sm text-left"
+      class="table-fixed w-full text-sm text-left divide-y dark:divide-white/10"
     >
       <thead
         class="text-xs text-gray-900 uppercase bg-gray-50 dark:bg-surface-08dp dark:text-white rounded-t-lg"
       >
         <tr>
           <th scope="col" class="px-6 py-3 w-full">Name</th>
-          <th scope="col" class="px-6 py-3 w-40">Last Accessed</th>
+          <th scope="col" class="px-6 py-3 w-40 hidden md:table-cell">Last Accessed</th>
           <th scope="col" class="px-6 py-3 w-24"></th>
         </tr>
       </thead>
       <tbody>
         {{if not .Apps}}
-          <tr class="bg-white border-t dark:bg-surface-02dp dark:border-white/10">
+          <tr class="bg-white dark:bg-surface-02dp">
             <td colspan="3" class="px-6 py-16 text-center text-gray-500 dark:text-neutral-400">
               No apps connected yet.
             </td>
           </tr>
         {{else}}
         {{range .Apps}}
-        <tr class="bg-white border-t dark:bg-surface-02dp dark:border-white/10 cursor-pointer hover:bg-purple-50 dark:hover:bg-surface-16dp" onclick="window.location='/apps/{{.NostrPubkey}}'">
+        <tr class="bg-white dark:bg-surface-02dp cursor-pointer hover:bg-purple-50 dark:hover:bg-surface-16dp" onclick="window.location='/apps/{{.NostrPubkey}}'">
           <td class="px-6 py-4 text-gray-500 dark:text-white">
             {{.Name}}
           </td>
-          <td class="px-6 py-4 text-gray-500 dark:text-neutral-400">
+          <td class="px-6 py-4 text-gray-500 dark:text-neutral-400 hidden md:table-cell">
             {{if gt (index $.EventsCounts .ID) 0 }}
               {{(index $.LastEvents .ID).CreatedAt.Format "02 Jan 06 15:04 MST" }}
             {{else}}
diff --git a/views/apps/new.html b/views/apps/new.html
index a9657265..3135f7ba 100644
--- a/views/apps/new.html
+++ b/views/apps/new.html
@@ -8,7 +8,7 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
   {{end}}
 </h2>
 
-  <form method="POST" action="/apps" accept-charset="UTF-8">
+<form method="POST" action="/apps" accept-charset="UTF-8">
   <div class="p-4 dark:bg-surface-02dp bg-white rounded-md shadow">
       <div id="RequestMethodOptions">
         <div class="mb-6">
@@ -162,22 +162,14 @@ <h2 class="font-bold text-2xl font-headline mb-4 dark:text-white">
      
   </div>
 
-<div class="flex flex-col sm:flex-row sm:justify-center mt-5">
-    {{ if not .Pubkey }}
-    <a
-      href="/apps"
-      class="inline-flex 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-50 items-center justify-center px-5 py-3 rounded-md shadow text-gray-700 dark:text-neutral-300 transition w-full sm:w-[250px] sm:mr-8 mt-8 sm:mt-0 order-last sm:order-first"
-    >
-      Cancel
-    </a>
-    {{ end }}
-
+  <div class="flex flex-col sm:flex-row sm:justify-center mt-5">
     <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 Wallet {{ else }} Next {{ end }}
+    {{ if .Pubkey }} Connect Wallet {{ else }} Continue {{ end }} &raquo;
     </button>
+  </div>
 </form>
 
 <script type="text/javascript">
diff --git a/views/apps/show.html b/views/apps/show.html
index 5cc3d781..6c95ac65 100644
--- a/views/apps/show.html
+++ b/views/apps/show.html
@@ -1,21 +1,20 @@
 {{define "body"}}
 
-
 <div class="bg-white rounded-md shadow p-4 lg:p-12 mb-10 dark:bg-surface-02dp">
-  <a class="mb-2 block dark:text-white" href="/apps">
-    &slarr;
-    Back
-  </a>
-
+  
   <div class="divide-y divide-gray-200 dark:divide-white/10 dark:bg-surface-02dp">
-    <div class="py-4">
+    <div class="pb-4">
       <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.App.Name}}</h2>
-      <p class="text-gray-400 text-sm">App connection pubkey: {{.App.NostrPubkey}}</p>
-      <p class="text-gray-400 text-sm">Last accessed:
+      <p class="text-gray-400">
+        <span class="font-medium dark:text-white">Public Key:</span> 
+        {{.App.NostrPubkey}}
+      </p>
+      <p class="text-gray-400">
+        <span class="font-medium dark:text-white">Last accessed:</span> 
         {{if gt .EventsCount 0 }}
-        {{.LastEvent.CreatedAt.Format "02 Jan 06 15:04 MST" }}
+          {{.LastEvent.CreatedAt.Format "02 Jan 06 15:04 MST" }}
         {{else}}
-        never
+          never
         {{end}}
       </p>
       <p class="text-sm">{{.App.Description}}</p>
@@ -23,7 +22,7 @@ <h2 class="font-bold text-2xl font-headline mb-2 dark:text-white">{{.App.Name}}<
   
     <div class="py-4">
       <h3 class="text-xl font-headline dark:text-white">Permissions</h3>
-      <ul class="mt-2 text-sm text-gray-500 dark:text-gray-400">
+      <ul class="mt-2 text-gray-500 dark:text-gray-400">
           {{range .RequestMethods}}
             <li class="mb-2 relative pl-6">
               <span class="absolute left-0 text-green-500">✓</span>
@@ -59,9 +58,9 @@ <h3 class="text-xl font-headline dark:text-white">Permissions</h3>
       </ul>
     </div>
   
-    <div class="py-4">
+    <div class="pt-4">
       <h3 class="text-xl font-headline mb-2 dark:text-white">Danger zone</h3>
-      <p class="text-sm text-gray-500 dark:text-gray-400">
+      <p class="text-gray-500 dark:text-gray-400 mb-4">
         This will revoke the permission and will no longer allow calls from this pubkey.
       </p>
     </div>
diff --git a/views/layout.html b/views/layout.html
index 72717442..302c10bc 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -17,12 +17,12 @@
     >
       <div class="container max-w-screen-lg mx-auto">
         <div
-          class="w-full py-2 flex flex-wrap justify-between items-center h-[56px]"
+          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=""
-              class="inline w-8 ml-1 md:ml-0"
+              alt="NWC Logo"
+              class="w-8 inline"
               width="128"
               height="120"
               src="/public/images/nwc-logo.svg"
@@ -31,11 +31,11 @@
           </a>
           <div class="flex md:flex-1 items-center">
             <ul
-              class="hidden md:flex flex-wrap pl-10 pr-10 {{if .User}}mx-auto{{else}}w-full justify-end{{end}}"
+              class="hidden md:flex flex-wrap pl-10 pr-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 py-2 font-medium hover:text-gray-600 dark:hover:text-gray-300 transition"
+                  class="text-gray-400 pl-5 font-medium hover:text-gray-600 dark:hover:text-gray-300 transition"
                   rel="nofollow"
                   href="/apps"
                 >
@@ -44,7 +44,7 @@
               </li>
               <li class="mx-2 flex">
                 <a
-                  class="text-gray-400 pl-5 py-2 font-medium"
+                  class="text-gray-400 pl-5 font-medium"
                   rel="nofollow"
                   href="/about"
                 >
@@ -53,15 +53,13 @@
               </li>
             </ul>
             {{if .User}}
-            <div class="pr-4 md:pr-2">
               <a
-                class="text-gray-400 pl-5 py-2 font-medium"
+                class="text-gray-400 pl-5 font-medium"
                 rel="nofollow"
                 href="/logout"
               >
                 Logout
               </a>
-            </div>
             {{end}}
           </div>
         </div>
@@ -70,7 +68,7 @@
     <main class="container max-w-screen-lg mx-auto px-2 lg:px-0 flex flex-col">
         {{template "body" .}}
     </main>
-    <footer class="mt-8 text-center">
+    <footer class="my-8 text-center">
       <span class="text-gray-500 dark:text-neutral-300">powered by</span>
       <a href="https://getalby.com">
         <img
@@ -113,4 +111,4 @@
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogo);
   </script>
 </html>
-{{end}}
+{{end}}
\ No newline at end of file