diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.tsx
index 7dbe2d77..42d7b54a 100644
--- a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionDetail/index.tsx
@@ -1,64 +1,24 @@
 import RichTextViewer from "@/components/RichTextViewer";
 import { SecondaryText, Text } from "@/components/Text";
 import { IReleaseHistory } from "@/utils/types/product.type";
-import { Flex, Tag } from "antd";
+import { Flex } from "antd";
 import { useState } from "react";
 import { DetailDrawer } from "../VersionSelect/DetailDrawer";
 import { UpgradeProcess } from "./UpgradeProcess";
 import styles from "./index.module.scss";
-import { useGetSystemInfo } from "@/hooks/user";
 
 export function VersionDetail({ data }: Readonly<{
   data?: IReleaseHistory;
 }>) {
-  const { data: info } = useGetSystemInfo();
-
   // To view details of upgrade history
   const [deploymentId, setDeploymentId] = useState<string | null>(null);
 
   return (
     <>
       <div className={styles.root}>
-        <Flex justify="space-between" align="center">
-          <Text.NormalLarge data-testid="detailVersion">
-            {data?.productVersion}
-          </Text.NormalLarge>
-
-          <Flex align="center" gap={12}>
-            <Text.LightMedium lineHeight="20px" color="#00000073">
-              Current version
-            </Text.LightMedium>
-            <Text.LightMedium lineHeight="20px">Control plane</Text.LightMedium>
-            <Tag
-              data-testid="controlePlaneUpgradeVersion"
-              bordered={false}
-              color="var(--panel-hover-bg)"
-              style={{ color: "var(--primary)" }}
-            >
-              {info?.controlProductVersion ?? 'N/A'}
-            </Tag>
-            <Text.LightMedium lineHeight="20px">Stage</Text.LightMedium>
-            <Tag
-              data-testid="stageUpgradeVersion"
-              bordered={false}
-              color="var(--panel-hover-bg)"
-              style={{ color: "var(--primary)" }}
-            >
-              {info?.stageProductVersion ?? 'N/A'}
-            </Tag>
-            <Text.LightMedium lineHeight="20px">
-              Production
-            </Text.LightMedium>
-            <Tag
-              data-testid="productionUpgradeVersion"
-              bordered={false}
-              color="var(--panel-hover-bg)"
-              style={{ color: "var(--primary)" }}
-            >
-              {info?.productionProductVersion ?? 'N/A'}
-            </Tag>
-          </Flex>
-        </Flex>
+        <Text.NormalLarge data-testid="detailVersion" style={{ minHeight: 19 }}>
+          {data?.productVersion}
+        </Text.NormalLarge>
 
         <div className={styles.container}>
           {!data ? (
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.module.scss b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.module.scss
index 08e13ee4..f69a9ea9 100644
--- a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.module.scss
+++ b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.module.scss
@@ -48,6 +48,7 @@
 .selected {
   background: #dbe4fb !important;
 
+  .releaseVersion,
   .productSpec {
     color: var(--primary) !important;
   }
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.tsx
index 2af80710..4da6e108 100644
--- a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/components/VersionSelect/index.tsx
@@ -172,7 +172,7 @@ export const VersionSelect = ({
             onClick={() => setSelectedVersion(d.templateUpgradeId)}
           >
             <Flex align="center" gap={7}>
-              <Text.LightMedium data-testid="releaseVersion">
+              <Text.LightMedium data-testid="releaseVersion" className={styles.releaseVersion}>
                 {d.productVersion}
               </Text.LightMedium>
               <SecondaryText.LightSmall data-testid="productSpec" className={styles.productSpec}>
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.module.scss b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.module.scss
index 1a2fa55f..f7c42de8 100644
--- a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.module.scss
+++ b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.module.scss
@@ -58,3 +58,8 @@
   background: #f6f7fa;
   flex-direction: column;
 }
+
+.mappingVersion {
+  color: var(--text-secondary);
+  border: 1px solid var(--bg);
+}
diff --git a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.tsx b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.tsx
index 315f6c6f..9a685d3d 100644
--- a/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/MappingTemplate/index.tsx
@@ -5,13 +5,14 @@ import { useInfiniteReleaseHistoryQuery } from "@/hooks/mappingTemplate";
 import { useAppStore } from "@/stores/app.store";
 import { IReleaseHistory } from "@/utils/types/product.type";
 import { RightOutlined } from "@ant-design/icons";
-import { Flex, Tag, Empty } from "antd";
+import { Flex, Tag } from "antd";
 import { omit } from "lodash";
 import { VersionDetail } from "./components/VersionDetail";
 import { VersionSelect } from "./components/VersionSelect";
 import { Text } from "@/components/Text";
 import DoneIcon from "@/assets/icon/upgrade-done.svg";
 import ReleaseIcon from "@/assets/release-bg.svg";
+import { useGetSystemInfo } from "@/hooks/user";
 
 const steps = [
   "Control plane upgrade",
@@ -38,6 +39,7 @@ export default function MappingTemplate() {
       size: 20,
     })
   );
+  const { data: info } = useGetSystemInfo();
 
   const [selectedVersion, setSelectedVersion] = useState<string | null | undefined>(undefined);
 
@@ -58,10 +60,46 @@ export default function MappingTemplate() {
 
 
   return (
-    <PageLayout title="Mapping template release & Upgrade">
+    <PageLayout title={
+      <>
+        <span>Mapping template release & Upgrade</span>
+
+        <Flex align="center" gap={12}>
+          <Text.LightMedium lineHeight="20px" color="#00000073">
+            Current
+          </Text.LightMedium>
+          <Text.LightMedium lineHeight="20px">Control plane</Text.LightMedium>
+          <Tag
+            data-testid="controlePlaneUpgradeVersion"
+            bordered={false}
+            className={styles.mappingVersion}
+          >
+            {info?.controlProductVersion ?? 'N/A'}
+          </Tag>
+          <Text.LightMedium lineHeight="20px">Stage</Text.LightMedium>
+          <Tag
+            data-testid="stageUpgradeVersion"
+            bordered={false}
+            className={styles.mappingVersion}
+          >
+            {info?.stageProductVersion ?? 'N/A'}
+          </Tag>
+          <Text.LightMedium lineHeight="20px">
+            Production
+          </Text.LightMedium>
+          <Tag
+            data-testid="productionUpgradeVersion"
+            bordered={false}
+            className={styles.mappingVersion}
+          >
+            {info?.productionProductVersion ?? 'N/A'}
+          </Tag>
+        </Flex>
+      </>
+    }>
       <div className={styles.root}>
         <Flex justify="space-between"
-            className={styles.info}>
+          className={styles.info}>
           <Flex
             vertical
             justify="center"
@@ -106,23 +144,19 @@ export default function MappingTemplate() {
         </Flex>
 
         <Flex className={styles.content}>
-          {!isFetching && !releases?.length ? (
-            <Empty description="No release history" className={styles.empty} />
-          ) : (
-            <>
-              <VersionSelect
-                data={releases ?? []}
-                selectedVersion={selectedVersion}
-                setSelectedVersion={setSelectedVersion}
-                // Infinite scroll
-                loading={isFetching && !isFetchingNextPage}
-                isFetchingNextPage={isFetchingNextPage}
-                hasNextPage={hasNextPage}
-                onFetchNext={fetchNextPage}
-              />
-              <VersionDetail data={currentDetailInfo as any} />
-            </>
-          )}
+          <>
+            <VersionSelect
+              data={releases ?? []}
+              selectedVersion={selectedVersion}
+              setSelectedVersion={setSelectedVersion}
+              // Infinite scroll
+              loading={isFetching && !isFetchingNextPage}
+              isFetchingNextPage={isFetchingNextPage}
+              hasNextPage={hasNextPage}
+              onFetchNext={fetchNextPage}
+            />
+            <VersionDetail data={currentDetailInfo as any} />
+          </>
         </Flex>
       </div>
     </PageLayout>
diff --git a/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx b/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx
index 6aed31db..9b93d5c7 100644
--- a/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/DeployHistory/index.tsx
@@ -1,4 +1,3 @@
-import DetailIcon from "@/assets/icon/detail.svg";
 import EmptyIcon from "@/assets/icon/empty.svg";
 import {
   PRODUCT_CACHE_KEYS,
@@ -14,7 +13,6 @@ import { IPagination } from "@/utils/types/common.type";
 import { IEnv } from "@/utils/types/env.type";
 import { IDeploymentHistory } from "@/utils/types/product.type";
 import {
-  Button,
   Flex,
   Result,
   Switch,
@@ -30,6 +28,7 @@ import { ContentTime } from "./ContentTime";
 import { DeploymentBtn } from "./DeployBtn";
 import styles from "./index.module.scss";
 import { ApiCard } from "@/components/ApiMapping";
+import { InfoCircleOutlined } from "@ant-design/icons";
 
 const DeployHistory = ({
   scrollHeight,
@@ -148,7 +147,10 @@ const DeployHistory = ({
     if (isStage)
       columns.push(
         {
-          title: "Verified for Production",
+          title: <>
+            Verified for Production{' '}
+            <Tooltip title="Toggle this button means you have verified this deployment version in stage environment"><InfoCircleOutlined /></Tooltip>
+          </>,
           dataIndex: "verifiedStatus",
           width: 160,
           render: (verifiedStatus: boolean, record: IDeploymentHistory) =>
@@ -181,16 +183,11 @@ const DeployHistory = ({
       width: 120,
       fixed: "right",
       render: (record: IDeploymentHistory) => (
-        <Flex gap={12} align="center">
-          <Tooltip title="Check details and difference">
-            <Button type="text" className={styles.defaultBtn}>
-              <DetailIcon />
-            </Button>
-          </Tooltip>
+        <>
           {record.envName !== "production" && (
             <DeploymentBtn record={record} env={envItems} />
           )}
-        </Flex>
+        </>
       ),
     });
 
diff --git a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss
index 6e91489a..9248626e 100644
--- a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss
+++ b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.module.scss
@@ -9,6 +9,8 @@
   border-bottom-left-radius: 4px;
   background-color: #fff;
   min-width: 201px;
+  width: 300px;
+  padding: 16px 0;
   overflow-y: scroll;
   &::-webkit-scrollbar {
     display: none;
@@ -22,9 +24,11 @@
   }
 
   .draggableSide {
-    height: 100%;
+    height: calc(100% + 32px);
+    margin-top: -16px;
+    margin-bottom: -16px;
     min-width: 1px;
-    background-color: lightgray;
+    background-color: var(--bg);
     cursor: ew-resize;
     z-index: 100;
   
@@ -92,7 +96,6 @@
 }
 .versionListWrapper {
   flex: 1;
-  border-left: 1px solid #f0f0f0;
   min-width: 840px;
 }
 
diff --git a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.tsx b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.tsx
index a1d26bf0..7fedb3e6 100644
--- a/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/StandardAPIMapping/index.tsx
@@ -148,7 +148,6 @@ const StandardAPIMapping = () => {
           onBlur={handleMouseUp}
           onMouseUp={handleMouseUp}>
           <Flex
-            justify={isLoading ? "center" : "space-between"}
             className={styles.leftWrapper}
             ref={leftPanelRef}
           >
@@ -159,31 +158,27 @@ const StandardAPIMapping = () => {
               />
             )}
 
-            <div
+            {!isLoading && (<div
               data-testid="resizableBar"
               tabIndex={0}
               role="button"
               className={classNames(styles.draggableSide, isMouseDown && styles.interactive)}
               onMouseDown={handleMouseDown}
-              ref={bar} />
+              ref={bar} />)}
           </Flex>
 
-          <Flex
+          {!isGroupedPathsEmpty && (<Flex
             align="center"
             justify="center"
             className={styles.versionListWrapper}
           >
-            {activePath && !isChangeMappingKey ? (
+            {activePath && !isChangeMappingKey && (
               <NewAPIMapping
                 refetch={refetch}
                 isRequiredMapping={isRequiredMapping}
               />
-            ) : (
-              <div className={styles.empty}>
-                <Spin size="large" />
-              </div>
             )}
-          </Flex>
+          </Flex>)}
         </Flex>
       </Spin>
     </PageLayout>
diff --git a/kraken-app/kraken-app-portal/src/pages/UserManagement/index.tsx b/kraken-app/kraken-app-portal/src/pages/UserManagement/index.tsx
index fa0590e3..b2719231 100644
--- a/kraken-app/kraken-app-portal/src/pages/UserManagement/index.tsx
+++ b/kraken-app/kraken-app-portal/src/pages/UserManagement/index.tsx
@@ -7,17 +7,34 @@ import { IUser } from "@/utils/types/user.type";
 import { Button, Flex, Input, Switch, Table, notification } from "antd";
 import dayjs from "dayjs";
 import { debounce, get } from "lodash";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useBoolean } from "usehooks-ts";
 import ResetPwd from "./components/ResetPwd";
 import UserModal from "./components/UserModal";
 import UserRoleEdit from "./components/UserRoleEdit";
 import styles from "./index.module.scss";
+import { ColumnsType } from "antd/es/table";
+
+function parseFiltersObj(filters: Record<string, Array<any>>): Record<string, any> {
+  if (!filters) return {}
+
+  return Object.entries(filters).reduce((acc: Record<string, any>, [key, value]) => {
+    acc[key] = value ? value[0] : undefined
+    return acc
+  }, {})
+}
 
 const UserManagement = () => {
   const { currentUser } = useUser();
   const { userParams, setUserParams, resetParams } = useUserStore();
-  const { data: dataUser, isLoading: loadingUser } = useGetUserList(userParams);
+
+  const [filters, setFilters] = useState<{ role?: Array<string>; state?: Array<string> }>({})
+
+  const { data: dataUser, isLoading: loadingUser } = useGetUserList({
+    ...userParams,
+    ...parseFiltersObj(filters)
+  });
+
   const { value: isOpen, setTrue: open, setFalse: close } = useBoolean(false);
   const { mutateAsync: runEnable, isPending: pendingEnable } = useEnableUser();
   const { mutateAsync: runDisable, isPending: pendingDisable } =
@@ -45,7 +62,7 @@ const UserManagement = () => {
       });
     }
   };
-  const columns: any = useMemo(
+  const columns: ColumnsType<IUser> = useMemo(
     () => [
       {
         title: "User name",
@@ -57,6 +74,7 @@ const UserManagement = () => {
       },
       {
         title: "User role",
+        key: 'role',
         dataIndex: "role",
         width: 205,
         filters: [
@@ -73,12 +91,10 @@ const UserManagement = () => {
           <UserRoleEdit user={record} isAdmin={isAdmin} />
         ),
         filterMultiple: false,
-        onFilter: () => {
-          return true;
-        },
       },
       {
         title: "Enable State",
+        key: 'state',
         dataIndex: "state",
         width: 205,
         filters: [
@@ -101,9 +117,6 @@ const UserManagement = () => {
             style={!isAdmin ? { opacity: 0.4 } : {}}
           />
         ),
-        onFilter: () => {
-          return true;
-        },
       },
       {
         title: "Created at",
@@ -167,6 +180,10 @@ const UserManagement = () => {
               setUserParams({ page: page - 1, size: pageSize });
             },
           }}
+          onChange={(_, filters) => {
+            setFilters(filters)
+            setUserParams({ page: 0 })
+          }}
           scroll={{
             // y: get(size, "height", 0) - 164,
             x: "auto",