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/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/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"