diff --git a/administration/templates/administration/base_administrasi.html b/administration/templates/administration/base_administrasi.html
index 4e8acf203c9f51e8a259f7a65a475bc57450ab56..e92e0277c2ab9096266b43ea3670c0fb41e39ec0 100644
--- a/administration/templates/administration/base_administrasi.html
+++ b/administration/templates/administration/base_administrasi.html
@@ -68,7 +68,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 
diff --git a/administration/templates/administration/base_administrasi2.html b/administration/templates/administration/base_administrasi2.html
index cf48a013a723adf31ceaea1039ed8c1e76aae3da..a731025ecefb52cbc43d5499d45074907923029c 100644
--- a/administration/templates/administration/base_administrasi2.html
+++ b/administration/templates/administration/base_administrasi2.html
@@ -4,6 +4,7 @@
 <html lang="en">
 <!-- Static assets -->
 <head>
+    <title>Digipus</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -67,7 +68,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 
diff --git a/administration/templates/administration/data_statistik.html b/administration/templates/administration/data_statistik.html
index 2aad8e549f34095ff42972a7c2c5ad91691fa478..17df72575d35c2a457fe0ae1500c4af991e0abdd 100644
--- a/administration/templates/administration/data_statistik.html
+++ b/administration/templates/administration/data_statistik.html
@@ -28,7 +28,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.0}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-eye" aria-hidden="true"></i>
+                        <em class="fas fa-eye" aria-hidden="true"></em>
                     </div>
                 </div>
             </div>
@@ -45,7 +45,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.1}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-download" aria-hidden="true"></i>
+                        <em class="fas fa-download" aria-hidden="true"></em>
                     </div>
                 </div>
             </div>
@@ -62,7 +62,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.2}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-thumbs-up" aria-hidden="true"></i>
+                        <em class="fas fa-thumbs-up" aria-hidden="true"></em>
                     </div>
                 </div>
             </div>
@@ -79,7 +79,7 @@
                         <div class="h5 mb-0 font-weight-bold text-gray-800">{{chart_data.total.3}}</div>
                     </div>
                     <div class="col-auto">
-                        <i class="fas fa-comments fa-2x text-gray-300"></i>
+                        <em class="fas fa-comments fa-2x text-gray-300"></em>
                     </div>
                 </div>
             </div>
@@ -100,7 +100,7 @@
                 <!-- <div class="dropdown no-arrow">
                     <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="false">
-                        <i class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></i>
+                        <em class="fas fa-ellipsis-v fa-sm fa-fw text-gray-400"></em>
                     </a>
                     <div class="dropdown-menu dropdown-menu-right shadow animated--fade-in"
                         aria-labelledby="dropdownMenuLink">
diff --git a/administration/templates/detail_admin.html b/administration/templates/detail_admin.html
index 2f86f7006c304af25c06382f4433ed408ffabf14..5105c7706cce8755a67c0c411a24579ef161d9db 100644
--- a/administration/templates/detail_admin.html
+++ b/administration/templates/detail_admin.html
@@ -19,31 +19,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
       <a class="btn btn-primary btn-admin" href="/administration/kelola-admin/">Kembali ke Kelola Admin</a>
   </div>
 </div>
diff --git a/administration/templates/detail_kontri_admin.html b/administration/templates/detail_kontri_admin.html
index fb425130b9478304df78d175dcc1dccec0946072..ef4ff27d8bb210b497fc24fa18160e3ae3273d81 100644
--- a/administration/templates/detail_kontri_admin.html
+++ b/administration/templates/detail_kontri_admin.html
@@ -18,31 +18,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
       <a class="btn btn-primary btn-admin" href="/administration/kelola-kontributor/">Kembali ke Kelola Kontributor</a>
   </div>
 </div>
