diff --git a/component/sidebar_user_profile/modal_sidebar_user.templ b/component/sidebar_user_profile/modal_sidebar_user.templ
new file mode 100644
index 0000000..1665ff8
--- /dev/null
+++ b/component/sidebar_user_profile/modal_sidebar_user.templ
@@ -0,0 +1,157 @@
+package sidebaruserprofile
+
+import (
+	"cpone/component/customtextfield"
+	"cpone/models"
+	"cpone/component/modal"
+)
+
+templ SidebarForm() {
+    <div>
+        <form
+            id="form-ganti-password"
+            class="form"
+            hx-post="/corp/dashboard_pic/gantipassword"
+            hx-target="#body-ganti-pass"
+            hx-swap="outerHTML"
+            hx-indicator=".formloading"
+            hx-on::before-request={ HandleFormBeforeRequest() }
+            hx-on::after-request={ HandleFormAfterGantiPass() }
+        >
+            @modalcomponent.Modal("modal-ganti-pass",
+                "Ganti Password",
+                ModalGantiPassword(),
+                ActionFormGantiPassword(),
+                CloseFormGantiPassword(),
+            )
+        </form>
+    </div>
+}
+
+templ ModalGantiPassword() {
+    <div id="body-ganti-pass">
+        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "oldPassID",
+            Name: "oldpassid",
+            Type: "password",
+            Placeholder: "Masukan password lama",
+            Label: "Password Lama",
+        })
+        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "newPassID",
+            Name: "newpassid",
+            Type: "password",
+            Placeholder: "Masukan password baru",
+            Label: "Password Baru",
+        })
+        @customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "reNewPassID",
+            Name: "renewpassid",
+            Type: "password",
+            Placeholder: "Masukan ulang password baru",
+            Label: "Ulangi Password Baru",
+        })
+    </div>
+    <script>
+        document.addEventListener('htmx:afterSwap', function(event) {
+            $('.selectpicker').selectpicker('refresh');
+        })
+    </script>
+}
+
+
+templ RetModalGantiPassword(
+    oldPass models.CustomTextFieldv2Prm,
+    newPass models.CustomTextFieldv2Prm,
+    renewPass models.CustomTextFieldv2Prm,
+    hxOnLoad templ.ComponentScript,
+) {
+    <div id="body-ganti-pass" hx-on::load={ hxOnLoad }>
+        @customtextfield.CustomTextFieldv2(oldPass)
+        @customtextfield.CustomTextFieldv2(newPass)
+        @customtextfield.CustomTextFieldv2(renewPass)
+    </div>
+    <script>
+        document.addEventListener('htmx:afterSwap', function(event) {
+            $('.selectpicker').selectpicker('refresh');
+        })
+    </script>
+}
+
+templ ActionFormGantiPassword() {
+    <div>
+        <button 
+            hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
+            hx-post="/corp/dashboard_pic/tutupgantipassword"
+            hx-target="#body-ganti-pass"
+            hx-swap="outerHTML"
+            hx-indicator=".cancelloading"
+            type="button" 
+            class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel"
+            data-dismiss="modal"
+        >
+            <span class="htmx-indicator spinner-border spinner-border-sm cancelloading" role="status" aria-hidden="true"></span>
+            Batal
+        </button>
+        <button 
+            type="submit"
+            class="btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata"
+        >
+            <span class="htmx-indicator spinner-border spinner-border-sm formloading" role="status" aria-hidden="true"></span>
+            Simpan
+        </button>
+    </div>
+}
+
+templ CloseFormGantiPassword() {
+    <button 
+        type="button" 
+        hx-on::after-request={ JSHideModal("#modal-ganti-pass") }
+        hx-post="/corp/dashboard_pic/tutupgantipassword"
+        hx-target="#body-ganti-pass"
+        hx-swap="outerHTML"
+        class="close btnactcancel"
+        data-dismiss="modal"
+        aria-label="Close"
+    >
+        <i aria-hidden="true" class="ki ki-close"></i>
+    </button>
+}
+
+script JSHideModal(modalID string) {
+    $(modalID).modal('hide')
+}
+
+script JSShowModal(modalID string) {
+    $(modalID).modal('show')
+    const btnActCancel = document.querySelectorAll('.btnactcancel');
+    const btnActSaveData = document.querySelectorAll('.btnactsavedata');
+
+    for (let i = 0; i < btnActCancel.length; i++) {
+        btnActCancel[i].removeAttribute('disabled');
+    }
+    for (let i = 0; i < btnActSaveData.length; i++) {
+        btnActSaveData[i].removeAttribute('disabled');
+    }
+}
+
+script HandleFormBeforeRequest() {
+    const btnActCancel = document.querySelectorAll('.btnactcancel');
+    const btnActSaveData = document.querySelectorAll('.btnactsavedata');
+
+    for (let i = 0; i < btnActCancel.length; i++) {
+        btnActCancel[i].setAttribute('disabled', 'true');
+    }
+    for (let i = 0; i < btnActSaveData.length; i++) {
+        btnActSaveData[i].setAttribute('disabled', 'true');
+    }
+}
+
+script HandleFormAfterGantiPass() {
+    const btnActCancel = document.querySelectorAll('.btnactcancel');
+    const btnActSaveData = document.querySelectorAll('.btnactsavedata');
+
+    for (let i = 0; i < btnActCancel.length; i++) {
+        btnActCancel[i].removeAttribute('disabled');
+    }
+    for (let i = 0; i < btnActSaveData.length; i++) {
+        btnActSaveData[i].removeAttribute('disabled');
+    }
+}
\ No newline at end of file
diff --git a/component/sidebar_user_profile/modal_sidebar_user_templ.go b/component/sidebar_user_profile/modal_sidebar_user_templ.go
new file mode 100644
index 0000000..b696b8f
--- /dev/null
+++ b/component/sidebar_user_profile/modal_sidebar_user_templ.go
@@ -0,0 +1,336 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package sidebaruserprofile
+
+//lint:file-ignore SA4006 This context is only used if a nested component is present.
+
+import "github.com/a-h/templ"
+import "context"
+import "io"
+import "bytes"
+
+import (
+	"cpone/component/customtextfield"
+	"cpone/component/modal"
+	"cpone/models"
+)
+
+func SidebarForm() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var1 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var1 == nil {
+			templ_7745c5c3_Var1 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, HandleFormBeforeRequest(), HandleFormAfterGantiPass())
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<form id=\"form-ganti-password\" class=\"form\" hx-post=\"/corp/dashboard_pic/gantipassword\" hx-target=\"#body-ganti-pass\" hx-swap=\"outerHTML\" hx-indicator=\".formloading\" hx-on::before-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 templ.ComponentScript = HandleFormBeforeRequest()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var2.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 templ.ComponentScript = HandleFormAfterGantiPass()
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var3.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalcomponent.Modal("modal-ganti-pass",
+			"Ganti Password",
+			ModalGantiPassword(),
+			ActionFormGantiPassword(),
+			CloseFormGantiPassword(),
+		).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</form></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ModalGantiPassword() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var4 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var4 == nil {
+			templ_7745c5c3_Var4 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"body-ganti-pass\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "oldPassID",
+			Name:        "oldpassid",
+			Type:        "password",
+			Placeholder: "Masukan password lama",
+			Label:       "Password Lama",
+		}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "newPassID",
+			Name:        "newpassid",
+			Type:        "password",
+			Placeholder: "Masukan password baru",
+			Label:       "Password Baru",
+		}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(models.CustomTextFieldv2Prm{ID: "reNewPassID",
+			Name:        "renewpassid",
+			Type:        "password",
+			Placeholder: "Masukan ulang password baru",
+			Label:       "Ulangi Password Baru",
+		}).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><script>\r\n        document.addEventListener('htmx:afterSwap', function(event) {\r\n            $('.selectpicker').selectpicker('refresh');\r\n        })\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func RetModalGantiPassword(
+	oldPass models.CustomTextFieldv2Prm,
+	newPass models.CustomTextFieldv2Prm,
+	renewPass models.CustomTextFieldv2Prm,
+	hxOnLoad templ.ComponentScript,
+) templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, hxOnLoad)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div id=\"body-ganti-pass\" hx-on::load=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var6 templ.ComponentScript = hxOnLoad
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var6.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(oldPass).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(newPass).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = customtextfield.CustomTextFieldv2(renewPass).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><script>\r\n        document.addEventListener('htmx:afterSwap', function(event) {\r\n            $('.selectpicker').selectpicker('refresh');\r\n        })\r\n    </script>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func ActionFormGantiPassword() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var7 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var7 == nil {
+			templ_7745c5c3_Var7 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JSHideModal("#modal-ganti-pass"))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var8 templ.ComponentScript = JSHideModal("#modal-ganti-pass")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var8.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"/corp/dashboard_pic/tutupgantipassword\" hx-target=\"#body-ganti-pass\" hx-swap=\"outerHTML\" hx-indicator=\".cancelloading\" type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4 btnactcancel\" data-dismiss=\"modal\"><span class=\"htmx-indicator spinner-border spinner-border-sm cancelloading\" role=\"status\" aria-hidden=\"true\"></span> Batal\r</button> <button type=\"submit\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg btnactsavedata\"><span class=\"htmx-indicator spinner-border spinner-border-sm formloading\" role=\"status\" aria-hidden=\"true\"></span> Simpan\r</button></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func CloseFormGantiPassword() templ.Component {
+	return templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templ_7745c5c3_W.(*bytes.Buffer)
+		if !templ_7745c5c3_IsBuffer {
+			templ_7745c5c3_Buffer = templ.GetBuffer()
+			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
+		}
+		ctx = templ.InitializeContext(ctx)
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		templ_7745c5c3_Err = templ.RenderScriptItems(ctx, templ_7745c5c3_Buffer, JSHideModal("#modal-ganti-pass"))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" hx-on::after-request=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var10 templ.ComponentScript = JSHideModal("#modal-ganti-pass")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ_7745c5c3_Var10.Call)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-post=\"/corp/dashboard_pic/tutupgantipassword\" hx-target=\"#body-ganti-pass\" hx-swap=\"outerHTML\" class=\"close btnactcancel\" data-dismiss=\"modal\" aria-label=\"Close\"><i aria-hidden=\"true\" class=\"ki ki-close\"></i></button>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
+
+func JSHideModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JSHideModal_4530`,
+		Function: `function __templ_JSHideModal_4530(modalID){$(modalID).modal('hide')
+}`,
+		Call:       templ.SafeScript(`__templ_JSHideModal_4530`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JSHideModal_4530`, modalID),
+	}
+}
+
+func JSShowModal(modalID string) templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_JSShowModal_658d`,
+		Function: `function __templ_JSShowModal_658d(modalID){$(modalID).modal('show')
+    const btnActCancel = document.querySelectorAll('.btnactcancel');
+    const btnActSaveData = document.querySelectorAll('.btnactsavedata');
+
+    for (let i = 0; i < btnActCancel.length; i++) {
+        btnActCancel[i].removeAttribute('disabled');
+    }
+    for (let i = 0; i < btnActSaveData.length; i++) {
+        btnActSaveData[i].removeAttribute('disabled');
+    }
+}`,
+		Call:       templ.SafeScript(`__templ_JSShowModal_658d`, modalID),
+		CallInline: templ.SafeScriptInline(`__templ_JSShowModal_658d`, modalID),
+	}
+}
+
+func HandleFormBeforeRequest() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormBeforeRequest_7bdf`,
+		Function: `function __templ_HandleFormBeforeRequest_7bdf(){const btnActCancel = document.querySelectorAll('.btnactcancel');
+    const btnActSaveData = document.querySelectorAll('.btnactsavedata');
+
+    for (let i = 0; i < btnActCancel.length; i++) {
+        btnActCancel[i].setAttribute('disabled', 'true');
+    }
+    for (let i = 0; i < btnActSaveData.length; i++) {
+        btnActSaveData[i].setAttribute('disabled', 'true');
+    }
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormBeforeRequest_7bdf`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormBeforeRequest_7bdf`),
+	}
+}
+
+func HandleFormAfterGantiPass() templ.ComponentScript {
+	return templ.ComponentScript{
+		Name: `__templ_HandleFormAfterGantiPass_cc6f`,
+		Function: `function __templ_HandleFormAfterGantiPass_cc6f(){const btnActCancel = document.querySelectorAll('.btnactcancel');
+    const btnActSaveData = document.querySelectorAll('.btnactsavedata');
+
+    for (let i = 0; i < btnActCancel.length; i++) {
+        btnActCancel[i].removeAttribute('disabled');
+    }
+    for (let i = 0; i < btnActSaveData.length; i++) {
+        btnActSaveData[i].removeAttribute('disabled');
+    }
+}`,
+		Call:       templ.SafeScript(`__templ_HandleFormAfterGantiPass_cc6f`),
+		CallInline: templ.SafeScriptInline(`__templ_HandleFormAfterGantiPass_cc6f`),
+	}
+}
diff --git a/component/sidebar_user_profile/sidebar_user_profile.templ b/component/sidebar_user_profile/sidebar_user_profile.templ
index a78df87..53fee87 100644
--- a/component/sidebar_user_profile/sidebar_user_profile.templ
+++ b/component/sidebar_user_profile/sidebar_user_profile.templ
@@ -22,26 +22,33 @@ templ Navbaruserprofile(dataUser models.User) {
 			<!--end::Header-->
 			<!--begin::Separator-->
 			<div class="separator separator-dashed my-7"></div>
-			<!--end::Separator-->
-			<!--begin::Notifications-->
-			// <div>
-			// 	<!--begin:Heading-->
-			// 	<h5 class="mb-5">
-			// 		Recent Notifications
-			// 	</h5>
-			// 	<!--end:Heading-->
-			// 	<!--begin::Item-->
-			// 	@NotificationCard()
-			// 	<!--end::Item-->
-			// </div>
-			<!--end::Notifications-->
+			<div class="navi mt-2">
+				<a 
+					class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
+					style="width: 100%"
+					data-toggle="modal"
+					data-target="#modal-ganti-pass"
+				>
+					Change Password
+				</a>
+			</div>
+			<div class="navi mt-2">
+				<a 
+					class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block"
+					hx-get="/login/signout"
+					style="width: 100%"
+				>
+					Sign Out
+				</a>
+			</div>
 		</div>
 		<!--end::Content-->
 	</div>
+	@SidebarForm()
 }
 
 templ ProfileHeader(dataUser models.User) {
-	<div class="d-flex align-items-center mt-5">
+	<div class="d-flex mt-5">
 		<div class="symbol symbol-100 mr-5 p-2 bg-primary-transparent">
 			// <div class="symbol-label" style="background-image:url('/assets/media/users/300_21.jpg')"></div>
 			// <i class="symbol-badge bg-success"></i>
@@ -54,14 +61,6 @@ templ ProfileHeader(dataUser models.User) {
 			<div class="text-muted mt-1">
 				{ dataUser.UserPosition }
 			</div>
-			<div class="navi mt-2">
-				<a 
-					class="btn btn-sm btn-light-primary font-weight-bolder py-2 px-5"
-					hx-get="/login/signout"
-				>
-					Sign Out
-				</a>
-			</div>
 		</div>
 	</div>
 }
diff --git a/component/sidebar_user_profile/sidebar_user_profile_templ.go b/component/sidebar_user_profile/sidebar_user_profile_templ.go
index e9bcc9e..53ea029 100644
--- a/component/sidebar_user_profile/sidebar_user_profile_templ.go
+++ b/component/sidebar_user_profile/sidebar_user_profile_templ.go
@@ -33,7 +33,11 @@ func Navbaruserprofile(dataUser models.User) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Separator--><div class=\"separator separator-dashed my-7\"></div><!--end::Separator--><!--begin::Notifications--><!--end::Notifications--></div><!--end::Content--></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Header--><!--begin::Separator--><div class=\"separator separator-dashed my-7\"></div><div class=\"navi mt-2\"><a class=\"btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block\" style=\"width: 100%\" data-toggle=\"modal\" data-target=\"#modal-ganti-pass\">Change Password\r</a></div><div class=\"navi mt-2\"><a class=\"btn btn-sm btn-light-primary font-weight-bolder py-2 px-5 block\" hx-get=\"/login/signout\" style=\"width: 100%\">Sign Out\r</a></div></div><!--end::Content--></div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = SidebarForm().Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -57,14 +61,14 @@ func ProfileHeader(dataUser models.User) templ.Component {
 			templ_7745c5c3_Var2 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex align-items-center mt-5\"><div class=\"symbol symbol-100 mr-5 p-2 bg-primary-transparent\"><span class=\"iconify symbol-label bg-primary-transparent text-primary\" data-icon=\"gravity-ui:person\"></span></div><div class=\"d-flex flex-column\"><a href=\"#\" class=\"font-weight-bold font-size-h5 text-dark-75 text-hover-primary\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex mt-5\"><div class=\"symbol symbol-100 mr-5 p-2 bg-primary-transparent\"><span class=\"iconify symbol-label bg-primary-transparent text-primary\" data-icon=\"gravity-ui:person\"></span></div><div class=\"d-flex flex-column\"><a href=\"#\" class=\"font-weight-bold font-size-h5 text-dark-75 text-hover-primary\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
 		var templ_7745c5c3_Var3 string
 		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(dataUser.UserFullName)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebar_user_profile\sidebar_user_profile.templ`, Line: 52, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebar_user_profile\sidebar_user_profile.templ`, Line: 59, Col: 27}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 		if templ_7745c5c3_Err != nil {
@@ -77,13 +81,13 @@ func ProfileHeader(dataUser models.User) templ.Component {
 		var templ_7745c5c3_Var4 string
 		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(dataUser.UserPosition)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebar_user_profile\sidebar_user_profile.templ`, Line: 55, Col: 27}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `component\sidebar_user_profile\sidebar_user_profile.templ`, Line: 62, Col: 27}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"navi mt-2\"><a class=\"btn btn-sm btn-light-primary font-weight-bolder py-2 px-5\" hx-get=\"/login/signout\">Sign Out\r</a></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/component/toastbootstrap/customtoastv2.templ b/component/toastbootstrap/customtoastv2.templ
