diff --git a/app/services.py b/app/services.py
index 87760645a964019755947da189c7ea97f0afe727..4ae99b55b1349e03cdcf79d9ef244944592b64b9 100644
--- a/app/services.py
+++ b/app/services.py
@@ -348,7 +348,7 @@ class UploadMateriService:
         
     @staticmethod
     def validate_yt_video_url(value):
-        r = requests.get('http://www.youtube.com/watch?v='+value)
+        r = requests.get('https://www.youtube.com/watch?v='+value)
         if "\"playabilityStatus\":{\"status\":\"ERROR\"" in r.text:
             raise ValidationError("Invalid Youtube video ID")
     
diff --git a/app/templates/statistik.html b/app/templates/statistik.html
index 0f2bc4ebbb7bc3cb26f811953c2922558c1d682f..4065f65f4288f6ad040ef795c8f988229f703442 100644
--- a/app/templates/statistik.html
+++ b/app/templates/statistik.html
@@ -2,7 +2,7 @@
 {% load static %}
 
 {% block title %}
-<title>Unggah Materi dari Excel | Digipus</title>
+<title>Statistik | Digipus</title>
 {% endblock %}
 
 {% block stylesheets %}
diff --git a/app/utils/fileManagementUtil.py b/app/utils/fileManagementUtil.py
index a31e0aaad64e0098b073338bc4bb6a67d1de504e..a3961f9438261a374655c4f5aab31e55d0fe243a 100644
--- a/app/utils/fileManagementUtil.py
+++ b/app/utils/fileManagementUtil.py
@@ -4,7 +4,7 @@ import PIL.Image as Image
 def get_random_filename(f_name):
     ext = f_name.split(".")[-1]
     name = ''.join(random.choices(string.ascii_lowercase , k=4))
-    name += hashlib.md5((datetime.datetime.now().isoformat() + f_name).encode()).hexdigest()
+    name += hashlib.md5((datetime.datetime.now().isoformat() + f_name).encode()).hexdigest() # Sensitive
 
     name = name + "." + ext
     return name
diff --git a/app/views.py b/app/views.py
index 111af970028dd6e774194920e61ac9950817f006..cb0be086fc60e5a57b44fb13c1ad36651f930e98 100644
--- a/app/views.py
+++ b/app/views.py
@@ -1,6 +1,7 @@
 import mimetypes
 import os
 from io import BytesIO
+from register.services import MailService
 
 import django
 from decouple import config
@@ -213,12 +214,12 @@ class DetailMateri(TemplateView):
                         f'menambahkan komentar pada materi Anda dengan judul "{materi.title}".' + \
                         f'\nKomentar: "{comment.comment}".\n' + \
                         f'Silahkan akses halaman detail materi untuk berinteraksi lebih lanjut.'