diff --git a/administration/templates/detail_verif.html b/administration/templates/detail_verif.html
index 18b1751c9bec8649249ece282e2e92f14117303d..a5755d3980c9120fdf5c6eec648162d29205b6df 100644
--- a/administration/templates/detail_verif.html
+++ b/administration/templates/detail_verif.html
@@ -8,7 +8,7 @@ Pratinjau Materi
 
     <!-- Sidebar Toggle (Topbar) -->
     <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-        <i class="fa fa-bars"></i>
+        <em class="fa fa-bars"></em>
     </button>
 
     <div class="sidebar-brand-text mx-3">Pratinjau Materi</div>
@@ -53,7 +53,7 @@ Pratinjau Materi
                 <div class="info-wrapper">
                     <div class="info" id="1">
                         <dt class="col col-4">
-                            <p class="info-name">Verifikatur</p>
+                            <p class="info-name"><strong>Verifikatur</strong></p>
                         </dt>
                         <dd>
                             <p class="info-content">{{verification_report.user.name}}</p>
@@ -61,7 +61,7 @@ Pratinjau Materi
                     </div>
                     <div class="info" id="1">
                         <dt class="col col-4">
-                            <p class="info-name">Waktu Verifikasi</p>
+                            <p class="info-name"><strong>Waktu Verifikasi</strong></p>
                         </dt>
                         <dd>
                             <p class="info-content">{{verification_report.timestamp}}</p>
@@ -69,7 +69,7 @@ Pratinjau Materi
                     </div>
                     <div class="info" id="1">
                         <dt class="col col-4">
-                            <p class="info-name">Status Materi</p>
+                            <p class="info-name"><strong>Status Materi</strong></p>
                         </dt>
                         <dd>
                             <p class="info-content">{{verification_report.status}}</p>
diff --git a/administration/templates/kelola_admin.html b/administration/templates/kelola_admin.html
index 1af6884bf2e244ff5cc323b2f94dfce561f236b9..dd020c9771ca6b73161182317499809216bf6e16 100644
--- a/administration/templates/kelola_admin.html
+++ b/administration/templates/kelola_admin.html
@@ -15,7 +15,7 @@
   <div class="card-header py-3">
     <div class="d-flex">
       <div class="mr-auto p-2">
-        <h6 class="m-0 font-weight-bold text-primary">Tabel Daftar Admin</h6>
+        <h6 id="table-description" class="m-0 font-weight-bold text-primary">Tabel Daftar Admin</h6>
       </div>
       <div class="p-2">
         <a href="/administration/kelola-admin/tambah/" class="accept-button button-decoration button-header">Buat Akun Baru</a>
@@ -24,7 +24,7 @@
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTable">
         <thead>
           <tr>
             <th scope="col">Nama</th>
diff --git a/administration/templates/kelola_kontributor.html b/administration/templates/kelola_kontributor.html
index 0fdfe526aeb6b32b9e3c57643beb2472a965a75f..21b94fc5bc769c604ed0e78dddcc854b05f8dc8b 100644
--- a/administration/templates/kelola_kontributor.html
+++ b/administration/templates/kelola_kontributor.html
@@ -13,25 +13,25 @@
 <!-- DataTales Example -->
 <div class="card shadow mb-4">
   <div class="card-header py-3">
-    <h6 class="m-0 font-weight-bold text-primary">Tabel Daftar Kontributor</h6>
+    <h6 id="table-description" class="m-0 font-weight-bold text-primary">Tabel Daftar Kontributor</h6>
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
         <thead>
           <tr>
-            <th>Nama</th>
-            <th>NIK</th>
-            <th>Instansi</th>
-            <th>Detail</th>
+            <th scope="col">Nama</th>
+            <th scope="col">NIK</th>
+            <th scope="col">Instansi</th>
+            <th scope="col">Detail</th>
           </tr>
         </thead>
         <tfoot>
           <tr>
-            <th>Nama</th>
-            <th>NIK</th>
-            <th>Instansi</th>
-            <th>Detail</th>
+            <th scope="col">Nama</th>
+            <th scope="col">NIK</th>
+            <th scope="col">Instansi</th>
+            <th scope="col">Detail</th>
           </tr>
           </tr>
         </tfoot>