index 035da1f..57922c7 100644
--- a/component/toastbootstrap/customtoastv2.templ
+++ b/component/toastbootstrap/customtoastv2.templ
@@ -41,7 +41,7 @@ templ CustomToastV2Show(title string, message string, typeToast string) {
 		aria-atomic="true"
 		id="notification-001"
 		hx-swap-oob="true"
-		hx-get="/dev/hidetoast"
+		hx-get="/home/hidetoast"
 		hx-trigger="load delay:3s"
 		hx-target="this"
 		style="border-radius: 8px 8px 8px 8px;"
diff --git a/component/toastbootstrap/customtoastv2_templ.go b/component/toastbootstrap/customtoastv2_templ.go
index 47e7367..6da06d4 100644
--- a/component/toastbootstrap/customtoastv2_templ.go
+++ b/component/toastbootstrap/customtoastv2_templ.go
@@ -56,7 +56,7 @@ func CustomToastV2Show(title string, message string, typeToast string) templ.Com
 			templ_7745c5c3_Var1 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast toast-top-right fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/dev/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"toast toast-top-right fade show\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" id=\"notification-001\" hx-swap-oob=\"true\" hx-get=\"/home/hidetoast\" hx-trigger=\"load delay:3s\" hx-target=\"this\" style=\"border-radius: 8px 8px 8px 8px;\">")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/handlers/corporate/account.handlers.go b/handlers/corporate/account.handlers.go
