diff --git a/src/components/global/Breadcrumbs.jsx b/src/components/global/Breadcrumbs.jsx
new file mode 100644
index 00000000..1e94ed30
--- /dev/null
+++ b/src/components/global/Breadcrumbs.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+/**
+ * Simple breadcrumb navigation
+ * @param {Array<{label: string, to?: string}>} items
+ */
+const Breadcrumbs = ({ items = [] }) => {
+  if (!items.length) return null;
+  return (
+    <nav className="breadcrumbs" aria-label="Breadcrumb">
+      {items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        return (
+          <span key={idx} className={isLast ? 'breadcrumb-current' : 'breadcrumb-item'}>
+            {item.to && !isLast ? (
+              <Link to={item.to}>{item.label}</Link>
+            ) : (
+              <span aria-current={isLast ? 'page' : undefined}>{item.label}</span>
+            )}
+            {!isLast && <span className="breadcrumb-sep" aria-hidden>›</span>}
+          </span>
+        );
+      })}
+    </nav>
+  );
+};
+
+export default Breadcrumbs;
+
diff --git a/src/components/governance/AddressList.jsx b/src/components/governance/AddressList.jsx
index 1ee61213..12b6e5bb 100644
--- a/src/components/governance/AddressList.jsx
+++ b/src/components/governance/AddressList.jsx
@@ -181,9 +181,12 @@ const AddressList = ({proposal, vote, onAfterVote}) => {
           // })
         })
         .catch(err => {
+          const message = (voteData === 'Invalid network version')
+            ? 'Invalid network version'
+            : (err?.response?.data?.message || err?.message || 'Unknown error');
           addressErrorVote.push({
             name: address.name,
-            err: (voteData === 'Invalid network version') ? 'Invalid network version' : err.response.data.message
+            err: message
           })
         });
     }
