diff --git a/backend/acara_donor/admin.py b/backend/acara_donor/admin.py
index c953769a6ef1a352369125ee02ed53cf2ed8d492..d583317f1ead724551ad46643c2d3327094582b6 100644
--- a/backend/acara_donor/admin.py
+++ b/backend/acara_donor/admin.py
@@ -1,38 +1,19 @@
-from django.http import HttpResponse
 from django.contrib import admin
+from django.conf import settings
+from django.utils.timezone import localtime
+from django.utils.html import mark_safe
 from acara_donor.models import AcaraDonor
+from donor.models import JadwalDonor
 from acara_donor.filters import AcaraDonorFilter
 
 
-def download_acara_donor(modeladmin, request, queryset):
-    import pandas as pd
-    from django_pandas.io import read_frame
-
-    response = HttpResponse(content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
-    response['Content-Disposition'] = f'attachment; filename={modeladmin.model._meta}.xlsx'
-
-    df = read_frame(queryset)
-    df['waktu_donor'] = df['waktu_donor'].astype(str).str[:-6]  # Strip tzinfo
-
-    writer = pd.ExcelWriter(response, engine='xlsxwriter')
-
-    df.to_excel(writer, sheet_name='Sheet1')
-
-    workbook = writer.book
-    # worksheet = writer.sheets['Sheet1']
-
-    workbook.close()
-
-    return response
-
-
-download_acara_donor.short_description = 'Download Acara Donor as Excel Workbook'
-
-
 @admin.register(AcaraDonor)
 class AcaraDonorAdmin(admin.ModelAdmin):
+    list_display = ('nama_institusi', 'alamat_lokasi_donor',
+                    'display_waktu', 'status')
     list_filter = ('status', AcaraDonorFilter, 'kecamatan', 'kategori')
-    search_fields = ('waktu_mulai',)
+    search_fields = ('waktu_mulai', 'alamat_lokasi_donor')
+
     readonly_fields = ('id',
                        'user',
                        'nama_institusi',
@@ -43,4 +24,59 @@ class AcaraDonorAdmin(admin.ModelAdmin):
                        'email_koor',
                        'no_telp_koor',
                        'keterangan',
-                       'foto_lokasi')
+                       'foto_lokasi',
+                       'show_image')
+    fieldsets = (
+        (None, {
+            'fields': ('id',
+                       'user',
+                       'status')
+        }),
+        ('INFORMASI ACARA DONOR', {
+            'fields': ('kategori',
+                       'alamat_lokasi_donor',
+                       'kecamatan',
+                       ('waktu_mulai', 'waktu_berakhir'),
+                       'perkiraan_jumlah_donor',
+                       'keterangan',
+                       'show_image')
+        }),
+        ('INFORMASI PENYELENGGARA', {
+            'fields': ('nama_institusi', 'alamat_institusi',
+                       'email_kantor', 'no_telp_kantor')
+        }),
+        ('KONTAK KOORDINATOR', {
+            'fields': ('nama_koor', 'email_koor', 'no_telp_koor')
+        }),
+    )
+
+    def display_waktu(self, obj):
+        """Create a string for waktu acara donor."""
+        waktu_mulai = localtime(obj.waktu_mulai)
+        waktu_berakhir = localtime(obj.waktu_berakhir)
+        return f"{waktu_mulai.date().strftime('%d/%m/%Y')} \
+                ({waktu_mulai.hour:02d}:{waktu_mulai.minute:02d} \
+                - {waktu_berakhir.hour:02d}:{waktu_berakhir.minute:02d})"
+
+    def show_image(self, obj):
+        """Create an image preview for foto lokasi acara donor."""
+        return mark_safe('<img src="%s" style="width=auto; height=auto; \
+            max-height: 1000px; max-width: 1000px;" />'
+                         % (obj.foto_lokasi.url))
+
+    display_waktu.short_description = 'Waktu'
+    show_image.short_description = 'Preview foto lokasi'
+
+    class Media:
+        js = [settings.MEDIA_URL+'/js/acara_donor_custom_admin.js', ]
+
+    def save_model(self, request, obj, form, change):
+        if(obj.status):
+            JadwalDonor.objects.create(kecamatan=obj.kecamatan,
+                                       location=obj.alamat_lokasi_donor,
+                                       time_start=obj.waktu_mulai,
+                                       time_end=obj.waktu_berakhir,
+                                       quota=obj.perkiraan_jumlah_donor,
+                                       category=obj.kategori)
+
+        super().save_model(request, obj, form, change)
diff --git a/backend/acara_donor/factories.py b/backend/acara_donor/factories.py
index 5f173081e2435740fe87a3f075df153c3ae34f92..996e2d4a4b0482b09b5588571f1a396f2aae08af 100644
--- a/backend/acara_donor/factories.py
+++ b/backend/acara_donor/factories.py
@@ -26,17 +26,15 @@ class AcaraDonorFactory(factory.DjangoModelFactory):
     email_koor = factory.Faker('free_email', locale=LOCALE)
     no_telp_koor = factory.Sequence(lambda n: '021-1128-%04d' % n)
 
-    kategori = factory.LazyAttribute(lambda _:
-                                     choice(JadwalDonor.Category.choices)[0])
+    kategori = factory.LazyAttribute(
+        lambda _: choice(JadwalDonor.Category.choices)[0])  # NOSONAR
     alamat_lokasi_donor = factory.Faker('address', locale=LOCALE)
-    kecamatan = factory.LazyAttribute(lambda _:
-                                      choice(JadwalDonor.Kecamatan.choices)[0])
-    waktu_mulai = factory.LazyAttribute(lambda _: timezone.now()
-                                        + timedelta(
-                                            days=randint(1, 66),
-                                            hours=randint(1, 23)))  # NOSONAR
-    waktu_berakhir = factory.LazyAttribute(lambda t: t.waktu_mulai
-                                           + timedelta(
-                                               hours=randint(2, 6)))  # NOSONAR
+    kecamatan = factory.LazyAttribute(
+        lambda _: choice(JadwalDonor.Kecamatan.choices)[0])  # NOSONAR
+    waktu_mulai = factory.LazyAttribute(
+        lambda _: timezone.now() + timedelta(days=randint(1, 66),  # NOSONAR
+                                             hours=randint(1, 23)))  # NOSONAR
+    waktu_berakhir = factory.LazyAttribute(
+        lambda t: t.waktu_mulai + timedelta(hours=randint(2, 6)))  # NOSONAR
     perkiraan_jumlah_donor = factory.fuzzy.FuzzyInteger(low=33, high=666)
     keterangan = factory.Faker('text')
diff --git a/backend/acara_donor/migrations/0002_auto_20200602_2055.py b/backend/acara_donor/migrations/0002_auto_20200602_2055.py
new file mode 100644
index 0000000000000000000000000000000000000000..cde608cc039d8bd4dd7269ba38acebcf15e42789
--- /dev/null
+++ b/backend/acara_donor/migrations/0002_auto_20200602_2055.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.5 on 2020-06-02 13:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('acara_donor', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='acaradonor',
+            name='status',
+            field=models.BooleanField(default=None, null=True),
+        ),
+    ]
diff --git a/backend/acara_donor/models.py b/backend/acara_donor/models.py
index 09ecce37fdeb6448a53607cf54539841de66dbba..cbe59d5a66b1a997ff631100e1b45df4c71b1710 100644
--- a/backend/acara_donor/models.py
+++ b/backend/acara_donor/models.py
@@ -7,7 +7,7 @@ from donor.models import JadwalDonor
 
 class AcaraDonor(models.Model):
     user = models.ForeignKey(User, on_delete=models.CASCADE)
-    status = models.BooleanField(null=True)
+    status = models.BooleanField(null=True, default=None)
 
     nama_institusi = models.CharField(max_length=95)
     alamat_institusi = models.CharField(max_length=140)
@@ -18,10 +18,10 @@ class AcaraDonor(models.Model):
     email_koor = models.EmailField()
     no_telp_koor = models.CharField(max_length=20)
 
