diff --git a/assets/asset-corporate-portal/js/ktappsetting.js b/assets/asset-corporate-portal/js/ktappsetting.js
new file mode 100644
index 0000000..ed678af
--- /dev/null
+++ b/assets/asset-corporate-portal/js/ktappsetting.js
@@ -0,0 +1,58 @@
+var KTAppSettings = {
+    breakpoints: {
+        sm: 576,
+        md: 768,
+        lg: 992,
+        xl: 1200,
+        xxl: 1400,
+    },
+    colors: {
+        theme: {
+            base: {
+                white: "#ffffff",
+                primary: "#3699FF",
+                secondary: "#E5EAEE",
+                success: "#1BC5BD",
+                info: "#8950FC",
+                warning: "#FFA800",
+                danger: "#F64E60",
+                light: "#E4E6EF",
+                dark: "#181C32",
+            },
+            light: {
+                white: "#ffffff",
+                primary: "#E1F0FF",
+                secondary: "#EBEDF3",
+                success: "#C9F7F5",
+                info: "#EEE5FF",
+                warning: "#FFF4DE",
+                danger: "#FFE2E5",
+                light: "#F3F6F9",
+                dark: "#D6D6E0",
+            },
+            inverse: {
+                white: "#ffffff",
+                primary: "#ffffff",
+                secondary: "#3F4254",
+                success: "#ffffff",
+                info: "#ffffff",
+                warning: "#ffffff",
+                danger: "#ffffff",
+                light: "#464E5F",
+                dark: "#ffffff",
+            },
+        },
+        gray: {
+            "gray-100": "#F3F6F9",
+            "gray-200": "#EBEDF3",
+            "gray-300": "#E4E6EF",
+            "gray-400": "#D1D3E0",
+            "gray-500": "#B5B5C3",
+            "gray-600": "#7E8299",
+            "gray-700": "#5E6278",
+            "gray-800": "#3F4254",
+            "gray-900": "#181C32",
+        },
+    },
+    "font-family": "Poppins",
+};
\ No newline at end of file
diff --git a/models/table.models.go b/models/table.models.go
new file mode 100644
index 0000000..76d0d99
--- /dev/null
+++ b/models/table.models.go
@@ -0,0 +1,15 @@
+package models
+
+type TableHead struct {
+	Name  string `json:"name"`
+	Width string `json:"width"`
+}
+
+func GetTableHead() []TableHead {
+	a := []TableHead{
+		{Name: "Kode", Width: "30%"},
+		{Name: "User Group", Width: "40%"},
+		{Name: "Aksi", Width: "30%"},
+	}
+	return a
+}
diff --git a/views/component/table/table.templ b/views/component/table/table.templ
new file mode 100644
index 0000000..ef66f32
--- /dev/null
+++ b/views/component/table/table.templ
@@ -0,0 +1,25 @@
+package tablecomponent
+
+templ Table(thName []string, thWidth []string, trComponent templ.Component, pagination templ.Component) {
+	if len(thName) != len(thWidth) {
+		<div>length array thname berbeda dengan array thwidth</div>
+	} else {
+		<div>
+			<table class="table table-hover table-borderless">
+				<thead>
+					<tr class="rounded-lg bg-header-table">
+						for i, item := range thName {
+							<th scope="col" width={ thWidth[i] }>{ item }</th>
+						}
+					</tr>
+				</thead>
+				<tbody>
+					@trComponent
+				</tbody>
+			</table>
+		</div>
+		<div>
+			@pagination
+		</div>
+	}
+}
diff --git a/views/component/table/table_templ.go b/views/component/table/table_templ.go
new file mode 100644
index 0000000..78877c7
--- /dev/null
+++ b/views/component/table/table_templ.go
@@ -0,0 +1,94 @@
+// Code generated by templ - DO NOT EDIT.
+
+// templ: version: v0.2.663
+package tablecomponent
+
+//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 Table(thName []string, thWidth []string, trComponent templ.Component, pagination 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)
+		if len(thName) != len(thWidth) {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>length array thname berbeda dengan array thwidth</div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+		} else {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><table class=\"table table-hover table-borderless\"><thead><tr class=\"rounded-lg bg-header-table\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for i, item := range thName {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<th scope=\"col\" width=\"")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var2 string
+				templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(thWidth[i])
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\table\table.templ`, Line: 12, Col: 41}
+				}
+				_, 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("\">")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+				var templ_7745c5c3_Var3 string
+				templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(item)
+				if templ_7745c5c3_Err != nil {
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\component\table\table.templ`, Line: 12, Col: 50}
+				}
+				_, 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("</th>")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tr></thead> <tbody>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = trComponent.Render(ctx, templ_7745c5c3_Buffer)
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</tbody></table></div><div>")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			templ_7745c5c3_Err = pagination.Render(ctx, templ_7745c5c3_Buffer)
+			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
+			}
+		}
+		if !templ_7745c5c3_IsBuffer {
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
+		}
+		return templ_7745c5c3_Err
+	})
+}
diff --git a/views/layout/canvas_layout.templ b/views/layout/canvas_layout.templ
index 4557116..5aeaf2a 100644
--- a/views/layout/canvas_layout.templ
+++ b/views/layout/canvas_layout.templ
@@ -94,72 +94,8 @@ templ CanvasLayout(title string, css templ.Component, js templ.Component) {
 			<!--begin::Main-->
 			{ children... }
 			<!--end::Main-->
-			<script>
-      var HOST_URL =
-        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
-    </script>
-			<!--begin::Global Config(global config for global JS scripts)-->
-			<script>
-      var KTAppSettings = {
-        breakpoints: {
-          sm: 576,
-          md: 768,
-          lg: 992,
-          xl: 1200,
-          xxl: 1400,
-        },
-        colors: {
-          theme: {
-            base: {
-              white: "#ffffff",
-              primary: "#3699FF",
-              secondary: "#E5EAEE",
-              success: "#1BC5BD",
-              info: "#8950FC",
-              warning: "#FFA800",
-              danger: "#F64E60",
-              light: "#E4E6EF",
-              dark: "#181C32",
-            },
-            light: {
-              white: "#ffffff",
-              primary: "#E1F0FF",
-              secondary: "#EBEDF3",
-              success: "#C9F7F5",
-              info: "#EEE5FF",
-              warning: "#FFF4DE",
-              danger: "#FFE2E5",
-              light: "#F3F6F9",
-              dark: "#D6D6E0",
-            },
-            inverse: {
-              white: "#ffffff",
-              primary: "#ffffff",
-              secondary: "#3F4254",
-              success: "#ffffff",
-              info: "#ffffff",
-              warning: "#ffffff",
-              danger: "#ffffff",
-              light: "#464E5F",
-              dark: "#ffffff",
-            },
-          },
-          gray: {
-            "gray-100": "#F3F6F9",
-            "gray-200": "#EBEDF3",
-            "gray-300": "#E4E6EF",
-            "gray-400": "#D1D3E0",
-            "gray-500": "#B5B5C3",
-            "gray-600": "#7E8299",
-            "gray-700": "#5E6278",
-            "gray-800": "#3F4254",
-            "gray-900": "#181C32",
-          },
-        },
-        "font-family": "Poppins",
-      };
-    </script>
-	<!-- iconify -->
+			<script src="asset-corporate-portal/js/ktappsetting.js"></script>
+			<!-- iconify -->
 			<script src="assets/js/iconify/iconify.min.js"></script>
 			<!--end::Global Config-->
 			<!--begin::Global Theme Bundle(used by all pages)-->
diff --git a/views/layout/canvas_layout_templ.go b/views/layout/canvas_layout_templ.go
index 006f939..6685c82 100644
--- a/views/layout/canvas_layout_templ.go
+++ b/views/layout/canvas_layout_templ.go
@@ -52,7 +52,7 @@ func CanvasLayout(title string, css templ.Component, js templ.Component) templ.C
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!-- iconify --><script src=\"assets/js/iconify/iconify.min.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle-->")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!-- iconify --><script src=\"assets/js/iconify/iconify.min.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle-->")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/views/layout/layout_corporate.templ b/views/layout/layout_corporate.templ
index 2c74e19..43d3df4 100644
--- a/views/layout/layout_corporate.templ
+++ b/views/layout/layout_corporate.templ
@@ -220,71 +220,8 @@ templ CorporateLayout(title string, css templ.Component, js templ.Component, dat
 			</div>
 			<!--end::Navbar Laptop With Sidebar-->
 			@sidebaruserprofile.Navbaruserprofile(dataUser)
-			<script>
-      var HOST_URL =
-        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
-    </script>
 			<!--begin::Global Config(global config for global JS scripts)-->
-			<script>
-      var KTAppSettings = {
-        breakpoints: {
-          sm: 576,
-          md: 768,
-          lg: 992,
-          xl: 1200,
-          xxl: 1400,
-        },
-        colors: {
-          theme: {
-            base: {
-              white: "#ffffff",
-              primary: "#3699FF",
-              secondary: "#E5EAEE",
-              success: "#1BC5BD",
-              info: "#8950FC",
-              warning: "#FFA800",
-              danger: "#F64E60",
-              light: "#E4E6EF",
-              dark: "#181C32",
-            },
-            light: {
-              white: "#ffffff",
-              primary: "#E1F0FF",
-              secondary: "#EBEDF3",
-              success: "#C9F7F5",
-              info: "#EEE5FF",
-              warning: "#FFF4DE",
-              danger: "#FFE2E5",
-              light: "#F3F6F9",
-              dark: "#D6D6E0",
-            },
-            inverse: {
-              white: "#ffffff",
-              primary: "#ffffff",
-              secondary: "#3F4254",
-              success: "#ffffff",
-              info: "#ffffff",
-              warning: "#ffffff",
-              danger: "#ffffff",
-              light: "#464E5F",
-              dark: "#ffffff",
-            },
-          },
-          gray: {
-            "gray-100": "#F3F6F9",
-            "gray-200": "#EBEDF3",
-            "gray-300": "#E4E6EF",
-            "gray-400": "#D1D3E0",
-            "gray-500": "#B5B5C3",
-            "gray-600": "#7E8299",
-            "gray-700": "#5E6278",
-            "gray-800": "#3F4254",
-            "gray-900": "#181C32",
-          },
-        },
-        "font-family": "Poppins",
-      };
-    </script>
+			<script src="asset-corporate-portal/js/ktappsetting.js"></script>
 			<!--end::Global Config-->
 			<!--begin::Global Theme Bundle(used by all pages)-->
 			<script src="assets/plugins/global/plugins.bundle.js"></script>
diff --git a/views/layout/layout_corporate_templ.go b/views/layout/layout_corporate_templ.go
index aa3d0b2..9d8d95a 100644
--- a/views/layout/layout_corporate_templ.go
+++ b/views/layout/layout_corporate_templ.go
@@ -84,7 +84,7 @@ func CorporateLayout(title string, css templ.Component, js templ.Component, data
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--begin::Global Config(global config for global JS scripts)--><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/views/layout/playground_layout.templ b/views/layout/playground_layout.templ
index 014e012..80354d2 100644
--- a/views/layout/playground_layout.templ
+++ b/views/layout/playground_layout.templ
@@ -97,71 +97,7 @@ templ PlaygroundLayout(title string, css templ.Component, js templ.Component) {
 			<!--begin::Main-->
 			{ children... }
 			<!--end::Main-->
-			<script>
-      var HOST_URL =
-        "https://preview.keenthemes.com/metronic/theme/html/tools/preview";
-    </script>
-			<!--begin::Global Config(global config for global JS scripts)-->
-			<script>
-      var KTAppSettings = {
-        breakpoints: {
-          sm: 576,
-          md: 768,
-          lg: 992,
-          xl: 1200,
-          xxl: 1400,
-        },
-        colors: {
-          theme: {
-            base: {
-              white: "#ffffff",
-              primary: "#3699FF",
-              secondary: "#E5EAEE",
-              success: "#1BC5BD",
-              info: "#8950FC",
-              warning: "#FFA800",
-              danger: "#F64E60",
-              light: "#E4E6EF",
-              dark: "#181C32",
-            },
-            light: {
-              white: "#ffffff",
-              primary: "#E1F0FF",
-              secondary: "#EBEDF3",
-              success: "#C9F7F5",
-              info: "#EEE5FF",
-              warning: "#FFF4DE",
-              danger: "#FFE2E5",
-              light: "#F3F6F9",
-              dark: "#D6D6E0",
-            },
-            inverse: {
-              white: "#ffffff",
-              primary: "#ffffff",
-              secondary: "#3F4254",
-              success: "#ffffff",
-              info: "#ffffff",
-              warning: "#ffffff",
-              danger: "#ffffff",
-              light: "#464E5F",
-              dark: "#ffffff",
-            },
-          },
-          gray: {
-            "gray-100": "#F3F6F9",
-            "gray-200": "#EBEDF3",
-            "gray-300": "#E4E6EF",
-            "gray-400": "#D1D3E0",
-            "gray-500": "#B5B5C3",
-            "gray-600": "#7E8299",
-            "gray-700": "#5E6278",
-            "gray-800": "#3F4254",
-            "gray-900": "#181C32",
-          },
-        },
-        "font-family": "Poppins",
-      };
-    </script>
+			<script src="asset-corporate-portal/js/ktappsetting.js"></script>
 			<!--end::Global Config-->
 			<!--begin::Global Theme Bundle(used by all pages)-->
 			<script src="assets/plugins/global/plugins.bundle.js"></script>
diff --git a/views/layout/playground_layout_templ.go b/views/layout/playground_layout_templ.go
index 8c1df4b..6af2408 100644
--- a/views/layout/playground_layout_templ.go
+++ b/views/layout/playground_layout_templ.go
@@ -53,7 +53,7 @@ func PlaygroundLayout(title string, css templ.Component, js templ.Component) tem
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script>\r\n      var HOST_URL =\r\n        \"https://preview.keenthemes.com/metronic/theme/html/tools/preview\";\r\n    </script><!--begin::Global Config(global config for global JS scripts)--><script>\r\n      var KTAppSettings = {\r\n        breakpoints: {\r\n          sm: 576,\r\n          md: 768,\r\n          lg: 992,\r\n          xl: 1200,\r\n          xxl: 1400,\r\n        },\r\n        colors: {\r\n          theme: {\r\n            base: {\r\n              white: \"#ffffff\",\r\n              primary: \"#3699FF\",\r\n              secondary: \"#E5EAEE\",\r\n              success: \"#1BC5BD\",\r\n              info: \"#8950FC\",\r\n              warning: \"#FFA800\",\r\n              danger: \"#F64E60\",\r\n              light: \"#E4E6EF\",\r\n              dark: \"#181C32\",\r\n            },\r\n            light: {\r\n              white: \"#ffffff\",\r\n              primary: \"#E1F0FF\",\r\n              secondary: \"#EBEDF3\",\r\n              success: \"#C9F7F5\",\r\n              info: \"#EEE5FF\",\r\n              warning: \"#FFF4DE\",\r\n              danger: \"#FFE2E5\",\r\n              light: \"#F3F6F9\",\r\n              dark: \"#D6D6E0\",\r\n            },\r\n            inverse: {\r\n              white: \"#ffffff\",\r\n              primary: \"#ffffff\",\r\n              secondary: \"#3F4254\",\r\n              success: \"#ffffff\",\r\n              info: \"#ffffff\",\r\n              warning: \"#ffffff\",\r\n              danger: \"#ffffff\",\r\n              light: \"#464E5F\",\r\n              dark: \"#ffffff\",\r\n            },\r\n          },\r\n          gray: {\r\n            \"gray-100\": \"#F3F6F9\",\r\n            \"gray-200\": \"#EBEDF3\",\r\n            \"gray-300\": \"#E4E6EF\",\r\n            \"gray-400\": \"#D1D3E0\",\r\n            \"gray-500\": \"#B5B5C3\",\r\n            \"gray-600\": \"#7E8299\",\r\n            \"gray-700\": \"#5E6278\",\r\n            \"gray-800\": \"#3F4254\",\r\n            \"gray-900\": \"#181C32\",\r\n          },\r\n        },\r\n        \"font-family\": \"Poppins\",\r\n      };\r\n    </script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!--end::Main--><script src=\"asset-corporate-portal/js/ktappsetting.js\"></script><!--end::Global Config--><!--begin::Global Theme Bundle(used by all pages)--><script src=\"assets/plugins/global/plugins.bundle.js\"></script><script src=\"assets/plugins/custom/prismjs/prismjs.bundle.js\"></script><script src=\"assets/js/scripts.bundle.js\"></script><!--end::Global Theme Bundle--><script src=\"assets/js/iconify/iconify.min.js\"></script>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/views/mastermenuusergroup/mastermenuusergroup.templ b/views/mastermenuusergroup/mastermenuusergroup.templ
index 9db78ae..c7c045f 100644
--- a/views/mastermenuusergroup/mastermenuusergroup.templ
+++ b/views/mastermenuusergroup/mastermenuusergroup.templ
@@ -5,6 +5,7 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 	"github.com/emarifer/go-templ-project-structure/services"
 	"github.com/emarifer/go-templ-project-structure/models"
+	"github.com/emarifer/go-templ-project-structure/views/component/table"
 )
 
 // "github.com/emarifer/go-templ-project-structure/views/component/sidebar_user_profile"
@@ -25,57 +26,49 @@ templ ContentMasterMenuUserGroup() {
 			</div>
 		</div>
 		<div>
-			<table class="table table-hover table-borderless">
-				<thead>
-					<tr class="rounded-lg bg-header-table">
-						<th scope="col" width="30%">KODE</th>
-						<th scope="col" width="50%">USER GROUP</th>
-						<th scope="col" width="20%">ACTION</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>001</td>
-						<td>Admin</td>
-						<td>
-							<div class="row px-5 d-flex justify-content-around">
-								<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
-								<button 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</button>
-							</div>
-						</td>
-					</tr>
-					<tr>
-						<td>002</td>
-						<td>Tes</td>
-						<td>
-							<div class="row px-5 d-flex justify-content-around">
-								<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
-								<button 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</button>
-							</div>
-						</td>
-					</tr>
-				</tbody>
-			</table>
+			@tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(), Pagination())
 		</div>
-		<div>
-			<!--begin::Pagination-->
-			<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>
+}
+
+templ TableRow() {
+	<tr>
+		<td>001</td>
+		<td>Admin</td>
+		<td>
+			<div class="row px-5 d-flex justify-content-around">
+				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
+				<button 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</button>
 			</div>
-			<!--end:: Pagination-->
+		</td>
+	</tr>
+	<tr>
+		<td>002</td>
+		<td>Tes</td>
+		<td>
+			<div class="row px-5 d-flex justify-content-around">
+				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
+				<button 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</button>
+			</div>
+		</td>
+	</tr>
+}
+
+templ Pagination() {
+	<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>
 }
diff --git a/views/mastermenuusergroup/mastermenuusergroup_templ.go b/views/mastermenuusergroup/mastermenuusergroup_templ.go
index bd87efb..c235a4f 100644
--- a/views/mastermenuusergroup/mastermenuusergroup_templ.go
+++ b/views/mastermenuusergroup/mastermenuusergroup_templ.go
@@ -14,6 +14,7 @@ import (
 	"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/breadcrumbadmin"
+	"github.com/emarifer/go-templ-project-structure/views/component/table"
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 )
 
@@ -39,7 +40,63 @@ func ContentMasterMenuUserGroup() templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none\"><div class=\"d-flex justify-content-end\"><button type=\"button\" class=\"btn btn-primary\">Add New</button></div></div><div class=\"col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5\"><button type=\"button\" class=\"btn btn-primary btn-block\">Add New</button></div></div><div><table class=\"table table-hover table-borderless\"><thead><tr class=\"rounded-lg bg-header-table\"><th scope=\"col\" width=\"30%\">KODE</th><th scope=\"col\" width=\"50%\">USER GROUP</th><th scope=\"col\" width=\"20%\">ACTION</th></tr></thead> <tbody><tr><td>001</td><td>Admin</td><td><div class=\"row px-5 d-flex justify-content-around\"><button type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\">Edit</button> <button 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</button></div></td></tr><tr><td>002</td><td>Tes</td><td><div class=\"row px-5 d-flex justify-content-around\"><button type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\">Edit</button> <button 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</button></div></td></tr></tbody></table></div><div><!--begin::Pagination--><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><!--end:: Pagination--></div></div>")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div><div class=\"col-md-2 d-none d-lg-block d-xl-block d-md-block d-sm-none\"><div class=\"d-flex justify-content-end\"><button type=\"button\" class=\"btn btn-primary\">Add New</button></div></div><div class=\"col-md-2 d-block d-lg-none d-xl-none d-md-none d-sm-block justify-content-center px-5\"><button type=\"button\" class=\"btn btn-primary btn-block\">Add New</button></div></div><div>")
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
+		templ_7745c5c3_Err = tablecomponent.Table([]string{"KODE", "USERGROUP", "AKSI"}, []string{"40%", "40%", "20%"}, TableRow(), Pagination()).Render(ctx, templ_7745c5c3_Buffer)
+		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
+	})
+}
+
+func TableRow() 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_Var2 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var2 == nil {
+			templ_7745c5c3_Var2 = templ.NopComponent
+		}
+		ctx = templ.ClearChildren(ctx)
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>001</td><td>Admin</td><td><div class=\"row px-5 d-flex justify-content-around\"><button type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\">Edit</button> <button 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</button></div></td></tr><tr><td>002</td><td>Tes</td><td><div class=\"row px-5 d-flex justify-content-around\"><button type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\">Edit</button> <button 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</button></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 Pagination() 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_Var3 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var3 == nil {
+			templ_7745c5c3_Var3 = 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>")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
@@ -58,9 +115,9 @@ func CssMasterMenuUserGroup() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var2 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var2 == nil {
-			templ_7745c5c3_Var2 = templ.NopComponent
+		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("<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>")
@@ -82,9 +139,9 @@ func JsMasterMenuUserGroup() templ.Component {
 			defer templ.ReleaseBuffer(templ_7745c5c3_Buffer)
 		}
 		ctx = templ.InitializeContext(ctx)
-		templ_7745c5c3_Var3 := templ.GetChildren(ctx)
-		if templ_7745c5c3_Var3 == nil {
-			templ_7745c5c3_Var3 = templ.NopComponent
+		templ_7745c5c3_Var5 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var5 == nil {
+			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
 		if !templ_7745c5c3_IsBuffer {
@@ -102,12 +159,12 @@ func ShowMasterMenuUserGroup(title string, cmp templ.Component, css templ.Compon
 			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
+		templ_7745c5c3_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var5 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		templ_7745c5c3_Var7 := 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()
@@ -122,7 +179,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_Var5), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, dataMenu, dataUser).Render(templ.WithChildren(ctx, templ_7745c5c3_Var7), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
diff --git a/views/xsample/coba.templ b/views/xsample/coba.templ
index 08351fa..1fe07c8 100644
--- a/views/xsample/coba.templ
+++ b/views/xsample/coba.templ
@@ -4,10 +4,12 @@ import (
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 	"github.com/emarifer/go-templ-project-structure/services"
 	"github.com/emarifer/go-templ-project-structure/models"
+	"github.com/emarifer/go-templ-project-structure/views/component/table"
 )
 
 templ Coba(title string) {
 	<div>{ title }</div>
+	@tablecomponent.Table([]string{"kode", "user group", "aksi"}, []string{"40%", "40%", "20%"}, tr(), pagination())
 }
 
 templ CssCoba() {
@@ -16,6 +18,48 @@ templ CssCoba() {
 templ JsCoba() {
 }
 
+templ tr() {
+	<tr>
+		<td>001</td>
+		<td>Admin</td>
+		<td>
+			<div class="row px-5 d-flex justify-content-around">
+				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
+				<button 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</button>
+			</div>
+		</td>
+	</tr>
+	<tr>
+		<td>002</td>
+		<td>Tes</td>
+		<td>
+			<div class="row px-5 d-flex justify-content-around">
+				<button type="button" class="col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2">Edit</button>
+				<button 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</button>
+			</div>
+		</td>
+	</tr>
+}
+
+templ pagination() {
+	<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>
+}
+
 templ ShowCoba(title string, cmp templ.Component, css templ.Component, js templ.Component, dataMenu []services.MasterMenu, dataUser models.User) {
 	@layout.CorporateLayout(title, css, js, dataMenu, dataUser) {
 		@cmp
diff --git a/views/xsample/coba_templ.go b/views/xsample/coba_templ.go
index 932685b..d6be95f 100644
--- a/views/xsample/coba_templ.go
+++ b/views/xsample/coba_templ.go
@@ -13,6 +13,7 @@ import "bytes"
 import (
 	"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/table"
 	"github.com/emarifer/go-templ-project-structure/views/layout"
 )
 
@@ -36,7 +37,7 @@ func Coba(title string) templ.Component {
 		var templ_7745c5c3_Var2 string
 		templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
 		if templ_7745c5c3_Err != nil {
-			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\xsample\coba.templ`, Line: 10, Col: 13}
+			return templ.Error{Err: templ_7745c5c3_Err, FileName: `views\xsample\coba.templ`, Line: 11, Col: 13}
 		}
 		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
 		if templ_7745c5c3_Err != nil {
@@ -46,6 +47,10 @@ func Coba(title string) templ.Component {
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}
+		templ_7745c5c3_Err = tablecomponent.Table([]string{"kode", "user group", "aksi"}, []string{"40%", "40%", "20%"}, tr(), pagination()).Render(ctx, templ_7745c5c3_Buffer)
+		if templ_7745c5c3_Err != nil {
+			return templ_7745c5c3_Err
+		}
 		if !templ_7745c5c3_IsBuffer {
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteTo(templ_7745c5c3_W)
 		}
@@ -93,7 +98,7 @@ func JsCoba() templ.Component {
 	})
 }
 
-func ShowCoba(title string, cmp templ.Component, css templ.Component, js templ.Component, dataMenu []services.MasterMenu, dataUser models.User) templ.Component {
+func tr() 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 {
@@ -106,7 +111,55 @@ func ShowCoba(title string, cmp templ.Component, css templ.Component, js templ.C
 			templ_7745c5c3_Var5 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		templ_7745c5c3_Var6 := templ.ComponentFunc(func(ctx context.Context, templ_7745c5c3_W io.Writer) (templ_7745c5c3_Err error) {
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<tr><td>001</td><td>Admin</td><td><div class=\"row px-5 d-flex justify-content-around\"><button type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\">Edit</button> <button 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</button></div></td></tr><tr><td>002</td><td>Tes</td><td><div class=\"row px-5 d-flex justify-content-around\"><button type=\"button\" class=\"col-12 col-sm-12 col-md-12 col-lg-5 col-xl-5 col-xxl-5 btn btn-light-tosca mb-2\">Edit</button> <button 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</button></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 pagination() 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_Var6 := templ.GetChildren(ctx)
+		if templ_7745c5c3_Var6 == nil {
+			templ_7745c5c3_Var6 = 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>")
+		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 ShowCoba(title string, cmp templ.Component, css templ.Component, js templ.Component, dataMenu []services.MasterMenu, dataUser models.User) 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_Var8 := 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()
@@ -121,7 +174,7 @@ func ShowCoba(title string, cmp templ.Component, css templ.Component, js templ.C
 			}
 			return templ_7745c5c3_Err
 		})
-		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, dataMenu, dataUser).Render(templ.WithChildren(ctx, templ_7745c5c3_Var6), templ_7745c5c3_Buffer)
+		templ_7745c5c3_Err = layout.CorporateLayout(title, css, js, dataMenu, dataUser).Render(templ.WithChildren(ctx, templ_7745c5c3_Var8), templ_7745c5c3_Buffer)
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}