diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts
index 3fe5fe151..edc6b00cd 100644
--- a/apps/web/app/constants.ts
+++ b/apps/web/app/constants.ts
@@ -166,6 +166,12 @@ export const APPLICATION_LANGUAGES_CODE = [
 	'es'
 ];
 
+export enum KanbanTabs {
+	TODAY = 'TODAY',
+	YESTERDAY = 'YESTERDAY',
+	TOMORROW = 'TOMORROW'
+}
+
 export enum IssuesView {
 	CARDS = 'CARDS',
 	TABLE = 'TABLE',
diff --git a/apps/web/components/ui/data-table.tsx b/apps/web/components/ui/data-table.tsx
index 048181208..0351af56c 100644
--- a/apps/web/components/ui/data-table.tsx
+++ b/apps/web/components/ui/data-table.tsx
@@ -12,42 +12,26 @@ import {
 	getPaginationRowModel,
 	getSortedRowModel,
 	useReactTable
-} from "@tanstack/react-table"
+} from '@tanstack/react-table';
 
-import {
-	Table,
-	TableHeader,
-	TableRow,
-	TableHead,
-	TableCell,
-	TableBody,
-	TableFooter,
-} from './table';
+import { Table, TableHeader, TableRow, TableHead, TableCell, TableBody, TableFooter } from './table';
 
 interface DataTableProps<TData, TValue> {
-	columns: ColumnDef<TData, TValue>[]
-	data: TData[],
-	footerRows?: React.ReactNode[],
+	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>([])
+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,
@@ -56,7 +40,7 @@ function DataTable<TData, TValue>({
 			sorting,
 			columnVisibility,
 			rowSelection,
-			columnFilters,
+			columnFilters
 		},
 		enableRowSelection: true,
 		onRowSelectionChange: setRowSelection,
@@ -68,8 +52,8 @@ function DataTable<TData, TValue>({
 		getPaginationRowModel: getPaginationRowModel(),
 		getSortedRowModel: getSortedRowModel(),
 		getFacetedRowModel: getFacetedRowModel(),
-		getFacetedUniqueValues: getFacetedUniqueValues(),
-	})
+		getFacetedUniqueValues: getFacetedUniqueValues()
+	});
 
 	return (
 		<Table className="border-transparent bg-light--theme-light dark:bg-dark--theme-light mt-8 w-full rounded-2xl">
diff --git a/apps/web/components/ui/svgs/vertificalline.tsx b/apps/web/components/ui/svgs/vertificalline.tsx
new file mode 100644
index 000000000..ab86ac679
--- /dev/null
+++ b/apps/web/components/ui/svgs/vertificalline.tsx
@@ -0,0 +1,9 @@
+export default function VerticalLine() {
+    return (
+        <>
+            <svg xmlns="http://www.w3.org/2000/svg" width="2" height="41" viewBox="0 0 2 41" fill="none">
+                <path d="M1 0.5V40.5" stroke="black" strokeOpacity="0.1"/>
+            </svg>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/apps/web/components/ui/table.tsx b/apps/web/components/ui/table.tsx
index e59990b4f..9f104cba0 100644
--- a/apps/web/components/ui/table.tsx
+++ b/apps/web/components/ui/table.tsx
@@ -1,115 +1,76 @@
-import * as React from "react"
+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 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 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 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 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 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 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 !w-full', className)}
+			{...props}
+		/>
+	)
+);
+TableCell.displayName = 'TableCell';
 
-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';
 
-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,
-}
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
index aff2213ec..cc336dfc2 100644
--- a/apps/web/lib/components/Kanban.tsx
+++ b/apps/web/lib/components/Kanban.tsx
@@ -239,7 +239,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
                                                         {...provided.dragHandleProps}
                                                         aria-label={`${title}`}
                                                     >
-                                                        <span className="">
+                                                        <span>
                                                         {title}
                                                         </span>
                                                     </h2>
@@ -248,12 +248,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
                                         </div>
                                         
                                     </header>