diff --git a/administration/templates/laporan_materi.html b/administration/templates/laporan_materi.html
index 5b92f17dce51124d0ff32ba034ac282131d2954e..33e489890c0eaa9979f3fd06567f559e8df7ebdb 100644
--- a/administration/templates/laporan_materi.html
+++ b/administration/templates/laporan_materi.html
@@ -76,11 +76,11 @@
 </div>
 <div class="card shadow mb-4">
   <div class="card-header py-3">
-    <h6 class="m-0 font-weight-bold text-primary" id="titleTabelPending">Materi yang Diblokir</h6>
+    <h6 id="table-description" class="m-0 font-weight-bold text-primary" id="titleTabelPending">Materi yang Diblokir</h6>
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTablePending" aria-describedby="titleTabelPending">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTablePending" aria-describedby="titleTabelPending">
         {% if not materi_diblokir %}
           Tidak ada materi yang diblokir
         {% else %}
diff --git a/administration/templates/registrasi_admin.html b/administration/templates/registrasi_admin.html
index 7d3a0151bb82231d953cbcbc96034ec44a3a8710..8da8fc6f3271dd7dd02a0e2374c1cfb3b4d50499 100644
--- a/administration/templates/registrasi_admin.html
+++ b/administration/templates/registrasi_admin.html
@@ -103,7 +103,7 @@
 
           <!-- Sidebar Toggle (Topbar) -->
           <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-            <i class="fa fa-bars"></i>
+            <em class="fa fa-bars"></em>
           </button>
 
           <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
@@ -257,7 +257,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
diff --git a/administration/templates/setting_verifikasi.html b/administration/templates/setting_verifikasi.html
index f21254ef032ac3fdae82641d1827a99e6c5403fd..aa5fbdf0f5462035f49f610aca5144a48c29d88c 100644
--- a/administration/templates/setting_verifikasi.html
+++ b/administration/templates/setting_verifikasi.html
@@ -112,7 +112,7 @@
 
           <!-- Sidebar Toggle (Topbar) -->
           <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-            <i class="fa fa-bars"></i>
+            <em class="fa fa-bars"></em>
           </button>
 
           <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
@@ -172,7 +172,7 @@
                 <label>Deskripsi &nbsp;:</label>{{ form.description }}<br>
                 <br>
                 <div class="row">
-                  <button class="primary_btn save" style="border-radius:20px;" type="submit"><i class="far fa-save"></i>
+                  <button class="primary_btn save" style="border-radius:20px;" type="submit"><em class="far fa-save"></em>
                     Simpan</button>
                 </div>
               </form>
@@ -182,24 +182,24 @@
           <!-- DataTales Example -->
           <div class="card shadow mb-4">
             <div class="card-header py-3">
-              <h6 class="m-0 font-weight-bold text-primary">Point Verifikasi Materi</h6>
+              <h6 id="table-description" class="m-0 font-weight-bold text-primary">Point Verifikasi Materi</h6>
             </div>
             <div class="card-body">
               <div class="table-responsive">
-                <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+                <table aria-describedby="table-description" class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                   <thead>
                     <tr>
-                      <th>Judul Verifikasi</th>
-                      <th>Deskripsi</th>
-                      <th></th>
+                      <th scope="col">Judul Verifikasi</th>
+                      <th scope="col">Deskripsi</th>
+                      <th scope="col"></th>
                     </tr>
                   </thead>
                   <tbody>
                     {% for item in verification_settings %}
                     <tr>
-                      <th>{{item.title}}</th>
-                      <th>{{item.description}}</th>
-                      <th> </th>
+                      <th scope="col">{{item.title}}</th>
+                      <th scope="col">{{item.description}}</th>
+                      <th scope="col"> </th>
                     </tr>
                     {% endfor %}
                   </tbody>
