diff --git a/grab.html b/grab.html
index 4a9def2..6f975f9 100644
--- a/grab.html
+++ b/grab.html
@@ -1,16 +1,78 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Satdress - Name Saved</title>
+    <title>Lightning Address Saved | Satdress</title>
     <meta charset="utf-8" />
     <link rel="icon" type="image/png" href="https://i.imgur.com/4yaPtA2.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/static/style.css" />
+    <meta
+      property="og:title"
+      content="Satdress - Federated Lightning Address Server"
+    />
+    <meta
+      property="og:type"
+      content="website"
+    />
+    <meta
+      property="og:url"
+      content="https://github.com/fiatjaf/satdress"
+    />
+    <meta
+      property="og:description"
+      content="Satdress is a Federated Lightning Address server allowing you to connect Lightning nodes to Lightning Addresses. Satdress follows the Lightning Address protocol and aims to provide an easy-to-deploy Bridge Server."
+    />
+    <meta
+      property="og:image"
+      content="https://i.imgur.com/PsT2uoR.png"
+    />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@fiatjaf" />
+    <meta name="twitter:creator" content="@fiatjaf" />
+    <meta name="twitter:title" content="Satdress - Federated Lightning Address Server" />
+    <meta name="twitter:description" content="Satdress is a Federated Lightning Address server allowing you to connect Lightning nodes to Lightning Addresses. Satdress follows the Lightning Address protocol and aims to provide an easy-to-deploy Bridge Server." />
+    <meta name="twitter:image" content="https://i.imgur.com/PsT2uoR.png" />
   </head>
   <body>
     <main id="main">
-      name saved! this is your secret pin key for this name: {{ pin }}
-      this is the test invoice we've generated: {{ invoice }}
+      <div class="title">Success!</div>
+      <div class="card">
+        <div class="description">
+          <b>username@domain.com</b> is your new Lightning Address!
+        </div>
+        <div class="bold-small">
+          In order to edit the configuration of this address in the future you must save this secret pin:
+        </div>
+        <div class="pin">
+          {{ pin }}
+        </div>
+        <button class="copy-button">Copy Secret PIN</button>
+        <div class="divider"></div>
+        <div class="description">
+          To ensure the connection with your Lightning backend is configured properly, we've created a test invoice that can be seen below.
+        </div>
+        <div class="bold-small">
+          If you do not see an invoice QR code below, something in your setup was incorrect.
+        </div>
+        <div class="qr">
+          {{ invoice }}
+        </div>
+      </div>
+      <div class="resources">
+        <a
+          class="resource-button"
+          target="_blank"
+          href="https://t.me/lnurl">
+          Not working? Ask for help!
+        </a>
+        <a
+          class="resource-button"
+          href="https://github.com/andrerfneves/lightning-address#readme"
+          target="_blank">
+          More information on Lightning Address
+        </a>
+      </div>
     </main>
     <script
       src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.2/vue.global.prod.min.js"
diff --git a/index.html b/index.html
index c21d5e6..e41e762 100644
--- a/index.html
+++ b/index.html
@@ -50,18 +50,14 @@
         <div class="description">Use the form below to connect your own node to a <b>Lightning Address</b>.</div>
         <form action="/grab" method="post">
           <div class="field">
-            <div class="row" style="justify-content: space-between">
+            <div class="row">
               <label for="name">
                 Desired Username
               </label>
-              <label style="float: right">
-                Is New?
-                <input type="checkbox" v-model="isNew">
-              </label>
             </div>
-            <div style="position: relative;">
+            <div class="domain-wrapper">
               <input class="input" name="name" id="name">
-              <span class="suffix" style="position: absolute;">@{{ domain }}</span>
+              <span class="suffix">@ln.fitti.co{{ domain }}</span>
             </div>
           </div>
           <div class="field">
@@ -80,13 +76,13 @@
               <label for="host">
                 Host (IP or Domain + Port)
               </label>
-              <input class="input" name="host" id="host">
+              <input class="input full-width" name="host" id="host">
             </div>
             <div class="field">
               <label for="key">
                 Invoice Macaroon
               </label>
-              <input class="input" name="key" id="key">
+              <input class="input full-width" name="key" id="key">
             </div>
           </div>
           <div v-if="kind == 'sparko' || kind == 'lnbits'">