@@ -233,9 +236,12 @@ const AddressList = ({proposal, vote, onAfterVote}) => {
         </>
       ) : (
         <>
-          {
-            loadingAddress && <p>Loading...</p>
-          }
+          {loadingAddress && (
+            <div className="loading loading--center" role="status" aria-live="polite">
+              <div className="spinner" aria-hidden></div>
+              <span className="loading__label">Loading addresses…</span>
+            </div>
+          )}
           {
             (!loadingAddress && addressList.length === 0) && <p>You don't have a voting address please add one</p>
           }
diff --git a/src/components/governance/ProposalCard.jsx b/src/components/governance/ProposalCard.jsx
index f360b6fc..dc02e39b 100644
--- a/src/components/governance/ProposalCard.jsx
+++ b/src/components/governance/ProposalCard.jsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import { Collapse } from "react-collapse";
 import swal from "sweetalert2";
 
 import { useUser } from "../../context/user-context";
+import { VOTE_OUTCOME } from "../../constants/votes";
 import ProposalCardInfo from "./ProposalCardInfo";
 import CustomModal from "../global/CustomModal";
 import AddressList from "./AddressList";
@@ -35,6 +36,9 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
   const [month_remaining, setMonth_remaining] = useState(0);
   const [payment_type, setPayment_type] = useState("");
   const [vote, setVote] = useState("");
+  const titleButtonRef = useRef(null);
+  const touchStartX = useRef(null);
+  const touchStartY = useRef(null);
 
   /**
    * UseEffect that calculates the approx payment dates of the current proposal
@@ -74,6 +78,8 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
     };
   }, [proposal]);
 
+  
+
   /**
    * Function that receives a string of a number with , as separator and returns it without it
    * @function
@@ -157,7 +163,7 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
   };
 
   return (
-    <div className="proposal">
+    <div className={`proposal ${useCollapse ? 'proposal--expanded' : ''}`} role="region" aria-labelledby={`proposal-title-${proposal.Hash}`}>
       <div className="vote-count">
         <span className="yes">{proposal.YesCount}</span>
         <span className="no">{proposal.NoCount}</span>
@@ -171,13 +177,36 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
       <div className="description">
         <div className="date">{proposalDate(proposal.CreationTime)}</div>
 
-        <span
-          title="more info"
-          style={{ cursor: "pointer" }}
+        <button
+          id={`proposal-title-${proposal.Hash}`}
+          ref={titleButtonRef}
+          className={`proposal-title ${useCollapse ? 'expanded' : ''}`}
+          aria-expanded={useCollapse}
+          aria-controls={`proposal-details-${proposal.Hash}`}
           onClick={() => setUseCollapse(!useCollapse)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setUseCollapse(!useCollapse);
+            }
+          }}
+          onTouchStart={(e) => {
+            const t = e.changedTouches[0];
+            touchStartX.current = t.clientX;
+            touchStartY.current = t.clientY;
+          }}
+          onTouchEnd={(e) => {
+            const t = e.changedTouches[0];
+            const dx = t.clientX - (touchStartX.current ?? 0);
+            const dy = t.clientY - (touchStartY.current ?? 0);
+            if (Math.abs(dx) > 40 && Math.abs(dy) < 30) {
+              setUseCollapse((prev) => !prev);
+            }
+          }}
         >
-          {proposal.title || proposal.name}
-        </span>
+          <span className="proposal-title__text">{proposal.title || proposal.name}</span>
+          <span className="proposal-title__icon" aria-hidden>{useCollapse ? '▾' : '▸'}</span>
+        </button>
 
         <br />
 
@@ -191,47 +220,56 @@ function ProposalCard({ proposal, enabled, userInfo, onLoadProposals }) {
           isOpened={useCollapse}
           initialStyle={{ height: 0, overflow: "hidden" }}
         >
-          <div className={"ReactCollapse--collapse"}>
+          <div className={"ReactCollapse--collapse"} id={`proposal-details-${proposal.Hash}`}>
             <ProposalCardInfo
               proposal={proposal}
               days_remaining={days_remaining}
               month_remaining={month_remaining}
               payment_type={payment_type}
             />
+            <div className="proposal-back">
+              <button
+                className="btn btn--ghost"
+                onClick={() => {
+                  setUseCollapse(false);
+                  titleButtonRef.current && titleButtonRef.current.focus();
+                }}
+                aria-label={t('govlist.back_to_proposals', 'Back to Proposals')}
+              >
+                ← {t('govlist.back_to_proposals', 'Back to Proposals')}
+              </button>
+            </div>
           </div>
         </Collapse>
       </div>
       {user && (
         <div className="actions">
           <button
-            style={{ border: "none", outline: "none" }}
             className="vote vote--yes"
             title={t("govlist.vote.yes_tooltip", "Vote YES - Support this proposal")}
             aria-label={t("govlist.vote.yes_aria", "Vote yes for this proposal")}
             disabled={userInfo ? false : true}
-            onClick={() => openMnVote(1)}
+            onClick={() => openMnVote(VOTE_OUTCOME.YES)}
           >
             <span className="vote-emoji">👍</span>
             <span className="vote-label">{t("govlist.vote.yes", "Vote Yes")}</span>
           </button>
           <button
-            style={{ border: "none", outline: "none" }}
             className="vote vote--abstain"
             title={t("govlist.vote.abstain_tooltip", "ABSTAIN - Neutral vote")}
             aria-label={t("govlist.vote.abstain_aria", "Abstain from voting on this proposal")}
             disabled={userInfo ? false : true}
-            onClick={() => openMnVote(3)}
+            onClick={() => openMnVote(VOTE_OUTCOME.ABSTAIN)}
           >
             <span className="vote-emoji">➖</span>
             <span className="vote-label">{t("govlist.vote.abstain", "Abstain")}</span>
           </button>
           <button
-            style={{ border: "none", outline: "none" }}
             className="vote vote--no"
             title={t("govlist.vote.no_tooltip", "Vote NO - Reject this proposal")}
             aria-label={t("govlist.vote.no_aria", "Vote no for this proposal")}
             disabled={userInfo ? false : true}
-            onClick={() => openMnVote(2)}
+            onClick={() => openMnVote(VOTE_OUTCOME.NO)}
           >
             <span className="vote-emoji">👎</span>
             <span className="vote-label">{t("govlist.vote.no", "Vote No")}</span>
diff --git a/src/components/governance/ProposalCardInfo.jsx b/src/components/governance/ProposalCardInfo.jsx
index 291b4cab..38a59f1f 100644
--- a/src/components/governance/ProposalCardInfo.jsx
+++ b/src/components/governance/ProposalCardInfo.jsx
@@ -101,15 +101,36 @@ function ProposalCardInfo({
           } Remaining)`}</span>
         )}
       </p>
-      <span style={{ lineHeight: "1.5" }}>Voting string:</span>
+      <span style={{ lineHeight: "1.5" }}>Voting strings (CLI):</span>
       <div className="input-form">
-        <div className="form-group">
+        <div className="form-group" style={{marginBottom: '6px'}}>
           <textarea
             type="text"
             className="styled"
             style={{ resize: "none" }}
             value={`gobject_vote_many ${proposal.Key} funding yes`}
             disabled={true}
+            aria-label="CLI vote yes command"
+          />
+        </div>
+        <div className="form-group" style={{marginBottom: '6px'}}>
+          <textarea
+            type="text"
+            className="styled"
+            style={{ resize: "none" }}
+            value={`gobject_vote_many ${proposal.Key} funding no`}
+            disabled={true}
+            aria-label="CLI vote no command"
+          />
+        </div>
+        <div className="form-group">
+          <textarea
+            type="text"
+            className="styled"
+            style={{ resize: "none" }}
+            value={`gobject_vote_many ${proposal.Key} funding abstain`}
+            disabled={true}
+            aria-label="CLI vote abstain command"
           />
         </div>
       </div>
diff --git a/src/components/governance/ProposalsList.jsx b/src/components/governance/ProposalsList.jsx
index 8ae954d1..4e6d5c3d 100644
--- a/src/components/governance/ProposalsList.jsx
+++ b/src/components/governance/ProposalsList.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState, useCallback, useMemo, useRef } from 'react'
 import axios from 'axios';
 import { withTranslation } from "react-i18next";
 import { useUser } from '../../context/user-context';
+import swal from 'sweetalert2';
 
 import { list, getUserInfo } from '../../utils/request';
 
@@ -83,12 +84,30 @@ function ProposalsList(props) {
     }
   }, [cancelSource, loadProposals, loadUserInfo]);
 
+  useEffect(() => {
+    if (dataload === 2) {
+      swal.fire({
+        toast: true,
+        position: 'top-end',
+        icon: 'error',
+        title: t('govlist.error_fetch', 'Failed to fetch proposals'),
+        showConfirmButton: false,
+        timer: 2500
+      });
+    }
+  }, [dataload, t]);
+
 
   return (
     <>
       <SubTitle heading={t('govlist.table.title')} />
       {
-        (dataload === 0) && <p className="text-center">{t('govlist.loading')}</p>
+        (dataload === 0) && (
+          <div className="loading loading--center" role="status" aria-live="polite">
+            <div className="spinner" aria-hidden></div>
+            <span className="loading__label">{t('govlist.loading', 'Loading proposals...')}</span>
+          </div>
+        )
       }
       {
         (dataload === 1 && proposals.length > 0) && <div className="proposals">
diff --git a/src/constants/votes.js b/src/constants/votes.js
new file mode 100644
index 00000000..f0163f1e
--- /dev/null
+++ b/src/constants/votes.js
@@ -0,0 +1,15 @@
+export const VOTE_SIGNAL = {
+  NONE: 0,
+  FUNDING: 1,
+  VALID: 2,
+  DELETE: 3,
+  ENDORSED: 4,
+};
+
+export const VOTE_OUTCOME = {
+  NONE: 0,
+  YES: 1,
+  NO: 2,
+  ABSTAIN: 3,
+};
+
diff --git a/src/pages/Governance.js b/src/pages/Governance.js
index 40a5c89e..c5df6b05 100644
--- a/src/pages/Governance.js
+++ b/src/pages/Governance.js
@@ -9,6 +9,7 @@ import BackgroundInner from "../components/global/BackgroundInner";
 import BannerImage from "../components/global/BannerImage";
 import GovDetails from "../components/governance/GovDetails";
 import ProposalsList from "../components/governance/ProposalsList";
+import Breadcrumbs from "../components/global/Breadcrumbs";
 
 const API_URI = process.env.REACT_APP_SYS_API_URI;
 
@@ -155,6 +156,10 @@ class Governance extends Component {
           <div className="shell-large">
             <div className="section__body">
               <div className="articles">
+                <Breadcrumbs items={[
+                  { label: t('header.home', 'Home'), to: '/' },
+                  { label: t('header.governance', 'Governance') }
+                ]} />
                 <BannerImage
                   heading={t("governance.heading")}
                   direction="top-right"
@@ -168,6 +173,7 @@ class Governance extends Component {
                       <div className="cols">
                         <div className="col col--size12">
                           <div className="article__content">
+                            <h2 className="section-heading" id="proposals-heading">{t('govlist.table.title')}</h2>
                             <ProposalsList
                               statsData={this.state.statsData.stats.mn_stats}
                             />
diff --git a/src/scss/_tables.scss b/src/scss/_tables.scss
index 65ec8a14..d6be5094 100644
--- a/src/scss/_tables.scss
+++ b/src/scss/_tables.scss
@@ -153,6 +153,20 @@ ul.pagination
         padding:20px;
         @include border-radius(3px);
         margin-bottom:10px;
+        border: 1px solid transparent;
+        @include transition(all, .15s);
+
+        &:hover {
+            background: rgba(255,255,255,0.18);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+            border-color: rgba(255,255,255,0.25);
+        }
+
+        &.proposal--expanded {
+            background: rgba(255,255,255,0.24);
+            box-shadow: 0 4px 14px rgba(0,0,0,0.35);
+            border-color: rgba(255,255,255,0.35);
+        }
 
         .vote-count
         {
@@ -222,6 +236,35 @@ ul.pagination
             font-size:24px;
             color:white;
 
+            .proposal-title {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                color: #fff;
+                background: transparent;
+                border: none;
+                padding: 2px 4px;
+                margin: 0;
+                cursor: pointer;
+                text-decoration: underline;
+                text-decoration-color: rgba(255,255,255,0.5);
+                text-underline-offset: 2px;
+                font-size: inherit;
+                line-height: 1.2;
+                border-radius: 4px;
+                @include transition(all, .15s);
+            }
+            .proposal-title:hover,
+            .proposal-title:focus {
+                outline: 2px solid rgba(255,255,255,0.35);
+                outline-offset: 2px;
+                background: rgba(255,255,255,0.10);
+            }
+            .proposal-title__icon {
+                font-size: 0.9em;
+                opacity: 0.9;
+            }
+
             .date 
             {
                 color:$off-white;
@@ -242,6 +285,10 @@ ul.pagination
             
         }
 
+        .proposal-back {
+            margin-top: 12px;
+        }
+
         .actions 
         {
             width:10%;
@@ -251,8 +298,8 @@ ul.pagination
             {
                 line-height: 1.2;
                 text-align: center;
-                width: 90px;
-                height: 36px;
+                width: 100px;
+                height: 44px;
                 float: right;
                 clear: right;
                 margin-bottom: 4px;
@@ -277,8 +324,7 @@ ul.pagination
 
                 &:focus
                 {
-                    outline: 2px solid $color-blue-main;
-                    outline-offset: 2px;
+                    box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.35);
                 }
 
                 &:disabled
@@ -316,7 +362,7 @@ ul.pagination
                     }
                     &:focus
                     {
-                        outline-color: #28a745;
+                        box-shadow: 0 0 0 3px rgba(40,167,69,0.35);
                     }
                 }
 
@@ -331,7 +377,7 @@ ul.pagination
                     }
                     &:focus
                     {
-                        outline-color: #6c757d;
+                        box-shadow: 0 0 0 3px rgba(108,117,125,0.35);
                     }
                 }
 
@@ -346,7 +392,7 @@ ul.pagination
                     }
                     &:focus
                     {
-                        outline-color: #dc3545;
+                        box-shadow: 0 0 0 3px rgba(220,53,69,0.35);
                     }
                 }
             }
@@ -354,6 +400,33 @@ ul.pagination
     }
 }
 
+/* Breadcrumbs */
+.breadcrumbs {
+    font-size: 14px;
+    color: #ddd;
+    margin: 10px 0 20px;
+}
+.breadcrumbs a {
+    color: #fff;
+    text-decoration: underline;
+}
+.breadcrumbs .breadcrumb-sep {
+    margin: 0 8px;
+    opacity: .7;
+}
+.breadcrumbs .breadcrumb-current {
+    color: #fff;
+}
+
+/* Loading spinner */
+.loading--center { display: flex; align-items: center; justify-content: center; gap: 10px; }
+.spinner {
+    width: 18px; height: 18px; border-radius: 50%;
+    border: 2px solid rgba(255,255,255,0.25); border-top-color: #fff;
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
+
 .ministats, .world-dist
 {
     .subtitle 
@@ -610,4 +683,4 @@ ul.pagination
             width:25%;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/utils/sign-vote.js b/src/utils/sign-vote.js
index 12ba6446..a0a922b9 100644
--- a/src/utils/sign-vote.js
+++ b/src/utils/sign-vote.js
@@ -27,7 +27,7 @@ const signVote = (obj) => {
     const time = Math.floor(Date.now() / 1000);
     const gObjectHashBuffer = Buffer.from(gObjectHash, "hex");
     const voteSignalNum = 1; // 'funding'
-    const voteOutcomeNum = voteOutcome; // 1 for yes. 2 for no. 0 for abstain
+    const voteOutcomeNum = voteOutcome; // 1 = yes, 2 = no, 3 = abstain
 
     const masterNodeTx = vinMasternode.split("-");