@@ -232,7 +232,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
diff --git a/administration/templates/settings.html b/administration/templates/settings.html
index 6381a4e088abdaa87f41c4d531d01183de455015..3f43715589699c8aa4ee113e4989679e8f5b29cd 100644
--- a/administration/templates/settings.html
+++ b/administration/templates/settings.html
@@ -281,9 +281,9 @@
 										<tbody>
 											{% for item in items %}
 											<tr>
-												<th>{{item.title}} {{item.name}}</th>
-												<th>{{item.description}}</th>
-												<th class="verif-buttons">
+												<th scope="col">{{item.title}} {{item.name}}</th>
+												<th scope="col">{{item.description}}</th>
+												<th scope="col" class="verif-buttons">
 													{% if item.name is None %}
 													<a
 														href="/administration/setting/verification/{{ item.id }}/edit"
@@ -377,9 +377,9 @@
 										<tbody>
 											{% for item in items_archived %}
 											<tr>
-												<th>{{item.title}} {{item.name}}</th>
-												<th>{{item.description}}</th>
-												<th>{{item.archived_by.name}}</th>
+												<th scope="col">{{item.title}} {{item.name}}</th>
+												<th scope="col">{{item.description}}</th>
+												<th scope="col">{{item.archived_by.name}}</th>
 											</tr>
 											{% endfor %}
 										</tbody>
diff --git a/app/templates/app/base_admin.html b/app/templates/app/base_admin.html
index d8b93163621bbb7494764c66f0216ff1217ef447..73465184f28526320515eb1de9dda37b81dc887b 100644
--- a/app/templates/app/base_admin.html
+++ b/app/templates/app/base_admin.html
@@ -4,7 +4,7 @@
 <html lang="en">
 
 <head>
-
+  <title>Digipus</title>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -75,7 +75,7 @@
         <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
             <!-- Sidebar Toggle (Topbar) -->
             <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-              <i class="fa fa-bars"></i>
+              <em class="fa fa-bars"></em>
             </button>
             <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
             <!-- Topbar Navbar -->
@@ -139,7 +139,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
diff --git a/app/templates/app/base_dashboard.html b/app/templates/app/base_dashboard.html
index 0d5b034e451e352d040882b9d41e5dce595088c6..b8281931e7b8fae10fe76dd0477fee586206fcb2 100644
--- a/app/templates/app/base_dashboard.html
+++ b/app/templates/app/base_dashboard.html
@@ -4,6 +4,7 @@
 <html lang="en">
 
 <head>
+    <title>Digipus</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -64,7 +65,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 </body>
diff --git a/app/templates/app/base_profile.html b/app/templates/app/base_profile.html
index e21cb34dcfe7c051f68daedbb888b84c7ea22b49..6dc27646954f8d5b97e55725285ec708edfe6233 100644
--- a/app/templates/app/base_profile.html
+++ b/app/templates/app/base_profile.html
@@ -4,7 +4,7 @@
 <html lang="en">
 
 <head>
-
+    <title>Digipus</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -66,7 +66,7 @@
 
     <!-- Scroll to Top Button-->
     <a class="scroll-to-top rounded" href="#page-top">
-        <i class="fas fa-angle-up"></i>
+        <em class="fas fa-angle-up"></em>
     </a>
 
 </body>
diff --git a/app/templates/app/detail_materi.html b/app/templates/app/detail_materi.html
index e15f5f9fa4cda0a0c915adec2200c784710696fb..302f652d073bd856f2866ae8154b778456f7ad29 100644
--- a/app/templates/app/detail_materi.html
+++ b/app/templates/app/detail_materi.html
@@ -284,7 +284,7 @@
                     {% else %}
                     <span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highligh"></span>
                     {% endif %}
-                    <p class="p-1 bd-highligh m-0"><b>{{comment.user.name}}</b></p>
+                    <p class="p-1 bd-highligh m-0"><strong>{{comment.user.name}}</strong></p>
                     <p class="p-1 bd-highligh m-0">•</p>
                     <p class="timestamp p-1 bd-highligh m-0 text-muted">
                         {{ comment.timestamp|naturaltime }}
