diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index 55dd56ec2..3fe5fe151 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -169,7 +169,8 @@ export const APPLICATION_LANGUAGES_CODE = [
 export enum IssuesView {
 	CARDS = 'CARDS',
 	TABLE = 'TABLE',
-	BLOCKS = 'BLOCKS'
+	BLOCKS = 'BLOCKS',
+	KANBAN = 'KANBAN'
 }
 
 export const TaskStatus = {
diff --git a/apps/web/components/ui/svgs/kanaban.tsx b/apps/web/components/ui/svgs/kanaban.tsx
new file mode 100644
index 000000000..9cb793d96
--- /dev/null
+++ b/apps/web/components/ui/svgs/kanaban.tsx
@@ -0,0 +1,9 @@
+export default function KanbanIcon({
+    className
+}: {
+    className?: string
+}) {
+    return (
+        <svg className={className} xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><path fill="currentColor" d="M0 1h7V0H0zm8 0h7V0H8zM.5 3a.5.5 0 0 0-.5.5v11a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5v-11a.5.5 0 0 0-.5-.5zm8 0a.5.5 0 0 0-.5.5v6a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5v-6a.5.5 0 0 0-.5-.5z"/></svg>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
index 1f6cdb8af..835a980b8 100644
--- a/apps/web/lib/components/Kanban.tsx
+++ b/apps/web/lib/components/Kanban.tsx
@@ -54,7 +54,7 @@ function InnerItemList({items, title}: {
 }) {
     return (
         <>
-        <section className="flex flex-col gap-2.5 max-h-[520px] overflow-scroll ">
+        <section className="flex flex-col gap-2.5 max-h-[520px] overflow-y-scroll overflow-x-hidden">
         {items.map((item: ITeamTask, index: number) => (
             <Draggable key={item.id} draggableId={item.id} index={index}>
                 {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
index 909a7efd9..a5b0cbeb5 100644
--- a/apps/web/lib/components/kanban-card.tsx
+++ b/apps/web/lib/components/kanban-card.tsx
@@ -5,6 +5,9 @@ import { DraggableProvided } from "react-beautiful-dnd";
 import CircularProgress from "@components/ui/svgs/circular-progress";
 import PriorityIcon from "@components/ui/svgs/priority-icon";
 import { Tag } from "@app/interfaces";
+import { useTimer } from "@app/hooks";
+import { pad } from "@app/helpers";
+import { TaskStatus } from "@app/constants";
 
 function getStyle(provided: DraggableProvided, style: any) {
     if (!style) {
@@ -134,6 +137,10 @@ export default function Item(props: any) {
       isClone,
       index,
     } = props;
+
+    const {
+		fomatedTimeCounter: { hours, minutes, seconds }
+	} = useTimer();
    
     return (
       <section
@@ -173,12 +180,21 @@ export default function Item(props: any) {
             </div>
         </div>
         <div className="flex flex-row justify-between items-center pt-4">
-            <div className="flex flex-row items-center gap-2">
-                <small className="text-grey text-xs text-normal">Worked:</small>
-                <p className="text-black dark:text-white font-medium text-sm">0 h 0 m </p>
-            </div>
+
+            {item.status === TaskStatus.INPROGRESS ? (
+                <div className="flex flex-row items-center gap-2">
+                    <small className="text-grey text-xs text-normal">Live:</small>
+                    <p className="text-[#219653] font-medium text-sm">{pad(hours)}:{pad(minutes)}:{pad(seconds)} </p>
+                </div>
+            ): (
+                <div className="flex flex-row items-center gap-2">
+                    <small className="text-grey text-xs text-normal">Worked:</small>
+                    <p className="text-black dark:text-white font-medium text-sm">{pad(hours)}:{pad(minutes)}:{pad(seconds)} </p>
+                </div>
+            )}
+            
             <div className="relative">
-                <div className="w-10 flex flex-row justify-end items-center relative bg-primary">
+                <div className="w-10 flex h-fit flex-row justify-end items-center relative bg-primary">
                 {item.members.map((option: any, index: number)=> {
                     return (
                         <Image 
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index db6646b0c..61d017808 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -2,7 +2,7 @@ import { useOrganizationTeams } from '@app/hooks';
 import { clsxm } from '@app/utils';
 import NoTeam from '@components/pages/main/no-team';
 import { withAuthentication } from 'lib/app/authenticator';
-import { Breadcrumb, Card, Container } from 'lib/components';
+import { Breadcrumb, Card, Container, Tooltip } from 'lib/components';
 import { PeopleIcon } from 'lib/components/svgs';
 import {
 	AuthUserTaskInput,
@@ -19,6 +19,8 @@ import { useState } from 'react';
 import { IssuesView } from '@app/constants';
 import { TableCellsIcon, QueueListIcon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { useNetworkState } from '@uidotdev/usehooks';
+import { useRouter } from 'next/router';
+import KanbanIcon from '@components/ui/svgs/kanaban';
 import Offline from '@components/pages/offline';
 import UserTeamTableHeader from 'lib/features/team/user-team-table/user-team-table-header';
 
@@ -28,6 +30,7 @@ function MainPage() {
 	const breadcrumb = [...(t('pages.home.BREADCRUMB', { returnObjects: true }) as any), activeTeam?.name || ''];
 	const [view, setView] = useState<IssuesView>(IssuesView.CARDS);
 	const { online } = useNetworkState();
+	const router = useRouter();
 
 	if (!online) {
 		return <Offline />;
@@ -44,6 +47,10 @@ function MainPage() {
 
 					{/* <Collaborative /> */}
 					<div className="flex items-end gap-1">
+						<Tooltip
+							label={'Cards'}
+							placement="top-start"
+						>
 						<button
 							className={clsxm(
 								'rounded-md px-3 py-1 text-sm font-medium',
@@ -55,6 +62,11 @@ function MainPage() {
 						>
 							<QueueListIcon className="w-5 h-5 inline" />
 						</button>
+						</Tooltip>
+						<Tooltip
+							label={'Table'}
+							placement="top-start"
+						>
 						<button
 							className={clsxm(
 								'rounded-md px-3 py-1 text-sm font-medium',
@@ -66,6 +78,11 @@ function MainPage() {
 						>
 							<TableCellsIcon className="w-5 h-5 inline" />
 						</button>
+						</Tooltip>
+						<Tooltip
+							label={'Blocks'}
+							placement="top-start"
+						>
 						<button
 							className={clsxm(
 								'rounded-md px-3 py-1 text-sm font-medium',
@@ -77,6 +94,25 @@ function MainPage() {
 						>
 							<Squares2X2Icon className="w-5 h-5 inline" />
 						</button>
+						</Tooltip>
+						<Tooltip
+							label={'Kanban'}
+							placement="top-start"
+						>
+							<button
+								className={clsxm(
+									'rounded-md px-3 py-1 text-sm font-medium',
+									view === IssuesView.KANBAN
+										? 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
+										: 'text-gray-700 dark:text-gray-300'
+								)}
+								onClick={() => {
+									router.push('/kanban');
+								}}
+							>
+								<KanbanIcon />
+							</button>
+						</Tooltip>
 					</div>
 				</div>