diff --git a/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx b/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx
index c28645775..ad29baa54 100644
--- a/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx
+++ b/apps/web/app/[locale]/dashboard/app-url/[teamId]/page.tsx
@@ -16,133 +16,122 @@ import { useReportActivity } from '@/app/hooks/features/useReportActivity';
 import { ProductivityStats } from '../components/ProductivityStats';
 import { ProductivityChart } from '../components/ProductivityChart';
 import { ProductivityHeader } from '../components/ProductivityHeader';
+import { ProductivityTable } from '../components/ProductivityTable';
 
 interface ProductivityData {
-  date: string;
-  productive: number;
-  neutral: number;
-  unproductive: number;
+	date: string;
+	productive: number;
+	neutral: number;
+	unproductive: number;
 }
 
 function AppUrls() {
-  const { isTrackingEnabled } = useOrganizationTeams();
-  const { updateDateRange, updateFilters, isManage } = useReportActivity();
+	const { isTrackingEnabled } = useOrganizationTeams();
+	const { updateDateRange, updateFilters, isManage } = useReportActivity();
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [groupBy, setGroupBy] = useState<string>('date');
+	const [groupBy, setGroupBy] = useState<string>('date');
 
-  const router = useRouter();
-  const t = useTranslations();
-  const fullWidth = useAtomValue(fullWidthState);
-  const paramsUrl = useParams<{ locale: string }>();
-  const currentLocale = paramsUrl?.locale;
+	const router = useRouter();
+	const t = useTranslations();
+	const fullWidth = useAtomValue(fullWidthState);
+	const paramsUrl = useParams<{ locale: string }>();
+	const currentLocale = paramsUrl?.locale;
 
-  const monthData: ProductivityData[] = [
-    { date: '2024-10-01', productive: 70, neutral: 20, unproductive: 10 },
-    { date: '2024-10-02', productive: 75, neutral: 15, unproductive: 10 },
-    { date: '2024-10-03', productive: 80, neutral: 15, unproductive: 5 },
-    { date: '2024-10-04', productive: 85, neutral: 10, unproductive: 5 },
-    { date: '2024-10-05', productive: 75, neutral: 20, unproductive: 5 },
-    { date: '2024-10-06', productive: 65, neutral: 25, unproductive: 10 },
-    { date: '2024-10-07', productive: 90, neutral: 5, unproductive: 5 },
-    { date: '2024-10-08', productive: 85, neutral: 10, unproductive: 5 },
-    { date: '2024-10-09', productive: 80, neutral: 15, unproductive: 5 },
-    { date: '2024-10-10', productive: 70, neutral: 20, unproductive: 10 },
-    { date: '2024-10-11', productive: 60, neutral: 30, unproductive: 10 },
-    { date: '2024-10-12', productive: 75, neutral: 15, unproductive: 10 },
-    { date: '2024-10-13', productive: 85, neutral: 10, unproductive: 5 },
-    { date: '2024-10-14', productive: 80, neutral: 15, unproductive: 5 },
-    { date: '2024-10-15', productive: 75, neutral: 20, unproductive: 5 },
-    { date: '2024-10-16', productive: 70, neutral: 20, unproductive: 10 },
-    { date: '2024-10-17', productive: 65, neutral: 25, unproductive: 10 },
-    { date: '2024-10-18', productive: 85, neutral: 10, unproductive: 5 },
-    { date: '2024-10-19', productive: 80, neutral: 15, unproductive: 5 },
-    { date: '2024-10-20', productive: 90, neutral: 5, unproductive: 5 },
-    { date: '2024-10-21', productive: 85, neutral: 10, unproductive: 5 },
-    { date: '2024-10-22', productive: 80, neutral: 15, unproductive: 5 },
-    { date: '2024-10-23', productive: 75, neutral: 20, unproductive: 5 },
-    { date: '2024-10-24', productive: 70, neutral: 20, unproductive: 10 },
-    { date: '2024-10-25', productive: 85, neutral: 10, unproductive: 5 },
-    { date: '2024-10-26', productive: 80, neutral: 15, unproductive: 5 },
-    { date: '2024-10-27', productive: 75, neutral: 20, unproductive: 5 },
-    { date: '2024-10-28', productive: 70, neutral: 20, unproductive: 10 },
-    { date: '2024-10-29', productive: 90, neutral: 5, unproductive: 5 },
-    { date: '2024-10-30', productive: 85, neutral: 10, unproductive: 5 }
-  ];
 
-  const monthTotals = monthData.reduce(
-    (acc, day) => ({
-      productive: acc.productive + day.productive,
-      neutral: acc.neutral + day.neutral,
-      unproductive: acc.unproductive + day.unproductive
-    }),
-    { productive: 0, neutral: 0, unproductive: 0 }
-  );
 
-  const totalTime = monthTotals.productive + monthTotals.neutral + monthTotals.unproductive;
-  const productivePercentage = Math.round((monthTotals.productive / totalTime) * 100);
-  const neutralPercentage = Math.round((monthTotals.neutral / totalTime) * 100);
-  const unproductivePercentage = Math.round((monthTotals.unproductive / totalTime) * 100);
+  const generateMonthData = (date: Date): ProductivityData[] => {
+    const year = date.getFullYear();
+    const month = date.getMonth();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
 
-  const breadcrumbPath = useMemo(
-    () => [
-      { title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-      { title: 'Apps & URLs', href: `/${currentLocale}/dashboard/app-url` }
-    ],
-    [currentLocale, t]
-  );
-  console.log("=====>",groupBy)
+    return Array.from({ length: daysInMonth }, (_, i) => ({
+      date: new Date(year, month, i + 1).toISOString().split('T')[0],
+      productive: Math.floor(Math.random() * 50) + 25,
+      neutral: Math.floor(Math.random() * 40) + 20,
+      unproductive: Math.floor(Math.random() * 35) + 15,
+    }));
+  };
+  const monthData = generateMonthData(new Date());
 
-  return (
-    <MainLayout
-      className="items-start pb-1 !overflow-hidden w-full"
-      childrenClassName="w-full"
-      showTimer={isTrackingEnabled}
-      mainHeaderSlot={
-        <div className="flex flex-col pb-4 bg-gray-100 dark:bg-dark--theme">
-          <Container fullWidth={fullWidth} className={cn('flex flex-col gap-4 items-center w-full')}>
-            <div className="flex items-center pt-6 w-full">
-              <button
-                onClick={() => router.back()}
-                className="p-1 rounded-full transition-colors hover:bg-gray-100"
-              >
-                <ArrowLeftIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
-              </button>
-              <Breadcrumb paths={breadcrumbPath} className="text-sm" />
-            </div>
-            <div className="flex flex-col gap-6 w-full">
-              <DashboardHeader
-                onUpdateDateRange={updateDateRange}
-                onUpdateFilters={updateFilters}
-                title="Apps & URLs Dashboard"
-                isManage={isManage}
-                showGroupBy={true}
-                onGroupByChange={setGroupBy}
-              />
-              <Card shadow="bigger" className="bg-white rounded-xl border border-gray-100 dark:border-gray-700 dark:bg-dark--theme-light h-[403px] p-8 py-0 px-0">
-                <div className="flex flex-col gap-6 w-full">
-                  <div className="flex justify-between items-center h-[105px] w-full border-b border-b-gray-200 dark:border-b-gray-700">
-                    <ProductivityHeader month="October" year={2024} />
-                    <ProductivityStats
-                      productivePercentage={productivePercentage}
-                      neutralPercentage={neutralPercentage}
-                      unproductivePercentage={unproductivePercentage}
-                    />
-                  </div>
-                  <div className="flex flex-col px-8 w-full">
-                    <ProductivityChart data={monthData} />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </Container>
-        </div>
-      }
-    />
-  );
+	const monthTotals = monthData.reduce(
+		(acc, day) => ({
+			productive: acc.productive + day.productive,
+			neutral: acc.neutral + day.neutral,
+			unproductive: acc.unproductive + day.unproductive
+		}),
+		{ productive: 0, neutral: 0, unproductive: 0 }
+	);
+
+	const totalTime = monthTotals.productive + monthTotals.neutral + monthTotals.unproductive;
+	const productivePercentage = Math.round((monthTotals.productive / totalTime) * 100);
+	const neutralPercentage = Math.round((monthTotals.neutral / totalTime) * 100);
+	const unproductivePercentage = Math.round((monthTotals.unproductive / totalTime) * 100);
+
+	const breadcrumbPath = useMemo(
+		() => [
+			{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+			{ title: 'Apps & URLs', href: `/${currentLocale}/dashboard/app-url` }
+		],
+		[currentLocale, t]
+	);
+
+	return (
+		<MainLayout
+			className="items-start pb-1 !overflow-hidden w-full"
+			childrenClassName="w-full"
+			showTimer={isTrackingEnabled}
+			mainHeaderSlot={
+				<div className="flex flex-col pb-4 bg-gray-100 dark:bg-dark--theme">
+					<Container fullWidth={fullWidth} className={cn('flex flex-col gap-4 items-center w-full')}>
+						<div className="flex items-center pt-6 w-full">
+							<button
+								onClick={() => router.back()}
+								className="p-1 rounded-full transition-colors hover:bg-gray-100"
+							>
+								<ArrowLeftIcon className="text-dark dark:text-[#6b7280] h-6 w-6" />
+							</button>
+							<Breadcrumb paths={breadcrumbPath} className="text-sm" />
+						</div>
+						<div className="flex flex-col gap-6 w-full">
+							<DashboardHeader
+								onUpdateDateRange={updateDateRange}
+								onUpdateFilters={updateFilters}
+								title="Apps & URLs Dashboard"
+								isManage={isManage}
+								showGroupBy={true}
+								onGroupByChange={()=>setGroupBy(groupBy)}
+							/>
+							<Card
+								shadow="bigger"
+								className="bg-white rounded-xl border border-gray-100 dark:border-gray-700 dark:bg-dark--theme-light h-[403px] p-8 py-0 px-0"
+							>
+								<div className="flex flex-col gap-6 w-full">
+									<div className="flex justify-between items-center h-[105px] w-full border-b border-b-gray-200 dark:border-b-gray-700">
+										<ProductivityHeader month="October" year={2024} />
+										<ProductivityStats
+											productivePercentage={productivePercentage}
+											neutralPercentage={neutralPercentage}
+											unproductivePercentage={unproductivePercentage}
+										/>
+									</div>
+									<div className="flex flex-col px-8 w-full">
+										<ProductivityChart data={monthData} />
+									</div>
+								</div>
+							</Card>
+						</div>
+					</Container>
+				</div>
+			}
+		>
+			<Container fullWidth={fullWidth} className={cn('flex flex-col gap-8 !px-4 py-6 w-full')}>
+				<ProductivityTable />
+			</Container>
+		</MainLayout>
+	);
 }
 
 export default withAuthentication(AppUrls, {
-  displayName: 'Apps & URLs',
-  showPageSkeleton: true
+	displayName: 'Apps & URLs',
+	showPageSkeleton: true
 });
diff --git a/apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx b/apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx
index ace6bf39f..6a861bf68 100644
--- a/apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx
+++ b/apps/web/app/[locale]/dashboard/app-url/components/ProductivityChart.tsx
@@ -12,29 +12,45 @@ interface ProductivityChartProps {
 }
 
 export const ProductivityChart: React.FC<ProductivityChartProps> = ({ data }) => {
+    const getDateNumber = (dateString: string) => {
+        return new Date(dateString).getDate();
+    };
+
     return (
-        <div className="flex gap-[2px] h-[220px] w-full justify-between">
-            {data.map((day) => (
-                <div
-                    key={day.date}
-                    className="flex relative flex-col flex-1 justify-end cursor-pointer group"
-                >
-                    <div className="flex overflow-hidden absolute inset-0 flex-col justify-end">
-                        <div
-                            style={{ height: `${day.productive}%` }}
-                            className="w-full bg-[#1554E0] rounded-t-lg group-hover:opacity-80 transition-opacity duration-200"
-                        ></div>
-                        <div
-                            style={{ height: `${day.unproductive}%` }}
-                            className="w-full bg-[#F56D58] group-hover:opacity-80 transition-opacity duration-200"
-                        ></div>
-                        <div
-                            style={{ height: `${day.neutral}%` }}
-                            className="w-full bg-[#F5B458] group-hover:opacity-80 transition-opacity duration-200"
-                        ></div>
+        <div className="flex flex-col gap-2">
+            <div className="flex gap-[2px] h-[220px] w-full justify-between">
+                {data.map((day) => (
+                    <div
+                        key={day.date}
+                        className="flex relative flex-col flex-1 justify-end cursor-pointer group"
+                    >
+                        <div className="flex overflow-hidden absolute inset-0 flex-col justify-end">
+                            <div
+                                style={{ height: `${day.productive}%` }}
+                                className="w-full bg-[#1554E0] rounded-t-lg group-hover:opacity-80 transition-opacity duration-200"
+                            ></div>
+                            <div
+                                style={{ height: `${day.unproductive}%` }}
+                                className="w-full bg-[#F56D58] group-hover:opacity-80 transition-opacity duration-200"
+                            ></div>
+                            <div
+                                style={{ height: `${day.neutral}%` }}
+                                className="w-full bg-[#F5B458] group-hover:opacity-80 transition-opacity duration-200"
+                            ></div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+            <div className="flex gap-[2px] w-full justify-between px-1">
+                {data.map((day) => (
+                    <div
+                        key={`label-${day.date}`}
+                        className="flex-1 text-xs text-center text-gray-500"
+                    >
+                        {getDateNumber(day.date)}
                     </div>
-                </div>
-            ))}
+                ))}
+            </div>
         </div>
     );
 };
diff --git a/apps/web/app/[locale]/dashboard/app-url/components/ProductivityHeader.tsx b/apps/web/app/[locale]/dashboard/app-url/components/ProductivityHeader.tsx
index b3d2ccdf1..caf420389 100644
--- a/apps/web/app/[locale]/dashboard/app-url/components/ProductivityHeader.tsx
+++ b/apps/web/app/[locale]/dashboard/app-url/components/ProductivityHeader.tsx
@@ -8,7 +8,7 @@ interface ProductivityHeaderProps {
 export const ProductivityHeader: React.FC<ProductivityHeaderProps> = ({ month, year }) => {
     return (
         <div className="flex flex-col">
-            <h2 className="text-xl font-semibold">{`${month} ${year}`}</h2>
+            <h2 className="text-xl font-bold">{`${month} ${year}`}</h2>
             <p className="text-gray-500">{`Productivity breakdown for ${month}`}</p>
         </div>
     );
diff --git a/apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx b/apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
new file mode 100644
index 000000000..d3fa45951
--- /dev/null
+++ b/apps/web/app/[locale]/dashboard/app-url/components/ProductivityTable.tsx
@@ -0,0 +1,159 @@
+'use client';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Card } from '@/lib/components';
+
+interface AppUsageData {
+  member: {
+    name: string;
+    avatarUrl?: string;
+  };
+  project?: string;
+  application?: string;
+  timeSpent?: string;
+  percentUsed: number;
+}
+
+export function ProductivityTable({
+  data,
+  isLoading
+}: {
+  data?: AppUsageData[];
+  isLoading?: boolean;
+}) {
+  const sampleData: AppUsageData[] = [
+    {
+      member: {
+        name: 'Elanor Pena',
+        avatarUrl: '/avatars/elanor.jpg'
+      },
+      project: 'EverTeams',
+      application: 'Figma',
+      timeSpent: '03:46:11',
+      percentUsed: 60
+    },
+    {
+      member: {
+        name: 'Elanor Pena',
+        avatarUrl: '/avatars/elanor.jpg'
+      },
+      project: 'EverTeams',
+      application: 'Slack',
+      timeSpent: '1:17:02',
+      percentUsed: 20
+    },
+    {
+      member: {
+        name: 'Elanor Pena',
+        avatarUrl: '/avatars/elanor.jpg'
+      },
+      project: 'EverTeams',
+      application: 'Arc',
+      timeSpent: '46:44',
+      percentUsed: 15
+    },
+    {
+      member: {
+        name: 'Elanor Pena',
+        avatarUrl: '/avatars/elanor.jpg'
+      },
+      project: 'EverTeams',
+      application: 'Postman',
+      timeSpent: '12:54',
+      percentUsed: 5
+    }
+  ];
+
+  // Use sample data for now
+  const displayData = data || sampleData;
+
+  if (isLoading) {
+    return (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Member</TableHead>
+              <TableHead>Project</TableHead>
+              <TableHead>Application</TableHead>
+              <TableHead>Time Spent</TableHead>
+              <TableHead>Percent used</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {[...Array(4)].map((_, i) => (
+              <TableRow key={i}>
+                <TableCell>
+                  <div className="flex gap-2 items-center">
+                    <Skeleton className="w-8 h-8 rounded-full" />
+                    <Skeleton className="w-24 h-4" />
+                  </div>
+                </TableCell>
+                <TableCell><Skeleton className="w-24 h-4" /></TableCell>
+                <TableCell><Skeleton className="w-16 h-4" /></TableCell>
+                <TableCell><Skeleton className="w-16 h-4" /></TableCell>
+                <TableCell><Skeleton className="w-24 h-4" /></TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+    );
+  }
+
+  return (
+    <Card shadow="custom" className="rounded-md border bg-white border-gray-100 dark:border-gray-700 dark:bg-dark--theme-light min-h-[403px]">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Member</TableHead>
+            <TableHead>Project</TableHead>
+            <TableHead>Application</TableHead>
+            <TableHead>Time Spent</TableHead>
+            <TableHead>Percent used</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {displayData?.map((item, index) => (
+            <TableRow key={index}>
+              <TableCell>
+                <div className="flex gap-2 items-center">
+                  <Avatar className="w-8 h-8">
+                    {item.member.avatarUrl && (
+                      <AvatarImage src={item.member.avatarUrl} alt={item.member.name} />
+                    )}
+                    <AvatarFallback>
+                    {item.member.name?.trim()
+                      ? item.member.name
+                          .trim()
+                          .split(' ')
+                          .map((n) => n[0])
+                          .join('')
+                          .toUpperCase()
+                      : '?'}
+                  </AvatarFallback>
+                </Avatar>
+                <span>{item.member.name}</span>
+              </div>
+            </TableCell>
+            <TableCell>{item.project}</TableCell>
+            <TableCell>{item.application}</TableCell>
+              <TableCell>{item.timeSpent}</TableCell>
+              <TableCell>
+                <div className="flex gap-2 items-center">
+                  <div className="overflow-hidden w-24 h-2 bg-gray-200 rounded-full">
+                    <div
+                      className="h-full bg-blue-500"
+                      style={{ width: `${item.percentUsed}%` }}
+                    />
+                  </div>
+                  <span>{item.percentUsed}%</span>
+                </div>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </Card>
+  );
+}
diff --git a/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
index bd736716e..acad20dfa 100644
--- a/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
+++ b/apps/web/app/[locale]/dashboard/team-dashboard/[teamId]/components/dashboard-header.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';