diff --git a/public/css/main.css b/public/css/main.css
index 02a286f..ee11ab4 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -7602,7 +7602,6 @@ html, body {
   width: 100%;
   background-color: #edf2f7;
   border-width: 1px;
-  border-color: #edf2f7;
   border-radius: 0.25rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -7624,9 +7623,8 @@ html, body {
 }
 
 .form .form-grid .form-submit {
-  color: #fff;
-  font-weight: 700;
-  background-color: #7f9cf5;
+  background-color: #cbd5e0;
+  border-width: 1px;
   border-radius: 0.25rem;
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
@@ -7638,11 +7636,31 @@ html, body {
 }
 
 .form .form-grid .form-submit:hover {
-  background-color: #667eea;
+  border-color: #a0aec0;
+  background-color: #fff;
 }
 
 .form .form-grid .form-submit:focus {
   outline: 0;
+}
+
+.print-button {
+  font-size: 0.75rem;
+  color: #fff;
+  background-color: #7f9cf5;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.print-button:hover {
+  background-color: #667eea;
+}
+
+.print-button:focus {
+  outline: 0;
   background-color: #5a67d8;
 }
 
@@ -7672,7 +7690,7 @@ html, body {
 }
 
 @media print {
-  .container > .header, .container > .form {
+  .container > .header, .container > .form, .print-button {
     display: none;
   }
 
diff --git a/resources/sass/main.scss b/resources/sass/main.scss
index a04f04a..e250523 100644
--- a/resources/sass/main.scss
+++ b/resources/sass/main.scss
@@ -44,7 +44,7 @@ html, body {
             }
 
             .form-input {
-                @apply appearance-none block w-full bg-gray-200 border border-gray-200 rounded py-3 px-4 leading-tight;
+                @apply appearance-none block w-full bg-gray-200 border rounded py-3 px-4 leading-tight;
 
                 &:focus {
                     @apply outline-none bg-white border-gray-500;
@@ -57,19 +57,31 @@ html, body {
         }
 
         .form-submit {
-            @apply text-white font-bold bg-indigo-400 rounded py-3 px-4 leading-tight uppercase self-center;
+            @apply bg-gray-400 border rounded py-3 px-4 leading-tight uppercase self-center;
 
             &:hover {
-                @apply bg-indigo-500;
+                @apply border-gray-500 bg-white;
             }
 
             &:focus {
-                @apply outline-none bg-indigo-600;
+                @apply outline-none;
             }
         }
     }
 }
 
+.print-button {
+    @apply text-xs text-white bg-indigo-400 px-2 py-1 rounded;
+
+    &:hover {
+        @apply bg-indigo-500;
+    }
+    
+    &:focus {
+        @apply outline-none bg-indigo-600
+    }
+}
+
 .letter {
     @apply mx-auto p-1;
     max-width: 66ch;
@@ -92,7 +104,7 @@ html, body {
 }
 
 @screen print {
-    .container > .header, .container > .form {
+    .container > .header, .container > .form, .print-button {
         @apply hidden;
     }
 
diff --git a/resources/views/main.blade.php b/resources/views/main.blade.php
index ba08a98..704813d 100644
--- a/resources/views/main.blade.php
+++ b/resources/views/main.blade.php
@@ -10,7 +10,8 @@
         <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
 
         <!-- Styles -->
-        <link rel="stylesheet" href="css/main.css"> </head>
+        <link rel="stylesheet" href="css/main.css">
+    </head>
     <body>
         <div class="container">
             <div class="header">
@@ -18,23 +19,26 @@
                 <span>Silahkan masukkan Nama Lengkap dan NISN kamu di bawah ini:</span>
             </div>
 
-            <form class="form">
+            <form class="form" onsubmit="showLetter()">
                 <div class="form-grid">
                     <div class="form-group">
-                        <label class="form-label">Nama Lengkap</label>
-                        <input class="form-input input-text" type="text">
+                        <label class="form-label" for="input-name">Nama Lengkap</label>
+                        <input class="form-input input-text" id="input-name" type="text" autocomplete="off" required>
                         <p class="input-helper">Nama lengkap sesuai dengan absensi.</p>
                     </div>
                     <div class="form-group">
-                        <label class="form-label">NISN</label>
-                        <input class="form-input input-text" type="text">
+                        <label class="form-label" for="input-nisn">NISN</label>
+                        <input class="form-input input-text"id="input-nisn"  type="text" autocomplete="off" required>
                         <p class="input-helper">Nomor Induk Siswa Nasional</p>
                     </div>
                     <button type="submit" class="form-submit">Lihat</button>
                 </div>
             </form>
 
-            <div class="letter">
+            <div class="letter hidden">
+                <button type="button" class="print-button" onclick="window.print()">
+                    &#9113; Print
+                </button>
                 <div class="letter__header">
                     <p><strong>SMK BHAKTI ANINDYA</strong></p>
                     <p>Jl. K.S. Tubun No. 11, Karawaci, Tangerang</p>
@@ -73,5 +77,7 @@
                 </div>
             </div>
         </div>
+
+        <script src="js/app.js"></script>
     </body>
 </html>