-    kategori = models.CharField(max_length=20,
+    kategori = models.CharField(max_length=20, blank=False, null=False,
                                 choices=JadwalDonor.Category.choices)
     alamat_lokasi_donor = models.CharField(max_length=140)
-    kecamatan = models.CharField(max_length=20,
+    kecamatan = models.CharField(max_length=20, blank=False, null=False,
                                  choices=JadwalDonor.Kecamatan.choices)
     waktu_mulai = models.DateTimeField()
     waktu_berakhir = models.DateTimeField()
diff --git a/backend/acara_donor/serializers.py b/backend/acara_donor/serializers.py
index 8f241dcb86ed6e5a2d428216e02075bbae45d7b5..ccce4f8110f715cba8bbfc6bd419c8b21b057fe5 100644
--- a/backend/acara_donor/serializers.py
+++ b/backend/acara_donor/serializers.py
@@ -26,4 +26,5 @@ class AcaraDonorSerializer(serializers.ModelSerializer):
     class Meta:
         model = AcaraDonor
         exclude = ["user", ]
-        extra_kwargs = {'foto_lokasi': {'required': False}}
+        extra_kwargs = {'foto_lokasi': {'required': False},
+                        'status': {'default': None}}
diff --git a/backend/acara_donor/tests.py b/backend/acara_donor/tests.py
index fde7469e919e986117ce2dda23d4ac0b8ccf529d..b8104eebe284935704c0671b19333f851e75ddad 100644
--- a/backend/acara_donor/tests.py
+++ b/backend/acara_donor/tests.py
@@ -1,6 +1,5 @@
 import datetime
 from unittest.mock import patch
-from django.contrib.auth import get_user_model
 from django.test import TestCase
 from django.utils import timezone
 from django.utils.timezone import localtime
@@ -14,9 +13,6 @@ from acara_donor.admin import AcaraDonorAdmin
 from acara_donor.filters import AcaraDonorFilter
 
 
-User = get_user_model()
-
-
 class AcaraDonorTest(TestCase):
     """ Test module for Acara Donor model"""
 
diff --git a/backend/donor/admin.py b/backend/donor/admin.py
index 4b93a0aae497bc5ff5bf7823f0d52454c87accdd..63b125749b57fea96a6a73274c5c91d85bd6a37d 100644
--- a/backend/donor/admin.py
+++ b/backend/donor/admin.py
@@ -1,4 +1,5 @@
 from django.contrib import admin
+from django.conf import settings
 from django.http import HttpResponse
 
 from donor.models import JadwalDonor, DaftarDonor
@@ -65,12 +66,70 @@ download_jadwaldonor.short_description = 'Download Jadwal Donor as Excel Workboo
 @admin.register(JadwalDonor)
 class JadwalDonorAdmin(admin.ModelAdmin):
     list_filter = ('kecamatan', 'time_start', 'category')
+    search_fields = ('time_start', 'location')
     actions = [download_jadwaldonor]
 
+    class Media:
+        js = [settings.MEDIA_URL+'/js/acara_donor_custom_admin.js', ]
+
 
 @admin.register(DaftarDonor)
 class DaftarDonorAdmin(admin.ModelAdmin):
-    list_filter = ('has_attended', )
+    list_display = ('user', 'has_attended', 'get_goldar', 'jadwal_donor')
+    search_fields = ('user__email',
+                     'jadwal_donor__location', 'jadwal_donor__time_start')
+    fields = ('has_attended',
+              'id',
+              'user',
+              'jadwal_donor',
+              'merasa_sehat',
+              'minum_antibiotik',
+              'minum_obat_infeksi',
+              'minum_aspirin',
+              'sakit_kepala_dan_demam',
+              'sedang_hamil',
+              'kehamilan_berapa',
+              'donor_darah_trombosit_plasma',
+              'menerima_vaksinasi',
+              'kontak_vaksinasi',
+              'donor_aferesis',
+              'pernah_transfusi',
+              'pernah_transplasi',
+              'pernah_cangkok_tulang',
+              'pernah_tusuk_jarum_medis',
+              'pernah_seks_aids',
+              'pernah_seks_psk',
+              'pernah_seks_narkoba',
+              'pernah_seks_konsentrat',
+              'wanita_pernah_seks_laki_biseksual',
+              'pernah_seks_dengan_hepatitis',
+              'tinggal_dengan_hepatitis',
+              'punya_tato',
+              'punya_tindik',
+              'sedang_sifilis_go',
+              'pernah_dipenjara',
+              'pernah_di_luar_indonesia',
+              'pernah_jualan_seks',
+              'pernah_homoseks',
+              'pernah_tinggal_di_eropa',
+              'pernah_terima_transfusi_di_inggris',
+              'pernah_tinggal_di_inggris',
+              'positif_aids',
+              'pakai_jarum_suntik',
+              'pakai_konsentrat',
+              'menderita_hepatitis',
+              'menderita_malaria',
+              'menderita_kanker',
+              'bermasalah_jantung_paru_paru',
+              'menderita_pendarahan',
+              'seks_dengan_orang_afrika',
+              'tinggal_di_afrika')
+    list_filter = ('has_attended', 'user__profile__blood_type')
+
+    def get_goldar(self, obj):
+        return obj.user.profile.blood_type
+    get_goldar.short_description = 'Goldar'
+    get_goldar.admin_order_field = 'user__profile__blood_type'
 
     def get_readonly_fields(self, request, obj=None):
         readonly_fields = list(set(
@@ -80,3 +139,6 @@ class DaftarDonorAdmin(admin.ModelAdmin):
         if 'has_attended' in readonly_fields:
             readonly_fields.remove('has_attended')
         return readonly_fields
+
+    class Media:
+        js = [settings.MEDIA_URL+'/js/daftar_donor_custom_admin.js', ]
diff --git a/backend/donor/migrations/0012_auto_20200604_1236.py b/backend/donor/migrations/0012_auto_20200604_1236.py
new file mode 100644
index 0000000000000000000000000000000000000000..9cfecdf94717178a15af237159fffa460484f8e6
--- /dev/null
+++ b/backend/donor/migrations/0012_auto_20200604_1236.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.5 on 2020-06-04 05:36
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('donor', '0011_auto_20200602_0227'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='jadwaldonor',
+            name='location',
+            field=models.CharField(max_length=140),
+        ),
+    ]
diff --git a/backend/donor/models.py b/backend/donor/models.py
index f176abd0e0a7cf996b0857899dee6c2e76eb6a4d..6f4c4d3bbc01102e368a3d38b50bf1c8a29bdf70 100644
--- a/backend/donor/models.py
+++ b/backend/donor/models.py
@@ -26,7 +26,7 @@ class JadwalDonor(models.Model):
         PRIVATE = "Tertutup"
 
     kecamatan = models.CharField(max_length=20, choices=Kecamatan.choices)
-    location = models.CharField(max_length=30)
+    location = models.CharField(max_length=140)
     time_start = models.DateTimeField()
     time_end = models.DateTimeField()
     quota = models.PositiveIntegerField()
diff --git a/backend/edukasi/admin.py b/backend/edukasi/admin.py
index 12fea278c463624603ccfdc0a37d2c65fe98a6a8..390c3080e16e02183ca8f6f3fd893418552e7e20 100644
--- a/backend/edukasi/admin.py
+++ b/backend/edukasi/admin.py
@@ -1,7 +1,14 @@
 from django.contrib import admin
+from django.conf import settings
 from edukasi.models import Artikel
 
 
 @admin.register(Artikel)
 class ArtikelAdmin(admin.ModelAdmin):
-    pass
+    list_display = ('title', 'posted_at')
+    search_fields = ('posted_at', 'title')
+    fields = ('posted_at', 'title', 'featured_image', 'content')
+    readonly_fields = ('posted_at',)
+
+    class Media:
+        js = [settings.MEDIA_URL+'/js/artikel_custom_admin.js', ]
diff --git a/backend/edukasi/factories.py b/backend/edukasi/factories.py
index 615b3fadbe214a6200277385e56718577815d3e7..b20e09f45e2a3ee7158911b35f86aab050adc67a 100644
--- a/backend/edukasi/factories.py
+++ b/backend/edukasi/factories.py
@@ -12,6 +12,6 @@ class ArtikelFactory(factory.DjangoModelFactory):
     class Meta:
         model = Artikel
 
-    title = fake.sentence()[:-1][:30]
+    title = fake.sentence()[:-1][:58]
     featured_image = os.path.join("edukasi", "placeholder.jpg")
     content = "\n".join(fake.paragraphs())
diff --git a/backend/edukasi/management/commands/seed_artikel.py b/backend/edukasi/management/commands/seed_artikel.py
index 5f6e84c2f180afca82ed898d1b1ae4765ba86b00..077e1ca679cd0aa1a6322d2a39a41683bc6721ab 100644
--- a/backend/edukasi/management/commands/seed_artikel.py
+++ b/backend/edukasi/management/commands/seed_artikel.py
@@ -14,9 +14,9 @@ class Command(BaseCommand):
     help = 'Add dummy data artikel edukasi'
 
     def handle(self, *args, **options):
-        for i in range(20):
+        for _ in range(20):
             content = []
-            for i in range(5):
+            for _ in range(5):
                 content.append(" ".join(fake.paragraphs()))
             Artikel.objects.create(
                 title=fake.sentence()[:-1][:30],
diff --git a/backend/edukasi/migrations/0003_auto_20200603_2016.py b/backend/edukasi/migrations/0003_auto_20200603_2016.py
new file mode 100644
index 0000000000000000000000000000000000000000..2b7c8f3dc3c66fcc20b3128a155cd78a57f37473
--- /dev/null
+++ b/backend/edukasi/migrations/0003_auto_20200603_2016.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.5 on 2020-06-03 13:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('edukasi', '0002_artikel_posted_at'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='artikel',
+            name='title',
+            field=models.CharField(max_length=25),
+        ),
+    ]
diff --git a/backend/edukasi/migrations/0004_auto_20200603_2020.py b/backend/edukasi/migrations/0004_auto_20200603_2020.py
new file mode 100644
index 0000000000000000000000000000000000000000..3de5ae4f1579acb8607c2fa750ea09c53c706929
--- /dev/null
+++ b/backend/edukasi/migrations/0004_auto_20200603_2020.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.5 on 2020-06-03 13:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('edukasi', '0003_auto_20200603_2016'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='artikel',
+            name='title',
+            field=models.CharField(max_length=30),
+        ),
+    ]
diff --git a/backend/edukasi/migrations/0005_auto_20200603_2118.py b/backend/edukasi/migrations/0005_auto_20200603_2118.py
new file mode 100644
index 0000000000000000000000000000000000000000..6521914e7cbac34683d5f4d51cd45b83fcc8a90d
--- /dev/null
+++ b/backend/edukasi/migrations/0005_auto_20200603_2118.py
@@ -0,0 +1,18 @@
+# Generated by Django 3.0.5 on 2020-06-03 14:18
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('edukasi', '0004_auto_20200603_2020'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='artikel',
+            name='title',
+            field=models.CharField(max_length=60),
+        ),
+    ]
diff --git a/backend/edukasi/models.py b/backend/edukasi/models.py
index 0b3d6e5d69f4b05e98f70a70a61162d056fa406a..ee9d8c0b2e735d314719fbf88863eff8b4173baa 100644
--- a/backend/edukasi/models.py
+++ b/backend/edukasi/models.py
@@ -2,7 +2,7 @@ from django.db import models
 
 
 class Artikel(models.Model):
-    title = models.CharField(max_length=32)
+    title = models.CharField(max_length=60)
     featured_image = models.ImageField()
     content = models.TextField()
     posted_at = models.DateTimeField(auto_now_add=True)
diff --git a/backend/edukasi/serializers.py b/backend/edukasi/serializers.py
index 122315274edc26cc0db746740c0e39f49f8afb85..4980d127b4a995f3a1d1a1ec53b0bd7e47e57a02 100644
--- a/backend/edukasi/serializers.py
+++ b/backend/edukasi/serializers.py
@@ -6,4 +6,4 @@ from .models import Artikel
 class ArtikelSerializer(serializers.ModelSerializer):
     class Meta:
         model = Artikel
-        fields = ['id', 'title', 'featured_image', 'content']
+        fields = ['id', 'title', 'featured_image', 'content', 'posted_at']
diff --git a/backend/main/admin.py b/backend/main/admin.py
index ab11241c0b94d2c014b668ef20732c8278ca4292..ce05abad43fe18c0c7ea5c0342504beb3b5314a3 100644
--- a/backend/main/admin.py
+++ b/backend/main/admin.py
@@ -1,4 +1,5 @@
 from django.contrib import admin
+from django.conf import settings
 from django.contrib.auth.admin import UserAdmin as DjangoUserAdmin
 from django.utils.translation import ugettext_lazy as _
 
@@ -9,10 +10,17 @@ from .models import User, Profile
 class UserAdmin(DjangoUserAdmin):
     """Define admin model for custom User model with no username field."""
 
+    readonly_fields = ('email',
+                       'first_name',
+                       'last_name',
+                       'last_login',
+                       'date_joined')
+
     fieldsets = (
         (None, {'fields': ('email', 'password')}),
         (_('Personal info'), {'fields': ('first_name', 'last_name')}),
-        (_('Permissions'), {'fields': ('is_active', 'is_staff', 'is_superuser', 'is_verified',
+        (_('Permissions'), {'fields': ('is_active', 'is_staff',
+                                       'is_superuser', 'is_verified',
                                        'groups', 'user_permissions')}),
         (_('Important dates'), {'fields': ('last_login', 'date_joined')}),
     )
@@ -26,7 +34,61 @@ class UserAdmin(DjangoUserAdmin):
     search_fields = ('email', 'first_name', 'last_name')
     ordering = ('email',)
 
+    class Media:
+        js = [settings.MEDIA_URL+'/js/user_custom_admin.js', ]
+
 
 @admin.register(Profile)
 class ProfileAdmin(admin.ModelAdmin):
-    pass
+    list_display = ('user', 'district', 'address', 'age', 'sex', 'blood_type')
+    list_filter = ('blood_type', 'sex')
+    search_fields = ('address', 'district')
+
+    readonly_fields = ('user',
+                       'body_weight',
+                       'id_card_no',
+                       'birthplace',
+                       'birthdate',
+                       'sex',
+                       'profession',
+                       'blood_type',
+                       'married_status',
+                       'address',
+                       'city',
+                       'district',
+                       'village',
+                       'phone_no',
+                       'work_address',
+                       'work_email',
+                       'work_phone_no',
+                       'age')
+
+    fieldsets = (
+        (None, {'fields': ('user',)}),
+        ('INFORMASI PRIBADI', {
+            'fields': ('id_card_no',
+                       'birthplace',
+                       'birthdate',
+                       'age',
+                       'body_weight',
+                       'sex',
+                       'profession',
+                       'blood_type',
+                       'married_status')
+        }),
+        ('ALAMAT', {
+            'fields': ('address',
+                       'village',
+                       'district',
+                       'city',
+                       'work_address')
+        }),
+        ('KONTAK', {
+            'fields': ('phone_no',
+                       'work_email',
+                       'work_phone_no')
+        }),
+    )
+
+    class Media:
+        js = [settings.MEDIA_URL+'/js/profile_custom_admin.js', ]
diff --git a/backend/main/models.py b/backend/main/models.py
index ebc6ce8424082c419c8be179f28a0fe19cdbc8dd..8207262672781f0fcf81f406e975b17e9f0493db 100644
--- a/backend/main/models.py
+++ b/backend/main/models.py
@@ -98,7 +98,7 @@ class Profile(models.Model):
         return today.year - born.year - ((today.month, today.day) < (born.month, born.day))
 
     def __str__(self):
-        return f'({self.sex}, {self.blood_type})'
+        return f'{self.user} ({self.sex}, {self.blood_type})'
 
     class Meta:
         pass
diff --git a/backend/main/test_models.py b/backend/main/test_models.py
index 0ea18b1b116b2783eee139d2a995dd03aac6f9ff..13e355f605e74c8acd3d63b5f77d09fbd784adcc 100644
--- a/backend/main/test_models.py
+++ b/backend/main/test_models.py
@@ -105,7 +105,7 @@ class ProfileTests(TestCase):
             profile__sex=Sex.FEMALE,
             profile__blood_type='O+')
 
-        self.assertEqual(str(user.profile), '(F, O+)')
+        self.assertEqual(str(user.profile), f'{str(user)} (F, O+)')
 
     def test_dont_save_new_profile_on_user_update(self):
         user = UserFactory(last_name='Musthofa')
diff --git a/backend/media/formulir-daftar-donor/formulir-1.pdf b/backend/media/formulir-daftar-donor/formulir-1.pdf
index e50c52accc0d587ee07a38ae28f43b5d1867f854..dbbe840b44cd2fe4c97ec5289cd04e4b7247355f 100644
Binary files a/backend/media/formulir-daftar-donor/formulir-1.pdf and b/backend/media/formulir-daftar-donor/formulir-1.pdf differ
diff --git a/frontend/src/components/FirstConsentForm.js b/frontend/src/components/FirstConsentForm.js
index 28f55d937304a497456b33ee257301f1bc3abba1..c4e2212e813e5036c882f90c205e0719779cc074 100644
--- a/frontend/src/components/FirstConsentForm.js
+++ b/frontend/src/components/FirstConsentForm.js
@@ -24,76 +24,52 @@ function FirstConsentForm({ setValue }) {
             <Form>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Merasa sehat pada hari ini?</b>
-                  </h5>
+                  <h6>Merasa sehat pada hari ini?</h6>
                 </Form.Label>
                 <ButtonChoice name="merasa_sehat" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Sedang minum antibiotik?</b>
-                  </h5>
+                  <h6>Sedang minum antibiotik?</h6>
                 </Form.Label>
                 <ButtonChoice name="minum_antibiotik" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Sedang minum obat lain untuk infeksi?</b>
-                  </h5>
+                  <h6>Sedang minum obat lain untuk infeksi?</h6>
                 </Form.Label>
                 <ButtonChoice name="minum_obat_infeksi" setValue={setValue} />
               </Form.Group>
-              <h5 className="text-blue">
-                <i>
-                  <b>Dalam waktu 48 jam terakhir</b>
-                </i>
-              </h5>
+              <h5 className="text-header">Dalam waktu 48 jam terakhir</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda sedang minum aspirin atau obat yang mengandung
-                      aspirin?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda sedang minum aspirin atau obat yang mengandung
+                    aspirin?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="minum_aspirin" setValue={setValue} />
               </Form.Group>
-              <h5 className="text-blue">
-                <b>
-                  <i>Dalam waktu 1 minggu terakhir</i>
-                </b>
-              </h5>
+              <h5 className="text-header">Dalam waktu 1 minggu terakhir</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda mengalami sakit kepala dan demam secara
-                      bersamaan?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda mengalami sakit kepala dan demam secara
+                    bersamaan?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="sakit_kepala_dan_demam"
                   setValue={setValue}
                 />
               </Form.Group>
-              <h5 className="text-blue">
-                <b>
-                  <i>Dalam waktu 6 minggu terakhir</i>
-                </b>
-              </h5>
+              <h5 className="text-header">Dalam waktu 6 minggu terakhir</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Untuk pendonor darah wanita: Apakah anda saat ini sedang
-                      hamil?
-                    </b>
-                  </h5>
+                  <h6>
+                    Untuk pendonor darah wanita: Apakah anda saat ini sedang
+                    hamil?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="sedang_hamil" setValue={setValue} />
               </Form.Group>
@@ -104,9 +80,7 @@ function FirstConsentForm({ setValue }) {
                   controlId="formBornPlace"
                 >
                   <Form.Label column lg="8" className="mr-4">
-                    <h5>
-                      <b>Kehamilan berapa?</b>
-                    </h5>
+                    <h6>Kehamilan berapa?</h6>
                   </Form.Label>
                   <Col className="fertility-field">
                     <Form.Control
@@ -125,18 +99,12 @@ function FirstConsentForm({ setValue }) {
                   </Col>
                 </Form.Group>
               )}
-              <h5>
-                <b>
-                  <i>Dalam waktu 8 minggu terakhir</i>
-                </b>
-              </h5>
+              <h5 className="text-header">Dalam waktu 8 minggu terakhir</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda mendonorkan darah, trombosit, atau plasma?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda mendonorkan darah, trombosit, atau plasma?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="donor_darah_trombosit_plasma"
@@ -145,20 +113,16 @@ function FirstConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda menerima vaksinasi atau suntikan lainnya?</b>
-                  </h5>
+                  <h6>Apakah anda menerima vaksinasi atau suntikan lainnya?</h6>
                 </Form.Label>
                 <ButtonChoice name="menerima_vaksinasi" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah kontak dengan orang yang menerima
-                      vaksinasi <i>smallpox</i> ?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah kontak dengan orang yang menerima
+                    vaksinasi <i>smallpox</i> ?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="kontak_vaksinasi" setValue={setValue} />
               </Form.Group>
diff --git a/frontend/src/components/ForthConsentForm.js b/frontend/src/components/ForthConsentForm.js
index 058a7134b8a2300d6b417ff9b2df926900babbe4..ad3e433928844e83f2159d164fd2f245395bc9ff 100644
--- a/frontend/src/components/ForthConsentForm.js
+++ b/frontend/src/components/ForthConsentForm.js
@@ -14,85 +14,61 @@ function ForthConsentForm({ setValue }) {
         <Modal.Body>
           <div className="container-fluid">
             <Form>
-              <h5 className="text-blue">
-                <i>
-                  <b>Tahun 1980 hingga 1996</b>
-                </i>
-              </h5>
+              <h5 className="text-header">Tahun 1980 hingga 1996</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda tinggal selama 3 bulan atau lebih di Inggris?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda tinggal selama 3 bulan atau lebih di Inggris?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_tinggal_di_inggris"
                   setValue={setValue}
                 />
               </Form.Group>
-              <h5 className="text-blue">
-                <i>
-                  <b>Apakah anda pernah</b>
-                </i>
-              </h5>
+              <h5 className="text-header">Apakah anda pernah</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Mendapat hasil positif untuk tes HIV/AIDS?</b>
-                  </h5>
+                  <h6>Mendapat hasil positif untuk tes HIV/AIDS?</h6>
                 </Form.Label>
                 <ButtonChoice name="positif_aids" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Menggunakan jarum suntik untuk obat-obatan, Steroid yang
-                      tidak diresepkan dokter?
-                    </b>
-                  </h5>
+                  <h6>
+                    Menggunakan jarum suntik untuk obat-obatan, Steroid yang
+                    tidak diresepkan dokter?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pakai_jarum_suntik" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Menggunakan konsentrat faktor pembekuan?</b>
-                  </h5>
+                  <h6>Menggunakan konsentrat faktor pembekuan?</h6>
                 </Form.Label>
                 <ButtonChoice name="pakai_konsentrat" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Menderita hepatitis?</b>
-                  </h5>
+                  <h6>Menderita hepatitis?</h6>
                 </Form.Label>
                 <ButtonChoice name="menderita_hepatitis" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Menderita malaria?</b>
-                  </h5>
+                  <h6>Menderita malaria?</h6>
                 </Form.Label>
                 <ButtonChoice name="menderita_malaria" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Menderita kanker termasuk leukimia?</b>
-                  </h5>
+                  <h6>Menderita kanker termasuk leukimia?</h6>
                 </Form.Label>
                 <ButtonChoice name="menderita_kanker" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Bermasalah dengan jantung atau paru-paru?</b>
-                  </h5>
+                  <h6>Bermasalah dengan jantung atau paru-paru?</h6>
                 </Form.Label>
                 <ButtonChoice
                   name="bermasalah_jantung_paru_paru"
@@ -101,22 +77,17 @@ function ForthConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Menderita pendarahan atau penyakit berhubungan dengan
-                      darah?
-                    </b>
-                  </h5>
+                  <h6>
+                    Menderita pendarahan atau penyakit berhubungan dengan darah?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="menderita_pendarahan" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Berhubungan seksual dengan orang yang tinggal di Afrika?
-                    </b>
-                  </h5>
+                  <h6>
+                    Berhubungan seksual dengan orang yang tinggal di Afrika?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="seks_dengan_orang_afrika"
@@ -125,9 +96,7 @@ function ForthConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Tinggal di Afrika?</b>
-                  </h5>
+                  <h6>Tinggal di Afrika?</h6>
                 </Form.Label>
                 <ButtonChoice name="tinggal_di_afrika" setValue={setValue} />
               </Form.Group>
diff --git a/frontend/src/components/ModalEventDonorSubmission.js b/frontend/src/components/ModalEventDonorSubmission.js
index 7e56c1df2562db58e0f7797b10c8f479c1fef2f0..dd5e6cd9a669f85a3f0d4c0537190d8a7c2cd115 100644
--- a/frontend/src/components/ModalEventDonorSubmission.js
+++ b/frontend/src/components/ModalEventDonorSubmission.js
@@ -23,6 +23,11 @@ const ModalEventDonorSubmission = ({ show, handleClose }) => {
   const { control, register, setValue, handleSubmit, errors } = useForm({
     mode: "onChange",
     validationSchema: EventSubmissionSchema,
+    defaultValues: {
+      tanggal_donor: moment(),
+      jam_mulai: moment(),
+      jam_selesai: moment(),
+    },
   })
 
   const onSubmit = async data => {
@@ -421,6 +426,7 @@ const ModalEventDonorSubmission = ({ show, handleClose }) => {
                         disablePast
                         required
                         variant="inline"
+                        inputVariant="outlined"
                         format="DD/MM/YYYY"
                         placeholder="DD/MM/YYYY"
                         views={["year", "month", "date"]}
@@ -459,6 +465,7 @@ const ModalEventDonorSubmission = ({ show, handleClose }) => {
                           fullWidth
                           required
                           variant="inline"
+                          inputVariant="outlined"
                           placeholder="HH:mm"
                           InputAdornmentProps={{ position: "start" }}
                           inputProps={{ id: "formEventStartTime" }}
@@ -492,6 +499,7 @@ const ModalEventDonorSubmission = ({ show, handleClose }) => {
                           fullWidth
                           required
                           variant="inline"
+                          inputVariant="outlined"
                           placeholder="HH:mm"
                           InputAdornmentProps={{ position: "start" }}
                           inputProps={{ id: "formEventEndTime" }}
diff --git a/frontend/src/components/ModalLogin.js b/frontend/src/components/ModalLogin.js
index 3ff22e70acf7228fa0b46e7283dbcf791b0670d9..aa78c6cd8c5f907e28c78c86d17e8a860206eb62 100644
--- a/frontend/src/components/ModalLogin.js
+++ b/frontend/src/components/ModalLogin.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Button, Form, Modal } from "react-bootstrap"
+import { Button, Form, Modal, OverlayTrigger, Tooltip } from "react-bootstrap"
 import { GoogleLogin } from "react-google-login"
 import { useForm } from "react-hook-form"
 import { useAuth } from "../hooks/authenticate"
@@ -141,9 +141,15 @@ const ModalLogin = ({ show, handleClose, handleSuccess }) => {
         </p>
         <div className="row px-5">
           <div className="text-center col-md-12 mb-2">
-            <Button href="/" variant="btn btn-link mb-2">
-              Lupa password?
-            </Button>
+            <OverlayTrigger
+              placement="right"
+              delay={{ show: 250, hide: 300 }}
+              overlay={
+                <Tooltip id="button-tooltip">Silakan hubungi admin ;)</Tooltip>
+              }
+            >
+              <Button variant="btn btn-link mb-2">Lupa password?</Button>
+            </OverlayTrigger>
           </div>
         </div>
       </Modal.Body>
diff --git a/frontend/src/components/SecondConsentForm.js b/frontend/src/components/SecondConsentForm.js
index 876eb8d706023e82cf592e49c39d13e605e6e264..990ce7dc1347f129c765bdf5a1f9f38aafd9db5a 100644
--- a/frontend/src/components/SecondConsentForm.js
+++ b/frontend/src/components/SecondConsentForm.js
@@ -14,51 +14,35 @@ function SecondConsentForm({ setValue }) {
         <Modal.Body>
           <div className="container-fluid">
             <Form>
-              <h5 className="text-blue">
-                <b>
-                  <i>Dalam waktu 16 minggu terakhir</i>
-                </b>
-              </h5>
+              <h5 className="text-header">Dalam waktu 16 minggu terakhir</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda mendonorkan 2 kantung sel darah merah melalui
-                      prose aferesis?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda mendonorkan 2 kantung sel darah merah melalui
+                    prose aferesis?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="donor_aferesis" setValue={setValue} />
               </Form.Group>
-              <h5 className="text-blue">
-                <b>
-                  <i>Dalam waktu 12 bulan terakhir</i>
-                </b>
-              </h5>
+              <h5 className="text-header">Dalam waktu 12 bulan terakhir</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda pernah menerima transfusi darah?</b>
-                  </h5>
+                  <h6>Apakah anda pernah menerima transfusi darah?</h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_transfusi" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah menerima transplasi, organ, jaringan,
-                      atau sumsum tulang?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah menerima transplasi, organ, jaringan,
+                    atau sumsum tulang?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_transplasi" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda pernah cangkok tulang untuk kulit?</b>
-                  </h5>
+                  <h6>Apakah anda pernah cangkok tulang untuk kulit?</h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_cangkok_tulang"
@@ -67,9 +51,7 @@ function SecondConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda pernah tertusuk jarum medis?</b>
-                  </h5>
+                  <h6>Apakah anda pernah tertusuk jarum medis?</h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_tusuk_jarum_medis"
@@ -78,45 +60,37 @@ function SecondConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah berhubungan seksual dengan orang dengan
-                      HIV/AIDS?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah berhubungan seksual dengan orang dengan
+                    HIV/AIDS?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_seks_aids" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah berhubungan seksual dengan pekerja seks
-                      komersial?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah berhubungan seksual dengan pekerja seks
+                    komersial?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_seks_psk" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah berhubungan seksual dengan pengguna
-                      narkoba jarum suntik?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah berhubungan seksual dengan pengguna
+                    narkoba jarum suntik?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_seks_narkoba" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah berhubungan seksual dengan pengguna
-                      konsentrat faktor pembekuan?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah berhubungan seksual dengan pengguna
+                    konsentrat faktor pembekuan?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_seks_konsentrat"
@@ -125,12 +99,11 @@ function SecondConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Donor wanita: Apakah anda pernah berhubungan seksual
-                      dengan laki-laki yang biseksual?
-                    </b>
-                  </h5>
+                  <h6>
+                    <span className="text-gender">Pendonor wanita</span>: Apakah
+                    anda pernah berhubungan seksual dengan laki-laki yang
+                    biseksual?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="wanita_pernah_seks_laki_biseksual"
diff --git a/frontend/src/components/ThirdConsentForm.js b/frontend/src/components/ThirdConsentForm.js
index 59141847958e1ce1fa61577381f689ce8ff9452e..023160c12acc7798ef8e1d897a858611b591f260 100644
--- a/frontend/src/components/ThirdConsentForm.js
+++ b/frontend/src/components/ThirdConsentForm.js
@@ -16,12 +16,10 @@ function ThirdConsentForm({ setValue }) {
             <Form>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah berhubungan seksual dengan penderita
-                      hepatitis?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah berhubungan seksual dengan penderita
+                    hepatitis?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_seks_dengan_hepatitis"
@@ -30,9 +28,7 @@ function ThirdConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda tinggal bersama penderita hepatitis?</b>
-                  </h5>
+                  <h6>Apakah anda tinggal bersama penderita hepatitis?</h6>
                 </Form.Label>
                 <ButtonChoice
                   name="tinggal_dengan_hepatitis"
@@ -41,100 +37,73 @@ function ThirdConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda memiliki tatto?</b>
-                  </h5>
+                  <h6>Apakah anda memiliki tatto?</h6>
                 </Form.Label>
                 <ButtonChoice name="punya_tato" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda memiliki tindik telinga atau pada bagian tubuh
-                      lainnya?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda memiliki tindik telinga atau pada bagian tubuh
+                    lainnya?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="punya_tindik" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda sedang atau pernah mendapat pengobatan sifilis
-                      atua GO (kencing tanah)?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda sedang atau pernah mendapat pengobatan sifilis
+                    atua GO (kencing tanah)?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="sedang_sifilis_go" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah ditahan dipenjara untuk waktu lebih
-                      dari 72 jam?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah ditahan dipenjara untuk waktu lebih dari
+                    72 jam?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_dipenjara" setValue={setValue} />
               </Form.Group>
-              <h5 className="text-blue">
-                <i>
-                  <b>Dalam waktu 3 tahun</b>
-                </i>
-              </h5>
+              <h5 className="text-header">Dalam waktu 3 tahun</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda pernah berada di luar wilayah Indonesia?</b>
-                  </h5>
+                  <h6>Apakah anda pernah berada di luar wilayah Indonesia?</h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_di_luar_indonesia"
                   setValue={setValue}
                 />
               </Form.Group>
-              <h5 className="text-blue">
-                <i>
-                  <b>Tahun 1977 hingga sekarang</b>
-                </i>
-              </h5>
+              <h5 className="text-header">Tahun 1977 hingga sekarang</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda pernah menerima uang, obat, atau pembayaran
-                      lainnya untuk seks?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda pernah menerima uang, obat, atau pembayaran
+                    lainnya untuk seks?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_jualan_seks" setValue={setValue} />
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Laki-laki: Apakah anda pernah berhubungan seksual dengan
-                      laki-laki, walaupun sekali?
-                    </b>
-                  </h5>
+                  <h6>
+                    <span className="text-gender">Pendonor laki-laki</span>:
+                    Apakah anda pernah berhubungan seksual dengan laki-laki,
+                    walaupun sekali?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice name="pernah_homoseks" setValue={setValue} />
               </Form.Group>
-              <h5 className="text-blue">
-                <i>
-                  <b>Tahun 1980 hingga sekarang</b>
-                </i>
-              </h5>
+              <h5 className="text-header">Tahun 1980 hingga sekarang</h5>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>
-                      Apakah anda tinggal selama 5 tahun atau lebih di Eropa?
-                    </b>
-                  </h5>
+                  <h6>
+                    Apakah anda tinggal selama 5 tahun atau lebih di Eropa?
+                  </h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_tinggal_di_eropa"
@@ -143,9 +112,7 @@ function ThirdConsentForm({ setValue }) {
               </Form.Group>
               <Form.Group as={Row}>
                 <Form.Label column lg="8">
-                  <h5>
-                    <b>Apakah anda menerima transfusi darah di Inggris?</b>
-                  </h5>
+                  <h6>Apakah anda menerima transfusi darah di Inggris?</h6>
                 </Form.Label>
                 <ButtonChoice
                   name="pernah_terima_transfusi_di_inggris"
diff --git a/frontend/src/components/carousel.js b/frontend/src/components/carousel.js
index 24fa32b222197d3f6045df6eb7741e53808a6ec4..e1ff94ad84125d6ea80830821ad64143b90e82d5 100644
--- a/frontend/src/components/carousel.js
+++ b/frontend/src/components/carousel.js
@@ -27,9 +27,7 @@ export default () => {
               }}
             >
               <Link to={"/article/" + item.id} className="unstyled-link">
-                <div className="center bg-red">
-                  <p>{item.title}</p>
-                </div>
+                <p>{item.title}</p>
               </Link>
             </div>
           ))}
diff --git a/frontend/src/components/complete-profile.js b/frontend/src/components/complete-profile.js
index 89e956aad77e60def0d885efc965712a3069afe2..c29b4ae963f7a2ba85985f8a26bd518aca6cc8e2 100644
--- a/frontend/src/components/complete-profile.js
+++ b/frontend/src/components/complete-profile.js
@@ -12,6 +12,7 @@ import {
   KeyboardDatePicker,
   MuiPickersUtilsProvider,
 } from "@material-ui/pickers"
+import moment from "moment"
 import { useAuth } from "../hooks/authenticate"
 
 function CompleteProfile({
@@ -160,6 +161,7 @@ function CompleteProfile({
                         disableFuture
                         required
                         variant="inline"
+                        inputVariant="outlined"
                         format="DD/MM/YYYY"
                         placeholder="DD/MM/YYYY"
                         views={["year", "month", "date"]}
@@ -170,6 +172,7 @@ function CompleteProfile({
                     }
                     name="birthdate"
                     control={control}
+                    defaultValue={moment()}
                   />
                   {errors.birthdate && (
                     <Form.Control.Feedback type="invalid">
@@ -331,10 +334,10 @@ function CompleteProfile({
                     size="lg"
                     ref={register}
                   >
-                    <option value="BK">Belum Kawin</option>
-                    <option value="KW">Kawin</option>
-                    <option value="CH">Cerai Hidup</option>
-                    <option value="CM">Cerai Mati</option>
+                    <option value="Belum Kawin">Belum Kawin</option>
+                    <option value="Kawin">Kawin</option>
+                    <option value="Cerai Hidup">Cerai Hidup</option>
+                    <option value="Cerai Mati">Cerai Mati</option>
                   </Form.Control>
                 </div>
               </Form.Group>
@@ -370,19 +373,19 @@ function CompleteProfile({
                   <Form.Group as={Row}>
                     <Col md="4">
                       <Form.Control
-                        name="district"
+                        name="village"
                         size="lg"
                         type="text"
-                        placeholder="Kecamatan"
+                        placeholder="Kelurahan"
                         ref={register}
                       />
                     </Col>
                     <Col md="4">
                       <Form.Control
-                        name="village"
+                        name="district"
                         size="lg"
                         type="text"
-                        placeholder="Kelurahan"
+                        placeholder="Kecamatan"
                         ref={register}
                       />
                     </Col>
@@ -396,14 +399,14 @@ function CompleteProfile({
                       />
                     </Col>
                   </Form.Group>
-                  {errors.district && (
+                  {errors.village && (
                     <Form.Control.Feedback type="invalid">
-                      {errors.district.message}
+                      {errors.village.message}
                     </Form.Control.Feedback>
                   )}
-                  {errors.village && (
+                  {errors.district && (
                     <Form.Control.Feedback type="invalid">
-                      {errors.village.message}
+                      {errors.district.message}
                     </Form.Control.Feedback>
                   )}
                   {errors.city && (
diff --git a/frontend/src/components/event-donor-register.css b/frontend/src/components/event-donor-register.css
index fae9060e633d0bf3c0120293c19d1ead38ba8dff..9e214d27e143246f3e1cfaf1b38e1133c76d6e65 100644
--- a/frontend/src/components/event-donor-register.css
+++ b/frontend/src/components/event-donor-register.css
@@ -6,6 +6,17 @@
   overflow-y: auto;
   width: 100%;
 }
+.text-header {
+  color: var(--blue);
+  font-style: italic;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+.text-gender {
+  color: var(--red);
+  font-weight: bold;
+  text-transform: uppercase;
+}
 
 .red-border-field {
   border: 1px solid var(--red);
diff --git a/frontend/src/components/footer.js b/frontend/src/components/footer.js
index f7c2768793457b4412b11afddcbcbbb4972bbbb6..88fbf14c5313eca568fc465bb719fdd97132cf09 100644
--- a/frontend/src/components/footer.js
+++ b/frontend/src/components/footer.js
@@ -1,13 +1,27 @@
 import React from "react"
+import logo from "src/images/ig.svg"
 
 const Footer = () => (
   <footer className="bg-red px-4 py-2 mt-4">
-    <div>{`© ${new Date().getFullYear()} | UTD PMI DEPOK`}</div>
-    <div>
-      Jl. Boulevard, Grand Depok City Kota Kembang, Jatimulya, Kec. Cilodong,
-      Kota Depok, Jawa Barat 16413
+    <div className="row d-flex align-items-center justify-content-between">
+      <div className="row-md-6">
+        <div className="col">
+          <div>{`© ${new Date().getFullYear()} | UTD PMI DEPOK`}</div>
+          <div>
+            Jl. Boulevard Grand Depok City Kota Kembang, Jatimulya, Kec.
+            Cilodong, Kota Depok, Jawa Barat 16413
+          </div>
+          <div>Tel. 021 8792 7210 | 0895 2200 7210</div>
+        </div>
+      </div>
+      <div className="row-md-6">
+        <div className="col">
+          <a href="https://www.instagram.com/utdpmidepok/">
+            <img src={logo} alt="Instagram PMI Depok" />
+          </a>
+        </div>
+      </div>
     </div>
-    <div>Tel. 021 8792 7210 | 0895 2200 7210</div>
   </footer>
 )
 
diff --git a/frontend/src/components/form-validation-schema.js b/frontend/src/components/form-validation-schema.js
index d40e8667de3d1a2dde9f52f8419e9967b46e83a1..86360587e771cee9a1fef6799a34e8180a8f10be 100644
--- a/frontend/src/components/form-validation-schema.js
+++ b/frontend/src/components/form-validation-schema.js
@@ -9,10 +9,10 @@ const AccountSchema = yup.object().shape({
   password: yup
     .string()
     .required("Masukkan password.")
-    .min(8, "Password terlalu pendek - setidaknya harus 8 karakter.")
+    .min(9, "Password terlalu pendek - setidaknya harus 9 karakter.")
     .matches(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/, // NOSONAR
-      "Password harus terdiri dari minimal 1 huruf kecil, 1 huruf kapital, 1 angka, dan 1 karakter spesial (!@#$%^&*)."
+      /^(?=.*[a-zA-Z])(?=.*\d)[\w.,/\\+\-!?@#$%^&* ]{9,}$/, // NOSONAR
+      "Password harus terdiri dari minimal 1 huruf atau 1 angka."
     ),
   passwordConfirmation: yup
     .string()
@@ -70,10 +70,10 @@ export const ChangePasswordSchema = yup.object().shape({
   new_password: yup
     .string()
     .required("Masukkan password.")
-    .min(8, "Password terlalu pendek - setidaknya harus 8 karakter.")
+    .min(9, "Password terlalu pendek - setidaknya harus 9 karakter.")
     .matches(
-      /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/, // NOSONAR
-      "Password harus terdiri dari minimal 1 huruf kecil, 1 huruf kapital, 1 angka, dan 1 karakter spesial (!@#$%^&*)."
+      /^(?=.*[a-zA-Z])(?=.*\d)[\w.,/\\+\-!?@#$%^&* ]{9,}$/, // NOSONAR
+      "Password harus terdiri dari minimal 1 huruf atau 1 angka."
     ),
   confirm_password: yup
     .string()
diff --git a/frontend/src/components/navbar.css b/frontend/src/components/navbar.css
index 5caf34e92dbe71826dc707cdd60a11b24cf1c373..914f29446e00ea02158aec0531ec24c276acac1a 100644
--- a/frontend/src/components/navbar.css
+++ b/frontend/src/components/navbar.css
@@ -21,3 +21,13 @@
 #change-profile-nav {
   margin-bottom: -0.1rem;
 }
+
+@media (max-width: 573px) {
+  .navbar-button {
+    display: block;
+    padding: 0;
+    margin-top: 0.5rem;
+    margin-bottom: 0.5rem;
+    text-align: left;
+  }
+}
diff --git a/frontend/src/components/navbar.js b/frontend/src/components/navbar.js
index b918b9fdd1183573750aecbb875890fd08e9a233..5c8a540de42e22352c7909068bc92dbe210f34e5 100644
--- a/frontend/src/components/navbar.js
+++ b/frontend/src/components/navbar.js
@@ -25,6 +25,7 @@ const Navbar = () => {
         bg="red"
         variant="red"
         className="mb-4"
+        sticky="top"
       >
         <BNavbar.Toggle aria-controls="responsive-navbar-nav" />
         <BNavbar.Collapse id="responsive-navbar-nav">
@@ -32,7 +33,7 @@ const Navbar = () => {
             <NavLink to="/">Home</NavLink>
             <NavLink to="/jadwal-donor">Jadwal Donor</NavLink>
             <Button
-              variant="red-transparent"
+              variant="red-transparent navbar-button"
               onClick={
                 user ? showModalEventDonorSubmission() : showModalLogin()
               }
@@ -45,7 +46,7 @@ const Navbar = () => {
           {user ? (
             <Nav>
               <Button
-                variant="red-transparent"
+                variant="red-transparent navbar-button"
                 onClick={showModalChangeProfile()}
               >
                 Ubah Profil
@@ -56,7 +57,10 @@ const Navbar = () => {
             </Nav>
           ) : (
             <Nav>
-              <Button variant="red-transparent" onClick={showModalLogin()}>
+              <Button
+                variant="red-transparent navbar-button"
+                onClick={showModalLogin()}
+              >
                 Masuk
               </Button>
               <Button variant="cream" onClick={showModalRegister()}>
diff --git a/frontend/src/components/navbar.test.js b/frontend/src/components/navbar.test.js
index b89d2f76a838ef1945bf5f244add41672859aacb..fe891dea52fded5c793784c9dc989b0e441d22f5 100644
--- a/frontend/src/components/navbar.test.js
+++ b/frontend/src/components/navbar.test.js
@@ -5,6 +5,7 @@ import {
   waitForElementToBeRemoved,
 } from "@testing-library/react"
 import React from "react"
+import moment from "moment"
 import {
   getUserProfile,
   postUserProfile,
@@ -208,7 +209,7 @@ describe(`Sign in with Google`, () => {
       data: {
         email: "fairuzi@informatika.com",
         nama: "Muhammad Fairuzi Teguh",
-        profile: { body_weight: "66" },
+        profile: { body_weight: 66 },
       },
     })
 
@@ -530,8 +531,12 @@ describe(`Ajukan Acara Donor`, () => {
         no_telp_kantor: "+62 123 456 789 0",
         no_telp_koor: "+62 789 456 123",
         perkiraan_jumlah_donor: "89",
-        waktu_berakhir: "2020-06-25T15:26",
-        waktu_mulai: "2020-06-25T12:01",
+        waktu_berakhir: moment()
+          .add(1, "hours")
+          .format(),
+        waktu_mulai: moment()
+          .add(2, "hours")
+          .format(),
       },
     })
 
@@ -580,13 +585,10 @@ describe(`Ajukan Acara Donor`, () => {
       await findByText(/Masukkan alamat lokasi donor./)
     ).toBeInTheDocument()
     expect(
-      await findByText(/Masukkan tanggal pelaksanaan donor./)
-    ).toBeInTheDocument()
-    expect(
-      await findByText(/Masukkan jam mulai pelaksanaan donor./)
+      await findByText(/Jam mulai minimal harus lebih 3 jam dari sekarang./)
     ).toBeInTheDocument()
     expect(
-      await findByText(/Masukkan jam berakhir pelaksanaan donor./)
+      await findByText(/Jam berakhir minimal harus lebih 1 jam dari jam mulai./)
     ).toBeInTheDocument()
     expect(
       await findByText(/Masukkan perkiraan jumlah donor./)
diff --git a/frontend/src/components/slider.css b/frontend/src/components/slider.css
index 8103b25f958d6ba83ddff9c9afedc7fa581f5f37..fbb4c68898a66e54fa5100fc3387c21bc267a0b4 100644
--- a/frontend/src/components/slider.css
+++ b/frontend/src/components/slider.css
@@ -90,54 +90,14 @@
 
   .slider p {
     display: block;
-    width: 60%;
+    width: 100%;
     text-align: center;
-    margin-left: 20%;
-    margin-top: 48%;
+    word-wrap: break-word;
     color: var(--cream);
-    position: relative;
-  }
-}
-
-@media (min-width: 405px) {
-  .slider p {
-    margin-top: 43%;
-  }
-}
-
-@media (min-width: 445px) {
-  .slider p {
-    margin-top: 40%;
-  }
-}
-
-@media (min-width: 480px) {
-  .slider p {
-    margin-top: 35%;
-  }
-}
-
-@media (min-width: 545px) {
-  .slider p {
-    margin-top: 30%;
-  }
-}
-
-@media (min-width: 620px) {
-  .slider p {
-    margin-top: 28%;
-  }
-}
-
-@media (min-width: 675px) {
-  .slider p {
-    margin-top: 25%;
-  }
-}
-
-@media (min-width: 745px) {
-  .slider p {
-    margin-top: 22%;
+    background-color: var(--red);
+    padding: 0px 10px 0px 10px;
+    position: absolute;
+    bottom: 0px;
   }
 }
 
@@ -145,51 +105,6 @@
   .slider {
     margin-top: 0rem;
   }
-  .slider p {
-    margin-top: 43%;
-  }
-}
-
-@media (min-width: 880px) {
-  .slider p {
-    margin-top: 40%;
-  }
-}
-
-@media (min-width: 940px) {
-  .slider p {
-    margin-top: 38%;
-  }
-}
-
-@media (min-width: 990px) {
-  .slider p {
-    margin-top: 35%;
-  }
-}
-
-@media (min-width: 1100px) {
-  .slider p {
-    margin-top: 32%;
-  }
-}
-
-@media (min-width: 1180px) {
-  .slider p {
-    margin-top: 28%;
-  }
-}
-
-@media (min-width: 1250px) {
-  .slider p {
-    margin-top: 25%;
-  }
-}
-
-@media (min-width: 1400px) {
-  .slider p {
-    margin-top: 23%;
-  }
 }
 
 @media (min-width: 1450px) {
@@ -197,10 +112,6 @@
     width: 90%;
     margin-left: 5%;
   }
-
-  .slider p {
-    margin-top: 25%;
-  }
 }
 
 @media (min-width: 1500px) {
@@ -208,14 +119,4 @@
     width: 80%;
     margin-left: 10%;
   }
-
-  .slider p {
-    margin-top: 28%;
-  }
-}
-
-@media (min-width: 1650px) {
-  .slider p {
-    margin-top: 25%;
-  }
 }
diff --git a/frontend/src/images/ig.svg b/frontend/src/images/ig.svg
new file mode 100644
index 0000000000000000000000000000000000000000..88c0921dd025db32fe5d6052bf39f0eac5efc9f2
--- /dev/null
+++ b/frontend/src/images/ig.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
+width="52" height="52"
+viewBox="0 0 172 172"
+style=" fill:#000000;">
+<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal"><path d="M0,172v-172h172v172z" fill="none"></path><g fill="#fff3df"><path d="M49.92548,0c-27.49519,0 -49.92548,22.43029 -49.92548,49.92548v72.14904c0,27.49519 22.43029,49.92548 49.92548,49.92548h72.14904c27.49519,0 49.92548,-22.43029 49.92548,-49.92548v-72.14904c0,-27.49519 -22.43029,-49.92548 -49.92548,-49.92548zM49.92548,13.23077h72.14904c20.33714,0 36.69471,16.33173 36.69471,36.69471v72.14904c0,20.33714 -16.33173,36.69471 -36.69471,36.69471h-72.14904c-20.33714,0 -36.69471,-16.33173 -36.69471,-36.69471v-72.14904c0,-20.33714 16.33173,-36.69471 36.69471,-36.69471zM135.61538,26.46154c-5.47837,0 -9.92308,4.44471 -9.92308,9.92308c0,5.47837 4.44471,9.92308 9.92308,9.92308c5.47837,0 9.92308,-4.44471 9.92308,-9.92308c0,-5.47837 -4.44471,-9.92308 -9.92308,-9.92308zM86,39.69231c-25.50541,0 -46.30769,20.80228 -46.30769,46.30769c0,25.50541 20.80228,46.30769 46.30769,46.30769c25.50541,0 46.30769,-20.80228 46.30769,-46.30769c0,-25.50541 -20.80228,-46.30769 -46.30769,-46.30769zM86,52.92308c18.34736,0 33.07692,14.72957 33.07692,33.07692c0,18.34736 -14.72956,33.07692 -33.07692,33.07692c-18.34735,0 -33.07692,-14.72956 -33.07692,-33.07692c0,-18.34735 14.72957,-33.07692 33.07692,-33.07692z"></path></g></g></svg>
diff --git a/frontend/src/pages/acara-donor.factory.js b/frontend/src/pages/acara-donor.factory.js
index 7d6a6763e147750a14ac6c971e15a7e2f2d8738f..0fef56ec6e4da948629d631e993126aa702e3dee 100644
--- a/frontend/src/pages/acara-donor.factory.js
+++ b/frontend/src/pages/acara-donor.factory.js
@@ -5,7 +5,7 @@ const idGenerator = idGeneratorFactory(1)
 
 export const acaraDonorFactory = override => ({
   id: idGenerator(),
-  status: "false",
+  status: false,
   alamat_institusi: "Pacilkom",
   alamat_lokasi_donor: "Sekre Pacil",
   email_kantor: "pacil@cs.ui.ac.id",
diff --git a/frontend/src/pages/article.css b/frontend/src/pages/article.css
index fd215f06a2a5afc05bc3e890ff5113057f7fa216..f98f9d86d43fb3def9ef42436ad85c97ec5afbcb 100644
--- a/frontend/src/pages/article.css
+++ b/frontend/src/pages/article.css
@@ -2,9 +2,6 @@
   margin: 15px 15px 0;
   padding: 0;
 }
-.article .column:last-child {
-  padding-bottom: 60px;
-}
 .article .column::after {
   content: "";
   clear: both;
@@ -21,30 +18,38 @@
   margin-left: 0;
 }
 .article .column div span {
-  position: absolute;
-  bottom: -70px;
+  position: relative;
   left: 0;
-  z-index: -1;
   display: block;
   width: 300px;
-  margin: 0;
+  margin-top: 10px;
   padding: 0;
-  color: #444;
+  color: var(--red);
+  word-wrap: break-word;
   font-size: 18px;
-  text-decoration: none;
   text-align: center;
   -webkit-transition: 0.3s ease-in-out;
   transition: 0.3s ease-in-out;
-  opacity: 0;
+  opacity: 0.3;
 }
 .article figure {
   width: 300px;
   margin: 0;
   padding: 0;
-  background: #fff;
+  border-radius: 0.25rem;
   overflow: hidden;
+  opacity: 0.3;
+}
+.article figure:hover {
+  opacity: 1;
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
 }
 .article figure:hover + span {
-  bottom: -55px;
   opacity: 1;
+  font-weight: bold;
+}
+
+#one-article-title {
+  text-align: center;
+  word-break: break-all;
 }
diff --git a/frontend/src/pages/article.js b/frontend/src/pages/article.js
index 8e4636adf91127d5b09b892afcc2e7a813bc4d38..f4c1f2e03f77f00b0be0eb07a36d0c73b0c01431 100644
--- a/frontend/src/pages/article.js
+++ b/frontend/src/pages/article.js
@@ -2,6 +2,7 @@ import { Router } from "@reach/router"
 import React from "react"
 import { Col, Container, Row } from "react-bootstrap"
 import { useQuery } from "react-query"
+import moment from "moment"
 import { getArtikelEdukasi, getListArtikelEdukasi } from "../api"
 import ErrorRetry from "../components/error-retry"
 import Layout from "../components/layout"
@@ -42,14 +43,26 @@ const Content = props => {
           <Row>
             <Col sm={8}>
               <Row>
-                <h3 id="title">
-                  <b className="text-red">{article.title}</b>
-                </h3>
-                <img
-                  src={article.featured_image}
-                  alt={article.title}
-                  className="img-fluid rounded mx-auto d-block"
-                ></img>
+                <Col sm={12}>
+                  <p className="text-blue">
+                    <i>
+                      Dibuat pada
+                      {` ${moment(article.posted_at).format(
+                        "DD/MM/YYYY HH:mm"
+                      )}`}
+                    </i>
+                  </p>
+                  <h3 id="one-article-title">
+                    <b className="text-red">{article.title}</b>
+                  </h3>
+                </Col>
+                <Col sm={12}>
+                  <img
+                    src={article.featured_image}
+                    alt={article.title}
+                    className="img-fluid rounded mx-auto d-block"
+                  ></img>
+                </Col>
               </Row>
               <Row>
                 <Col className="bg-cream mx-3 py-5 my-5 text-justify">
diff --git a/frontend/src/pages/profile.test.js b/frontend/src/pages/profile.test.js
index 2e8e479ba58dbc45706aa1322633820f393960a3..7f0b40d5db93380508e2ba0c8bee31688c2f8f5e 100644
--- a/frontend/src/pages/profile.test.js
+++ b/frontend/src/pages/profile.test.js
@@ -321,6 +321,29 @@ describe("Riwayat Acara Donor", () => {
     )
   })
 
+  it("shows correct status for acara donor", async () => {
+    const acara_donor1 = acaraDonorFactory({
+      status: null,
+    })
+    const acara_donor2 = acaraDonorFactory({
+      status: false,
+    })
+    const acara_donor3 = acaraDonorFactory({
+      status: true,
+    })
+    getRiwayatAcaraDonor.mockResolvedValueOnce({
+      data: {
+        count: 3,
+        results: [acara_donor1, acara_donor2, acara_donor3],
+      },
+    })
+    renderAuthenticated(<ProfilePage />)
+    await screen.findByText("Alamat")
+    expect(screen.getByText("Diajukan")).toBeInTheDocument()
+    expect(screen.getByText("Ditolak")).toBeInTheDocument()
+    expect(screen.getByText("Diterima")).toBeInTheDocument()
+  })
+
   it("has clickable pagination", async () => {
     const acara_donor1 = acaraDonorFactory({
       alamat_lokasi_donor: "Yuli Pacil",
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index bc4a19e06d7e197baf912061b11482c917679871..bd84db4bd9576df6043e684285471bfc4382a600 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -20,6 +20,16 @@ body {
   background-color: var(--cream);
 }
 
+.MuiOutlinedInput-input {
+  padding: 10px 14px !important;
+}
+.MuiInputBase-input:hover {
+  text-shadow: 0.7px 0 0 currentColor;
+}
+.MuiInputBase-input:focus {
+  text-shadow: 0.7px 0 0 currentColor;
+}
+
 .form-control {
   color: var(--blue);
   background-color: var(--white);
@@ -196,6 +206,17 @@ input {
   box-shadow: var(--bottom-shadow);
 }
 
+.tooltip {
+  font-weight: bold;
+}
+.arrow::before {
+  border-right-color: var(--red) !important;
+}
+.tooltip-inner {
+  color: var(--cream);
+  background-color: var(--red);
+}
+
 @media (max-width: 1024px) {
   .form-control {
     font-size: 15px;
diff --git a/frontend/src/styles/theme.js b/frontend/src/styles/theme.js
index 5e7454b974d636ec50e38bac12a7e6c8ffe75d8d..8f233759e2134d9ceb99aa0c2a452269948e41fe 100644
--- a/frontend/src/styles/theme.js
+++ b/frontend/src/styles/theme.js
@@ -30,6 +30,27 @@ const theme = createMuiTheme({
         color: BLUE,
       },
     },
+    MuiOutlinedInput: {
+      root: {
+        position: "relative",
+        "& $notchedOutline": {
+          borderColor: RED,
+        },
+        "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
+          borderColor: DARK_RED,
+          boxShadow: "0 0 2px 1px #8a1324 !important",
+          // Reset on touch devices, it doesn't add specificity
+          "#media (hover: none)": {
+            borderColor: DARK_RED,
+            boxShadow: "0 0 2px 1px #8a1324 !important",
+          },
+        },
+        "&$focused $notchedOutline": {
+          borderColor: DARK_RED,
+          boxShadow: "4px 4px #8a1324 !important",
+        },
+      },
+    },
     MuiPickersBasePicker: {
       pickerView: {
         backgroundColor: CREAM,