diff --git a/CHANGELOG-Nns-Dapp-unreleased.md b/CHANGELOG-Nns-Dapp-unreleased.md
index ef1dcee8afd..7bee4dc6d2a 100644
--- a/CHANGELOG-Nns-Dapp-unreleased.md
+++ b/CHANGELOG-Nns-Dapp-unreleased.md
@@ -22,6 +22,7 @@ proposal is successful, the changes it released will be moved from this file to
 - Migration functions.
 - Render pending and failed BTC withdrawal transaction as such.
 - Add `ENABLE_SNS_TYPES_FILTER` feature flag.
+- Redesign proposal detail neurons block (collapsible).
 
 #### Changed
 
diff --git a/frontend/src/lib/components/proposal-detail/IneligibleNeuronsCard.svelte b/frontend/src/lib/components/proposal-detail/IneligibleNeuronsCard.svelte
index 42260fd3398..081e7750a9a 100644
--- a/frontend/src/lib/components/proposal-detail/IneligibleNeuronsCard.svelte
+++ b/frontend/src/lib/components/proposal-detail/IneligibleNeuronsCard.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
-  import ProposalContentCell from "./ProposalContentCell.svelte";
   import type { IneligibleNeuronData } from "$lib/utils/neuron.utils";
   import { shortenWithMiddleEllipsis } from "$lib/utils/format.utils";
   import { SNS_NEURON_ID_DISPLAY_LENGTH } from "$lib/constants/sns-neurons.constants";
@@ -8,6 +7,7 @@
   import { secondsToDissolveDelayDuration } from "$lib/utils/date.utils";
   import type { NeuronIneligibilityReason } from "$lib/utils/neuron.utils";
   import { nonNullish } from "@dfinity/utils";
+  import VotingCardNeuronList from "$lib/components/proposal-detail/VotingCard/VotingCardNeuronList.svelte";
 
   export let ineligibleNeurons: IneligibleNeuronData[] = [];
   export let minSnsDissolveDelaySeconds: bigint;
