diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index 8182969d5..181e81743 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -116,3 +116,9 @@ export const APPLICATION_LANGUAGES_CODE = [
 	'ru',
 	'es'
 ];
+
+export enum IssuesView {
+	CARDS = 'CARDS',
+	TABLE = 'TABLE',
+	BLOCKS = 'BLOCKS'
+}
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
new file mode 100644
index 000000000..cae448f7f
--- /dev/null
+++ b/apps/web/components/ui/data-table.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import {
+	ColumnDef,
+	ColumnFiltersState,
+	SortingState,
+	VisibilityState,
+	flexRender,
+	getCoreRowModel,
+	getFacetedRowModel,
+	getFacetedUniqueValues,
+	getFilteredRowModel,
+	getPaginationRowModel,
+	getSortedRowModel,
+	useReactTable,
+} from "@tanstack/react-table"
+
+import {
+	Table,
+	TableHeader,
+	TableRow,
+	TableHead,
+	TableCell,
+	TableBody,
+	TableFooter,
+} from './table';
+
+interface DataTableProps<TData, TValue> {
+	columns: ColumnDef<TData, TValue>[]
+	data: TData[],
+	footerRows?: React.ReactNode[],
+	isError?: boolean;
+	noResultsMessage?: {
+		heading: string;
+		content: string;
+	}
+}
+
+function DataTable<TData, TValue>({
+	columns,
+	data,
+	footerRows,
+}: DataTableProps<TData, TValue>) {
+
+	const [rowSelection, setRowSelection] = React.useState({})
+	const [columnVisibility, setColumnVisibility] =
+		React.useState<VisibilityState>({})
+	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+		[]
+	)
+	const [sorting, setSorting] = React.useState<SortingState>([])
+
+	const table = useReactTable({
+		data,
+		columns,
+		state: {
+			sorting,
+			columnVisibility,
+			rowSelection,
+			columnFilters,
+		},
+		enableRowSelection: true,
+		onRowSelectionChange: setRowSelection,
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		getCoreRowModel: getCoreRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getFacetedRowModel: getFacetedRowModel(),
+		getFacetedUniqueValues: getFacetedUniqueValues(),
+	})
+
+	return (
+		<Table className='border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full'>
+			<TableHeader>
+				{table.getHeaderGroups().map((headerGroup) => (
+					<TableRow key={headerGroup.id}>
+						{headerGroup.headers.map((header) => {
+							return (
+								<TableHead key={header.id}>
+									{header.isPlaceholder
+										? null
+										: flexRender(
+											header.column.columnDef.header,
+											header.getContext()
+										)}
+								</TableHead>
+							)
+						})}
+					</TableRow>
+				))}
+			</TableHeader>
+			<TableBody className="divide-y divide-gray-200">
+				{table.getRowModel().rows?.length ? (
+					table.getRowModel().rows.map((row) => (
+						<TableRow
+							key={row.id}
+							data-state={row.getIsSelected() && "selected"}
+							className='my-4'
+						>
+							{row.getVisibleCells().map((cell) => (
+								<TableCell key={cell.id}
+								className="rounded-[16px] my-4">
+
+									{flexRender(
+										cell.column.columnDef.cell,
+										cell.getContext()
+									)}
+								</TableCell>
+							))}
+						</TableRow>
+					))
+				) : (
+					<TableRow>
+						<TableCell
+							colSpan={columns.length}
+							className="h-24 text-center"
+						>
+							No results.
+						</TableCell>
+					</TableRow>
+				)}
+			</TableBody>
+			{
+				footerRows && footerRows?.length > 0 && (
+					<TableFooter className='bg-gray-50 dark:bg-gray-800'>
+						{footerRows.map((row, index) => (
+							<TableRow key={`footer-row-${index}}`}>{row}</TableRow>
+						))}
+					</TableFooter>
+				)
+			}
+
+		</Table>
+	);
+}
+
+export default DataTable;
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
new file mode 100644
index 000000000..e59990b4f
--- /dev/null
+++ b/apps/web/components/ui/table.tsx
@@ -0,0 +1,115 @@
+import * as React from "react"
+
+import { clsxm } from '@app/utils';
+
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={clsxm("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={clsxm("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={clsxm("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={clsxm("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={clsxm(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={clsxm(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={clsxm("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={clsxm("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
new file mode 100644
index 000000000..84a60ee98
--- /dev/null
+++ b/apps/web/lib/features/team-member-cell.tsx
@@ -0,0 +1,107 @@
+import { useTeamMemberCard, useTMCardTaskEdit, useCollaborative } from "@app/hooks";
+import { OT_Member } from "@app/interfaces";
+import { clsxm } from "@app/utils";
+import { InputField } from "lib/components";
+import { TaskTimes } from "./task/task-times";
+import { TaskEstimateInfo } from "./team/user-team-card/task-estimate";
+import { TaskInfo } from "./team/user-team-card/task-info";
+import { UserInfo } from "./team/user-team-card/user-info";
+import { UserTeamCardMenu } from "./team/user-team-card/user-team-card-menu";
+import React from "react";
+import get from "lodash/get";
+
+
+export function TaskCell({ row }: { row: any }) {
+	const member = row.original as OT_Member;
+	const memberInfo = useTeamMemberCard(member);
+	const taskEdition = useTMCardTaskEdit(memberInfo?.memberTask);
+	const publicTeam = false;
+
+	return (
+		<TaskInfo
+			edition={taskEdition}
+			memberInfo={memberInfo}
+			className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2"
+			publicTeam={publicTeam}
+		/>
+	);
+}
+
+export function UserInfoCell({ cell }: {  cell: any}) {
+	const row  = get(cell, 'row', {});
+	const member = row.original as OT_Member;
+	const publicTeam = get(cell, 'column.columnDef.meta.publicTeam', false);
+	const memberInfo = useTeamMemberCard(member);
+
+	return (
+		<UserInfo
+			memberInfo={memberInfo}
+			className="2xl:w-[20.625rem] w-1/4"
+			publicTeam={publicTeam}
+		/>
+	);
+}
+
+export function WorkedOnTaskCell({ row }: { row: any }) {
+	const member = row.original as OT_Member;
+	const memberInfo = useTeamMemberCard(member);
+
+	return (
+		<TaskTimes
+			activeAuthTask={true}
+			memberInfo={memberInfo}
+			task={memberInfo?.memberTask}
+			isAuthUser={memberInfo?.isAuthUser}
+			className="2xl:w-32 3xl:w-[8rem] w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
+		/>
+	);
+}
+
+export function TaskEstimateInfoCell({ row }: { row: any }) {
+	const member = row.original as OT_Member;
+	const memberInfo = useTeamMemberCard(member);
+	const taskEdition = useTMCardTaskEdit(memberInfo?.memberTask);
+
+	return (
+		<TaskEstimateInfo
+			memberInfo={memberInfo}
+			edition={taskEdition}
+			activeAuthTask={true}
+			className="lg:px-3 2xl:w-52 3xl:w-64 w-1/5"
+		/>
+	);
+}
+
+export function ActionMenuCell ({ cell }: {  cell: any}) {
+	const row  = get(cell, 'row', {});
+	const member = row.original as OT_Member;
+	const active  = get(cell, 'column.columnDef.meta.active', false);
+	const memberInfo = useTeamMemberCard(member);
+
+	const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(
+		memberInfo.memberUser
+	);
+	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
+
+	return (
+		<>
+			{(!collaborativeSelect || active) && (
+				<UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />
+			)}
+
+			{collaborativeSelect && !active && (
+				<InputField
+					type="checkbox"
+					checked={user_selected()}
+					className={clsxm(
+						'border-none w-4 h-4 mr-1 accent-primary-light',
+						'border-2 border-primary-light',
+						'2xl:w-[2rem] w-1/5'
+					)}
+					noWrapper={true}
+					onChange={onUserSelect}
+				/>
+			)}
+		</>
+	);
+}
diff --git a/apps/web/lib/features/team-members-card-view.tsx b/apps/web/lib/features/team-members-card-view.tsx
new file mode 100644
index 000000000..55b8911df
--- /dev/null
+++ b/apps/web/lib/features/team-members-card-view.tsx
@@ -0,0 +1,131 @@
+import {
+	useAuthenticateUser,
+	useModal,
+	useOrganizationTeams,
+	useTeamInvitations
+} from '@app/hooks';
+import { Transition } from '@headlessui/react';
+import { InviteFormModal } from './team/invite/invite-form-modal';
+import {
+	InvitedCard,
+	InviteUserTeamCard
+} from './team/invite/user-invite-card';
+import { InviteUserTeamSkeleton, UserTeamCard, UserTeamCardSkeleton } from '.';
+import { OT_Member } from '@app/interfaces';
+
+interface Props {
+	teamMembers: OT_Member[];
+	publicTeam: boolean;
+}
+
+const TeamMembersCardView: React.FC<Props> = ({ teamMembers, publicTeam=false }) => {
+	const { isTeamManager, user } = useAuthenticateUser();
+	const currentUser = teamMembers.find((m) => {
+		return m.employee.userId === user?.id;
+	});
+	const { activeTeam, teamsFetching } = useOrganizationTeams();
+	const members = activeTeam?.members || [];
+
+	const { teamInvitations } = useTeamInvitations();
+	const $teamsFetching = teamsFetching && members.length === 0;
+	return(
+		<ul className="mt-7">
+			{/* Current authenticated user members */}
+			<Transition
+				show={!!currentUser}
+				enter="transition-opacity duration-75"
+				enterFrom="opacity-0"
+				enterTo="opacity-100"
+				leave="transition-opacity duration-150"
+				leaveFrom="opacity-100"
+				leaveTo="opacity-0"
+			>
+				<li className="mb-4">
+					<UserTeamCard member={currentUser} active publicTeam={publicTeam} />
+				</li>
+			</Transition>
+
+			{/* Team members list */}
+			{members.map((member) => {
+				return (
+					<Transition
+						key={member.id}
+						show={true}
+						enter="transition-opacity duration-75"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="transition-opacity duration-150"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<li className="mb-4">
+							<UserTeamCard member={member} publicTeam={publicTeam} />
+						</li>
+					</Transition>
+				);
+			})}
+
+			{members.length > 0 &&
+				teamInvitations.map((invitation) => (
+					<li key={invitation.id} className="mb-4">
+						<InvitedCard invitation={invitation} />
+					</li>
+				))}
+
+			{/* Loader skeleton */}
+			<Transition
+				show={$teamsFetching}
+				enter="transition-opacity duration-75"
+				enterFrom="opacity-0"
+				enterTo="opacity-100"
+				leave="transition-opacity duration-150"
+				leaveFrom="opacity-100"
+				leaveTo="opacity-0"
+			>
+				{[1, 2].map((_, i) => {
+					return (
+						<li key={i} className="mt-3">
+							<UserTeamCardSkeleton />
+						</li>
+					);
+				})}
+				<li>
+					<InviteUserTeamSkeleton />
+				</li>
+			</Transition>
+
+			{/* Invite button */}
+			<Transition
+				show={isTeamManager}
+				enter="transition-opacity duration-75"
+				enterFrom="opacity-0"
+				enterTo="opacity-100"
+				leave="transition-opacity duration-150"
+				leaveFrom="opacity-100"
+				leaveTo="opacity-0"
+			>
+				<li className="mb-4">
+					<Invite />
+				</li>
+			</Transition>
+		</ul>
+	)
+
+}
+
+function Invite() {
+	const { user } = useAuthenticateUser();
+	const { openModal, isOpen, closeModal } = useModal();
+
+	return (
+		<>
+			<InviteUserTeamCard active={user?.isEmailVerified} onClick={openModal} />
+			<InviteFormModal
+				open={isOpen && !!user?.isEmailVerified}
+				closeModal={closeModal}
+			/>
+		</>
+	);
+}
+
+export default TeamMembersCardView;
diff --git a/apps/web/lib/features/team-members-table-view.tsx b/apps/web/lib/features/team-members-table-view.tsx
new file mode 100644
index 000000000..eabac557d
--- /dev/null
+++ b/apps/web/lib/features/team-members-table-view.tsx
@@ -0,0 +1,83 @@
+import * as React from 'react';
+import DataTable from '@components/ui/data-table';
+import { Column, ColumnDef } from '@tanstack/react-table';
+import { OT_Member } from '@app/interfaces';
+import { UserInfoCell, TaskCell, WorkedOnTaskCell, TaskEstimateInfoCell, ActionMenuCell } from './team-member-cell';
+import { useAuthenticateUser, useModal } from '@app/hooks';
+import { InviteUserTeamCard } from './team/invite/user-invite-card';
+import { InviteFormModal } from './team/invite/invite-form-modal';
+
+const TeamMembersTableView = ({
+	teamMembers,
+	publicTeam = false,
+	active = false
+}: {
+	teamMembers: OT_Member[];
+	publicTeam?: boolean;
+	active?: boolean;
+}) => {
+	const columns = React.useMemo<ColumnDef<OT_Member>[]>(
+		() => [
+			{
+				id: 'name',
+				header: 'Name',
+				cell: UserInfoCell,
+				meta: {
+					publicTeam
+				}
+			},
+			{
+				id: 'task',
+				header: 'Task',
+				cell: TaskCell
+			},
+			{
+				id: 'workedOnTask',
+				header: 'Worked on task',
+				cell: WorkedOnTaskCell
+			},
+			{
+				id: 'estimate',
+				header: 'Estimate',
+				cell: TaskEstimateInfoCell
+			},
+			{
+				id: 'action',
+				header: 'Action',
+				cell: ActionMenuCell,
+				meta: {
+					active
+				}
+			}
+		],
+		[]
+	);
+
+	const footerRows = React.useMemo<React.ReactNode[]>(() => [<Invite key={0} />], []);
+
+	return (
+		<DataTable
+			columns={columns as Column<OT_Member>[]}
+			data={teamMembers}
+			footerRows={footerRows}
+			noResultsMessage={{
+				heading: 'No team members found',
+				content: 'Try adjusting your search or filter to find what you’re looking for.'
+			}}
+		/>
+	);
+};
+
+function Invite() {
+	const { user } = useAuthenticateUser();
+	const { openModal, isOpen, closeModal } = useModal();
+
+	return (
+		<>
+			<InviteUserTeamCard active={user?.isEmailVerified} onClick={openModal} />
+			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
+		</>
+	);
+}
+
+export default TeamMembersTableView;
diff --git a/apps/web/lib/features/team-members.tsx b/apps/web/lib/features/team-members.tsx
index d96c025e4..be2763ac3 100644
--- a/apps/web/lib/features/team-members.tsx
+++ b/apps/web/lib/features/team-members.tsx
@@ -1,132 +1,65 @@
-import { useAuthenticateUser, useModal, useOrganizationTeams, useTeamInvitations } from '@app/hooks';
+import { useAuthenticateUser, useOrganizationTeams } from '@app/hooks';
 import { Transition } from '@headlessui/react';
-import { InviteFormModal } from './team/invite/invite-form-modal';
-import { InvitedCard, InviteUserTeamCard } from './team/invite/user-invite-card';
-import { InviteUserTeamSkeleton, UserTeamCard, UserTeamCardSkeleton } from '.';
 import UserTeamCardSkeletonCard from '@components/shared/skeleton/UserTeamCardSkeleton';
 import InviteUserTeamCardSkeleton from '@components/shared/skeleton/InviteTeamCardSkeleton';
 import { UserCard } from '@components/shared/skeleton/TeamPageSkeleton';
-// import { useEffect } from 'react';
 
-export function TeamMembers({ publicTeam = false }: { publicTeam?: boolean }) {
-	const { isTeamManager, user } = useAuthenticateUser();
-	const { activeTeam, teamsFetching } = useOrganizationTeams();
-	const { teamInvitations } = useTeamInvitations();
+import TeamMembersTableView from './team-members-table-view';
+import TeamMembersCardView from './team-members-card-view';
+import { IssuesView } from '@app/constants';
 
-	const members = activeTeam?.members || [];
-	const $teamsFetching = teamsFetching && members.length === 0;
+type TeamMembersProps = {
+  publicTeam?: boolean;
+  kabanView?: IssuesView;
+};
 
-	const currentUser = members.find((m) => {
-		return m.employee.userId === user?.id;
-	});
+export function TeamMembers({ publicTeam = false, kabanView = IssuesView.CARDS }: TeamMembersProps) {
+  const { user } = useAuthenticateUser();
+  const { activeTeam } = useOrganizationTeams();
 
-	const $members = members.filter((m) => {
-		return m.employee.user?.id !== user?.id;
-	});
+  const members = activeTeam?.members || [];
+  const currentUser = members.find((m) => m.employee.userId === user?.id);
 
-	return members.length === 0 ? (
-		<div className="">
-			<div className="lg:block hidden">
-				<UserTeamCardSkeletonCard />
-				<InviteUserTeamCardSkeleton />
-			</div>
-			<div className="block lg:hidden">
-				<UserCard />
-				<UserCard />
-			</div>
-		</div>
-	) : (
-		<ul className="mt-7">
-			{/* Current authenticated user members */}
-			<Transition
-				show={!!currentUser}
-				enter="transition-opacity duration-75"
-				enterFrom="opacity-0"
-				enterTo="opacity-100"
-				leave="transition-opacity duration-150"
-				leaveFrom="opacity-100"
-				leaveTo="opacity-0"
-			>
-				<li className="mb-4">
-					<UserTeamCard member={currentUser} active publicTeam={publicTeam} />
-				</li>
-			</Transition>
+const $members = members.filter((m) => m.employee.user?.id !== user?.id);
 
-			{/* Team members list */}
-			{$members.map((member) => {
-				return (
-					<Transition
-						key={member.id}
-						show={true}
-						enter="transition-opacity duration-75"
-						enterFrom="opacity-0"
-						enterTo="opacity-100"
-						leave="transition-opacity duration-150"
-						leaveFrom="opacity-100"
-						leaveTo="opacity-0"
-					>
-						<li className="mb-4">
-							<UserTeamCard member={member} publicTeam={publicTeam} />
-						</li>
-					</Transition>
-				);
-			})}
 
-			{members.length > 0 &&
-				teamInvitations.map((invitation) => (
-					<li key={invitation.id} className="mb-4">
-						<InvitedCard invitation={invitation} />
-					</li>
-				))}
+let teamMembersView;
 
-			{/* Loader skeleton */}
-			<Transition
-				show={$teamsFetching}
-				enter="transition-opacity duration-75"
-				enterFrom="opacity-0"
-				enterTo="opacity-100"
-				leave="transition-opacity duration-150"
-				leaveFrom="opacity-100"
-				leaveTo="opacity-0"
-			>
-				{[1, 2].map((_, i) => {
-					return (
-						<li key={i} className="mt-3">
-							<UserTeamCardSkeleton />
-						</li>
-					);
-				})}
-				<li>
-					<InviteUserTeamSkeleton />
-				</li>
-			</Transition>
-
-			{/* Invite button */}
-			<Transition
-				show={isTeamManager}
-				enter="transition-opacity duration-75"
-				enterFrom="opacity-0"
-				enterTo="opacity-100"
-				leave="transition-opacity duration-150"
-				leaveFrom="opacity-100"
-				leaveTo="opacity-0"
-			>
-				<li className="mb-4">
-					<Invite />
-				</li>
-			</Transition>
-		</ul>
-	);
+switch (true) {
+  case members.length === 0:
+    teamMembersView = (
+      <div className="">
+        <div className="lg:block hidden">
+          <UserTeamCardSkeletonCard />
+          <InviteUserTeamCardSkeleton />
+        </div>
+        <div className="block lg:hidden">
+          <UserCard />
+          <UserCard />
+        </div>
+      </div>
+    );
+    break;
+  case kabanView === IssuesView.CARDS:
+    teamMembersView = <TeamMembersCardView teamMembers={$members} publicTeam={publicTeam} />;
+    break;
+  case kabanView === IssuesView.TABLE:
+    teamMembersView = (
+      <Transition
+        show={!!currentUser}
+        enter="transition-opacity duration-75"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <TeamMembersTableView teamMembers={members} publicTeam={publicTeam} active={user?.isEmailVerified} />
+      </Transition>
+    );
+    break;
+  default:
+    teamMembersView = <TeamMembersCardView teamMembers={members} publicTeam={publicTeam} />;
 }
-
-function Invite() {
-	const { user } = useAuthenticateUser();
-	const { openModal, isOpen, closeModal } = useModal();
-
-	return (
-		<>
-			<InviteUserTeamCard active={user?.isEmailVerified} onClick={openModal} />
-			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
-		</>
-	);
+return teamMembersView;
 }
diff --git a/apps/web/lib/features/team/invite/user-invite-card.tsx b/apps/web/lib/features/team/invite/user-invite-card.tsx
index 2a81b7398..887c22643 100644
--- a/apps/web/lib/features/team/invite/user-invite-card.tsx
+++ b/apps/web/lib/features/team/invite/user-invite-card.tsx
@@ -225,9 +225,6 @@ export function InviteUserTeamCard({
 					<DraggerIcon className="fill-[#CCCCCC] dark:fill-[#4F5662]" />
 				</div>
 
-				<div className="absolute opacity-40 right-2">
-					<MoreIcon />
-				</div>
 
 				{/* Show user name, email and image */}
 				<div className="2xl:w-[20.625rem] w-1/4 px-4 flex space-x-3">
@@ -248,59 +245,6 @@ export function InviteUserTeamCard({
 						</Button>
 					</Tooltip>
 				</div>
-				<VerticalSeparator />
-
-				{/* Task information */}
-				<Text className="opacity-40 2xl:w-80 3xl:w-[32rem] px-4 text-center text-xs sm:text-sm">
-					{t('common.TASK_TITTLE')}
-				</Text>
-				<VerticalSeparator className="ml-2" />
-
-				{/* TaskTime */}
-				<div className="opacity-40 flex text-center space-x-2 items-center mb-2 2xl:w-48 3xl:w-[12rem] w-1/5 font-normal lg:px-4 px-2 text-xs md:text-sm">
-					<span>{t('common.TODAY')}:</span>
-					<Text>00h : 00m</Text>
-				</div>
-				<VerticalSeparator />
-
-				{/* TaskEstimateInfo */}
-				<div className="relative flex items-center justify-center w-1/5 space-x-1 text-xs opacity-40 2xl:w-52 3xl:w-64 md:text-sm">
-					<TimeInputField defaultValue="00" label="h" />
-					<span>:</span>
-					<TimeInputField defaultValue="00" label="m" />
-					<div className="absolute inset-0" />
-				</div>
-				<VerticalSeparator />
-
-				{/* Card menu */}
-				<div className="flex-1 text-xs font-normal text-center opacity-40 md:text-sm">
-					<Text>0h : 0m</Text>
-				</div>
-			</Card>
-			<Card shadow="bigger" className={clsxm('relative sm:hidden flex flex-col py-3', className)}>
-				<div className="absolute opacity-40 right-2">
-					<MoreIcon />
-				</div>
-				<div className="flex justify-between px-4">
-					<div className="w-10 h-10 rounded-full opacity-40 bg-slate-400" />
-					<Button onClick={onClick}>{t('common.INVITE')}</Button>
-				</div>
-				<Text className="px-4 mt-4 text-left opacity-40">{t('common.TASK_TITTLE')}</Text>
-				<div className="flex items-center w-full px-3 pt-4 mt-4 mb-2 space-x-2 text-xs font-normal text-center border-t opacity-40">
-					<span>{t('common.TODAY')}:</span>
-					<Text>0h : 0m</Text>
-				</div>
-				<div className="flex items-center justify-between">
-					<div className="relative flex items-center justify-center pl-3 space-x-1 text-xs opacity-40">
-						<TimeInputField defaultValue="00" label="h" />
-						<span>:</span>
-						<TimeInputField defaultValue="00" label="m" />
-						<div className="absolute inset-0" />
-					</div>
-					<div className="flex-1 text-xs font-normal opacity-40 text-end">
-						<Text>0h : 0m</Text>
-					</div>
-				</div>
 			</Card>
 		</div>
 	);
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index 5f0ee7e8b..d6cc077a7 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -14,11 +14,15 @@ import {
 } from 'lib/features';
 import { MainHeader, MainLayout } from 'lib/layout';
 import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { IssuesView } from '@app/constants';
+import { TableCellsIcon, QueueListIcon } from '@heroicons/react/24/solid';
 
 function MainPage() {
 	const { t } = useTranslation();
 	const { isTeamMember, isTrackingEnabled, activeTeam } = useOrganizationTeams();
 	const breadcrumb = [...t('pages.home.BREADCRUMB', { returnObjects: true }), activeTeam?.name || ''];
+	const [view, setView] = useState<IssuesView>(IssuesView.CARDS);
 
 	return (
 		<MainLayout>
@@ -30,24 +34,52 @@ function MainPage() {
 					</div>
 
 					{/* <Collaborative /> */}
+					<div className="flex items-end gap-1">
+						<button
+							className={clsxm(
+								'rounded-md px-3 py-1 text-sm font-medium',
+								view === IssuesView.CARDS
+									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+									: 'text-gray-700 dark:text-gray-300'
+							)}
+							onClick={() => setView(IssuesView.CARDS)}
+						>
+							<TableCellsIcon className="w-5 h-5 inline" />
+						</button>
+						<button
+							className={clsxm(
+								'rounded-md px-3 py-1 text-sm font-medium',
+								view === IssuesView.TABLE
+									? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+									: 'text-gray-700 dark:text-gray-300'
+							)}
+							onClick={() => setView(IssuesView.TABLE)}
+						>
+							<QueueListIcon className="w-5 h-5 inline" />
+						</button>
+					</div>
 				</div>
 
 				<UnverifiedEmail />
 				<TeamInvitations />
 			</MainHeader>
 
-			<div className="sticky top-20 z-50 bg-white dark:bg-[#191A20] pt-5">
+			<div
+				className={`sticky top-20 z-50 bg-white dark:bg-[#191A20] pt-5 ${
+					view === IssuesView.TABLE ? 'pb-7' : ''
+				}`}
+			>
 				<Container>
 					{isTeamMember ? <TaskTimerSection isTrackingEnabled={isTrackingEnabled} /> : null}
 					{/* Header user card list */}
-					{isTeamMember ? <UserTeamCardHeader /> : null}
+					{view === IssuesView.CARDS && isTeamMember ? <UserTeamCardHeader /> : null}
 				</Container>
 
 				{/* Divider */}
 				<div className="h-0.5 bg-[#FFFFFF14]"></div>
 			</div>
 
-			<Container>{isTeamMember ? <TeamMembers /> : <NoTeam />}</Container>
+			<Container className="">{isTeamMember ? <TeamMembers kabanView={view} /> : <NoTeam />}</Container>
 		</MainLayout>
 	);
 }
diff --git a/yarn.lock b/yarn.lock
index b153eeb8a..977478325 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5095,7 +5095,7 @@
     lodash.merge "^4.6.2"
     postcss-selector-parser "6.0.10"
 
-"@tanstack/react-table@^8.10.7":
+"@tanstack/react-table@8.10.7":
   version "8.10.7"
   resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.10.7.tgz#733f4bee8cf5aa19582f944dd0fd3224b21e8c94"
   integrity sha512-bXhjA7xsTcsW8JPTTYlUg/FuBpn8MNjiEPhkNhIGCUR6iRQM2+WEco4OBpvDeVcR9SE+bmWLzdfiY7bCbCSVuA==