diff --git a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
deleted file mode 100644
index 7128c53771..0000000000
--- a/packages/desktop/components/ProposalStatusTimelineTooltip.svelte
+++ /dev/null
@@ -1,87 +0,0 @@
-<script lang="ts">
-    import { EventStatus } from '@iota/sdk/out/types'
-    import { Text, Tooltip } from '@ui'
-    import { Position, TextType } from '@ui/enums'
-
-    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 position: Position = Position.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>
-
-<Tooltip {anchor} {position}>
-    <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' : ''}
-                >
-                    {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' : ''}
-                >
-                    {localize(`views.governance.statusTimeline.${EventStatus[status]}`)}
-                </Text>
-            </li>
-        {/each}
-    </ul>
-</Tooltip>
-
-<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;
-            content: '';
-            height: 130%;
-            left: 0.38em;
-            z-index: -1;
-        }
-    }
-</style>
diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
index 3220efd0ad..5872f5f63d 100644
--- a/packages/desktop/components/index.ts
+++ b/packages/desktop/components/index.ts
@@ -21,7 +21,6 @@ export { default as ProposalAnswer } from './ProposalAnswer.svelte'
 export { default as ProposalCard } from './ProposalCard.svelte'
 export { default as ProposalsDetails } from './ProposalsDetails.svelte'
 export { default as ProposalQuestion } from './ProposalQuestion.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/features/governance.features.ts b/packages/desktop/features/governance.features.ts
index d826ba74c2..3f72fa5ea6 100644
--- a/packages/desktop/features/governance.features.ts
+++ b/packages/desktop/features/governance.features.ts
@@ -1,7 +1,7 @@
 import { IGovernanceFeatures } from '@lib/features/interfaces'
 
 const governanceFeatures: IGovernanceFeatures = {
-    enabled: false,
+    enabled: true,
     removeProposals: {
         enabled: true,
     },
diff --git a/packages/desktop/views/governance/components/ProposalStatusInfo.svelte b/packages/desktop/views/governance/components/ProposalStatusInfo.svelte
index e8a37a41b7..86e904e59e 100644
--- a/packages/desktop/views/governance/components/ProposalStatusInfo.svelte
+++ b/packages/desktop/views/governance/components/ProposalStatusInfo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { ProposalStatusPill } from '@views/governance'
-    import { ProposalStatusTimelineTooltip } from '@components'
+    import { ProposalStatusPill, ProposalStatusTimelineTooltip } from '@views/governance'
     import { InformationTooltip } from '@ui'
 
     import { IProposal } from '@contexts/governance/interfaces'
@@ -58,7 +57,7 @@
             bind:anchor
             milestones={proposal.milestones}
             status={proposal?.status}
-            position={placement}
+            {placement}
         />
     {/if}
 {/if}
diff --git a/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
new file mode 100644
index 0000000000..df8c41ce03
--- /dev/null
+++ b/packages/desktop/views/governance/components/ProposalStatusTimelineTooltip.svelte
@@ -0,0 +1,102 @@
+<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
+    }
+
+    function getLocaleTenseKey(index: number): 'past' | 'present' | 'future' {
+        if (index < eventProgress) {
+            return 'past'
+        }
+
+        if (index === eventProgress) {
+            return 'present'
+        }
+
+        if (index > eventProgress) {
+            return 'future'
+        }
+    }
+</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}
+            {@const currentProgress = eventProgress === index}
+            <li
+                class="grid grid-rows-2 relative
+                before:justify-self-center before:mr-4 before:row-span-2 before:self-center
+                {hasProgressed
+                    ? currentProgress
+                        ? 'before:text-2xl before:text-brand before:dark:text-brand-dark'
+                        : 'before:text-xl before:text-brand before:dark:text-brand-dark before:ml-[1px]'
+                    : 'before:text-xl before:text-secondary before:ml-[1px]'}
+                {currentProgress
+                    ? 'text-primary dark:text-primary-dark'
+                    : hasProgressed
+                      ? 'text-secondary/75'
+                      : 'text-secondary'}
+                "
+                class:has-progressed={hasProgressed}
+            >
+                <Text textColor="current" fontWeight="semibold">
+                    {localize(`views.governance.statusTimeline.${EventStatus[status]}.${getLocaleTenseKey(index)}`)}
+                </Text>
+                <Text textColor="current" fontWeight="medium">
+                    {formatDate(milestoneToDate($networkStatus.currentMilestone, milestones[EventStatus[status]]), {
+                        ...DATE_FORMAT,
+                        timeZoneName: undefined,
+                    })}
+                </Text>
+            </li>
+        {/each}
+    </ul>
+</Popover>
+
+<style lang="scss">
+    li {
+        grid-template-columns: min-content 1fr;
+
+        &::before {
+            content: '●';
+        }
+
+        &.has-progressed:not(:first-child)::after {
+            @apply border-text-brand dark:border-text-brand-dark;
+        }
+
+        &: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
index ccdd82e90c..339e60d799 100644
--- a/packages/desktop/views/governance/components/index.ts
+++ b/packages/desktop/views/governance/components/index.ts
@@ -1,2 +1,3 @@
-export { default as ProposalStatusPill } from './ProposalStatusPill.svelte'
 export { default as ProposalStatusInfo } from './ProposalStatusInfo.svelte'
+export { default as ProposalStatusPill } from './ProposalStatusPill.svelte'
+export { default as ProposalStatusTimelineTooltip } from './ProposalStatusTimelineTooltip.svelte'
diff --git a/packages/shared/src/locales/en.json b/packages/shared/src/locales/en.json
index 6e9ba1a4c1..c7246fd4d7 100644
--- a/packages/shared/src/locales/en.json
+++ b/packages/shared/src/locales/en.json
@@ -651,10 +651,26 @@
                 "emptyDescription": "You can subscribe to a proposal on a node with its URL and an optional event ID."
             },
             "statusTimeline": {
-                "upcoming": "Announcement",
-                "commencing": "Voting open",
-                "holding": "Counting starts",
-                "ended": "Counting stops"
+                "upcoming": {
+                    "past": "Announced",
+                    "present": "Announcement",
+                    "future": "Announcement"
+                },
+                "commencing": {
+                    "past": "Voting opened",
+                    "present": "Voting open",
+                    "future": "Voting opens"
+                },
+                "holding": {
+                    "past": "Counting started",
+                    "present": "Counting started",
+                    "future": "Counting starts"
+                },
+                "ended": {
+                    "past": "Counting stopped",
+                    "present": "Counting stopped",
+                    "future": "Counting stops"
+                }
             },
             "details": {
                 "yourVote": {