diff --git a/app/templates/app/includes/navigation.html b/app/templates/app/includes/navigation.html
index 73360a92eab1c0560b32aa5e508c9a10ed194575..37988b70b41417630adc6d1376da77a8ee73f9d6 100644
--- a/app/templates/app/includes/navigation.html
+++ b/app/templates/app/includes/navigation.html
@@ -2,7 +2,7 @@
 
     <!-- Sidebar Toggle (Topbar) -->
     <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
-        <i class="fa fa-bars"></i>
+        <em class="fa fa-bars"></em>
     </button>
 
     <div class="sidebar-brand-text mx-3">Diskominfo Kota Depok</div>
diff --git a/app/templates/app/katalog_materi.html b/app/templates/app/katalog_materi.html
index 7881668911c22bb8ecf74a86b4ec1cde05790204..0cceeb7bc644d6f56f459690a658b7c11845b5dd 100644
--- a/app/templates/app/katalog_materi.html
+++ b/app/templates/app/katalog_materi.html
@@ -94,11 +94,13 @@
                             <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
                                 data-parent="#accordionExample">
                                 <div class="card-body">
-                                    {% for itemKategori in kategori_list %}
-                                    <li>
-                                        <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
-                                    </li>
-                                    {% endfor %}
+                                    <ul>
+                                        {% for itemKategori in kategori_list %}
+                                        <li>
+                                            <a href="?kategori={{itemKategori.pk}}">{{itemKategori.name}}</a>
+                                        </li>
+                                        {% endfor %}
+                                    </ul>
                                 </div>
                             </div>
                         </div>
@@ -115,27 +117,29 @@
                             <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo"
                                 data-parent="#accordionExample">
                                 <div class="card-body">
-                                    <li>
-                                        <a href="?sort=terbaru">terbaru</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=terlama">terlama</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=terpopuler">terpopuler</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=judul">judul</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=penulis">penulis</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=pengunggah">pengunggah</a>
-                                    </li>
-                                    <li>
-                                        <a href="?sort=jumlah_unduh">jumlah unduh</a>
-                                    </li>
+                                    <ul>
+                                        <li>
+                                            <a href="?sort=terbaru">terbaru</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=terlama">terlama</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=terpopuler">terpopuler</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=judul">judul</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=penulis">penulis</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=pengunggah">pengunggah</a>
+                                        </li>
+                                        <li>
+                                            <a href="?sort=jumlah_unduh">jumlah unduh</a>
+                                        </li>
+                                    </ul>
                                 </div>
                             </div>
                         </div>
diff --git a/app/templates/comments.html b/app/templates/comments.html
index 96f4a9c097f101ebab3d74c877ad6d92c2566ba8..6a1180d2a5f6b61643dd13a45577ddf206b00af3 100644
--- a/app/templates/comments.html
+++ b/app/templates/comments.html
@@ -48,7 +48,7 @@
 				<span style="background-color: #{{comment.profile}}" class="profile p-1 bd-highlight"></span>
 				{% endif %}
 				<p class="p-1 bd-highligh m-0">
-					<b>{{comment.user.name}}</b>
+					<strong>{{comment.user.name}}</strong>
 				</p>
 				<p class="p-1 bd-highligh m-0">•</p>
 				<p class="timestamp p-1 bd-highligh m-0">
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 95ec1ee58a534f65270862f791cd32f71eaecce2..86fa3fdc3c97f2b583c864c1effe150709e5c9bf 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -13,25 +13,25 @@
 <!-- DataTales Example -->
 <div class="card shadow mb-4">
   <div class="card-header py-3">
-    <h6 class="m-0 font-weight-bold text-primary">Tabel Riwayat Unggah</h6>
+    <h6 id="table-description" class="m-0 font-weight-bold text-primary">Tabel Riwayat Unggah</h6>
   </div>
   <div class="card-body">
     <div class="table-responsive">
-      <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
+      <table aria-describedby="table-description" class="table table-bordered" id="dataTable">
         <thead>
           <tr>
