diff --git a/packages/console/src/pages/Users/index.module.scss b/packages/console/src/pages/Users/index.module.scss
index b66976332..6ecdff6d4 100644
--- a/packages/console/src/pages/Users/index.module.scss
+++ b/packages/console/src/pages/Users/index.module.scss
@@ -1,5 +1,11 @@
 @use '@/scss/underscore' as _;
 
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .headline {
   display: flex;
   justify-content: space-between;
@@ -10,21 +16,21 @@
 }
 
 .table {
-  margin-top: _.unit(4);
+  flex: 1;
 
-  tbody {
-    max-height: calc(100vh - _.unit(64));
+  tr.clickable {
+    cursor: pointer;
 
-    tr.clickable {
-      cursor: pointer;
-
-      &:hover {
-        background: var(--color-table-row-selected);
-      }
+    &:hover {
+      background: var(--color-table-row-selected);
     }
   }
 }
 
+.pagination {
+  min-height: 64px;
+}
+
 .userName {
   width: 360px;
 }
diff --git a/packages/console/src/pages/Users/index.tsx b/packages/console/src/pages/Users/index.tsx
index 80dea4bc3..f8f5d204e 100644
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@@ -1,5 +1,6 @@
 import { User } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
+import classNames from 'classnames';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Modal from 'react-modal';
@@ -18,6 +19,7 @@ import TableError from '@/components/Table/TableError';
 import TableLoading from '@/components/Table/TableLoading';
 import { RequestError } from '@/hooks/use-api';
 import * as modalStyles from '@/scss/modal.module.scss';
+import * as tableStyles from '@/scss/table.module.scss';
 
 import CreateForm from './components/CreateForm';
 import * as styles from './index.module.scss';
@@ -39,7 +41,7 @@ const Users = () => {
   const [users, totalCount] = data ?? [];
 
   return (
-    <Card>
+    <Card className={styles.card}>
       <div className={styles.headline}>
         <CardTitle title="users.title" subtitle="users.subtitle" />
         <Button
@@ -68,68 +70,72 @@ const Users = () => {
       <div className={styles.filter}>
         <Search defaultValue={keyword} onSearch={setKeyword} />
       </div>
-      <table className={styles.table}>
-        <colgroup>
-          <col className={styles.userName} />
-          <col />
-          <col />
-        </colgroup>
-        <thead>
-          <tr>
-            <th>{t('users.user_name')}</th>
-            <th>{t('users.application_name')}</th>
-            <th>{t('users.latest_sign_in')}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {error && (
-            <TableError
-              columns={3}
-              content={error.body.message}
-              onRetry={async () => mutate(undefined, true)}
-            />
-          )}
-          {isLoading && <TableLoading columns={3} />}
-          {users?.length === 0 && (
-            <TableEmpty columns={3}>
-              <Button
-                title="admin_console.users.create"
-                type="outline"
-                onClick={() => {
-                  setIsCreateFormOpen(true);
-                }}
-              />
-            </TableEmpty>
-          )}
-          {users?.map(({ id, name, username }) => (
-            <tr
-              key={id}
-              className={styles.clickable}
-              onClick={() => {
-                navigate(`/users/${id}`);
-              }}
-            >
-              <td>
-                <ItemPreview
-                  title={name ?? '-'}
-                  subtitle={username ?? '-'}
-                  icon={<ImagePlaceholder />}
-                  to={`/users/${id}`}
-                />
-              </td>
-              <td>Application</td>
-              <td>Last sign in</td>
+      <div className={classNames(styles.table, tableStyles.scrollable)}>
+        <table>
+          <colgroup>
+            <col className={styles.userName} />
+            <col />
+            <col />
+          </colgroup>
+          <thead>
+            <tr>
+              <th>{t('users.user_name')}</th>
+              <th>{t('users.application_name')}</th>
+              <th>{t('users.latest_sign_in')}</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
-      {totalCount !== undefined && totalCount > 0 && (
-        <Pagination
-          pageCount={Math.ceil(totalCount / pageSize)}
-          pageIndex={pageIndex}
-          onChange={setPageIndex}
-        />
-      )}
+          </thead>
+          <tbody>
+            {error && (
+              <TableError
+                columns={3}
+                content={error.body.message}
+                onRetry={async () => mutate(undefined, true)}
+              />
+            )}
+            {isLoading && <TableLoading columns={3} />}
+            {users?.length === 0 && (
+              <TableEmpty columns={3}>
+                <Button
+                  title="admin_console.users.create"
+                  type="outline"
+                  onClick={() => {
+                    setIsCreateFormOpen(true);
+                  }}
+                />
+              </TableEmpty>
+            )}
+            {users?.map(({ id, name, username }) => (
+              <tr
+                key={id}
+                className={styles.clickable}
+                onClick={() => {
+                  navigate(`/users/${id}`);
+                }}
+              >
+                <td>
+                  <ItemPreview
+                    title={name ?? '-'}
+                    subtitle={username ?? '-'}
+                    icon={<ImagePlaceholder />}
+                    to={`/users/${id}`}
+                  />
+                </td>
+                <td>Application</td>
+                <td>Last sign in</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className={styles.pagination}>
+        {totalCount !== undefined && totalCount > 0 && (
+          <Pagination
+            pageCount={Math.ceil(totalCount / pageSize)}
+            pageIndex={pageIndex}
+            onChange={setPageIndex}
+          />
+        )}
+      </div>
     </Card>
   );
 };
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 51f48aef9..eca34e64e 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -25,7 +25,6 @@ table {
   border-spacing: 0;
   width: 100%;
   table-layout: fixed;
-  overflow: hidden;
 
   thead {
     th {
diff --git a/packages/console/src/scss/table.module.scss b/packages/console/src/scss/table.module.scss
new file mode 100644
index 000000000..5f0975641
--- /dev/null
+++ b/packages/console/src/scss/table.module.scss
@@ -0,0 +1,21 @@
+@use '@/scss/underscore' as _;
+
+.scrollable {
+  margin-top: _.unit(4);
+  overflow-y: auto;
+  border: 1px solid var(--color-neutral-90);
+  border-radius: _.unit(2);
+
+  table {
+    border: none;
+
+    thead tr {
+      position: sticky;
+      top: 0;
+
+      th {
+        background: var(--color-on-primary);
+      }
+    }
+  }
+}