diff --git a/packages/desktop/components/ProposalAnswer.svelte b/packages/desktop/components/ProposalAnswer.svelte
index cf537dcc7b..386f9c93c3 100644
--- a/packages/desktop/components/ProposalAnswer.svelte
+++ b/packages/desktop/components/ProposalAnswer.svelte
@@ -1,13 +1,6 @@
 <script lang="ts">
     import { Answer, EventStatus } from '@iota/sdk/out/types'
-
-    import { Icon, Text } from '@ui'
-
-    import { darkMode } from '@core/app/stores'
-
-    import { Icon as IconEnum } from '@auxiliary/icon'
-    import { Indicator, TooltipIcon } from '@bloomwalletio/ui'
-    import { FontWeight } from '@ui/enums'
+    import { Icon, IconName, Indicator, Text, TooltipIcon } from '@bloomwalletio/ui'
 
     export let onAnswerClick: () => void
 
@@ -49,7 +42,6 @@
 <button
     type="button"
     class="proposal-answer"
-    class:dark={$darkMode}
     class:disabled
     class:hidden={isSelected || isWinner ? false : hidden}
     class:voted={isVotedFor}
@@ -63,10 +55,8 @@
         {#if answerIndex !== undefined}
             {#if isVotedFor}
                 <status-icon class="flex justify-center items-center w-5 h-5">
-                    {#if proposalStatus === EventStatus.Ended}
-                        <Icon icon={IconEnum.Voted} width={20} height={20} />
-                    {:else if proposalStatus === EventStatus.Commencing}
-                        <Icon icon={IconEnum.History} width={20} height={20} />
+                    {#if proposalStatus === EventStatus.Ended || proposalStatus === EventStatus.Commencing}
+                        <Icon name={IconName.ReceiptCheck} size="sm" textColor={isWinner ? 'invert' : 'brand'} />
                     {:else if proposalStatus === EventStatus.Holding}
                         <Indicator size="sm" ping />
                     {/if}
@@ -75,21 +65,18 @@
                 <answer-index>{answerIndex + 1}</answer-index>
             {/if}
         {/if}
-        <Text fontWeight={FontWeight.medium} classes="w-full {truncate ? 'truncate' : ''}">{answer.text}</Text>
+        <Text
+            fontWeight={isSelected || isVotedFor ? 'semibold' : 'medium'}
+            textColor={isSelected || isVotedFor ? 'primary' : 'secondary'}
+            truncate>{answer.text}</Text
+        >
     </div>
     <div class="flex items-center space-x-1.5">
         {#if isWinner}
-            <Icon icon={IconEnum.Trophy} />
+            <Icon name={IconName.Trophy} size="xs" />
         {/if}
         {#if percentage}
-            <Text
-                smaller
-                fontWeight={FontWeight.medium}
-                classes="h-3 ml-auto text-gray-700 dark:text-gray-500"
-                overrideColor
-            >
-                {percentage}
-            </Text>
+            <Text type="sm" textColor="secondary">{percentage}</Text>
         {/if}
         {#if answer.additionalInfo}
             <div class="w-3 h-3">
@@ -101,7 +88,7 @@
 
 <style lang="scss">
     .proposal-answer {
-        @apply rounded-md border border-solid border-gray-200;
+        @apply rounded-lg border border-solid border-stroke dark:border-stroke-dark;
         @apply relative hidden items-center justify-between p-3 overflow-hidden;
         > * {
             z-index: 2;
@@ -109,29 +96,25 @@
 
         &::after {
             @apply z-10 absolute inline-block h-full -ml-3 mr-auto;
-            @apply rounded-l-md bg-gray-100;
+            @apply rounded-l-md bg-surface-2;
             content: '';
             width: var(--percentage);
             z-index: 1;
         }
 
         &:not(.disabled):hover {
-            @apply border-blue-500;
+            @apply border-brand;
         }
 
         &:not(.hidden) {
             @apply flex;
         }
 
-        &:not(.winner) status-icon :global(svg) {
-            @apply text-blue-500;
-        }
-
         &.selected {
-            @apply border-blue-500;
+            @apply border-brand;
 
             answer-index {
-                @apply bg-blue-500 text-white;
+                @apply bg-brand text-white;
             }
         }
 
@@ -146,14 +129,14 @@
         }
 
         &.winner {
-            @apply bg-blue-500;
+            @apply bg-text-brand-dark border-brand;
 
             &::after {
-                @apply bg-blue-600;
+                @apply bg-brand;
             }
 
             answer-index {
-                @apply bg-blue-600 text-white;
+                @apply bg-surface-brand text-white;
             }
 
             :global(*) {
@@ -161,19 +144,19 @@
             }
         }
 
-        &.dark:not(.selected) {
-            @apply border-transparent;
+        &:not(.selected):not(.winner) {
+            @apply dark:border-transparent;
         }
 
-        &.dark:not(.winner) {
-            @apply bg-gray-900;
+        &:not(.winner) {
+            @apply dark:bg-surface-dark;
 
             &::after {
-                @apply bg-gray-950;
+                @apply dark:bg-surface-dark;
             }
 
             answer-index {
-                @apply bg-gray-900 border-gray-800;
+                @apply dark:bg-surface-dark dark:border-stroke-dark;
             }
         }
 
@@ -183,7 +166,7 @@
 
         answer-index {
             @apply flex items-center justify-center h-5 w-5 bg-white;
-            @apply border border-solid border-gray-200;
+            @apply border border-solid border-stroke rounded-sm;
             @apply font-bold text-12 text-gray-500;
         }
     }
diff --git a/packages/desktop/components/ProposalsDetails.svelte b/packages/desktop/components/ProposalListDetails.svelte
similarity index 82%
rename from packages/desktop/components/ProposalsDetails.svelte
rename to packages/desktop/components/ProposalListDetails.svelte
index ade52916d9..a927241e94 100644
--- a/packages/desktop/components/ProposalsDetails.svelte
+++ b/packages/desktop/components/ProposalListDetails.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Table } from '@bloomwalletio/ui'
-    import { IProposalsDetails } from '@contexts/governance/interfaces'
+    import { IProposalListDetails } from '@contexts/governance/interfaces'
     import {
         participationOverviewForSelectedAccount,
         registeredProposalsForSelectedAccount,
@@ -16,12 +16,10 @@
     import { localize } from '@core/i18n'
     import { activeProfileId } from '@core/profile/stores'
     import { PopupId, openPopup } from '@desktop/auxiliary/popup'
-    import { Text } from '@ui'
-    import { FontWeight } from '@ui/enums'
     import { onMount } from 'svelte'
-    import { Button } from '@bloomwalletio/ui'
+    import { Button, Text } from '@bloomwalletio/ui'
 
-    let details = <IProposalsDetails>{
+    let details = <IProposalListDetails>{
         totalProposals: null,
         activeProposals: null,
         votingProposals: null,
@@ -29,10 +27,10 @@
     }
 
     $: isOverviewLoaded = !!$participationOverviewForSelectedAccount
-    $: $registeredProposalsForSelectedAccount, $participationOverviewForSelectedAccount, updateProposalsDetails()
+    $: $registeredProposalsForSelectedAccount, $participationOverviewForSelectedAccount, updateProposalListDetails()
     $: $selectedAccount, void setParticipationOverview()
 
-    function updateProposalsDetails(): void {
+    function updateProposalListDetails(): void {
         if ($activeProfileId) {
             details = {
                 totalProposals: getNumberOfTotalProposals(),
@@ -59,8 +57,8 @@
     onMount(setParticipationOverview)
 </script>
 
-<proposals-details class="space-y-4">
-    <Text fontSize="14" fontWeight={FontWeight.semibold}>
+<proposal-list-details class="space-y-6">
+    <Text type="body2">
         {localize('views.governance.proposalsDetails.title')}
     </Text>
     <Table
@@ -70,4 +68,4 @@
         }))}
     />
     <Button variant="outlined" on:click={onAddProposalClick} width="full" text={localize('actions.addProposal')} />
-</proposals-details>
+</proposal-list-details>
diff --git a/packages/desktop/components/index.ts b/packages/desktop/components/index.ts
index b85ec12b97..e37ef94fd0 100644
--- a/packages/desktop/components/index.ts
+++ b/packages/desktop/components/index.ts
@@ -16,7 +16,7 @@ export { default as NetworkCard } from './NetworkCard.svelte'
 export { default as NodeListTable } from './NodeListTable.svelte'
 export { default as ProposalAnswer } from './ProposalAnswer.svelte'
 export { default as ProposalCard } from './ProposalCard.svelte'
-export { default as ProposalsDetails } from './ProposalsDetails.svelte'
+export { default as ProposalListDetails } from './ProposalListDetails.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/dashboard/governance/views/GovernanceDashboardView.svelte b/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
index 43d3fb1706..2a321ef3c8 100644
--- a/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
+++ b/packages/desktop/views/dashboard/governance/views/GovernanceDashboardView.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { IconName } from '@bloomwalletio/ui'
-    import { EmptyListPlaceholder, ProposalsDetails } from '@components'
+    import { EmptyListPlaceholder, ProposalListDetails } from '@components'
     import { Pane } from '@ui'
     import { ManageVotingPowerPane } from '../components'
     import { localize } from '@core/i18n'
@@ -12,7 +12,7 @@
     <div class="w-1/3 flex flex-col space-y-4">
         <ManageVotingPowerPane />
         <Pane classes="p-6 h-fit">
-            <ProposalsDetails />
+            <ProposalListDetails />
         </Pane>
     </div>
     <span class="block w-0.5 h-full bg-gray-200 dark:bg-gray-800" />
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 7230c56c04..c7dafe2ba5 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -5,7 +5,7 @@
     "author": "Bloom Labs Ltd <contact@bloomwallet.io>",
     "license": "Apache-2.0",
     "dependencies": {
-        "@bloomwalletio/ui": "0.20.3",
+        "@bloomwalletio/ui": "0.20.4",
         "@ethereumjs/rlp": "4.0.1",
         "@ethereumjs/tx": "5.2.1",
         "@ethereumjs/util": "9.0.2",
diff --git a/packages/shared/src/lib/contexts/governance/interfaces/index.ts b/packages/shared/src/lib/contexts/governance/interfaces/index.ts
index 40ba80aa43..8a02c36b95 100644
--- a/packages/shared/src/lib/contexts/governance/interfaces/index.ts
+++ b/packages/shared/src/lib/contexts/governance/interfaces/index.ts
@@ -2,4 +2,4 @@ export * from './organization.interface'
 export * from './proposal-answer-percentages.interface'
 export * from './proposal-filter.interface'
 export * from './proposal-state.interface'
-export * from './proposals-details.interface'
+export * from './proposal-list-details.interface'
diff --git a/packages/shared/src/lib/contexts/governance/interfaces/proposals-details.interface.ts b/packages/shared/src/lib/contexts/governance/interfaces/proposal-list-details.interface.ts
similarity index 73%
rename from packages/shared/src/lib/contexts/governance/interfaces/proposals-details.interface.ts
rename to packages/shared/src/lib/contexts/governance/interfaces/proposal-list-details.interface.ts
index 70eb008810..819d4d0c3e 100644
--- a/packages/shared/src/lib/contexts/governance/interfaces/proposals-details.interface.ts
+++ b/packages/shared/src/lib/contexts/governance/interfaces/proposal-list-details.interface.ts
@@ -1,4 +1,4 @@
-export interface IProposalsDetails {
+export interface IProposalListDetails {
     totalProposals: number
     activeProposals: number
     votingProposals: number
diff --git a/yarn.lock b/yarn.lock
index 11dc38ef10..d9f363afb6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -343,15 +343,16 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@bloomwalletio/ui@0.20.3":
-  version "0.20.3"
-  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.3/4ff384a8f0e32eb1d7ac72ecccdeabd5670030f8#4ff384a8f0e32eb1d7ac72ecccdeabd5670030f8"
-  integrity sha512-QEHsdq9isrs+m6osZRdafRFgac5k4Zcxn5AtQAwFjG0za/R6nAlP3zrs6GQpjGwglpIBMjNMMrXtt+8p+StKPQ==
+"@bloomwalletio/ui@0.20.4":
+  version "0.20.4"
+  resolved "https://npm.pkg.github.com/download/@bloomwalletio/ui/0.20.4/55e00320965048d0daef162c9288ac5c75a9da6d#55e00320965048d0daef162c9288ac5c75a9da6d"
+  integrity sha512-LIwFYpkUrvVJbJMNYucjOFej7+IOYiKswkUNdS1qMFOzAch2zGCr/hDvh31eukhdzEVCCfP5bGLLI2Ck9awKfA==
   dependencies:
     "@floating-ui/dom" "1.4.3"
     "@popperjs/core" "2.11.8"
     qrious "4.0.2"
     svelte-json-tree "2.1.0"
+    svelte-markdown "0.4.1"
     svelty-picker "4.1.4"
     tailwind-merge "1.13.2"