diff --git a/packages/shared-ui/src/components/Timeline/index.tsx b/packages/shared-ui/src/components/Timeline/index.tsx
index c7b09d78..a7d7aebe 100644
--- a/packages/shared-ui/src/components/Timeline/index.tsx
+++ b/packages/shared-ui/src/components/Timeline/index.tsx
@@ -10,6 +10,7 @@ export default function Timeline({
   month,
   year,
   items,
+  height = '2.75rem',
   children,
   onChange
 }: ITimelineProps) {
@@ -24,7 +25,7 @@ export default function Timeline({
 
   let totalDates = 0
   const colWidth = '2rem'
-  const colHeight = '2.75rem'
+  const colHeight = height
 
   // calculate month columns - start
   let startMonth = 1
@@ -104,10 +105,10 @@ export default function Timeline({
     <div className="timeline-container">
       <div
         className={`flex items-start bg-white dark:bg-gray-900 border dark:border-gray-700 p-0.5 rounded-md`}>
-        <TimelineList items={items} height={colHeight} />
+        {/* <TimelineList items={items} height={colHeight} /> */}
         <section className="timeline">
           <header
-            className="grid divide-x"
+            className="timeline-month-headers grid divide-x"
             style={{
               gridTemplateColumns: `repeat(${totalDates}, minmax(${colWidth}, 1fr)) auto`
             }}>
@@ -131,7 +132,7 @@ export default function Timeline({
             })}
           </header>
           <header
-            className="grid divide-x"
+            className="timeline-week-headers grid divide-x"
             style={{
               gridTemplateColumns: `repeat(${totalDates}, minmax(${colWidth}, 1fr)) auto`
             }}>
@@ -151,7 +152,7 @@ export default function Timeline({
               })
             })}
           </header>
-          <main className="grid flex-auto grid-cols-1 grid-rows-1 min-h-[100px]">
+          <main className="timeline-goal-container grid flex-auto grid-cols-1 grid-rows-1 min-h-[100px]">
             <div
               className="timeline-columns"
               style={{
diff --git a/packages/shared-ui/src/components/Timeline/style.css b/packages/shared-ui/src/components/Timeline/style.css
index 6568286b..a0762a3c 100644
--- a/packages/shared-ui/src/components/Timeline/style.css
+++ b/packages/shared-ui/src/components/Timeline/style.css
@@ -11,10 +11,15 @@
 
 .timeline-track-container {
   @apply whitespace-nowrap relative text-gray-600 w-full bg-white dark:bg-gray-700 dark:text-gray-200 dark:shadow-gray-900 dark:border-gray-600 px-2.5 py-2 text-sm  rounded-md border border-gray-300 shadow-md shadow-indigo-50;
+
+  & .progressbar {
+    @apply dark:bg-gray-800;
+  }
 }
 
 .timeline-track-handler {
   @apply absolute top-0 cursor-w-resize h-full w-[10px] bg-gray-50/50 hover:bg-gray-200/60 active:bg-red-200/50 rounded-md border border-transparent hover:border-gray-200 border-dashed;
+  @apply dark:bg-gray-900/20 dark:hover:bg-gray-600/60 dark:hover:border-gray-500;
 }
 
 .timeline-track-handler.right {
@@ -26,7 +31,7 @@
 
 .timeline {
   @apply w-full overflow-x-auto overflow-y-hidden;
-  @apply border-l dark:border-gray-700;
+  @apply dark:border-gray-700;
 }
 
 .timeline-columns {
diff --git a/packages/shared-ui/src/components/Timeline/type.ts b/packages/shared-ui/src/components/Timeline/type.ts
index 814970d5..9fd2a89c 100644
--- a/packages/shared-ui/src/components/Timeline/type.ts
+++ b/packages/shared-ui/src/components/Timeline/type.ts
@@ -8,6 +8,7 @@ export interface ITimelineItem {
 }
 
 export interface ITimelineProps {
+  height?: string
   year: number
   month: number
   children: (data: ITimelineItem) => ReactNode
diff --git a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
index 651656cc..eb8d0fe7 100644
--- a/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
+++ b/packages/ui-app/app/[orgID]/project/[projectId]/calendar/style.css
@@ -1,7 +1,7 @@
 .calendar-wrapper {
   @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
   /* height: calc(100vh - 153px); */
-  height: 800px
+  height: 800px;
 }
 
 .week-view.calendar-wrapper {
@@ -68,3 +68,41 @@
 .week-view .calendar-task-item {
   @apply whitespace-pre-wrap;
 }
+
+/* Copy from /components/calendar/style.css - considers to remove one of them */
+.calendar-container {
+  @apply flex flex-col justify-between divide-y dark:divide-gray-700 relative;
+  @apply border bg-white rounded-md shadow-lg shadow-indigo-100;
+  @apply dark:bg-gray-900 dark:border-gray-700 dark:shadow-gray-900;
+}
+
+.cal-header-day {
+  @apply px-3 py-1 text-sm text-gray-700 dark:text-gray-500;
+}
+
+.cal-week {
+  @apply grid grid-cols-7 h-full divide-x dark:divide-gray-700 dark:text-gray-400;
+}
+
+.cal-day {
+  @apply absolute top-1 left-2;
+}
+
+.cal-day-in-week {
+  @apply bg-white dark:bg-gray-900 relative;
+  @apply text-xs text-gray-600 dark:text-gray-400;
+}
+
+.cal-day-in-week.today .cal-day {
+  @apply text-indigo-500 font-bold;
+}
+
+.cal-day-in-week.is-sunsat {
+  @apply bg-gray-50 dark:bg-black/40;
+}
+
+.cal-day-in-week.not-in-month {
+  @apply bg-indigo-50/50 text-gray-400;
+  @apply dark:bg-gray-800;
+}
+/* Copy from components/calendar/style.css */
diff --git a/packages/ui-app/app/_components/ProgressBar.tsx b/packages/ui-app/app/_components/ProgressBar.tsx
index ca93b2e5..ac8d595c 100644
--- a/packages/ui-app/app/_components/ProgressBar.tsx
+++ b/packages/ui-app/app/_components/ProgressBar.tsx
@@ -1,9 +1,12 @@
 interface IProgressBar {
   progress: number
+  variant?: 'rounded' | 'square'
   color?: 'red' | 'green' | 'blue' | 'yellow' | 'dark' | 'indigo'
 }
+
 export default function ProgressBar({
   progress,
+  variant = 'rounded',
   color = 'blue'
 }: IProgressBar) {
   const colors = {
@@ -16,14 +19,15 @@ export default function ProgressBar({
   }
 
   const c = colors[color as keyof typeof colors]
+  const shape = variant === 'rounded' ? 'rounded-full' : 'rounded'
 
   return (
     <div
       title={`${progress || 0}%`}
-      className="w-full bg-gray-200 rounded-full dark:bg-gray-700">
+      className={`progressbar w-full bg-gray-200 ${shape} dark:bg-gray-700`}>
       <div
         className={`${c[0]} text-[10px] font-medium ${c[1]} text-center ${progress > 0 ? 'p-0.5' : 'py-0.5'
-          } leading-none rounded-full`}
+          } leading-none ${shape}`}
         style={{ width: `${progress || 0}%` }}>
         {progress >= 20 ? (
           <>{progress + '%'}</>
diff --git a/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx b/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx
index da2ee6f6..08d25356 100644
--- a/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx
+++ b/packages/ui-app/app/_features/Project/Vision/VisionContainer.tsx
@@ -3,6 +3,7 @@ import VisionListTask from './VisionListTask'
 import { DndContext, DragEndEvent } from '@dnd-kit/core'
 import { useServiceTaskUpdate } from '@/hooks/useServiceTaskUpdate'
 import VisionCalendarContainer from './VisionCalendaContainer'
+import VisionTimeline from '../VisionTimeline'
 
 export default function VisionContainer({ visible }: { visible: boolean }) {
   const { updateTaskData } = useServiceTaskUpdate()
@@ -30,7 +31,8 @@ export default function VisionContainer({ visible }: { visible: boolean }) {
           <VisionListTask />
           <VisionList />
         </DndContext>
-        <VisionCalendarContainer />
+        {/* <VisionCalendarContainer /> */}
+        <VisionTimeline visible={true} />
       </div>
     </div>
   )
diff --git a/packages/ui-app/app/_features/Project/Vision/VisionCreate.tsx b/packages/ui-app/app/_features/Project/Vision/VisionCreate.tsx
index cb1a526e..71689f62 100644
--- a/packages/ui-app/app/_features/Project/Vision/VisionCreate.tsx
+++ b/packages/ui-app/app/_features/Project/Vision/VisionCreate.tsx
@@ -59,5 +59,5 @@ export default function VisionCreate() {
 
     createNewVision(visionData)
   }
-  return <ListBoxCreate placeholder="Create new vision" onEnter={onEnter} />
+  return <ListBoxCreate placeholder="Create new goal" onEnter={onEnter} />
 }
diff --git a/packages/ui-app/app/_features/Project/Vision/VisionList.tsx b/packages/ui-app/app/_features/Project/Vision/VisionList.tsx
index 7b3fd1d3..09a9ec81 100644
--- a/packages/ui-app/app/_features/Project/Vision/VisionList.tsx
+++ b/packages/ui-app/app/_features/Project/Vision/VisionList.tsx
@@ -39,7 +39,7 @@ export default function VisionList() {
               <div className="py-4 flex items-center justify-center text-gray-400 text-sm">
                 <div className="text-center">
                   <HiOutlineInbox className="inline-block w-6 h-6" />
-                  <h2>No vision found !</h2>
+                  <h2>No goal found !</h2>
                 </div>
               </div>
             ) : null}
diff --git a/packages/ui-app/app/_features/Project/Vision/VisionListHeader.tsx b/packages/ui-app/app/_features/Project/Vision/VisionListHeader.tsx
index 365d7be0..b23a61d9 100644
--- a/packages/ui-app/app/_features/Project/Vision/VisionListHeader.tsx
+++ b/packages/ui-app/app/_features/Project/Vision/VisionListHeader.tsx
@@ -19,7 +19,7 @@ export default function VisionListHeader({
       <div className="flex items-center justify-between px-3 py-2 text-xs">
         <div className="">
           <span className="uppercase text-[11px] font-bold text-gray-600">
-            All visions: {total}
+            All goals: {total}
           </span>
           <div className="text-[11px] space-x-2 text-gray-400">
             <span className="capitalize">Done: {done}</span>
diff --git a/packages/ui-app/app/_features/Project/Vision/context.tsx b/packages/ui-app/app/_features/Project/Vision/context.tsx
index 123f5622..44ed650b 100644
--- a/packages/ui-app/app/_features/Project/Vision/context.tsx
+++ b/packages/ui-app/app/_features/Project/Vision/context.tsx
@@ -23,7 +23,13 @@ interface IVisionContextProps {
   taskDone: number
   taskTotal: number
   visionByDays: VisionByDays
-  visionProgress: { [key: string]: { total: number; done: number } }
+  visionProgress: {
+    [key: string]: {
+      total: number
+      done: number
+      assigneeIds: string[]
+    }
+  }
   filter: IVisionFilter
   setFilter: Dispatch<SetStateAction<IVisionFilter>>
   setSelected: Dispatch<SetStateAction<string>>
@@ -88,6 +94,7 @@ export const useVisionContext = () => {
 
   const getVisionProgress = (id: string) => {
     const progress = visionProgress[id]
+    console.log(visionProgress)
     if (!progress) {
       return 0
     }
@@ -95,6 +102,10 @@ export const useVisionContext = () => {
     return convertToProgress(progress.done, progress.total)
   }
 
+  const getVisionData = (id: string) => {
+    return visionProgress[id]
+  }
+
   const getVisionByDay = (key: string) => {
     return visionByDays[key] || []
   }
@@ -176,6 +187,7 @@ export const useVisionContext = () => {
     mode,
     setMode,
     setSelected,
-    getVisionProgress
+    getVisionProgress,
+    getVisionData,
   }
 }
diff --git a/packages/ui-app/app/_features/Project/Vision/index.tsx b/packages/ui-app/app/_features/Project/Vision/index.tsx
index e25c3600..21c36e22 100644
--- a/packages/ui-app/app/_features/Project/Vision/index.tsx
+++ b/packages/ui-app/app/_features/Project/Vision/index.tsx
@@ -37,22 +37,30 @@ const useVisionProgress = ({ visions }: { visions: VisionField[] }) => {
   const { tasks } = useTaskStore()
   const { statusDoneId } = useProjectStatusStore()
   //
-  const visionProgress: { [key: string]: { total: number; done: number } } = {}
+  const visionProgress: {
+    [key: string]: { total: number; done: number; assigneeIds: string[] }
+  } = {}
 
   let taskTotal = 0
   let taskDone = 0
 
   visions.forEach(v => {
-    visionProgress[v.id] = { total: 0, done: 0 }
+    visionProgress[v.id] = { total: 0, done: 0, assigneeIds: [] }
   })
 
   tasks.forEach(task => {
-    const { visionId, done, taskStatusId } = task
+    const { visionId, done, taskStatusId, assigneeIds } = task
     if (!visionId || !visionProgress[visionId]) return
 
     taskTotal += 1
     visionProgress[visionId].total += 1
 
+    if (assigneeIds.length) {
+      assigneeIds.forEach(assigneeId => {
+        visionProgress[visionId].assigneeIds.push(assigneeId)
+      })
+    }
+
     if (taskStatusId === statusDoneId) {
       visionProgress[visionId].done += 1
       taskDone += 1
@@ -148,7 +156,7 @@ export default function ProjectVision() {
         setSelected
       }}>
       <VisionContainer visible={mode === EVisionViewMode.CALENDAR} />
-      <VisionTimeline visible={mode === EVisionViewMode.TIMELINE} />
+      {/* <VisionTimeline visible={mode === EVisionViewMode.TIMELINE} /> */}
     </VisionProvider>
   )
 }
diff --git a/packages/ui-app/app/_features/Project/VisionTimeline/index.tsx b/packages/ui-app/app/_features/Project/VisionTimeline/index.tsx
index 617f8c37..e2b2af90 100644
--- a/packages/ui-app/app/_features/Project/VisionTimeline/index.tsx
+++ b/packages/ui-app/app/_features/Project/VisionTimeline/index.tsx
@@ -2,30 +2,40 @@ import './style.css'
 import { useVisionContext } from '../Vision/context'
 import VisionViewMode from '../Vision/VisionViewMode'
 
-import { Loading, Timeline } from '@shared/ui'
+import { Avatar, Loading, Timeline } from '@shared/ui'
 import VisionMonthNavigator from '../Vision/VisionMonthNavigator'
+import MemberAvatar from '@/components/MemberAvatar'
+import { HiOutlineFlag } from 'react-icons/hi2'
+import { dateFormat } from '@shared/libs'
+import ProgressBar from '@/components/ProgressBar'
+import { isSameDay } from 'date-fns'
 
 export default function VisionTimeline({ visible }: { visible: boolean }) {
-  const { visions, filter, loading, getVisionProgress, updateVision } =
-    useVisionContext()
+  const {
+    visions,
+    filter,
+    loading,
+    getVisionProgress,
+    getVisionData,
+    updateVision
+  } = useVisionContext()
 
   const ed = new Date()
 
   return (
     <div
-      className={`vision-timeline-container mx-auto relative ${
-        visible ? '' : 'hidden'
-      }`}
-      style={{ maxWidth: `calc(100vw - 340px)` }}>
-      <Loading.Absolute enabled={loading} border/>
-      <div className="py-3 flex items-center justify-between">
-        <div>
-          <VisionMonthNavigator />
-        </div>
-        <VisionViewMode />
-      </div>
+      className={`vision-timeline-container w-full px-3 pt-3 relative ${visible ? '' : 'hidden'
+        }`}>
+      <Loading.Absolute enabled={loading} border />
+      {/* <div className="py-3 flex items-center justify-between"> */}
+      {/*   <div> */}
+      {/*     <VisionMonthNavigator /> */}
+      {/*   </div> */}
+      {/*   <VisionViewMode /> */}
+      {/* </div> */}
 
       <Timeline
+        height="5.75rem"
         month={filter.month}
         onChange={({ id, start, end }) => {
           updateVision({
@@ -44,14 +54,61 @@ export default function VisionTimeline({ visible }: { visible: boolean }) {
           }
         })}>
         {data => {
+          const { start, end } = data
           const progress = getVisionProgress(data.id)
+          const visionData = getVisionData(data.id)
+          const assigneeIds = Array.from(new Set(visionData.assigneeIds))
+
+          const displayAssignees = assigneeIds.slice(0, 3)
+          const restAssignees = assigneeIds.slice(3).length
+          const isSame = isSameDay(start, end)
+          const hasTask = visionData.done || visionData.total
 
           return (
-            <div className="">
-              {data.title}
-              <div
-                className="absolute bottom-0 left-0 h-1 bg-red-200"
-                style={{ width: `${progress}%` }}></div>
+            <div className="flex items-center justify-between">
+              <div className={`w-full ${isSame ? 'pl-6' : ''}`}>
+                <section className="flex items-center justify-between">
+                  <div>
+                    <span>{data.title}</span>
+                    <div className="flex items-center gap-1 text-[11px] text-gray-400">
+                      <HiOutlineFlag />
+                      <div>{dateFormat(start, 'MMM dd')}</div>
+                      <span>-</span>
+                      <div>{dateFormat(end, 'MMM dd')}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center -space-x-3">
+                    {displayAssignees.map(assigneeId => {
+                      return (
+                        <MemberAvatar
+                          noName={true}
+                          uid={assigneeId}
+                          key={assigneeId}
+                        />
+                      )
+                    })}
+
+                    {restAssignees ? (
+                      <div className="h-6 w-6 bg-gray-50 rounded-full text-[11px] flex items-center justify-center">
+                        +3
+                      </div>
+                    ) : null}
+                  </div>
+                </section>
+                {hasTask ? (
+                  <section className="mt-1 flex items-center gap-2 w-[250px]">
+                    <ProgressBar
+                      color={progress === 100 ? 'green' : 'blue'}
+                      variant="square"
+                      progress={progress || 0}
+                    />
+                    <div className="text-[11px] dark:text-gray-400 space-x-2">
+                      <span>{visionData.total} Total</span>
+                      <span>{visionData.done} Done</span>
+                    </div>
+                  </section>
+                ) : null}
+              </div>
             </div>
           )
         }}