-            <th>Judul Materi</th>
-            <th>Pembuat Materi</th>
-            <th>Status</th>
-            <th>Detail</th>
+            <th scope="col">Judul Materi</th>
+            <th scope="col">Pembuat Materi</th>
+            <th scope="col">Status</th>
+            <th scope="col">Detail</th>
           </tr>
         </thead>
         <tfoot>
           <tr>
-            <th>Judul Materi</th>
-            <th>Pembuat Materi</th>
-            <th>Status</th>
-            <th>Detail</th>
+            <th scope="col">Judul Materi</th>
+            <th scope="col">Pembuat Materi</th>
+            <th scope="col">Status</th>
+            <th scope="col">Detail</th>
           </tr>
         </tfoot>
         <tbody>
diff --git a/app/templates/profil-admin.html b/app/templates/profil-admin.html
index 58ad43884d115f874cf1abba499d67572341b5fa..a2a566f12071edfd2907fe1ff2b3c5380f051ef6 100644
--- a/app/templates/profil-admin.html
+++ b/app/templates/profil-admin.html
@@ -18,31 +18,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
   </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/profil.html b/app/templates/profil.html
index 13ad5403e9873c1a8efaf626397e322c35bdea06..3145ab41746a6ff532e8fe8ef2fc7dcee333370d 100644
--- a/app/templates/profil.html
+++ b/app/templates/profil.html
@@ -22,31 +22,46 @@
       <h4>{{ user.email }}</h4>
       <h4>{{ user.biography }}</h4>
       <div class="profile-margin"></div>
-      <table>
-          <tr>
-              <td class="profile-data">Instansi</td>
-              <td>{{ user.instansi }}</td>
-          </tr>
-         
-              <td class="profile-data">LinkedIn</td>
-              <td><a href="https://linkedin.com">{{ user.linkedin }}</a></td>
-          </tr>
-          
-          <tr>
-              <td class="profile-data">Facebook</td>
-              <td><a href="https://facebook.com">{{ user.facebook }}</a></td>
-          </tr>
-         
-          <tr>
-              <td class="profile-data">Twitter</td>
-              <td><a href="https://twitter.com">{{ user.twitter }}</a></td>
-          </tr>
-
-          <tr>
-              <td class="profile-data">Instagram</td>
-              <td><a href="https://instagram.com">{{ user.instagram }}</a></td>
-          </tr>
-      </table>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            instansi
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            {{user.instansi}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            LinkedIn
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://linkedin.com">{{ user.linkedin }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Facebook
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">  
+            <a href="https://facebook.com">{{ user.facebook }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Twitter
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://twitter.com">{{ user.twitter }}</a>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-6 my-auto" style="font-size: 2rem;">
+            Instagram
+        </div>
+        <div class="col-md-6 my-auto" style="font-size: 1.2rem;">
+            <a href="https://instagram.com">{{ user.instagram }}</a>
+        </div>
+      </div>
   </div>
 </div>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/sukses_admin.html b/app/templates/sukses_admin.html
index 313d93ce805937c12d3728278727de36237fe194..40692fdb1abd598551b99f2a644c22352e9f63d1 100644
--- a/app/templates/sukses_admin.html
+++ b/app/templates/sukses_admin.html
@@ -73,7 +73,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->
diff --git a/app/templates/sukses_kontri.html b/app/templates/sukses_kontri.html
index af4ee3bf90ee2b19102a8717da5b519c5bcab9ba..0aaf4a33bbe8bbe7cb3560ae4ed7ffca5a7178fe 100644
--- a/app/templates/sukses_kontri.html
+++ b/app/templates/sukses_kontri.html
@@ -79,7 +79,7 @@
 
   <!-- Scroll to Top Button-->
   <a class="scroll-to-top rounded" href="#page-top">
-    <i class="fas fa-angle-up"></i>
+    <em class="fas fa-angle-up"></em>
   </a>
 
   <!-- Bootstrap core JavaScript-->