diff --git a/src/renderer/pages/Staking/ui/NominatorItem.tsx b/src/renderer/pages/Staking/ui/NominatorItem.tsx
index 3d9f4fe70..0ca229712 100644
--- a/src/renderer/pages/Staking/ui/NominatorItem.tsx
+++ b/src/renderer/pages/Staking/ui/NominatorItem.tsx
@@ -1,12 +1,12 @@
 import { useUnit } from 'effector-react';
 import { type ReactNode } from 'react';
 
-import { type Account, type Address, type Asset, type Chain } from '@/shared/core';
+import { type Address, type Asset, type Chain } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { cnTw, nonNullable } from '@/shared/lib/utils';
-import { FootnoteText, Icon, Plate, Shimmering } from '@/shared/ui';
+import { FootnoteText, Icon, Plate } from '@/shared/ui';
 import { AccountExplorers } from '@/shared/ui-entities';
-import { Checkbox } from '@/shared/ui-kit';
+import { Checkbox, Skeleton } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
 import { AssetFiatBalance } from '@/entities/price';
 import { walletModel, walletUtils } from '@/entities/wallet';
@@ -17,7 +17,7 @@ type Props = {
   asset?: Asset;
   chain: Chain;
   isStakingLoading: boolean;
-  stake: NominatorInfo<Account>;
+  stake: NominatorInfo;
   content: ReactNode;
   onToggleNominator: (nominator: Address, boolean: boolean) => void;
   onCheckValidators: (stash?: Address) => void;
@@ -39,46 +39,44 @@ export const NominatorsItem = ({
   const activeWallet = useUnit(walletModel.$activeWallet);
 
   return (
-    <Plate className="grid grid-cols-[1fr,104px,104px,20px] items-center gap-x-6">
+    <Plate className="grid grid-cols-[1fr,104px,104px,20px] items-center gap-x-6 py-2.5">
       {activeWallet && !walletUtils.isWatchOnly(activeWallet) && nominatorsLength > 1 ? (
-        <div className="w-full">
+        <div className="flex w-full gap-x-2">
           <Checkbox
             disabled={isStakingLoading}
             checked={stake.isSelected}
             onChange={(checked) => onToggleNominator(stake.address, checked)}
-          >
-            <div className="grid w-full max-w-[207px] grid-cols-[minmax(10px,1fr),auto]">{content}</div>
-          </Checkbox>
+          />
+          <div className="grid w-full max-w-[207px] grid-cols-[minmax(10px,1fr),auto]">{content}</div>
         </div>
       ) : (
         <div className="grid max-w-[222px] grid-cols-[minmax(10px,1fr),auto] items-center gap-x-2">{content}</div>
       )}
-      <div className="flex flex-col items-end gap-y-0.5 justify-self-end">
-        {!stake.totalStake || !asset ? (
-          <>
-            <Shimmering width={82} height={15} />
-            <Shimmering width={56} height={10} />
-          </>
-        ) : (
-          <>
-            <AssetBalance value={stake.totalStake} asset={asset} />
-            <AssetFiatBalance amount={stake.totalStake} asset={asset} />
-          </>
-        )}
-      </div>
-      <div className="flex flex-col items-end gap-y-0.5 justify-self-end">
-        {!stake.totalReward || !asset ? (
-          <>
-            <Shimmering width={82} height={15} />
-            <Shimmering width={56} height={10} />
-          </>
-        ) : (
-          <>
-            <AssetBalance value={stake.totalReward} asset={asset} />
-            <AssetFiatBalance amount={stake.totalReward} asset={asset} />
-          </>
-        )}
-      </div>
+
+      {!stake.totalStake || !asset ? (
+        <div className="flex flex-col items-end gap-y-1.5 pb-1">
+          <Skeleton width={20} height={4} />
+          <Skeleton width={14} height={3} />
+        </div>
+      ) : (
+        <div className="flex flex-col items-end justify-self-end">
+          <AssetBalance value={stake.totalStake} asset={asset} />
+          <AssetFiatBalance amount={stake.totalStake} asset={asset} />
+        </div>
+      )}
+
+      {!stake.totalReward || !asset ? (
+        <div className="flex flex-col items-end gap-y-1.5 pb-1">
+          <Skeleton width={20} height={4} />
+          <Skeleton width={14} height={3} />
+        </div>
+      ) : (
+        <div className="flex flex-col items-end justify-self-end">
+          <AssetBalance value={stake.totalReward} asset={asset} />
+          <AssetFiatBalance amount={stake.totalReward} asset={asset} />
+        </div>
+      )}
+
       <AccountExplorers accountId={stake.account.accountId} chain={chain}>
         {nonNullable(stake.stash) && (
           <button
diff --git a/src/renderer/pages/Staking/ui/ShardedList.tsx b/src/renderer/pages/Staking/ui/ShardedList.tsx
index 653a78fa0..c20f139db 100644
--- a/src/renderer/pages/Staking/ui/ShardedList.tsx
+++ b/src/renderer/pages/Staking/ui/ShardedList.tsx
@@ -4,8 +4,8 @@ import { Trans } from 'react-i18next';
 import { type Address, type Asset, type Chain, type Explorer } from '@/shared/core';
 import { type ShardAccount } from '@/shared/core/types/account';
 import { useI18n } from '@/shared/i18n';
-import { Accordion, FootnoteText, Plate, Shimmering, Tooltip } from '@/shared/ui';
-import { Checkbox } from '@/shared/ui-kit';
+import { FootnoteText } from '@/shared/ui';
+import { CardStack, Checkbox, Skeleton, Tooltip } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
 import { AssetFiatBalance } from '@/entities/price';
 import { useStakingData } from '@/entities/staking';
@@ -66,90 +66,84 @@ export const ShardedList = ({
   );
 
   return (
-    <Plate className="border-b-4 border-double p-0 shadow-stack">
-      <Accordion className="w-auto">
-        <div className="flex rounded-md border-b border-divider px-3 py-2 transition-colors hover:bg-action-background-hover">
-          <Accordion.Button buttonClass="ml-auto w-auto" iconOpened="shelfDown" iconClosed="shelfRight" />
-          <div className="w-full p-2">
-            <Checkbox
-              checked={shardsStats.selected === shardsStake.length}
-              semiChecked={shardsStats.selected > 0 && shardsStats.selected < shardsStake.length}
-              onChange={selectAllShards}
-            >
-              <div className="grid grid-cols-[174px,104px,104px] items-center gap-x-6">
-                <div className="flex items-center gap-x-2">
-                  <FootnoteText className="h-5 rounded-full bg-input-background-disabled px-2 py-px text-text-secondary">
-                    {shardsStake.length}
-                  </FootnoteText>
-                  <FootnoteText className="truncate text-text-secondary first-letter:uppercase">
-                    {shardsStake[0].account.name}
-                  </FootnoteText>
-                  <Tooltip
-                    offsetPx={-60}
-                    content={
-                      <Trans
-                        t={t}
-                        i18nKey="staking.tooltips.redeemAndUnstake"
-                        values={{ countUnstake: shardsStats.unstaking, countWithdraw: shardsStats.withdraw }}
-                      />
-                    }
-                  >
-                    <div className="flex items-center gap-x-1">
-                      {Boolean(shardsStats.unstaking) && <span className="h-1.5 w-1.5 rounded-full bg-icon-accent" />}
-                      {Boolean(shardsStats.withdraw) && <span className="h-1.5 w-1.5 rounded-full bg-icon-positive" />}
-                    </div>
-                  </Tooltip>
-                </div>
-                <div className="flex flex-col items-end gap-y-0.5 justify-self-end">
-                  {!shardsStake[0]?.totalStake || !asset ? (
-                    <>
-                      <Shimmering width={82} height={15} />
-                      <Shimmering width={56} height={10} />
-                    </>
-                  ) : (
-                    <>
-                      <AssetBalance value={shardsStats.totalStake.toString()} asset={asset} />
-                      <AssetFiatBalance amount={shardsStats.totalStake.toString()} asset={asset} />
-                    </>
-                  )}
-                </div>
-                <div className="flex flex-col items-end gap-y-0.5 justify-self-end">
-                  {!shardsStake[0]?.totalReward || !asset ? (
-                    <>
-                      <Shimmering width={82} height={15} />
-                      <Shimmering width={56} height={10} />
-                    </>
-                  ) : (
-                    <>
-                      <AssetBalance value={shardsStats.totalReward.toString()} asset={asset} />
-                      <AssetFiatBalance amount={shardsStats.totalReward.toString()} asset={asset} />
-                    </>
-                  )}
-                </div>
+    <CardStack>
+      <CardStack.Trigger>
+        <div className="flex gap-x-2 py-1.5">
+          <Checkbox
+            checked={shardsStats.selected === shardsStake.length}
+            semiChecked={shardsStats.selected > 0 && shardsStats.selected < shardsStake.length}
+            onChange={selectAllShards}
+            onClick={(event) => event.stopPropagation()}
+          />
+          <div className="grid grid-cols-[174px,104px,104px] items-center gap-x-6">
+            <div className="flex items-center gap-x-2">
+              <FootnoteText className="h-5 rounded-full bg-input-background-disabled px-2 py-px text-text-secondary">
+                {shardsStake.length}
+              </FootnoteText>
+              <FootnoteText className="truncate text-text-secondary first-letter:uppercase">
+                {shardsStake[0].account.name}
+              </FootnoteText>
+              <Tooltip>
+                <Tooltip.Trigger>
+                  <div className="flex items-center gap-x-1">
+                    {Boolean(shardsStats.unstaking) && <span className="h-1.5 w-1.5 rounded-full bg-icon-accent" />}
+                    {Boolean(shardsStats.withdraw) && <span className="h-1.5 w-1.5 rounded-full bg-icon-positive" />}
+                  </div>
+                </Tooltip.Trigger>
+                <Tooltip.Content>
+                  <Trans
+                    t={t}
+                    i18nKey="staking.tooltips.redeemAndUnstake"
+                    values={{ countUnstake: shardsStats.unstaking, countWithdraw: shardsStats.withdraw }}
+                  />
+                </Tooltip.Content>
+              </Tooltip>
+            </div>
+
+            {!shardsStake[0]?.totalStake || !asset ? (
+              <div className="flex flex-col items-end gap-y-1.5 pb-1">
+                <Skeleton width={20} height={4} />
+                <Skeleton width={14} height={3} />
+              </div>
+            ) : (
+              <div className="flex flex-col items-end justify-self-end">
+                <AssetBalance value={shardsStats.totalStake.toString()} asset={asset} />
+                <AssetFiatBalance amount={shardsStats.totalStake.toString()} asset={asset} />
+              </div>
+            )}
+
+            {!shardsStake[0]?.totalReward || !asset ? (
+              <div className="flex flex-col items-end gap-y-1.5 pb-1">
+                <Skeleton width={20} height={4} />
+                <Skeleton width={14} height={3} />
+              </div>
+            ) : (
+              <div className="flex flex-col items-end justify-self-end">
+                <AssetBalance value={shardsStats.totalReward.toString()} asset={asset} />
+                <AssetFiatBalance amount={shardsStats.totalReward.toString()} asset={asset} />
               </div>
-            </Checkbox>
+            )}
           </div>
         </div>
-
-        <Accordion.Content>
-          <ul className="pl-6">
-            {shardsStake.map((shard) => (
-              <li key={shard.account.id}>
-                <NominatorsItem
-                  isStakingLoading={isStakingLoading}
-                  content={getContent(shard)}
-                  stake={shard}
-                  nominatorsLength={shardsStake.length}
-                  asset={asset}
-                  chain={chain}
-                  onToggleNominator={onToggleNominator}
-                  onCheckValidators={onCheckValidators}
-                />
-              </li>
-            ))}
-          </ul>
-        </Accordion.Content>
-      </Accordion>
-    </Plate>
+      </CardStack.Trigger>
+      <CardStack.Content>
+        <ul className="pl-6">
+          {shardsStake.map((shard) => (
+            <li key={shard.account.id}>
+              <NominatorsItem
+                isStakingLoading={isStakingLoading}
+                content={getContent(shard)}
+                stake={shard}
+                nominatorsLength={shardsStake.length}
+                asset={asset}
+                chain={chain}
+                onToggleNominator={onToggleNominator}
+                onCheckValidators={onCheckValidators}
+              />
+            </li>
+          ))}
+        </ul>
+      </CardStack.Content>
+    </CardStack>
   );
 };
diff --git a/src/renderer/shared/ui-kit/Checkbox/Checkbox.tsx b/src/renderer/shared/ui-kit/Checkbox/Checkbox.tsx
index 1979e5435..67a1270eb 100644
--- a/src/renderer/shared/ui-kit/Checkbox/Checkbox.tsx
+++ b/src/renderer/shared/ui-kit/Checkbox/Checkbox.tsx
@@ -1,10 +1,10 @@
 import * as CheckboxItem from '@radix-ui/react-checkbox';
-import { type PropsWithChildren } from 'react';
+import { type MouseEvent, type PropsWithChildren } from 'react';
 
 import { cnTw } from '@/shared/lib/utils';
-import './Checkbox.css';
 import { Icon } from '@/shared/ui/Icon/Icon';
 import { LabelText } from '@/shared/ui/Typography';
+import './Checkbox.css';
 
 type Props = {
   checked?: boolean;
@@ -12,6 +12,7 @@ type Props = {
   disabled?: boolean;
   checkboxPosition?: 'center' | 'top';
   onChange?: (checked: boolean, semiChecked?: boolean) => void;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
 export const Checkbox = ({
@@ -21,6 +22,7 @@ export const Checkbox = ({
   checkboxPosition = 'center',
   children,
   onChange,
+  onClick,
 }: PropsWithChildren<Props>) => {
   const checkedState = checked ? true : semiChecked ? 'indeterminate' : false;
   const iconColor = disabled ? 'text-filter-border' : 'text-white';
@@ -48,13 +50,14 @@ export const Checkbox = ({
         )}
         disabled={disabled}
         onCheckedChange={handleChange}
+        onClick={onClick}
       >
         <CheckboxItem.Indicator>
           {checked && <Icon name="checked" size={16} className={iconColor} />}
           {!checked && semiChecked && <Icon name="semiChecked" size={16} className={iconColor} />}
         </CheckboxItem.Indicator>
       </CheckboxItem.Root>
-      {Boolean(children) && children}
+      {children}
     </LabelText>
   );
 };
diff --git a/src/renderer/shared/ui/Markdown/Markdown.tsx b/src/renderer/shared/ui/Markdown/Markdown.tsx
index 06136f7dc..305dbf936 100644
--- a/src/renderer/shared/ui/Markdown/Markdown.tsx
+++ b/src/renderer/shared/ui/Markdown/Markdown.tsx
@@ -1,3 +1,4 @@
+import noop from 'lodash/noop';
 import { type ChangeEvent, useState } from 'react';
 import ReactMarkdown, { type Components, type Options } from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
@@ -72,17 +73,16 @@ const components: Components = {
       <Checkbox
         {...props}
         onChange={(newCheckedState: boolean) => {
-          if (typeof props.onChange === 'function') {
-            // Simulate a ChangeEvent for props.onChange to fit types
-            const event = {
-              target: {
-                checked: newCheckedState,
-              },
-            } as ChangeEvent<HTMLInputElement>;
+          if (typeof props.onChange !== 'function') return;
 
-            props.onChange(event);
-          }
+          const event = {
+            target: {
+              checked: newCheckedState,
+            },
+          } as ChangeEvent<HTMLInputElement>;
+          props.onChange(event);
         }}
+        onClick={noop}
       />
     ) : (
       <input {...props} />