@@ -94,13 +90,13 @@
               <label for="host">
                 Host (IP or Domain + Port)
               </label>
-              <input class="input" name="host" id="host">
+              <input class="input full-width" name="host" id="host">
             </div>
             <div class="field">
               <label for="key">
                 Key
               </label>
-              <input class="input" name="key" id="key">
+              <input class="input full-width" name="key" id="key">
             </div>
           </div>
           <div v-if="kind == 'lnpay'">
@@ -108,20 +104,27 @@
               <label for="pak">
                 Public Access Key (pak)
               </label>
-              <input class="input" name="pak" id="pak">
+              <input class="input full-width" name="pak" id="pak">
             </div>
             <div class="field">
               <label for="waki">
                 Wallet Invoice Key (waki)
               </label>
-              <input class="input" name="waki" id="waki">
+              <input class="input full-width" name="waki" id="waki">
             </div>
           </div>
+          <div class="field">
+            <label style="float: right">
+              This is a new Lightning Address
+              <input type="checkbox" v-model="isNew">
+            </label>
+          </div>
+          <br />
           <div class="field" v-if="!isNew">
             <label for="pin">
-              Pin
+              Secret PIN
             </label>
-            <input class="input" name="pin" id="pin">
+            <input class="input full-width" name="pin" id="pin">
           </div>
           <button class="submit">Submit</button>
         </form>
diff --git a/static/style.css b/static/style.css
index fc276c6..436bd70 100644
--- a/static/style.css
+++ b/static/style.css
@@ -33,6 +33,17 @@ body {
   letter-spacing: 0.5px;
 }
 
+.bold-small {
+  opacity: 0.7;
+  font-size: 14px;
+  font-weight: 600;
+  max-width: 320px;
+  text-align: center;
+  margin-top: -20px;
+  margin-bottom: 20px;
+  letter-spacing: 0.5px;
+}
+
 .card {
   max-width: 400px;
   background: #fff;
@@ -67,6 +78,26 @@ body {
   background-color: rgba(86, 46, 249, 0.85);
 }
 
+.copy-button {
+  width: 100%;
+  color: #fff;
+  outline: none;
+  font-size: 16px;
+  cursor: pointer;
+  font-weight: 600;
+  margin-top: 20px;
+  padding: 12px 8px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  letter-spacing: 0.5px;
+  border: 1px solid rgba(86, 46, 249, 0.85);
+  background-color: rgba(86, 46, 249, 0.75);
+}
+
+.copy-button:hover {
+  background-color: rgba(86, 46, 249, 0.85);
+}
+
 .field {
   display: flex;
   flex-direction: column;
@@ -86,6 +117,7 @@ label {
 }
 
 .input {
+  width: 50%;
   height: 35px;
   outline: none;
   padding: 0 10px;
@@ -97,15 +129,20 @@ label {
   background-color: #f3f3f3;
 }
 
+.input.full-width {
+  width: calc(100% - 20px);
+}
+
 .suffix {
   height: 35px;
-  display: inline-flex;
+  width: 50%;
   padding: 0 10px;
+  margin-bottom: 25px;
+  display: inline-flex;
   font-size: 16px;
   font-weight: 600;
   align-items: center;
-  word-break: break-all;
-  margin-bottom: 25px;
+  word-break: keep-all;
   letter-spacing: 0.5px;
 }
 
@@ -139,7 +176,7 @@ select {
 
 .resource-button:hover {
   color: #8062fb;
-  background: rgba(42,0,255,0.1);
+  background: rgba(42,0,255,0.07);
 }
 
 .owner {
@@ -168,6 +205,20 @@ select {
   font-weight: 600;
 }
 
+.pin {
+  width: 320px;
+  background: #f3f3f3;
+  padding: 12px 16px;
+  border-radius: 8px;
+  border: 1px solid #999999;
+  overflow-x: scroll;
+}
+
+.domain-wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
 @media screen and (max-width: 500px) {
   body {
     padding: 20px 5px 30px 5px;
@@ -185,4 +236,23 @@ select {
     font-size: 16px;
     padding: 0 10px;
   }
+
+  .domain-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .input {
+    margin-bottom: 5px;
+    width: calc(100% - 25px);
+  }
+
+  .input.full-width {
+    margin-bottom: 25px;
+  }
+
+  .suffix {
+    padding: 0;
+    margin-bottom: 25px;
+  }
 }
