diff --git a/components/users/userLinkRenderer.tsx b/components/users/userLinkRenderer.tsx
new file mode 100644
index 0000000..1e787aa
--- /dev/null
+++ b/components/users/userLinkRenderer.tsx
@@ -0,0 +1,15 @@
+import {ICellRendererParams} from "ag-grid-community";
+import Link from "next/link";
+
+export default function UserLinkRenderer(param: ICellRendererParams) {
+    return (
+        <Link
+            href={`/users/${param.value}`}
+            style={{
+                width: '100%',
+            }}
+        >
+            {param.value}
+        </Link>
+    )
+}
diff --git a/components/users/usersAgGrid.tsx b/components/users/usersAgGrid.tsx
index 7c71d6b..d15a12c 100644
--- a/components/users/usersAgGrid.tsx
+++ b/components/users/usersAgGrid.tsx
@@ -10,6 +10,7 @@ import {User} from "@/src/models/UserModel";
 import {Class} from '@/src/models/ClassModel';
 import {Team} from "@/src/models/TeamModel";
 import {useRouter} from "next/navigation";
+import UserLinkRenderer from "@/components/users/userLinkRenderer";
 
 ModuleRegistry.registerModules([ClientSideRowModelModule]);
 
@@ -38,7 +39,11 @@ const UsersAgGrid = (props: UsersAgGridProps) => {
     const [rowData, setRowData] = useState<IRow[]>([])
     // Column Definitions: Defines & controls grid columns.
     const [colDefs,] = useState<ColDef<IRow>[]>([
-        {field: "userId", headerName: "ユーザーID"},
+        {
+            field: "userId",
+            headerName: "ユーザーID",
+            cellRenderer: UserLinkRenderer,
+        },
         {
             field: "name",
             headerName: "名前",