-                    send_mail(
+
+                    MailService.send(
                         subject = 'DIGIPUS: Komentar Baru pada Materi Anda',
                         message = email_content,
                         from_email = getattr(settings, 'EMAIL_HOST_USER'),
                         recipient_list = [materi_uploader.email,],
-                        fail_silently = False,
                     ) 
             elif (review_text != None):
                 review = Review.objects.create(
@@ -387,11 +388,6 @@ class UploadMateriHTML(TemplateView):
     template_name = UNGGAH_HTML
     context = {}
 
-    def get_template_names(self):
-        if self.request.path == UNGGAH_URL:
-            template_name = UNGGAH_HTML
-        return template_name
-
 
 class UploadMateriExcelView(TemplateView):
     template_name = "unggah_excel.html"
diff --git a/register/services.py b/register/services.py
index a668e0426d20c444831f43d430fffe01deddcdc2..da0f9b0255f9803a19aa4d677b44b7e7297dbc8c 100644
--- a/register/services.py
+++ b/register/services.py
@@ -93,9 +93,20 @@ class RegistrationService:
                             Mohon verifikasi email Anda dengan klik pada link berikut: {url}
                         """
 
-        send_mail(
+        MailService.send(
             subject = 'DIGIPUS: Verifikasi Alamat Email',
             message = email_content,
             from_email = getattr(settings, 'EMAIL_HOST_USER'),
-            recipient_list = [user.email],
-            fail_silently = False)
+            recipient_list = [user.email])
+
+class MailService:
+
+    @staticmethod
+    def send(subject, message, from_email, recipient_list):
+        send_mail(
+            subject,
+            message,
+            from_email,
+            recipient_list,
+            fail_silently = False) # Sensitive
+
diff --git a/register/templates/index.html b/register/templates/index.html
index 3870a89255f5a95712e4c74ab58f64d7a119a7e6..10e5205420ec25774c8e6093e7ef26920c295312 100644
--- a/register/templates/index.html
+++ b/register/templates/index.html
@@ -1,137 +1,11 @@
-{% load static %}
+{% extends 'register_base.html' %}
 
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Registrasi Kontributor</title>
-    <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" />
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
-    <!--===============================================================================================-->
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
-    <!--===============================================================================================-->
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet"> 
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-</head>
-<body style="background-color: #666666;">
-    
-    <main>
-        <div class="limiter">
-            <div class="container-login100">
-                <div class="wrap-login100">
-                    <form class="login100-form validate-form" method="POST" action="">
-                        {% csrf_token %}
-                        <div class="login100-form-title p-b-43">
-                            Registrasi Kontributor
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.name }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Nama</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Password is required">
-                            {{ form.instansi }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Instansi/Pekerjaan</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.nik.errors }}
-                            {{ form.nik }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">NIK</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.alamat }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Alamat</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.email.errors }}
-                            {{ form.email }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Email</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.nomor_telpon.errors}}
-                            {{ form.nomor_telpon }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Nomor Telepon</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.password.errors }}
-                            {{ form.password }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Kata Sandi</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.password2 }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Ketik Ulang Kata Sandi</span>
-                        </div>
+{% block title %} Registrasi Kontributor {% endblock %}
+{% block form_title %} Registrasi Kontributor {% endblock %}
 
-            
-                        <div class="container-login100-form-btn">
-                            <button class="login100-form-btn">
-                                Daftar
-                            </button>
-                        </div>
-
-                        <div class="flex-sb-m w-full p-t-3 p-b-32">
-                        
-                            <div>
-                                <a href="/login/" class="txt1">
-                                    Kembali ke halaman login
-                                </a>
-                            </div>
-                        
-                        </div>
-                        
-                        {% if message %}
-                        <div class="text-success txt1" id="registrasi">{{ message }}</div>
-                        <div class="txt1">Kembali ke <a href="/" class="txt1">halaman utama</a></div>
-                        {% endif %}
-
-                    </form>
-                    <div class="login100-more" style="background-image: url('../static/images/bg-03.jpg'); z-index: 0;">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!--===============================================================================================-->
-    <script src="../static/vendor/jquery/jquery-3.2.1.min.js"></script>
-    <!--===============================================================================================-->
-    <script src="../static/vendor/animsition/js/animsition.min.js"></script>
-    <!--===============================================================================================-->
-    <script src="../static/vendor/bootstrap/js/popper.js"></script>
-    <script
-        src="../static/../static/../static/../static/../static/../static/vendor/bootstrap/js/bootstrap.min.js"></script>
-    <!--===============================================================================================-->
-    <script src="../static/../static/../static/../static/../static/vendor/select2/select2.min.js"></script>
-    <!--===============================================================================================-->
-    <script src="../static/../static/../static/../static/vendor/daterangepicker/moment.min.js"></script>
-    <script src="../static/../static/../static/vendor/daterangepicker/daterangepicker.js"></script>
-    <!--===============================================================================================-->
-    <script src="../static/../static/vendor/countdowntime/countdowntime.js"></script>
-    <!--===============================================================================================-->
-    <script src="../static/js/login.js"></script>
-    <script src="../static/js/navbar.js"></script>
-</body>
-</html>
\ No newline at end of file
+{% block footer %} 
+    {% if message %}
+    <div class="text-success txt1" id="registrasi">{{ message }}</div>
+    <div class="txt1">Kembali ke <a href="/" class="txt1">halaman utama</a></div>
+    {% endif %}
+{% endblock %}
diff --git a/register/templates/index_admin.html b/register/templates/index_admin.html
index aaf9eb6e344b81492f8af6b0fdda4da1c5a1053c..8e666d18cfca8720121966501664fcf181b395e1 100644
--- a/register/templates/index_admin.html
+++ b/register/templates/index_admin.html
@@ -1,117 +1,10 @@
-{% load static %}
+{% extends 'register_base.html' %}
 
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Registrasi Admin</title>
-    <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" />
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
-    <!--===============================================================================================-->
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
-    <!--===============================================================================================-->
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet"> 
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-</head>
-<body style="background-color: #666666;">
-    
-    <main>
-        <div class="limiter">
-            {% if message %}
-            <h1>{{ message }}</h1>
-            {% endif %}
-            <div class="container-login100">
-                <div class="wrap-login100">
-                    <form class="login100-form validate-form" method="POST" action="">
-                        {% csrf_token %}
-                        <div class="login100-form-title p-b-43">
-                            Registrasi Admin
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.name }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Nama</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Password is required">
-                            {{ form.instansi }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Instansi/Pekerjaan</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.nik.errors }}
-                            {{ form.nik }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">NIK</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.alamat }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Alamat</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.email.errors }}
-                            {{ form.email }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Email</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.nomor_telpon.errors }}
-                            {{ form.nomor_telpon }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Nomor Telepon</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.password.errors }}
-                            {{ form.password }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Kata Sandi</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.password2 }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Ketik Ulang Kata Sandi</span>
-                        </div>
+{% block title %} Registrasi Admin {% endblock %}
+{% block form_title %} Registrasi Admin {% endblock %}
 
-            
-                        <div class="container-login100-form-btn">
-                            <button class="login100-form-btn">
-                                Daftar
-                            </button>
-                        </div>
-
-                        <div class="flex-sb-m w-full p-t-3 p-b-32">
-                        
-                            <div>
-                                <a href="/login/" class="txt1">
-                                    Kembali ke halaman login
-                                </a>
-                            </div>
-                        
-                        </div>
-
-                    </form>
-                    <div class="login100-more" style="background-image: url('../static/images/bg-03.jpg'); z-index: 0;">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-</body>
-</html>
\ No newline at end of file
+{% block header %} 
+    {% if message %}
+    <h1>{{ message }}</h1>
+    {% endif %}
+{% endblock %}
diff --git a/register/templates/index_umum.html b/register/templates/index_umum.html
index 7aa60dcb4c5066ab2b54dfd42b7b6cb65bc56960..6992a991102cb63fbca0526a770e8f6ef6f4caaf 100644
--- a/register/templates/index_umum.html
+++ b/register/templates/index_umum.html
@@ -1,129 +1,4 @@
-{% load static %}
+{% extends 'register_base.html' %}
 
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Registrasi Umum</title>
-    <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" />
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
-    <!--===============================================================================================-->
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
-    <!--===============================================================================================-->
-    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
-    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
-    <!--===============================================================================================-->
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet"> 
-    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
-</head>
-<body style="background-color: #666666;">
-    
-    <main>
-        <div class="limiter">
-            <div class="container-login100">
-                <div class="wrap-login100">
-                    <form class="login100-form validate-form" method="POST" action="">
-                        {% csrf_token %}
-                        <div class="login100-form-title p-b-43">
-                            Registrasi Umum
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.name }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Nama</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Password is required">
-                            {{ form.instansi }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Instansi/Pekerjaan</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.nik.errors }}
-                            {{ form.nik }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">NIK</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.alamat }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Alamat</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.email.errors }}
-                            {{ form.email }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Email</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.nomor_telpon.errors}}
-                            {{ form.nomor_telpon }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Nomor Telepon</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.password.errors }}
-                            {{ form.password }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Kata Sandi</span>
-                        </div>
-                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
-                            {{ form.password2 }}
-                            <span class="focus-input100"></span>
-                            <span class="label-input100">Ketik Ulang Kata Sandi</span>
-                        </div>
-
-            
-                        <div class="container-login100-form-btn">
-                            <button class="login100-form-btn">
-                                Daftar
-                            </button>
-                        </div>
-
-                        <div class="flex-sb-m w-full p-t-3 p-b-32">
-                        
-                            <div>
-                                <a href="/login/" class="txt1">
-                                    Kembali ke halaman login
-                                </a>
-                            </div>
-                        
-                        </div>
-
-                    </form>
-                    <div class="login100-more" style="background-image: url('{% static 'images/bg-03.jpg' %}'); z-index: 0;">
-                    </div>
-                </div>
-            </div>
-        </div>
-    </main>
-    <!--===============================================================================================-->
-    <script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
-    <!--===============================================================================================-->
-    <script src="{% static 'vendor/animsition/js/animsition.min.js' %}"></script>
-    <!--===============================================================================================-->
-    <script src="{% static 'vendor/bootstrap/js/popper.js' %}"></script>
-    <script
-        src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
-    <!--===============================================================================================-->
-    <script src="{% static 'vendor/select2/select2.min.js' %}"></script>
-    <!--===============================================================================================-->
-    <script src="{% static 'vendor/daterangepicker/moment.min.js' %}"></script>
-    <script src="{% static 'vendor/daterangepicker/daterangepicker.js' %}"></script>
-    <!--===============================================================================================-->
-    <script src="{% static 'vendor/countdowntime/countdowntime.js' %}"></script>
-</body>
-</html>
\ No newline at end of file
+{% block title %} Registrasi Umum {% endblock %}
+{% block form_title %} Registrasi Umum {% endblock %}
diff --git a/register/templates/register_base.html b/register/templates/register_base.html
new file mode 100644
index 0000000000000000000000000000000000000000..7befc8c4076485d785f3929f37ca764cffd90bde
--- /dev/null
+++ b/register/templates/register_base.html
@@ -0,0 +1,133 @@
+{% load static %}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>
+        {% block title %}{% endblock %}
+    </title>
+    <link rel="icon" type="image/png" href="{% static 'images/icons/logo.ico' %}" />
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}">
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'fonts/font-awesome-4.7.0/css/font-awesome.min.css' %}">
+    <!--===============================================================================================-->
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animate/animate.css' %}">
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/css-hamburgers/hamburgers.min.css' %}">
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/animsition/css/animsition.min.css' %}">
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/select2/select2.min.css' %}">
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'vendor/daterangepicker/daterangepicker.css' %}">
+    <!--===============================================================================================-->
+    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/util.css' %}">
+    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">
+    <!--===============================================================================================-->
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital@1&display=swap" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+</head>
+<body style="background-color: #666666;">
+    
+    <main>
+        <div class="limiter">
+
+            {% block header %}{% endblock %}
+
+            <div class="container-login100">
+                <div class="wrap-login100">
+                    <form class="login100-form validate-form" method="POST" action="">
+                        {% csrf_token %}
+                        <div class="login100-form-title p-b-43">
+                            {% block form_title %}{% endblock %}
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.name }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Nama</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Password is required">
+                            {{ form.instansi }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Instansi/Pekerjaan</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.nik.errors }}
+                            {{ form.nik }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">NIK</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.alamat }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Alamat</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.email.errors }}
+                            {{ form.email }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Email</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.nomor_telpon.errors}}
+                            {{ form.nomor_telpon }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Nomor Telepon</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.password.errors }}
+                            {{ form.password }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Kata Sandi</span>
+                        </div>
+                        <div class="wrap-input100 validate-input" data-validate="Valid email is required: ex@abc.xyz">
+                            {{ form.password2 }}
+                            <span class="focus-input100"></span>
+                            <span class="label-input100">Ketik Ulang Kata Sandi</span>
+                        </div>
+
+            
+                        <div class="container-login100-form-btn">
+                            <button class="login100-form-btn">
+                                Daftar
+                            </button>
+                        </div>
+
+                        <div class="flex-sb-m w-full p-t-3 p-b-32">
+                            <div>
+                                <a href="/login/" class="txt1">
+                                    Kembali ke halaman login
+                                </a>
+                            </div>
+                        </div>
+
+                        {% block footer %}{% endblock %}
+
+                    </form>
+                    <div class="login100-more" style="background-image: url('{% static 'images/bg-03.jpg' %}'); z-index: 0;">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!--===============================================================================================-->
+    <script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
+    <!--===============================================================================================-->
+    <script src="{% static 'vendor/animsition/js/animsition.min.js' %}"></script>
+    <!--===============================================================================================-->
+    <script src="{% static 'vendor/bootstrap/js/popper.js' %}"></script>
+    <script src="{% static 'vendor/bootstrap/js/bootstrap.min.js' %}"></script>
+    <!--===============================================================================================-->
+    <script src="{% static 'vendor/select2/select2.min.js' %}"></script>
+    <!--===============================================================================================-->
+    <script src="{% static 'vendor/daterangepicker/moment.min.js' %}"></script>
+    <script src="{% static 'vendor/daterangepicker/daterangepicker.js' %}"></script>
+    <!--===============================================================================================-->
+    <script src="{% static 'vendor/countdowntime/countdowntime.js' %}"></script>
+</body>
+</html>
\ No newline at end of file