diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(lab)/team/page.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(lab)/team/page.tsx
index c80d94b3e..a745b956b 100644
--- a/src/app/virtual-lab/lab/[virtualLabId]/(lab)/team/page.tsx
+++ b/src/app/virtual-lab/lab/[virtualLabId]/(lab)/team/page.tsx
@@ -1,5 +1,9 @@
 import VirtualLabTeamTable from '@/components/VirtualLab/VirtualLabTeamTable';
+import { ServerSideComponentProp } from '@/types/common';
 
-export default function VirtualLabTeamPage() {
-  return <VirtualLabTeamTable />;
+export default function VirtualLabTeamPage({
+  params,
+}: ServerSideComponentProp<{ virtualLabId: string }>) {
+  const { virtualLabId } = params;
+  return <VirtualLabTeamTable virtualLabId={virtualLabId} />;
 }
diff --git a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(pages)/home/page.tsx b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(pages)/home/page.tsx
index 22a19805b..95438960d 100644
--- a/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(pages)/home/page.tsx
+++ b/src/app/virtual-lab/lab/[virtualLabId]/(project)/project/[projectId]/(pages)/home/page.tsx
@@ -77,9 +77,11 @@ export default function VirtualLabProjectPage() {
           {mockMembers.map((member) => (
             <Member
               key={member.key}
+              first_name="TO BE REPLACED"
+              last_name="TO BE REPLACED"
               name={member.name}
               lastActive={member.lastActive}
-              memberRole={member.role}
+              memberRole="member"
             />
           ))}
         </div>
diff --git a/src/components/VirtualLab/VirtualLabHomePage/Member.tsx b/src/components/VirtualLab/VirtualLabHomePage/Member.tsx
index 203ec58a6..25531c0d5 100644
--- a/src/components/VirtualLab/VirtualLabHomePage/Member.tsx
+++ b/src/components/VirtualLab/VirtualLabHomePage/Member.tsx
@@ -3,14 +3,16 @@ import { Role } from '@/types/virtual-lab/members';
 
 type Props = {
   name: string;
+  first_name: string;
+  last_name: string;
   lastActive: string;
   memberRole: Role;
 };
 
-export default function Member({ name, lastActive, memberRole }: Props) {
+export default function Member({ name, first_name, last_name, lastActive, memberRole }: Props) {
   return (
     <div className="flex max-w-[128px] grow flex-col items-center gap-2">
-      <VirtualLabMemberIcon name={name} role={memberRole} />
+      <VirtualLabMemberIcon first_name={first_name} last_name={last_name} role={memberRole} />
       <div className="font-bold">{name}</div>
       <div className="text-primary-3">Active {lastActive}</div>
     </div>
diff --git a/src/components/VirtualLab/VirtualLabHomePage/index.tsx b/src/components/VirtualLab/VirtualLabHomePage/index.tsx
index 7e3d2b151..26da4be15 100644
--- a/src/components/VirtualLab/VirtualLabHomePage/index.tsx
+++ b/src/components/VirtualLab/VirtualLabHomePage/index.tsx
@@ -161,9 +161,11 @@ export default function VirtualLabHomePage({ id }: Props) {
           {virtualLabDetail.data.users.map((user) => (
             <Member
               key={user.id}
-              name={`${user.first_name} ${user.last_name}`}
+              name={user.name}
               lastActive="N/A"
               memberRole={user.role}
+              first_name={user.first_name}
+              last_name={user.last_name}
             />
           ))}
         </div>
diff --git a/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx b/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx
index 28990dd10..6a3956b47 100644
--- a/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx
+++ b/src/components/VirtualLab/VirtualLabMemberIcon/index.tsx
@@ -1,15 +1,14 @@
-import { Role } from "@/types/virtual-lab/members";
-
+import { Role } from '@/types/virtual-lab/members';
 
 type Props = {
   role: Role;
-  name: string;
+  first_name: string;
+  last_name: string;
 };
 
-export default function VirtualLabMemberIcon({ role, name }: Props) {
-  const getInitials = (_name: string) => {
-    const splitted = _name.split(' ');
-    return splitted.length > 1 ? `${splitted[0][0]}${splitted[1][0]}` : splitted[0][0];
+export default function VirtualLabMemberIcon({ role, first_name, last_name }: Props) {
+  const getInitials = () => {
+    return `${first_name[0]} ${last_name[0]}`;
   };
 
   const generateRandomHexColor = () => {
@@ -32,7 +31,7 @@ export default function VirtualLabMemberIcon({ role, name }: Props) {
       style={{ backgroundColor: generateRandomHexColor() }}
       className={`flex h-12 w-12 items-center justify-center ${role === 'member' ? 'rounded-full' : ''}`}
     >
-      <span className="text-2xl font-bold text-white">{getInitials(name)}</span>
+      <span className="text-2xl font-bold text-white">{getInitials()}</span>
     </div>
   );
 }
diff --git a/src/components/VirtualLab/VirtualLabTeamTable/index.tsx b/src/components/VirtualLab/VirtualLabTeamTable/index.tsx
index 3f9104619..d19c603ee 100644
--- a/src/components/VirtualLab/VirtualLabTeamTable/index.tsx
+++ b/src/components/VirtualLab/VirtualLabTeamTable/index.tsx
@@ -1,14 +1,42 @@
 'use client';
 
-import { DownOutlined, PlusOutlined } from '@ant-design/icons';
-import { ConfigProvider, Select, Table } from 'antd';
+import { DownOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import { ConfigProvider, Select, Spin, Table } from 'antd';
+import { loadable } from 'jotai/utils';
+import { useAtomValue } from 'jotai';
 import VirtualLabMemberIcon from '../VirtualLabMemberIcon';
-import { mockMembers } from '@/components/VirtualLab/mockData/members';
-import { MockMember, MockRole } from '@/types/virtual-lab/members';
+import { MockRole, Role, VirtualLabMember } from '@/types/virtual-lab/members';
+import { virtualLabDetailAtomFamily } from '@/state/virtual-lab/lab';
 
-export default function VirtualLabTeamTable() {
-  const roleOptions: { value: MockRole; label: string }[] = [
-    { value: 'administrator', label: 'Administrator' },
+type Props = {
+  virtualLabId: string;
+};
+
+export default function VirtualLabTeamTable({ virtualLabId }: Props) {
+  const virtualLabDetail = useAtomValue(loadable(virtualLabDetailAtomFamily(virtualLabId)));
+  if (virtualLabDetail.state === 'loading') {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <Spin size="large" indicator={<LoadingOutlined />} />
+      </div>
+    );
+  }
+  if (virtualLabDetail.state === 'hasError') {
+    return (
+      <div className="flex h-screen items-center justify-center">
+        <div className="rounded-lg border p-8">
+          {(virtualLabDetail.error as Error).message === 'Status: 404' ? (
+            <>Virtual Lab not found</>
+          ) : (
+            <>Something went wrong when fetching virtual lab</>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const roleOptions: { value: Role; label: string }[] = [
+    { value: 'admin', label: 'Administrator' },
     { value: 'member', label: 'Member' },
   ];
 
@@ -17,8 +45,12 @@ export default function VirtualLabTeamTable() {
       title: 'Icon',
       key: 'icon',
       dataIndex: 'name',
-      render: (_: any, record: MockMember) => (
-        <VirtualLabMemberIcon name={record.name} role={record.role} />
+      render: (_: any, record: VirtualLabMember) => (
+        <VirtualLabMemberIcon
+          first_name={record.first_name}
+          last_name={record.last_name}
+          role={record.role}
+        />
       ),
     },
     {
@@ -29,9 +61,9 @@ export default function VirtualLabTeamTable() {
     },
     {
       title: 'Last active',
-      dataIndex: 'lastActive',
-      key: 'lastActive',
-      render: (lastActive: string) => <span className="text-primary-3">Active {lastActive}</span>,
+      dataIndex: 'last_active',
+      key: 'last_active',
+      render: () => <span className="text-primary-3">Active N/A</span>,
     },
     {
       title: 'Action',
@@ -68,7 +100,7 @@ export default function VirtualLabTeamTable() {
       <div className="flex items-center justify-between">
         <div className="flex gap-2">
           <span>Total members</span>
-          <span className="font-bold">11</span>
+          <span className="font-bold">{virtualLabDetail.data.users.length}</span>
         </div>
         <div role="button" className="flex w-[150px] justify-between border border-primary-7 p-3">
           <span className="font-bold">Invite member</span>
@@ -89,7 +121,7 @@ export default function VirtualLabTeamTable() {
       >
         <Table
           bordered={false}
-          dataSource={mockMembers}
+          dataSource={virtualLabDetail.data.users}
           pagination={false}
           columns={columns}
           showHeader={false}