-                                    <KanbanDroppable 
-                                        title={title} 
-                                        droppableId={title} 
-                                        type={'TASK'} 
-                                        content={items}                     
-                                    />
+                                    
                                 </>
                                     : 
                                 null
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
index d10eb2586..c1e33aa82 100644
--- a/apps/web/lib/components/kanban-card.tsx
+++ b/apps/web/lib/components/kanban-card.tsx
@@ -90,7 +90,7 @@ function TagList({tags}: {
 }
 
 
-const stackImages = (index: number, length: number) => {
+export const stackImages = (index: number, length: number) => {
     const imageRadius = 20;
     
     const total_length = ((length+1) * imageRadius);
@@ -178,7 +178,7 @@ export default function Item(props: any) {
         aria-label={`${item.status.name} ${item.content}`}
       >
         <div className="flex gap-1.5 border-b border-b-gray-200 pb-4">
-            <div className="flex flex-col justify- gap-5 grow">
+            <div className="flex flex-col gap-5 grow">
                 {item.tags && (
                     <TagList tags={item.tags}/>
                 )}
@@ -189,17 +189,19 @@ export default function Item(props: any) {
 					} rounded-sm mr-1`}/>
                     
                     <span className="text-grey text-normal mr-1">#{item.number}</span>
-                    <span className="text-black dark:text-white text-normal capitalize mr-2">{item.title}</span>
+                    <span className="text-black dark:text-white text-normal capitalize mr-2 bg-blue line-clamp-2">
+                        {item.title}
+                    </span>
                     <Priority level={1}/>
                 </div>
             </div>
-            <div className="flex flex-col justify-between w-[48px] items-end">
+            <div className="flex flex-col w-[48px] gap-4 items-end">
                 <VerticalThreeDot/>
 
                 <CircularProgress percentage={10}/>
             </div>
         </div>
-        <div className="flex flex-row justify-between items-center pt-5 pb-2 h-fit">
+        <div className="flex flex-row justify-between items-center pt-4 h-fit">
 
             {item.status === TaskStatus.INPROGRESS ? (
                 <div className="flex flex-row items-center gap-2">
@@ -214,18 +216,18 @@ export default function Item(props: any) {
             )}
             
             <div className="relative ">
-                <div className="w-10 flex h-fit flex-row justify-end items-center relative bg-primary">
+                <div className="w-10 flex h-fit flex-row justify-end items-center relative">
                 {item.members.map((option: any, index: number)=> {
                     return (
+                        <div className="relative w-[40px] h-[40px]" key={index}>
                         <Image 
-                            key={index}
                             src={option.user.imageUrl} 
                             alt={`${option.user.firstName} avatar`} 
-                            height={40} 
-                            width={40} 
+                            fill={true}
                             className="absolute rounded-full border-2 border-white"
                             style={stackImages(index, item.members.length)}
                         />
+                        </div>
                     )
                 })}
                </div>
diff --git a/apps/web/lib/components/pagination.tsx b/apps/web/lib/components/pagination.tsx
index b5b862589..710e361c1 100644
--- a/apps/web/lib/components/pagination.tsx
+++ b/apps/web/lib/components/pagination.tsx
@@ -16,7 +16,10 @@ export function Paginate({ total, itemsPerPage = 10, onPageChange, itemOffset, e
 	const pageCount: number = Math.ceil(total / itemsPerPage);
 
 	return (
-		<div className="flex items-center justify-between pt-4" aria-label="Table navigation">
+		<div
+			className="flex flex-col md:flex-row gap-2 items-center justify-between pt-4"
+			aria-label="Table navigation"
+		>
 			<ReactPaginate
 				breakLabel=". . ."
 				nextLabel={
diff --git a/apps/web/lib/features/task/task-assign-popover.tsx b/apps/web/lib/features/task/task-assign-popover.tsx
index 97a9b7c86..d2256ba09 100644
--- a/apps/web/lib/features/task/task-assign-popover.tsx
+++ b/apps/web/lib/features/task/task-assign-popover.tsx
@@ -57,7 +57,7 @@ export function TaskUnOrAssignPopover({
 						? `${t('common.ASSIGN_TASK_TO')} ${userProfile?.employee.user?.name}`
 						: ''
 				}
-				className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-[70vw] h-[70vh] justify-start"
+				className="bg-light--theme-light dark:bg-dark--theme-light p-5 rounded-xl w-full md:w-[70vw] h-[70vh] justify-start"
 				titleClass="font-normal"
 			>
 				<TaskInput
diff --git a/apps/web/lib/features/task/task-card.tsx b/apps/web/lib/features/task/task-card.tsx
index b45fbf1c1..ee8826e87 100644
--- a/apps/web/lib/features/task/task-card.tsx
+++ b/apps/web/lib/features/task/task-card.tsx
@@ -106,7 +106,7 @@ export function TaskCard(props: Props) {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'md:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[7rem] dark:bg-[#101217] border-[0.125rem] dark:border-[#FFFFFF0D] relative',
+					'lg:flex items-center justify-between py-3 px-4 md:px-4 hidden min-h-[7rem] dark:bg-[#101217] border-[0.125rem] dark:border-[#FFFFFF0D] relative',
 					active && ['border-primary-light dark:bg-[#1E2025]'],
 					'gap-5',
 					className
@@ -189,16 +189,16 @@ export function TaskCard(props: Props) {
 			<Card
 				shadow="bigger"
 				className={clsxm(
-					'relative md:hidden flex justify-between py-3 flex-col',
+					'relative lg:hidden flex justify-between py-3 flex-col',
 					active && ['border-primary-light border-[2px]'],
 					className
 				)}
 			>
 				<div className="flex justify-between mb-4 ml-2">
 					{totalWork}
-					{isTrackingEnabled && isAuthUser && viewType === 'unassign' && task && (
+					{/* {isTrackingEnabled && isAuthUser && viewType === 'unassign' && task && (
 						<TimerButtonCall activeTeam={activeTeam} currentMember={currentMember} task={task} />
-					)}
+					)} */}
 				</div>
 				<div className="flex flex-wrap items-start justify-between pb-4 border-b">
 					<TaskInfo task={task} className="px-4 mb-4 w-80" />{' '}
@@ -221,7 +221,7 @@ export function TaskCard(props: Props) {
 						<UsersTaskAssigned className="px-3 w-52" task={task} />
 					</>
 				)}
-				<div className="flex justify-between mt-8 mb-8 space-x-5">
+				<div className="flex justify-between items-center mt-4 mb-4 space-x-5">
 					<div className="flex space-x-4">
 						{todayWork}
 						{isTrackingEnabled && isAuthUser && task && (
@@ -230,11 +230,11 @@ export function TaskCard(props: Props) {
 					</div>
 
 					<ActiveTaskStatusDropdown task={task || null} onChangeLoading={(load) => setLoading(load)} />
-				</div>
 
-				{task && memberInfo && currentMember && (
-					<TaskCardMenu task={task} loading={loading} memberInfo={memberInfo} viewType={viewType} />
-				)}
+					{task && memberInfo && currentMember && (
+						<TaskCardMenu task={task} loading={loading} memberInfo={memberInfo} viewType={viewType} />
+					)}
+				</div>
 			</Card>
 		</>
 	);
@@ -246,7 +246,7 @@ function UsersTaskAssigned({ task, className }: { task: Nullable<ITeamTask> } &
 
 	return (
 		<div className={clsxm('flex justify-center items-center', className)}>
-			<div className="flex flex-col justify-center">
+			<div className="flex flex-col justify-center items-center">
 				{members.length > 0 && <span className="mb-1 text-xs text-center">{t('common.ASSIGNED')}</span>}
 				<span className="text-sm font-medium text-center">
 					{members.length > 0
diff --git a/apps/web/lib/features/task/task-filters.tsx b/apps/web/lib/features/task/task-filters.tsx
index 638d031e5..d011e8a5b 100644
--- a/apps/web/lib/features/task/task-filters.tsx
+++ b/apps/web/lib/features/task/task-filters.tsx
@@ -187,7 +187,7 @@ export function TaskFilter({ className, hook, profile }: IClassName & Props) {
 		<div className="relative w-full z-10">
 			<div
 				className={clsxm(
-					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse md:flex-nowrap',
+					'flex justify-between flex-col xs:flex-row  items-center w-full flex-wrap-reverse lg:flex-nowrap',
 					className
 				)}
 			>
diff --git a/apps/web/lib/features/task/task-times.tsx b/apps/web/lib/features/task/task-times.tsx
index 105fc5bbd..e345f6d91 100644
--- a/apps/web/lib/features/task/task-times.tsx
+++ b/apps/web/lib/features/task/task-times.tsx
@@ -89,7 +89,7 @@ function TimeInfo({
 					}m`}
 				>
 					<div className="flex items-center space-x-2 text-base font-normal">
-						<span className="text-[#7B8089] text-center">{t('common.TODAY')}:</span>
+						<span className="text-[#7B8089] text-center capitalize">{t('common.TODAY')}</span>
 						<Text>
 							{daily.h}h : {daily.m}m
 						</Text>
@@ -110,7 +110,7 @@ function TimeInfo({
 							// showDaily && ['text-sm']
 						)}
 					>
-						<span className="text-[#7B8089] text-center">{t('common.TOTAL')}:</span>
+						<span className="text-[#7B8089] text-center capitalize">{t('common.TOTAL')}</span>
 						<Text>
 							{total.h}h : {total.m}m
 						</Text>
@@ -147,8 +147,8 @@ function TimeBlockInfo({
 					}m`}
 				>
 					<div className=" text-base font-normal flex flex-col items-center ">
-						<span className="text-[#7B8089] text-center text-xs">
-							{t('common.WORKED_ON_TASK')} {t('common.TODAY')}:
+						<span className="text-[#7B8089] text-center text-xs capitalize">
+							{t('common.WORKED_ON_TASK')} {t('common.TODAY')}
 						</span>
 						<Text className="text-lg font-semibold">
 							{daily.h}h : {daily.m}m
@@ -170,8 +170,8 @@ function TimeBlockInfo({
 							// showDaily && ['text-sm']
 						)}
 					>
-						<span className="text-[#7B8089] text-center text-xs">
-							{t('common.WORKED_ON_TASK')} {t('common.TOTAL')}:
+						<span className="text-[#7B8089] text-center text-xs capitalize">
+							{t('common.WORKED_ON_TASK')} {t('common.TOTAL')}
 						</span>
 						<Text className="text-lg font-semibold">
 							{total.h}h : {total.m}m
diff --git a/apps/web/lib/features/team-member-cell.tsx b/apps/web/lib/features/team-member-cell.tsx
index 84a60ee98..c9bb7b50d 100644
--- a/apps/web/lib/features/team-member-cell.tsx
+++ b/apps/web/lib/features/team-member-cell.tsx
@@ -1,15 +1,14 @@
-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";
-
+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;
@@ -21,25 +20,19 @@ export function TaskCell({ row }: { row: any }) {
 		<TaskInfo
 			edition={taskEdition}
 			memberInfo={memberInfo}
-			className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2"
+			className="2xl:w-80 3xl:w-[32rem] w-full lg:w-1/5 lg:px-4 px-2"
 			publicTeam={publicTeam}
 		/>
 	);
 }
 
-export function UserInfoCell({ cell }: {  cell: any}) {
-	const row  = get(cell, 'row', {});
+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}
-		/>
-	);
+	return <UserInfo memberInfo={memberInfo} className="2xl:w-[20.625rem] w-full lg:w-1/4" publicTeam={publicTeam} />;
 }
 
 export function WorkedOnTaskCell({ row }: { row: any }) {
@@ -52,7 +45,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			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"
+			className="2xl:w-32 3xl:w-[8rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
 		/>
 	);
 }
@@ -67,27 +60,23 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className="lg:px-3 2xl:w-52 3xl:w-64 w-1/5"
+			className="lg:px-3 2xl:w-52 3xl:w-64 w-52 lg:w-1/5"
 		/>
 	);
 }
 
-export function ActionMenuCell ({ cell }: {  cell: any}) {
-	const row  = get(cell, 'row', {});
+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 active = get(cell, 'column.columnDef.meta.active', false);
 	const memberInfo = useTeamMemberCard(member);
 
-	const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(
-		memberInfo.memberUser
-	);
+	const { collaborativeSelect, user_selected, onUserSelect } = useCollaborative(memberInfo.memberUser);
 	const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
 
 	return (
 		<>
-			{(!collaborativeSelect || active) && (
-				<UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />
-			)}
+			{(!collaborativeSelect || active) && <UserTeamCardMenu memberInfo={memberInfo} edition={taskEdition} />}
 
 			{collaborativeSelect && !active && (
 				<InputField
diff --git a/apps/web/lib/features/team/user-team-block/index.tsx b/apps/web/lib/features/team/user-team-block/index.tsx
index a98d3ec59..96ff98e8b 100644
--- a/apps/web/lib/features/team/user-team-block/index.tsx
+++ b/apps/web/lib/features/team/user-team-block/index.tsx
@@ -44,27 +44,22 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 		return getTimerStatusValue(timerStatus, member, publicTeam);
 	}, [timerStatus, member, publicTeam]);
 
-	let totalWork = <></>;
-	if (memberInfo.isAuthUser) {
-		const { h, m } = secondsToTime(
-			((member?.totalTodayTasks &&
-				member?.totalTodayTasks.reduce(
-					(previousValue, currentValue) => previousValue + currentValue.duration,
-					0
-				)) ||
-				activeTaskTotalStat?.duration ||
-				0) + addSeconds
-		);
-
-		totalWork = (
-			<div className={clsxm('flex space-x-2 items-center justify-center  font-normal flex-col mr-4')}>
-				<span className="text-xs text-gray-500 text-center	">{t('common.TOTAL_WORKED_TODAY')}:</span>
-				<Text className="text-sm">
-					{h}h : {m}m
-				</Text>
-			</div>
-		);
-	}
+	const { h, m } = secondsToTime(
+		((member?.totalTodayTasks &&
+			member?.totalTodayTasks.reduce(
+				(previousValue, currentValue) => previousValue + currentValue.duration,
+				0
+			)) ||
+			activeTaskTotalStat?.duration ||
+			0) + addSeconds
+	);
+
+	const totalWork = (
+		<div className={clsxm('flex space-x-2 items-center justify-center  font-normal flex-col mr-4')}>
+			<span className="text-xs text-gray-500 text-center	capitalize">{t('common.TOTAL_WORKED_TODAY')}</span>
+			<Text className="text-sm">{memberInfo.isAuthUser ? `${h}h : ${m}m` : `0h : 0m`}</Text>
+		</div>
+	);
 
 	const menu = (
 		<>
@@ -105,12 +100,14 @@ export function UserTeamBlock({ className, active, member, publicTeam = false }:
 				<HorizontalSeparator />
 
 				{/* Task information */}
-				<TaskBlockInfo
-					edition={taskEdition}
-					memberInfo={memberInfo}
-					className=" w-full px-1 py-2 overflow-hidden"
-					publicTeam={publicTeam}
-				/>
+
+					<TaskBlockInfo
+						edition={taskEdition}
+						memberInfo={memberInfo}
+						className=" w-full px-1 py-2 overflow-hidden"
+						publicTeam={publicTeam}
+					/>
+
 
 				<HorizontalSeparator />
 
diff --git a/apps/web/lib/features/team/user-team-block/task-info.tsx b/apps/web/lib/features/team/user-team-block/task-info.tsx
index 2438e9fba..08ded65bc 100644
--- a/apps/web/lib/features/team/user-team-block/task-info.tsx
+++ b/apps/web/lib/features/team/user-team-block/task-info.tsx
@@ -36,11 +36,15 @@ export function TaskBlockInfo({ className, memberInfo, edition, publicTeam }: Pr
 				{edition.task && (
 					<TaskDetailAndEdition memberInfo={memberInfo} edition={edition} publicTeam={publicTeam} />
 				)}
-				{!edition.task && <div className="text-center">--</div>}
+				{!edition.task && (
+					<div className="text-center">
+						<p>There is no task assigned </p>
+					</div>
+				)}
 			</div>
 
 			{edition.task && <TaskAllStatusTypes showStatus={true} task={edition.task} toBlockCard={true} />}
-			{!edition.task && <div className="text-center self-center">--</div>}
+			{!edition.task && <div className="text-center self-center text-white dark:text-dark">_</div>}
 		</div>
 	);
 }
diff --git a/apps/web/lib/layout/auth-layout.tsx b/apps/web/lib/layout/auth-layout.tsx
index 3585f3014..6a889e891 100644
--- a/apps/web/lib/layout/auth-layout.tsx
+++ b/apps/web/lib/layout/auth-layout.tsx
@@ -88,7 +88,7 @@ export function AuthLayout({ children, title, description, isAuthPage = true }:
 					)}
 				>
 					<div className="flex flex-col items-center justify-center w-full mt-20 lg:mt-23">
-						{isAuthPage &&
+						{isAuthPage && (
 							<div className="w-11/12">
 								{title && (
 									<Text.Heading as="h1" className="mb-3 text-center min-w-[400px]">
@@ -102,7 +102,7 @@ export function AuthLayout({ children, title, description, isAuthPage = true }:
 									</Text>
 								)}
 							</div>
-						}
+						)}
 
 						{children}
 					</div>
diff --git a/apps/web/lib/settings/danger-zone-personal.tsx b/apps/web/lib/settings/danger-zone-personal.tsx
index 05e01a013..0783f63bd 100644
--- a/apps/web/lib/settings/danger-zone-personal.tsx
+++ b/apps/web/lib/settings/danger-zone-personal.tsx
@@ -46,7 +46,7 @@ export const DangerZone = () => {
 			<div className="flex flex-col items-center justify-between">
 				<div className="w-full mt-5">
 					<div className="">
-						<div className="flex items-center justify-between w-full gap-6">
+						<div className="flex flex-col lg:flex-row items-center justify-between w-full gap-6">
 							<div className="flex items-center justify-center flex-auto opacity-50 sm:w-32">
 								<Image alt="Danger zone" src={dangerZoneImage} width={150} height={150} />
 							</div>
@@ -57,7 +57,7 @@ export const DangerZone = () => {
 											{t('alerts.ALERT_DELETE_ACCOUNT')}
 										</Text>
 									</div>
-									<div className="flex-auto w-32">
+									<div className="flex-auto w-full lg:w-32">
 										<Button
 											variant="danger"
 											type="submit"
@@ -77,7 +77,7 @@ export const DangerZone = () => {
 											{t('alerts.ALERT_ACCOUNT_PERMANENT_DELETE')}
 										</Text>
 									</div>
-									<div className="flex-auto w-32">
+									<div className="flex-auto w-full lg:w-32">
 										<Button
 											variant="danger"
 											type="submit"
@@ -97,7 +97,7 @@ export const DangerZone = () => {
 											{t('alerts.ALERT_REMOVE_ALL_DATA')}
 										</Text>
 									</div>
-									<div className="flex-auto w-32">
+									<div className="flex-auto w-full lg:w-32">
 										<Button
 											variant="danger"
 											type="submit"
diff --git a/apps/web/lib/settings/danger-zone-team.tsx b/apps/web/lib/settings/danger-zone-team.tsx
index 8efc3bb6c..e1e5c24b5 100644
--- a/apps/web/lib/settings/danger-zone-team.tsx
+++ b/apps/web/lib/settings/danger-zone-team.tsx
@@ -57,7 +57,7 @@ export const DangerZoneTeam = () => {
 									{t('common.TRANSFERT_OWNERSHIP_TO')}
 								</Text>
 							</div>
-							<div className="flex-auto sm:w-10">
+							<div className="flex-auto w-full sm:w-10">
 								<Button
 									variant="danger"
 									type="submit"
@@ -82,7 +82,7 @@ export const DangerZoneTeam = () => {
 									{t('alerts.ALERT_REMOVE_TEAM')}
 								</Text>
 							</div>
-							<div className="flex-auto sm:w-10">
+							<div className="flex-auto w-full sm:w-10">
 								<Button
 									variant="danger"
 									type="submit"
@@ -109,7 +109,7 @@ export const DangerZoneTeam = () => {
 									{t('alerts.ALERT_QUIT_TEAM')}
 								</Text>
 							</div>
-							<div className="flex-auto sm:w-10">
+							<div className="flex-auto w-full sm:w-10">
 								<Button
 									variant="danger"
 									type="submit"
diff --git a/apps/web/lib/settings/invitation-setting.tsx b/apps/web/lib/settings/invitation-setting.tsx
index 95884d5bc..a43bd3a09 100644
--- a/apps/web/lib/settings/invitation-setting.tsx
+++ b/apps/web/lib/settings/invitation-setting.tsx
@@ -45,7 +45,7 @@ export const InvitationSetting = () => {
 						}}
 					/>
 				</div>
-				<div className="flex items-center justify-between w-auto gap-4">
+				<div className="flex items-center justify-between w-auto gap-0 md:gap-4">
 					{/* TODO: Will imlement Sort/FIlter logic in future */}
 					{/* <FilterDropdown setValue={() => console.log('filter')} /> */}
 					<Button
diff --git a/apps/web/lib/settings/left-side-setting-menu.tsx b/apps/web/lib/settings/left-side-setting-menu.tsx
index 110cf6dfb..358e39794 100644
--- a/apps/web/lib/settings/left-side-setting-menu.tsx
+++ b/apps/web/lib/settings/left-side-setting-menu.tsx
@@ -58,7 +58,7 @@ export const LeftSideSettingMenu = () => {
 
 	return (
 		<>
-			<div className="sm:w-[320px] mt-[36px] sm:mr-[56px] mx-auto">
+			<div className="hidden lg:block lg:w-[320px] mt-[36px] sm:mr-[56px] mx-auto">
 				<Text className="text-4xl font-normal mb-[40px] text-center sm:text-left">{t('common.SETTINGS')}</Text>
 				<div className="flex sm:block">
 					<SidebarAccordian
diff --git a/apps/web/lib/settings/member-setting.tsx b/apps/web/lib/settings/member-setting.tsx
index 40eacfb1b..8a8a9389d 100644
--- a/apps/web/lib/settings/member-setting.tsx
+++ b/apps/web/lib/settings/member-setting.tsx
@@ -24,7 +24,7 @@ export const MemberSetting = () => {
 
 	return (
 		<div className="flex flex-col">
-			<Text className="flex-none flex-grow-0 w-1/5 mt-8 mb-2 text-xl font-normal text-gray-400">
+			<Text className="flex-none flex-grow-0 w-full md:w-1/5 mt-8 mb-2 text-xl font-normal text-gray-400">
 				{t('pages.settingsTeam.MEMBER_AND_ROLES')}
 			</Text>
 			<div className="flex items-center justify-between w-full mt-8">
@@ -46,7 +46,7 @@ export const MemberSetting = () => {
 			</div>
 
 			{members.length > 0 ? (
-				<div className="mb-8 mt-7">
+				<div className="mb-8 mt-7 overflow-y-auto">
 					<MemberTable members={members} />
 				</div>
 			) : (
diff --git a/apps/web/lib/settings/personal-setting-form.tsx b/apps/web/lib/settings/personal-setting-form.tsx
index 2311bd1e1..f2df296e6 100644
--- a/apps/web/lib/settings/personal-setting-form.tsx
+++ b/apps/web/lib/settings/personal-setting-form.tsx
@@ -160,7 +160,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.FULL_NAME')}
 									</Text>
-									<div className="flex justify-start w-full">
+									<div className="flex flex-col gap-2 lg:flex-row justify-start w-full">
 										<InputField
 											type="text"
 											placeholder={t('form.FIRST_NAME_PLACEHOLDER')}
@@ -172,7 +172,7 @@ export const PersonalSettingForm = () => {
 												!editFullname ? 'disabled:bg-[#FCFCFC]' : ''
 											}`}
 											disabled={!editFullname}
-											wrapperClassName={`rounded-lg w-[230px] mb-0 mr-5`}
+											wrapperClassName={`rounded-lg w-full lg:w-[230px] mb-0 mr-5`}
 										/>
 										<InputField
 											type="text"
@@ -184,7 +184,7 @@ export const PersonalSettingForm = () => {
 												!editFullname ? 'disabled:bg-[#FCFCFC]' : ''
 											}`}
 											disabled={!editFullname}
-											wrapperClassName={`rounded-lg w-[230px] mb-0 mr-5`}
+											wrapperClassName={`rounded-lg w-full lg:w-[230px] mb-0 mr-5`}
 										/>
 
 										{editFullname ? (
@@ -220,7 +220,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.CONTACT')}
 									</Text>
-									<div className="flex justify-start w-full">
+									<div className="flex flex-col lg:flex-row gap-2 justify-start w-full">
 										<div className="relative">
 											<InputField
 												type="email"
@@ -236,7 +236,7 @@ export const PersonalSettingForm = () => {
 												onChange={checkEmailValidity}
 												disabled={!editContacts}
 												notValidBorder={!isValid.email}
-												wrapperClassName={`rounded-lg w-[230px] mb-0 mr-5 `}
+												wrapperClassName={`rounded-lg w-full lg:w-[230px] mb-0 mr-5 `}
 											/>
 											{!isValid.email && (
 												<p className="absolute text-xs text-red-500 -bottom-5">
@@ -257,7 +257,7 @@ export const PersonalSettingForm = () => {
 												onChange={checkPhoneValidity}
 												disabled={!editContacts}
 												notValidBorder={!isValid.phone}
-												wrapperClassName={`rounded-lg w-[230px] mb-0 mr-5`}
+												wrapperClassName={`rounded-lg w-full lg:w-[230px] mb-0 mr-5`}
 											/>
 											{!isValid.phone && (
 												<p className="absolute text-xs text-red-500 -bottom-5">
@@ -302,7 +302,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.THEME')}
 									</Text>
-									<div className="flex w-full">
+									<div className="flex items-center lg:items-start w-full">
 										<ThemeToggler />
 										<Text className="flex items-center ml-5 text-sm font-normal text-gray-400">
 											{theme === 'light' ? 'Light' : 'Dark'} Mode
@@ -316,7 +316,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.LANGUAGE')}
 									</Text>
-									<div className="flex w-full">
+									<div className="flex flex-col lg:flex-row w-full">
 										<LanguageDropDown
 											currentLanguage={currentLanguage}
 											onChangeLanguage={(t: string) => {
@@ -332,7 +332,7 @@ export const PersonalSettingForm = () => {
 									<Text className="font-normal min-w-[25%] text-gray-400 text-lg justify-center">
 										{t('common.TIME_ZONE')}
 									</Text>
-									<div className="flex w-full">
+									<div className="flex flex-col lg:flex-row gap-2 w-full">
 										<TimezoneDropDown
 											currentTimezone={currentTimezone}
 											onChangeTimezone={(t: string) => {
diff --git a/apps/web/lib/settings/team-setting-form.tsx b/apps/web/lib/settings/team-setting-form.tsx
index f6faab67f..fd4d19f21 100644
--- a/apps/web/lib/settings/team-setting-form.tsx
+++ b/apps/web/lib/settings/team-setting-form.tsx
@@ -148,7 +148,7 @@ export const TeamSettingForm = () => {
 
 	return (
 		<>
-			<form className="w-[98%] md:w-[930px] mt-8" onSubmit={handleSubmit(onSubmit)} autoComplete="off">
+			<form className=" lg:w-[98%] md:w-[930px] mt-8" onSubmit={handleSubmit(onSubmit)} autoComplete="off">
 				<div className="flex flex-col items-center justify-between">
 					<div className="w-full mt-5">
 						<div className="">
@@ -159,7 +159,7 @@ export const TeamSettingForm = () => {
 								</Text>
 								<div
 									ref={inputWrapperRef}
-									className="flex flex-row items-center justify-between flex-grow-0 w-4/5"
+									className="flex flex-row items-center justify-between flex-grow-0 w-full lg:w-4/5"
 								>
 									<InputField
 										autoCustomFocus={!disabled}
@@ -200,11 +200,11 @@ export const TeamSettingForm = () => {
 							</div>
 
 							{/* Team Color */}
-							<div className="z-50 flex items-center justify-between w-full gap-12 ">
-								<Text className="flex-none flex-grow-0 w-1/5 mb-2 text-lg font-normal text-gray-400">
+							<div className="z-50 flex flex-col lg:flex-row items-center justify-between w-full gap-1 lg:gap-12 ">
+								<Text className="flex-none flex-grow-0 w-full lg:w-1/5 mb-2 text-lg font-normal text-gray-400">
 									{t('pages.settingsTeam.TEAM_COLOR')}
 								</Text>
-								<div className="flex flex-row items-center justify-between flex-grow-0 w-4/5">
+								<div className="flex flex-row items-center justify-between flex-grow-0 w-full lg:w-4/5">
 									<ColorPicker
 										defaultColor={activeTeam?.color}
 										onChange={(color: any | null) => {
@@ -219,11 +219,11 @@ export const TeamSettingForm = () => {
 							</div>
 
 							{/* Emoji */}
-							<div className="flex items-center justify-between w-full gap-12 ">
-								<Text className="flex-none flex-grow-0 w-1/5 mb-2 text-lg font-normal text-gray-400">
+							<div className="flex flex-col lg:flex-row items-center justify-between w-full gap-1 lg:gap-12 ">
+								<Text className="flex-none flex-grow-0 w-full lg:w-1/5 mb-2 text-lg font-normal text-gray-400">
 									{t('pages.settingsTeam.EMOJI')}
 								</Text>
-								<div className="flex flex-row items-center justify-between flex-grow-0 w-4/5">
+								<div className="flex flex-row items-start lg:items-center justify-between flex-grow-0 w-full max-w-[88vw] lg:w-4/5">
 									<EmojiPicker
 										onChange={(emoji: string) => {
 											setValue('emoji', emoji);
@@ -238,11 +238,11 @@ export const TeamSettingForm = () => {
 
 							{/* Team Size */}
 							{
-								<div className="flex items-center justify-between w-full gap-12 mt-3 ">
-									<Text className="flex-none flex-grow-0 w-1/5 mb-2 text-lg font-normal text-gray-400">
+								<div className="flex flex-col lg:flex-row items-center justify-between w-full gap-1 lg:gap-12 mt-3 ">
+									<Text className="flex-none flex-grow-0 w-full lg:w-1/5 mb-2 text-lg font-normal text-gray-400">
 										{t('pages.settingsTeam.TEAM_SIZE')}
 									</Text>
-									<div className="flex flex-row items-center justify-between flex-grow-0 w-4/5">
+									<div className="flex flex-row items-center justify-between flex-grow-0 w-full lg:w-4/5">
 										<TeamSize
 											defaultValue={activeTeam?.teamSize || ''}
 											onChange={(teamSize: string) => {
@@ -258,10 +258,10 @@ export const TeamSettingForm = () => {
 
 							{/* Team Type */}
 							<div className="flex flex-col items-center w-full mt-8 sm:gap-12 sm:flex-row">
-								<Text className="flex-none flex-grow-0 mb-2 text-lg font-normal text-gray-400 sm:w-1/5">
+								<Text className="flex-none flex-grow-0 mb-2 text-lg font-normal text-gray-400 w-full sm:w-1/5">
 									{t('pages.settingsTeam.TEAM_TYPE')}
 								</Text>
-								<div className="flex gap-x-[30px] flex-col sm:flex-row items-center">
+								<div className="flex lg:gap-x-[30px] flex-col sm:flex-row items-center">
 									{isTeamManager && (
 										<div className="flex items-center justify-between w-full space-y-2 sm:block">
 											<div className="flex items-center mb-[0.125rem] min-h-[1.5rem] pl-[1.5rem]">
@@ -309,7 +309,7 @@ export const TeamSettingForm = () => {
 									)}
 									{getTeamLink() && (
 										<div className="flex flex-col items-center gap-4 sm:flex-row">
-											<div className="flex flex-row items-center justify-between flex-grow-0 w-64 mb-0">
+											<div className="flex flex-row items-center justify-between flex-grow-0 w-full lg:w-64 mb-0">
 												<Tooltip
 													label={getTeamLink()}
 													placement="auto"
diff --git a/apps/web/lib/settings/version-form.tsx b/apps/web/lib/settings/version-form.tsx
index b64b6815f..50bda2a09 100644
--- a/apps/web/lib/settings/version-form.tsx
+++ b/apps/web/lib/settings/version-form.tsx
@@ -90,10 +90,10 @@ export const VersionForm = ({ formOnly = false, onCreated, onVersionCreated }: S
 	return (
 		<>
 			<form className="w-full" onSubmit={handleSubmit(onSubmit)} autoComplete="off">
-				<div className="flex w-full">
-					<div className="rounded-md m-h-64 p-[32px] pl-0 pr-0 flex gap-x-[2rem] w-full">
+				<div className="flex flex-row w-full">
+					<div className="rounded-md m-h-64 p-[32px] pl-0 pr-0 flex flex-col md: gap-x-[2rem] w-full">
 						{!formOnly && (
-							<Text className="flex-none flex-grow-0 text-gray-400 text-lg font-normal mb-2 w-[200px]">
+							<Text className="flex-none flex-grow-0 text-gray-400 text-lg font-normal mb-2 w-full  md:w-[200px]">
 								{t('pages.settingsTeam.VERSIONS')}
 							</Text>
 						)}
diff --git a/apps/web/pages/index.tsx b/apps/web/pages/index.tsx
index e8c39c9f7..50467b4c6 100644
--- a/apps/web/pages/index.tsx
+++ b/apps/web/pages/index.tsx
@@ -40,14 +40,14 @@ function MainPage() {
 	return (
 		<MainLayout>
 			<MainHeader className="pb-1">
-				<div className="flex items-start justify-between h-5">
-					<div className="flex items-center gap-8">
+				<div className="flex flex-col md:flex-row items-start justify-between h-12 md:h-5">
+					<div className="flex  items-center gap-8">
 						<PeopleIcon className="stroke-dark dark:stroke-[#6b7280] h-6 w-6" />
 						<Breadcrumb paths={breadcrumb} className="text-sm" />
 					</div>
 
 					{/* <Collaborative /> */}
-					<div className="flex items-end gap-1">
+					<div className="flex w-full md:w-max items-center justify-center py-4 md:py-0 md:items-end gap-1">
 						<Tooltip label={'Cards'} placement="top-start">
 							<button
 								className={clsxm(
@@ -141,13 +141,15 @@ function TaskTimerSection({ isTrackingEnabled }: { isTrackingEnabled: boolean })
 		<Card
 			shadow="bigger"
 			className={clsxm(
-				'w-full flex md:flex-row flex-col-reverse justify-between items-center py-4',
+				'w-full flex md:flex-row flex-col-reverse justify-center md:justify-between items-center py-4',
 				'border-[#00000008]  border-[0.125rem] dark:border-[#26272C] dark:shadow-lg dark:bg-[#1B1D22]'
 			)}
 		>
 			{/* Task inputs */}
 			{/* {showInput && ( */}
-			<AuthUserTaskInput className={clsxm('w-4/5 md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')} />
+			<AuthUserTaskInput
+				className={clsxm('mx-auto w-full md:w-1/2 2xl:w-full ', !showInput && '!hidden md:!flex')}
+			/>
 			{/* )}  */}
 
 			<button className="border rounded py-1 px-2 md:hidden" onClick={() => setShowInput((p) => !p)}>
diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx
index 9887bb646..d42bef651 100644
--- a/apps/web/pages/kanban/index.tsx
+++ b/apps/web/pages/kanban/index.tsx
@@ -1,21 +1,144 @@
+import { KanbanTabs } from "@app/constants";
+import { useOrganizationTeams } from "@app/hooks";
 import { useKanban } from "@app/hooks/features/useKanban";
+import { clsxm } from "@app/utils";
 import KanbanBoardSkeleton from "@components/shared/skeleton/KanbanBoardSkeleton";
+import VerticalLine from "@components/ui/svgs/vertificalline";
 import { withAuthentication } from "lib/app/authenticator";
+import { Breadcrumb, Container } from "lib/components";
+import { stackImages } from "lib/components/kanban-card";
+import { AddIcon } from "lib/components/svgs";
 import { KanbanView } from "lib/features/team-members-kanban-view"
 import { MainLayout } from "lib/layout";
+import Image from 'next/image';
+import { useState } from "react";
 
 const Kanban= () => {
   
     const { data } = useKanban();
+    const {activeTeam} = useOrganizationTeams();
+    
+    const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY);
+
+    const imageRadius = 20;
+    const numberOfImagesDisplayed = 4;
+    const activeTeamMembers = activeTeam?.members ? activeTeam.members : [];
+    const totalLength = ((activeTeamMembers.length+1) * imageRadius);
    
     return (
         <>
         <MainLayout>
-           {Object.keys(data).length > 0 ? 
-            <KanbanView kanbanBoardTasks={data}/>
-            :
-            <KanbanBoardSkeleton/>
-           }
+            <div className={clsxm('relative bg-white dark:bg-dark--theme pt-20 -mt-8 ')}>
+                <Container>
+                    <Breadcrumb paths={['Dashboard', 'Team Page']} className="text-sm" />
+                    <div className="flex flex-row items-center justify-between mt-[24px]">
+                        <div>
+                            <h1 className="text-[35px] font-bold text-[#282048] dark:text-white">Kanban Board</h1>
+                        </div>
+                        <div className="flex flex-row items-center gap-[12px]">
+                            <p>08:00 ( UTC +04:30 )</p>
+                            <VerticalLine/>
+                            <div className="relative ">
+                                <div className="flex h-fit flex-row justify-end items-center relative " style={{
+                                    width: `${totalLength}px`
+                                }}>
+                                    {activeTeamMembers.map((image: any, index: number)=> {
+                                    
+                                        if(index < numberOfImagesDisplayed) {
+                                            return (
+                                                <div className="relative w-[40px] h-[40px]" key={index}>
+                                                    <Image 
+                                                        
+                                                        src={image.employee.user.imageUrl} 
+                                                        alt={image.title} 
+                                                        fill={true}
+                                                        className="absolute rounded-full border-2 border-white"
+                                                        style={stackImages(index, activeTeamMembers.length)}
+                                                    />
+                                                </div>
+                                            )
+                                        }
+                                        
+                                    })}
+                                    {(activeTeamMembers.length > 4) && (
+                                        <div className="flex flex-row text-sm text-[#282048] dark:text-white font-semibold items-center justify-center absolute h-[40px] w-[40px] rounded-full border-2 border-[#0000001a] dark:border-white bg-white dark:bg-[#191A20]" style={stackImages(4, activeTeamMembers.length)}>
+                                            {activeTeamMembers.length - numberOfImagesDisplayed}+
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                            <VerticalLine/>
+                            <button className="p-2 rounded-full border-2 border-[#0000001a] dark:border-white" >
+                                <AddIcon width={24} height={24} className={"dark:stroke-white"}/>
+                            </button>
+                        </div>
+                    </div>
+                    <div className="relative flex flex-row justify-between items-center mt-[36px]">
+                        <div className="flex flex-row">
+                            <div onClick={()=> {
+                                setActiveTab(KanbanTabs.TODAY)
+                            }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.TODAY ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{
+                                borderBottomWidth: '3px',
+                                borderBottomStyle: 'solid',
+                            }}>
+                                Today
+                            </div>
+                            <div onClick={()=> {
+                                setActiveTab(KanbanTabs.YESTERDAY)
+                            }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.YESTERDAY ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{
+                                borderBottomWidth: '3px',
+                                borderBottomStyle: 'solid',
+                            }}>
+                                Yesterday
+                            </div>
+                            <div onClick={()=> {
+                                setActiveTab(KanbanTabs.TOMORROW)
+                            }} className={`cursor-pointer pt-2.5 px-5 pb-[30px] text-base font-bold ${activeTab === KanbanTabs.TOMORROW ? 'border-b-[#3826A6] text-[#3826A6]': 'border-b-white dark:border-b-[#191A20] dark:text-white text-[#282048]'}`} style={{
+                                borderBottomWidth: '3px',
+                                borderBottomStyle: 'solid',
+                            }}>
+                                Tomorrow
+                            </div>
+                        </div>
+                        <div>
+
+                        </div>
+                    </div>
+                </Container>
+            </div>
+            {/** Kanbanboard for today tasks */}
+            {(activeTab === KanbanTabs.TODAY) && (
+                <>
+                {Object.keys(data).length > 0 ? 
+                    <KanbanView kanbanBoardTasks={data}/>
+                    :
+                    <KanbanBoardSkeleton/>
+                }
+                </>
+            )}
+
+            {/** Kanbanboard for yesterday tasks */}
+            {(activeTab === KanbanTabs.YESTERDAY) && (
+                <>
+                {Object.keys(data).length > 0 ? 
+                    <KanbanView kanbanBoardTasks={data}/>
+                    :
+                    <KanbanBoardSkeleton/>
+                }
+                </>
+            )}
+
+            {/** Kanbanboard for tomorrow tasks */}
+            {(activeTab === KanbanTabs.TOMORROW) && (
+                <>
+                {Object.keys(data).length > 0 ? 
+                    <KanbanView kanbanBoardTasks={data}/>
+                    :
+                    <KanbanBoardSkeleton/>
+                }
+                </>
+            )}
+           
         </MainLayout>
         </>
     )
diff --git a/apps/web/pages/settings/personal.tsx b/apps/web/pages/settings/personal.tsx
index 1a3922663..12128bd55 100644
--- a/apps/web/pages/settings/personal.tsx
+++ b/apps/web/pages/settings/personal.tsx
@@ -45,7 +45,7 @@ const Personal = () => {
 							<div className="flex flex-col w-full mr-[20px] lg:mr-0">
 								<Accordian
 									title={t('pages.settingsPersonal.HEADING_TITLE')}
-									className="p-4 mt-8 dark:bg-dark--theme"
+									className=" max-w-[96vw] overflow-y-hidden p-4 mt-8 dark:bg-dark--theme"
 									id="general"
 								>
 									{/* <Text className="text-base font-normal text-center text-gray-400 sm:text-left">
diff --git a/apps/web/pages/settings/team.tsx b/apps/web/pages/settings/team.tsx
index 0f92e7044..ac9ab340e 100644
--- a/apps/web/pages/settings/team.tsx
+++ b/apps/web/pages/settings/team.tsx
@@ -44,14 +44,14 @@ const Team = () => {
 					</div>
 
 					<Container className="mb-10">
-						<div className="flex flex-col w-full sm:flex-row">
+						<div className="flex flex-col w-full lg:flex-row">
 							<LeftSideSettingMenu />
 							{isTeamMember ? (
 								<div className="flex flex-col w-full sm:mr-[20px] lg:mr-0">
 									{/* General Settings */}
 									<Accordian
 										title={t('pages.settingsTeam.HEADING_TITLE')}
-										className="p-4 mt-8 dark:bg-dark--theme"
+										className="max-w-[96vw] p-4 mt-8 dark:bg-dark--theme"
 										id="general-settings"
 									>
 										<div className="flex flex-col">
@@ -64,7 +64,7 @@ const Team = () => {
 									{isTeamManager ? (
 										<Accordian
 											title={t('pages.settingsTeam.INVITATION_HEADING_TITLE')}
-											className="p-4 mt-4 dark:bg-dark--theme"
+											className="max-w-[96vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
 											id="invitations"
 										>
 											<InvitationSetting />
@@ -77,7 +77,7 @@ const Team = () => {
 									{isTeamManager ? (
 										<Accordian
 											title={t('pages.settingsTeam.MEMBER_HEADING_TITLE')}
-											className="p-4 mt-4 dark:bg-dark--theme"
+											className="max-w-[96vw]  p-4 mt-4 dark:bg-dark--theme"
 											id="member"
 										>
 											<MemberSetting />
@@ -89,7 +89,7 @@ const Team = () => {
 									{isTeamManager && (
 										<Accordian
 											title={t('pages.settingsTeam.INTEGRATIONS')}
-											className="p-4 mt-4 dark:bg-dark--theme"
+											className="max-w-[96vw] p-4 mt-4 dark:bg-dark--theme"
 											id="integrations"
 										>
 											<IntegrationSetting />
@@ -99,7 +99,7 @@ const Team = () => {
 									{/* Issues Settings */}
 									<Accordian
 										title={t('pages.settingsTeam.ISSUES_HEADING_TITLE')}
-										className="p-4 mt-4 dark:bg-dark--theme"
+										className="max-w-[96vw] overflow-y-auto p-4 mt-4 dark:bg-dark--theme"
 										id="issues-settings"
 									>
 										<IssuesSettings />
@@ -117,7 +117,7 @@ const Team = () => {
 									{/* Danger Zone */}
 									<Accordian
 										title={t('pages.settings.DANDER_ZONE')}
-										className="p-4 mt-4 dark:bg-dark--theme"
+										className="max-w-[96vw] p-4 mt-4 dark:bg-dark--theme"
 										isDanger={true}
 										id="danger-zones"
 									>
diff --git a/apps/web/pages/task/[id].tsx b/apps/web/pages/task/[id].tsx
index d89824897..a11b603c8 100644
--- a/apps/web/pages/task/[id].tsx
+++ b/apps/web/pages/task/[id].tsx
@@ -66,7 +66,7 @@ const TaskDetails = () => {
 						<section className="md:mr-5 max-w-[57rem] 3xl:max-w-none xl:w-full mb-4 md:mb-0">
 							<TaskTitleBlock />
 
-							<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-6 pt-0 flex flex-col gap-8 rounded-sm">
+							<div className="bg-[#F9F9F9] dark:bg-dark--theme-light p-2 md:p-6 pt-0 flex flex-col gap-8 rounded-sm">
 								<RichTextEditor />
 								{/* <TaskDescriptionBlock /> */}
 								<ChildIssueCard />
@@ -78,7 +78,7 @@ const TaskDetails = () => {
 								{/* <ActivityBlock /> */}
 							</div>
 						</section>
-						<div className="flex flex-col mt-4 lg:mt-0 3xl:min-w-[24rem] w-[30%]">
+						<div className="flex flex-col mt-4 lg:mt-0 3xl:min-w-[24rem] w-full lg:w-[30%]">
 							<div className="flex flex-col bg-white dark:bg-dark--theme-light rounded-xl">
 								<TaskDetailsAside />
 							</div>