@@ -38,41 +38,43 @@
 </script>
 
 {#if visible}
-  <ProposalContentCell>
-    <h4 slot="start">{$i18n.proposal_detail__ineligible.headline}</h4>
-    <p class="description">
-      {replacePlaceholders($i18n.proposal_detail__ineligible.text, {
-        $minDissolveDelay: secondsToDissolveDelayDuration(
-          minSnsDissolveDelaySeconds
-        ),
-      })}
-    </p>
-    <ul>
-      {#each ineligibleNeurons as neuron}
-        <li class="value" title={neuron.neuronIdString}>
+  <p class="description" data-tid="ineligible-neurons-description">
+    {replacePlaceholders($i18n.proposal_detail__ineligible.text, {
+      $minDissolveDelay: secondsToDissolveDelayDuration(
+        minSnsDissolveDelaySeconds
+      ),
+    })}
+  </p>
+  <VotingCardNeuronList>
+    {#each ineligibleNeurons as neuron}
+      <li class="value" title={neuron.neuronIdString}>
+        <span class="label">
           {shortenWithMiddleEllipsis(
             neuron.neuronIdString,
             SNS_NEURON_ID_DISPLAY_LENGTH
-          )}<small>{reasonText(neuron)}</small>
-        </li>
-      {/each}
-    </ul>
-  </ProposalContentCell>
+          )}
+        </span>
+        <small class="value">{reasonText(neuron)}</small>
+      </li>
+    {/each}
+  </VotingCardNeuronList>
 {/if}
 
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/media";
 
-  ul {
-    list-style: none;
-    padding: 0;
+  p {
+    margin: var(--padding-2x) 0;
+
+    // fix unexpected scrollbars in voted and ineligible list
+    line-height: normal;
   }
 
   li {
-    margin: var(--padding-2x) 0;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    gap: var(--padding);
 
     @include media.min-width(small) {
       flex-direction: row;
diff --git a/frontend/src/lib/components/proposal-detail/MyVotes.svelte b/frontend/src/lib/components/proposal-detail/MyVotes.svelte
index fa3994638f6..7df7de536eb 100644
--- a/frontend/src/lib/components/proposal-detail/MyVotes.svelte
+++ b/frontend/src/lib/components/proposal-detail/MyVotes.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
   import { Vote } from "@dfinity/nns";
   import { i18n } from "$lib/stores/i18n";
-  import { IconThumbDown, IconThumbUp, Value } from "@dfinity/gix-components";
+  import {
+    IconThumbDown,
+    IconThumbUp,
+    KeyValuePair,
+  } from "@dfinity/gix-components";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import {
     formatVotingPower,
     type CompactNeuronInfo,
   } from "$lib/utils/neuron.utils";
-  import ProposalContentCell from "./ProposalContentCell.svelte";
   import { shortenWithMiddleEllipsis } from "$lib/utils/format.utils";
   import { SNS_NEURON_ID_DISPLAY_LENGTH } from "$lib/constants/sns-neurons.constants";
+  import VotingCardNeuronList from "$lib/components/proposal-detail/VotingCard/VotingCardNeuronList.svelte";
+  import { fade } from "svelte/transition";
 
   export let neuronsVotedForProposal: CompactNeuronInfo[] = [];
 
@@ -34,52 +39,51 @@
 </script>
 
 {#if neuronsVotedForProposal.length}
-  <ProposalContentCell>
-    <h4 slot="start">{$i18n.proposal_detail.my_votes}</h4>
-    <ul>
-      {#each neuronsVotedForProposal as neuron}
-        <li
-          data-tid="neuron-data"
-          aria-label={voteMapper({
-            neuron: neuron.idString,
-            vote: neuron.vote,
-          })}
-          title={voteMapper({ neuron: neuron.idString, vote: neuron.vote })}
-        >
-          <p class="value" title={neuron.idString}>
+  <VotingCardNeuronList>
+    {#each neuronsVotedForProposal as neuron}
+      <li
+        data-tid="neuron-data"
+        aria-label={voteMapper({
+          neuron: neuron.idString,
+          vote: neuron.vote,
+        })}
+        title={voteMapper({ neuron: neuron.idString, vote: neuron.vote })}
+        in:fade
+      >
+        <KeyValuePair>
+          <span slot="key" class="value" title={neuron.idString}>
             {shortenWithMiddleEllipsis(
               neuron.idString,
               SNS_NEURON_ID_DISPLAY_LENGTH
             )}
-          </p>
-          <p class="vote-details" data-tid="my-votes-voting-power">
-            <Value>{formatVotingPower(neuron.votingPower)}</Value>
+          </span>
+          <span
+            slot="value"
+            class="vote-details"
+            class:rejected={neuron.vote === Vote.No}
+            data-tid="my-votes-voting-power"
+          >
+            <span>{formatVotingPower(neuron.votingPower)}</span>
             {#if voteIconMapper[neuron.vote]}
               <svelte:component this={voteIconMapper[neuron.vote]} />
             {/if}
-          </p>
-        </li>
-      {/each}
-    </ul>
-  </ProposalContentCell>
+          </span>
+        </KeyValuePair>
+      </li>
+    {/each}
+  </VotingCardNeuronList>
 {/if}
 
 <style lang="scss">
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
-
-  ul {
-    list-style-type: none;
-    padding: 0;
-  }
-
-  li {
+  .vote-details {
     display: flex;
-    justify-content: space-between;
+    align-items: center;
+    gap: var(--padding);
+
+    color: var(--positive-emphasis);
 
-    .vote-details {
-      display: flex;
-      align-items: center;
-      gap: var(--padding);
+    &.rejected {
+      color: var(--negative-emphasis);
     }
   }
 </style>
diff --git a/frontend/src/lib/components/proposal-detail/ProposalVotingSection.svelte b/frontend/src/lib/components/proposal-detail/ProposalVotingSection.svelte
index ce65b32d3ad..af016948154 100644
--- a/frontend/src/lib/components/proposal-detail/ProposalVotingSection.svelte
+++ b/frontend/src/lib/components/proposal-detail/ProposalVotingSection.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import type { ProposalInfo } from "@dfinity/nns";
   import VotesResults from "./VotesResults.svelte";
-  import VotingCard from "./VotingCard/VotingCard.svelte";
   import { ProposalRewardStatus } from "@dfinity/nns";
   import { E8S_PER_ICP } from "$lib/constants/icp.constants";
   import { basisPointsToPercent } from "$lib/utils/utils";
@@ -9,6 +8,7 @@
     MINIMUM_YES_PROPORTION_OF_EXERCISED_VOTING_POWER,
     MINIMUM_YES_PROPORTION_OF_TOTAL_VOTING_POWER,
   } from "$lib/constants/proposals.constants";
+  import NnsVotingCard from "$lib/components/proposal-detail/VotingCard/NnsVotingCard.svelte";
 
   export let proposalInfo: ProposalInfo;
 
@@ -45,5 +45,5 @@
 />
 
 {#if !settled}
-  <VotingCard {proposalInfo} />
+  <NnsVotingCard {proposalInfo} />
 {/if}
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte
new file mode 100644
index 00000000000..b728d6e037a
--- /dev/null
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { IconExpandCircleDown, Collapsible } from "@dfinity/gix-components";
+  import { fade } from "svelte/transition";
+
+  export let testId: string;
+
+  let toggleContent: () => void;
+  let expanded: boolean;
+</script>
+
+<div class="container" in:fade>
+  <Collapsible
+    {testId}
+    expandButton={false}
+    externalToggle={true}
+    bind:toggleContent
+    bind:expanded
+    wrapHeight
+  >
+    <div slot="header" class="header" class:expanded>
+      <div class="header-entry">
+        <span class="value">
+          <slot name="start" />
+        </span>
+        <button
+          class="icon"
+          class:expanded
+          on:click|stopPropagation={toggleContent}
+        >
+          <IconExpandCircleDown />
+        </button>
+      </div>
+
+      <div class="header-entry">
+        <slot name="end" />
+      </div>
+    </div>
+
+    <slot />
+  </Collapsible>
+</div>
+
+<style lang="scss">
+  @use "@dfinity/gix-components/dist/styles/mixins/media";
+
+  .container {
+    padding-bottom: var(--padding-2x);
+    border-bottom: 1px solid var(--tertiary);
+  }
+
+  .header {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--padding);
+    width: 100%;
+
+    @include media.min-width(large) {
+      padding: 0 var(--padding) 0 0;
+    }
+  }
+
+  .header-entry {
+    display: flex;
+    align-items: center;
+    gap: var(--padding);
+  }
+
+  .icon {
+    color: var(--tertiary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    transition: transform ease-in var(--animation-time-normal);
+
+    &.expanded {
+      transform: rotate(-180deg);
+    }
+  }
+</style>
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/IneligibleNeuronList.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/IneligibleNeuronList.svelte
new file mode 100644
index 00000000000..a038a0ff11f
--- /dev/null
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/IneligibleNeuronList.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import { replacePlaceholders } from "$lib/utils/i18n.utils";
+  import ExpandableProposalNeurons from "$lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte";
+  import IneligibleNeuronsCard from "$lib/components/proposal-detail/IneligibleNeuronsCard.svelte";
+  import type { IneligibleNeuronData } from "$lib/utils/neuron.utils";
+
+  export let ineligibleNeurons: IneligibleNeuronData[] = [];
+  export let minSnsDissolveDelaySeconds: bigint;
+
+  let ineligibleNeuronCount: number;
+  $: ineligibleNeuronCount = ineligibleNeurons.length;
+</script>
+
+{#if ineligibleNeuronCount > 0}
+  <ExpandableProposalNeurons testId="ineligible-neurons">
+    <svelte:fragment slot="start">
+      {replacePlaceholders($i18n.proposal_detail__ineligible.headline, {
+        $count: `${ineligibleNeuronCount}`,
+      })}
+    </svelte:fragment>
+    <IneligibleNeuronsCard {ineligibleNeurons} {minSnsDissolveDelaySeconds} />
+  </ExpandableProposalNeurons>
+{/if}
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/NnsVotingCard.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/NnsVotingCard.svelte
new file mode 100644
index 00000000000..e01f4fa822c
--- /dev/null
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/NnsVotingCard.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+  import {
+    type ProposalInfo,
+    type Vote,
+    votableNeurons as getVotableNeurons,
+  } from "@dfinity/nns";
+  import { getContext } from "svelte";
+  import { definedNeuronsStore, neuronsStore } from "$lib/stores/neurons.store";
+  import {
+    SELECTED_PROPOSAL_CONTEXT_KEY,
+    type SelectedProposalContext,
+  } from "$lib/types/selected-proposal.context";
+  import {
+    isProposalDeadlineInTheFuture,
+    nnsNeuronToVotingNeuron,
+  } from "$lib/utils/proposals.utils";
+  import {
+    voteRegistrationStore,
+    type VoteRegistrationStoreEntry,
+  } from "$lib/stores/vote-registration.store";
+  import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
+  import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
+  import { registerNnsVotes } from "$lib/services/nns-vote-registration.services";
+  import {
+    type CompactNeuronInfo,
+    filterIneligibleNnsNeurons,
+    type IneligibleNeuronData,
+    votedNeuronDetails,
+  } from "$lib/utils/neuron.utils";
+  import { NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE } from "$lib/constants/neurons.constants";
+  import { isForceCallStrategy } from "$lib/utils/env.utils";
+  import VotingCard from "$lib/components/proposal-detail/VotingCard/VotingCard.svelte";
+
+  export let proposalInfo: ProposalInfo;
+
+  const votableNeurons = () =>
+    getVotableNeurons({
+      neurons: $definedNeuronsStore,
+      proposal: proposalInfo,
+    }).map((neuron) =>
+      nnsNeuronToVotingNeuron({ neuron, proposal: proposalInfo })
+    );
+
+  let visible = false;
+  /** Signals that the initial checkbox preselection was done. To avoid removing of user selection after second queryAndUpdate callback. */
+  let initialSelectionDone = false;
+  let voteRegistration: VoteRegistrationStoreEntry | undefined = undefined;
+
+  $: voteRegistration = (
+    $voteRegistrationStore.registrations[OWN_CANISTER_ID_TEXT] ?? []
+  ).find(({ proposalIdString }) => `${proposalInfo.id}` === proposalIdString);
+
+  $: $definedNeuronsStore,
+    (visible = isProposalDeadlineInTheFuture(proposalInfo));
+
+  const updateVotingNeuronSelectedStore = () => {
+    if (!initialSelectionDone) {
+      initialSelectionDone = true;
+      votingNeuronSelectStore.set(votableNeurons());
+    } else {
+      // preserve user selection after neurons update (e.g. queryAndUpdate second callback)
+      votingNeuronSelectStore.updateNeurons(votableNeurons());
+    }
+  };
+
+  $: $definedNeuronsStore, updateVotingNeuronSelectedStore();
+
+  const { store } = getContext<SelectedProposalContext>(
+    SELECTED_PROPOSAL_CONTEXT_KEY
+  );
+  const vote = async ({ detail }: { detail: { voteType: Vote } }) =>
+    await registerNnsVotes({
+      neuronIds: $votingNeuronSelectStore.selectedIds.map(BigInt),
+      vote: detail.voteType,
+      proposalInfo,
+      reloadProposalCallback: (
+        proposalInfo: ProposalInfo // we update store only if proposal id are matching even though it would be an edge case that these would not match here
+      ) =>
+        store.update(({ proposalId, proposal }) => ({
+          proposalId,
+          proposal: proposalId === proposalInfo.id ? proposalInfo : proposal,
+        })),
+    });
+
+  // UI loader
+  const neuronsStoreReady = (): boolean => {
+    // We consider the neurons store as ready if it has been initialized once. Subsequent changes that happen after vote or other functions are handled with the busy store.
+    // This to avoid the display of a spinner within the page and another spinner over it (the busy spinner) when the user vote is being processed.
+    if (neuronsReady) {
+      return true;
+    }
+
+    return (
+      $neuronsStore.neurons !== undefined &&
+      ($neuronsStore.certified === true ||
+        ($neuronsStore.certified === false && isForceCallStrategy()))
+    );
+  };
+
+  let neuronsReady = false;
+  $: $neuronsStore, (neuronsReady = neuronsStoreReady());
+
+  let neuronsVotedForProposal: CompactNeuronInfo[];
+  $: {
+    neuronsVotedForProposal = votedNeuronDetails({
+      neurons: $definedNeuronsStore,
+      proposal: proposalInfo,
+    });
+  }
+
+  let ineligibleNeurons: IneligibleNeuronData[];
+  $: ineligibleNeurons = filterIneligibleNnsNeurons({
+    neurons: $definedNeuronsStore,
+    proposal: proposalInfo,
+  });
+
+  let hasNeurons = false;
+  $: hasNeurons = $definedNeuronsStore.length > 0;
+
+  let minSnsDissolveDelaySeconds: bigint;
+  $: minSnsDissolveDelaySeconds = BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE);
+</script>
+
+<VotingCard
+  {hasNeurons}
+  {visible}
+  {neuronsReady}
+  {voteRegistration}
+  {neuronsVotedForProposal}
+  {ineligibleNeurons}
+  {minSnsDissolveDelaySeconds}
+  on:nnsConfirm={vote}
+/>
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotableNeuronList.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotableNeuronList.svelte
new file mode 100644
index 00000000000..f9325c5408d
--- /dev/null
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/VotableNeuronList.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { selectedNeuronsVotingPower } from "$lib/utils/proposals.utils";
+  import { i18n } from "$lib/stores/i18n";
+  import { Value } from "@dfinity/gix-components";
+  import { formatVotingPower } from "$lib/utils/neuron.utils";
+  import {
+    type VoteRegistrationStoreEntry,
+    votingNeuronSelectStore,
+  } from "$lib/stores/vote-registration.store";
+  import { replacePlaceholders } from "$lib/utils/i18n.utils";
+  import ExpandableProposalNeurons from "$lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte";
+  import VotingNeuronSelectList from "$lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte";
+
+  export let voteRegistration: VoteRegistrationStoreEntry | undefined;
+
+  let totalNeuronsVotingPower: bigint;
+  $: totalNeuronsVotingPower = selectedNeuronsVotingPower({
+    neurons: $votingNeuronSelectStore.neurons,
+    selectedIds: $votingNeuronSelectStore.selectedIds,
+  });
+
+  let totalVotingNeurons: number;
+  $: totalVotingNeurons = $votingNeuronSelectStore.neurons.length;
+
+  let selectedVotingNeurons: number;
+  $: selectedVotingNeurons = $votingNeuronSelectStore.selectedIds.length;
+</script>
+
+{#if totalVotingNeurons > 0}
+  <ExpandableProposalNeurons testId="votable-neurons">
+    <div slot="start" data-tid="voting-collapsible-toolbar-neurons">
+      {replacePlaceholders($i18n.proposal_detail__vote.vote_with_neurons, {
+        $votable_count: `${selectedVotingNeurons}`,
+        $all_count: `${totalVotingNeurons}`,
+      })}
+    </div>
+    <svelte:fragment slot="end">
+      <span class="label">{$i18n.proposal_detail__vote.voting_power}</span>
+      <Value testId="voting-collapsible-toolbar-voting-power"
+        >{formatVotingPower(
+          totalNeuronsVotingPower === undefined ? 0n : totalNeuronsVotingPower
+        )}</Value
+      >
+    </svelte:fragment>
+    <VotingNeuronSelectList disabled={voteRegistration !== undefined} />
+  </ExpandableProposalNeurons>
+{/if}
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotedNeuronList.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotedNeuronList.svelte
new file mode 100644
index 00000000000..d5f7684c13d
--- /dev/null
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/VotedNeuronList.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { i18n } from "$lib/stores/i18n";
+  import { Value } from "@dfinity/gix-components";
+  import {
+    type CompactNeuronInfo,
+    formatVotingPower,
+    neuronsVotingPower,
+  } from "$lib/utils/neuron.utils";
+  import { replacePlaceholders } from "$lib/utils/i18n.utils";
+  import ExpandableProposalNeurons from "$lib/components/proposal-detail/VotingCard/ExpandableProposalNeurons.svelte";
+  import MyVotes from "$lib/components/proposal-detail/MyVotes.svelte";
+
+  export let neuronsVotedForProposal: CompactNeuronInfo[];
+
+  let votedVotingPower: bigint;
+  $: votedVotingPower = neuronsVotingPower(neuronsVotedForProposal);
+
+  let votedNeuronCount: number;
+  $: votedNeuronCount = neuronsVotedForProposal.length;
+</script>
+
+{#if votedNeuronCount > 0}
+  <ExpandableProposalNeurons testId="voted-neurons">
+    <svelte:fragment slot="start">
+      {replacePlaceholders($i18n.proposal_detail.neurons_voted, {
+        $count: `${votedNeuronCount}`,
+      })}
+    </svelte:fragment>
+    <svelte:fragment slot="end">
+      <span class="label">{$i18n.proposal_detail__vote.voting_power}</span>
+      <Value testId="voted-voting-power"
+        >{formatVotingPower(votedVotingPower)}</Value
+      >
+    </svelte:fragment>
+    <MyVotes {neuronsVotedForProposal} />
+  </ExpandableProposalNeurons>
+{/if}
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotingCard.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotingCard.svelte
index b8779bf2809..cb95850cb18 100644
--- a/frontend/src/lib/components/proposal-detail/VotingCard/VotingCard.svelte
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/VotingCard.svelte
@@ -1,128 +1,26 @@
 <script lang="ts">
-  import {
-    type ProposalInfo,
-    type Vote,
-    votableNeurons as getVotableNeurons,
-  } from "@dfinity/nns";
-
-  import { getContext } from "svelte";
-  import { definedNeuronsStore, neuronsStore } from "$lib/stores/neurons.store";
   import VotingConfirmationToolbar from "./VotingConfirmationToolbar.svelte";
-  import VotingNeuronSelect from "./VotingNeuronSelect.svelte";
-  import {
-    SELECTED_PROPOSAL_CONTEXT_KEY,
-    type SelectedProposalContext,
-  } from "$lib/types/selected-proposal.context";
-  import {
-    isProposalDeadlineInTheFuture,
-    nnsNeuronToVotingNeuron,
-  } from "$lib/utils/proposals.utils";
-  import {
-    voteRegistrationStore,
-    type VoteRegistrationStoreEntry,
-  } from "$lib/stores/vote-registration.store";
+  import type { VoteRegistrationStoreEntry } from "$lib/stores/vote-registration.store";
   import { BottomSheet } from "@dfinity/gix-components";
   import { i18n } from "$lib/stores/i18n";
   import SignInGuard from "$lib/components/common/SignInGuard.svelte";
   import SpinnerText from "$lib/components/ui/SpinnerText.svelte";
-  import { OWN_CANISTER_ID_TEXT } from "$lib/constants/canister-ids.constants";
-  import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
-  import { registerNnsVotes } from "$lib/services/nns-vote-registration.services";
-  import MyVotes from "$lib/components/proposal-detail/MyVotes.svelte";
-  import IneligibleNeuronsCard from "$lib/components/proposal-detail/IneligibleNeuronsCard.svelte";
-  import VotingNeuronSelectList from "$lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte";
   import {
     type CompactNeuronInfo,
-    filterIneligibleNnsNeurons,
     type IneligibleNeuronData,
-    votedNeuronDetails,
   } from "$lib/utils/neuron.utils";
-  import { NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE } from "$lib/constants/neurons.constants";
   import { authSignedInStore } from "$lib/derived/auth.derived";
-  import { isForceCallStrategy } from "$lib/utils/env.utils";
-
-  export let proposalInfo: ProposalInfo;
-
-  const votableNeurons = () =>
-    getVotableNeurons({
-      neurons: $definedNeuronsStore,
-      proposal: proposalInfo,
-    }).map((neuron) =>
-      nnsNeuronToVotingNeuron({ neuron, proposal: proposalInfo })
-    );
-
-  let visible = false;
-  /** Signals that the initial checkbox preselection was done. To avoid removing of user selection after second queryAndUpdate callback. */
-  let initialSelectionDone = false;
-  let voteRegistration: VoteRegistrationStoreEntry | undefined = undefined;
-
-  $: voteRegistration = (
-    $voteRegistrationStore.registrations[OWN_CANISTER_ID_TEXT] ?? []
-  ).find(({ proposalIdString }) => `${proposalInfo.id}` === proposalIdString);
-
-  $: $definedNeuronsStore,
-    (visible = isProposalDeadlineInTheFuture(proposalInfo));
-
-  const updateVotingNeuronSelectedStore = () => {
-    if (!initialSelectionDone) {
-      initialSelectionDone = true;
-      votingNeuronSelectStore.set(votableNeurons());
-    } else {
-      // preserve user selection after neurons update (e.g. queryAndUpdate second callback)
-      votingNeuronSelectStore.updateNeurons(votableNeurons());
-    }
-  };
-
-  $: $definedNeuronsStore, updateVotingNeuronSelectedStore();
-
-  const { store } = getContext<SelectedProposalContext>(
-    SELECTED_PROPOSAL_CONTEXT_KEY
-  );
-  const vote = async ({ detail }: { detail: { voteType: Vote } }) =>
-    await registerNnsVotes({
-      neuronIds: $votingNeuronSelectStore.selectedIds.map(BigInt),
-      vote: detail.voteType,
-      proposalInfo,
-      reloadProposalCallback: (
-        proposalInfo: ProposalInfo // we update store only if proposal id are matching even though it would be an edge case that these would not match here
-      ) =>
-        store.update(({ proposalId, proposal }) => ({
-          proposalId,
-          proposal: proposalId === proposalInfo.id ? proposalInfo : proposal,
-        })),
-    });
-
-  // UI loader
-  const neuronsStoreReady = (): boolean => {
-    // We consider the neurons store as ready if it has been initialized once. Subsequent changes that happen after vote or other functions are handled with the busy store.
-    // This to avoid the display of a spinner within the page and another spinner over it (the busy spinner) when the user vote is being processed.
-    if (neuronsReady) {
-      return true;
-    }
-
-    return (
-      $neuronsStore.neurons !== undefined &&
-      ($neuronsStore.certified === true ||
-        ($neuronsStore.certified === false && isForceCallStrategy()))
-    );
-  };
-
-  let neuronsReady = false;
-  $: $neuronsStore, (neuronsReady = neuronsStoreReady());
-
-  let neuronsVotedForProposal: CompactNeuronInfo[];
-  $: {
-    neuronsVotedForProposal = votedNeuronDetails({
-      neurons: $definedNeuronsStore,
-      proposal: proposalInfo,
-    });
-  }
-
-  let ineligibleNeurons: IneligibleNeuronData[];
-  $: ineligibleNeurons = filterIneligibleNnsNeurons({
-    neurons: $definedNeuronsStore,
-    proposal: proposalInfo,
-  });
+  import VotedNeuronList from "$lib/components/proposal-detail/VotingCard/VotedNeuronList.svelte";
+  import IneligibleNeuronList from "$lib/components/proposal-detail/VotingCard/IneligibleNeuronList.svelte";
+  import VotableNeuronList from "$lib/components/proposal-detail/VotingCard/VotableNeuronList.svelte";
+
+  export let hasNeurons: boolean;
+  export let visible: boolean;
+  export let neuronsReady: boolean;
+  export let voteRegistration: VoteRegistrationStoreEntry | undefined;
+  export let neuronsVotedForProposal: CompactNeuronInfo[];
+  export let ineligibleNeurons: IneligibleNeuronData[];
+  export let minSnsDissolveDelaySeconds: bigint;
 </script>
 
 <BottomSheet>
@@ -132,27 +30,21 @@
     data-tid="voting-card-component"
   >
     <SignInGuard>
-      {#if $definedNeuronsStore.length > 0}
+      {#if hasNeurons}
         {#if neuronsReady}
           {#if visible}
-            <VotingConfirmationToolbar
-              {voteRegistration}
-              on:nnsConfirm={vote}
-            />
+            <VotingConfirmationToolbar {voteRegistration} on:nnsConfirm />
           {/if}
-
-          <VotingNeuronSelect>
-            <VotingNeuronSelectList disabled={voteRegistration !== undefined} />
-            <MyVotes {neuronsVotedForProposal} />
-            <IneligibleNeuronsCard
+          <div class="neuron-groups" data-tid="voting-neuron-select">
+            <VotableNeuronList {voteRegistration} />
+            <VotedNeuronList {neuronsVotedForProposal} />
+            <IneligibleNeuronList
               {ineligibleNeurons}
-              minSnsDissolveDelaySeconds={BigInt(
-                NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE
-              )}
+              {minSnsDissolveDelaySeconds}
             />
-          </VotingNeuronSelect>
+          </div>
         {:else}
-          <div class="loader">
+          <div class="loader" data-tid="loading-neurons-spinner">
             <SpinnerText>{$i18n.proposal_detail.loading_neurons}</SpinnerText>
           </div>
         {/if}
@@ -165,15 +57,52 @@
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/media";
 
-  .container:not(.signedIn) {
+  .container {
     display: flex;
-    justify-content: center;
-    padding: var(--padding-2x) 0;
 
+    // add scrollbars for too long content
+    overflow-y: auto;
+    max-height: 100vh;
+
+    /** Fix for iOS Safari 100vh issue
+     @src: https://github.com/postcss/postcss-100vh-fix
+     */
+    // Avoid Chrome to see Safari hack
+    @supports (-webkit-touch-callout: none) {
+      // The hack for Safari
+      max-height: -webkit-fill-available;
+    }
+
+    @include media.min-width(large) {
+      max-height: none;
+    }
+
+    // mobile extra padding
+    padding: var(--padding) var(--padding-2x);
     @include media.min-width(large) {
-      display: block;
-      padding: 0;
+      padding: 0 var(--padding) 0 0;
+    }
+
+    &.signedIn {
+      flex-direction: column;
+      gap: var(--padding-3x);
     }
+
+    &:not(.signedIn) {
+      justify-content: center;
+      padding: var(--padding-2x) 0;
+
+      @include media.min-width(large) {
+        display: block;
+        padding: 0;
+      }
+    }
+  }
+
+  .neuron-groups {
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-3x);
   }
 
   .loader {
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotingCardNeuronList.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotingCardNeuronList.svelte
new file mode 100644
index 00000000000..d947b29fffc
--- /dev/null
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/VotingCardNeuronList.svelte
@@ -0,0 +1,18 @@
+<ul><slot /></ul>
+
+<style lang="scss">
+  ul {
+    list-style: none;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--padding-2x);
+    margin-top: var(--padding);
+
+    --checkbox-padding: 0;
+
+    // fix unexpected scrollbars in voted and ineligible list
+    line-height: normal;
+  }
+</style>
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelect.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelect.svelte
deleted file mode 100644
index 30b43024764..00000000000
--- a/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelect.svelte
+++ /dev/null
@@ -1,112 +0,0 @@
-<script lang="ts">
-  import { selectedNeuronsVotingPower } from "$lib/utils/proposals.utils";
-  import { i18n } from "$lib/stores/i18n";
-  import {
-    IconExpandCircleDown,
-    Collapsible,
-    Value,
-  } from "@dfinity/gix-components";
-  import { formatVotingPower } from "$lib/utils/neuron.utils";
-  import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
-  import VotingNeuronSelectContainer from "$lib/components/proposal-detail/VotingCard/VotingNeuronSelectContainer.svelte";
-
-  let totalNeuronsVotingPower: bigint;
-
-  $: totalNeuronsVotingPower = selectedNeuronsVotingPower({
-    neurons: $votingNeuronSelectStore.neurons,
-    selectedIds: $votingNeuronSelectStore.selectedIds,
-  });
-
-  let toggleContent: () => void;
-  let expanded: boolean;
-
-  let totalVotingNeurons: number;
-  $: totalVotingNeurons = $votingNeuronSelectStore.neurons.length;
-
-  let selectedVotingNeurons: number;
-  $: selectedVotingNeurons = $votingNeuronSelectStore.selectedIds.length;
-
-  let displayNeuronsInfo: boolean;
-  $: displayNeuronsInfo = totalVotingNeurons > 0;
-</script>
-
-<Collapsible
-  expandButton={false}
-  externalToggle={true}
-  bind:toggleContent
-  bind:expanded
-  wrapHeight
->
-  <div slot="header" class="total" class:expanded>
-    <div class="total-neurons">
-      <span class="value" data-tid="voting-collapsible-toolbar-neurons"
-        >{$i18n.proposal_detail__vote
-          .neurons}{#if displayNeuronsInfo}&nbsp;({selectedVotingNeurons}/{totalVotingNeurons})
-        {/if}
-      </span>
-      <button
-        class="icon"
-        class:expanded
-        on:click|stopPropagation={toggleContent}
-      >
-        <IconExpandCircleDown />
-      </button>
-    </div>
-
-    {#if displayNeuronsInfo}
-      <div
-        class="total-voting-power"
-        data-tid="voting-collapsible-toolbar-voting-power"
-      >
-        <span class="label">{$i18n.proposal_detail__vote.voting_power}</span>
-        <Value
-          >{formatVotingPower(
-            totalNeuronsVotingPower === undefined ? 0n : totalNeuronsVotingPower
-          )}</Value
-        >
-      </div>
-    {/if}
-  </div>
-
-  <VotingNeuronSelectContainer>
-    <slot />
-  </VotingNeuronSelectContainer>
-</Collapsible>
-
-<style lang="scss">
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
-
-  .total {
-    display: flex;
-    justify-content: space-between;
-    gap: var(--padding);
-    width: 100%;
-    margin-top: var(--padding-3x);
-    padding: var(--padding) var(--padding-2x);
-
-    @include media.min-width(large) {
-      padding: 0 var(--padding) 0 0;
-    }
-  }
-
-  .total-neurons,
-  .total-voting-power {
-    display: flex;
-    align-items: center;
-    gap: var(--padding);
-  }
-
-  .icon {
-    color: var(--tertiary);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-
-    transition: transform ease-in var(--animation-time-normal);
-
-    &.expanded {
-      transform: rotate(-180deg);
-    }
-  }
-</style>
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectContainer.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectContainer.svelte
deleted file mode 100644
index 9a66e5b4389..00000000000
--- a/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectContainer.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-</script>
-
-<div class="neurons">
-  <slot />
-</div>
-
-<style lang="scss">
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
-
-  .neurons {
-    padding: var(--padding-1_5x) var(--padding) 0;
-    max-height: var(--voting-bottom-sheet-content-max-height);
-    overflow-y: auto;
-
-    position: relative;
-
-    &:before {
-      content: "";
-      position: absolute;
-      top: var(--padding-1_5x);
-      right: 50%;
-      border-top: 1px solid var(--tertiary);
-      width: calc(100% - (4 * var(--padding)));
-      transform: translate(50%, 0);
-    }
-
-    @include media.min-width(large) {
-      max-height: inherit;
-      padding: var(--padding) 0;
-
-      &:before {
-        width: 100%;
-      }
-    }
-
-    :global(div.content-cell-title) {
-      margin-top: var(--padding-4x);
-    }
-
-    :global(div.content-cell-details) {
-      margin-top: 0;
-    }
-  }
-</style>
diff --git a/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte b/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte
index 61fc023be54..8094831a150 100644
--- a/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte
+++ b/frontend/src/lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import { i18n } from "$lib/stores/i18n";
-  import { Checkbox } from "@dfinity/gix-components";
+  import { Checkbox, KeyValuePair } from "@dfinity/gix-components";
   import { replacePlaceholders } from "$lib/utils/i18n.utils";
   import { formatVotingPower } from "$lib/utils/neuron.utils";
   import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
   import { shortenWithMiddleEllipsis } from "$lib/utils/format.utils";
   import { SNS_NEURON_ID_DISPLAY_LENGTH } from "$lib/constants/sns-neurons.constants";
+  import VotingCardNeuronList from "$lib/components/proposal-detail/VotingCard/VotingCardNeuronList.svelte";
+  import { fade } from "svelte/transition";
 
   export let disabled: boolean;
 
@@ -14,74 +16,48 @@
 </script>
 
 {#if $votingNeuronSelectStore.neurons.length > 0}
-  <ul>
+  <VotingCardNeuronList>
     {#each $votingNeuronSelectStore.neurons as neuron}
-      <li>
-        <Checkbox
-          inputId={neuron.neuronIdString}
-          checked={$votingNeuronSelectStore.selectedIds.includes(
-            neuron.neuronIdString
-          )}
-          on:nnsChange={() => toggleSelection(neuron.neuronIdString)}
-          text="block"
-          {disabled}
-        >
-          <span
-            class="neuron-id value"
-            aria-label={replacePlaceholders(
-              $i18n.proposal_detail__vote.cast_vote_neuronId,
-              {
-                $neuronId: neuron.neuronIdString,
-              }
-            )}
-            title={neuron.neuronIdString}
-            >{shortenWithMiddleEllipsis(
-              neuron.neuronIdString,
-              SNS_NEURON_ID_DISPLAY_LENGTH
-            )}</span
-          >
-          <span
-            class="voting-power value"
-            data-tid="voting-neuron-select-voting-power"
-            aria-label={replacePlaceholders(
-              $i18n.proposal_detail__vote.cast_vote_votingPower,
-              {
-                $votingPower: formatVotingPower(neuron.votingPower),
-              }
-            )}>{formatVotingPower(neuron.votingPower)}</span
-          >
-        </Checkbox>
+      <li in:fade>
+        <KeyValuePair>
+          <span slot="key" class="label">
+            <span
+              aria-label={replacePlaceholders(
+                $i18n.proposal_detail__vote.cast_vote_neuronId,
+                {
+                  $neuronId: neuron.neuronIdString,
+                }
+              )}
+              title={neuron.neuronIdString}
+              >{shortenWithMiddleEllipsis(
+                neuron.neuronIdString,
+                SNS_NEURON_ID_DISPLAY_LENGTH
+              )}</span
+            >
+          </span>
+          <span slot="value" class="value">
+            <Checkbox
+              inputId={neuron.neuronIdString}
+              checked={$votingNeuronSelectStore.selectedIds.includes(
+                neuron.neuronIdString
+              )}
+              on:nnsChange={() => toggleSelection(neuron.neuronIdString)}
+              {disabled}
+            >
+              <span
+                class="value"
+                data-tid="voting-neuron-select-voting-power"
+                aria-label={replacePlaceholders(
+                  $i18n.proposal_detail__vote.cast_vote_votingPower,
+                  {
+                    $votingPower: formatVotingPower(neuron.votingPower),
+                  }
+                )}>{formatVotingPower(neuron.votingPower)}</span
+              >
+            </Checkbox>
+          </span>
+        </KeyValuePair>
       </li>
     {/each}
-  </ul>
+  </VotingCardNeuronList>
 {/if}
-
-<style lang="scss">
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
-
-  ul {
-    list-style: none;
-    padding: var(--padding-1_5x) 0;
-
-    // checkbox restyling
-    --checkbox-padding: var(--padding);
-
-    :global(label) {
-      margin-left: var(--padding-0_5x);
-
-      display: flex;
-      justify-content: space-between;
-      grid-gap: var(--padding);
-
-      order: 1;
-    }
-  }
-
-  span {
-    word-break: break-word;
-  }
-
-  .voting-power {
-    text-align: right;
-  }
-</style>
diff --git a/frontend/src/lib/components/sns-proposals/SnsVotingCard.svelte b/frontend/src/lib/components/sns-proposals/SnsVotingCard.svelte
index fbde444d48f..edbcb775627 100644
--- a/frontend/src/lib/components/sns-proposals/SnsVotingCard.svelte
+++ b/frontend/src/lib/components/sns-proposals/SnsVotingCard.svelte
@@ -1,8 +1,4 @@
 <script lang="ts">
-  import { BottomSheet } from "@dfinity/gix-components";
-  import { i18n } from "$lib/stores/i18n";
-  import SignInGuard from "$lib/components/common/SignInGuard.svelte";
-  import SpinnerText from "$lib/components/ui/SpinnerText.svelte";
   import type {
     SnsNervousSystemParameters,
     SnsNeuron,
@@ -30,22 +26,16 @@
     votableSnsNeurons,
     votedSnsNeuronDetails,
   } from "$lib/utils/sns-neuron.utils";
-  import VotingConfirmationToolbar from "$lib/components/proposal-detail/VotingCard/VotingConfirmationToolbar.svelte";
   import { snsParametersStore } from "$lib/stores/sns-parameters.store";
   import { registerSnsVotes } from "$lib/services/sns-vote-registration.services";
   import { Principal } from "@dfinity/principal";
-  import VotingNeuronSelect from "$lib/components/proposal-detail/VotingCard/VotingNeuronSelect.svelte";
-  import VotingNeuronSelectList from "$lib/components/proposal-detail/VotingCard/VotingNeuronSelectList.svelte";
   import type {
     CompactNeuronInfo,
     IneligibleNeuronData,
   } from "$lib/utils/neuron.utils";
-  import MyVotes from "$lib/components/proposal-detail/MyVotes.svelte";
   import { ineligibleSnsNeurons } from "$lib/utils/sns-neuron.utils";
-  import IneligibleNeuronsCard from "$lib/components/proposal-detail/IneligibleNeuronsCard.svelte";
-  import { authSignedInStore } from "$lib/derived/auth.derived";
   import { authStore } from "$lib/stores/auth.store";
-  import TestIdWrapper from "../common/TestIdWrapper.svelte";
+  import VotingCard from "$lib/components/proposal-detail/VotingCard/VotingCard.svelte";
 
   export let proposal: SnsProposalData;
   export let reloadProposal: () => Promise<void>;
@@ -132,7 +122,7 @@
     }
   };
 
-  let neuronsVotedForProposal: CompactNeuronInfo[];
+  let neuronsVotedForProposal: CompactNeuronInfo[] = [];
   $: if ($sortedSnsUserNeuronsStore.length > 0) {
     neuronsVotedForProposal = votedSnsNeuronDetails({
       neurons: $sortedSnsUserNeuronsStore,
@@ -160,63 +150,18 @@
       : fromDefinedNullable(
           snsParameters.neuron_minimum_dissolve_delay_to_vote_seconds
         );
-</script>
-
-<TestIdWrapper testId="sns-voting-card-component">
-  <BottomSheet>
-    <div class="container" class:signedIn={$authSignedInStore}>
-      <SignInGuard>
-        {#if $sortedSnsUserNeuronsStore.length > 0}
-          {#if neuronsReady}
-            {#if visible}
-              <VotingConfirmationToolbar
-                {voteRegistration}
-                on:nnsConfirm={vote}
-              />
-            {/if}
-
-            <VotingNeuronSelect>
-              <VotingNeuronSelectList
-                disabled={voteRegistration !== undefined}
-              />
-              <MyVotes {neuronsVotedForProposal} />
-              <IneligibleNeuronsCard
-                {ineligibleNeurons}
-                {minSnsDissolveDelaySeconds}
-              />
-            </VotingNeuronSelect>
-          {:else}
-            <div class="loader">
-              <SpinnerText>{$i18n.proposal_detail.loading_neurons}</SpinnerText>
-            </div>
-          {/if}
-        {/if}
-        <span slot="signin-cta">{$i18n.proposal_detail.sign_in}</span>
-      </SignInGuard>
-    </div>
-  </BottomSheet>
-</TestIdWrapper>
-
-<style lang="scss">
-  @use "@dfinity/gix-components/dist/styles/mixins/media";
-
-  .container:not(.signedIn) {
-    display: flex;
-    justify-content: center;
-    padding: var(--padding-2x) 0;
-
-    @include media.min-width(large) {
-      display: block;
-      padding: 0;
-    }
-  }
 
-  .loader {
-    // Observed values that match bottom sheet height
-    padding: var(--padding-3x) var(--padding-2x);
+  let hasNeurons = false;
+  $: hasNeurons = $sortedSnsUserNeuronsStore.length > 0;
+</script>
 
-    @include media.min-width(large) {
-      padding: var(--padding-3x) 0;
-    }
-  }
-</style>
+<VotingCard
+  {hasNeurons}
+  {visible}
+  {neuronsReady}
+  {voteRegistration}
+  {neuronsVotedForProposal}
+  {ineligibleNeurons}
+  {minSnsDissolveDelaySeconds}
+  on:nnsConfirm={vote}
+/>
diff --git a/frontend/src/lib/i18n/en.json b/frontend/src/lib/i18n/en.json
index d44bbaf91aa..e34fa0c095f 100644
--- a/frontend/src/lib/i18n/en.json
+++ b/frontend/src/lib/i18n/en.json
@@ -520,7 +520,7 @@
     "proposer_prefix": "Proposer",
     "proposer_description": "The ID of the neuron that submitted the proposal.",
     "open_voting_prefix": "Voting open:",
-    "my_votes": "My Votes",
+    "neurons_voted": "$count neurons voted",
     "loading_neurons": "Loading your neurons...",
     "unknown_nns_function": "Unknown nnsFunction",
     "nns_function_name": "nnsFunctionName",
@@ -553,8 +553,9 @@
   },
   "proposal_detail__vote": {
     "headline": "Cast Vote",
-    "neurons": "Neurons",
-    "voting_power": "Voting power",
+    "vote_with_neurons": "Vote with $votable_count/$all_count Neurons",
+    "voting_power_value": "Voting power: $value",
+    "voting_power": "Voting Power:",
     "vote_progress": "Vote Progress",
     "total": "Total",
     "adopt": "Adopt",
@@ -565,7 +566,7 @@
     "confirm_reject_text": "You are about to cast $votingPower votes against this proposal, are you sure you want to proceed?",
     "vote_status": "Neuron $neuronId has voted $vote",
     "cast_vote_neuronId": "Neuron ID $neuronId",
-    "cast_vote_votingPower": "Voting power of $votingPower",
+    "cast_vote_votingPower": "Voting Power: $votingPower",
     "vote_adopt_in_progress": "Adopting proposal $proposalType ($proposalId). $status",
     "vote_reject_in_progress": "Rejecting proposal $proposalType ($proposalId). $status",
     "vote_status_registering": "Neurons registered: $completed/$amount. Keep the dapp open until completed.",
@@ -585,8 +586,8 @@
     "cast_votes_needs": "(Yes needs $immediate_majority)"
   },
   "proposal_detail__ineligible": {
-    "headline": "Ineligible Neurons",
-    "text": "The following neurons had a dissolve delay of less than $minDissolveDelay at the time the proposal was submitted, or were created after the proposal was submitted, and therefore are not eligible to vote on it:",
+    "headline": "$count Ineligible neurons",
+    "text": "The following neurons are not eligible to vote.",
     "reason_since": "created after the proposal",
     "reason_no_permission": "no voting permission",
     "reason_short": "dissolve delay < $minDissolveDelay"
diff --git a/frontend/src/lib/types/i18n.d.ts b/frontend/src/lib/types/i18n.d.ts
index f31a1344508..0d5347d406b 100644
--- a/frontend/src/lib/types/i18n.d.ts
+++ b/frontend/src/lib/types/i18n.d.ts
@@ -540,7 +540,7 @@ interface I18nProposal_detail {
   proposer_prefix: string;
   proposer_description: string;
   open_voting_prefix: string;
-  my_votes: string;
+  neurons_voted: string;
   loading_neurons: string;
   unknown_nns_function: string;
   nns_function_name: string;
@@ -574,7 +574,8 @@ interface I18nProposal_detail {
 
 interface I18nProposal_detail__vote {
   headline: string;
-  neurons: string;
+  vote_with_neurons: string;
+  voting_power_value: string;
   voting_power: string;
   vote_progress: string;
   total: string;
diff --git a/frontend/src/lib/utils/neuron.utils.ts b/frontend/src/lib/utils/neuron.utils.ts
index 6bee6bb41e4..a0ed353f928 100644
--- a/frontend/src/lib/utils/neuron.utils.ts
+++ b/frontend/src/lib/utils/neuron.utils.ts
@@ -846,6 +846,9 @@ export const votedNeuronDetails = ({
       (compactNeuronInfoMaybe) => compactNeuronInfoMaybe.vote !== undefined
     ) as CompactNeuronInfo[];
 
+export const neuronsVotingPower = (neurons?: CompactNeuronInfo[]): bigint =>
+  neurons?.reduce((sum, { votingPower }) => sum + votingPower, 0n) ?? 0n;
+
 export const hasEnoughMaturityToStake = ({ fullNeuron }: NeuronInfo): boolean =>
   (fullNeuron?.maturityE8sEquivalent ?? 0n) > 0n;
 
diff --git a/frontend/src/tests/lib/components/proposal-detail/IneligibleNeuronsCard.spec.ts b/frontend/src/tests/lib/components/proposal-detail/IneligibleNeuronsCard.spec.ts
index f111d3ffba2..97a941b55ee 100644
--- a/frontend/src/tests/lib/components/proposal-detail/IneligibleNeuronsCard.spec.ts
+++ b/frontend/src/tests/lib/components/proposal-detail/IneligibleNeuronsCard.spec.ts
@@ -18,7 +18,7 @@ describe("IneligibleNeuronsCard", () => {
   });
 
   it("should display texts", () => {
-    const { getByText } = render(IneligibleNeuronsCard, {
+    const { getByTestId } = render(IneligibleNeuronsCard, {
       props: {
         ineligibleNeurons: [
           {
@@ -29,18 +29,10 @@ describe("IneligibleNeuronsCard", () => {
         minSnsDissolveDelaySeconds: BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE),
       },
     });
-    expect(
-      getByText(en.proposal_detail__ineligible.headline)
-    ).toBeInTheDocument();
-    expect(
-      getByText(
-        replacePlaceholders(en.proposal_detail__ineligible.text, {
-          $minDissolveDelay: secondsToDissolveDelayDuration(
-            BigInt(NNS_MINIMUM_DISSOLVE_DELAY_TO_VOTE)
-          ),
-        })
-      )
-    ).toBeInTheDocument();
+    expect(getByTestId("ineligible-neurons-description")).toBeInTheDocument();
+    expect(getByTestId("ineligible-neurons-description").textContent).toEqual(
+      "The following neurons are not eligible to vote."
+    );
   });
 
   it("should display ineligible neurons with reason 'short'", () => {
diff --git a/frontend/src/tests/lib/components/proposal-detail/MyVotes.spec.ts b/frontend/src/tests/lib/components/proposal-detail/MyVotes.spec.ts
index 615976f7cb6..c0bfd6363a9 100644
--- a/frontend/src/tests/lib/components/proposal-detail/MyVotes.spec.ts
+++ b/frontend/src/tests/lib/components/proposal-detail/MyVotes.spec.ts
@@ -18,22 +18,22 @@ describe("MyVotes", () => {
   };
   const neuronsVotedForProposal = [noVoted, yesVoted];
 
-  it("should have title when proposal has been voted by some owned neuron", () => {
-    const { getByText } = render(MyVotes, {
+  it("should display voted neurons when proposal has been voted by some owned neuron", () => {
+    const { queryAllByTestId } = render(MyVotes, {
       props: {
         neuronsVotedForProposal,
       },
     });
-    expect(getByText(en.proposal_detail.my_votes)).toBeInTheDocument();
+    expect(queryAllByTestId("neuron-data").length).toEqual(2);
   });
 
-  it("should not have title when proposal has not been voted by some owned neuron", () => {
-    const { getByText } = render(MyVotes, {
+  it("should not have voted neurons when proposal has not been voted by some owned neuron", () => {
+    const { queryAllByTestId } = render(MyVotes, {
       props: {
         neuronsVotedForProposal: [],
       },
     });
-    expect(() => getByText(en.proposal_detail.my_votes)).toThrow();
+    expect(queryAllByTestId("neuron-data").length).toEqual(0);
   });
 
   it("should render an item per voted neuron", () => {
@@ -101,4 +101,16 @@ describe("MyVotes", () => {
 
     expect(element?.getAttribute("aria-label")).toBeTruthy();
   });
+
+  it("should add colour class", () => {
+    const rejectedVotedCount = (neurons: CompactNeuronInfo[]) =>
+      render(MyVotes, {
+        props: {
+          neuronsVotedForProposal: neurons,
+        },
+      }).container.querySelectorAll(".rejected").length;
+
+    expect(rejectedVotedCount([yesVoted])).toBe(0);
+    expect(rejectedVotedCount([noVoted])).toBe(1);
+  });
 });
diff --git a/frontend/src/tests/lib/components/proposal-detail/ProposalVotingSection.spec.ts b/frontend/src/tests/lib/components/proposal-detail/ProposalVotingSection.spec.ts
index 78840db0ea5..513ded89e31 100644
--- a/frontend/src/tests/lib/components/proposal-detail/ProposalVotingSection.spec.ts
+++ b/frontend/src/tests/lib/components/proposal-detail/ProposalVotingSection.spec.ts
@@ -78,9 +78,7 @@ describe("ProposalVotingSection", () => {
         queryByText(en.proposal_detail.voting_results)
       ).toBeInTheDocument();
       expect(getByTestId("voting-confirmation-toolbar")).toBeInTheDocument();
-      expect(
-        queryByText(en.proposal_detail__ineligible.headline)
-      ).toBeInTheDocument();
+      expect(getByTestId("voting-neuron-select")).toBeInTheDocument();
     });
 
     it("should not render vote blocks if reward status has settled", () => {
diff --git a/frontend/src/tests/lib/components/proposal-detail/VotingCard/NnsVotingCard.spec.ts b/frontend/src/tests/lib/components/proposal-detail/VotingCard/NnsVotingCard.spec.ts
index ad3c39e55e9..f3a0fcab078 100644
--- a/frontend/src/tests/lib/components/proposal-detail/VotingCard/NnsVotingCard.spec.ts
+++ b/frontend/src/tests/lib/components/proposal-detail/VotingCard/NnsVotingCard.spec.ts
@@ -1,5 +1,5 @@
 import * as agent from "$lib/api/agent.api";
-import VotingCard from "$lib/components/proposal-detail/VotingCard/VotingCard.svelte";
+import NnsVotingCard from "$lib/components/proposal-detail/VotingCard/NnsVotingCard.svelte";
 import { SECONDS_IN_YEAR } from "$lib/constants/constants";
 import { authStore } from "$lib/stores/auth.store";
 import { neuronsStore } from "$lib/stores/neurons.store";
@@ -58,7 +58,7 @@ describe("VotingCard", () => {
             proposal: proposalInfo,
           }),
         } as SelectedProposalContext,
-        Component: VotingCard,
+        Component: NnsVotingCard,
       },
     });
 
diff --git a/frontend/src/tests/lib/components/proposal-detail/VotingCard/SnsVotingCard.spec.ts b/frontend/src/tests/lib/components/proposal-detail/VotingCard/SnsVotingCard.spec.ts
index 22081176a1d..7a86bc4037a 100644
--- a/frontend/src/tests/lib/components/proposal-detail/VotingCard/SnsVotingCard.spec.ts
+++ b/frontend/src/tests/lib/components/proposal-detail/VotingCard/SnsVotingCard.spec.ts
@@ -11,7 +11,6 @@ import {
   mockAuthStoreSubscribe,
   mockIdentity,
 } from "$tests/mocks/auth.store.mock";
-import en from "$tests/mocks/i18n.mock";
 import {
   createMockSnsNeuron,
   snsNervousSystemParametersMock,
@@ -245,6 +244,26 @@ describe("SnsVotingCard", () => {
     expect(queryByTestId("vote-no")).toBeInTheDocument();
   });
 
+  it("should display votable neurons", async () => {
+    snsNeuronsStore.setNeurons({
+      rootCanisterId: mockSnsCanisterId,
+      neurons: [
+        ...testNeurons,
+        // voted neuron
+        {
+          ...createMockSnsNeuron({
+            id: [3],
+            state: NeuronState.Locked,
+          }),
+        },
+      ],
+      certified: true,
+    });
+
+    const { getByTestId } = renderVotingCard();
+    expect(getByTestId("votable-neurons")).toBeInTheDocument();
+  });
+
   it("should display my votes", async () => {
     snsNeuronsStore.setNeurons({
       rootCanisterId: mockSnsCanisterId,
@@ -261,8 +280,28 @@ describe("SnsVotingCard", () => {
       certified: true,
     });
 
-    const { getByText } = renderVotingCard();
-    expect(getByText(en.proposal_detail.my_votes)).toBeInTheDocument();
+    const { getByTestId } = renderVotingCard();
+    expect(getByTestId("voted-neurons")).toBeInTheDocument();
+  });
+
+  it("should display ineligible neurons", async () => {
+    snsNeuronsStore.setNeurons({
+      rootCanisterId: mockSnsCanisterId,
+      neurons: [
+        ...testNeurons,
+        // voted neuron
+        {
+          ...createMockSnsNeuron({
+            id: [3],
+            state: NeuronState.Unspecified,
+          }),
+        },
+      ],
+      certified: true,
+    });
+
+    const { getByTestId } = renderVotingCard();
+    expect(getByTestId("ineligible-neurons")).toBeInTheDocument();
   });
 
   it("should display my votes with ballot voting power", async () => {
@@ -315,8 +354,8 @@ describe("SnsVotingCard", () => {
       certified: true,
     });
 
-    const { getByText } = renderVotingCard();
-    expect(getByText(en.proposal_detail.my_votes)).toBeInTheDocument();
+    const { getByTestId } = renderVotingCard();
+    expect(getByTestId("voted-neurons")).toBeInTheDocument();
   });
 
   describe("voting", () => {
diff --git a/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotingNeuronSelect.spec.ts b/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotableNeuronList.spec.ts
similarity index 60%
rename from frontend/src/tests/lib/components/proposal-detail/VotingCard/VotingNeuronSelect.spec.ts
rename to frontend/src/tests/lib/components/proposal-detail/VotingCard/VotableNeuronList.spec.ts
index cfa6d37d279..44cc48e2a86 100644
--- a/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotingNeuronSelect.spec.ts
+++ b/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotableNeuronList.spec.ts
@@ -1,14 +1,13 @@
-import VotingNeuronSelect from "$lib/components/proposal-detail/VotingCard/VotingNeuronSelect.svelte";
+import VotableNeuronList from "$lib/components/proposal-detail/VotingCard/VotableNeuronList.svelte";
 import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
 import { formatVotingPower } from "$lib/utils/neuron.utils";
 import { nnsNeuronToVotingNeuron } from "$lib/utils/proposals.utils";
-import en from "$tests/mocks/i18n.mock";
 import { mockNeuron } from "$tests/mocks/neurons.mock";
 import { mockProposalInfo } from "$tests/mocks/proposal.mock";
 import { Vote, type NeuronInfo } from "@dfinity/nns";
 import { render, waitFor } from "@testing-library/svelte";
 
-describe("VotingNeuronSelect", () => {
+describe("VotableNeuronList", () => {
   const neuron1 = {
     ...mockNeuron,
     neuronId: 111n,
@@ -45,47 +44,44 @@ describe("VotingNeuronSelect", () => {
   });
 
   it("should display total voting power of ballots not of neurons", async () => {
-    const { queryByText } = render(VotingNeuronSelect);
-    const ballotsVotingPower = formatVotingPower(
-      ballots[0].votingPower + ballots[1].votingPower + ballots[2].votingPower
-    );
-    expect(queryByText(ballotsVotingPower)).toBeInTheDocument();
+    const { getByTestId } = render(VotableNeuronList, {
+      props: {
+        voteRegistration: undefined,
+      },
+    });
+    expect(
+      getByTestId("voting-collapsible-toolbar-voting-power").textContent
+    ).toBe("897.00");
   });
 
   it("should not display total voting power of neurons", async () => {
-    const { queryByText } = render(VotingNeuronSelect);
+    const { getByTestId } = render(VotableNeuronList, {
+      props: {
+        voteRegistration: undefined,
+      },
+    });
     const neuronsVotingPower = formatVotingPower(
       neurons[0].votingPower + neurons[1].votingPower + neurons[2].votingPower
     );
-    expect(queryByText(neuronsVotingPower)).toBeNull();
+    expect(
+      getByTestId("voting-collapsible-toolbar-voting-power").textContent
+    ).not.toBe(neuronsVotingPower);
   });
 
   it("should recalculate total voting power after selection", async () => {
-    const { getByText } = render(VotingNeuronSelect);
-
-    votingNeuronSelectStore.toggleSelection(`${neurons[1].neuronId}`);
-    const total = formatVotingPower(
-      ballots[0].votingPower + ballots[2].votingPower
-    );
-
-    waitFor(() => expect(getByText(total)).toBeInTheDocument());
-  });
-
-  describe("No selectable neurons", () => {
-    beforeEach(() => {
-      votingNeuronSelectStore.set([]);
+    const { getByTestId } = render(VotableNeuronList, {
+      props: {
+        voteRegistration: undefined,
+      },
     });
 
-    it("should display no neurons information", () => {
-      const { getByTestId } = render(VotingNeuronSelect);
-
+    votingNeuronSelectStore.toggleSelection(`${neurons[1].neuronId}`);
+    // ballots[0].votingPower + ballots[2].votingPower
+    await waitFor(() =>
       expect(
-        getByTestId("voting-collapsible-toolbar-neurons")?.textContent?.trim()
-      ).toEqual(en.proposal_detail__vote.neurons);
-      expect(() =>
-        getByTestId("voting-collapsible-toolbar-voting-power")
-      ).toThrow();
-    });
+        getByTestId("voting-collapsible-toolbar-voting-power").textContent
+      ).toBe("598.00")
+    );
   });
 
   describe("Has selected neurons", () => {
@@ -101,21 +97,27 @@ describe("VotingNeuronSelect", () => {
     );
 
     it("should display voting power", () => {
-      const { getByTestId } = render(VotingNeuronSelect);
+      const { getByTestId } = render(VotableNeuronList, {
+        props: {
+          voteRegistration: undefined,
+        },
+      });
 
       expect(
-        getByTestId("voting-collapsible-toolbar-voting-power")
-      ).not.toBeNull();
+        getByTestId("voting-collapsible-toolbar-voting-power").textContent
+      ).toBe("897.00");
     });
 
     it("should display selectable neurons for voting power", () => {
-      const { getByTestId } = render(VotingNeuronSelect);
+      const { getByTestId } = render(VotableNeuronList, {
+        props: {
+          voteRegistration: undefined,
+        },
+      });
 
       expect(
-        getByTestId("voting-collapsible-toolbar-neurons")
-          ?.textContent?.trim()
-          .includes(`(${neurons.length}/${neurons.length})`)
-      ).toBeTruthy();
+        getByTestId("voting-collapsible-toolbar-neurons")?.textContent
+      ).toBe(`Vote with 3/3 Neurons`);
     });
   });
 });
diff --git a/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotingCard.spec.ts b/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotingCard.spec.ts
new file mode 100644
index 00000000000..9665f0486a6
--- /dev/null
+++ b/frontend/src/tests/lib/components/proposal-detail/VotingCard/VotingCard.spec.ts
@@ -0,0 +1,145 @@
+import VotingCard from "$lib/components/proposal-detail/VotingCard/VotingCard.svelte";
+import { authStore } from "$lib/stores/auth.store";
+import { votingNeuronSelectStore } from "$lib/stores/vote-registration.store";
+import type { CompactNeuronInfo } from "$lib/utils/neuron.utils";
+import { nnsNeuronToVotingNeuron } from "$lib/utils/proposals.utils";
+import { mockAuthStoreSubscribe } from "$tests/mocks/auth.store.mock";
+import { mockNeuron } from "$tests/mocks/neurons.mock";
+import { mockProposalInfo } from "$tests/mocks/proposal.mock";
+import { VotingCardPo } from "$tests/page-objects/VotingCard.page-object";
+import { JestPageObjectElement } from "$tests/page-objects/jest.page-object";
+import { runResolvedPromises } from "$tests/utils/timers.test-utils";
+import { Vote, type NeuronInfo } from "@dfinity/nns";
+import { render } from "@testing-library/svelte";
+import { describe } from "vitest";
+
+describe("VotingCard", () => {
+  const neuron1 = {
+    ...mockNeuron,
+    neuronId: 111n,
+    votingPower: 10_000_000_000n,
+  };
+  const neuron2 = {
+    ...mockNeuron,
+    neuronId: 222n,
+    votingPower: 30_000_000_000n,
+  };
+  const neuron3 = {
+    ...mockNeuron,
+    neuronId: 333n,
+    votingPower: 50_000_000_000n,
+  };
+  const neurons: NeuronInfo[] = [neuron1, neuron2, neuron3];
+  const ballots = neurons.map(({ neuronId, votingPower }) => ({
+    neuronId,
+    // Ballots and neurons have different voting power
+    votingPower: votingPower - 100_000_000n,
+    vote: Vote.No,
+  }));
+  const proposalInfo = {
+    ...mockProposalInfo,
+    ballots,
+  };
+  const yesVoted: CompactNeuronInfo = {
+    idString: "200",
+    votingPower: 200n,
+    vote: Vote.Yes,
+  };
+
+  const renderComponent = async (props = {}) => {
+    const { container } = render(VotingCard, {
+      props: {
+        hasNeurons: true,
+        visible: false,
+        neuronsReady: true,
+        voteRegistration: undefined,
+        neuronsVotedForProposal: [yesVoted],
+        ineligibleNeurons: [
+          {
+            neuronIdString: "111",
+            reason: "since",
+          },
+        ],
+        minSnsDissolveDelaySeconds: 100n,
+        ...props,
+      },
+    });
+
+    await runResolvedPromises();
+
+    return VotingCardPo.under(new JestPageObjectElement(container));
+  };
+
+  beforeEach(() => {
+    votingNeuronSelectStore.set(
+      neurons.map((neuron) =>
+        nnsNeuronToVotingNeuron({ neuron, proposal: proposalInfo })
+      )
+    );
+  });
+
+  it("should display SignIn button", async () => {
+    const po = await renderComponent();
+
+    expect(await po.getSignInButtonPo().isPresent()).toBe(true);
+  });
+
+  describe("Signed in", () => {
+    beforeEach(() => {
+      vi.spyOn(authStore, "subscribe").mockImplementation(
+        mockAuthStoreSubscribe
+      );
+    });
+
+    it("should spinner when neurons not ready", async () => {
+      const po = await renderComponent({
+        neuronsReady: false,
+      });
+      expect(await po.getSpinnerPo().isPresent()).toBe(true);
+    });
+
+    it("should hide spinner when neurons are ready", async () => {
+      const po = await renderComponent({
+        neuronsReady: true,
+      });
+      expect(await po.getSpinnerPo().isPresent()).toBe(false);
+    });
+
+    it("should display all neuron blocks", async () => {
+      const po = await renderComponent();
+
+      expect(await po.getVotableNeurons().isPresent()).toBe(true);
+      expect(await po.getVotedNeurons().isPresent()).toBe(true);
+      expect(await po.getIneligibleNeurons().isPresent()).toBe(true);
+    });
+
+    it("should not display votable neurons block", async () => {
+      votingNeuronSelectStore.reset();
+      const po = await renderComponent({});
+
+      expect(await po.getVotableNeurons().isPresent()).toBe(false);
+      expect(await po.getVotedNeurons().isPresent()).toBe(true);
+      expect(await po.getIneligibleNeurons().isPresent()).toBe(true);
+    });
+
+    it("should not display voted neurons block", async () => {
+      const po = await renderComponent({
+        neuronsVotedForProposal: [],
+      });
+
+      expect(await po.getVotableNeurons().isPresent()).toBe(true);
+      expect(await po.getVotedNeurons().isPresent()).toBe(false);
+      expect(await po.getIneligibleNeurons().isPresent()).toBe(true);
+    });
+
+    it("should not display ineligible neurons block", async () => {
+      const po = await renderComponent({
+        ineligibleNeurons: [],
+      });
+
+      expect(await po.getVotableNeurons().isPresent()).toBe(true);
+      expect(await po.getVotedNeurons().isPresent()).toBe(true);
+      expect(await po.getIneligibleNeurons().isPresent()).toBe(false);
+    });
+  });
+});
diff --git a/frontend/src/tests/lib/utils/neuron.utils.spec.ts b/frontend/src/tests/lib/utils/neuron.utils.spec.ts
index ddd4bc601b1..91b2af85c80 100644
--- a/frontend/src/tests/lib/utils/neuron.utils.spec.ts
+++ b/frontend/src/tests/lib/utils/neuron.utils.spec.ts
@@ -57,11 +57,13 @@ import {
   neuronCanBeSplit,
   neuronStake,
   neuronVotingPower,
+  neuronsVotingPower,
   sortNeuronsByCreatedTimestamp,
   topicsToFollow,
   userAuthorizedNeuron,
   validTopUpAmount,
   votedNeuronDetails,
+  type CompactNeuronInfo,
   type IneligibleNeuronData,
   type InvalidState,
   type NeuronTagData,
@@ -2138,6 +2140,24 @@ describe("neuron-utils", () => {
     });
   });
 
+  describe("votedNeuronDetails", () => {
+    it("should return neurons voting power", () => {
+      const neurons = [
+        {
+          idString: "100",
+          votingPower: 100n,
+          vote: Vote.No,
+        },
+        {
+          idString: "200",
+          votingPower: 200n,
+          vote: Vote.Yes,
+        },
+      ] as CompactNeuronInfo[];
+      expect(neuronsVotingPower(neurons)).toBe(300n);
+    });
+  });
+
   describe("neuronCanBeSplit", () => {
     it("should return true if neuron has enough stake to be splitted", () => {
       const neuron = {
diff --git a/frontend/src/tests/page-objects/SnsVotingCard.page-object.ts b/frontend/src/tests/page-objects/SnsVotingCard.page-object.ts
index 2283e8c09fd..135811ef9ac 100644
--- a/frontend/src/tests/page-objects/SnsVotingCard.page-object.ts
+++ b/frontend/src/tests/page-objects/SnsVotingCard.page-object.ts
@@ -3,7 +3,7 @@ import type { PageObjectElement } from "$tests/types/page-object.types";
 import { VotingConfirmationToolbarPo } from "./VotingConfirmationToolbar.page-object";
 
 export class SnsVotingCardPo extends BasePageObject {
-  private static readonly TID = "sns-voting-card-component";
+  private static readonly TID = "voting-card-component";
 
   private constructor(root: PageObjectElement) {
     super(root);
diff --git a/frontend/src/tests/page-objects/VotingCard.page-object.ts b/frontend/src/tests/page-objects/VotingCard.page-object.ts
index 14f0110628c..9365341a8b3 100644
--- a/frontend/src/tests/page-objects/VotingCard.page-object.ts
+++ b/frontend/src/tests/page-objects/VotingCard.page-object.ts
@@ -13,12 +13,28 @@ export class VotingCardPo extends BasePageObject {
     return new VotingCardPo(element.byTestId(VotingCardPo.TID));
   }
 
+  getVotableNeurons(): PageObjectElement {
+    return this.root.byTestId("votable-neurons");
+  }
+
+  getVotedNeurons(): PageObjectElement {
+    return this.root.byTestId("voted-neurons");
+  }
+
+  getIneligibleNeurons(): PageObjectElement {
+    return this.root.byTestId("ineligible-neurons");
+  }
+
   getVoteYesButtonPo(): ButtonPo {
     return this.getButton("vote-yes");
   }
 
-  getVoteNoButtonPo(): ButtonPo {
-    return this.getButton("vote-no");
+  getSignInButtonPo(): ButtonPo {
+    return this.getButton("login-button");
+  }
+
+  getSpinnerPo(): PageObjectElement {
+    return this.root.byTestId("loading-neurons-spinner");
   }
 
   getConfirmYesButtonPo(): ButtonPo {