index 95259e6..4e9ce6a 100644
--- a/handlers/corporate/account.handlers.go
+++ b/handlers/corporate/account.handlers.go
@@ -1,16 +1,21 @@
 package corporate_handlers
 
 import (
+	sidebaruserprofile "cpone/component/sidebar_user_profile"
+	customtoastv2 "cpone/component/toastbootstrap"
 	"cpone/models"
+	"cpone/utils"
 	"net/http"
+	"strings"
 	"time"
 
+	"github.com/a-h/templ"
 	"github.com/golang-jwt/jwt/v5"
 	"github.com/labstack/echo/v4"
 )
 
 type AccountService interface {
-	ChangePasswordPIC(token string, currPassword string, newPassword string) (models.ResponseStatus, error)
+	ChangePasswordPIC(host string, token string, currPassword string, newPassword string) (models.ResponseStatus, error)
 	ChangePasswordPAT(token string, currPassword string, newPassword string) (models.ResponseStatus, error)
 }
 
@@ -30,14 +35,74 @@ func (as *AccountHandler) HandleChangePassword(c echo.Context) error {
 	token := userToken.Raw
 	claims := userToken.Claims.(jwt.MapClaims)
 	userGroup := claims["M_UserGroupDashboard"].(string)
+	h := c.Request().Host
 
-	old_pass := c.FormValue("oldpassword")
-	new_pass := c.FormValue("newpassword")
+	old_pass := c.FormValue("oldpassid")
+	new_pass := c.FormValue("newpassid")
+	re_new_pass := c.FormValue("renewpassid")
+	// logger.Info("params", zap.Any("old", old_pass), zap.Any("new", new_pass), zap.Any("re-new", re_new_pass))
+
+	old_validation := ""
+	new_validation := ""
+	renew_validation := ""
+	errorPop := ""
+
+	if strings.TrimSpace(old_pass) == "" {
+		old_validation = "Tidak boleh kosong"
+		errorPop = "Tidak boleh kosong"
+	}
+	if strings.TrimSpace(new_pass) == "" {
+		new_validation = "Tidak boleh kosong"
+		errorPop = "Tidak boleh kosong"
+	}
+	if strings.TrimSpace(re_new_pass) == "" {
+		renew_validation = "Tidak boleh kosong"
+		errorPop = "Tidak boleh kosong"
+	}
+	if strings.TrimSpace(new_pass) != strings.TrimSpace(re_new_pass) {
+		new_validation = "Password tidak sama"
+		renew_validation = "Password tidak sama"
+		errorPop = "Password tidak sama"
+	}
+
+	if old_validation != "" || new_validation != "" || renew_validation != "" {
+		newBody := sidebaruserprofile.RetModalGantiPassword(
+			models.CustomTextFieldv2Prm{
+				ID:          "oldPassID",
+				Name:        "oldpassid",
+				Type:        "password",
+				Placeholder: "Masukan password lama",
+				Label:       "Password Lama",
+				ErrorMsg:    old_validation,
+			},
+			models.CustomTextFieldv2Prm{
+				ID:          "newPassID",
+				Name:        "newpassid",
+				Type:        "password",
+				Placeholder: "Masukan password baru",
+				Label:       "Password Baru",
+				ErrorMsg:    new_validation,
+			},
+			models.CustomTextFieldv2Prm{
+				ID:          "reNewPassID",
+				Name:        "renewpassid",
+				Type:        "password",
+				Placeholder: "Masukan ulang password baru",
+				Label:       "Ulangi Password Baru",
+				ErrorMsg:    renew_validation,
+			},
+			sidebaruserprofile.JSHideModal(""),
+		)
+		toast := customtoastv2.CustomToastV2Show("Warning", errorPop, "warning")
+		return utils.ViewMulti(c, []templ.Component{toast, newBody})
+	}
 
 	if userGroup == "pic" {
-		resp, err := as.AccountService.ChangePasswordPIC(token, old_pass, new_pass)
+		resp, err := as.AccountService.ChangePasswordPIC(h, token, old_pass, new_pass)
 		if err != nil {
-			return err
+			newBody := sidebaruserprofile.ModalGantiPassword()
+			toast := customtoastv2.CustomToastV2Show("Warning", err.Error(), "warning")
+			return utils.ViewMulti(c, []templ.Component{toast, newBody})
 		}
 		response = resp
 	}
@@ -45,13 +110,17 @@ func (as *AccountHandler) HandleChangePassword(c echo.Context) error {
 	if userGroup == "patient" {
 		resp, err := as.AccountService.ChangePasswordPAT(token, old_pass, new_pass)
 		if err != nil {
-			return err
+			newBody := sidebaruserprofile.ModalGantiPassword()
+			toast := customtoastv2.CustomToastV2Show("Warning", "Error ganti password pat", "warning")
+			return utils.ViewMulti(c, []templ.Component{toast, newBody})
 		}
 		response = resp
 	}
 
 	if response.Status == "ERR" {
-		return nil
+		newBody := sidebaruserprofile.ModalGantiPassword()
+		toast := customtoastv2.CustomToastV2Show("Warning", response.Message, "warning")
+		return utils.ViewMulti(c, []templ.Component{toast, newBody})
 	}
 
 	expire := time.Now().Add(-7 * 24 * time.Hour)
@@ -65,6 +134,7 @@ func (as *AccountHandler) HandleChangePassword(c echo.Context) error {
 
 	ret := `
 	<script>
+		$("#body-ganti-pass").modal('hide')
 		console.log("signout")
 		localStorage.removeItem("token")
 		localStorage.removeItem("user")
@@ -78,3 +148,9 @@ func (as *AccountHandler) HandleChangePassword(c echo.Context) error {
 	c.Response().Header().Set("HX-Trigger", "script")
 	return c.String(http.StatusOK, ret)
 }
+
+func (as *AccountHandler) HandleCloseChangePassword(c echo.Context) error {
+	newBody := sidebaruserprofile.ModalGantiPassword()
+
+	return utils.View(c, newBody)
+}
diff --git a/handlers/public/toast.handlers.go b/handlers/public/toast.handlers.go
new file mode 100644
index 0000000..5a7961e
--- /dev/null
+++ b/handlers/public/toast.handlers.go
@@ -0,0 +1,16 @@
+package public_handlers
+
+import (
+	customtoastv2 "cpone/component/toastbootstrap"
+	"cpone/utils"
+
+	"github.com/labstack/echo/v4"
+)
+
+func HandlerHideToast(c echo.Context) error {
+	toastComponent := customtoastv2.CustomToastV2Hide()
+
+	si := toastComponent
+
+	return utils.View(c, si)
+}
diff --git a/handlers/routes.go b/handlers/routes.go
index 5869e31..f5ffe2a 100644
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -71,8 +71,8 @@ func SetupRoutesPublic(app *echo.Echo, appStore db.AppStore) {
 	public.GET("landingpage", lh.ShowLandingPage)
 	public.GET("home", lh.ShowLandingPage)
 	public.GET("home/login", lh.HandleBtnLogin)
-	// loginHdr := public_handlers.NewLoginHandler(l)
-	// public.GET("login", loginHdr.HandlerShowLogin)
+
+	public.GET("home/hidetoast", public_handlers.HandlerHideToast)
 
 	loginServ := public_services.NewServicesLogin(appStore)
 	loginHadlr := public_handlers.NewLoginHandler(loginServ)
@@ -109,6 +109,12 @@ func SetupRoutesCorporate(app *echo.Echo, appStore db.AppStore) {
 	lh := corporate_handlers.NewCompanyHandler(l)
 	corp.GET("/company", lh.ShowCompany)
 
+	// ganti password
+	accountService := corporate_services.NewAccountService(appStore)
+	accountHandler := corporate_handlers.NewAccountHandler(accountService)
+	corp.POST("/dashboard_pic/tutupgantipassword", accountHandler.HandleCloseChangePassword)
+	corp.POST("/dashboard_pic/gantipassword", accountHandler.HandleChangePassword)
+
 	// dashboard_pic
 	dashbrdPicServ := corporate_services.NewDashboardPicServices(appStore)
 	dashbrdPicHandl := corporate_handlers.NewDashboardPicHandler(dashbrdPicServ)
diff --git a/services/corporate/account.services.go b/services/corporate/account.services.go
index 121d289..bc22a95 100644
--- a/services/corporate/account.services.go
+++ b/services/corporate/account.services.go
@@ -3,6 +3,7 @@ package corporate_services
 import (
 	"cpone/db"
 	"cpone/models"
+	"cpone/package/config"
 	"encoding/json"
 	"io"
 	"net/http"
@@ -19,10 +20,10 @@ func NewAccountService(aStore db.AppStore) *AccountService {
 	}
 }
 
-func (as *AccountService) ChangePasswordPIC(token string, currPassword string, newPassword string) (models.ResponseStatus, error) {
+func (as *AccountService) ChangePasswordPIC(host string, token string, currPassword string, newPassword string) (models.ResponseStatus, error) {
 	var ret models.ResponseStatus
 
-	uri := "/one-api/mockup/system/menu/change_password_pic"
+	uri := "https://" + config.Data.Get("servername") + "/one-api/mockup/system/menu/change_password_pic"
 
 	params := url.Values{}
 	params.Add("new", newPassword)
@@ -63,7 +64,7 @@ func (as *AccountService) ChangePasswordPIC(token string, currPassword string, n
 func (as *AccountService) ChangePasswordPAT(token string, currPassword string, newPassword string) (models.ResponseStatus, error) {
 	var ret models.ResponseStatus
 
-	uri := "/one-api/mockup/system/menu/change_password_pat"
+	uri := "https://" + config.Data.Get("servername") + "/one-api/mockup/system/menu/change_password_pat"
 
 	params := url.Values{}
 	params.Add("new", newPassword)
diff --git a/services/corporate/mcudetail/tabdaftarpeserta.services.go b/services/corporate/mcudetail/tabdaftarpeserta.services.go
index 6144800..0d033e5 100644
--- a/services/corporate/mcudetail/tabdaftarpeserta.services.go
+++ b/services/corporate/mcudetail/tabdaftarpeserta.services.go
@@ -4,6 +4,7 @@ import (
 	"bytes"
 	"cpone/db"
 	"cpone/models"
+	"cpone/package/config"
 	dbx "cpone/package/database"
 	"encoding/json"
 	"fmt"
@@ -82,19 +83,9 @@ func (tdps *TabDaftarPesertaServices) GetListDaftarPesertaMCU(id string, current
 }
 
 func (tdps *TabDaftarPesertaServices) GenerataPasswordMCU(mgmMCUID string, host string) (models.GeneratePasswordResponse, error) {
-
-	// Generate email dan password utk seluruh peserta mgm mcu
-	// https://devcpone.aplikasi.web.id/one-api/tools/auth_patient/generate/<XID>
-	// <XID> :  mgmMcuID
-
-	// if host == "localhost:5000" {
-	// 	host = "https://devcpone.aplikasi.web.id"
-	// }
-
 	logger, _ := zap.NewProduction()
 	var ret models.GeneratePasswordResponse
-	// uri := "https://cpone.aplikasi.web.id/one-api/tools/auth_patient/generate/" + mgmMCUID
-	uri := "https://devcpone.aplikasi.web.id/one-api/tools/auth_patient/generate/" + mgmMCUID
+	uri := "https://" + config.Data.Get("servername") + "/one-api/tools/auth_patient/generate/" + mgmMCUID
 
 	payload := []byte{}
 	resp, err := http.Post(uri, "application/json", bytes.NewBuffer(payload))
diff --git a/services/public/login.services.go b/services/public/login.services.go
index d6e9ea6..48dfd3b 100644
--- a/services/public/login.services.go
+++ b/services/public/login.services.go
@@ -3,6 +3,7 @@ package public_services
 import (
 	"cpone/db"
 	"cpone/models"
+	"cpone/package/config"
 	"encoding/json"
 	"io"
 	"net/http"
@@ -26,12 +27,7 @@ func (ls *ServicesLogin) MultiSignIn(username string, password string, host stri
 	logger, _ := zap.NewProduction()
 	var ret models.Response
 
-	// if host == "localhost:5000" {
-	// 	host = "https://cpone.aplikasi.web.id"
-	// }
-
-	// uri := "https://cpone.aplikasi.web.id/one-api/v1/system/auth/multi_login"
-	uri := "https://devcpone.aplikasi.web.id/one-api/v1/system/auth/multi_login"
+	uri := "https://" + config.Data.Get("servername") + "/one-api/v1/system/auth/multi_login"
 
 	params := url.Values{}
 	params.Add("username", username)