diff --git a/packages/desktop/components/ProposalStatusInfo.svelte b/packages/desktop/components/ProposalStatusInfo.svelte
index f6bb847c1d..fab452fdff 100644
--- a/packages/desktop/components/ProposalStatusInfo.svelte
+++ b/packages/desktop/components/ProposalStatusInfo.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { ProposalStatusTimelineTooltip } from '@components'
+    import { ProposalStatusTimelineTooltip } from '@views/governance'
     import { InformationTooltip, ProposalStatusPill } from '@ui'
     import { Position } from '@ui/enums'
 
diff --git a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
index 7128c53771..7163741a13 100644
--- a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
+++ b/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { EventStatus } from '@iota/sdk/out/types'
-    import { Text, Tooltip } from '@ui'
-    import { Position, TextType } from '@ui/enums'
+    import { Text, Popover } from '@bloomwalletio/ui'
 
     import { formatDate, localize } from '@core/i18n'
     import { networkStatus } from '@core/network'
@@ -10,7 +9,7 @@
     export let milestones: Record<EventStatus, number>
     export let status: EventStatus
     export let anchor: HTMLElement
-    export let position: Position = Position.Right
+    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
 
     let eventProgress: number
     switch (status) {
@@ -31,56 +30,45 @@
     }
 </script>
 
-<Tooltip {anchor} {position}>
+<Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
     <ul class="space-y-3 text-left">
         {#each Object.keys(EventStatus) as status, index}
-            <li class="grid grid-rows-2 relative" class:active={eventProgress >= index}>
-                <Text
-                    overrideColor={eventProgress < index}
-                    classes={eventProgress < index ? 'text-gray-400 dark:text-gray-700' : ''}
-                >
+            {@const hasProgressed = eventProgress >= index}
+            <li
+                class="grid grid-rows-2 relative
+                before:justify-self-end before:mr-4 before:row-span-2 before:self-center
+                {hasProgressed
+                    ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                "
+            >
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
                     {formatDate(
                         milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]),
                         DATE_FORMAT
                     )}
                 </Text>
-                <Text
-                    type={TextType.h5}
-                    overrideColor={eventProgress < index}
-                    classes={eventProgress < index ? 'text-gray-400 dark:text-gray-700' : ''}
-                >
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
                     {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
                 </Text>
             </li>
         {/each}
     </ul>
-</Tooltip>
+</Popover>
 
 <style lang="scss">
     li {
         grid-template-columns: min-content 1fr;
+
         &::before {
-            @apply justify-self-start;
-            @apply mr-4;
-            @apply row-span-2;
-            @apply self-center;
-            @apply text-2xl;
-            @apply text-gray-400;
             content: '●';
         }
-        &.active::before {
-            @apply text-blue-400;
-        }
+
         &:not(:first-child)::after {
-            @apply absolute;
-            @apply block;
-            @apply border;
-            @apply border-gray-300;
-            @apply border-solid;
-            @apply bottom-4;
+            @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
             content: '';
             height: 130%;
-            left: 0.38em;
+            left: 0.415em;
             z-index: -1;
         }
     }
diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
index 72c113784b..9ab07ef944 100644
--- a/packages/desktop/components/index.ts
+++ b/packages/desktop/components/index.ts
@@ -22,7 +22,6 @@ export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalsDetails } from './ProposalsDetails.svelte'
 export { default as ProposalQuestion } from './ProposalQuestion.svelte'
 export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'
-export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
 export { default as SidebarTab } from './SidebarTab.svelte'
 export { default as StatusTile, type StatusTileProps } from './StatusTile.svelte'
 export { default as TitleBar } from './TitleBar.svelte'
diff --git a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
new file mode 100644
index 0000000000..7163741a13
--- /dev/null
+++ b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
@@ -0,0 +1,75 @@
+<script lang="ts">
+    import { EventStatus } from '@iota/sdk/out/types'
+    import { Text, Popover } from '@bloomwalletio/ui'
+
+    import { formatDate, localize } from '@core/i18n'
+    import { networkStatus } from '@core/network'
+    import { DATE_FORMAT, milestoneToDate } from '@core/utils'
+
+    export let milestones: Record<EventStatus, number>
+    export let status: EventStatus
+    export let anchor: HTMLElement
+    export let placement: 'top' | 'bottom' | 'left' | 'right' = 'right'
+
+    let eventProgress: number
+    switch (status) {
+        case EventStatus.Upcoming:
+            eventProgress = 0
+            break
+        case EventStatus.Commencing:
+            eventProgress = 1
+            break
+        case EventStatus.Holding:
+            eventProgress = 2
+            break
+        case EventStatus.Ended:
+            eventProgress = 3
+            break
+        default:
+            break
+    }
+</script>
+
+<Popover {anchor} {placement} showArrow event="hover" class="p-4 rounded-xl shadow-elevation-4">
+    <ul class="space-y-3 text-left">
+        {#each Object.keys(EventStatus) as status, index}
+            {@const hasProgressed = eventProgress >= index}
+            <li
+                class="grid grid-rows-2 relative
+                before:justify-self-end before:mr-4 before:row-span-2 before:self-center
+                {hasProgressed
+                    ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                "
+            >
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
+                    {formatDate(
+                        milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]),
+                        DATE_FORMAT
+                    )}
+                </Text>
+                <Text textColor={!hasProgressed ? 'secondary' : 'primary'} fontWeight="medium">
+                    {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
+                </Text>
+            </li>
+        {/each}
+    </ul>
+</Popover>
+
+<style lang="scss">
+    li {
+        grid-template-columns: min-content 1fr;
+
+        &::before {
+            content: '●';
+        }
+
+        &:not(:first-child)::after {
+            @apply absolute block border-r border-text-secondary dark:border-text-secondary-dark border-solid bottom-4;
+            content: '';
+            height: 130%;
+            left: 0.415em;
+            z-index: -1;
+        }
+    }
+</style>
diff --git a/packages/desktop/views/governance/components/index.ts b/packages/desktop/views/governance/components/index.ts
new file mode 100644
index 0000000000..57c3fb94d7
--- /dev/null
+++ b/packages/desktop/views/governance/components/index.ts
@@ -0,0 +1 @@
+export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
diff --git a/packages/desktop/views/governance/index.ts b/packages/desktop/views/governance/index.ts
new file mode 100644
index 0000000000..cb64ac1b52
--- /dev/null
+++ b/packages/desktop/views/governance/index.ts
@@ -0,0 +1 @@
+export * from './components'