diff --git a/modules/agen-edit.html b/modules/agen-edit.html
new file mode 100644
index 0000000..da88a23
--- /dev/null
+++ b/modules/agen-edit.html
@@ -0,0 +1,90 @@
+<div style="font-weight: 600; text-align: center;">Data Diri</div>
+<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch; padding: 1ch;">
+    <div style="height: 12em; width: 8em; text-align: center;">
+        <img id="UagentPhoto" style="max-height: 12em; max-width: 8em;"/>
+    </div>
+    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+        <span>NIP</span>
+        <span>:</span>
+        <span id="UagentID"></span>
+        <span>Nama Agen</span>
+        <span>:</span>
+        <span id="Uname"></span>
+        <span>Jabatan</span>
+        <span>:</span>
+        <span id="Ujabatan"></span>
+        <span>Unit Kerja</span>
+        <span>:</span>
+        <span id="Uunit"></span>
+        <span>No SK Pengangkatan</span>
+        <span>:</span>
+        <span id="Uska"></span>
+        <span>TMT</span>
+        <span>:</span>
+        <span id="Utmta"></span>
+        <span>No SK Perubahan</span>
+        <span>:</span>
+        <span id="Uskp"></span>
+        <span>TMT</span>
+        <span>:</span>
+        <span id="Utmtp"></span>
+    </div>
+    <button id="chPicture">Ganti Foto</button>
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Visi dan Misi Agen Perubahan
+</div>
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Visi</span>
+    <span>:</span>
+    <span id="Uvisi"></span>
+    <span>Misi</span>
+    <span>:</span>
+    <span id="Umisi"></span>
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Pembentukan Agen Perubahan
+</div>
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Seleksi Internal</span>
+    <span>:</span>
+    <span id="Uselect"></span>
+    <span>Penilaian dan Pemilihan</span>
+    <span>:</span>
+    <span id="Ugrading"></span>
+    <span>Dokumen Eviden Penetapan SK</span>
+    <span>:</span>
+    <span id="Uevidence"></span>
+    <span>Dokumentasi Penepatan SK</span>
+    <span>:</span>
+    <span id="Udocuments"></span>
+</div>
+<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground);">
+    <a-button id="Uupdate">
+        Perbarui
+    </a-button>
+    <a-button id="UCancel" type="negative">
+        Batal
+    </a-button>
+</div>
+<script type="module">
+    const thisDialog = moly._dialogs.at(-1);
+    const data = thisDialog.data;
+    $('#UagentPhoto')[0].src = data.photoURL;
+    $('#UagentID').text(data.agentID);
+    $('#Uname').text(data.name);
+    $('#Ujabatan').text(data.jabatan);
+    $('#Uunit').text(data.unitKerja);
+    $('#Uska').text(data.skAngkat);
+    $('#Utmta').text(data.tmt);
+    $('#Uskp').text(data.skPerb == null ? "-" : data.skPerb);
+    $('#Utmtp').text(data.tmUbah == null ? "-" : data.tmUbah);
+    $('#Uvisi').text(data.vision);
+    $('#Umisi').text(data.mission);
+    $('#Uupdate').click(async()=>{
+        thisDialog.resolve({edit: true, data: thisDialog.data});
+    });
+    $('#UCancel').click(async()=>{
+        thisDialog.resolve(false);
+    });
+</script>
\ No newline at end of file
diff --git a/modules/agen-profil.html b/modules/agen-profil.html
new file mode 100644
index 0000000..fef12f7
--- /dev/null
+++ b/modules/agen-profil.html
@@ -0,0 +1,93 @@
+<div style="font-weight: 600; text-align: center;">Data Diri</div>
+<div style="display: grid; grid-template-columns: auto 1fr; column-gap: 1.5ch; padding: 1ch;">
+    <div style="height: 12em; width: 8em; text-align: center;">
+        <img id="agentPhoto" style="max-height: 12em; max-width: 8em;"/>
+    </div>
+    <div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+        <span>NIP</span>
+        <span>:</span>
+        <span id="agentID"></span>
+        <span>Nama Agen</span>
+        <span>:</span>
+        <span id="name"></span>
+        <span>Jabatan</span>
+        <span>:</span>
+        <span id="jabatan"></span>
+        <span>Unit Kerja</span>
+        <span>:</span>
+        <span id="unit"></span>
+        <span>No SK Pengangkatan</span>
+        <span>:</span>
+        <span id="ska"></span>
+        <span>TMT</span>
+        <span>:</span>
+        <span id="tmta"></span>
+        <span>No SK Perubahan</span>
+        <span>:</span>
+        <span id="skp"></span>
+        <span>TMT</span>
+        <span>:</span>
+        <span id="tmtp"></span>
+    </div>
+    <button id="opPicture">Lihat Foto</button>
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Visi dan Misi Agen Perubahan
+</div>
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Visi</span>
+    <span>:</span>
+    <span id="visi"></span>
+    <span>Misi</span>
+    <span>:</span>
+    <span id="misi"></span>
+</div>
+<div style="text-align: center; padding: 1ch; text-align: center; font-weight: 600;">
+    Pembentukan Agen Perubahan
+</div>
+<div style="display: grid; grid-template-columns: auto auto 1fr; column-gap:.5ch;">
+    <span>Seleksi Internal</span>
+    <span>:</span>
+    <span id="select"></span>
+    <span>Penilaian dan Pemilihan</span>
+    <span>:</span>
+    <span id="grading"></span>
+    <span>Dokumen Eviden Penetapan SK</span>
+    <span>:</span>
+    <span id="evidence"></span>
+    <span>Dokumentasi Penepatan SK</span>
+    <span>:</span>
+    <span id="documents"></span>
+</div>
+<div style="margin-top: 1em; border-top: 1px solid var(--secondary-foreground);">
+    <a-button id="update">
+        Update Profil Agen
+    </a-button>
+</div>
+<script type="module">
+    const thisDialog = moly._dialogs.at(-1);
+    const data = thisDialog.data;
+    if(data.photoURL == null) data.photoURL = "/assets/images/generic-user.webp";
+    $('#agentPhoto')[0].src = data.photoURL;
+    $('#agentID').text(data.agentID);
+    $('#name').text(data.name);
+    $('#jabatan').text(data.jabatan);
+    $('#unit').text(data.unitKerja);
+    $('#ska').text(data.skAngkat);
+    $('#tmta').text(data.tmt);
+    $('#skp').text(data.skPerb == null ? "-" : data.skPerb);
+    $('#tmtp').text(data.tmUbah == null ? "-" : data.tmUbah);
+    $('#visi').text(data.vision);
+    $('#misi').text(data.mission);
+    $('#update').click(async()=>{
+        thisDialog.resolve({edit: true, data: data});
+    });
+    $('#opPicture').click(async()=>{
+        const imdiv = moly.newElement("div");
+        const img = moly.newElement("img");
+        img.src= data.photoURL;
+        imdiv.style = "overflow-x: hidden;"
+        imdiv.append(img);
+        moly.dialog.show({title: "Foto Agen " + data.name ,content: imdiv,fetching: false});
+    });
+</script>
\ No newline at end of file
diff --git a/modules/agen.html b/modules/agen.html
index e69de29..0b164c8 100644
--- a/modules/agen.html
+++ b/modules/agen.html
@@ -0,0 +1,100 @@
+<group-el label="Manajemen Agen Perubahan" style="padding: 3ch 1ch;">
+    <table id="agents" class="fullwidth bordered selectable">
+        <thead>
+            <tr>
+                <th style="width: 22ch;">NIP</th>
+                <th style="min-width: 12ch;">Nama Agen</th>
+                <th style="min-width: 12ch;">Jabatan</th>
+                <th style="min-width: 12ch;">Unit Kerja</th>
+            </tr>
+        </thead>
+        <tbody id="agContent">
+            <tr>
+                <td colspan="4" style="height: 4em; text-align: center;">&nbsp;</td>
+            </tr>
+        </tbody>
+    </table>
+</group-el>
+<group-el label="Manajemen Akun Pengguna" style="padding: 3ch 1ch;">
+    <table id="users" class="fullwidth bordered selectable">
+        <thead>
+            <tr>
+                <th style="width: 22ch;">NIP</th>
+                <th style="min-width: 12ch;">Username</th>
+                <th style="width: 12ch;">Level</th>
+                <th style="width: 6ch;">Active</th>
+            </tr>
+        </thead>
+        <tbody id="usContent">
+            <tr>
+                <td colspan="4" style="height: 4em; text-align: center;">&nbsp;</td>
+            </tr>
+        </tbody>
+    </table>
+</group-el>
+<script type="module">
+    let agents = {};
+    let units = {};
+    let users = {};
+    async function populateAgents()
+    {
+        units = await getJson('/api/getunits');
+        if (units.status != 200) return false;
+        units = units.data;
+        agents = await getJson('/api/getagents');
+        if (agents.status != 200) return false;
+        agents = agents.data;
+        $('#agContent').empty();
+        $.each(agents,(_,v)=>{
+            const fu = units.find(e=>e.deplID == v.deplID);
+            v.unitKerja = fu.unitKerja
+            const ro = moly.newElement("tr");
+            const id = moly.newElement("td");
+            const nm = moly.newElement("td");
+            const jb = moly.newElement("td");
+            const uk = moly.newElement("td");
+            ro.append(id);
+            ro.append(nm);
+            ro.append(jb);
+            ro.append(uk);
+            id.append(v.agentID);
+            nm.append(v.name);
+            jb.append(v.jabatan);
+            uk.append(v.unitKerja);
+            $('#agContent').append(ro);
+            $(ro).click(async()=>{
+                const aksi = await moly.dialog.show({title: "Profil Agen Perubahan",content:"/modules/agen-profil.html",fetching: true, data: v});
+                if(aksi.edit) 
+                {
+                    const edit = await moly.dialog.show({title: "Update Agen Perubahan",content:"/modules/agen-edit.html",fetching: true, data: aksi.data});   
+                }
+            });
+        });
+    }
+    async function populateUsers()
+    {
+        users = await getJson('/api/getusers');
+        if (users.status != 200) return false;
+        users = users.data;
+        $('#usContent').empty();
+        $.each(users,(_,v)=>{
+            const ro = moly.newElement("tr");
+            const id = moly.newElement("td");
+            const un = moly.newElement("td");
+            const lv = moly.newElement("td");
+            const ac = moly.newElement("td");
+            ac.style = "text-align: center;"
+            ro.append(id);
+            ro.append(un);
+            ro.append(lv);
+            ro.append(ac);
+            id.append(v.agentID);
+            un.append(v.username);
+            lv.append(v.level);
+            ac.append(v.active ? "Ya" : "Tidak");
+            $('#usContent').append(ro);
+        });
+    }
+    await populateAgents();
+    await populateUsers();
+</script>
\ No newline at end of file