diff --git a/assets/andy/usergroup.html b/assets/andy/usergroup.html
index 39a2d6d..86b1985 100644
--- a/assets/andy/usergroup.html
+++ b/assets/andy/usergroup.html
@@ -143,6 +143,68 @@
       </table>
     </div>
     <div></div>
+    <!-- Button trigger modal -->
+    <button
+      type="button"
+      class="btn btn-primary"
+      data-toggle="modal"
+      data-target="#exampleModal"
+    >
+      Launch demo modal
+    </button>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      data-backdrop="static"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content rounded-lg">
+          <div class="modal-header border-bottom-0">
+            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+            <button
+              type="button"
+              class="close"
+              data-dismiss="modal"
+              aria-label="Close"
+            >
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body border-bottom-0">
+            <p>Apakah anda yakin menghapus user group berikut ?</p>
+            <div class="card rounded-lg">
+              <div class="card-body d-flex flex-row">
+                <div class="d-flex flex-column flex-fill">
+                  <div class="mb-3 text-disabled font-weight-bold">asas</div>
+                  <div class="mb-3 text-disabled">b</div>
+                </div>
+                <div class="d-flex flex-column flex-fill">
+                  <div class="mb-3 font-weight-bold">
+                    d daf;k sa;d sa;ldk s;adj;sads[oai sadksa[ d[
+                  </div>
+                  <div class="mb-3">c</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer border-top-0">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-dismiss="modal"
+            >
+              Close
+            </button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="modal fade modal-list-print"
       id="exampleModalSizeLg"
diff --git a/handlers/mastermenuusergroup.handlers.go b/handlers/mastermenuusergroup.handlers.go
index 721ce7f..6921e55 100644
--- a/handlers/mastermenuusergroup.handlers.go
+++ b/handlers/mastermenuusergroup.handlers.go
@@ -2,10 +2,13 @@ package handlers
 
 import (
 	"fmt"
+	"strconv"
 
 	"github.com/a-h/templ"
 	"github.com/emarifer/go-templ-project-structure/models"
 	"github.com/emarifer/go-templ-project-structure/services"
+	"github.com/emarifer/go-templ-project-structure/views/component/pagination"
+	tablecomponent "github.com/emarifer/go-templ-project-structure/views/component/table"
 	mastermenuusergroup "github.com/emarifer/go-templ-project-structure/views/mastermenuusergroup"
 	"github.com/labstack/echo/v4"
 )
@@ -74,6 +77,29 @@ func (lh *MasterMenuUserGroupHandler) ChangeFormEdit(c echo.Context) error {
 
 	return lh.View(c, vw)
 }
+func (lh *MasterMenuUserGroupHandler) HandleChangePage(c echo.Context) error {
+	page := c.QueryParam("page")
+	currPage := c.QueryParam("currentPage")
+	dataUserGroup, err := lh.MasterMenuUserGroupService.GetUserGroup()
+
+	if err != nil {
+		fmt.Println(dataUserGroup)
+		return err
+	}
+	pageInt, err := strconv.Atoi(page)
+	if err != nil {
+		fmt.Println("page err")
+		return err
+	}
+	currPageInt, err := strconv.Atoi(currPage)
+	if err != nil {
+		fmt.Println("currpage err")
+		return err
+	}
+	vw := tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, mastermenuusergroup.TableRow(dataUserGroup), pagination.Pagination(pageInt, currPageInt))
+
+	return lh.View(c, vw)
+}
 
 func (uh *MasterMenuUserGroupHandler) View(c echo.Context, cmp templ.Component) error {
 	c.Response().Header().Set(echo.HeaderContentType, echo.MIMETextHTML)
diff --git a/handlers/routes.go b/handlers/routes.go
index e2d9099..ade91d3 100644
--- a/handlers/routes.go
+++ b/handlers/routes.go
@@ -30,6 +30,7 @@ func SetupRoutesLandingPage(app *echo.Echo, h *LandingPageHandler, mastermenuuse
 	// clientusergroup.GET("/md", mastermenuusergroupHandler.HandlerShowMasterMenuUserGroup)
 	clientgroup.GET("/usergroup", mastermenuusergroupHandler.HandlerShowMasterMenuUserGroup)
 	clientgroup.GET("/usergroup/edit", mastermenuusergroupHandler.ChangeFormEdit)
+	clientgroup.GET("/usergroup/pagination", mastermenuusergroupHandler.HandleChangePage)
 
 }
 func SetupRoutesPieChart(app *echo.Echo, h *PiechartHandler) {
diff --git a/services/mastermenuusergroup.services.go b/services/mastermenuusergroup.services.go
index 81feea9..36429bd 100644
--- a/services/mastermenuusergroup.services.go
+++ b/services/mastermenuusergroup.services.go
@@ -3,7 +3,6 @@ package services
 import (
 	"fmt"
 	"strconv"
-	"time"
 
 	"github.com/emarifer/go-templ-project-structure/db"
 	"github.com/emarifer/go-templ-project-structure/models"
@@ -574,7 +573,7 @@ func (ug *ServicesMasterMenuUserGroup) GetUserGroupByID(id string) (models.UserG
 			data = v
 		}
 	}
-	time.Sleep(5 * time.Second)
+	// time.Sleep(5 * time.Second)
 	return data, nil
 }
 
diff --git a/views/component/modal/modal_confirmation.templ b/views/component/modal/modal_confirmation.templ
new file mode 100644
index 0000000..3e3503b
--- /dev/null
+++ b/views/component/modal/modal_confirmation.templ
@@ -0,0 +1,52 @@
+package modalcomponent
+
+templ ModalConfirmation(
+	id string,
+	modalTitle string,
+	message string,
+	btnClose templ.Component,
+	datHeader []string,
+	dataText []string,
+	modalAction templ.Component) {
+	<div
+		class="modal fade"
+		id={ id }
+		tabindex="-1"
+		aria-labelledby="exampleModalLabel"
+		data-backdrop="static"
+		aria-hidden="true"
+	>
+		<div class="modal-dialog modal-dialog-centered">
+			<div class="modal-content rounded-lg">
+				<div class="modal-header border-bottom-0">
+					<h6 class="modal-title text-black font-weight-bolder">
+						{ modalTitle }
+					</h6>
+					@btnClose
+				</div>
+				<div class="modal-body border-bottom-0">
+					<p>{ message }</p>
+					<div class="card rounded-lg">
+						<div class="card-body d-flex flex-row">
+							<div class="d-flex flex-column ">
+								for _, v := range datHeader {
+									<div class="mb-3 text-disabled font-weight-bold mr-5">{ v }</div>
+								}
+							</div>
+							<div class="d-flex flex-column ">
+								for _, v := range dataText {
+									<div class="mb-3 font-weight-bold">
+										{ v }
+									</div>
+								}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="modal-footer border-top-0">
+					@modalAction
+				</div>
+			</div>
+		</div>
+	</div>
+}
diff --git a/views/component/modal/modal_confirmation_templ.go b/views/component/modal/modal_confirmation_templ.go
new file mode 100644
index 0000000..eeb1046
--- /dev/null
+++ b/views/component/modal/modal_confirmation_templ.go
@@ -0,0 +1,143 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package modalcomponent
+
+//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"
+
+func ModalConfirmation(
+	id string,
+	modalTitle string,
+	message string,
+	btnClose templ.Component,
+	datHeader []string,
+	dataText []string,
+	modalAction templ.Component) 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 class=\"modal fade\" id=\"")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var2 string
+		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(id)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\modal\modal_confirmation.templ`, Line: 13, Col: 9}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" tabindex=\"-1\" aria-labelledby=\"exampleModalLabel\" data-backdrop=\"static\" aria-hidden=\"true\"><div class=\"modal-dialog modal-dialog-centered\"><div class=\"modal-content rounded-lg\"><div class=\"modal-header border-bottom-0\"><h6 class=\"modal-title text-black font-weight-bolder\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var3 string
+		templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(modalTitle)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\modal\modal_confirmation.templ`, Line: 23, Col: 18}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h6>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = btnClose.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"modal-body border-bottom-0\"><p>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		var templ_7745c5c3_Var4 string
+		templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(message)
+		if templ_7745c5c3_Err != nil {
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\modal\modal_confirmation.templ`, Line: 28, Col: 17}
+		}
+		_, 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("</p><div class=\"card rounded-lg\"><div class=\"card-body d-flex flex-row\"><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range datHeader {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-3 text-disabled font-weight-bold mr-5\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var5 string
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\modal\modal_confirmation.templ`, Line: 33, Col: 66}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"d-flex flex-column \">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for _, v := range dataText {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"mb-3 font-weight-bold\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(v)
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\modal\modal_confirmation.templ`, Line: 39, Col: 13}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></div><div class=\"modal-footer border-top-0\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = modalAction.Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div></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
+	})
+}
diff --git a/views/component/pagination/pagination.templ b/views/component/pagination/pagination.templ
new file mode 100644
index 0000000..9dd55bd
--- /dev/null
+++ b/views/component/pagination/pagination.templ
@@ -0,0 +1,17 @@
+package pagination 
+
+import "strconv"
+
+templ Pagination(length int, currentPage int) {
+	<div class="d-flex justify-content-between align-items-center flex-wrap">
+		<div class="d-flex flex-wrap py-2 mr-3">
+			for i:=0; i<length; i++ {
+				if (i+1) == currentPage {
+					<a href="#" class="btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1">{ strconv.Itoa(i+1) }</a>
+				} else {
+					<a href="#" class="btn btn-icon btn-sm border-0 btn-light mr-2 my-1">{ strconv.Itoa(i+1) }</a>
+				}
+			}
+		</div>
+	</div>
+}
diff --git a/views/component/pagination/pagination_templ.go b/views/component/pagination/pagination_templ.go
new file mode 100644
index 0000000..eaf1a44
--- /dev/null
+++ b/views/component/pagination/pagination_templ.go
@@ -0,0 +1,80 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package pagination
+
+//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 "strconv"
+
+func Pagination(length int, currentPage int) 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 class=\"d-flex justify-content-between align-items-center flex-wrap\"><div class=\"d-flex flex-wrap py-2 mr-3\">")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		for i := 0; i < length; i++ {
+			if (i + 1) == currentPage {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\pagination\pagination.templ`, Line: 10, Col: 118}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			} else {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i + 1))
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\pagination\pagination.templ`, Line: 12, Col: 93}
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+		}
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></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
+	})
+}
diff --git a/views/mastermenuusergroup/mastermenuusergroup.templ b/views/mastermenuusergroup/mastermenuusergroup.templ
index 80a4aad..1d919f1 100644
--- a/views/mastermenuusergroup/mastermenuusergroup.templ
+++ b/views/mastermenuusergroup/mastermenuusergroup.templ
@@ -8,6 +8,7 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/component/table"
 	"github.com/emarifer/go-templ-project-structure/views/component/modal"
 	"strconv"
+	"github.com/emarifer/go-templ-project-structure/views/component/pagination"
 )
 
 // "github.com/emarifer/go-templ-project-structure/views/component/sidebar_user_profile"
@@ -32,8 +33,8 @@ templ ContentMasterMenuUserGroup(ugData []models.UserGroup) {
 				<button type="button" class="btn btn-primary btn-block">Add New</button>
 			</div>
 		</div>
-		<div>
-			@tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(ugData), Pagination())
+		<div id="tabledata">
+			@tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(ugData), pagination.Pagination(20, 1))
 		</div>
 		@modalcomponent.Modal("dialogNew", "New - User Group", DialogNewBody("", ""), DialogNewAction(), BtnCloseNew())
 		@modalcomponent.Modal("dialogEdit", "Edit - User Group", DialogEditBody("", ""), DialogEditAction(), BtnCloseNew())
@@ -43,38 +44,87 @@ templ ContentMasterMenuUserGroup(ugData []models.UserGroup) {
 
 templ TableRow(data []models.UserGroup) {
 	// /usergroup/edit
+	// <a
+	// 	id="btneditug"
+	// 	type="button"
+	// 	class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
+	// 	onclick="htmx.trigger('#btneditug', 'htmx:abort')"
+	// 	hx-target="#modalbdyEdit"
+	// 	hx-swap="innerHTML"
+	// 	hx-get={ "/client/usergroup/edit?id=" + strconv.Itoa(v.UserGroupID) }
+	// 	hx-on::before-request="ShowLoading()"
+	// 	hx-on::after-request="ShowForm()"
+	// 	data-toggle="modal"
+	// 	data-target="#dialogEdit"
+	// >
+	// 	Edit
+	// </a>
 	for _, v := range data {
 		<tr>
 			<td>{ v.UserGroupKode }</td>
 			<td>{ v.UserGroupName }</td>
 			<td>
 				<div class="row px-5 d-flex justify-content-around">
-					<button
+					<a
 						id="btneditug"
 						type="button"
 						class="btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2"
-						onclick="htmx.trigger('#btneditug', 'htmx:abort')"
-						hx-target="#modalbdyEdit"
-						hx-swap="innerHTML"
-						hx-get={ "/client/usergroup/edit?id=" + strconv.Itoa(v.UserGroupID) }
-						hx-on::before-request="ShowLoading()"
-						hx-on::after-request="ShowForm()"
-						hx-indicator="#indicator"
 						data-toggle="modal"
-						data-target="#dialogEdit"
+						data-target={ "#dialogEdit" + strconv.Itoa(v.UserGroupID) }
 					>
 						Edit
-					</button>
+					</a>
 					<a
 						type="button"
 						class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2"
+						data-toggle="modal"
+						data-target={ "#dialogDelete" + strconv.Itoa(v.UserGroupID) }
 					>Hapus</a>
+					@modalcomponent.Modal("dialogEdit"+strconv.Itoa(v.UserGroupID),
+						"Edit - User Group",
+						DialogEditBody(v.UserGroupKode, v.UserGroupName),
+						DialogEditAction(),
+						BtnCloseNew())
+					@modalcomponent.ModalConfirmation(
+						"dialogDelete"+strconv.Itoa(v.UserGroupID),
+						"Konfirmasi",
+						"Apakah anda yakin menghapus user group berikut ?", BtnCloseDelete(),
+						[]string{"Kode", "User Group"}, []string{v.UserGroupKode, v.UserGroupName}, DialogDeleteAction())
 				</div>
 			</td>
 		</tr>
 	}
 }
 
+templ DialogDeleteAction() {
+	<div>
+		<button
+			type="button"
+			class="btn btn-outline-secondary font-weight-bolder rounded-lg mr-4"
+			data-dismiss="modal"
+		>
+			Batal
+		</button>
+		<button
+			type="button"
+			class="btn btn-primary btn-shadow font-weight-bold rounded-lg"
+		>
+			Yakin
+		</button>
+	</div>
+}
+
+templ BtnCloseDelete() {
+	<button
+		type="button"
+		class="close"
+		data-dismiss="modal"
+		aria-label="Close"
+	>
+		<i aria-hidden="true" class="ki ki-close"></i>
+	</button>
+}
+
 templ JSku() {
 	<script>
 		 function ShowLoading(evt) {
diff --git a/views/mastermenuusergroup/mastermenuusergroup_templ.go b/views/mastermenuusergroup/mastermenuusergroup_templ.go
index bd99e4a..95bb966 100644
--- a/views/mastermenuusergroup/mastermenuusergroup_templ.go
+++ b/views/mastermenuusergroup/mastermenuusergroup_templ.go
@@ -15,6 +15,7 @@ import (
 	"github.com/emarifer/go-templ-project-structure/services"
 	"github.com/emarifer/go-templ-project-structure/views/component/breadcrumbadmin"
 	"github.com/emarifer/go-templ-project-structure/views/component/modal"
+	"github.com/emarifer/go-templ-project-structure/views/component/pagination"
 	"github.com/emarifer/go-templ-project-structure/views/component/table"
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 	"strconv"
@@ -46,7 +47,7 @@ func ContentMasterMenuUserGroup(ugData []models.UserGroup) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		templ_7745c5c3_Err = tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(ugData), Pagination()).Render(ctx, templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(ugData), pagination.Pagination(20, 2)).Render(ctx, templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -98,7 +99,7 @@ func TableRow(data []models.UserGroup) templ.Component {
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(v.UserGroupKode)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 48, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 64, Col: 24}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -111,29 +112,110 @@ func TableRow(data []models.UserGroup) templ.Component {
 			var templ_7745c5c3_Var4 string
 			templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(v.UserGroupName)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 49, Col: 24}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 65, Col: 24}
 			}
 			_, 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("</td><td><div class=\"row px-5 d-flex justify-content-around\"><button id=\"btneditug\" type=\"button\" class=\"btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\" onclick=\"htmx.trigger(&#39;#btneditug&#39;, &#39;htmx:abort&#39;)\" hx-target=\"#modalbdyEdit\" hx-swap=\"innerHTML\" hx-get=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</td><td><div class=\"row px-5 d-flex justify-content-around\"><a id=\"btneditug\" type=\"button\" class=\"btneditusgp col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\" data-toggle=\"modal\" data-target=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var5 string
-			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("/client/usergroup/edit?id=" + strconv.Itoa(v.UserGroupID))
+			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs("#dialogEdit" + strconv.Itoa(v.UserGroupID))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 59, Col: 73}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 73, Col: 63}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" hx-on::before-request=\"ShowLoading()\" hx-on::after-request=\"ShowForm()\" hx-indicator=\"#indicator\" data-toggle=\"modal\" data-target=\"#dialogEdit\">Edit\r</button> <a type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2\">Hapus</a></div></td></tr>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Edit\r</a> <a type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-danger mb-2\" data-toggle=\"modal\" data-target=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
+			var templ_7745c5c3_Var6 string
+			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs("#dialogDelete" + strconv.Itoa(v.UserGroupID))
+			if templ_7745c5c3_Err != nil {
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\mastermenuusergroup\mastermenuusergroup.templ`, Line: 81, Col: 65}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\">Hapus</a>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = modalcomponent.Modal("dialogEdit"+strconv.Itoa(v.UserGroupID),
+				"Edit - User Group",
+				DialogEditBody(v.UserGroupKode, v.UserGroupName),
+				DialogEditAction(),
+				BtnCloseNew()).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = modalcomponent.ModalConfirmation(
+				"dialogDelete"+strconv.Itoa(v.UserGroupID),
+				"Konfirmasi",
+				"Apakah anda yakin menghapus user group berikut ?", BtnCloseDelete(),
+				[]string{"Kode", "User Group"}, []string{v.UserGroupKode, v.UserGroupName}, DialogDeleteAction()).Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></td></tr>")
+			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 DialogDeleteAction() 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><button type=\"button\" class=\"btn btn-outline-secondary font-weight-bolder rounded-lg mr-4\" data-dismiss=\"modal\">Batal\r</button> <button type=\"button\" class=\"btn btn-primary btn-shadow font-weight-bold rounded-lg\">Yakin\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 BtnCloseDelete() 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_Var8 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var8 == nil {
+			templ_7745c5c3_Var8 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button type=\"button\" class=\"close\" 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)
@@ -150,9 +232,9 @@ func JSku() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var6 == nil {
-			templ_7745c5c3_Var6 = templ.NopComponent
+		templ_7745c5c3_Var9 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var9 == nil {
+			templ_7745c5c3_Var9 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n\t\t function ShowLoading(evt) {\r\n        document\r\n          .getElementById(\"modalLoadEdit\")\r\n          .setAttribute(\"style\", \"display:block !important;\");\r\n        document\r\n          .getElementById(\"modalbdyEdit\")\r\n          .setAttribute(\"style\", \"display:none !important;\");\r\n\t\t  console.log(evt);\r\n      }\r\n      function ShowForm() {\r\n        document\r\n          .getElementById(\"modalLoadEdit\")\r\n          .setAttribute(\"style\", \"display:none !important;\");\r\n        document\r\n          .getElementById(\"modalbdyEdit\")\r\n          .setAttribute(\"style\", \"display:block !important;;\");\r\n      }\r\n      function ShowForm() {\r\n        document\r\n          .getElementById(\"modalLoadEdit\")\r\n          .setAttribute(\"style\", \"display:none !important;\");\r\n        document\r\n          .getElementById(\"modalbdyEdit\")\r\n          .setAttribute(\"style\", \"display:block !important;;\");\r\n      }\r\n\t</script>")
@@ -174,9 +256,9 @@ func Pagination() templ.Component {
 			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
+		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var10 == nil {
+			templ_7745c5c3_Var10 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"d-flex justify-content-between align-items-center flex-wrap\"><div class=\"d-flex flex-wrap py-2 mr-3\"><a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-double-arrow-back icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-arrow-back icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">...</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">23</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light btn-hover-primary active mr-2 my-1\">24</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">25</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">26</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">27</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">28</a> <a href=\"#\" class=\"btn btn-icon btn-sm border-0 btn-light mr-2 my-1\">...</a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-arrow-next icon-xs\"></i></a> <a href=\"#\" class=\"btn btn-icon btn-sm btn-light mr-2 my-1\"><i class=\"ki ki-bold-double-arrow-next icon-xs\"></i></a></div></div>")
@@ -198,9 +280,9 @@ func CssMasterMenuUserGroup() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var8 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var8 == nil {
-			templ_7745c5c3_Var8 = templ.NopComponent
+		templ_7745c5c3_Var11 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var11 == nil {
+			templ_7745c5c3_Var11 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<link rel=\"stylesheet\" href=\"assets/css/googlefont/poppins.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/publicsans.css\"><link rel=\"stylesheet\" href=\"assets/css/googlefont/roboto.css\"><style>\r\n    body {\r\n      background-color: white;\r\n      /* padding-right: 100px;\r\n            padding-left: 100px; */\r\n    }\r\n    #div-chart {\r\n        /* overflow-x: scroll; */\r\n        margin: 40px 10vw 40px 10vw;\r\n    }\r\n    .title {\r\n        font-size:20px;\r\n        font-weight: bold;\r\n    }\r\n    #title {\r\n        font-weight: 600;\r\n    }\r\n    \r\n</style>")
@@ -222,9 +304,9 @@ func JsMasterMenuUserGroup() templ.Component {
 			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
+		templ_7745c5c3_Var12 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var12 == nil {
+			templ_7745c5c3_Var12 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
@@ -242,12 +324,12 @@ func ShowMasterMenuUserGroup(title string, cmp templ.Component, css templ.Compon
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var10 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var10 == nil {
-			templ_7745c5c3_Var10 = templ.NopComponent
+		templ_7745c5c3_Var13 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var13 == nil {
+			templ_7745c5c3_Var13 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var11 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var14 := 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()
@@ -262,7 +344,7 @@ func ShowMasterMenuUserGroup(title string, cmp templ.Component, css templ.Compon
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, dataMenu, dataUser).Render(templ.WithChildren(ctx, templ_7745c5c3_Var11), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, dataMenu, dataUser).Render(templ.WithChildren(ctx, templ_7745c5c3_Var14), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/views/mastermenuusergroup/modaleditusergroup.templ b/views/mastermenuusergroup/modaleditusergroup.templ
index a0a61dd..4be0c5b 100644
--- a/views/mastermenuusergroup/modaleditusergroup.templ
+++ b/views/mastermenuusergroup/modaleditusergroup.templ
@@ -29,9 +29,9 @@ templ DialogEditBody(code string, name string) {
 		@DialogEditForm(code, name)
 	</div>
 	<div>
-		<div class="text-center text-primary" id="modalLoadEdit" style="">
-			<div class="spinner-border" role="status"></div>
-		</div>
+		// <div class="text-center text-primary" id="modalLoadEdit" style="">
+		// 	<div class="spinner-border" role="status"></div>
+		// </div>
 	</div>
 }
 
diff --git a/views/mastermenuusergroup/modaleditusergroup_templ.go b/views/mastermenuusergroup/modaleditusergroup_templ.go
index a4192aa..28abe48 100644
--- a/views/mastermenuusergroup/modaleditusergroup_templ.go
+++ b/views/mastermenuusergroup/modaleditusergroup_templ.go
@@ -78,7 +78,7 @@ func DialogEditBody(code string, name string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div><div class=\"text-center text-primary\" id=\"modalLoadEdit\" style=\"\"><div class=\"spinner-border\" role=\"status\"></div></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div></div>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}